:root{
    --paper:#ffffff;
    --paper-alt:#f5f5f5;
    --ink:#111111;
    --ink-soft:#4a4a4a;
    --ink-faint:#6e6e6e;
    --pine:#111111;
    --pine-deep:#000000;
    --gold:#fdc300;
    --terracotta:#fdc300;
    --terracotta-deep:#111111;
    --line:#e5e5e5;
    --card:#ffffff;
    --white:#ffffff;
    --shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 40px -20px rgba(0,0,0,.28);
    --dur:.22s;
  }
  
  :root[data-theme="dark"]{
    --paper:#0d0d0d;
    --paper-alt:#1a1a1a;
    --ink:#f5f5f5;
    --ink-soft:#c4c4c4;
    --ink-faint:#9e9e9e;
    --line:#333333;
    --card:#1a1a1a;
    --white:#1a1a1a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -20px rgba(0,0,0,.6);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  html,body{ margin:0; color:var(--ink); }
  html{ background:var(--paper); }
  body{
    background-color:var(--paper);
    
    background-repeat:repeat;
    background-size:auto, 640px auto;
  }
  
  :root[data-theme="dark"] body{ background-image:none; }
  body{ font-family:"Montserrat",-apple-system,"Segoe UI",sans-serif; overflow-x:hidden; }
  h1,h2,h3{ font-family:"Montserrat",sans-serif; text-wrap:balance; margin:0; font-weight:600; }
  .mono{ font-family:"Montserrat",sans-serif; }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  button{ font-family:inherit; cursor:pointer; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  }
  :focus-visible{ outline:3px solid var(--terracotta); outline-offset:2px; border-radius:4px; }

  .skip-link{ position:absolute; left:1rem; top:-3rem; background:var(--pine-deep); color:#f5f5f5; padding:.7rem 1.2rem; border-radius:8px; z-index:999; transition:top var(--dur) ease; font-size:.85rem; }
  .skip-link:focus{ top:1rem; }

  .wrap{ max-width:1280px; margin:0 auto; padding-left:clamp(1.2rem,4vw,3rem); padding-right:clamp(1.2rem,4vw,3rem); }

  /* NAV — condenses with blur on scroll */
  header.top{ position:relative; z-index:50; padding-top:0; transition:padding var(--dur) ease, background var(--dur) ease, box-shadow var(--dur) ease; }
  header.top.scrolled{ padding-top:0; background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(160%); box-shadow:0 6px 24px -14px rgba(0,0,0,.25); }
  .top-brush{
    position:absolute; top:0; left:0; right:0; width:100%; height:clamp(92px,13vw,128px);
    display:block; pointer-events:none; z-index:0;
    transition:opacity .25s ease;
  }
  header.top.scrolled .top-brush{ opacity:0; }
  .nav-wrap{
    position:relative; z-index:1;
    display:flex; align-items:center; justify-content:space-between; max-width:1280px; margin:0 auto;
    padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.2rem,4vw,3rem) 1.1rem; transition:padding var(--dur) ease;
  }
  header.top.scrolled .nav-wrap{ padding-top:.9rem; padding-bottom:.9rem; }
  .logo{ display:flex; align-items:center; gap:.7rem; }
  .logo-full{ height:2.6rem; width:auto; display:block; transition:height var(--dur); }
  .foot-grid .logo-full{ height:3rem; }

  header.top.scrolled .logo-full{ height:2.15rem; }

  nav.mainnav{ display:flex; gap:1.9rem; font-size:.95rem; font-weight:400; font-family:"Montserrat",sans-serif; letter-spacing:.01em; }
  nav.mainnav a{ position:relative; text-decoration:none; padding-bottom:.35rem; color:var(--pine); transition:color .2s ease; }
  nav.mainnav a:hover{ color:var(--terracotta-deep); }
  nav.mainnav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--terracotta); transition:right .25s ease; }
  nav.mainnav a:hover::after, nav.mainnav a:focus-visible::after{ right:0; }
  @media (max-width:940px){ nav.mainnav{ display:none; } }
  .nav-cta{ background:var(--pine); color:#f5f5f5; padding:.65rem 1.3rem; border-radius:99px; font-size:.95rem; font-weight:400; font-family:"Montserrat",sans-serif; letter-spacing:.01em; text-decoration:none; white-space:nowrap; transition:background .2s ease; }
  .nav-cta:hover{ background:var(--terracotta-deep); }

  /* HERO */
  .hero{ position:relative; max-width:1280px; margin:0 auto; padding:clamp(3.5rem,7vw,6.5rem) clamp(1.2rem,4vw,3rem) clamp(3.5rem,6vw,5.5rem); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(3.5rem,6vw,6rem); align-items:center; }
  @media (max-width:940px){ .hero{ grid-template-columns:1fr; } }


  .hero h1{ font-size:clamp(2.3rem,4.4vw,3.8rem); line-height:1.16; letter-spacing:-.01em; margin:0 0 .3rem; }
  .hero h1 em{ font-style:normal; color:var(--pine); }
  .brush-wrap{ position:relative; display:inline-block; padding:0 .1em; }
  .brush-wrap .brush-svg{ position:absolute; left:-10%; right:-10%; top:-22%; bottom:-30%; width:120%; height:152%; z-index:0; pointer-events:none; transform:rotate(-2deg); }
  .brush-wrap .brush-fill{ fill:var(--pine); }
  .brush-wrap em{ position:relative; z-index:1; }
  .hero p.lead{ font-size:1.1rem; color:var(--ink-soft); max-width:44ch; margin:2.2rem 0 3.2rem; line-height:1.8; }
  .hero-actions{ display:flex; gap:1.3rem; flex-wrap:wrap; margin-bottom:1.2rem; }
  .hero-actions .btn{ font-family:"Montserrat",sans-serif; font-weight:400; font-size:1.05rem; letter-spacing:.02em; }
  .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.6rem; border-radius:99px; font-size:.92rem; font-weight:600; text-decoration:none; border:1.5px solid transparent; min-height:44px; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow var(--dur) ease, background-color .28s ease, border-color .28s ease, color .28s ease; font-family:"Montserrat",sans-serif; }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(253,195,0,.5); }
  .btn.primary{ background:var(--pine); color:#f5f5f5; }
  .btn.primary:hover{ background:var(--terracotta); }
  .btn.ghost{ border-color:var(--ink); color:var(--ink); }
  .btn.ghost.cta-green{ background:var(--pine); border-color:transparent; color:#ffffff; }
  .btn.ghost.cta-green:hover{ background:var(--terracotta-deep); border-color:transparent; color:#ffffff; }
  .btn.ghost.cta-terracotta-fill{ background:var(--terracotta-deep); border-color:transparent; color:#ffffff; }
  .btn.ghost.cta-terracotta-fill:hover{ background:var(--pine-deep); border-color:transparent; color:#ffffff; }
  .btn.ghost:hover{ border-color:var(--terracotta); color:var(--terracotta); }
  .btn.on-gold{ background:var(--gold); color:var(--pine-deep); }
  .btn.on-gold.cta-terracotta{ background:var(--terracotta-deep); color:#ffffff; }
  .btn.on-gold.cta-terracotta:hover{ background:var(--pine-deep); color:#ffffff; }
  .btn.on-gold:hover{ background:var(--terracotta); color:#ffffff; }
  .hero-stats{ display:flex; gap:3.2rem; margin-top:4.2rem; padding-top:2.4rem; border-top:1px solid var(--line); }
  .hero-stats div b{ display:block; font-family:"Montserrat",sans-serif; font-size:1.5rem; color:var(--pine); }
  .hero-stats div span{ font-size:.76rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }

  .hero-visual{ position:relative; }
  .contour{ position:absolute; inset:-15% -10%; z-index:0; opacity:.5; pointer-events:none; }
  .photo-frame{ position:relative; z-index:1; background:linear-gradient(160deg,var(--paper-alt),var(--paper)); border-radius:16px; padding:2.2rem 2rem 1.6rem; }
  .photo-frame img{ width:100%; border-radius:4px; transition:transform .35s ease; }
  .photo-caption{ display:flex; justify-content:space-between; font-family:"Montserrat",sans-serif; font-size:.68rem; color:var(--ink-faint); margin-top:1.2rem; text-transform:uppercase; letter-spacing:.04em; }

  section{ max-width:100%!important; margin:0 auto; padding:5.5rem 10%; scroll-margin-top:5.5rem; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.8rem; flex-wrap:wrap; }
  .section-head .eyebrow{ font-family:"Montserrat",sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--terracotta-deep); margin-bottom:.6rem; }
  #stock .section-head .eyebrow{ font-weight:700; }
  .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); }
  .blog .section-head h2{ font-size:clamp(2rem,3.6vw,2.8rem); }
  .section-head p{ max-width:38ch; color:var(--ink-soft); font-size:.95rem; }

  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }

  /* GAMME */
  .gamme{ background:#ffffff; color:var(--ink); border-radius:0; position:relative; overflow:hidden; padding-top:clamp(4rem,9vw,7.5rem); }
  .gamme::before{ content:""; position:absolute; inset:0; opacity:.06; background-image:radial-gradient(circle at 15% 20%, #fff 0, transparent 35%), radial-gradient(circle at 85% 75%, #fff 0, transparent 40%); pointer-events:none; }
  .gamme .section-head .eyebrow{ color:var(--gold); }
  .gamme .section-head p{ color:#c4c4c4; }
  .model-strip{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(170px,auto); gap:1.2rem;
    grid-template-areas:
      "m1  tri tri"
      "m3  tri tri"
      "m4  m5  m6"; }
  .model-card.featured{ grid-area:tri; }
  .model-card[data-slot="m1"]{ grid-area:m1; }
  .model-card[data-slot="m3"]{ grid-area:m3; }
  .model-card[data-slot="m4"]{ grid-area:m4; }
  .model-card[data-slot="m5"]{ grid-area:m5; }
  .model-card[data-slot="m6"]{ grid-area:m6; }
  @media (max-width:980px){
    .model-strip{ grid-template-columns:repeat(2,1fr);
      grid-template-areas:
        "tri tri"
        "tri tri"
        "m1  m3"
        "m4  m5"
        "m6  m6"; }
  }
  @media (max-width:640px){
    .model-strip{ grid-template-columns:1fr; grid-template-areas:none; }
    .model-card.featured, .model-card[data-slot]{ grid-area:auto; }
  }
  .model-card.featured .model-photo{ height:100%; min-height:260px; }
  .model-card.featured .mn-tag{ font-size:1.55rem; }
  .model-card.featured .model-body{ padding:1.7rem 1.7rem 1.9rem; }
  .model-card.featured .mtag{ font-size:.9rem; }
  .model-card.featured .mt{ font-size:.92rem; }
  .model-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .model-card:hover{ transform:translateY(-6px); box-shadow:0 24px 46px -20px rgba(0,0,0,.45); border-color:rgba(253,195,0,.4); }
  .model-photo{ height:150px; position:relative; overflow:hidden; }
  .model-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  
  .model-photo .mn-tag{ position:absolute; left:1rem; bottom:.9rem; font-family:"Montserrat",sans-serif; font-size:1.2rem; color:#ffffff; background:var(--pine-deep); padding:.3rem .8rem; border-radius:8px; pointer-events:none; }
  .model-body{ padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
  .model-body .mn{ font-family:"Montserrat",sans-serif; font-size:1.2rem; }
  .model-body .mtag{ font-style:italic; font-size:.82rem; color:var(--gold); margin-top:-.5rem; }
  .model-body .mt{ font-size:.85rem; color:#c4c4c4; line-height:1.55; margin:0; }



  .model-specs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; font-size:.76rem; color:#c4c4c4; }

  .model-specs li::before{ content:"— "; color:var(--gold); }
  .model-body a.discover{ margin-top:auto; align-self:flex-start; padding:.6rem 1.25rem; font-size:.9rem; font-weight:400; font-family:"Montserrat",sans-serif; letter-spacing:.02em; color:#ffffff; text-decoration:none; background:var(--terracotta-deep); border-radius:99px; transition:background .2s ease, transform .2s ease; }
  .model-body a.discover:hover{ background:var(--pine-deep); }
  .gamme-cta{ position:relative; text-align:center; margin-top:2.8rem; }

  /* SERVICES */
  .services{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
  @media (max-width:940px){ .services{ grid-template-columns:1fr; } }
  .service-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
  .service-card .service-photo{ height:170px; position:relative; color:#f5f5f5; }
  .service-card .service-photo img{ width:100%; height:100%; object-fit:cover; }
  .photo-slot{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; height:100%; }
  .photo-slot .ph-label{ font-family:"Montserrat",sans-serif; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; text-align:center; padding:0 1rem; }
  .photo-slot::after{ content:""; position:absolute; inset:.6rem; border:1.5px dashed rgba(255,255,255,.32); border-radius:10px; pointer-events:none; }
  .photo-slot.on-light::after{ border-color:rgba(0,0,0,.18); }
  .service-copy{ padding:1.8rem 1.7rem 2rem; display:flex; flex-direction:column; flex:1; }
  .service-copy .num{ font-family:"Montserrat",sans-serif; font-size:.75rem; color:var(--terracotta); }
  .service-copy h3{ font-size:1.28rem; margin:.7rem 0 .8rem; }
  .service-copy p{ font-size:.9rem; color:var(--ink-soft); line-height:1.62; margin:0 0 1.3rem; flex:1; }
  .service-copy a{ font-size:.85rem; font-weight:600; color:var(--pine); text-decoration:none; }

  .cta-band{ background:var(--pine-deep); border-radius:22px; padding:3.5rem clamp(1.5rem,5vw,4rem); text-align:center; }
  .cta-band h2{ font-size:clamp(1.6rem,3vw,2.2rem); color:#ffffff; max-width:28ch; margin:0 auto .9rem; }
  .cta-band p{ color:#e5e5e5; max-width:80ch; margin:0 auto 1.6rem; font-size:.95rem; }
  .cta-band .btn.on-gold.cta-terracotta{ background:#fff; color:var(--pine); }
  .cta-band .btn.on-gold.cta-terracotta:hover{ background:var(--terracotta-deep); color:#ffffff; }

  .guide{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
  @media (max-width:860px){ .guide{ grid-template-columns:1fr; } }
  .guide-visual{ border-radius:18px; min-height:300px; background-image:url('/wp-content/themes/ecocampers-divi-child/assets/img/im-cdcb2152b800.png'); background-size:contain; background-repeat:no-repeat; background-position:center; position:relative; overflow:hidden; }
  .guide h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
  .guide p{ color:var(--ink-soft); font-size:.96rem; line-height:1.65; margin:1.2rem 0 1.6rem; max-width:50ch; }

  .blog{ background:var(--paper-alt); border-radius:26px; }
  .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem; }
  @media (max-width:940px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }
  .blog-card{ background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
  .blog-card .blog-photo{ height:120px; position:relative; }
  .blog-card .blog-photo img{ width:100%; height:100%; object-fit:cover; }
  .blog-card .blog-body{ padding:1.3rem 1.4rem 1.5rem; }
  .blog-card .bd{ font-family:"Montserrat",sans-serif; font-size:.65rem; color:var(--terracotta-deep); text-transform:uppercase; letter-spacing:.05em; }
  .blog-card h3{ font-size:1.05rem; font-weight:400; color:var(--ink); margin-top:.6rem; line-height:1.35; }

  .faq-list{ border-top:1px solid var(--line); }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item button.fq{ all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:1rem; color:var(--ink); font-family:"Montserrat",sans-serif; padding:1.3rem 0; cursor:pointer; }
  .faq-item .fa{ max-height:0; overflow:hidden; color:var(--ink-soft); font-size:.9rem; line-height:1.6; transition:max-height var(--dur) ease; }
  .faq-item.open .fa{ max-height:200px; padding-bottom:1.3rem; }
  .faq-item .plus{ font-family:"Montserrat",sans-serif; font-size:1.2rem; color:var(--terracotta); transition:transform var(--dur) ease; flex-shrink:0; }
  .faq-item.open .plus{ transform:rotate(45deg); }

  .newsletter{ background:var(--pine-deep); color:#f5f5f5; border-radius:22px; padding:3.4rem clamp(1.5rem,5vw,3rem); text-align:center; }
  .social-icons{ display:flex; justify-content:center; gap:.8rem; margin-top:.9rem; }
  .social-icons a{ display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; background:rgba(255,255,255,.12); color:#ffffff; transition:background .2s ease, transform .2s ease; }
  .social-icons a:hover{ background:var(--terracotta-deep); transform:translateY(-2px); }
  .social-icons svg{ width:1.05rem; height:1.05rem; fill:currentColor; }
  .newsletter h3{ font-size:clamp(1.6rem,3vw,2.2rem); max-width:28ch; margin:0 auto .9rem; color:#ffffff; }
  .newsletter form{ display:flex; gap:.7rem; justify-content:center; margin-top:1.4rem; flex-wrap:wrap; }
  .newsletter input{ padding:.8rem 1.2rem; border-radius:99px; border:none; font-family:inherit; min-width:260px; min-height:44px; }

  footer{ border-top:1px solid var(--line); margin-top:1rem; }
  .foot-grid{ max-width:1280px; margin:0 auto; padding:3.5rem clamp(1.2rem,4vw,3rem) 2.5rem; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2.5rem; }
  @media (max-width:780px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  .foot-grid h4{ font-family:"Montserrat",sans-serif; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--pine); margin-bottom:1rem; }
  .foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; font-size:.86rem; }
  .foot-grid ul a{ color:var(--ink-soft); text-decoration:none; transition:color .2s ease; }
  .foot-grid ul a:hover{ color:var(--terracotta-deep); }
  .foot-grid .social-icons{ justify-content:flex-start; margin-top:1.1rem; }
  .foot-grid .social-icons a{ background:rgba(0,0,0,.08); color:var(--ink); }
  .foot-grid .social-icons a:hover{ background:var(--terracotta-deep); color:#ffffff; }
  .foot-bottom{ text-align:center; font-size:.75rem; color:var(--ink-faint); padding:1.5rem; border-top:1px solid var(--line); font-family:"Montserrat",sans-serif; }
  /* La ligne légale du pied — 20/10/2026. Discrète par construction :
     la passe « épuré » a supprimé le filet et la mention du bas, celle-ci
     ne les ramène pas. */
  .foot-legal{ display:flex; flex-wrap:wrap; justify-content:center;
    align-items:center; gap:.35rem 1.3rem; max-width:1280px; margin:0 auto;
    padding:0 clamp(1.2rem,4vw,3rem) 2.6rem;
    font-family:"Montserrat",sans-serif; font-size:.72rem;
    color:var(--ink-faint); }
  .foot-legal a{ color:inherit; text-decoration:none; }
  .foot-legal a:hover{ color:var(--ink); text-decoration:underline;
    text-underline-offset:3px; }
  @media (max-width:780px){ .foot-legal{ gap:.3rem .9rem; } }
  /* Les messages des formulaires — 20/10/2026. Le remerciement se lit,
     l'erreur se voit : même corps, mais un filet et une couleur qui ne
     laissent aucun doute sur lequel des deux on a sous les yeux. */
  .ec-form-merci, .ec-form-erreur{ font-family:"Montserrat",sans-serif;
    font-size:.86rem; line-height:1.6; margin:1rem 0 0;
    padding:.85rem 1.1rem; border-left:3px solid; }
  .ec-form-merci{ border-color:var(--accent,#fdc300);
    background:rgba(253,195,0,.1); color:var(--ink,#111); }
  .ec-form-erreur{ border-color:#b32d2e; background:rgba(179,45,46,.07);
    color:#8c2324; }
  /* Les formulaires du site — 20/10/2026. Un seul balisage pour les vingt
     emplacements : vingt formulaires différents, ce seraient vingt endroits
     où corriger la même faute de frappe. Le bloc ne définit que ce qui lui
     est propre et hérite du reste de la charte de la page. */
  .ec-form{ max-width:46rem; margin-top:1.6rem; }
  .ec-form-titre{ font-family:"Montserrat",sans-serif; font-weight:800;
    font-size:1.15rem; letter-spacing:-.01em; margin:0 0 .5rem; }
  .ec-form-chapo{ font-size:.92rem; line-height:1.65; color:var(--ink-soft);
    margin:0 0 1.2rem; max-width:52ch; }
  .ec-form-champs{ display:grid; grid-template-columns:1fr 1fr;
    gap:.9rem 1.1rem; }
  .ec-form-champs .large{ grid-column:1 / -1; }
  @media (max-width:620px){ .ec-form-champs{ grid-template-columns:1fr; } }
  .ec-form label{ display:block; font-family:"Montserrat",sans-serif;
    font-size:.7rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink-faint); }
  .ec-form input, .ec-form textarea{ display:block; width:100%;
    margin-top:.35rem; font-family:inherit; font-size:.92rem;
    padding:.72rem .9rem; border:1.5px solid var(--line); background:#ffffff;
    color:var(--ink); box-sizing:border-box; }
  .ec-form input:focus, .ec-form textarea:focus{ outline:3px solid var(--gold);
    outline-offset:1px; border-color:var(--ink); }
  .ec-form .ec-form-case{ display:flex; gap:.7rem; align-items:flex-start;
    margin-top:1.1rem; font-size:.78rem; font-weight:400; letter-spacing:0;
    text-transform:none; color:var(--ink-faint); line-height:1.6; }
  .ec-form .ec-form-case input{ width:auto; margin:.2rem 0 0; flex:0 0 auto;
    accent-color:var(--gold); }
  .ec-form-envoi{ margin-top:1.2rem; font-family:"Montserrat",sans-serif;
    font-weight:700; font-size:.92rem; padding:.9rem 1.8rem;
    background:var(--ink); color:#ffffff; border:0; cursor:pointer; }
  .ec-form-envoi:hover{ background:var(--gold); color:#111111; }
  .ec-form-envoi[disabled]{ opacity:.6; cursor:progress; }
  /* L'inscription à la lettre tient sur une ligne : son bloc porte déjà
     son titre, et un formulaire en colonne y ferait une marche. */
  .ec-form-ligne{ display:flex; flex-wrap:wrap; align-items:flex-end;
    gap:.8rem; }
  .ec-form-ligne .large{ flex:1 1 16rem; }
  .ec-form-ligne .ec-form-envoi{ margin-top:0; }
  .ec-form-note{ flex:1 1 100%; margin:.2rem 0 0; font-size:.76rem;
    color:var(--ink-faint); }
  /* La fenêtre des formulaires — 20/10/2026. Montée par le script, donc
     jamais présente dans le balisage d'une page : la charte doit pouvoir
     s'appliquer à un élément qui n'existe pas encore. */
  .ec-fenetre{ position:fixed; inset:0; z-index:200; display:flex;
    align-items:flex-start; justify-content:center; overflow-y:auto;
    padding:clamp(1rem,5vh,3rem) 1rem; background:rgba(10,10,8,.62);
    backdrop-filter:blur(3px); }
  .ec-fenetre[hidden]{ display:none !important; }
  .ec-fenetre-boite{ position:relative; width:100%; max-width:40rem;
    background:var(--paper,#ffffff); color:var(--ink,#111);
    padding:clamp(1.6rem,4vw,2.6rem); box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
  .ec-fenetre-boite .ec-form{ margin-top:0; max-width:none; }
  .ec-fenetre-croix{ position:absolute; top:.5rem; right:.7rem; width:2.2rem;
    height:2.2rem; font-size:1.5rem; line-height:1; background:none; border:0;
    color:var(--ink-faint); cursor:pointer; }
  .ec-fenetre-croix:hover{ color:var(--ink); }
  .ec-fenetre-ouverte{ overflow:hidden; }
  .ec-fenetre-ouvre{ margin-top:1.4rem; }
  @media (prefers-reduced-motion:no-preference){
    .ec-fenetre-boite{ animation:ec-fenetre-entre .22s ease-out; }
    @keyframes ec-fenetre-entre{ from{ transform:translateY(12px); opacity:0; } }
  }

  /* mobile sticky action bar */
  .mobile-bar{ position:fixed; left:0; right:0; bottom:-100px; z-index:60; display:none; gap:.6rem; padding:.7rem clamp(1rem,4vw,1.5rem); background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-top:1px solid var(--line); transition:bottom var(--dur) ease; }
  .mobile-bar.show{ bottom:0; }
  @media (max-width:940px){ .mobile-bar{ display:flex; } }
  .mobile-bar a{ flex:1; text-align:center; padding:.85rem 1rem; border-radius:99px; font-size:.85rem; font-weight:700; text-decoration:none; min-height:44px; display:flex; align-items:center; justify-content:center; font-family:"Montserrat",sans-serif; }
  .mobile-bar a.call{ background:var(--paper-alt); color:var(--ink); border:1.5px solid var(--line); }
  .mobile-bar a.quote{ background:var(--pine); color:#f5f5f5; }



  /* -------- 3 métiers (achat / location / aménagement) -------- */
  .metier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
  @media (max-width:860px){ .metier-grid{ grid-template-columns:1fr; } }
  .metier-card{
    background:var(--card); border:1px solid var(--line); border-radius:18px;
    padding:1.9rem 1.7rem 1.8rem; box-shadow:var(--shadow); text-decoration:none;
    display:flex; flex-direction:column; transition:transform .18s cubic-bezier(.34,1.56,.64,1), border-color .28s ease;
  }
  .metier-card:hover{ transform:translateY(-4px); border-color:var(--terracotta); }
  .metier-card svg{ width:28px; height:28px; color:var(--terracotta); margin-bottom:1.1rem; }
  .metier-card h3{ font-family:"Montserrat",sans-serif; font-size:1.5rem; margin:0 0 .3rem; color:var(--pine-deep); }
  .metier-sub{ font-family:"Montserrat",sans-serif; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:.9rem; }
  .metier-card p{ font-size:.88rem; color:var(--ink-soft); line-height:1.6; margin:0 0 1.1rem; }
  .metier-card .arrow{ margin-top:auto; align-self:flex-start; display:inline-block; padding:.6rem 1.25rem; font-size:.9rem; font-weight:400; font-family:"Montserrat",sans-serif; letter-spacing:.02em; color:#ffffff; background:var(--terracotta-deep); border-radius:99px; transition:background .2s ease, transform .2s ease; }
  .metier-card:hover .arrow{ background:var(--pine-deep); color:#ffffff; transform:translateY(-2px); }

  /* -------- Emplacements shortcode ActiveCampaign (a integrer lors du passage WordPress) -------- */
  .ac-placeholder{
    display:inline-flex; flex-direction:column; gap:.2rem; align-items:flex-start;
    border:1.5px dashed var(--terracotta); border-radius:12px; background:rgba(253,195,0,.07);
    padding:.8rem 1.05rem; text-decoration:none; max-width:100%; box-sizing:border-box;
  }
  .ac-placeholder .ac-tag{
    font-family:"Montserrat",sans-serif; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--terracotta-deep); font-weight:600;
  }
  .ac-placeholder .ac-label{ font-family:"Montserrat",sans-serif; font-size:1rem; color:var(--ink); font-style:italic; }
  .ac-placeholder.compact{ padding:.55rem .8rem; }
  .ac-placeholder.compact .ac-label{ font-size:.88rem; }

  /* -------- #gamme recolore en clair pour prolonger le brush -------- */
  #gamme::before{ opacity:.03; }
  #gamme .section-head .eyebrow{ color:var(--terracotta-deep); font-weight:700; }
  #gamme .section-head p{ color:var(--ink-soft); }
  #gamme .model-card{ background:var(--card); border:1px solid var(--line); }
  #gamme .model-body .mtag{ color:var(--terracotta-deep); }
  #gamme .model-body .mt{ color:var(--ink-soft); }

  #gamme .model-specs{ color:var(--ink-soft); }
  #gamme .model-specs li::before{ color:var(--terracotta); }


  /* -------- Hero photo plein cadre -------- */
  .hero.hero--photo{
    min-height:80vh; max-width:none; margin:0; margin-top:-2%;
    padding:clamp(2.2rem,5vw,3.2rem) clamp(1.2rem,4vw,3rem) clamp(5.5rem,9vw,8rem);
    display:flex; align-items:flex-end;
    background-size:cover; background-position:center 55%;
    border-radius:0; overflow:hidden; position:relative;
  }
  .hero-brush-img{
    position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto;
    display:block; pointer-events:none; z-index:2;
  }
  .hero--photo .hero-copy{ max-width:640px; }

  .hero--photo h1{ color:#ffffff; text-wrap:balance; }
  .hero--photo h1 em{ color:#ffffff; font-style:normal; }
  .hero--photo p.lead{ color:rgba(255,255,255,.92); }
  .hero--photo .btn.ghost{ background:#fff; border-color:transparent; color:var(--pine); }
  .hero--photo .btn.ghost:hover{ background:var(--pine); border-color:transparent; color:#ffffff; }
  .hero--photo .hero-stats{ border-top-color:rgba(255,255,255,.28); }
  .hero--photo .hero-stats b{ color:#ffffff; }
  .hero--photo .hero-stats span{ color:rgba(255,255,255,.72); }
  @media (max-width:940px){
    .hero.hero--photo{ min-height:72vh; background-position:center 72%; border-radius:0; }
    .hero--photo .hero-stats{ gap:1.6rem; flex-wrap:wrap; }
  }
  @media (min-width:941px){
    .blog{ border-radius:0px!important; }
    .nav-wrap{ max-width:100%!important; }
  }

/* ===== Navigation principale 2026 ===== */
.nav-wrap{ position:relative; gap:1rem; }
.nav-burger{ display:none; width:2.4rem; height:2.4rem; padding:0; border:0; background:none;
  cursor:pointer; align-items:center; justify-content:center; flex:0 0 auto; margin-right:.2rem; }
.nav-burger i{ display:block; width:1.3rem; height:2px; background:var(--black,#111);
  border-radius:2px; position:relative; }
.nav-burger i::before,.nav-burger i::after{ content:''; position:absolute; left:0; width:1.3rem;
  height:2px; background:inherit; border-radius:2px; }
.nav-burger i::before{ top:-6px; } .nav-burger i::after{ top:6px; }

.mainnav{ display:flex; gap:.1rem; align-items:center; }
.nv-item{ position:static; }
.nv-top{ display:inline-flex; align-items:center; gap:.34rem; font-family:"Montserrat",sans-serif;
  font-size:.92rem; font-weight:600; color:var(--black,#111); background:none; border:0;
  cursor:pointer; padding:.55rem .72rem; border-radius:9px; text-decoration:none;
  white-space:nowrap; line-height:1.3; }
.nv-top:hover{ background:rgba(0,0,0,.05); }
.nv-top.current{ box-shadow:inset 0 -3px 0 var(--accent,#fdc300); border-radius:9px 9px 0 0; }
.nv-top[aria-expanded="true"]{ background:rgba(0,0,0,.05); }
.nv-top::after{ display:none !important; }
.nv-chev{ font-size:.58rem; opacity:.55; transition:transform .18s ease; }
.nv-top[aria-expanded="true"] .nv-chev{ transform:rotate(180deg); }

.nv-volet{ position:absolute; left:0; right:0; top:100%; z-index:60; background:#fff;
  border:1px solid rgba(0,0,0,.09); border-radius:0 0 16px 16px;
  box-shadow:0 24px 44px -26px rgba(0,0,0,.45); padding:1.5rem clamp(1.2rem,4vw,3rem) 1.7rem; }
.nv-volet[hidden]{ display:none; }
.nv-volet-in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.4rem 2.2rem; max-width:1280px; margin:0 auto; }
.nvm-col h4{ font-family:"Montserrat",sans-serif; font-size:.64rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#6e6e6e; margin:0 0 .5rem; }
.nvm-h4b{ margin-top:1.05rem !important; }
.nvm-col ul{ list-style:none; margin:0; padding:0; }
.nvm-col li{ margin:0; }
.nvm-col li a{ display:block; font-size:.88rem; color:var(--black,#111); text-decoration:none;
  padding:.34rem .5rem; border-radius:7px; line-height:1.4; }
.nvm-col li a:hover{ background:rgba(0,0,0,.05); }
.nvm-col li a b{ font-weight:600; }
.nvm-mini{ display:block; font-size:.75rem; color:#6e6e6e; font-weight:400; }
.nvm-encart{ background:#f7f7f7; border-radius:13px; padding:1rem 1.05rem 1.1rem; }
.nvm-k{ display:block; font-size:.64rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#6e6e6e; margin-bottom:.35rem; }
.nvm-encart p{ font-size:.83rem; color:#4a4a4a; margin:0 0 .7rem; line-height:1.55; }
.nvm-encart a{ font-size:.83rem; font-weight:700; color:var(--black,#111); text-decoration:underline;
  text-decoration-color:var(--accent,#fdc300); text-decoration-thickness:2px; text-underline-offset:3px; }

.nav-actions{ display:flex; align-items:center; gap:.9rem; flex:0 0 auto; }
.nav-tel{ font-family:"Montserrat",sans-serif; font-size:.9rem; font-weight:700;
  color:var(--black,#111); white-space:nowrap; cursor:default; }

.nv-panneau{ display:none; }
.nv-panneau[hidden]{ display:none !important; }

@media (max-width:940px){
  .nav-burger{ display:flex; }
  .mainnav{ display:none !important; }
  .nav-tel{ display:none; }
  .nv-panneau{ display:block; position:relative; z-index:55; background:#fff;
    border-top:1px solid rgba(0,0,0,.09); padding:.3rem clamp(1.2rem,4vw,3rem) 1.1rem; }
  .nvp-item{ border-bottom:1px solid rgba(0,0,0,.08); }
  .nvp-tete{ width:100%; display:flex; justify-content:space-between; align-items:center;
    font-family:"Montserrat",sans-serif; font-size:.95rem; font-weight:700; color:var(--black,#111);
    background:none; border:0; cursor:pointer; padding:.9rem .2rem; text-align:left;
    text-decoration:none; }
  .nvp-signe{ font-weight:600; opacity:.6; }
  .nvp-sous{ padding:0 .2rem .7rem; }
  .nvp-sous[hidden]{ display:none; }
  .nvp-sous a{ display:block; font-size:.87rem; color:#4a4a4a; text-decoration:none; padding:.42rem 0; }
  .nvp-pied{ padding:.9rem .2rem 0; }
  .nvp-tel{ display:block; text-align:center; padding:.75rem; border-radius:999px;
    border:1.5px solid var(--black,#111); font-size:.9rem; font-weight:700; }
}
@media (prefers-reduced-motion:reduce){ .nv-chev{ transition:none; } }


/* ===== Menu : numero cliquable, plus de brush ===== */
a.nav-tel{ text-decoration:none; }
a.nav-tel:hover{ text-decoration:underline; text-underline-offset:3px; }
a.nvp-tel{ text-decoration:none; }
header.top .top-brush{ display:none !important; }
header.top{ background:#fff; border-bottom:1px solid rgba(0,0,0,.09); }
header.top.scrolled{ border-bottom-color:rgba(0,0,0,.09); }
.nv-volet{ border-top:0; }


/* ===== Passe design : plus de brush, coordonnees en pied ===== */
.brush-wrap{ position:relative; display:inline; }
.brush-wrap em{ font-style:normal; color:var(--black,#111111);
  box-shadow:inset 0 -.30em 0 rgba(253,195,0,.42); }
.page-hero--photo .brush-wrap em,
.hero-copy .brush-wrap em{ color:#fdc300; box-shadow:none; }
.brush-svg,.hero-brush-img,.top-brush,.brush-img,.brush-bottom{ display:none !important; }
.page-hero--photo{ border-radius:0 0 22px 22px; }

.foot-nap{ margin-top:1.1rem; display:grid; gap:.5rem; }
.foot-nap p{ display:flex; align-items:flex-start; gap:.55rem; margin:0;
  font-size:.85rem; color:var(--ink-soft); line-height:1.5; }
.foot-nap svg{ width:1rem; height:1rem; flex:0 0 auto; margin-top:.18rem;
  stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.foot-nap a{ color:inherit; text-decoration:none; font-weight:700; }
.foot-nap a:hover{ text-decoration:underline; text-underline-offset:3px; }


:root{ --ec-photo-hero:url('/wp-content/themes/ecocampers-divi-child/assets/img/im-220fbc28449b.jpg'); }
/* =====================================================================
   Charte Eco Campers 2026 — Montserrat, blanc / noir / gris, jaune #fdc300
   Le jaune est une surface (pastilles, boutons, soulignements) et n'est
   un texte que sur fond sombre ou en gros titre d'accroche.
   ===================================================================== */
:root{
  --accent:#fdc300;
  --accent-dark:#e3ae00;
  --accent-soft:rgba(253,195,0,.22);
  --grey-050:#f5f5f5;
  --grey-200:#e5e5e5;
  --grey-500:#6e6e6e;
  --grey-700:#4a4a4a;
  --black:#111111;
}

/* ---------- typographie : une seule famille, la graisse porte la hiérarchie ---------- */
html,body,input,textarea,select,button,a,p,li,td,th,span,div,figcaption,label,summary{
  font-family:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;
}
body{ font-weight:400; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6{ font-family:"Montserrat",sans-serif; letter-spacing:-.015em; text-wrap:balance; }
h1{ font-weight:800; }
h2{ font-weight:800; }
h3{ font-weight:700; letter-spacing:-.005em; }
h4,h5,h6{ font-weight:700; letter-spacing:0; }
strong,b{ font-weight:700; }
.lead,.hero-copy p.lead{ font-weight:500; }

/* petites étiquettes : capitales, 700, interlettrage — plus de police mono */
.eyebrow,.hero-eyebrow,.ac-tag,.rl,.bd,.spec-group h3,.gs-figure figcaption,
.model-tagline,.foot-bottom,.service-copy .num,.quick-specs span{
  font-family:"Montserrat",sans-serif; font-weight:700; letter-spacing:.08em;
}
.eyebrow,.section-head .eyebrow{ color:var(--black); }

/* chiffres : gras, chasse tabulaire */
.sb-num,.sk-num,.stat-num,.hero-stats strong,.big-num{
  font-family:"Montserrat",sans-serif; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.sb-num span,.sk-num span{ font-weight:700; letter-spacing:.06em; }
.sk-num span{ color:var(--black); }

/* ---------- le jaune : surface avant tout ---------- */
.btn.primary,.nav-cta,.mobile-bar .quote,.devis-submit{
  background:var(--accent); border-color:var(--accent); color:var(--black);
  font-weight:700; letter-spacing:.01em;
}
.btn.primary:hover,.nav-cta:hover,.mobile-bar .quote:hover,.devis-submit:hover{
  background:var(--accent-dark); border-color:var(--accent-dark); color:var(--black);
}
.btn.ghost,.mobile-bar .call{
  background:transparent; border-color:var(--black); color:var(--black); font-weight:700;
}
.btn.ghost:hover,.mobile-bar .call:hover{ background:var(--black); color:#ffffff; }
.btn.gold,.btn.on-gold{ background:var(--black); color:#ffffff; border-color:var(--black); font-weight:700; }
.btn.gold:hover,.btn.on-gold:hover{ background:#000000; color:#ffffff; }

/* sur fond sombre ou photo, le jaune redevient un texte lisible */
.photo-band .eyebrow,.config-banner .eyebrow,.gamme .section-head .eyebrow,
.cta-band .eyebrow,.page-hero--photo .hero-eyebrow{ color:var(--accent); }

/* mais jamais en petit texte sur blanc */
.faq-item .plus{ color:var(--black); font-weight:700; }
.feature-card svg,.service-card svg{ color:var(--black); }
.model-body .mtag{ color:var(--grey-500); }
.model-body a.discover{ color:var(--black); font-weight:700; }
.service-copy .num,.blog-card .bd,.related-card .rl{ color:var(--grey-500); }

/* ---------- surfaces et filets ---------- */
body{ background-image:none; background-color:#ffffff; }
.spec-line,.faq-item,.spec-row{ border-color:var(--grey-200); }

/* les habillages crème (coups de pinceau, déchirures) passent en blanc pur */
.hero-brush-img,.top-brush,.brush-img,.brush-bottom{ filter:brightness(0) invert(1); }
/* ---------- signatures REIMO by Eco Campers ---------- */

/* fond : courbes de niveau tres discretes, comme les supports print */
body{
  background-color:#ffffff;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22900%22%20viewBox%3D%220%200%201200%20900%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.045%22%20stroke-width%3D%221.4%22%3E%3Cpolyline%20points%3D%220.0%2C-66.0%2012.0%2C-70.0%2024.0%2C-71.5%2036.0%2C-70.6%2048.0%2C-67.2%2060.0%2C-61.4%2072.0%2C-53.6%2084.0%2C-44.1%2096.0%2C-33.6%20108.0%2C-22.6%20120.0%2C-11.8%20132.0%2C-1.7%20144.0%2C6.9%20156.0%2C13.6%20168.0%2C17.9%20180.0%2C19.6%20192.0%2C18.5%20204.0%2C14.6%20216.0%2C8.0%20228.0%2C-0.8%20240.0%2C-11.6%20252.0%2C-23.7%20264.0%2C-36.5%20276.0%2C-49.4%20288.0%2C-61.6%20300.0%2C-72.6%20312.0%2C-81.8%20324.0%2C-88.8%20336.0%2C-93.2%20348.0%2C-94.9%20360.0%2C-93.8%20372.0%2C-90.1%20384.0%2C-84.1%20396.0%2C-76.1%20408.0%2C-66.7%20420.0%2C-56.6%20432.0%2C-46.2%20444.0%2C-36.3%20456.0%2C-27.5%20468.0%2C-20.2%20480.0%2C-15.0%20492.0%2C-12.0%20504.0%2C-11.6%20516.0%2C-13.6%20528.0%2C-17.9%20540.0%2C-24.2%20552.0%2C-32.2%20564.0%2C-41.2%20576.0%2C-50.7%20588.0%2C-60.1%20600.0%2C-68.7%20612.0%2C-76.0%20624.0%2C-81.5%20636.0%2C-84.7%20648.0%2C-85.3%20660.0%2C-83.3%20672.0%2C-78.7%20684.0%2C-71.6%20696.0%2C-62.4%20708.0%2C-51.6%20720.0%2C-39.6%20732.0%2C-27.1%20744.0%2C-14.9%20756.0%2C-3.4%20768.0%2C6.6%20780.0%2C14.6%20792.0%2C20.3%20804.0%2C23.2%20816.0%2C23.3%20828.0%2C20.5%20840.0%2C15.1%20852.0%2C7.2%20864.0%2C-2.5%20876.0%2C-13.6%20888.0%2C-25.5%20900.0%2C-37.4%20912.0%2C-48.9%20924.0%2C-59.2%20936.0%2C-67.8%20948.0%2C-74.2%20960.0%2C-78.3%20972.0%2C-79.7%20984.0%2C-78.6%20996.0%2C-75.0%201008.0%2C-69.3%201020.0%2C-61.9%201032.0%2C-53.3%201044.0%2C-44.1%201056.0%2C-34.9%201068.0%2C-26.4%201080.0%2C-19.0%201092.0%2C-13.4%201104.0%2C-9.9%201116.0%2C-8.8%201128.0%2C-10.2%201140.0%2C-14.1%201152.0%2C-20.3%201164.0%2C-28.4%201176.0%2C-38.1%201188.0%2C-48.7%201200.0%2C-59.6%22%2F%3E%3Cpolyline%20points%3D%220.0%2C36.8%2012.0%2C31.9%2024.0%2C26.5%2036.0%2C20.8%2048.0%2C14.8%2060.0%2C8.8%2072.0%2C2.8%2084.0%2C-2.9%2096.0%2C-8.1%20108.0%2C-12.8%20120.0%2C-16.9%20132.0%2C-20.1%20144.0%2C-22.5%20156.0%2C-23.8%20168.0%2C-24.2%20180.0%2C-23.6%20192.0%2C-21.9%20204.0%2C-19.3%20216.0%2C-15.7%20228.0%2C-11.4%20240.0%2C-6.3%20252.0%2C-0.6%20264.0%2C5.5%20276.0%2C11.8%20288.0%2C18.3%20300.0%2C24.8%20312.0%2C31.0%20324.0%2C36.9%20336.0%2C42.3%20348.0%2C47.1%20360.0%2C51.1%20372.0%2C54.3%20384.0%2C56.6%20396.0%2C58.0%20408.0%2C58.5%20420.0%2C58.0%20432.0%2C56.7%20444.0%2C54.6%20456.0%2C51.8%20468.0%2C48.4%20480.0%2C44.5%20492.0%2C40.3%20504.0%2C35.9%20516.0%2C31.4%20528.0%2C27.1%20540.0%2C23.1%20552.0%2C19.4%20564.0%2C16.3%20576.0%2C13.9%20588.0%2C12.1%20600.0%2C11.1%20612.0%2C11.0%20624.0%2C11.6%20636.0%2C13.1%20648.0%2C15.4%20660.0%2C18.4%20672.0%2C22.0%20684.0%2C26.1%20696.0%2C30.7%20708.0%2C35.4%20720.0%2C40.3%20732.0%2C45.1%20744.0%2C49.7%20756.0%2C54.0%20768.0%2C57.7%20780.0%2C60.9%20792.0%2C63.3%20804.0%2C64.8%20816.0%2C65.5%20828.0%2C65.2%20840.0%2C63.9%20852.0%2C61.7%20864.0%2C58.6%20876.0%2C54.5%20888.0%2C49.8%20900.0%2C44.3%20912.0%2C38.3%20924.0%2C31.9%20936.0%2C25.3%20948.0%2C18.5%20960.0%2C11.9%20972.0%2C5.5%20984.0%2C-0.5%20996.0%2C-6.0%201008.0%2C-10.7%201020.0%2C-14.7%201032.0%2C-17.8%201044.0%2C-20.0%201056.0%2C-21.1%201068.0%2C-21.3%201080.0%2C-20.4%201092.0%2C-18.7%201104.0%2C-16.0%201116.0%2C-12.5%201128.0%2C-8.3%201140.0%2C-3.6%201152.0%2C1.5%201164.0%2C6.9%201176.0%2C12.4%201188.0%2C17.9%201200.0%2C23.2%22%2F%3E%3Cpolyline%20points%3D%220.0%2C105.0%2012.0%2C111.3%2024.0%2C117.3%2036.0%2C122.7%2048.0%2C127.3%2060.0%2C131.2%2072.0%2C134.1%2084.0%2C136.0%2096.0%2C137.0%20108.0%2C136.8%20120.0%2C135.7%20132.0%2C133.7%20144.0%2C130.7%20156.0%2C126.9%20168.0%2C122.5%20180.0%2C117.6%20192.0%2C112.3%20204.0%2C106.8%20216.0%2C101.2%20228.0%2C95.8%20240.0%2C90.6%20252.0%2C85.8%20264.0%2C81.7%20276.0%2C78.1%20288.0%2C75.4%20300.0%2C73.4%20312.0%2C72.3%20324.0%2C72.1%20336.0%2C72.8%20348.0%2C74.2%20360.0%2C76.4%20372.0%2C79.2%20384.0%2C82.6%20396.0%2C86.3%20408.0%2C90.3%20420.0%2C94.4%20432.0%2C98.5%20444.0%2C102.3%20456.0%2C105.7%20468.0%2C108.7%20480.0%2C111.0%20492.0%2C112.6%20504.0%2C113.3%20516.0%2C113.3%20528.0%2C112.3%20540.0%2C110.4%20552.0%2C107.7%20564.0%2C104.1%20576.0%2C99.9%20588.0%2C95.0%20600.0%2C89.7%20612.0%2C83.9%20624.0%2C78.1%20636.0%2C72.1%20648.0%2C66.4%20660.0%2C60.9%20672.0%2C55.9%20684.0%2C51.5%20696.0%2C47.8%20708.0%2C45.0%20720.0%2C43.2%20732.0%2C42.3%20744.0%2C42.5%20756.0%2C43.8%20768.0%2C46.0%20780.0%2C49.2%20792.0%2C53.3%20804.0%2C58.1%20816.0%2C63.6%20828.0%2C69.7%20840.0%2C76.0%20852.0%2C82.6%20864.0%2C89.1%20876.0%2C95.5%20888.0%2C101.6%20900.0%2C107.2%20912.0%2C112.1%20924.0%2C116.4%20936.0%2C119.8%20948.0%2C122.3%20960.0%2C123.9%20972.0%2C124.5%20984.0%2C124.2%20996.0%2C123.0%201008.0%2C120.9%201020.0%2C118.2%201032.0%2C114.7%201044.0%2C110.8%201056.0%2C106.6%201068.0%2C102.2%201080.0%2C97.7%201092.0%2C93.3%201104.0%2C89.3%201116.0%2C85.6%201128.0%2C82.5%201140.0%2C80.1%201152.0%2C78.4%201164.0%2C77.5%201176.0%2C77.4%201188.0%2C78.2%201200.0%2C79.8%22%2F%3E%3Cpolyline%20points%3D%220.0%2C198.8%2012.0%2C210.4%2024.0%2C219.0%2036.0%2C224.2%2048.0%2C225.6%2060.0%2C223.1%2072.0%2C216.9%2084.0%2C207.5%2096.0%2C195.5%20108.0%2C181.7%20120.0%2C167.0%20132.0%2C152.4%20144.0%2C138.9%20156.0%2C127.4%20168.0%2C118.5%20180.0%2C112.7%20192.0%2C110.5%20204.0%2C111.8%20216.0%2C116.5%20228.0%2C124.0%20240.0%2C133.8%20252.0%2C145.1%20264.0%2C156.8%20276.0%2C168.2%20288.0%2C178.2%20300.0%2C186.2%20312.0%2C191.3%20324.0%2C193.3%20336.0%2C191.8%20348.0%2C186.9%20360.0%2C179.0%20372.0%2C168.4%20384.0%2C155.9%20396.0%2C142.5%20408.0%2C128.9%20420.0%2C116.3%20432.0%2C105.4%20444.0%2C97.1%20456.0%2C92.1%20468.0%2C90.6%20480.0%2C93.0%20492.0%2C99.2%20504.0%2C108.7%20516.0%2C121.0%20528.0%2C135.4%20540.0%2C150.9%20552.0%2C166.6%20564.0%2C181.6%20576.0%2C194.7%20588.0%2C205.4%20600.0%2C212.8%20612.0%2C216.7%20624.0%2C216.8%20636.0%2C213.3%20648.0%2C206.4%20660.0%2C196.8%20672.0%2C185.1%20684.0%2C172.4%20696.0%2C159.4%20708.0%2C147.2%20720.0%2C136.6%20732.0%2C128.4%20744.0%2C123.2%20756.0%2C121.3%20768.0%2C122.8%20780.0%2C127.6%20792.0%2C135.2%20804.0%2C145.1%20816.0%2C156.5%20828.0%2C168.6%20840.0%2C180.3%20852.0%2C190.7%20864.0%2C199.1%20876.0%2C204.6%20888.0%2C206.9%20900.0%2C205.6%20912.0%2C200.7%20924.0%2C192.4%20936.0%2C181.2%20948.0%2C167.8%20960.0%2C153.0%20972.0%2C137.8%20984.0%2C123.1%20996.0%2C109.9%201008.0%2C99.0%201020.0%2C91.2%201032.0%2C87.0%201044.0%2C86.6%201056.0%2C90.1%201068.0%2C97.1%201080.0%2C107.3%201092.0%2C119.9%201104.0%2C134.1%201116.0%2C148.9%201128.0%2C163.3%201140.0%2C176.5%201152.0%2C187.5%201164.0%2C195.8%201176.0%2C200.7%201188.0%2C202.1%201200.0%2C199.9%22%2F%3E%3Cpolyline%20points%3D%220.0%2C274.8%2012.0%2C279.8%2024.0%2C283.9%2036.0%2C287.1%2048.0%2C289.3%2060.0%2C290.4%2072.0%2C290.5%2084.0%2C289.6%2096.0%2C287.6%20108.0%2C284.6%20120.0%2C280.6%20132.0%2C275.8%20144.0%2C270.1%20156.0%2C263.8%20168.0%2C256.9%20180.0%2C249.5%20192.0%2C241.9%20204.0%2C234.0%20216.0%2C226.1%20228.0%2C218.3%20240.0%2C210.7%20252.0%2C203.5%20264.0%2C196.8%20276.0%2C190.7%20288.0%2C185.4%20300.0%2C180.8%20312.0%2C177.1%20324.0%2C174.3%20336.0%2C172.5%20348.0%2C171.7%20360.0%2C171.9%20372.0%2C173.0%20384.0%2C175.1%20396.0%2C178.0%20408.0%2C181.8%20420.0%2C186.2%20432.0%2C191.2%20444.0%2C196.7%20456.0%2C202.6%20468.0%2C208.8%20480.0%2C215.0%20492.0%2C221.2%20504.0%2C227.2%20516.0%2C232.9%20528.0%2C238.3%20540.0%2C243.0%20552.0%2C247.2%20564.0%2C250.6%20576.0%2C253.2%20588.0%2C254.9%20600.0%2C255.7%20612.0%2C255.6%20624.0%2C254.6%20636.0%2C252.7%20648.0%2C249.8%20660.0%2C246.2%20672.0%2C241.7%20684.0%2C236.6%20696.0%2C230.9%20708.0%2C224.8%20720.0%2C218.2%20732.0%2C211.5%20744.0%2C204.7%20756.0%2C197.9%20768.0%2C191.4%20780.0%2C185.1%20792.0%2C179.3%20804.0%2C174.1%20816.0%2C169.6%20828.0%2C165.8%20840.0%2C162.9%20852.0%2C161.0%20864.0%2C160.0%20876.0%2C160.1%20888.0%2C161.2%20900.0%2C163.3%20912.0%2C166.4%20924.0%2C170.4%20936.0%2C175.4%20948.0%2C181.1%20960.0%2C187.6%20972.0%2C194.7%20984.0%2C202.3%20996.0%2C210.2%201008.0%2C218.3%201020.0%2C226.6%201032.0%2C234.7%201044.0%2C242.7%201056.0%2C250.3%201068.0%2C257.4%201080.0%2C264.0%201092.0%2C269.8%201104.0%2C274.8%201116.0%2C279.0%201128.0%2C282.2%201140.0%2C284.3%201152.0%2C285.5%201164.0%2C285.6%201176.0%2C284.7%201188.0%2C282.8%201200.0%2C279.9%22%2F%3E%3Cpolyline%20points%3D%220.0%2C262.1%2012.0%2C267.4%2024.0%2C272.9%2036.0%2C278.5%2048.0%2C284.0%2060.0%2C289.3%2072.0%2C294.2%2084.0%2C298.6%2096.0%2C302.3%20108.0%2C305.2%20120.0%2C307.4%20132.0%2C308.6%20144.0%2C309.0%20156.0%2C308.4%20168.0%2C306.8%20180.0%2C304.4%20192.0%2C301.2%20204.0%2C297.2%20216.0%2C292.7%20228.0%2C287.6%20240.0%2C282.1%20252.0%2C276.5%20264.0%2C270.8%20276.0%2C265.2%20288.0%2C259.8%20300.0%2C254.9%20312.0%2C250.5%20324.0%2C246.9%20336.0%2C244.0%20348.0%2C242.0%20360.0%2C241.0%20372.0%2C240.9%20384.0%2C242.0%20396.0%2C244.1%20408.0%2C247.1%20420.0%2C251.2%20432.0%2C256.1%20444.0%2C261.8%20456.0%2C268.2%20468.0%2C275.1%20480.0%2C282.4%20492.0%2C289.9%20504.0%2C297.4%20516.0%2C304.8%20528.0%2C312.0%20540.0%2C318.7%20552.0%2C324.8%20564.0%2C330.2%20576.0%2C334.8%20588.0%2C338.4%20600.0%2C341.0%20612.0%2C342.5%20624.0%2C342.9%20636.0%2C342.3%20648.0%2C340.6%20660.0%2C337.8%20672.0%2C334.2%20684.0%2C329.7%20696.0%2C324.5%20708.0%2C318.7%20720.0%2C312.4%20732.0%2C305.9%20744.0%2C299.2%20756.0%2C292.6%20768.0%2C286.2%20780.0%2C280.2%20792.0%2C274.6%20804.0%2C269.7%20816.0%2C265.6%20828.0%2C262.2%20840.0%2C259.8%20852.0%2C258.3%20864.0%2C257.7%20876.0%2C258.2%20888.0%2C259.5%20900.0%2C261.7%20912.0%2C264.7%20924.0%2C268.4%20936.0%2C272.7%20948.0%2C277.4%20960.0%2C282.5%20972.0%2C287.6%20984.0%2C292.8%20996.0%2C297.8%201008.0%2C302.4%201020.0%2C306.6%201032.0%2C310.2%201044.0%2C313.1%201056.0%2C315.2%201068.0%2C316.4%201080.0%2C316.7%201092.0%2C316.0%201104.0%2C314.4%201116.0%2C311.8%201128.0%2C308.3%201140.0%2C303.9%201152.0%2C298.9%201164.0%2C293.2%201176.0%2C287.0%201188.0%2C280.5%201200.0%2C273.8%22%2F%3E%3Cpolyline%20points%3D%220.0%2C327.9%2012.0%2C338.6%2024.0%2C349.2%2036.0%2C359.5%2048.0%2C369.0%2060.0%2C377.3%2072.0%2C384.2%2084.0%2C389.4%2096.0%2C392.7%20108.0%2C394.0%20120.0%2C393.2%20132.0%2C390.5%20144.0%2C385.8%20156.0%2C379.4%20168.0%2C371.6%20180.0%2C362.5%20192.0%2C352.7%20204.0%2C342.5%20216.0%2C332.3%20228.0%2C322.4%20240.0%2C313.3%20252.0%2C305.4%20264.0%2C299.0%20276.0%2C294.3%20288.0%2C291.6%20300.0%2C291.0%20312.0%2C292.5%20324.0%2C296.2%20336.0%2C302.0%20348.0%2C309.7%20360.0%2C319.1%20372.0%2C329.8%20384.0%2C341.6%20396.0%2C353.9%20408.0%2C366.5%20420.0%2C378.9%20432.0%2C390.7%20444.0%2C401.4%20456.0%2C410.8%20468.0%2C418.5%20480.0%2C424.2%20492.0%2C427.8%20504.0%2C429.1%20516.0%2C428.2%20528.0%2C425.0%20540.0%2C419.7%20552.0%2C412.4%20564.0%2C403.5%20576.0%2C393.3%20588.0%2C382.0%20600.0%2C370.2%20612.0%2C358.2%20624.0%2C346.5%20636.0%2C335.4%20648.0%2C325.3%20660.0%2C316.6%20672.0%2C309.6%20684.0%2C304.4%20696.0%2C301.3%20708.0%2C300.3%20720.0%2C301.3%20732.0%2C304.5%20744.0%2C309.4%20756.0%2C316.1%20768.0%2C324.0%20780.0%2C333.1%20792.0%2C342.7%20804.0%2C352.7%20816.0%2C362.5%20828.0%2C371.7%20840.0%2C380.0%20852.0%2C387.1%20864.0%2C392.6%20876.0%2C396.4%20888.0%2C398.1%20900.0%2C397.8%20912.0%2C395.5%20924.0%2C391.1%20936.0%2C384.8%20948.0%2C376.9%20960.0%2C367.5%20972.0%2C357.1%20984.0%2C346.0%20996.0%2C334.5%201008.0%2C323.2%201020.0%2C312.4%201032.0%2C302.5%201044.0%2C293.8%201056.0%2C286.8%201068.0%2C281.7%201080.0%2C278.6%201092.0%2C277.7%201104.0%2C279.1%201116.0%2C282.8%201128.0%2C288.6%201140.0%2C296.3%201152.0%2C305.8%201164.0%2C316.7%201176.0%2C328.6%201188.0%2C341.2%201200.0%2C354.0%22%2F%3E%3Cpolyline%20points%3D%220.0%2C447.8%2012.0%2C445.5%2024.0%2C442.6%2036.0%2C439.2%2048.0%2C435.4%2060.0%2C431.2%2072.0%2C426.6%2084.0%2C421.9%2096.0%2C416.9%20108.0%2C411.8%20120.0%2C406.7%20132.0%2C401.7%20144.0%2C396.8%20156.0%2C392.1%20168.0%2C387.7%20180.0%2C383.7%20192.0%2C380.1%20204.0%2C377.0%20216.0%2C374.4%20228.0%2C372.3%20240.0%2C370.9%20252.0%2C370.1%20264.0%2C369.9%20276.0%2C370.4%20288.0%2C371.4%20300.0%2C373.1%20312.0%2C375.3%20324.0%2C378.0%20336.0%2C381.1%20348.0%2C384.7%20360.0%2C388.6%20372.0%2C392.8%20384.0%2C397.1%20396.0%2C401.6%20408.0%2C406.1%20420.0%2C410.6%20432.0%2C414.9%20444.0%2C419.1%20456.0%2C423.0%20468.0%2C426.5%20480.0%2C429.7%20492.0%2C432.4%20504.0%2C434.7%20516.0%2C436.4%20528.0%2C437.7%20540.0%2C438.4%20552.0%2C438.5%20564.0%2C438.2%20576.0%2C437.3%20588.0%2C436.0%20600.0%2C434.2%20612.0%2C432.1%20624.0%2C429.6%20636.0%2C426.9%20648.0%2C423.9%20660.0%2C420.9%20672.0%2C417.8%20684.0%2C414.7%20696.0%2C411.7%20708.0%2C408.8%20720.0%2C406.2%20732.0%2C403.9%20744.0%2C402.0%20756.0%2C400.4%20768.0%2C399.3%20780.0%2C398.7%20792.0%2C398.6%20804.0%2C399.0%20816.0%2C400.0%20828.0%2C401.4%20840.0%2C403.4%20852.0%2C405.9%20864.0%2C408.7%20876.0%2C412.0%20888.0%2C415.7%20900.0%2C419.6%20912.0%2C423.7%20924.0%2C428.0%20936.0%2C432.3%20948.0%2C436.6%20960.0%2C440.9%20972.0%2C444.9%20984.0%2C448.8%20996.0%2C452.3%201008.0%2C455.4%201020.0%2C458.1%201032.0%2C460.3%201044.0%2C462.0%201056.0%2C463.1%201068.0%2C463.6%201080.0%2C463.4%201092.0%2C462.7%201104.0%2C461.3%201116.0%2C459.3%201128.0%2C456.8%201140.0%2C453.7%201152.0%2C450.1%201164.0%2C446.1%201176.0%2C441.7%201188.0%2C437.0%201200.0%2C432.1%22%2F%3E%3Cpolyline%20points%3D%220.0%2C513.5%2012.0%2C507.3%2024.0%2C499.3%2036.0%2C490.0%2048.0%2C479.8%2060.0%2C469.2%2072.0%2C459.0%2084.0%2C449.5%2096.0%2C441.4%20108.0%2C435.1%20120.0%2C431.0%20132.0%2C429.2%20144.0%2C429.9%20156.0%2C433.0%20168.0%2C438.3%20180.0%2C445.5%20192.0%2C454.1%20204.0%2C463.6%20216.0%2C473.5%20228.0%2C483.2%20240.0%2C492.0%20252.0%2C499.7%20264.0%2C505.6%20276.0%2C509.6%20288.0%2C511.5%20300.0%2C511.1%20312.0%2C508.8%20324.0%2C504.6%20336.0%2C499.0%20348.0%2C492.4%20360.0%2C485.3%20372.0%2C478.3%20384.0%2C471.9%20396.0%2C466.6%20408.0%2C462.8%20420.0%2C460.8%20432.0%2C460.9%20444.0%2C463.0%20456.0%2C467.2%20468.0%2C473.1%20480.0%2C480.6%20492.0%2C489.0%20504.0%2C498.0%20516.0%2C506.9%20528.0%2C515.2%20540.0%2C522.4%20552.0%2C528.0%20564.0%2C531.5%20576.0%2C532.8%20588.0%2C531.7%20600.0%2C528.2%20612.0%2C522.4%20624.0%2C514.7%20636.0%2C505.4%20648.0%2C495.0%20660.0%2C484.1%20672.0%2C473.3%20684.0%2C463.2%20696.0%2C454.3%20708.0%2C447.0%20720.0%2C441.7%20732.0%2C438.7%20744.0%2C438.0%20756.0%2C439.7%20768.0%2C443.4%20780.0%2C449.0%20792.0%2C456.0%20804.0%2C463.8%20816.0%2C472.1%20828.0%2C480.1%20840.0%2C487.4%20852.0%2C493.5%20864.0%2C498.0%20876.0%2C500.6%20888.0%2C501.2%20900.0%2C499.7%20912.0%2C496.3%20924.0%2C491.3%20936.0%2C485.0%20948.0%2C477.8%20960.0%2C470.4%20972.0%2C463.1%20984.0%2C456.7%20996.0%2C451.5%201008.0%2C448.0%201020.0%2C446.5%201032.0%2C447.2%201044.0%2C450.1%201056.0%2C455.2%201068.0%2C462.3%201080.0%2C471.0%201092.0%2C480.7%201104.0%2C491.2%201116.0%2C501.6%201128.0%2C511.5%201140.0%2C520.3%201152.0%2C527.5%201164.0%2C532.8%201176.0%2C535.7%201188.0%2C536.2%201200.0%2C534.2%22%2F%3E%3Cpolyline%20points%3D%220.0%2C511.0%2012.0%2C499.0%2024.0%2C489.7%2036.0%2C483.8%2048.0%2C481.5%2060.0%2C483.2%2072.0%2C488.7%2084.0%2C497.9%2096.0%2C510.3%20108.0%2C525.3%20120.0%2C542.1%20132.0%2C560.0%20144.0%2C577.8%20156.0%2C594.8%20168.0%2C609.9%20180.0%2C622.5%20192.0%2C631.7%20204.0%2C637.2%20216.0%2C638.6%20228.0%2C635.8%20240.0%2C629.0%20252.0%2C618.5%20264.0%2C604.8%20276.0%2C588.7%20288.0%2C571.0%20300.0%2C552.7%20312.0%2C534.5%20324.0%2C517.6%20336.0%2C502.7%20348.0%2C490.5%20360.0%2C481.8%20372.0%2C476.8%20384.0%2C475.8%20396.0%2C478.7%20408.0%2C485.4%20420.0%2C495.3%20432.0%2C507.8%20444.0%2C522.2%20456.0%2C537.6%20468.0%2C553.1%20480.0%2C567.8%20492.0%2C580.9%20504.0%2C591.4%20516.0%2C599.0%20528.0%2C603.0%20540.0%2C603.2%20552.0%2C599.7%20564.0%2C592.5%20576.0%2C582.1%20588.0%2C569.0%20600.0%2C553.9%20612.0%2C537.8%20624.0%2C521.5%20636.0%2C505.9%20648.0%2C491.9%20660.0%2C480.4%20672.0%2C472.0%20684.0%2C467.3%20696.0%2C466.5%20708.0%2C469.8%20720.0%2C477.0%20732.0%2C487.9%20744.0%2C502.0%20756.0%2C518.5%20768.0%2C536.6%20780.0%2C555.4%20792.0%2C573.9%20804.0%2C591.3%20816.0%2C606.7%20828.0%2C619.2%20840.0%2C628.3%20852.0%2C633.5%20864.0%2C634.6%20876.0%2C631.6%20888.0%2C624.7%20900.0%2C614.3%20912.0%2C601.0%20924.0%2C585.6%20936.0%2C569.0%20948.0%2C552.0%20960.0%2C535.6%20972.0%2C520.6%20984.0%2C508.0%20996.0%2C498.2%201008.0%2C492.0%201020.0%2C489.5%201032.0%2C490.8%201044.0%2C495.8%201056.0%2C504.3%201068.0%2C515.6%201080.0%2C529.0%201092.0%2C543.9%201104.0%2C559.2%201116.0%2C574.0%201128.0%2C587.5%201140.0%2C598.9%201152.0%2C607.4%201164.0%2C612.5%201176.0%2C613.9%201188.0%2C611.3%201200.0%2C604.9%22%2F%3E%3Cpolyline%20points%3D%220.0%2C587.1%2012.0%2C577.2%2024.0%2C568.4%2036.0%2C561.2%2048.0%2C555.9%2060.0%2C552.7%2072.0%2C551.8%2084.0%2C553.2%2096.0%2C557.1%20108.0%2C563.2%20120.0%2C571.3%20132.0%2C581.3%20144.0%2C592.8%20156.0%2C605.3%20168.0%2C618.5%20180.0%2C631.8%20192.0%2C644.9%20204.0%2C657.2%20216.0%2C668.3%20228.0%2C677.9%20240.0%2C685.4%20252.0%2C690.8%20264.0%2C693.8%20276.0%2C694.3%20288.0%2C692.2%20300.0%2C687.7%20312.0%2C681.0%20324.0%2C672.2%20336.0%2C661.8%20348.0%2C650.0%20360.0%2C637.4%20372.0%2C624.3%20384.0%2C611.2%20396.0%2C598.7%20408.0%2C587.1%20420.0%2C576.9%20432.0%2C568.4%20444.0%2C561.9%20456.0%2C557.6%20468.0%2C555.6%20480.0%2C556.0%20492.0%2C558.7%20504.0%2C563.5%20516.0%2C570.2%20528.0%2C578.6%20540.0%2C588.2%20552.0%2C598.6%20564.0%2C609.4%20576.0%2C620.2%20588.0%2C630.5%20600.0%2C639.9%20612.0%2C647.9%20624.0%2C654.3%20636.0%2C658.7%20648.0%2C660.9%20660.0%2C660.9%20672.0%2C658.6%20684.0%2C654.1%20696.0%2C647.6%20708.0%2C639.2%20720.0%2C629.3%20732.0%2C618.2%20744.0%2C606.4%20756.0%2C594.2%20768.0%2C582.3%20780.0%2C571.0%20792.0%2C560.8%20804.0%2C552.0%20816.0%2C545.1%20828.0%2C540.3%20840.0%2C537.8%20852.0%2C537.8%20864.0%2C540.2%20876.0%2C545.1%20888.0%2C552.3%20900.0%2C561.5%20912.0%2C572.4%20924.0%2C584.7%20936.0%2C597.9%20948.0%2C611.7%20960.0%2C625.4%20972.0%2C638.7%20984.0%2C651.1%20996.0%2C662.1%201008.0%2C671.4%201020.0%2C678.7%201032.0%2C683.7%201044.0%2C686.4%201056.0%2C686.5%201068.0%2C684.3%201080.0%2C679.7%201092.0%2C673.0%201104.0%2C664.5%201116.0%2C654.6%201128.0%2C643.5%201140.0%2C631.9%201152.0%2C620.0%201164.0%2C608.4%201176.0%2C597.6%201188.0%2C587.9%201200.0%2C579.8%22%2F%3E%3Cpolyline%20points%3D%220.0%2C723.5%2012.0%2C723.4%2024.0%2C720.8%2036.0%2C715.9%2048.0%2C708.9%2060.0%2C700.2%2072.0%2C690.3%2084.0%2C679.9%2096.0%2C669.5%20108.0%2C659.8%20120.0%2C651.3%20132.0%2C644.6%20144.0%2C640.0%20156.0%2C637.7%20168.0%2C637.8%20180.0%2C640.2%20192.0%2C644.6%20204.0%2C650.6%20216.0%2C657.7%20228.0%2C665.4%20240.0%2C673.0%20252.0%2C680.0%20264.0%2C685.9%20276.0%2C690.2%20288.0%2C692.6%20300.0%2C693.0%20312.0%2C691.4%20324.0%2C687.9%20336.0%2C682.9%20348.0%2C676.9%20360.0%2C670.2%20372.0%2C663.6%20384.0%2C657.5%20396.0%2C652.6%20408.0%2C649.3%20420.0%2C647.9%20432.0%2C648.7%20444.0%2C651.8%20456.0%2C657.0%20468.0%2C664.0%20480.0%2C672.6%20492.0%2C682.2%20504.0%2C692.1%20516.0%2C701.9%20528.0%2C710.7%20540.0%2C718.2%20552.0%2C723.8%20564.0%2C727.1%20576.0%2C728.0%20588.0%2C726.3%20600.0%2C722.3%20612.0%2C716.2%20624.0%2C708.4%20636.0%2C699.5%20648.0%2C690.0%20660.0%2C680.6%20672.0%2C671.8%20684.0%2C664.2%20696.0%2C658.3%20708.0%2C654.4%20720.0%2C652.6%20732.0%2C653.0%20744.0%2C655.4%20756.0%2C659.5%20768.0%2C665.0%20780.0%2C671.2%20792.0%2C677.7%20804.0%2C683.8%20816.0%2C689.0%20828.0%2C692.9%20840.0%2C694.9%20852.0%2C695.0%20864.0%2C693.1%20876.0%2C689.2%20888.0%2C683.5%20900.0%2C676.4%20912.0%2C668.5%20924.0%2C660.2%20936.0%2C652.2%20948.0%2C645.1%20960.0%2C639.5%20972.0%2C635.6%20984.0%2C634.0%20996.0%2C634.9%201008.0%2C638.1%201020.0%2C643.6%201032.0%2C651.1%201044.0%2C660.2%201056.0%2C670.2%201068.0%2C680.7%201080.0%2C691.0%201092.0%2C700.5%201104.0%2C708.5%201116.0%2C714.7%201128.0%2C718.7%201140.0%2C720.3%201152.0%2C719.6%201164.0%2C716.6%201176.0%2C711.7%201188.0%2C705.3%201200.0%2C697.9%22%2F%3E%3Cpolyline%20points%3D%220.0%2C800.4%2012.0%2C793.2%2024.0%2C784.2%2036.0%2C773.6%2048.0%2C761.7%2060.0%2C749.0%2072.0%2C735.9%2084.0%2C722.7%2096.0%2C709.8%20108.0%2C697.8%20120.0%2C687.0%20132.0%2C677.7%20144.0%2C670.2%20156.0%2C664.8%20168.0%2C661.7%20180.0%2C660.9%20192.0%2C662.5%20204.0%2C666.4%20216.0%2C672.4%20228.0%2C680.4%20240.0%2C690.2%20252.0%2C701.2%20264.0%2C713.3%20276.0%2C726.0%20288.0%2C738.8%20300.0%2C751.4%20312.0%2C763.4%20324.0%2C774.3%20336.0%2C783.8%20348.0%2C791.6%20360.0%2C797.4%20372.0%2C801.2%20384.0%2C802.8%20396.0%2C802.2%20408.0%2C799.4%20420.0%2C794.6%20432.0%2C788.0%20444.0%2C779.8%20456.0%2C770.5%20468.0%2C760.3%20480.0%2C749.6%20492.0%2C738.8%20504.0%2C728.5%20516.0%2C718.8%20528.0%2C710.3%20540.0%2C703.2%20552.0%2C697.9%20564.0%2C694.4%20576.0%2C693.1%20588.0%2C693.9%20600.0%2C696.9%20612.0%2C701.9%20624.0%2C708.9%20636.0%2C717.5%20648.0%2C727.6%20660.0%2C738.7%20672.0%2C750.5%20684.0%2C762.6%20696.0%2C774.5%20708.0%2C785.9%20720.0%2C796.3%20732.0%2C805.4%20744.0%2C812.9%20756.0%2C818.5%20768.0%2C821.9%20780.0%2C823.0%20792.0%2C821.8%20804.0%2C818.3%20816.0%2C812.5%20828.0%2C804.7%20840.0%2C795.0%20852.0%2C783.8%20864.0%2C771.4%20876.0%2C758.3%20888.0%2C744.7%20900.0%2C731.3%20912.0%2C718.2%20924.0%2C706.1%20936.0%2C695.2%20948.0%2C686.0%20960.0%2C678.6%20972.0%2C673.3%20984.0%2C670.2%20996.0%2C669.4%201008.0%2C671.0%201020.0%2C674.7%201032.0%2C680.5%201044.0%2C688.1%201056.0%2C697.3%201068.0%2C707.7%201080.0%2C718.8%201092.0%2C730.4%201104.0%2C742.0%201116.0%2C753.1%201128.0%2C763.5%201140.0%2C772.7%201152.0%2C780.3%201164.0%2C786.3%201176.0%2C790.2%201188.0%2C792.1%201200.0%2C791.8%22%2F%3E%3Cpolyline%20points%3D%220.0%2C865.5%2012.0%2C859.8%2024.0%2C852.4%2036.0%2C843.4%2048.0%2C833.2%2060.0%2C822.0%2072.0%2C810.2%2084.0%2C798.0%2096.0%2C786.0%20108.0%2C774.5%20120.0%2C763.8%20132.0%2C754.2%20144.0%2C746.0%20156.0%2C739.6%20168.0%2C735.0%20180.0%2C732.4%20192.0%2C731.9%20204.0%2C733.5%20216.0%2C737.2%20228.0%2C742.7%20240.0%2C750.0%20252.0%2C758.7%20264.0%2C768.6%20276.0%2C779.4%20288.0%2C790.8%20300.0%2C802.2%20312.0%2C813.5%20324.0%2C824.3%20336.0%2C834.1%20348.0%2C842.7%20360.0%2C849.9%20372.0%2C855.4%20384.0%2C859.1%20396.0%2C860.9%20408.0%2C860.8%20420.0%2C858.7%20432.0%2C854.9%20444.0%2C849.4%20456.0%2C842.5%20468.0%2C834.5%20480.0%2C825.6%20492.0%2C816.2%20504.0%2C806.7%20516.0%2C797.3%20528.0%2C788.5%20540.0%2C780.5%20552.0%2C773.7%20564.0%2C768.3%20576.0%2C764.5%20588.0%2C762.6%20600.0%2C762.5%20612.0%2C764.3%20624.0%2C768.0%20636.0%2C773.4%20648.0%2C780.5%20660.0%2C789.0%20672.0%2C798.6%20684.0%2C809.0%20696.0%2C819.9%20708.0%2C830.9%20720.0%2C841.8%20732.0%2C852.0%20744.0%2C861.3%20756.0%2C869.3%20768.0%2C875.9%20780.0%2C880.6%20792.0%2C883.5%20804.0%2C884.4%20816.0%2C883.1%20828.0%2C879.8%20840.0%2C874.5%20852.0%2C867.4%20864.0%2C858.7%20876.0%2C848.6%20888.0%2C837.4%20900.0%2C825.6%20912.0%2C813.3%20924.0%2C801.0%20936.0%2C789.1%20948.0%2C778.0%20960.0%2C767.9%20972.0%2C759.1%20984.0%2C751.9%20996.0%2C746.6%201008.0%2C743.1%201020.0%2C741.7%201032.0%2C742.4%201044.0%2C745.0%201056.0%2C749.4%201068.0%2C755.6%201080.0%2C763.2%201092.0%2C771.9%201104.0%2C781.6%201116.0%2C791.7%201128.0%2C802.0%201140.0%2C812.1%201152.0%2C821.6%201164.0%2C830.3%201176.0%2C837.8%201188.0%2C843.9%201200.0%2C848.3%22%2F%3E%3Cpolyline%20points%3D%220.0%2C955.5%2012.0%2C954.0%2024.0%2C950.9%2036.0%2C946.2%2048.0%2C939.9%2060.0%2C932.3%2072.0%2C923.4%2084.0%2C913.4%2096.0%2C902.5%20108.0%2C891.1%20120.0%2C879.2%20132.0%2C867.2%20144.0%2C855.3%20156.0%2C843.8%20168.0%2C832.8%20180.0%2C822.7%20192.0%2C813.7%20204.0%2C805.9%20216.0%2C799.4%20228.0%2C794.5%20240.0%2C791.2%20252.0%2C789.6%20264.0%2C789.7%20276.0%2C791.5%20288.0%2C794.9%20300.0%2C799.9%20312.0%2C806.2%20324.0%2C813.8%20336.0%2C822.5%20348.0%2C832.1%20360.0%2C842.3%20372.0%2C852.9%20384.0%2C863.7%20396.0%2C874.4%20408.0%2C884.8%20420.0%2C894.6%20432.0%2C903.6%20444.0%2C911.7%20456.0%2C918.5%20468.0%2C924.1%20480.0%2C928.2%20492.0%2C930.8%20504.0%2C931.8%20516.0%2C931.2%20528.0%2C929.1%20540.0%2C925.5%20552.0%2C920.5%20564.0%2C914.2%20576.0%2C906.9%20588.0%2C898.6%20600.0%2C889.6%20612.0%2C880.2%20624.0%2C870.5%20636.0%2C860.8%20648.0%2C851.3%20660.0%2C842.4%20672.0%2C834.1%20684.0%2C826.8%20696.0%2C820.5%20708.0%2C815.6%20720.0%2C812.0%20732.0%2C810.0%20744.0%2C809.6%20756.0%2C810.7%20768.0%2C813.5%20780.0%2C817.8%20792.0%2C823.6%20804.0%2C830.8%20816.0%2C839.2%20828.0%2C848.6%20840.0%2C858.9%20852.0%2C869.8%20864.0%2C881.1%20876.0%2C892.5%20888.0%2C903.8%20900.0%2C914.8%20912.0%2C925.1%20924.0%2C934.6%20936.0%2C943.1%20948.0%2C950.3%20960.0%2C956.1%20972.0%2C960.4%20984.0%2C963.1%20996.0%2C964.1%201008.0%2C963.4%201020.0%2C960.9%201032.0%2C956.8%201044.0%2C951.1%201056.0%2C944.0%201068.0%2C935.6%201080.0%2C926.1%201092.0%2C915.7%201104.0%2C904.6%201116.0%2C893.1%201128.0%2C881.3%201140.0%2C869.7%201152.0%2C858.3%201164.0%2C847.5%201176.0%2C837.5%201188.0%2C828.4%201200.0%2C820.6%22%2F%3E%3Cpolyline%20points%3D%220.0%2C899.3%2012.0%2C905.8%2024.0%2C913.3%2036.0%2C921.6%2048.0%2C930.3%2060.0%2C939.3%2072.0%2C948.1%2084.0%2C956.6%2096.0%2C964.3%20108.0%2C971.2%20120.0%2C976.9%20132.0%2C981.2%20144.0%2C984.0%20156.0%2C985.2%20168.0%2C984.8%20180.0%2C982.7%20192.0%2C978.9%20204.0%2C973.6%20216.0%2C966.9%20228.0%2C959.0%20240.0%2C950.2%20252.0%2C940.6%20264.0%2C930.5%20276.0%2C920.4%20288.0%2C910.3%20300.0%2C900.7%20312.0%2C891.8%20324.0%2C884.0%20336.0%2C877.4%20348.0%2C872.2%20360.0%2C868.7%20372.0%2C866.9%20384.0%2C866.9%20396.0%2C868.7%20408.0%2C872.3%20420.0%2C877.7%20432.0%2C884.6%20444.0%2C893.0%20456.0%2C902.5%20468.0%2C912.9%20480.0%2C924.1%20492.0%2C935.5%20504.0%2C947.1%20516.0%2C958.3%20528.0%2C969.0%20540.0%2C978.9%20552.0%2C987.7%20564.0%2C995.1%20576.0%2C1001.0%20588.0%2C1005.3%20600.0%2C1007.8%20612.0%2C1008.5%20624.0%2C1007.5%20636.0%2C1004.7%20648.0%2C1000.2%20660.0%2C994.3%20672.0%2C987.1%20684.0%2C978.9%20696.0%2C969.8%20708.0%2C960.3%20720.0%2C950.6%20732.0%2C941.0%20744.0%2C931.7%20756.0%2C923.1%20768.0%2C915.5%20780.0%2C909.0%20792.0%2C903.8%20804.0%2C900.2%20816.0%2C898.1%20828.0%2C897.7%20840.0%2C899.0%20852.0%2C901.9%20864.0%2C906.2%20876.0%2C912.0%20888.0%2C918.9%20900.0%2C926.8%20912.0%2C935.4%20924.0%2C944.4%20936.0%2C953.5%20948.0%2C962.5%20960.0%2C971.1%20972.0%2C978.9%20984.0%2C985.7%20996.0%2C991.3%201008.0%2C995.5%201020.0%2C998.1%201032.0%2C999.0%201044.0%2C998.2%201056.0%2C995.7%201068.0%2C991.4%201080.0%2C985.5%201092.0%2C978.2%201104.0%2C969.6%201116.0%2C959.9%201128.0%2C949.4%201140.0%2C938.4%201152.0%2C927.2%201164.0%2C916.0%201176.0%2C905.3%201188.0%2C895.2%201200.0%2C886.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:1200px 900px;
  background-repeat:repeat;
  background-attachment:fixed;
}

/* surtitres : pastille jaune, texte noir (cf. « 26 SEPT · 4 OCT 2026 ») */
.eyebrow,.section-head .eyebrow{
  display:inline-block; background:#fdc300; color:#111111;
  padding:.34rem .62rem .3rem; border-radius:4px;
  font-weight:700; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  line-height:1;
}
.photo-band .eyebrow,.config-banner .eyebrow,.gamme .section-head .eyebrow,.cta-band .eyebrow{
  background:#fdc300; color:#111111;
}

/* mot d'accroche surligne au feutre jaune (cf. « LISTE DES EQUIPEMENTS ») */
.hl{
  background:linear-gradient(to bottom, transparent 8%, #fdc300 8%, #fdc300 92%, transparent 92%);
  padding:0 .18em; color:#111111;
}

/* chiffres cles dans un cadre noir arrondi (cf. fiche Triostyle) */
.spec-key{
  border:2px solid #111111; border-radius:26px;
  padding:2rem 2.2rem; gap:1.4rem;
  border-bottom:2px solid #111111;
}
.spec-key .sk-label{ color:#4a4a4a; }

/* cartes : blanc franc, filet gris, ombre douce */
.photo-card,.model-card,.service-card,.blog-card,.related-card{
  background:#ffffff; border:1px solid #e8e8e8; border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 14px 30px -22px rgba(0,0,0,.35);
}

/* le jaune souligne les titres de groupe plutot que de les colorer */
.spec-group h3{
  color:#111111; display:inline-block;
  border-bottom:3px solid #fdc300; padding-bottom:.3rem;
}
/* corrections de lisibilite */
.eyebrow,.section-head .eyebrow{ color:#111111 !important; background:#fdc300 !important; }
.model-body a.discover{ background:#fdc300 !important; color:#111111 !important; font-weight:700; }
.model-body a.discover:hover{ background:#e3ae00 !important; color:#111111 !important; }
/* coup de pinceau jaune derriere le mot d'accroche (signature REIMO) */
.brush-wrap .brush-fill{ fill:#fdc300; }
.brush-wrap em{ color:#111111; font-style:normal; }

/* ===== Jetons de couleur Eco Campers — source unique =====
   Huit valeurs. Tous les anciens noms pointent dessus : le rendu est
   inchange, mais il n'y a plus qu'un endroit ou changer une couleur. */
:root{
  --ec-fond:        #ffffff;   /* fond de page et cartes            */
  --ec-fond-2:      #f5f5f5;   /* fond secondaire, emplacements     */
  --ec-filet:       #e5e5e5;   /* bordures et separateurs           */
  --ec-gris:        #6e6e6e;   /* texte secondaire                  */
  --ec-gris-fonce:  #4a4a4a;   /* texte courant sur fond clair      */
  --ec-texte:       #111111;   /* titres et texte fort              */
  --ec-noir:        #000000;   /* bandeaux pleins                   */
  --ec-accent:      #fdc300;   /* jaune : etiquette, bouton, icone  */
  --ec-accent-f:    #e3ae00;   /* jaune survol                      */

  /* correspondances heritees — ne plus utiliser dans le nouveau code */
  --paper:var(--ec-fond); --card:var(--ec-fond); --white:var(--ec-fond);
  --paper-alt:var(--ec-fond-2); --grey-050:var(--ec-fond-2);
  --line:var(--ec-filet); --grey-200:var(--ec-filet);
  --ink-faint:var(--ec-gris); --grey-500:var(--ec-gris);
  --ink-soft:var(--ec-gris-fonce); --grey-700:var(--ec-gris-fonce);
  --ink:var(--ec-texte); --pine:var(--ec-texte); --black:var(--ec-texte);
  --terracotta-deep:var(--ec-texte);
  --pine-deep:var(--ec-noir);
  --gold:var(--ec-accent); --terracotta:var(--ec-accent);
  --terracotta-light:var(--ec-accent); --accent:var(--ec-accent);
  --accent-dark:var(--ec-accent-f);
  --accent-soft:rgba(253,195,0,.22);
}



/* ===== Caracteristiques : une icone par ligne ===== */
.model-specs li, .quick-specs li{ display:flex; align-items:flex-start; gap:.55rem; }
.model-specs li::marker, .quick-specs li::marker{ content:""; }
.model-specs li::before, .quick-specs li::before{ content:none !important; }
.model-specs, .quick-specs{ list-style:none; padding-left:0; }
.sp-i{ width:1.05rem; height:1.05rem; flex:0 0 auto; margin-top:.16rem;
       color:var(--ec-accent,#fdc300); }


/* ===== En-tete : plus d'ombre portee ===== */
header.top, header.top.scrolled{ box-shadow:none !important; }
header.top.scrolled{ border-bottom:1px solid rgba(0,0,0,.10); }
.logo-full{ filter:none !important; box-shadow:none !important; }


/* ===== En-tete a deux niveaux : bandeau noir + barre blanche ===== */
.ec-bandeau{ background:var(--ec-noir,#000000); color:rgba(255,255,255,.80); }
.ec-bandeau-in{ max-width:1280px; margin:0 auto; display:flex; align-items:center;
  gap:1.5rem; flex-wrap:wrap;
  padding:.46rem clamp(1.2rem,4vw,3rem);
  font-family:"Montserrat",-apple-system,sans-serif; font-size:.74rem; letter-spacing:.015em;
  line-height:1.5; }
.ec-bandeau .ecb{ display:inline-flex; align-items:center; gap:.42rem; white-space:nowrap; }
.ec-bandeau .ecb svg{ width:13px; height:13px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.ec-bandeau .ecb-cle{ color:#ffffff; font-weight:600; }
.ec-bandeau .ecb-cle svg{ color:var(--ec-accent,#fdc300); opacity:1; }
.ec-bandeau .ecb-fin{ margin-left:auto; }
@media (max-width:1040px){ .ec-bandeau .ecb-fin{ margin-left:0; } }
@media (max-width:780px){
  .ec-bandeau-in{ justify-content:center; gap:.9rem; font-size:.7rem; }
  .ec-bandeau .ecb-opt{ display:none; }
}
/* la barre blanche ne porte plus le filet du haut, le bandeau fait la separation */
header.top .nav-wrap{ padding-top:clamp(.9rem,2vw,1.25rem); }


/* l accueil a une barre pleine largeur : le bandeau suit */
@media (min-width:941px){ .ec-bandeau-in{ max-width:100%; } }

/* ===== Barre de menu pleine largeur sur toutes les pages (07/10/2026) ===== */
@media (min-width:941px){
  .nav-wrap{ max-width:100% !important; }
  .ec-bandeau-in{ max-width:100% !important; }
}


/* ===== Bandeau : l'adresse ouvre un itineraire ===== */
.ec-bandeau a.ecb{ color:inherit; text-decoration:none; transition:color .18s ease; }
.ec-bandeau a.ecb:hover{ color:#ffffff; text-decoration:underline; text-underline-offset:3px; }
.ec-bandeau a.ecb .ecb-fleche{ font-size:.85em; opacity:.65; margin-left:.1rem; }


/* ===== Accueil — retours du 14/10/2026 ===== */

/* B. la gamme en grille classique, trois colonnes */
#gamme .model-strip{
  grid-template-columns:repeat(3,1fr) !important;
  grid-template-areas:none !important;
  grid-auto-rows:auto !important;
  gap:1.6rem;
}
#gamme .model-card,
#gamme .model-card.featured,
#gamme .model-card[data-slot]{ grid-area:auto !important; }
#gamme .model-photo,
#gamme .model-card.featured .model-photo{
  height:auto !important; min-height:0 !important; aspect-ratio:4/3;
  margin:.8rem .8rem 0; border-radius:12px; overflow:hidden;
}
#gamme .model-photo img{ height:100%; }
#gamme .mn-tag{ display:none !important; }
#gamme .mn-titre{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:clamp(1.3rem,2vw,1.65rem);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.1;
  margin:0 0 .15rem; color:var(--ec-texte,#111111);
}
#gamme .model-body,
#gamme .model-card.featured .model-body{
  padding:1.5rem 1.5rem 1.8rem; text-align:center; align-items:center; gap:.55rem;
}
#gamme .model-body .mtag,
#gamme .model-card.featured .mtag{
  margin:0; font-style:normal; text-transform:uppercase; color:var(--ec-gris,#6e6e6e);
  font-size:.7rem; letter-spacing:.09em; font-weight:700;
}
#gamme .model-body .mt,
#gamme .model-card.featured .mt{
  font-weight:500; color:var(--ec-gris-fonce,#4a4a4a); font-size:.9rem;
  line-height:1.55; margin:0; max-width:34ch;
}
#gamme .model-specs{
  text-align:left; align-self:stretch; gap:.42rem; font-size:.78rem;
  margin:.45rem 0 1rem; padding-top:.9rem; border-top:1px solid var(--ec-filet,#e5e5e5);
}
#gamme .model-body a.discover{
  align-self:center !important; margin-top:auto !important; padding-top:.72rem;
  background:transparent !important; color:var(--ec-texte,#111111) !important;
  border:1.5px solid var(--ec-texte,#111111); border-radius:99px;
  font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  font-size:.75rem; padding:.72rem 1.9rem;
}
#gamme .model-body a.discover:hover{
  background:var(--ec-texte,#111111) !important; color:#ffffff !important;
}
#gamme .model-card.featured{
  background:var(--ec-accent,#fdc300) !important;
  border-color:var(--ec-accent,#fdc300) !important;
}
#gamme .model-card.featured .mn-titre,
#gamme .model-card.featured .mtag,
#gamme .model-card.featured .mt,
#gamme .model-card.featured .model-specs,
#gamme .model-card.featured .sp-i{ color:#111111; }
#gamme .model-card.featured .model-specs{ border-top-color:rgba(0,0,0,.18); }
#gamme .model-card.featured a.discover{
  background:#111111 !important; border-color:#111111; color:#ffffff !important;
}
#gamme .model-card.featured a.discover:hover{
  background:#ffffff !important; border-color:#ffffff; color:#111111 !important;
}
#gamme .model-card:hover{ transform:translateY(-4px); }
@media (max-width:980px){ #gamme .model-strip{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:640px){ #gamme .model-strip{ grid-template-columns:1fr !important; } }

/* C. les trois metiers, etoffes */
#stock .metier-intro{
  max-width:70ch; color:var(--ec-gris-fonce,#4a4a4a); font-size:.98rem;
  margin:.8rem 0 0; line-height:1.75;
}
.metier-card p{ margin:0 0 .9rem; }
.metier-points{ list-style:none; margin:0 0 1.3rem; padding:0; display:grid; gap:.45rem; }
.metier-points li{
  display:flex; align-items:flex-start; gap:.55rem; font-size:.84rem;
  color:var(--ec-gris-fonce,#4a4a4a); line-height:1.5;
}
.metier-points li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; margin-top:.5rem;
  border-radius:50%; background:var(--ec-accent,#fdc300);
}

/* D. la bande d'appel sur photo */
#contact .cta-band{
  position:relative; overflow:hidden;
  background-color:#0a0a08;
  background-image:linear-gradient(rgba(8,8,6,.70), rgba(8,8,6,.80)), var(--ec-photo-hero);
  background-size:cover; background-position:center 58%;
  padding-top:clamp(4rem,8vw,6.5rem); padding-bottom:clamp(4rem,8vw,6.5rem);
}
#contact .cta-band h2{
  font-size:clamp(1.9rem,3.6vw,2.7rem); max-width:34ch;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
#contact .cta-band p{
  color:#f0efec; max-width:64ch; text-shadow:0 1px 16px rgba(0,0,0,.55);
}

/* E. le blog : cinq colonnes, visuels carres, theme sur pastille jaune */
.blog .blog-grid{ grid-template-columns:repeat(5,1fr) !important; gap:1.1rem; }
@media (max-width:1180px){ .blog .blog-grid{ grid-template-columns:repeat(4,1fr) !important; } }
@media (max-width:900px){  .blog .blog-grid{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:680px){  .blog .blog-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:440px){  .blog .blog-grid{ grid-template-columns:1fr !important; } }
.blog .blog-grid .blog-card{ display:flex; flex-direction:column; }
.blog .blog-grid .blog-card .blog-body{ flex:1; }
.blog .blog-grid .blog-card:nth-child(n+6){ display:none; }
@media (max-width:1180px){ .blog .blog-grid .blog-card:nth-child(n+5){ display:none; } }
@media (max-width:900px){
  .blog .blog-grid .blog-card:nth-child(n+5){ display:flex; }
  .blog .blog-grid .blog-card:nth-child(n+7){ display:none; }
}
@media (max-width:440px){ .blog .blog-grid .blog-card:nth-child(n+5){ display:none; } }
.blog-card .blog-photo{ height:auto !important; aspect-ratio:1/1; }
.blog-card .blog-body{
  padding:1rem 1.05rem 1.25rem; display:flex; flex-direction:column; gap:.5rem;
}
.blog-card .bd{
  align-self:flex-start; order:3; margin:auto 0 0;
  background:var(--ec-accent,#fdc300); color:#111111 !important;
  font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.28rem .62rem; border-radius:5px; line-height:1.2;
}
.blog-card h3{
  order:1; margin:0 !important; font-size:.97rem; font-weight:600;
  line-height:1.32; letter-spacing:-.005em;
}
.blog-card .bx{
  order:2; margin:0; font-size:.81rem; line-height:1.5; color:var(--ec-gris,#6e6e6e);
}

/* F. le pied de page suit la gouttiere des sections */
.foot-grid{ max-width:100% !important; padding:3.5rem 10% 2.5rem !important; }
@media (max-width:980px){ .foot-grid{ padding:3rem 6% 2.2rem !important; } }
@media (max-width:640px){ .foot-grid{ padding:2.6rem 1.2rem 2rem !important; } }


/* ======================================================================
   Parti graphique catalogue — 14/10/2026
   Titres Montserrat grasse · corps en serif Spectral · jaune #fdc300
   Angles vifs · filets fins · etiquettes rectangulaires
   ====================================================================== */

:root{
  --ec-serif:"Spectral",Georgia,"Times New Roman",serif;
  --ec-titre:#3a3a3a;          /* gris des titres de section          */
  --ec-filet-2:#d8d8d8;        /* filet des listes                    */
}

/* --- 1. la serif prend le corps du texte ------------------------------ */
p, .lead, .mt, .bx, .metier-intro, .metier-points li, .model-specs li span,
.faq-item .fa, .foot-grid p, figcaption, .cat-legende, blockquote{
  font-family:var(--ec-serif);
}
main p{ font-size:1.02rem; line-height:1.72; }
.model-specs li span{ font-size:.92rem; line-height:1.45; }

/* --- 2. les titres passent en gris, un mot en jaune -------------------- */
main h2, .section-head h2, .newsletter h3{ color:var(--ec-titre); letter-spacing:-.01em; }
main h2 em.jm, .newsletter h3 em.jm{ font-style:normal; color:var(--ec-accent,#fdc300); }
#contact .cta-band h2{ color:#ffffff; }
#contact .cta-band h2 em.jm{ color:var(--ec-accent,#fdc300); }

/* --- 3. l'etiquette jaune du catalogue : rectangle, pas de rayon ------- */
.eyebrow, .section-head .eyebrow{
  border-radius:0 !important; padding:.4rem .72rem .36rem !important;
  letter-spacing:.1em !important;
}

/* --- 4. le chapeau de section passe sous le titre, en italique --------- */
.section-head{ display:block !important; margin-bottom:2.6rem; }
.section-head p{
  max-width:74ch !important; margin:.7rem 0 0 !important;
  font-family:"Montserrat",sans-serif !important; font-style:italic; font-weight:500;
  color:var(--ec-gris-fonce,#4a4a4a) !important; font-size:1.02rem !important;
}

/* --- 5. angles vifs, partout ------------------------------------------ */
.model-card, .blog-card, .metier-card, .cta-band, .newsletter, .model-photo,
.blog-photo, .metier-photo, .eyebrow, .bd, .blog-theme, .btn, .nav-cta,
.newsletter input, .photo-slot, .ph-cadre, .guide-visual, .photo-frame,
.social-icons a, .discover, .metier-card .arrow, .mobile-bar .quote,
.model-body a.discover{ border-radius:0 !important; }

/* --- 7. la gamme : cartes blanches, photo a bord franc, specs a filets -- */
#gamme .model-card{
  background:#ffffff !important; border:1px solid #e8e8e8 !important;
  box-shadow:0 2px 4px rgba(0,0,0,.05), 0 16px 30px -20px rgba(0,0,0,.30) !important;
}
#gamme .model-card:hover{
  box-shadow:0 4px 10px rgba(0,0,0,.07), 0 26px 44px -22px rgba(0,0,0,.38) !important;
}
#gamme .model-photo, #gamme .model-card.featured .model-photo{ margin:0 !important; }
#gamme .model-specs{ border-top:none; padding-top:0; margin:.6rem 0 1rem; gap:0; }
#gamme .model-specs li{
  border-bottom:1px solid var(--ec-filet-2,#d8d8d8); padding:.55rem 0;
  align-items:center;
}
#gamme .model-card.featured{
  background:var(--ec-accent,#fdc300) !important;
  border-color:var(--ec-accent,#fdc300) !important;
  box-shadow:0 2px 4px rgba(0,0,0,.08), 0 16px 30px -20px rgba(0,0,0,.45) !important;
}
#gamme .model-card.featured .model-specs li{ border-bottom-color:rgba(0,0,0,.22); }
#gamme .mn-titre{ color:#2b2b2b; }
#gamme .model-card.featured .mn-titre{ color:#111111; }

/* --- 8. les trois metiers : une photo par carte ------------------------ */
#stock .metier-card{ position:relative; padding:0 0 1.8rem; overflow:hidden; }
#stock .metier-photo{
  aspect-ratio:4/3; background-size:cover; background-position:center 55%;
  background-color:var(--ec-fond-2,#f5f5f5); margin-bottom:1.5rem;
}
#stock .metier-card > svg{
  position:absolute; left:0; top:0; width:46px; height:46px;
  padding:11px; margin:0; background:var(--ec-accent,#fdc300); color:#111111; z-index:2;
}
#stock .metier-card h3, #stock .metier-card .metier-sub, #stock .metier-card p,
#stock .metier-card .metier-points, #stock .metier-card .arrow{
  margin-left:1.7rem; margin-right:1.7rem;
}
#stock .metier-card h3{ color:#2b2b2b; font-size:1.4rem; }
#stock .metier-card .metier-sub{ color:var(--ec-gris-fonce,#4a4a4a); }
#stock .metier-card .arrow{
  background:transparent !important; color:#111111 !important;
  border:1.5px solid #111111; font-family:"Montserrat",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; font-size:.73rem; padding:.68rem 1.3rem;
}
#stock .metier-card:hover .arrow{
  background:var(--ec-accent,#fdc300) !important; border-color:var(--ec-accent,#fdc300);
  color:#111111 !important; transform:none;
}
#stock .metier-card:hover{ border-color:var(--ec-accent,#fdc300); }

/* --- 9. la bande d'appel occupe toute la largeur ----------------------- */
#contact{ padding-left:0 !important; padding-right:0 !important;
          padding-top:0 !important; padding-bottom:0 !important; }
#contact .cta-band{
  background-position:center 60%;
  padding:clamp(5rem,10vw,8.5rem) 10% !important;
}
#contact .cta-band .btn.on-gold.cta-terracotta{
  background:var(--ec-accent,#fdc300) !important; color:#111111 !important;
  border-color:var(--ec-accent,#fdc300) !important;
  font-family:"Montserrat",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; font-size:.78rem; padding:.9rem 2rem;
}
#contact .cta-band .btn.on-gold.cta-terracotta:hover{
  background:#ffffff !important; border-color:#ffffff !important; color:#111111 !important;
}

/* --- 10. les actualites : 4 x 2, theme sur la photo -------------------- */
.blog{ background:#ffffff !important; border-top:1px solid var(--ec-filet,#e5e5e5); }
.blog .blog-grid{ grid-template-columns:repeat(4,1fr) !important; gap:2.2rem 1.6rem !important; }
.blog .blog-grid .blog-card{
  display:block !important; background:transparent !important; border:none !important;
  box-shadow:none !important; text-decoration:none; color:inherit;
}
.blog .blog-grid .blog-card:nth-child(n+9){ display:none !important; }
.blog-card .blog-photo{
  aspect-ratio:4/3; height:auto !important; position:relative; overflow:hidden;
  background:var(--ec-fond-2,#f5f5f5);
}
.blog-card .blog-photo img{ width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease; }
.blog-card:hover .blog-photo img{ transform:scale(1.04); }
.blog-theme{
  position:absolute; left:0; top:0; z-index:2;
  background:var(--ec-accent,#fdc300); color:#111111;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:.63rem;
  letter-spacing:.1em; text-transform:uppercase; line-height:1; padding:.42rem .62rem .38rem;
}
.blog-card h3{
  margin:.85rem 0 .35rem !important; font-family:"Montserrat",sans-serif;
  font-size:1rem; font-weight:700; line-height:1.3; color:#2b2b2b !important;
  min-height:2.6em;
}
.blog-card .bx{
  margin:0; font-size:.9rem; line-height:1.6; color:var(--ec-gris-fonce,#4a4a4a) !important;
}
#blog .gamme-cta{ margin-top:3rem; text-align:center; }
#blog .gamme-cta .btn, #guide-achat .btn{
  background:transparent !important; color:#111111 !important;
  border:1.5px solid #111111 !important; font-family:"Montserrat",sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:.76rem;
  padding:.82rem 1.8rem;
}
#blog .gamme-cta .btn:hover, #guide-achat .btn:hover{
  background:var(--ec-accent,#fdc300) !important; border-color:var(--ec-accent,#fdc300) !important;
  color:#111111 !important;
}
@media (max-width:1100px){
  .blog .blog-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .blog .blog-grid .blog-card:nth-child(n+7){ display:none !important; }
}
@media (max-width:820px){
  .blog .blog-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .blog .blog-grid .blog-card:nth-child(n+7){ display:block !important; }
  .blog .blog-grid .blog-card:nth-child(n+9){ display:none !important; }
}
@media (max-width:460px){
  .blog .blog-grid{ grid-template-columns:1fr !important; }
  .blog .blog-grid .blog-card:nth-child(n+5){ display:none !important; }
}

/* --- 11. la foire aux questions, mise au trait du catalogue ------------ */
.faq-list{ border-top:1.5px solid #2b2b2b; }
.faq-item button.fq{ color:#2b2b2b; }
.faq-item .fa{ color:var(--ec-gris-fonce,#4a4a4a); font-size:.96rem; }

/* --- 12. la newsletter quitte le bloc noir ----------------------------- */
.newsletter{
  background:#ffffff !important; color:#2b2b2b !important;
  border:1px solid var(--ec-filet,#e5e5e5); border-top:4px solid var(--ec-accent,#fdc300);
  padding:3rem clamp(1.5rem,5vw,3rem) 2.6rem !important;
}
.newsletter h3{ color:var(--ec-titre) !important; }
.newsletter input{
  border:1.5px solid #c9c9c9 !important; background:#ffffff; color:#111111;
  font-family:var(--ec-serif);
}
.newsletter input:focus{ border-color:#111111 !important; outline:none; }
.newsletter .btn.on-gold{
  background:var(--ec-accent,#fdc300) !important; color:#111111 !important;
  border-color:var(--ec-accent,#fdc300) !important; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; font-size:.78rem;
}
.newsletter .btn.on-gold:hover{ background:var(--ec-accent-f,#e3ae00) !important; }
.newsletter p{ color:var(--ec-gris-fonce,#4a4a4a) !important; }
.newsletter .social-icons a{ background:rgba(0,0,0,.06) !important; color:#111111 !important; }
.newsletter .social-icons a:hover{ background:var(--ec-accent,#fdc300) !important; color:#111111 !important; }

/* --- 13. le guide d'achat : filet et legende --------------------------- */
#guide-achat .guide-visual{ border:1px solid var(--ec-filet,#e5e5e5); }


/* ======================================================================
   Retouches de lisibilite — 14/10/2026 (2e passe)
   ====================================================================== */

/* --- la gamme : caracteristiques plus contrastees --------------------- */
#gamme .model-specs{ color:#242424 !important; }
#gamme .model-specs li span{ font-size:.95rem; color:#242424; }
#gamme .model-body .mt{ color:#3a3a3a !important; font-size:.95rem; }
#gamme .model-body .mtag{ color:#4a4a4a !important; }
#gamme .model-card.featured .model-specs,
#gamme .model-card.featured .model-specs li span,
#gamme .model-card.featured .mt,
#gamme .model-card.featured .mtag{ color:#111111 !important; }

/* --- les trois metiers : texte plus contraste -------------------------- */
#stock .metier-card p{ color:#2f2f2f !important; }
#stock .metier-card .metier-sub{ color:#111111 !important; font-weight:700; }
#stock .metier-points li{ color:#2f2f2f !important; }
#stock .metier-intro{ color:#2f2f2f !important; }
.section-head p{ color:#3a3a3a !important; }

/* --- le guide d'achat : plus de cadre, la planche respire -------------- */
#guide-achat .guide-visual{
  border:none !important; background-color:transparent;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  min-height:clamp(300px,30vw,440px);
}

/* --- les actualites : un filet et une marge interne par article -------- */
.blog .blog-grid .blog-card{
  border:1px solid var(--ec-filet,#e5e5e5) !important;
  padding:.85rem .85rem 1.3rem; background:#ffffff !important;
  transition:border-color .22s ease, box-shadow .22s ease;
}
.blog .blog-grid .blog-card:hover{
  border-color:#bdbdbd !important;
  box-shadow:0 2px 4px rgba(0,0,0,.04), 0 16px 28px -20px rgba(0,0,0,.30) !important;
}
.blog-card h3{ margin:.9rem 0 .4rem !important; color:#1f1f1f !important; }
.blog-card .bx{ color:#3a3a3a !important; }

/* --- la newsletter : un aplat jaune pleine largeur --------------------- */
#newsletter{
  background:var(--ec-accent,#fdc300);
  padding:0 !important;
}
.newsletter{
  background:transparent !important; border:none !important;
  padding:clamp(3.4rem,7vw,5rem) 10% 3rem !important;
}
.newsletter h3, .newsletter h3 em.jm{ color:#111111 !important; }
.newsletter input{
  border:1.5px solid #111111 !important; background:#ffffff !important; color:#111111;
}
.newsletter .btn.on-gold{
  background:#111111 !important; color:#ffffff !important; border-color:#111111 !important;
}
.newsletter .btn.on-gold:hover{
  background:#ffffff !important; color:#111111 !important; border-color:#111111 !important;
}
.newsletter p{ color:#3a3a3a !important; }
.newsletter .social-icons a{ background:rgba(0,0,0,.10) !important; color:#111111 !important; }
.newsletter .social-icons a:hover{ background:#111111 !important; color:var(--ec-accent,#fdc300) !important; }

/* --- le pied de page : texte lisible ---------------------------------- */
footer .foot-grid p,
footer .foot-grid .foot-nap span,
footer .foot-grid .foot-nap a{ color:#2f2f2f !important; font-size:.9rem !important; }
footer .foot-grid ul{ font-size:.9rem; }
footer .foot-grid ul a{ color:#2f2f2f !important; }
footer .foot-grid ul a:hover{ color:#111111 !important; text-decoration:underline;
  text-underline-offset:3px; }
footer .foot-grid h4{ color:#111111 !important; }
footer .foot-grid .foot-nap svg{ color:#111111; }
footer .foot-bottom{ color:#3a3a3a !important; }


/* --- derniers reglages de lisibilite ---------------------------------- */
#gamme .model-specs .sp-i{ color:#111111; }
#gamme .model-card.featured .model-specs .sp-i{ color:#111111; }
footer .foot-grid p{ font-family:"Montserrat",sans-serif !important; font-size:.88rem !important;
  line-height:1.65; }


/* ======================================================================
   Le site est concu en clair : on neutralise le theme sombre.
   Sans cela, l'affichage sombre repeignait les cartes en noir sous des
   textes noirs. Le catalogue papier est en clair, le site aussi.
   ====================================================================== */
:root, :root[data-theme="dark"], :root[data-theme="light"]{
  color-scheme:light;
  --ec-fond:#ffffff; --ec-fond-2:#f5f5f5; --ec-filet:#e5e5e5;
  --ec-gris:#6e6e6e; --ec-gris-fonce:#4a4a4a; --ec-texte:#111111;
  --ec-noir:#000000; --ec-accent:#fdc300; --ec-accent-f:#e3ae00;
  --paper:#ffffff; --paper-alt:#f5f5f5; --card:#ffffff; --white:#ffffff;
  --line:#e5e5e5; --grey-050:#f5f5f5; --grey-200:#e5e5e5;
  --ink:#111111; --ink-soft:#4a4a4a; --ink-faint:#6e6e6e;
  --grey-500:#6e6e6e; --grey-700:#4a4a4a;
  --pine:#111111; --pine-deep:#000000; --black:#111111;
  --gold:#fdc300; --terracotta:#fdc300; --terracotta-light:#fdc300;
  --terracotta-deep:#111111; --accent:#fdc300; --accent-dark:#e3ae00;
  --accent-soft:rgba(253,195,0,.22);
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 18px 40px -20px rgba(0,0,0,.28);
}
:root[data-theme="dark"] body, body{ background-color:#ffffff; color:#111111; }

/* --- le pied de page : plus de filet au-dessus, plus de mention en bas -- */
footer{ border-top:none !important; margin-top:0 !important; }
.foot-bottom{ display:none !important; }


/* ======================================================================
   Rythme de lecture — 14/10/2026
   Le catalogue alterne en permanence : double page photo, tableau a filets,
   plans, nuancier, bloc noir. La page d'accueil fait pareil.
   ====================================================================== */

/* --- 1. la gamme en deux temps : la vedette --------------------------- */
#gamme .mod-vedette{
  display:grid; grid-template-columns:1.1fr .9fr; align-items:stretch;
  background:var(--ec-accent,#fdc300); margin-bottom:1.6rem;
}
#gamme .mv-photo{ position:relative; min-height:clamp(300px,34vw,460px); overflow:hidden; }
#gamme .mv-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
#gamme .mv-corps{
  padding:clamp(2rem,3.4vw,3.4rem); display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; gap:.55rem;
}
#gamme .mv-corps .eyebrow.mv-eyebrow{
  background:#111111 !important; color:var(--ec-accent,#fdc300) !important; margin-bottom:.3rem;
}
#gamme .mv-titre{
  font-family:"Montserrat",sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.1rem,3.8vw,3.1rem); line-height:1; letter-spacing:-.02em;
  margin:0; color:#111111;
}
#gamme .mv-tag{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:#111111; opacity:.72;
}
#gamme .mv-texte{
  font-family:var(--ec-serif); font-size:1.05rem; line-height:1.65; color:#111111;
  margin:.4rem 0 .2rem; max-width:40ch;
}
#gamme .mv-corps .model-specs{
  align-self:stretch; margin:.5rem 0 1.2rem; gap:0; padding:0; list-style:none;
  display:flex; flex-direction:column;
}
#gamme .mv-corps .model-specs li{
  border-bottom:1px solid rgba(0,0,0,.22); padding:.6rem 0; color:#111111;
  display:flex; align-items:center; gap:.55rem;
}
#gamme .mv-corps .model-specs li span{ font-family:var(--ec-serif); font-size:.95rem; color:#111111; }
#gamme .mv-corps .model-specs .sp-i{ color:#111111; }
#gamme .mv-corps a.discover.mv-lien{
  background:#111111 !important; color:#ffffff !important; border:1.5px solid #111111;
  font-family:"Montserrat",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; font-size:.76rem; padding:.85rem 1.9rem; margin:0 !important;
  align-self:flex-start !important; text-decoration:none;
}
#gamme .mv-corps a.discover.mv-lien:hover{
  background:#ffffff !important; color:#111111 !important; border-color:#ffffff;
}
@media (max-width:900px){
  #gamme .mod-vedette{ grid-template-columns:1fr; }
  #gamme .mv-photo{ min-height:0; aspect-ratio:16/10; }
}

/* --- 2. les cinq autres modeles --------------------------------------- */
#gamme .model-strip{ grid-template-columns:repeat(6,1fr) !important; }
#gamme .model-card, #gamme .model-card[data-slot]{
  grid-area:auto !important; grid-column:span 2 !important;
}
#gamme .model-card:nth-child(4), #gamme .model-card[data-slot]:nth-child(4){
  grid-area:auto !important; grid-column:2 / span 2 !important;
}
@media (max-width:980px){
  #gamme .model-strip{ grid-template-columns:repeat(2,1fr) !important; }
  #gamme .model-card, #gamme .model-card[data-slot],
  #gamme .model-card:nth-child(4), #gamme .model-card[data-slot]:nth-child(4){
    grid-area:auto !important; grid-column:auto !important;
  }
}
@media (max-width:640px){ #gamme .model-strip{ grid-template-columns:1fr !important; } }

/* --- 3. l'intercalaire sur photo -------------------------------------- */
.intercalaire{
  background-size:cover; background-position:center 58%; background-color:#0a0a08;
  padding:clamp(5rem,10vw,9rem) 10% !important; max-width:100% !important; margin:0 !important;
  display:flex; align-items:center;
}
.intercalaire .itc-in{ max-width:min(900px,100%); }
.intercalaire .itc-in > p{ max-width:56ch; }
.intercalaire h2{
  color:#ffffff !important; font-size:clamp(2.1rem,4.6vw,3.4rem); margin:0 0 .6rem;
  text-transform:uppercase; letter-spacing:-.015em; text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.intercalaire h2 em.jm{ color:var(--ec-accent,#fdc300) !important; font-style:normal; }
.intercalaire p{
  color:#eceae6; font-family:"Montserrat",sans-serif; font-style:italic; font-weight:500;
  font-size:1.02rem; margin:0 0 1.9rem; text-shadow:0 1px 16px rgba(0,0,0,.5);
}
.intercalaire .itc-liens{ display:flex; flex-wrap:wrap; gap:.7rem; }
.intercalaire .itc-liens a{
  border:1.5px solid var(--ec-accent,#fdc300); color:#ffffff; text-decoration:none;
  background:rgba(10,10,8,.42); font-family:"Montserrat",sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.05em; padding:.72rem 1.3rem;
  transition:background .2s ease, color .2s ease;
}
.intercalaire .itc-liens a:hover{ background:var(--ec-accent,#fdc300); color:#111111; }

/* --- 4. les trois metiers en bandes alternees -------------------------- */
#stock .metier-bandes{ border-top:1px solid var(--ec-filet,#e5e5e5); }
.metier-bande{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  border-bottom:1px solid var(--ec-filet,#e5e5e5);
  text-decoration:none; color:inherit; transition:background .25s ease;
}
.metier-bande:hover{ background:var(--ec-fond-2,#f5f5f5); }
.metier-bande .mb-photo{
  aspect-ratio:16/10; background-size:cover; background-position:center 55%;
  background-color:var(--ec-fond-2,#f5f5f5);
}
.metier-bande:nth-child(even) .mb-photo{ order:2; }
.metier-bande .mb-corps{ padding:clamp(2rem,4vw,3.6rem) clamp(1.6rem,4.5vw,4.5rem); }
.metier-bande .mb-icone{
  width:46px; height:46px; background:var(--ec-accent,#fdc300); color:#111111;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem;
}
.metier-bande .mb-icone svg{ width:24px; height:24px; margin:0; color:#111111; }
.metier-bande h3{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:clamp(1.6rem,2.6vw,2.1rem);
  color:#2b2b2b; margin:0 0 .25rem;
}
.metier-bande .metier-sub{ color:#111111; font-weight:700; margin-bottom:1rem; }
.metier-bande p{ color:#2f2f2f; margin:0 0 1.1rem; max-width:52ch; }
.metier-bande .metier-points{ margin-bottom:1.5rem; }
.metier-bande .metier-points li{ color:#2f2f2f; }
.metier-bande .arrow{
  display:inline-block; background:transparent; color:#111111;
  border:1.5px solid #111111; font-family:"Montserrat",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; font-size:.74rem; padding:.72rem 1.4rem;
}
.metier-bande:hover .arrow{
  background:var(--ec-accent,#fdc300); border-color:var(--ec-accent,#fdc300); color:#111111;
}
@media (max-width:860px){
  .metier-bande{ grid-template-columns:1fr; }
  .metier-bande:nth-child(even) .mb-photo{ order:0; }
  .metier-bande .mb-corps{ padding:1.8rem 0 2.6rem; }
}

/* --- 6. le bloc noir a chiffre fort ------------------------------------ */
.bloc-chiffre{
  background:#111111; color:#ffffff; padding:clamp(3.5rem,7vw,6rem) 10% !important;
  max-width:100% !important; margin:0 !important;
}
.bloc-chiffre .bc-in{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.bloc-chiffre .bc-num{
  font-family:"Montserrat",sans-serif; font-weight:800; color:var(--ec-accent,#fdc300);
  font-size:clamp(4.5rem,11vw,9rem); line-height:.88; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.bloc-chiffre .bc-num span{ font-size:.42em; vertical-align:super; margin-left:.06em; }
.bloc-chiffre .bc-label{
  font-family:"Montserrat",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:.84rem; color:#ffffff; margin-bottom:.9rem;
}
.bloc-chiffre p{ color:#d7d5d1; max-width:58ch; margin:0 0 1.6rem; }
.bloc-chiffre a{
  display:inline-block; border:1.5px solid var(--ec-accent,#fdc300);
  color:var(--ec-accent,#fdc300); text-decoration:none; font-family:"Montserrat",sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:.76rem;
  padding:.76rem 1.5rem; transition:background .2s ease, color .2s ease;
}
.bloc-chiffre a:hover{ background:var(--ec-accent,#fdc300); color:#111111; }
@media (max-width:720px){ .bloc-chiffre .bc-in{ grid-template-columns:1fr; gap:1rem; } }

/* --- 7. les actualites : une vedette et une liste ---------------------- */
.blog-vedette{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,4vw,3.2rem); }
.bv-une{ display:block; text-decoration:none; color:inherit; }
.bv-une .bv-photo{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ec-fond-2,#f5f5f5);
}
.bv-une .bv-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.bv-une:hover .bv-photo img{ transform:scale(1.03); }
.bv-une h3{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:clamp(1.3rem,2.2vw,1.75rem);
  line-height:1.22; color:#1f1f1f; margin:1.1rem 0 .5rem;
}
.bv-une .bx{ color:#3a3a3a; font-size:1rem; line-height:1.65; margin:0; max-width:52ch; }
.bv-liste{ display:flex; flex-direction:column; border-top:1.5px solid #2b2b2b; }
.bv-item{
  display:grid; grid-template-columns:104px 1fr; gap:1.2rem; align-items:center;
  padding:1.25rem 0; border-bottom:1px solid var(--ec-filet,#e5e5e5);
  text-decoration:none; color:inherit; transition:padding-left .2s ease;
}
.bv-item:hover{ padding-left:.4rem; }
.bv-item .bvi-photo{ aspect-ratio:1/1; overflow:hidden; background:var(--ec-fond-2,#f5f5f5); }
.bv-item .bvi-photo img{ width:100%; height:100%; object-fit:cover; }
.bv-item .bvi-theme{
  display:inline-block; background:var(--ec-accent,#fdc300); color:#111111;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.24rem .5rem; margin-bottom:.45rem; line-height:1;
}
.bv-item h4{
  font-family:"Montserrat",sans-serif; font-weight:600; font-size:.95rem; line-height:1.3;
  color:#1f1f1f; margin:0;
}
@media (max-width:860px){ .blog-vedette{ grid-template-columns:1fr; } }

/* --- 8. la foire aux questions sur deux colonnes ----------------------- */
.faq-list{
  display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(2rem,5vw,4.5rem);
  border-top:none !important;
}
.faq-item{ border-bottom:1px solid var(--ec-filet,#e5e5e5); align-self:start; }
.faq-item:nth-child(1), .faq-item:nth-child(2){ border-top:1.5px solid #2b2b2b; }
@media (max-width:760px){
  .faq-list{ grid-template-columns:1fr; }
  .faq-item:nth-child(2){ border-top:none; }
}


/* ======================================================================
   Retours 3e serie — 14/10/2026
   ====================================================================== */

/* --- A. les cinq modeles en tuiles, sur une seule ligne ---------------- */
#gamme .model-tuiles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; align-items:stretch;
}
#gamme .model-tuile{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#ffffff; border:1px solid #e8e8e8;
  box-shadow:0 2px 4px rgba(0,0,0,.05), 0 16px 30px -22px rgba(0,0,0,.30);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#gamme .model-tuile:hover{
  transform:translateY(-4px); border-color:#d4d4d4;
  box-shadow:0 4px 10px rgba(0,0,0,.07), 0 26px 44px -22px rgba(0,0,0,.38);
}
#gamme .model-tuile .model-photo{
  aspect-ratio:4/3; height:auto !important; min-height:0 !important; margin:0 !important;
  overflow:hidden; position:relative;
}
#gamme .model-tuile .model-photo img{ width:100%; height:100%; object-fit:cover; }
#gamme .model-tuile .mn-tag{ display:none !important; }
#gamme .model-tuile .mt-titre{
  font-family:"Montserrat",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(.92rem,1.25vw,1.08rem); letter-spacing:-.005em; line-height:1.15;
  color:#2b2b2b; margin:1.1rem 1.1rem .4rem; text-align:center;
}
#gamme .model-tuile .mt-texte{
  font-family:var(--ec-serif); font-size:.85rem; line-height:1.5; color:#3a3a3a;
  margin:0 1.1rem 1.1rem; text-align:center; flex:1;
}
#gamme .model-tuile .mt-lien{
  display:block; margin:0 1.1rem 1.3rem; text-align:center;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:.7rem;
  letter-spacing:.09em; text-transform:uppercase; color:#111111;
}
#gamme .model-tuile .mt-lien::after{ content:" →"; }
#gamme .model-tuile:hover .mt-lien{ color:var(--ec-accent-f,#e3ae00); }
@media (max-width:1150px){ #gamme .model-tuiles{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){  #gamme .model-tuiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){  #gamme .model-tuiles{ grid-template-columns:1fr; } }

/* --- B1. la bande « Parlez-nous de votre projet » ---------------------- */
#contact.intercalaire{ padding:clamp(5rem,10vw,9rem) 10% !important; }
.intercalaire .eyebrow.itc-eyebrow{
  background:var(--ec-accent,#fdc300) !important; color:#111111 !important;
  margin-bottom:1rem;
}
.intercalaire .itc-liens a.itc-primaire{
  background:var(--ec-accent,#fdc300); border-color:var(--ec-accent,#fdc300); color:#111111;
}
.intercalaire .itc-liens a.itc-primaire:hover{
  background:#ffffff; border-color:#ffffff; color:#111111;
}

/* --- B2. l'invitation au configurateur, en bloc noir ------------------- */
.bloc-config{
  background:#111111; color:#ffffff; max-width:100% !important; margin:0 !important;
  padding:clamp(3.8rem,8vw,6.5rem) 10% !important;
}
.bloc-config .bcf-in{ max-width:62ch; }
.bloc-config .eyebrow.bcf-eyebrow{
  background:var(--ec-accent,#fdc300) !important; color:#111111 !important; margin-bottom:1rem;
}
.bloc-config h2{
  color:#ffffff !important; font-size:clamp(1.9rem,3.8vw,2.9rem);
  text-transform:uppercase; letter-spacing:-.015em; margin:0 0 .9rem;
}
.bloc-config h2 em.jm{ color:var(--ec-accent,#fdc300) !important; font-style:normal; }
.bloc-config p{ color:#d7d5d1; margin:0 0 1.8rem; }
.bloc-config .bcf-lien{
  display:inline-block; background:var(--ec-accent,#fdc300); color:#111111;
  text-decoration:none; font-family:"Montserrat",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; font-size:.78rem; padding:.9rem 1.9rem;
  transition:background .2s ease;
}
.bloc-config .bcf-lien:hover{ background:#ffffff; }

/* ===== reprises accueil 16/10/2026 ===== */
/* Les cinq icones sociales ne pouvaient pas passer a la ligne : leur rangee
   imposait 243 px de large a la premiere colonne du pied de page, et la page
   debordait de 7 px sur un telephone. */
.foot-grid .social-icons{ flex-wrap:wrap; }
.foot-grid > *{ min-width:0; }
/* ===== reprises accueil, suite 16/10/2026 ===== */
/* le H1 porte la ville et les trois metiers */
.hero-copy .h1-sous{ display:block; font-size:.34em; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ec-accent,#fdc300);
  margin-top:.9rem; }

/* les tuiles de la gamme a trois colonnes : la rangee de cinq etait serree */
#gamme .model-tuiles{ grid-template-columns:repeat(3,1fr) !important; }
@media (max-width:760px){ #gamme .model-tuiles{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:440px){ #gamme .model-tuiles{ grid-template-columns:1fr !important; } }
#gamme .model-photo .photo-slot{ width:100%; height:100%; background:var(--ec-gris-clair,#f0f0f0); }

/* les dates des articles, comme sur la page Actualites */
.bv-date, .bvi-date{ font-size:.78rem; color:var(--ec-gris,#6e6e6e); margin:.35rem 0 0; }
.bv-une .bv-date{ margin-bottom:.6rem; }

/* la lettre d'information */
.newsletter .nl-chapo{ max-width:54ch; margin:.6rem auto 1.6rem; font-size:.95rem;
  line-height:1.7; color:#c4c4c4; }
.newsletter .ac-placeholder{ display:inline-flex; background:rgba(0,0,0,.14);
  border-color:rgba(0,0,0,.35); }
.newsletter .ac-placeholder .ac-tag{ color:#111; }
.newsletter .ac-placeholder .ac-label{ color:#111; font-style:normal; font-weight:600; }
/* ===== menu : entrees cliquables 16/10/2026 ===== */
.nv-volet-tete{ grid-column:1/-1; display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:.78rem;
  letter-spacing:.03em; text-transform:uppercase; color:#111; text-decoration:none;
  padding:0 0 .75rem; margin:0 0 1rem; border-bottom:1px solid #e5e5e5; }
.nv-volet-tete:hover{ text-decoration:underline; text-decoration-color:#fdc300;
  text-decoration-thickness:2px; text-underline-offset:3px; }
.nvp-sous .nvp-page{ font-weight:800; }
/* ===== volet « visuel pilote » 16/10/2026 ===== */
/* Le volet n'est plus un panneau blanc a moitie vide : liens a gauche, photo a
   droite qui suit le survol. Les angles redeviennent droits.

   FOND CLAIR (choix du client, 16/10) : le noir plein coupait la page en deux.
   Le panneau reste dans le gris tres clair de la page. En contrepartie, plus
   rien ne dirait que le menu est ouvert : c'est l'ombre portee et les filets
   qui s'en chargent, et c'est la photo qui porte la couleur. */
.nv-volet.nv-v2{ padding:0; border:0; border-radius:0 !important; background:#f4f4f4;
  border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0;
  box-shadow:0 22px 38px -24px rgba(0,0,0,.42); overflow:hidden; }
.nv-volet.nv-v2 .nv-volet-in{ display:grid; max-width:none; margin:0;
  grid-template-columns:minmax(0,1fr) 40%; gap:0; }
.nv-v2 .v2-liens{ padding:2rem clamp(1.2rem,4vw,3rem) 2.2rem; display:grid;
  grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:1.5rem 2.2rem;
  align-content:start; }
@media (max-width:1000px){ .nv-v2 .v2-liens{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.nv-v2 .v2-page{ grid-column:1/-1; display:inline-flex; align-items:center; gap:.45rem;
  font-family:"Montserrat",sans-serif; font-size:.72rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:#111;
  text-decoration:none; justify-self:start; }
.nv-v2 .v2-page:hover{ text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:2px; text-decoration-color:#fdc300; }
.nv-v2 .v2-groupe h4{ font-family:"Montserrat",sans-serif; font-size:.64rem;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#6e6e6e;
  margin:0 0 .75rem; padding-bottom:.5rem; border-bottom:1px solid #dcdcdc;
  /* deux lignes possibles : les filets des colonnes restent alignes */
  display:flex; align-items:flex-end; min-height:2.7em; line-height:1.35; }
.nv-v2 .v2-groupe a{ display:block; font-family:"Montserrat",sans-serif;
  font-size:.92rem; font-weight:600; color:#111; text-decoration:none;
  padding:.4rem 0; transition:color .18s ease; }
.nv-v2 .v2-groupe a .sous{ display:block; font-family:var(--ec-serif,Georgia,serif);
  font-weight:400; font-size:.8rem; color:#6e6e6e; margin-top:.05rem; }
/* Sur fond clair, le jaune en texte serait illisible. Inutile d'inventer un
   repere : la barre de menu souligne deja ses liens en jaune au survol
   (un ::after de 2 px), et ce soulignement marche aussi bien ici. */
.nv-v2 .v2-groupe a:hover, .nv-v2 .v2-groupe a:focus-visible{ color:#000; }
.nv-v2 .v2-groupe a:hover .sous{ color:#4a4a4a; }
.nv-v2 .v2-vue{ position:relative; overflow:hidden; background:#000; min-height:290px; }
.nv-v2 .v2-im{ position:absolute; inset:0; background:#000 center/cover no-repeat;
  opacity:0; transition:opacity .4s ease; }
.nv-v2 .v2-im.on{ opacity:1; }
.nv-v2 .v2-pied{ position:absolute; left:0; right:0; bottom:0; display:flex;
  align-items:flex-end; gap:1rem; padding:2.2rem 1.5rem 1.3rem;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,0)); }
.nv-v2 .v2-legende{ margin:0; min-width:0; font-family:"Montserrat",sans-serif;
  font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-.01em; }
.nv-v2 .v2-legende em{ display:block; font-family:var(--ec-serif,Georgia,serif);
  font-style:normal; font-weight:400; font-size:.84rem; line-height:1.5;
  color:#cfcfcf; margin-top:.2rem; }
.nv-v2 .v2-cta{ margin-left:auto; flex:0 0 auto; background:#fdc300; color:#111;
  font-family:"Montserrat",sans-serif; font-size:.78rem; font-weight:800;
  text-decoration:none; padding:.62rem .95rem; white-space:nowrap; }
.nv-v2 .v2-cta:hover{ background:#fff; }
@media (max-width:1180px){ .nv-volet.nv-v2 .nv-volet-in{ grid-template-columns:minmax(0,1fr) 36%; } }
/* le panneau de photo retreci : la legende s'efface avant de se hacher */
@media (max-width:1180px){ .nv-v2 .v2-legende em{ display:none; } }
@media (max-width:1040px){ .nv-v2 .v2-legende{ display:none; }
  .nv-v2 .v2-pied{ padding:1.6rem 1.2rem 1.1rem; } }
/* sous 940 px le menu passe au burger : filet de securite */
@media (max-width:940px){
  .nv-volet.nv-v2 .nv-volet-in{ grid-template-columns:1fr; }
  .nv-v2 .v2-vue{ display:none; }
}

/* ---------- le panneau mobile, repris dans le meme esprit ----------

   Avant : onze liens gris de meme poids, sans regroupement, sans photo, et
   l'appel au configurateur noye parmi eux. Maintenant : le meme fond clair que
   le volet PC, les memes intitules de groupe, une vignette devant chaque
   modele et chaque prestation, et le bouton d'action en jaune. */
.nv-panneau .nvp-sous.nvp-v2{ background:#f4f4f4; border-top:1px solid #e0e0e0;
  margin:0 -1.1rem; padding:.1rem 1.1rem 1rem; }
.nvp-v2 a.nvp-page{ display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; font-family:"Montserrat",sans-serif; font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#111; text-decoration:none;
  padding:.85rem 0; border-bottom:1px solid #dcdcdc; }
.nvp-v2 .nvp-groupe{ font-family:"Montserrat",sans-serif; font-size:.6rem;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#6e6e6e;
  margin:.95rem 0 .3rem; }
.nvp-v2 a.nvp-ligne{ display:flex; align-items:center; gap:.75rem; padding:.4rem 0;
  text-decoration:none; color:#111; }
.nvp-v2 .nvp-ph{ width:66px; height:42px; flex:0 0 auto;
  background:#e5e5e5 center/cover no-repeat; }
.nvp-v2 .nvp-t{ font-family:"Montserrat",sans-serif; font-size:.89rem; font-weight:700;
  line-height:1.25; color:#111; }
.nvp-v2 .nvp-s{ display:block; font-family:var(--ec-serif,Georgia,serif);
  font-weight:400; font-size:.78rem; color:#6e6e6e; margin-top:.05rem; }
.nvp-v2 a.nvp-texte{ display:block; font-family:"Montserrat",sans-serif;
  font-size:.87rem; font-weight:600; color:#111; text-decoration:none; padding:.4rem 0; }
.nvp-v2 a.nvp-cta{ display:block; text-align:center; background:#fdc300; color:#111;
  font-family:"Montserrat",sans-serif; font-size:.82rem; font-weight:800;
  text-decoration:none; padding:.78rem .8rem; margin-top:1rem; }
/* le repli ouvert se repere depuis son intitule */
.nvp-item:has(.nvp-sous:not([hidden])) > .nvp-tete{ box-shadow:inset 3px 0 0 #fdc300;
  padding-left:.75rem; }
/* le bouton d'appel etait le seul angle arrondi du site */
.nv-panneau .nvp-tel{ border-radius:0 !important; border-width:2px; }
/* les vignettes du menu, declarees une seule fois */
:root{
  --im-atelier:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-26e1785fa663.jpg");
  --im-banquette:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-3dd34f639273.jpg");
  --im-camp2:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-cfd3a0776f45.jpg");
  --im-equipe:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-b4deda47b810.jpg");
  --im-littoral:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-5348c10ed40a.jpg");
  --im-loc-triostyle:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-d850d1595ae2.jpg");
  --im-mobilier:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-d777a8bd81f9.jpg");
  --im-multistyle:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-afdf1e428aa8.jpg");
  --im-palan:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-6ebde20fec66.jpg");
  --im-pyrenees:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-6a2431956a20.jpg");
  --im-services:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-ee9303d42940.jpg");
  --im-suspensions:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-49f4751585be.jpg");
  --im-toit:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-334249912d6c.jpg");
  --im-triostyle:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-0e960bc82194.jpg");
  --im-variocharge:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-1d183d6c65d6.jpg");
  --im-vignoble:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-09f1e351262a.jpg");
  --im-weekender:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-0e6dd996926b.jpg");
  --im-weekender2:url("/wp-content/themes/ecocampers-divi-child/assets/img/im-53384cb8ac27.jpg");
}
/* ===== pied de page : plus de debordement 16/10/2026 ===== */
.foot-grid .social-icons{ flex-wrap:wrap; }
.foot-grid > *{ min-width:0; }
/* ===== le jaune se fait rare — 16/10/2026 ===== */
/* 1. Les surtitres perdent leur pastille jaune.
   Ils portent une douzaine de noms de classe selon les pages (.eyebrow,
   .mv-eyebrow, .bcf-eyebrow, .hero-eyebrow...), chacun avec sa propre regle
   plus specifique que la regle generale : on les attrape tous par le nom. */
main [class*="eyebrow"][class*="eyebrow"][class*="eyebrow"]{
  display:inline-flex !important; align-items:center; gap:.6rem;
  background:transparent !important; color:#6e6e6e !important;
  padding:0 !important; font-size:.68rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; }
main [class*="eyebrow"][class*="eyebrow"]::before{ content:""; width:22px; height:2px; background:#c9c9c9;
  flex:0 0 auto; }

/* Sur les sections sombres, le gris moyen ne passe pas. */
main .photo-band [class*="eyebrow"][class*="eyebrow"], main .config-banner [class*="eyebrow"][class*="eyebrow"],
main .cta-band [class*="eyebrow"][class*="eyebrow"], main .intercalaire [class*="eyebrow"][class*="eyebrow"],
main .gamme [class*="eyebrow"][class*="eyebrow"], main .bloc-config [class*="eyebrow"][class*="eyebrow"]{
  color:#b4b4b4 !important; }
main .photo-band [class*="eyebrow"]::before, main .config-banner [class*="eyebrow"]::before,
main .cta-band [class*="eyebrow"]::before, main .intercalaire [class*="eyebrow"]::before,
main .gamme [class*="eyebrow"]::before, main .bloc-config [class*="eyebrow"]::before{
  background:rgba(255,255,255,.4); }

/* Le surtitre du hero fait exception : il appartient au bloc du H1, avec le
   coup de pinceau. Une signature par page, au meme endroit. */
main .page-hero [class*="eyebrow"][class*="eyebrow"], main .hero [class*="eyebrow"][class*="eyebrow"]{
  color:#fdc300 !important; }

/* 2. Le mot d'accroche des H2 cesse d'etre jaune.
   Le coup de pinceau du H1 reste : c'est la signature, et elle ne vaut que
   si elle est seule. */
main h2 em.jm, main h3 em.jm,
main .cta-band h2 em.jm, main .photo-band h2 em.jm,
main .config-banner h2 em.jm, main .intercalaire h2 em.jm,
main .bloc-config h2 em.jm,
main .intercalaire h2 em, main .bloc-config h2 em{ color:inherit; }

/* 3. Les filets et bordures d'accent passent au gris. */
main .spec-group h3{ border-bottom-color:#e5e5e5; }
/* les liens « En savoir plus » etaient en jaune plein texte : le jaune
   designe une action, pas un lien de lecture. */
main a.sp-lien{ color:#111111; }
main a.sp-lien:hover{ text-decoration:underline; text-decoration-color:#fdc300;
  text-decoration-thickness:2px; text-underline-offset:3px; }
main .chassis-carte{ border-color:#e5e5e5; }

/* 4. Les etiquettes de theme du blog : cinq pastilles jaunes dans une seule
   section. Elles redeviennent ce qu'elles sont, des etiquettes. */
main .blog-theme, main .bvi-theme, main .bv-theme.bv-theme{
  background:transparent !important; color:#6e6e6e !important;
  border:1px solid #e5e5e5; padding:.2rem .5rem; font-weight:700; }

/* 5. Numeros, pastilles et jetons decoratifs : le noir dit la meme chose
   sans crier, et les icones reprennent la couleur du texte. */
main .u-num.u-num{ background:#111111 !important; color:#ffffff !important; }
main .mod-vedette.mod-vedette{ background:#111111 !important; color:#ffffff !important; }
main .mb-icone.mb-icone{ background:#111111 !important; color:#ffffff !important; }
main .mb-icone svg{ stroke:#ffffff; }
main .ti, main .ti svg{ color:#111111 !important; stroke:#111111 !important; }

/* 6. Le sous-titre du H1 etait jaune sous un mot deja jaune : deux signatures
   dans le meme titre. Il passe au blanc, le pinceau reste seul. */
main .hero-copy .h1-sous{ color:#ffffff !important; }

/* Ce qui garde le jaune, et rien d'autre :
   le bloc du H1 — coup de pinceau et surtitre de hero,
   les boutons d'action (.btn.primary, a.discover, .bcf-lien, .itc-primaire),
   la bande d'abonnement, qui est l'appel a l'action de la page,
   la colonne mise en avant du tableau comparatif. */
/* ===== fin du bloc « jaune rare » ===== *//* ===== chiffres sur les cartes modeles — 16/10/2026 ===== */
/* Le gabarit avant le nom : c'est la premiere chose qu'on veut savoir. */
.model-tuile .mt-sur{ font-family:"Montserrat",sans-serif; font-size:.63rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#9b9da0;
  margin:.9rem 0 .25rem; }
/* Trois valeurs en gras, trois libelles minuscules : la carte dit en une
   seconde pour qui est le van. */
.model-tuile .mt-chiffres{ display:flex; gap:1.5rem; margin:.85rem 0 0; }
.model-tuile .mt-chiffres div{ min-width:0; }
.model-tuile .mt-chiffres b{ display:block; font-family:"Montserrat",sans-serif;
  font-size:.95rem; font-weight:800; color:#111111; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
.model-tuile .mt-chiffres b.attente{ color:#9b9da0; font-weight:700; font-size:.88rem; }
.model-tuile .mt-chiffres span{ display:block; font-family:"Montserrat",sans-serif;
  font-size:.58rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#9b9da0; margin-top:.15rem; }
/* la phrase et le prix se resserrent pour que la carte ne s'allonge pas */
.model-tuile .mt-texte{ margin-bottom:0; }
.model-tuile .mt-prix{ margin-top:.95rem; padding-top:.75rem;
  border-top:1px solid #e5e5e5; }
/* La carte etait centree : la ligne de chiffres, elle, se lit en colonne
   par colonne. Tout passe a gauche, comme chez eux — et c'est aussi plus
   rapide a balayer quand six cartes se suivent. */
.model-tuile{ text-align:left; }
.model-tuile .mt-titre, .model-tuile .mt-texte, .model-tuile .mt-prix,
.model-tuile .mt-lien, .model-tuile .mt-sur{ text-align:left; }
.model-tuile .mt-prix .pr-label, .model-tuile .mt-prix .pr-valeur{
  display:block; text-align:left; }
@media (max-width:520px){ .model-tuile .mt-chiffres{ gap:1.1rem; } }
/* ===== vraies photos dans les emplacements — 18/10/2026 ===== */
/* Une vraie photo remplace l'emplacement : elle remplit le cadre, qui garde
   sa hauteur et son recadrage. Le liseré en pointillés de l'emplacement
   disparaît avec lui. */
.ph-cadre img.ph-vraie{ display:block; width:100%; height:100%;
  object-fit:cover; }
/* ===================================================================
   La page miroir de l'accueil en ligne — batir-accueil-miroir.py.
   Ecrite directement dans la charte du site actuel : vert #59815b,
   encre #2b2f33, creme #f2f1e7, jaune de mise en avant #ffd202,
   Montserrat seule, capitales en 900 resserrees, pilules a 20 px.
   Ce bloc ne concerne que cette page : il n'existe dans aucune autre.
   =================================================================== */
.mir{ --vert:#59815b; --vert-f:#48694a; --encre:#2b2f33; --creme:#f2f1e7;
  --jaune:#ffd202; --gris:#f6f6f6;
  font-family:"Montserrat",system-ui,sans-serif; color:var(--encre);
  background:#ffffff; background-size:100% auto; }
/* L'echelle typographique est relevee au pixel sur ecocampers.fr (1 707 px) :
   H1 64/56 a -3px, H2 44/49,28 a -3px, H3 40/44 a -2px, corps 18/26 a -1px.
   Le site actuel ne redimensionne pas ses titres : on garde donc des tailles
   fixes au-dessus de 1 100 px, et on reduit plus bas pour que ca tienne. */
.mir h1,.mir h2,.mir h3{ font-family:"Montserrat",system-ui,sans-serif;
  text-transform:uppercase; font-weight:900; color:var(--encre);
  margin:0 0 .6rem; }
/* Le « !important » repond a la signature de la charte, qui pose un
   interlettrage relatif (-.045em) en fin de feuille : a 64 px elle donnait
   -2,88 px la ou le site actuel en met -3. */
.mir h1{ font-size:64px; line-height:56px; letter-spacing:-3px !important;
  color:#fff; }
.mir h2{ font-size:44px; line-height:49.28px; letter-spacing:-3px !important; }
.mir h3{ font-size:40px; line-height:44px; letter-spacing:-2px !important; }
.mir p{ font-size:18px; line-height:26px; letter-spacing:-1px; margin:0 0 1rem; }
/* Le site actuel pose une bande creme derriere le mot, aux bords dechires
   (un SVG). On en garde la bande : meme couleur, memes retraits, sans rayon. */
.mir mark{ background:var(--creme); color:var(--vert);
  padding:0 10px 0 5px; border-radius:0; }
/* La variante jaune, demandee pour « REIMO » dans le titre de la gamme. */
.mir mark.mir-or{ background:var(--jaune); color:var(--encre); }
/* Le nom du modele, en jaune, au-dessus de son slogan : c'est l'ecriture du
   site actuel sur /gamme-reimo/ (un <strong> jaune puis un retour a la ligne). */
.mir .mir-nom-modele{ color:var(--jaune); }
/* La largeur de contenu du site actuel : 1 330 px utiles dans un conteneur de
   1 360. Le « !important » repond a `section{max-width:100% !important}` de la
   feuille heritee, qui etalait chaque section sur toute la fenetre. */
.mir > section{ max-width:1360px !important; margin-left:auto; margin-right:auto;
  padding-left:15px; padding-right:15px; }
.mir > .mir-hero, .mir > .mir-bande{ max-width:none !important;
  padding-left:0; padding-right:0; }

/* --- les boutons : la pilule du site actuel ------------------------- */
.mir .mir-cta{ display:inline-flex; align-items:center; gap:.5rem;
  background:var(--vert); color:#fff; border:1px solid var(--vert);
  border-radius:20px; padding:11px 41px; font-size:16px; font-weight:900;
  line-height:30px; letter-spacing:-1px; text-transform:uppercase;
  text-decoration:none; transition:background .15s; }
.mir .mir-cta:hover{ background:var(--vert-f); border-color:var(--vert-f);
  color:#fff; }
.mir .mir-contour{ background:transparent; color:var(--encre);
  border:1px solid var(--encre); }
.mir .mir-contour:hover{ background:var(--encre); color:#fff;
  border-color:var(--encre); }
.mir .mir-nu .mir-cta{ background:none; border:0; color:var(--vert);
  padding:10px 0; }
.mir .mir-nu .mir-cta:hover{ background:none; color:var(--vert-f); }
.mir .mir-fleche{ font-weight:700; letter-spacing:0; }
.mir .mir-centre{ text-align:center; margin:100px 0 0; }
/* Les pastilles flottantes vivent HORS du <main> : leurs regles ne peuvent
   pas etre portees par « .mir », sinon l'intitule de chaque pastille, destine
   aux lecteurs d'ecran, s'affiche par-dessus le rond. */
.mir-ecran{ position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --- 1. le hero : la video du site actuel --------------------------- */
/* Le hero du site actuel fait 1 000 px de haut : c'est la moitie du premier
   ecran. Le notre en faisait 560, ce qui changeait tout le rythme de la page. */
.mir .mir-hero{ position:relative; height:1000px; max-width:none;
  padding:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden; }
.mir .mir-video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:0; }
.mir .mir-hero-voile{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42)); }
.mir .mir-hero-texte{ position:relative; text-align:center; padding:0 20px; }
/* Le bord brosse qui ferme le hero : l'image du site actuel, 1 690 x 128,
   etiree sur toute la largeur et posee a cheval sur la limite. */
.mir .mir-brush{ position:absolute; left:0; right:0; bottom:-1px; width:100%;
  height:128px; object-fit:fill; border-radius:0 !important; z-index:2; }
.mir .mir-hero-sous{ color:#fff; font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; font-size:clamp(1rem,1.8vw,1.5rem); margin:0; }

/* --- 2. l'annonce de la gamme --------------------------------------- */
/* Le rythme du site actuel, mesure sur l'accueil : 100 px avant un titre de
   section, 150 a 200 px avant une grande rangee, 60 px dans la bande photo. */
.mir .mir-intro{ text-align:center; padding-top:100px; }
.mir .mir-sous-titre{ color:var(--vert); }
.mir .mir-chapeau{ max-width:760px; margin:0 auto; }

/* --- 3. les cartes modeles : encadrees, centrees --------------------- */
/* La carte du site actuel : 407 px de large dans 1 330, soit 54 px de
   gouttiere ; pas de bordure mais une ombre portee, la photo a fleur du
   cadre en 4/3, le titre a 40 px avec 25 px de marge. */
.mir .mir-gamme{ padding-top:0; }
/* La rangee de cartes tenait toute la largeur utile (1 330) et paraissait
   plus large que celle du site actuel : on la resserre a 1 230, centree. */
.mir .mir-grille{ display:grid; gap:45px; margin-top:40px; max-width:1230px;
  margin-left:auto; margin-right:auto; grid-template-columns:repeat(3,1fr); }
.mir .mir-modele{ background:#fff; border:0; border-radius:20px;
  padding:0 0 20px; text-align:center; overflow:hidden;
  box-shadow:0 0 16px rgba(0,0,0,.25); display:flex; flex-direction:column; }
.mir .mir-vedette{ background:var(--jaune); }
.mir .mir-modele-photo{ width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:20px; display:block; }
.mir .mir-modele h3{ margin:25px 18px; }
.mir .mir-citation{ font-weight:900; text-transform:uppercase;
  font-size:18px; letter-spacing:-1px; margin:0 18px .4rem; }
.mir .mir-accroche{ font-weight:400; font-size:18px; line-height:26px;
  letter-spacing:-1px; margin:0 18px 1.2rem; }
.mir .mir-puces{ text-align:left; margin:0 18px 1.6rem; padding-left:1.4rem;
  list-style:disc outside; }
.mir .mir-puces li{ display:list-item; font-size:18px; line-height:26px;
  letter-spacing:-1px; }
.mir .mir-modele .mir-cta{ align-self:center; margin-top:auto; }

/* --- 4. les quatre rangees texte / photo ----------------------------- */
/* Relevé du 22/10 : la rangée fait 1 360 px, deux colonnes de 650 px et
   30 px de gouttière — pas deux moitiés à 56 px d'écart. */
.mir .mir-duo{ display:grid; grid-template-columns:650px 650px; gap:30px;
  justify-content:center; align-items:center; padding-top:150px;
  padding-bottom:0; }
.mir .mir-inverse .mir-photo{ order:2; }
.mir .mir-photo img{ width:100%; border-radius:20px; display:block; }
.mir .mir-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:1.6rem; }
/* Le lien nu (« Vendre mon van ») est centre sous la rangee de boutons,
   comme sur le site actuel : son milieu y tombe a 0,5 px du milieu des
   deux pilules. */
.mir .mir-nu{ margin-top:.2rem; text-align:center; }

/* --- 5. la bande photo pleine largeur -------------------------------- */
/* Releve du 23/10 : la bande fait 455 px de haut et son texte y est centre
   en hauteur — le notre se calait en haut de la photo. */
.mir .mir-bande{ position:relative; padding:60px 20px; margin:200px 0 0;
  min-height:455px; display:flex; align-items:center; justify-content:center;
  background-color:#2b2f33; background-size:cover; background-position:center;
  text-align:center; overflow:hidden; }
.mir .mir-bande-brush{ position:absolute; left:0; right:0; bottom:-1px;
  width:100%; height:60px; object-fit:fill; border-radius:0 !important; }
.mir .mir-bande h2{ color:#fff; }
.mir .mir-bande p{ color:#fff; font-weight:700; max-width:980px;
  margin:0 auto 1.6rem; }
.mir .mir-bande-texte{ max-width:1100px; margin:0 auto; }

/* --- 6. le blog : le carrousel d'actualites --------------------------- */
/* Releve du 23/10 : des cartes de 250 x 400 qui defilent, 10 px entre elles,
   la photo en fond et le titre en blanc en bas a gauche (32 / 35,2 a -2 px) ;
   la colonne de texte est a droite et coupe la derniere carte. */
.mir .mir-blog{ display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center; padding-top:150px; padding-bottom:0; }
/* La bande defile toute seule et se balaye au doigt : c'est un conteneur
   qui defile pour de vrai, barre de defilement masquee. `overscroll-
   behavior-x` evite qu'un balayage un peu long declenche le « retour »
   du navigateur au lieu de faire avancer la bande. */
.mir .mir-defile-blog{ overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none; }
.mir .mir-defile-blog::-webkit-scrollbar{ display:none; }
.mir .mir-defile-piste{ display:flex; gap:10px; }
.mir .mir-article{ position:relative; flex:0 0 250px; width:250px;
  height:400px; display:block; text-decoration:none; color:#fff;
  overflow:hidden; scroll-snap-align:start; }
.mir .mir-article-vue{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; border-radius:0 !important; }
.mir .mir-article-titre{ position:absolute; left:16px; right:16px;
  bottom:16px; font-size:32px; line-height:35.2px; letter-spacing:-2px;
  font-weight:900; text-transform:uppercase; color:#fff; }

/* --- 7. la foire aux questions ---------------------------------------- */
.mir .mir-faq{ padding-top:150px; padding-bottom:100px; }
.mir .mir-onglets{ display:flex; flex-wrap:wrap; gap:10px; margin:1.8rem 0; }
.mir .mir-onglet{ background:var(--gris); color:var(--encre); border:0;
  border-radius:0; padding:10px 22px; font-family:inherit; font-size:11px;
  font-weight:400; text-transform:uppercase; letter-spacing:.06em;
  cursor:pointer; }
.mir .mir-onglet.est-actif{ background:var(--vert); color:#fff; }
.mir .mir-q{ border-bottom:1px solid #e7e7e3; padding:.9rem 0; }
.mir .mir-q summary{ cursor:pointer; list-style:none; font-weight:900;
  text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(1.05rem,1.6vw,1.4rem); display:flex; gap:.7rem;
  align-items:flex-start; }
.mir .mir-q summary::-webkit-details-marker{ display:none; }
.mir .mir-q summary::before{ content:"+"; display:inline-flex;
  align-items:center; justify-content:center; width:1.1em; height:1.1em;
  border:1px solid var(--encre); font-weight:400; flex:0 0 auto;
  font-size:.9em; }
.mir .mir-q[open] summary::before{ content:"–"; }
.mir .mir-q p{ margin:.8rem 0 .2rem 1.8rem; }

/* --- les pastilles flottantes ----------------------------------------- */
.mir-pastilles{ position:fixed; right:18px; bottom:22px; z-index:40;
  display:flex; flex-direction:column; gap:12px; }
.mir-pastille{ width:48px; height:48px; border-radius:50%;
  background:var(--vert,#59815b); color:#fff; display:flex;
  align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.18); }
.mir-pastille:hover{ background:#48694a; color:#fff; }

@media (max-width:1100px){
  .mir .mir-grille{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .mir h1{ font-size:46px; line-height:42px; letter-spacing:-2px !important; }
  .mir h2{ font-size:34px; line-height:38px; letter-spacing:-2px !important; }
  .mir h3{ font-size:30px; line-height:34px; letter-spacing:-1.5px !important; }
  .mir .mir-hero{ height:70vh; }
  .mir .mir-duo, .mir .mir-blog, .mir .mir-faq{ padding-top:90px; }
  .mir .mir-bande{ margin-top:120px; }
}
@media (max-width:820px){
  .mir .mir-grille{ grid-template-columns:1fr; }
  .mir .mir-duo, .mir .mir-blog{ grid-template-columns:1fr; gap:28px; }
  .mir .mir-inverse .mir-photo{ order:0; }
  .mir .mir-hero{ height:62vh; }
  .mir-pastilles{ right:12px; bottom:76px; }
}

/* ===== les formes rencontrées sur les autres pages ===== */
.mir .mir-photos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mir .mir-photos img{ width:100%; height:100%; aspect-ratio:3/2;
  object-fit:cover; border-radius:20px; display:block; }
.mir .mir-photos img:first-child{ grid-column:1 / -1; aspect-ratio:2/1; }
.mir .mir-galerie{ padding-top:150px; padding-bottom:0; text-align:center; }
.mir .mir-bande-photos{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:18px; margin:1.6rem 0; }
.mir .mir-bande-photos img{ width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:20px; display:block; }
.mir .mir-texte{ padding-top:100px; padding-bottom:0; max-width:980px; }
/* La phrase des porteurs, logos compris, sur une seule ligne : relevé du
   23/10 sur /gamme-reimo/ (18 px, centré, logos de 30 px, 10 px au-dessus). */
/* --- le pied de page du site actuel ----------------------------------- */
/* Comme pour l'en-tete : le pied du theme est masque sur les pages miroir,
   et celui du site actuel prend sa place dans le corps de la page. */
/* Le pied s'etend d'un bord a l'autre. Les -15 px de chaque cote dataient
   d'un gabarit qui ajoutait 15 px de marge au corps ; le gabarit vierge ne
   le fait pas, et le pied depassait de 15 px a droite — assez pour une
   barre de defilement horizontale sur toute la famille charte. */
.mir .mir-pied{ background:#242625; color:#b9b9b9; margin:0;
  padding:60px 60px 0; max-width:none !important; }
.mir .mir-pied-lettre{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:20px; padding-bottom:50px; max-width:none;
  width:100%; }
.mir .mir-pied-lettre input{ width:195px; background:none; border:0;
  border-bottom:1px solid #6c6c6c; color:#fff; font-family:inherit;
  font-size:16px; font-style:italic; padding:8px 2px; }
.mir .mir-pied-lettre input::placeholder{ color:#b9b9b9; font-style:italic; }
.mir .mir-pied-lettre input:focus{ outline:none; border-bottom-color:#fff; }
.mir .mir-pied-lettre .ec-form-envoi{ background:var(--vert); color:#fff;
  border:0; border-radius:20px; padding:13px 26px; font-family:inherit;
  font-size:14px; font-weight:900; line-height:18px; text-transform:uppercase;
  cursor:pointer; max-width:200px; }
.mir .mir-pied-lettre .ec-form-envoi:hover{ background:var(--vert-f); }
.mir .mir-pied-lettre .ec-form-merci,
.mir .mir-pied-lettre .ec-form-erreur{ flex:1 0 100%; text-align:center;
  color:#fff; }
.mir .mir-pied-colonnes{ display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; }
.mir .mir-pied-colonne h3{ font-size:22px; line-height:26px; font-weight:900;
  letter-spacing:-1px !important; text-transform:uppercase; color:#fff;
  margin:0 0 18px; }
.mir .mir-pied-colonne a{ display:block; color:#b9b9b9; font-size:16px;
  line-height:26px; font-style:italic; letter-spacing:0; text-decoration:none; }
.mir .mir-pied-colonne a:hover{ color:#fff; }
.mir .mir-pied-sous{ padding-left:10px; }
.mir .mir-pied-marque img{ width:180px; height:auto; display:block;
  margin-bottom:40px; border-radius:0 !important; }
.mir .mir-pied-marque h3{ margin-bottom:12px; }
.mir .mir-pied-reseaux{ display:flex; gap:18px; margin:0; }
.mir .mir-pied-reseaux a{ display:inline-flex; color:#b9b9b9; }
.mir .mir-pied-reseaux a:hover{ color:#fff; }
/* « #111 » est remplace a la construction par l'encre du site refondu : la
   transformation de charte y voit la couleur d'origine. On l'ecrit donc en
   rgb, que la table ne connait pas sous cette forme. */
.mir .mir-pied-bas{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:60px; background:rgb(16,17,16); margin:0 -60px; padding:22px 60px; }
.mir .mir-pied-bas a{ color:#b9b9b9; font-size:16px; line-height:24px;
  font-style:italic; letter-spacing:0; text-decoration:none; }
.mir .mir-pied-bas a:hover{ color:#fff; }
@media (max-width:1040px){
  .mir .mir-pied{ padding:40px 20px 0; }
  .mir .mir-pied-colonnes{ grid-template-columns:1fr 1fr; gap:28px; }
  .mir .mir-pied-bas{ margin:0 -20px; gap:18px 28px; padding:18px 20px; }
}
@media (max-width:620px){
  .mir .mir-pied-colonnes{ grid-template-columns:1fr; }
}

/* --- l'en-tete du site actuel, sur les pages miroir ------------------- */
/* Le thème pose son propre en-tête pour les vingt et une pages refondues ;
   les pages miroir, qui chargent seules cette feuille, le masquent et
   affichent celui du site actuel. */
#siteHeader, .mobile-bar, #siteFooter, body > footer{
  display:none !important; }
.mir{ position:relative; }
.mir .mir-entete{ position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; height:110px; padding:0 60px;
  max-width:none !important; }
.mir .mir-logo{ display:block; flex:0 0 130px; width:130px; }
.mir .mir-logo img{ width:130px; height:130px; object-fit:contain;
  display:block; border-radius:0 !important; }
.mir .mir-menu{ margin-left:auto; }
.mir .mir-menu > ul{ display:flex; align-items:center; list-style:none;
  margin:0; padding:0; gap:0; }
.mir .mir-menu-item{ position:relative; display:block; }
.mir .mir-menu-lien{ display:inline-flex; align-items:center; gap:7px;
  height:28px; padding:0 16px; border-radius:20px; color:#fff;
  font-size:16px; font-weight:900; line-height:28px; letter-spacing:-.02em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.mir .mir-menu-lien:hover{ color:var(--jaune); }
.mir .mir-menu-jaune > .mir-menu-lien{ background:var(--jaune);
  color:var(--encre); }
.mir .mir-menu-jaune > .mir-menu-lien:hover{ color:var(--encre); }
.mir .mir-menu-vert > .mir-menu-lien{ background:var(--vert); color:#fff; }
.mir .mir-menu-vert > .mir-menu-lien:hover{ background:var(--vert-f);
  color:#fff; }
.mir .mir-chevron{ display:inline-flex; }
/* Le panneau blanc du site actuel : 220 px, liens en 18/600. Il reste
   accroche a son entree, et l'espace entre les deux est couvert par le
   padding du panneau — sinon il se ferme des que la souris le quitte. */
.mir .mir-sous-menu{ position:absolute; top:100%; left:0; min-width:220px;
  background:#fff; padding:14px 0; display:none; z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.18); }
.mir .mir-menu-item:hover .mir-sous-menu,
.mir .mir-menu-item.est-ouvert .mir-sous-menu{ display:block; }
.mir .mir-sous-menu a{ display:block; padding:5px 22px; color:var(--encre);
  font-size:18px; font-weight:600; line-height:26px; letter-spacing:-.5px;
  text-decoration:none; white-space:nowrap; }
.mir .mir-sous-menu a:hover{ color:var(--vert); }
.mir .mir-burger{ display:none; margin-left:auto; background:none; border:0;
  cursor:pointer; padding:10px; }
.mir .mir-burger span{ display:block; width:28px; height:3px; margin:5px 0;
  background:#fff; }
/* Le menu du site actuel tient sur 1 707 px ; en dessous, il faut le
   resserrer, sinon « Contact » sort de l'ecran. */
@media (max-width:1560px){
  .mir .mir-entete{ padding:0 24px; }
  .mir .mir-menu-lien{ font-size:15px; padding:0 11px; }
}
@media (max-width:1280px){
  .mir .mir-entete{ padding:0 20px; height:90px; }
  .mir .mir-logo{ flex-basis:96px; width:96px; }
  .mir .mir-logo img{ width:96px; height:96px; }
  .mir .mir-menu-lien{ font-size:14px; padding:0 11px; }
}
@media (max-width:1040px){
  .mir .mir-burger{ display:block; }
  .mir .mir-menu{ position:absolute; top:90px; left:0; right:0;
    background:#fff; display:none; padding:12px 0;
    box-shadow:0 10px 30px rgba(0,0,0,.18); }
  .mir .mir-menu.est-ouvert{ display:block; }
  .mir .mir-menu > ul{ display:block; }
  .mir .mir-menu-lien{ color:var(--encre); height:auto; padding:10px 20px;
    border-radius:0; }
  .mir .mir-menu-jaune > .mir-menu-lien,
  .mir .mir-menu-vert > .mir-menu-lien{ background:none; color:var(--encre); }
  .mir .mir-sous-menu{ position:static; display:block; box-shadow:none;
    padding:0 0 8px 20px; }
}

/* « Qui sommes-nous » : la photo flotte à côté du texte, titre compris, et
   les bandes de photos défilent. Relevé du 23/10 : photo de 600 px, bandes
   de vues de 643 x 482 à 20 px de rayon. */
.mir .mir-flottante{ margin:0 0 20px; width:600px; max-width:46%; }
.mir .mir-flottante.mir-droite{ float:right; margin-left:40px; }
.mir .mir-flottante.mir-gauche{ float:left; margin-right:40px; }
.mir .mir-flottante img{ width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:20px; display:block; }
.mir .mir-chapitre::after{ content:""; display:block; clear:both; }
/* Meme principe que la bande des actualites : defilement automatique et
   balayage au doigt dans le meme conteneur. */
.mir .mir-defile-photos{ overflow-x:auto; overflow-y:hidden;
  margin-top:1.6rem; scroll-snap-type:x proximity;
  overscroll-behavior-x:contain; scrollbar-width:none;
  -ms-overflow-style:none; }
.mir .mir-defile-photos::-webkit-scrollbar{ display:none; }
.mir .mir-defile-photos .mir-defile-piste{ display:flex; gap:16px; }
.mir .mir-photo-defile{ flex:0 0 643px; width:643px; aspect-ratio:4/3;
  object-fit:cover; border-radius:20px; display:block;
  scroll-snap-align:start; }
@media (max-width:820px){
  /* La figure flottante repasse en pleine largeur, mais la marge laterale
     de 40 px de sa variante droite/gauche est plus specifique que ce
     `margin` : elle la poussait de 40 px hors de l'ecran. */
  .mir .mir-flottante,
  .mir .mir-flottante.mir-droite,
  .mir .mir-flottante.mir-gauche{ float:none !important; width:100%;
    max-width:none; margin:0 0 20px; }
  .mir .mir-photo-defile{ flex-basis:280px; width:280px; }
}
.mir .mir-porteurs-ligne{ padding-top:0; padding-bottom:0; text-align:center; }
.mir .mir-porteurs-ligne p{ margin:10px 0 0; }
/* « display:inline-block » est indispensable : la feuille miroir pose
   « display:block » sur les images, et les deux logos tombaient alors sous
   la phrase, chacun sur sa ligne. */
.mir .mir-porteurs-ligne img{ display:inline-block; height:30px; width:auto;
  object-fit:contain; vertical-align:middle; margin:0 8px;
  border-radius:0 !important; }
/* Le bandeau d'annonce finit sur 88 px de blanc : le site actuel ne laisse
   que 10 px entre le chapeau et la phrase des porteurs. */
.mir .mir-intro + .mir-porteurs-ligne{ margin-top:-78px; }
/* Les rangées de /gamme-reimo/ se suivent de près : 67 px entre la photo
   d'un modèle et celle du suivant, contre 150 sur l'accueil. */
.mir .mir-duo-serre{ padding-top:67px; }
.mir .mir-porteurs-ligne + .mir-duo-serre{ padding-top:104px; }
/* Le « Découvrir le … » du site actuel : pas de pilule, un lien noir en
   capitales de 16 px, gras, avec la flèche. */
.mir .mir-lien-simple .mir-cta{ background:none; border:0; color:var(--encre);
  padding:0; }
.mir .mir-lien-simple .mir-cta:hover{ background:none; color:var(--vert); }
.mir .mir-logos{ display:flex; gap:40px; align-items:center;
  justify-content:center; margin-top:1.6rem; }
.mir .mir-logos img{ height:54px; width:auto; object-fit:contain;
  border-radius:0 !important; }
.mir .mir-centre-titre{ text-align:center; margin-bottom:2rem; }
/* Les cartes de stock portent le nom complet du véhicule : en capitales 900
   de 2,5 rem, il débordait de la carte. */
/* La fiche d'un vehicule, ouverte par « Voir le vehicule ». Elle reprend
   la forme de la fenetre de location : photo et « en bref » en haut, puis la
   description en blocs. Le <dialog> est un enfant du <main class="mir"> :
   ses regles peuvent etre portees par « .mir », mais pas ::backdrop, qui
   appartient au navigateur. */
.mir .mir-stock .mir-modele button.mir-cta{ align-self:center;
  margin-top:auto; font-family:inherit; cursor:pointer; }
.mir .mir-fiche{ width:min(980px,94vw); max-height:90vh; overflow:auto;
  border:0; border-radius:20px; padding:28px; background:#fff;
  color:var(--encre); box-shadow:0 10px 40px rgba(0,0,0,.3); }
.mir-fiche::backdrop{ background:rgba(0,0,0,.55); }
/* La meme fiche, mais a l'adresse du vehicule : ce n'est plus une fenetre,
   c'est la page. Elle ne se limite donc pas a la hauteur de l'ecran, et elle
   n'a pas de croix de fermeture. */
.mir .mir-fiche-page{ max-height:none; overflow:visible; display:block;
  margin:48px auto; box-shadow:0 6px 30px rgba(0,0,0,.08); }
.mir-vehicule{ padding-bottom:40px; }
.mir .mir-fiche-croix{ float:right; background:none; border:0; font-size:28px;
  line-height:1; cursor:pointer; color:var(--encre); padding:0 0 0 12px; }
.mir .mir-fiche-haut{ display:grid; grid-template-columns:1fr 1fr; gap:28px;
  align-items:start; }
.mir .mir-fiche-haut > img{ width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:20px; display:block; }
/* Le carrousel de la fiche : les fleches restent visibles (dans une
   fenetre, on ne pense pas a survoler) et les points passent dessous. */
.mir .mir-fiche-haut .mir-carrousel-vues{ aspect-ratio:3/2; }
.mir .mir-fiche-haut .mir-carrousel-fleche{ opacity:1; }
.mir .mir-fiche-tag{ display:inline-block; background:var(--creme);
  color:var(--vert); font-size:12px; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 12px; border-radius:20px; }
.mir .mir-fiche h3{ font-size:28px; line-height:32px;
  letter-spacing:-1px !important; margin:12px 0 0; }
.mir .mir-fiche-liste{ margin:18px 0 0; }
.mir .mir-fiche-liste > div{ display:flex; gap:12px; padding:8px 0;
  border-bottom:1px solid #e7e7e3; }
.mir .mir-fiche-liste dt{ flex:0 0 160px; font-weight:900;
  text-transform:uppercase; font-size:12px; letter-spacing:.04em;
  line-height:22px; }
.mir .mir-fiche-liste dd{ margin:0; font-size:17px; line-height:22px;
  letter-spacing:-.5px; }
.mir .mir-fiche-prix dd{ font-size:24px; line-height:26px; font-weight:900;
  color:var(--vert); }
.mir .mir-fiche-cta{ margin-top:18px; font-family:inherit; cursor:pointer; }
/* La description, sous le haut de fiche. */
.mir .mir-fiche-bas{ margin-top:28px; border-top:2px solid #e7e7e3;
  padding-top:22px; }
.mir .mir-fiche-oeil{ font-size:12px; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; color:var(--vert); margin:0 0 .6rem; }
.mir .mir-fiche-chapo{ font-size:18px; line-height:26px; letter-spacing:-1px; }
.mir .mir-fiche-colonnes{ display:grid; grid-template-columns:1fr 1fr;
  gap:10px 28px; margin-top:1rem; }
.mir .mir-fiche-bloc h4{ font-size:16px; line-height:20px; font-weight:900;
  text-transform:uppercase; letter-spacing:-.02em; margin:1rem 0 .5rem; }
.mir .mir-fiche-bloc ul{ margin:0; padding-left:1.2rem;
  list-style:disc outside; }
.mir .mir-fiche-bloc li{ display:list-item; font-size:16px; line-height:23px;
  letter-spacing:-.5px; margin-bottom:.25rem; }
.mir .mir-fiche-equip-titre{ font-size:16px; font-weight:900;
  text-transform:uppercase; margin:1.4rem 0 .6rem; }
.mir .mir-fiche-equip{ display:flex; flex-wrap:wrap; gap:8px; }
.mir .mir-fiche-equip span{ background:var(--gris); border-radius:20px;
  padding:6px 14px; font-size:14px; line-height:18px; }
.mir .mir-fiche-bande{ background:var(--creme); border-radius:20px;
  padding:18px 22px; margin-top:1.6rem; }
.mir .mir-fiche-bande p{ font-size:15px; line-height:22px; letter-spacing:0;
  margin:0 0 .6rem; }
.mir .mir-fiche-bande p:last-child{ margin-bottom:0; }
.mir .mir-fiche-form{ margin-top:26px; border-top:2px solid #e7e7e3;
  padding-top:20px; }
@media (max-width:820px){
  .mir .mir-fiche-haut, .mir .mir-fiche-colonnes{ grid-template-columns:1fr; }
  .mir .mir-fiche-liste dt{ flex-basis:120px; }
}
.mir .mir-stock .mir-modele h3{ font-size:18px; line-height:24px;
  letter-spacing:-.5px; margin:25px 18px 10px; }
.mir .mir-stock .mir-accroche{ font-size:1.35rem; font-weight:900;
  color:#59815b; margin-top:.4rem; }
.mir .mir-seul{ padding:0 15px 1rem; }
@media (max-width:820px){
  .mir .mir-bande-photos{ grid-template-columns:1fr 1fr; }
}

/* ===== les fiches modèles ===== */
.mir .mir-pictos{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:42px 56px; padding-top:100px; padding-bottom:0; }
.mir .mir-picto{ width:150px; text-align:center; }
/* « margin:0 auto » est indispensable : la feuille miroir pose
   « display:block » sur les images, et « text-align:center » ne centre pas
   un bloc — l'icone restait collee au bord gauche de sa colonne. */
.mir .mir-picto img{ height:74px; width:auto; object-fit:contain;
  margin:0 auto; border-radius:0 !important; }
.mir .mir-picto span{ display:block; margin-top:.6rem; font-weight:900;
  text-transform:uppercase; letter-spacing:-.02em; font-size:.95rem;
  line-height:1.15; }
.mir .mir-video-bloc{ padding-top:100px; padding-bottom:0;
  text-align:center; }
.mir .mir-video-bloc video{ width:100%; max-width:1000px; border-radius:20px;
  display:block; margin:1rem auto 0; }
.mir .mir-prix-bloc{ text-align:center; padding-top:100px;
  padding-bottom:0; }
.mir .mir-prix{ font-size:1.5rem; margin:.2rem 0; }
.mir .mir-prix strong{ font-weight:900; text-transform:uppercase;
  letter-spacing:-.03em; }
.mir .mir-prix span{ color:#59815b; font-weight:700; }
.mir .mir-porteurs{ display:flex; gap:56px; justify-content:center;
  margin-top:2rem; flex-wrap:wrap; }
.mir .mir-porteurs img{ height:70px; width:auto; object-fit:contain;
  border-radius:0 !important; }
.mir .mir-porteurs figcaption{ font-weight:900; text-transform:uppercase;
  letter-spacing:-.03em; margin-top:.5rem; }
.mir .mir-loupe{ padding-top:150px; padding-bottom:0; }
.mir .mir-loupe > h2{ text-align:center; margin-bottom:.6rem; }
.mir .mir-loupe-bloc{ display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center; padding:2rem 0; }
.mir .mir-loupe-bloc.mir-inverse .mir-photo{ order:2; }
.mir .mir-specs{ padding-top:150px; padding-bottom:0; }
.mir .mir-specs > h2{ text-align:center; margin-bottom:1.4rem; }
.mir .mir-specs .mir-puces{ margin:.8rem 0 .4rem 1.8rem; }

/* Les pages éditoriales : guide d'achat, qui sommes-nous.
   Relevé du 22/10 : la colonne de texte fait 1 330 px, le titre de
   chapitre 44 px à gauche, le sous-titre 22 px — pas 28. */
.mir .mir-chapitre{ max-width:1360px; padding-top:100px; padding-bottom:0; }
.mir .mir-chapitre > h2{ text-align:left; margin:25px 0; }
.mir .mir-chapitre h3{ font-size:22px; line-height:24.2px;
  letter-spacing:-2px !important; margin:25px 0; }
.mir .mir-chapitre p{ margin:10px 0; }
.mir .mir-chapitre .mir-puces{ margin:0 0 1rem 1.6rem; padding-left:1.2rem;
  list-style:disc outside; }
.mir .mir-chapitre .mir-puces li{ display:list-item; font-size:18px;
  line-height:26px; letter-spacing:-1px; }
.mir .mir-chapeau-gauche{ font-weight:600; }
.mir .mir-chapitre .mir-photos{ margin:1.2rem 0; }
/* Les sous-chapitres côte à côte (guide d'achat, chapitres 3 et 4). */
.mir .mir-colonnes{ display:grid; gap:30px; margin:1.4rem 0; }
.mir .mir-colonnes h3{ margin-top:0; }
/* La demande de brochure est posée sur une bande crème pleine largeur. */
.mir .mir-creme{ background:#eeebe2; max-width:none !important;
  width:100%; padding:60px 15px; text-align:center; }
.mir .mir-creme > h2{ text-align:center; }
.mir .mir-creme h3{ margin:1rem 0 .4rem; }
/* La mention SMS est une petite ligne sous le formulaire. */
.mir .mir-creme p{ font-size:13px; line-height:19px; max-width:1000px;
  margin:1rem auto 0; }

/* Les titres de section isolés sont centrés sur le site actuel, et leur
   bloc tient toute la colonne de texte. */
.mir .mir-texte{ max-width:1360px; }
.mir .mir-texte > h2{ text-align:center; }

/* Le carrousel du site actuel : une photo à la fois, deux flèches et une
   rangée de points sous la photo. */
.mir .mir-carrousel{ position:relative; }
.mir .mir-carrousel-vues{ position:relative; width:100%;
  aspect-ratio:4/3; }
.mir .mir-carrousel-vues img{ position:absolute; inset:0; width:100%;
  height:100%; object-fit:cover; border-radius:20px; opacity:0;
  transition:opacity .35s ease; }
.mir .mir-carrousel-vues img.est-actif{ opacity:1; }
.mir .mir-carrousel-fleche{ position:absolute; top:50%;
  transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.85); color:#2b2f33;
  font-size:26px; line-height:1; cursor:pointer; opacity:0;
  transition:opacity .2s ease; font-family:inherit; }
.mir .mir-carrousel:hover .mir-carrousel-fleche{ opacity:1; }
.mir .mir-carrousel-fleche.mir-prec{ left:14px; }
.mir .mir-carrousel-fleche.mir-suiv{ right:14px; }
.mir .mir-carrousel-points{ display:flex; justify-content:center; gap:10px;
  margin-top:14px; }
.mir .mir-point{ width:9px; height:9px; border-radius:50%; border:0;
  padding:0; background:#c9c9c4; cursor:pointer; }
.mir .mir-point.est-actif{ background:#2b2f33; }
/* La rangée de cartes qui défile : options de location, plus et astuces. */
.mir .mir-defile-section{ padding-top:150px; padding-bottom:0; }
.mir .mir-defile-section > h2{ text-align:center; }
.mir .mir-defile-section > .mir-chapeau{ text-align:center;
  margin-bottom:2rem; }
.mir .mir-defile{ display:flex; gap:40px; overflow-x:auto;
  scroll-snap-type:x mandatory; padding-bottom:12px; }
.mir .mir-carte-defile{ flex:0 0 387px; scroll-snap-align:start; }
.mir .mir-carte-defile img{ width:387px; height:290px; object-fit:cover;
  border-radius:20px; display:block; }
.mir .mir-carte-defile h3{ font-size:22px; line-height:24.2px;
  letter-spacing:-2px !important; margin:18px 0 10px; }
.mir .mir-carte-defile p{ font-size:18px; line-height:26px;
  letter-spacing:-1px; margin:0 0 .6rem; }
.mir .mir-carte-defile .mir-puces,
.mir .mir-loupe-bloc .mir-puces{ margin:0 0 .8rem 1.4rem;
  padding-left:1.2rem; list-style:disc outside; }
.mir .mir-carte-defile .mir-puces li,
.mir .mir-loupe-bloc .mir-puces li{ display:list-item; font-size:18px;
  line-height:26px; letter-spacing:-1px; }

/* Les galeries qui restent côte à côte (chapitres éditoriaux). */
.mir .mir-photos{ display:flex; flex-wrap:wrap; gap:10px; }
.mir .mir-photos img{ width:calc(25% - 7.5px); height:84px;
  object-fit:cover; border-radius:10px; aspect-ratio:auto; }
.mir .mir-photos img:first-child{ width:100%; height:auto;
  aspect-ratio:4/3; border-radius:20px; }
.mir .mir-bientot{ font-weight:900; text-transform:uppercase;
  letter-spacing:-.03em; font-size:.95rem; opacity:.55;
  margin:.6rem 18px 0; }

/* ===== relevé au pixel du 22/10, deuxième passe ====================
   Les sections nées après l'accueil (fiches modèles, dossier technique,
   blocs « à la loupe », pictogrammes) n'avaient pas été mesurées : elles
   reprenaient l'échelle de l'accueil. Voici les valeurs du site en ligne.
   ================================================================== */

/* Le hero des fiches modèles : tout l'écran, titre de 105 px dans le
   tiers haut, chapeau de 28 px en graisse normale sur 660 px. L'accueil,
   lui, pose son titre en bas — d'où les deux variantes. */
.mir .mir-hero{ align-items:flex-end; padding-bottom:182px; }
.mir .mir-hero-modele{ height:100vh; min-height:700px;
  align-items:flex-start; padding-top:130px; padding-bottom:0; }
.mir .mir-hero-modele h1{ font-size:105px; line-height:65px;
  letter-spacing:-2px !important; }
.mir .mir-hero-modele .mir-hero-sous{ font-size:28px; line-height:36px;
  font-weight:400; text-transform:none; letter-spacing:-1px;
  max-width:660px; margin:36px auto 0; }
.mir .mir-hero-bouton{ margin:28px 0 0; }

/* ===== le bloc de texte du hero, 29/10/2026 =========================
   « pour améliorer l'engagement j'aimerai qu'on reprenne le même format
   de texte sur les hero avec un titre (mot fort en jaune), un petit
   paragraphe et 1 ou 2 CTA suivant ce qui est le plus logique. »

   Le bloc est calé à gauche, sur la moitié de la largeur : le véhicule
   reste visible à droite, et deux boutons côte à côte ont la place de
   tenir sur une ligne. Le voile du hero est renforcé du côté du texte,
   sinon un titre blanc sur une carrosserie claire ne se lit pas.
   ================================================================== */
/* Le conteneur, élargi lui aussi — « j'ai aussi revu la largeur du
   conteneur ». À 1 360 px le bloc démarrait 45 px trop à droite par
   rapport à la reprise ; à 1 460 il tombe au même endroit. */
.mir .mir-hero-texte{ text-align:left; width:100%;
  max-width:1460px; margin-left:auto; margin-right:auto;
  padding-left:5%; padding-right:5%; box-sizing:border-box; }
/* La colonne de texte, élargie le 29/10 au soir d'après la reprise du
   client : à 620 px le titre faisait cinq lignes et le hero paraissait
   chargé. À 1 020 px il en fait deux, et le bloc respire. */
.mir .mir-hero-texte > *{ max-width:1020px; margin-left:0;
  margin-right:0; }
/* Le mot fort : du jaune sur le fond du hero, pas le surligneur crème
   des titres de section. */
.mir mark.mir-or-nu{ background:none; color:var(--jaune); padding:0; }
/* Un dégradé depuis la gauche : il porte le texte sans assombrir la
   photo entière, comme sur la maquette. Le dégradé est horizontal et
   tient son noir jusqu'au tiers de la largeur : en diagonale, il était
   déjà dissipé à hauteur du titre, et un titre blanc sur la carrosserie
   jaune d'une image de fond devenait illisible. */
.mir .mir-hero-voile{ background:linear-gradient(90deg,
  rgba(0,0,0,.74) 0%, rgba(0,0,0,.60) 34%, rgba(0,0,0,.20) 60%,
  rgba(0,0,0,.08) 80%); }
/* Le chapeau colle au titre : marge haute à zéro, comme sur la reprise
   du client. L'espace qui les sépare est celui du titre lui-même. */
.mir .mir-hero .mir-hero-sous{ font-size:19px; line-height:1.6em;
  font-weight:400; text-transform:none; letter-spacing:-.5px;
  margin:0; }
/* La ligne de repères : des valeurs séparées par un filet vertical. */
/* Le blanc est explicite : les repères sont dans un <p>, qui héritait de
   l'encre du corps de page et se perdait sur une photo claire. */
.mir .mir-hero-texte{ color:#ffffff; }
.mir .mir-hero-chiffres{ display:flex; flex-wrap:wrap; align-items:center;
  gap:0; margin:26px 0 0; padding-top:20px; color:#ffffff;
  border-top:1px solid rgba(255,255,255,.34); max-width:1020px; }
.mir .mir-hero-chiffres span{ font-size:19px; line-height:24px;
  font-weight:700; letter-spacing:-.5px; padding:0 22px; }
.mir .mir-hero-chiffres span:first-child{ padding-left:0; }
.mir .mir-hero-chiffres span + span{
  border-left:1px solid rgba(255,255,255,.34); }
/* Les appels à l'action : le premier plein, le second en contour blanc.
   Corps et rembourrage réduits par rapport aux boutons de contenu — un
   bouton de hero n'a pas besoin de la même masse pour se voir, et deux
   gros boutons alourdissaient le bloc. */
.mir .mir-hero-actions{ display:flex; flex-wrap:wrap; gap:14px;
  margin:28px 0 0; }
.mir .mir-hero-actions .mir-cta{ padding:9px 28px; font-size:13px;
  line-height:24px; letter-spacing:-.5px; }
.mir .mir-hero-actions .mir-cta.mir-contour{ border-color:#ffffff;
  color:#ffffff; background:none; }
.mir .mir-hero-actions .mir-cta.mir-contour:hover{ background:#ffffff;
  color:var(--encre); }

/* Les pictogrammes : icône de 100 px, intitulé de 18/19,8 à -2 px, et
   une rangée par groupe — trois puis quatre sur les fiches modèles. */
.mir .mir-pictos{ flex-direction:column; align-items:center; gap:42px; }
.mir .mir-pictos-rangee{ display:flex; flex-wrap:wrap;
  justify-content:center; gap:42px 56px; }
.mir .mir-picto{ width:186px; }
.mir .mir-picto img{ height:100px; }
.mir .mir-picto span{ font-size:18px; line-height:19.8px;
  letter-spacing:-2px !important; margin-top:10px; }

/* Les blocs « à la loupe » : deux colonnes de 680 px, texte sur 620,
   photo à 20 px de rayon, 50 px entre deux blocs. La rangée déborde de
   la colonne de texte — c'est le cas sur le site actuel. */
.mir .mir-loupe{ max-width:1390px !important; }
.mir .mir-loupe-bloc{ grid-template-columns:680px 680px; gap:0;
  max-width:1360px; margin:50px auto 0; padding:0; align-items:center; }
.mir .mir-loupe-bloc > *{ padding:0 30px; }
.mir .mir-loupe-bloc h3{ font-size:40px; line-height:44px;
  letter-spacing:-2px !important; margin:25px 0; padding:0; }
.mir .mir-loupe-bloc p{ margin:10px 0; padding:0; font-size:18px;
  line-height:26px; letter-spacing:-1px; }
.mir .mir-loupe-bloc .mir-photo img{ border-radius:20px; width:100%;
  aspect-ratio:4/3; object-fit:cover; display:block; }

/* Le dossier technique : pilules à gauche, volet à droite. */
.mir .mir-specs-titre{ font-size:40px; line-height:44px;
  letter-spacing:-2px !important; text-align:center; margin:0 0 14px; }
.mir .mir-specs-corps{ display:grid; grid-template-columns:520px 1fr;
  gap:30px; align-items:start; }
.mir .mir-specs-onglets{ display:flex; flex-direction:column; }
.mir .mir-specs-onglet{ width:520px; min-height:48px; border-radius:36px;
  padding:14px 20px; margin:3px 2px 2px 3px; font-family:inherit;
  font-size:18px; line-height:18px; letter-spacing:-1px; font-weight:900;
  text-transform:uppercase; text-align:left; color:#666666;
  background:#ffffff; border:.89px solid #ebebeb; cursor:pointer;
  box-shadow:0 0 16px rgba(0,0,0,.25); }
.mir .mir-specs-onglet.est-actif{ background:#f8f8f8; }
/* Le volet est une carte blanche a 36 px de rayon, comme les pilules. */
.mir .mir-specs-panneau{ padding:20px; background:#ffffff;
  border-radius:36px; box-shadow:0 0 16px rgba(0,0,0,.25); }
.mir .mir-specs-panneau .mir-puces{ margin:0 0 0 1.2rem;
  padding-left:1.2rem; list-style:disc outside; }
.mir .mir-specs-panneau .mir-puces li{ display:list-item; font-size:18px;
  line-height:26px; letter-spacing:-1px; }

/* Le chapeau d'annonce tient toute la colonne de texte sur le site
   actuel (1 300 px), pas 760. */
.mir .mir-chapeau{ max-width:none; }

/* La foire aux questions : titre centré, questions de 30/33 en capitales,
   sans filet de séparation — le site actuel n'en met pas. */
.mir .mir-faq > h2{ text-align:center; }
.mir .mir-faq .mir-q{ border-bottom:0; padding:0; }
.mir .mir-faq summary{ font-size:30px; line-height:33px;
  letter-spacing:-2px !important; margin:25px 0; }
.mir .mir-faq .mir-q p{ margin:.8rem 0 .2rem; }
.mir .mir-faq .mir-q .mir-puces{ margin:.4rem 0 .8rem 1.6rem;
  padding-left:1.2rem; list-style:disc outside; }
.mir .mir-faq .mir-q .mir-puces li{ display:list-item; font-size:18px;
  line-height:26px; letter-spacing:-1px; }

/* La bande d'appel : 455 px de haut, 150 px au-dessus, chapeau en 400. */
.mir .mir-bande{ min-height:455px; margin-top:150px; }
.mir .mir-bande p{ font-weight:400; }

/* Le trait de brosse pleine largeur entre deux sections. */
.mir .mir-separateur{ max-width:none !important; width:100%; padding:0;
  margin:0; }
.mir .mir-separateur img{ display:block; width:100%; height:123px;
  object-fit:fill; border-radius:0 !important; }

/* Un chapitre avec sa photo : deux colonnes de 665 px, comme les deux
   premiers chapitres du guide d'achat. */
.mir .mir-chapitre-photo{ display:grid; grid-template-columns:665px 665px;
  gap:0; align-items:center; max-width:1330px; margin:0 auto; }
.mir .mir-chapitre-photo > div{ padding:0 15px; }
.mir .mir-chapitre-photo img{ width:100%; aspect-ratio:3/2;
  object-fit:cover; border-radius:20px; display:block; }
.mir .mir-chapitre-photo.mir-inverse .mir-chapitre-image{ order:2; }
.mir .mir-specs-corps{ grid-template-columns:520px 750px; }

/* Deux sections côte à côte (conditions tarifaires de la location). */
.mir .mir-deux{ display:grid; grid-template-columns:680px 680px; gap:0;
  align-items:start; padding-top:0; padding-bottom:0; }
.mir .mir-deux > div > section{ padding-top:0; max-width:none !important;
  margin:0; }
.mir .mir-deux .mir-tableau-corps{ grid-template-columns:1fr;
  max-width:none; }
.mir .mir-deux .mir-specs-onglets{ display:none; }
.mir .mir-deux .mir-tableau-panneau{ display:block !important; }

/* Les quatre bénéfices en colonnes de 300 px (toits relevables). */
.mir .mir-atouts{ display:grid; grid-template-columns:repeat(4,300px);
  justify-content:center; gap:0; padding-top:50px; padding-bottom:0;
  text-align:center; }
.mir .mir-atout img{ width:150px; height:150px; object-fit:contain;
  margin:0 auto; display:block; border-radius:0 !important; }
.mir .mir-atout h3{ font-size:22px; line-height:24.2px;
  letter-spacing:-2px !important; margin:14px 10px 10px; }
.mir .mir-atout p{ margin:0 14px; }

/* Les tableaux de compatibilité : marques en onglets, cadre de 1 000 px. */
.mir .mir-tableau{ padding-top:60px; padding-bottom:0; }
.mir .mir-tableau > h2{ text-align:center; }
.mir .mir-tableau > .mir-chapeau{ text-align:center; }
.mir .mir-texte{ text-align:center; }
.mir .mir-texte > h2{ text-align:center; }
.mir .mir-tableau-corps{ display:grid; grid-template-columns:260px 1fr;
  gap:30px; max-width:1000px; margin:1.6rem auto 0; align-items:start; }
.mir .mir-tableau-corps .mir-specs-onglet{ width:260px; }
.mir .mir-tableau-panneau{ padding:20px; background:#ffffff;
  border-radius:36px; box-shadow:0 0 16px rgba(0,0,0,.25); }
.mir .mir-tableau table{ width:100%; border-collapse:collapse;
  font-size:16px; line-height:22px; letter-spacing:-.5px; }
.mir .mir-tableau th{ text-align:left; font-weight:900;
  text-transform:uppercase; font-size:.8rem; letter-spacing:-.02em;
  padding:10px 12px; border-bottom:2px solid #2b2f33; }
.mir .mir-tableau td{ padding:9px 12px; border-bottom:1px solid #d9d8cf; }
.mir .mir-tableau tbody tr:nth-child(odd){ background:#F2F1E7; }

/* Le bouton jaune des configurateurs : #ffd202, texte encre. */
.mir .mir-cta.mir-jaune{ background:#ffd202 !important;
  border-color:#ffd202 !important; color:#2b2f33 !important; }

/* Les deux porteurs d'une fiche modèle : 630 px de colonne, la marque en
   jaune au-dessus du modèle, photo 630 × 420, prix et finition centrés. */
.mir .mir-porteurs-bloc{ display:grid; grid-template-columns:630px 630px;
  gap:40px; justify-content:center; padding-top:100px; padding-bottom:0; }
.mir .mir-porteur h2{ font-size:44px; line-height:49.28px;
  letter-spacing:-3px !important; text-align:left; margin:0 0 14px; }
.mir .mir-porteur .mir-marque{ color:#ffd202; }
.mir .mir-porteur img{ width:630px; height:420px; object-fit:cover;
  border-radius:20px; display:block; }
.mir .mir-porteur-prix{ font-size:28px; line-height:32px; font-weight:900;
  text-transform:uppercase; letter-spacing:-2px; text-align:center;
  margin:22px 0 0; }
.mir .mir-porteur-finition{ font-size:18px; line-height:22px;
  font-weight:900; text-transform:uppercase; letter-spacing:-1px;
  text-align:center; margin:8px 0 0; }
.mir .mir-porteurs-bloc + .mir-seul{ padding-top:50px; }
.mir .mir-porteurs-seul{ grid-template-columns:630px; }
.mir .mir-porteurs-seul .mir-porteur h2{ text-align:center; }

/* Le bloc « Obtenir la brochure PDF » : c'est le seul endroit d'une page
   miroir qui envoie vraiment quelque chose. Le bouton est monté par
   `form.js` de l'extension, avec les classes de la charte refondue
   (`btn primary`) : on lui redonne ici la pilule du site actuel. */
.mir .mir-brochure{ text-align:center; }
.mir .mir-brochure > p{ max-width:860px; margin-left:auto; margin-right:auto; }
.mir .mir-brochure .ec-fenetre-ouvre{ display:inline-flex; align-items:center;
  background:var(--vert); color:#fff; border:1px solid var(--vert);
  border-radius:20px; padding:11px 41px; font-family:inherit; font-size:16px;
  font-weight:900; line-height:30px; letter-spacing:-1px;
  text-transform:uppercase; cursor:pointer; margin-top:1.4rem;
  transition:background .15s; }
.mir .mir-brochure .ec-fenetre-ouvre:hover{ background:var(--vert-f);
  border-color:var(--vert-f); }
.mir .mir-mentions{ font-size:14px; line-height:20px; letter-spacing:0;
  max-width:860px; margin:1.6rem auto 0; opacity:.75; }
/* Le formulaire de dépôt-vente reste dans la page : il en est le contenu. */
.mir .mir-depot{ max-width:980px; margin-left:auto; margin-right:auto; }
.mir .mir-depot h2{ font-size:28px; line-height:32px;
  letter-spacing:-1px !important; margin:2.2rem 0 1rem; }
.mir .mir-depot h2:first-child{ margin-top:0; }
.mir .mir-depot .ec-form-champs{ margin-bottom:.6rem; }
/* La fenetre est posee sur le <body>, hors du <main> : ses regles ne
   peuvent pas etre portees par « .mir ». La feuille du site refondu
   habille les <input> mais pas les <select> — le choix du porteur
   restait colle a son intitule, sans cadre. */
.ec-form select{ display:block; width:100%; margin-top:.35rem;
  font-family:inherit; font-size:.92rem; padding:.72rem .9rem;
  border:1.5px solid var(--line,#d8d6cc); background:#ffffff;
  color:var(--ink,#2b2f33); box-sizing:border-box; }
.ec-form select:focus{ outline:3px solid var(--gold,#ffd202);
  outline-offset:1px; border-color:var(--ink,#2b2f33); }

/* Les pictogrammes : 50 px entre le titre et la première rangée, et
   entre les deux rangées ; colonnes jointives de 195 px. */
.mir .mir-pictos{ padding-top:50px; gap:50px; }
.mir .mir-pictos-rangee{ gap:0; }
.mir .mir-picto{ width:195px; }

@media (max-width:820px){
  .mir .mir-loupe-bloc{ grid-template-columns:1fr; gap:20px; }
  .mir .mir-loupe-bloc.mir-inverse .mir-photo{ order:0; }
}

/* ===================================================================
   Les retouches du client — 28/10/2026, grand ecran seulement.
   -------------------------------------------------------------------
   Relevees sur la fiche Triostyle, et valables pour les 23 pages
   charte : c'est une retouche de charte, pas une exception de page.

   Le seuil est 1041 px, et ce n'est pas un chiffre au hasard : c'est
   deja celui du menu. Au-dessous, le burger apparait ; la feuille
   n'a donc qu'une seule frontiere entre « PC » et « tablette ou
   telephone », au lieu de deux a retenir.

   Une correction au passage : la regle des paragraphes de brochure et
   de bande separait ses deux selecteurs par un point-virgule la ou il
   faut une virgule. Ecrite ainsi, elle etait invalide et n'avait
   aucun effet — le navigateur jetait le bloc entier en silence.
   =================================================================== */
@media (min-width:1041px){
  .mir .mir-intro{ padding-bottom:0 !important; padding-top:0 !important; }
  /* Le bouton « Configurer » qui suit le bloc porteur disparait : il est
     deja dans le menu et plus bas dans la page. */
  .mir .mir-porteurs-bloc + .mir-seul{ display:none; }
  .mir .mir-brochure > p,
  .mir .mir-bande p{ font-size:17px; line-height:1.6em; font-weight:600; }
  .mir .mir-faq summary{ font-size:20px; line-height:20px;
    letter-spacing:-1px !important; margin:16px 0; }
  .mir .mir-faq .mir-q p{ margin:.8rem 0 .2rem; line-height:1.6em; }
  .mir .mir-faq > h2{ padding-bottom:3%; }
  .mir .mir-duo{ padding-top:3%; padding-bottom:0; }
  /* Les sections prennent toute la largeur, avec 5 % de marge de chaque
     cote, au lieu de la colonne de 1 330 px du site actuel. */
  .mir > section{ min-width:100% !important; max-width:100% !important;
    margin-left:auto; margin-right:auto; padding-left:5%; padding-right:5%; }
  /* La bande creme — la demande de brochure et le formulaire de devis —
     gardait ses 15 px : son `padding:60px 15px` est pose sur deux
     classes (0,2,0) et bat le selecteur ci-dessus, qui n'en compte
     qu'une plus un type (0,1,1). L'ordre dans la feuille n'y change
     rien : c'est la specificite qui tranche. Elle passe donc a 5 %
     elle aussi, pour que tous les blocs demarrent au meme endroit. */
  .mir .mir-creme{ padding-left:5%; padding-right:5%; }
  /* Meme piege pour le bloc isole (`padding:0 15px 1rem`) : il demarrait
     62 px avant ses voisins. */
  .mir .mir-seul{ padding-left:5%; padding-right:5%; }
  .mir .mir-carrousel-vues{ position:relative; width:80%;
    aspect-ratio:4 / 3; }
  /* Le corps du titre, revu le 29/10 avec le nouveau format de hero.
     Les 90 px avaient ete arretes le matin meme, sur les titres courts
     d'alors — « TRIOSTYLE », neuf caracteres, sur toute la largeur. Le
     bloc fait desormais 620 px et les titres sont ceux des fiches
     (« Van amenage Triostyle REIMO a Toulouse », 38 caracteres) : a
     90 px cela donne cinq lignes, et la ligne de reperes comme les deux
     boutons passent sous la ligne de flottaison — exactement ce que ce
     hero est cense eviter. La taille est donc celle de la maquette
     fournie, autour de 58 px, et elle suit la largeur de l'ecran. */
  /* Taille revue le 29/10 au soir : « les hero sont parfois trop chargé ».
     Dans la colonne élargie, 46 px donnent deux lignes là où 58 en
     donnaient cinq. */
  .mir .mir-hero-modele h1{ font-size:clamp(34px,3.1vw,46px);
    line-height:1.08; letter-spacing:-2px !important; }
  /* Ce sélecteur compte trois classes : il bat la largeur du bloc posée
     plus haut, et bridait le chapeau à 620 px alors que le titre en
     prenait 1 020. */
  .mir .mir-hero-modele .mir-hero-sous{ font-size:19px; line-height:1.6em;
    font-weight:400; max-width:1020px; }
  /* Le bloc de texte était centré, et posé à 10 % du haut. Depuis le
     29/10 il est calé à gauche et centré verticalement, comme sur la
     maquette fournie : le véhicule reste visible à droite, et les deux
     appels à l'action tiennent sur une ligne. */
  .mir .mir-hero-texte{ position:relative; text-align:left;
    margin-top:0; }
  /* Le bord brosse fait 128 px de haut et se pose par-dessus le contenu :
     sans cette réserve, le premier bouton passait dessous. */
  .mir .mir-hero-modele{ display:flex; flex-direction:column;
    justify-content:center; align-items:stretch;
    padding-top:118px; padding-bottom:150px; }
  .mir .mir-hero-modele{ height:100vh; min-height:100vh; max-height:100vh; }
}

/* ===================================================================
   Telephone et tablette — 28/10/2026.
   -------------------------------------------------------------------
   La charte du site actuel est ecrite en pixels : des colonnes de 630,
   de 680, de 520 et de 750. Sur un grand ecran c'est exactement ce
   qu'il faut ; sur un telephone, ces largeurs ne cedent pas et la page
   part en travers — releve a 390 px : 1 315 px de large pour une
   fenetre de 372. Le visiteur fait defiler de cote pour lire.

   Ce bloc ne retouche pas la charte : il **libere les largeurs** sous
   1 040 px, la ou le menu passe deja au burger. Aucune valeur n'est
   inventee ; chaque regle annule une largeur fixe et la remplace par
   la place disponible.
   =================================================================== */
@media (max-width:1040px){
  /* Plus rien ne depasse de la fenetre, quoi qu'il arrive. */
  .mir{ overflow-x:hidden; }

  /* Les deux porteurs, puis un seul. */
  .mir .mir-porteurs-bloc,
  .mir .mir-porteurs-seul{ grid-template-columns:minmax(0,1fr);
    gap:36px; padding-top:48px; }
  .mir .mir-porteur img{ width:100%; height:auto; aspect-ratio:3/2; }
  .mir .mir-porteur h2{ font-size:32px; line-height:34px;
    letter-spacing:-1.5px !important; text-align:center; }

  /* Les blocs « a la loupe » : une colonne, sans marge interne. */
  .mir .mir-loupe{ max-width:100% !important; }
  .mir .mir-loupe-bloc{ grid-template-columns:minmax(0,1fr) !important;
    max-width:100%; gap:18px; margin-top:34px; }
  .mir .mir-loupe-bloc > *{ padding:0; }
  .mir .mir-loupe-bloc.mir-inverse .mir-photo{ order:0; }
  .mir .mir-loupe-bloc h3{ font-size:26px; line-height:30px;
    letter-spacing:-1px !important; margin:14px 0 8px; }

  /* Le dossier technique : les pilules passent en bandeau, le volet
     dessous. Une pile de pilules de 520 px ne tient nulle part. */
  .mir .mir-specs-corps{ grid-template-columns:minmax(0,1fr) !important;
    gap:16px; }
  .mir .mir-specs-onglets{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  .mir .mir-specs-onglet{ width:auto !important; min-height:0;
    padding:10px 16px; font-size:14px; line-height:16px; }
  .mir .mir-specs-titre{ font-size:28px; line-height:32px; }

  /* Les tableaux de compatibilite. Le `1fr` du cadre a deux colonnes de la
     page Location est plus specifique que la regle generale ci-dessous, et
     un `1fr` sans minmax garde un minimum automatique : la colonne prenait
     la largeur du tableau (502 px pour 276 px disponibles) et debordait.
     On vise donc aussi la variante .mir-deux, et on remet a zero le
     min-width automatique du conteneur des panneaux. */
  .mir .mir-tableau-corps,
  .mir .mir-deux .mir-tableau-corps{ grid-template-columns:minmax(0,1fr);
    gap:16px; max-width:100%; }
  .mir .mir-tableau-panneaux{ min-width:0; max-width:100%; }
  .mir .mir-tableau-panneau{ overflow-x:auto; min-width:0; }

  /* Le pied : sa marge negative le faisait depasser de 30 px. */
  .mir .mir-pied{ margin-left:0; margin-right:0; }

  /* Le hero des fiches modeles : un titre de 105 px ne tient pas sur un
     telephone, et son chapeau etait fige a 660 px. */
  .mir .mir-hero-modele{ height:auto; min-height:76vh; max-height:none;
    padding-top:118px; padding-bottom:120px; }
  /* Sur telephone le bloc reprend toute la largeur disponible. */
  .mir .mir-hero-texte > *{ max-width:100%; }
  .mir .mir-hero-chiffres{ max-width:100%; gap:6px 0; }
  .mir .mir-hero-chiffres span{ font-size:16px; padding:0 14px; }
  .mir .mir-hero-actions{ margin-top:26px; }
  .mir .mir-hero-actions .mir-cta{ width:100%; justify-content:center; }
  /* Un seul reglage pour tous les titres de hero depuis le 29/10, ou le
     format des fiches modeles est devenu celui de toutes les pages. Il y
     avait ici deux regles de meme specificite — l'une pour les fiches
     modeles, l'autre pour les pages ordinaires — et la seconde, ecrite
     plus bas, l'emportait : les titres des fiches modeles etaient donc
     plafonnes a 46 px au lieu de 76 sur telephone, sans que rien ne le
     signale. Les deux sont fondues en une.
     `overflow-wrap` est le garde-fou des mots longs : « Configurateurs »
     en un seul mot fait 426 px a 46 px, soit plus large que l'ecran, et un
     mot ne se coupe pas tout seul. */
  .mir .mir-hero h1,
  .mir .mir-hero-modele h1{ font-size:clamp(34px,10.5vw,76px);
    line-height:1.02; letter-spacing:-1px !important;
    overflow-wrap:break-word; }
  .mir .mir-hero-sous{ max-width:100% !important; }
  .mir .mir-hero-modele .mir-hero-sous{ font-size:17px; line-height:26px;
    margin:18px auto 0; }
  .mir .mir-hero-texte{ padding:0 18px; max-width:100%;
    box-sizing:border-box; }

  /* Les autres largeurs figees rencontrees au releve. */
  .mir .mir-carrousel-vues{ width:100%; }
  .mir .mir-grille{ max-width:100%; }
  .mir .mir-duo{ grid-template-columns:minmax(0,1fr); gap:20px; }
  /* Les deux colonnes de la page Location — le tableau tarifaire et les
     cautions — l'une sous l'autre. Elles etaient figees a 680 px chacune,
     soit 1 375 px : la seconde sortait de l'ecran, et `overflow-x:hidden`
     l'aurait coupee en silence au lieu de la descendre. */
  .mir .mir-deux{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .mir .mir-deux > div > section{ max-width:100% !important; }
  /* Les quatre benefices des toits relevables etaient en quatre colonnes
     de 300 px, soit 1 200 px : trois des quatre sortaient de l'ecran et
     `overflow-x:hidden` les cachait purement et simplement. */
  .mir .mir-atouts{ grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 12px; padding-top:34px; }
  .mir .mir-atout img{ width:110px; height:110px; }
  .mir .mir-atout h3{ font-size:19px; line-height:21px;
    letter-spacing:-1px !important; margin:10px 2px 8px; }
  .mir .mir-atout p{ margin:0 2px; }
  /* Les photos de chapitre, figees a deux colonnes de 665 px. */
  .mir .mir-chapitre-photo{ grid-template-columns:minmax(0,1fr);
    gap:18px; }
  /* Les chapitres en colonnes portent leur nombre de colonnes en style
     en ligne : seul un !important peut le defaire. A trois colonnes le
     guide d'achat faisait 574 px pour 345 disponibles. Sur tablette deux
     colonnes tiennent encore ; sur telephone, une seule (plus bas). */
  .mir .mir-colonnes{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:22px; }
  /* Un tableau de tarifs ne se plie pas : il defile dans son cadre. */
  .mir .mir-tableau-panneau{ overflow-x:auto;
    -webkit-overflow-scrolling:touch; }
  .mir .mir-tableau table{ min-width:460px; }
  /* Sauf le tableau tarifaire de la page Location : deux colonnes, qui
     tiennent sans defilement. Lui imposer 460 px forcerait un balayage
     pour rien. */
  .mir .mir-deux .mir-tableau table{ min-width:0; }
  .mir img{ max-width:100%; }
}

@media (max-width:620px){
  .mir .mir-pictos-rangee{ gap:18px; }
  .mir .mir-colonnes{ grid-template-columns:minmax(0,1fr) !important; }
  .mir .mir-atouts{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .mir .mir-atout img{ width:130px; height:130px; }
  .mir .mir-atout h3{ font-size:22px; line-height:24px; }
  .mir .mir-specs-panneau, .mir .mir-tableau-panneau{ padding:16px; }
  .mir .mir-porteur-prix{ font-size:22px; line-height:26px; }
  .mir .mir-fiche{ padding:18px; }
}

/* ===== Le bandeau de consentement aux couleurs du site =====
   Variables publiees par Complianz ; on ne redefinit rien d'autre. */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  --cmplz_banner_border_radius:14px 14px 14px 14px;
  --cmplz_banner_border_color:#e5e5e5;
  --cmplz_banner_border_width:1px 1px 1px 1px;
  --cmplz_text_color:#111111;
  --cmplz_hyperlink_color:#4a4a4a;
  --cmplz_button_accept_background_color:#fdc300;
  --cmplz_button_accept_border_color:#fdc300;
  --cmplz_button_accept_text_color:#111111;
  --cmplz_button_deny_background_color:#ffffff;
  --cmplz_button_deny_border_color:#111111;
  --cmplz_button_deny_text_color:#111111;
  --cmplz_button_settings_background_color:#ffffff;
  --cmplz_button_settings_border_color:#e5e5e5;
  --cmplz_button_settings_text_color:#4a4a4a;
  --cmplz_toggles_active:#111111;
  --cmplz_toggles_inactive:#d8d8d8;
  --cmplz_toggles_bullet:#ffffff;
  font-family:"Montserrat",system-ui,sans-serif;
}
/* « Refuser » doit se lire aussi facilement qu'« Accepter » : c'est une
   exigence de la CNIL, et le motif de sanction le plus frequent. Les deux
   boutons ont donc la même taille et le même poids ; seule la couleur
   distingue celui que le site propose. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn{
  font-weight:700; letter-spacing:.01em; border-radius:999px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title{
  font-family:"Montserrat",system-ui,sans-serif; font-weight:700;
}
/* Le petit onglet « Gerer le consentement » qui reste en bas a gauche. */
.cmplz-manage-consent{ font-family:"Montserrat",system-ui,sans-serif; }