:root{
    --paper:#ffffff;
    --paper-alt:#f5f5f5;
    --ink:#2b2f33;
    --ink-soft:#4a4a4a;
    --ink-faint:#6e6e6e;
    --pine:#2b2f33;
    --pine-deep:#000000;
    --gold:#59815b;
    --terracotta:#59815b;
    --terracotta-deep:#2b2f33;
    --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(89,129,91,.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(89,129,91,.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,#59815b);
    background:rgba(89,129,91,.1); color:var(--ink,#2b2f33); }
  .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:#2b2f33; }
  .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,#2b2f33);
    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(89,129,91,.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,#2b2f33);
  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,#2b2f33); 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,#59815b); 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,#2b2f33); 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,#2b2f33); text-decoration:underline;
  text-decoration-color:var(--accent,#59815b); 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,#2b2f33); 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,#2b2f33);
    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,#2b2f33); 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,#2b2f33);
  box-shadow:inset 0 -.30em 0 rgba(89,129,91,.42); }
.page-hero--photo .brush-wrap em,
.hero-copy .brush-wrap em{ color:#59815b; 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 #59815b
   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:#59815b;
  --accent-dark:#48694a;
  --accent-soft:rgba(89,129,91,.22);
  --grey-050:#f5f5f5;
  --grey-200:#e5e5e5;
  --grey-500:#6e6e6e;
  --grey-700:#4a4a4a;
  --black:#2b2f33;
}

/* ---------- 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:#59815b; color:#2b2f33;
  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:#59815b; color:#2b2f33;
}

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

/* chiffres cles dans un cadre noir arrondi (cf. fiche Triostyle) */
.spec-key{
  border:2px solid #2b2f33; border-radius:26px;
  padding:2rem 2.2rem; gap:1.4rem;
  border-bottom:2px solid #2b2f33;
}
.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:#2b2f33; display:inline-block;
  border-bottom:3px solid #59815b; padding-bottom:.3rem;
}
/* corrections de lisibilite */
.eyebrow,.section-head .eyebrow{ color:#2b2f33 !important; background:#59815b !important; }
.model-body a.discover{ background:#59815b !important; color:#2b2f33 !important; font-weight:700; }
.model-body a.discover:hover{ background:#48694a !important; color:#2b2f33 !important; }
/* coup de pinceau jaune derriere le mot d'accroche (signature REIMO) */
.brush-wrap .brush-fill{ fill:#59815b; }
.brush-wrap em{ color:#2b2f33; 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:       #2b2f33;   /* titres et texte fort              */
  --ec-noir:        #000000;   /* bandeaux pleins                   */
  --ec-accent:      #59815b;   /* jaune : etiquette, bouton, icone  */
  --ec-accent-f:    #48694a;   /* 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(89,129,91,.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,#59815b); }


/* ===== 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,#59815b); 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,#2b2f33);
}
#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,#2b2f33) !important;
  border:1.5px solid var(--ec-texte,#2b2f33); 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,#2b2f33) !important; color:#ffffff !important;
}
#gamme .model-card.featured{
  background:var(--ec-accent,#59815b) !important;
  border-color:var(--ec-accent,#59815b) !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:#2b2f33; }
#gamme .model-card.featured .model-specs{ border-top-color:rgba(0,0,0,.18); }
#gamme .model-card.featured a.discover{
  background:#2b2f33 !important; border-color:#2b2f33; color:#ffffff !important;
}
#gamme .model-card.featured a.discover:hover{
  background:#ffffff !important; border-color:#ffffff; color:#2b2f33 !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,#59815b);
}

/* 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,#59815b); color:#2b2f33 !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 Montserrat · jaune #59815b
   Angles vifs · filets fins · etiquettes rectangulaires
   ====================================================================== */

:root{
  --ec-serif:"Montserrat",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,#59815b); }
#contact .cta-band h2{ color:#ffffff; }
#contact .cta-band h2 em.jm{ color:var(--ec-accent,#59815b); }

/* --- 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,#59815b) !important;
  border-color:var(--ec-accent,#59815b) !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:#2b2f33; }

/* --- 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,#59815b); color:#2b2f33; 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:#2b2f33 !important;
  border:1.5px solid #2b2f33; 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,#59815b) !important; border-color:var(--ec-accent,#59815b);
  color:#2b2f33 !important; transform:none;
}
#stock .metier-card:hover{ border-color:var(--ec-accent,#59815b); }

/* --- 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,#59815b) !important; color:#2b2f33 !important;
  border-color:var(--ec-accent,#59815b) !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:#2b2f33 !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,#59815b); color:#2b2f33;
  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:#2b2f33 !important;
  border:1.5px solid #2b2f33 !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,#59815b) !important; border-color:var(--ec-accent,#59815b) !important;
  color:#2b2f33 !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,#59815b);
  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:#2b2f33;
  font-family:var(--ec-serif);
}
.newsletter input:focus{ border-color:#2b2f33 !important; outline:none; }
.newsletter .btn.on-gold{
  background:var(--ec-accent,#59815b) !important; color:#2b2f33 !important;
  border-color:var(--ec-accent,#59815b) !important; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; font-size:.78rem;
}
.newsletter .btn.on-gold:hover{ background:var(--ec-accent-f,#48694a) !important; }
.newsletter p{ color:var(--ec-gris-fonce,#4a4a4a) !important; }
.newsletter .social-icons a{ background:rgba(0,0,0,.06) !important; color:#2b2f33 !important; }
.newsletter .social-icons a:hover{ background:var(--ec-accent,#59815b) !important; color:#2b2f33 !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:#2b2f33 !important; }

/* --- les trois metiers : texte plus contraste -------------------------- */
#stock .metier-card p{ color:#2f2f2f !important; }
#stock .metier-card .metier-sub{ color:#2b2f33 !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,#59815b);
  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:#2b2f33 !important; }
.newsletter input{
  border:1.5px solid #2b2f33 !important; background:#ffffff !important; color:#2b2f33;
}
.newsletter .btn.on-gold{
  background:#2b2f33 !important; color:#ffffff !important; border-color:#2b2f33 !important;
}
.newsletter .btn.on-gold:hover{
  background:#ffffff !important; color:#2b2f33 !important; border-color:#2b2f33 !important;
}
.newsletter p{ color:#3a3a3a !important; }
.newsletter .social-icons a{ background:rgba(0,0,0,.10) !important; color:#2b2f33 !important; }
.newsletter .social-icons a:hover{ background:#2b2f33 !important; color:var(--ec-accent,#59815b) !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:#2b2f33 !important; text-decoration:underline;
  text-underline-offset:3px; }
footer .foot-grid h4{ color:#2b2f33 !important; }
footer .foot-grid .foot-nap svg{ color:#2b2f33; }
footer .foot-bottom{ color:#3a3a3a !important; }


/* --- derniers reglages de lisibilite ---------------------------------- */
#gamme .model-specs .sp-i{ color:#2b2f33; }
#gamme .model-card.featured .model-specs .sp-i{ color:#2b2f33; }
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:#2b2f33;
  --ec-noir:#000000; --ec-accent:#59815b; --ec-accent-f:#48694a;
  --paper:#ffffff; --paper-alt:#f5f5f5; --card:#ffffff; --white:#ffffff;
  --line:#e5e5e5; --grey-050:#f5f5f5; --grey-200:#e5e5e5;
  --ink:#2b2f33; --ink-soft:#4a4a4a; --ink-faint:#6e6e6e;
  --grey-500:#6e6e6e; --grey-700:#4a4a4a;
  --pine:#2b2f33; --pine-deep:#000000; --black:#2b2f33;
  --gold:#59815b; --terracotta:#59815b; --terracotta-light:#59815b;
  --terracotta-deep:#2b2f33; --accent:#59815b; --accent-dark:#48694a;
  --accent-soft:rgba(89,129,91,.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:#2b2f33; }

/* --- 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,#59815b); 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:#2b2f33 !important; color:var(--ec-accent,#59815b) !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:#2b2f33;
}
#gamme .mv-tag{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:#2b2f33; opacity:.72;
}
#gamme .mv-texte{
  font-family:var(--ec-serif); font-size:1.05rem; line-height:1.65; color:#2b2f33;
  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:#2b2f33;
  display:flex; align-items:center; gap:.55rem;
}
#gamme .mv-corps .model-specs li span{ font-family:var(--ec-serif); font-size:.95rem; color:#2b2f33; }
#gamme .mv-corps .model-specs .sp-i{ color:#2b2f33; }
#gamme .mv-corps a.discover.mv-lien{
  background:#2b2f33 !important; color:#ffffff !important; border:1.5px solid #2b2f33;
  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:#2b2f33 !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,#59815b) !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,#59815b); 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,#59815b); color:#2b2f33; }

/* --- 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,#59815b); color:#2b2f33;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem;
}
.metier-bande .mb-icone svg{ width:24px; height:24px; margin:0; color:#2b2f33; }
.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:#2b2f33; 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:#2b2f33;
  border:1.5px solid #2b2f33; 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,#59815b); border-color:var(--ec-accent,#59815b); color:#2b2f33;
}
@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:#2b2f33; 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,#59815b);
  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,#59815b);
  color:var(--ec-accent,#59815b); 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,#59815b); color:#2b2f33; }
@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,#59815b); color:#2b2f33;
  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:#2b2f33;
}
#gamme .model-tuile .mt-lien::after{ content:" →"; }
#gamme .model-tuile:hover .mt-lien{ color:var(--ec-accent-f,#48694a); }
@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,#59815b) !important; color:#2b2f33 !important;
  margin-bottom:1rem;
}
.intercalaire .itc-liens a.itc-primaire{
  background:var(--ec-accent,#59815b); border-color:var(--ec-accent,#59815b); color:#2b2f33;
}
.intercalaire .itc-liens a.itc-primaire:hover{
  background:#ffffff; border-color:#ffffff; color:#2b2f33;
}

/* --- B2. l'invitation au configurateur, en bloc noir ------------------- */
.bloc-config{
  background:#2b2f33; 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,#59815b) !important; color:#2b2f33 !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,#59815b) !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,#59815b); color:#2b2f33;
  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,#59815b);
  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:#2b2f33; }
.newsletter .ac-placeholder .ac-label{ color:#2b2f33; 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:#2b2f33; 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:#59815b;
  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:#2b2f33;
  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:#59815b; }
.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:#2b2f33; 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:#59815b; color:#2b2f33;
  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:#2b2f33; 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:#2b2f33; }
.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:#2b2f33; }
.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:#2b2f33; text-decoration:none; padding:.4rem 0; }
.nvp-v2 a.nvp-cta{ display:block; text-align:center; background:#59815b; color:#2b2f33;
  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 #59815b;
  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:#59815b !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:#2b2f33; }
main a.sp-lien:hover{ text-decoration:underline; text-decoration-color:#59815b;
  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:#2b2f33 !important; color:#ffffff !important; }
main .mod-vedette.mod-vedette{ background:#2b2f33 !important; color:#ffffff !important; }
main .mb-icone.mb-icone{ background:#2b2f33 !important; color:#ffffff !important; }
main .mb-icone svg{ stroke:#ffffff; }
main .ti, main .ti svg{ color:#2b2f33 !important; stroke:#2b2f33 !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:#2b2f33; 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; }
/* « #2b2f33 » 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:#2b2f33;
  --cmplz_hyperlink_color:#4a4a4a;
  --cmplz_button_accept_background_color:#59815b;
  --cmplz_button_accept_border_color:#59815b;
  --cmplz_button_accept_text_color:#2b2f33;
  --cmplz_button_deny_background_color:#ffffff;
  --cmplz_button_deny_border_color:#2b2f33;
  --cmplz_button_deny_text_color:#2b2f33;
  --cmplz_button_settings_background_color:#ffffff;
  --cmplz_button_settings_border_color:#e5e5e5;
  --cmplz_button_settings_text_color:#4a4a4a;
  --cmplz_toggles_active:#2b2f33;
  --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; }


/* ===== charte du site actuel — variante de demonstration =====
   Relevee sur ecocampers.fr le 22/10/2026, voir
   seo/design-site-actuel-jetons.md. Ce bloc ne vit que dans la variante :
   la charte d'origine n'est pas touchee. */
/* L'interlettrage resserre est LA signature du site actuel. Il se pose en
   « !important » parce que les feuilles de page le contredisent a plus forte
   specificite (.hero h1 a -.01em) : sans cela, le titre du hero — celui
   qu'on voit en premier — garderait l'ancienne allure. */
h1, h2, h3 { text-transform:uppercase !important; font-weight:900 !important;
  letter-spacing:-.045em !important; }
h4, h5, h6 { text-transform:uppercase !important; font-weight:900 !important;
  letter-spacing:-.02em !important; }
h1 em, h2 em, h3 em { font-style:normal; }
body { color:#2b2f33; }

/* Les boutons : une pilule, trois declinaisons. Le « !important » repond a
   celui de la doctrine des angles vifs de la maquette, qui vise .btn
   nommement : a importance et specificite egales c'est la derniere
   declaration qui gagne, et ce bloc clot la feuille de la page. */
.btn, a.btn, button.btn, .nav-cta, .mobile-bar .quote, .devis-submit,
.ec-form-envoi, .cfg-envoi {
  border-radius:20px !important; text-transform:uppercase;
  font-weight:900 !important; letter-spacing:0; padding:.625rem 2.5rem; }
.btn.primary, .ec-form-envoi, .cfg-envoi { background:#59815b; color:#ffffff; }
.btn.primary:hover, .ec-form-envoi:hover, .cfg-envoi:hover { background:#48694a; color:#ffffff; }
/* Le bouton contour : la bordure est rendue transparente par les feuilles de
   page sur fond photo (.hero--photo .btn.ghost), d'ou le « !important ». */
.btn.ghost { background:#ffffff; color:#2b2f33;
  border:1px solid #2b2f33 !important; }
.btn.ghost:hover { background:#2b2f33; color:#ffffff; }

/* Les formes : cartes, photos et images de contenu a 20 px de rayon. */
.model-card, .blog-card, .metier-card, .model-photo, .blog-photo,
.metier-photo, .photo-frame, .ph-cadre, .guide-visual, .newsletter input,
main img { border-radius:20px !important; }

/* Restent a angles vifs : le logo, les fonds de hero, l'etiquette du
   catalogue, et les onglets de FAQ — qui font exception sur le site actuel. */
header img, .foot-logo img, img[src*="logo"], .page-hero img,
.eyebrow, .section-head .eyebrow, .faq-onglet, .onglets button {
  border-radius:0 !important; }


/* ===== les formes, relevees dans la feuille a la construction =====
   18 boutons, 10 cartes, 6 poses sur le vert. Voir
   passe-charte-formes.py. */
.bcf-lien,
.btn,
.devis-submit,
.discover,
.ec-form-envoi,
.gamme-cta,
.itc-primaire,
.mir-cta,
.mir-fiche-cta,
.mir-hero-bouton,
.mir-lien-simple,
.mir-menu-lien,
.mt-lien,
.mv-lien,
.nav-cta,
.quote,
.sp-lien,
.v2-cta {
  border-radius:20px !important; text-transform:uppercase !important;
  font-weight:900 !important; }
/* Le texte sombre de notre charte devenait illisible sur le vert. */
.bcf-lien,
.btn,
.discover,
.gamme-cta,
.itc-primaire,
.v2-cta { color:#ffffff !important; }
.btn.ghost { color:#2b2f33 !important; }
.btn.ghost:hover { color:#ffffff !important; }
.blog-card,
.chassis-carte,
.feature-card,
.metier-card,
.mir-carte-defile,
.model-card,
.model-tuile,
.photo-card,
.related-card,
.service-card { border-radius:20px !important; overflow:hidden; }
.eyebrow,
.section-head .eyebrow,
.faq-onglet,
.onglets button,
header img,
.foot-logo img,
img[src*="logo"],
.page-hero img { border-radius:0 !important; }


/* ===== le sous-menu rhabille — 29/10/2026 ==========================
   Le panneau etait le seul element carre et plat d'un site fait de
   pilules de 20 px : coins arrondis, ombre portee, une pointe qui le
   raccroche a sa pilule, et des entrees qui s'allument sur toute leur
   largeur au lieu de ne changer que de couleur de texte.
   Aucun changement de balisage : tout tient dans cette feuille.
   ================================================================== */
.mir .mir-sous-menu{
  top:calc(100% + 9px); left:0; min-width:236px;
  background:#fff; padding:8px;
  border-radius:16px;
  box-shadow:0 20px 44px rgba(0,0,0,.26);
}
/* Le pont invisible : le panneau ne touche plus son entree, il se
   fermerait des que la souris traverse l'espace entre les deux. */
.mir .mir-sous-menu::after{
  content:""; position:absolute;
  left:0; right:0; top:-11px; height:11px;
}
/* La pointe, qui dit de quelle entree le panneau descend. */
.mir .mir-sous-menu::before{
  content:""; position:absolute;
  top:-6px; left:24px; width:13px; height:13px;
  background:#fff; border-radius:3px;
  transform:rotate(45deg);
}
.mir .mir-sous-menu a{
  padding:8px 14px; border-radius:11px;
  font-size:15px; line-height:22px; letter-spacing:-.4px;
  transition:background .13s, color .13s;
}
.mir .mir-sous-menu a:hover{
  background:var(--creme,#f2f1e7);
  color:var(--vert-f,#48694a);
}
/* Le lien vers la gamme entiere se detache du reste, comme un titre de
   rubrique. Il est vise par son adresse et non par sa position : les
   trois autres sous-menus n'ont pas d'entree de ce genre, et leur
   premiere ligne doit rester une ligne comme les autres. Les deux
   adresses sont la, celle d'aujourd'hui et celle d'apres la bascule. */
.mir .mir-sous-menu a[href="/gamme-reimo-charte/"],
.mir .mir-sous-menu a[href="/gamme-reimo/"]{
  color:var(--vert,#59815b); font-weight:700;
  border-bottom:1px solid #eceadf;
  border-radius:11px 11px 0 0;
  margin-bottom:5px; padding-bottom:10px;
}
/* Sur telephone le menu se deplie en accordeon : ni pointe, ni ombre,
   ni coins — le panneau est dans le flux. */
@media (max-width:1040px){
  .mir .mir-sous-menu{
    top:auto; border-radius:0; padding:0 0 0 8px;
    box-shadow:none; min-width:0;
  }
  .mir .mir-sous-menu::before,
  .mir .mir-sous-menu::after{ display:none; }
}

/* ===================== la fenetre du vehicule ========================
   Elle ne garde que ce qui declenche un clic : la photo en grand avec
   ses vignettes, le nom, le prix en grand, quelques reperes, deux
   boutons et le telephone. La description, l'amenagement et les
   equipements de serie vivent sur la page du vehicule.
   Ajoute le 29/10/2026. */

.mir dialog.mir-fiche .mir-fiche-resume{ display:flex;
  flex-direction:column; align-items:flex-start; }

.mir .mir-fiche-gros{ font-size:34px; line-height:38px; font-weight:900;
  letter-spacing:-1px; margin:14px 0 0; color:var(--encre); }

.mir .mir-fiche-reperes{ list-style:none; display:flex; flex-wrap:wrap;
  gap:7px; margin:14px 0 0; padding:0; }

.mir .mir-fiche-reperes li{ background:var(--creme,#f2f1e7);
  border-radius:20px; padding:5px 12px; font-size:13px; line-height:18px;
  font-weight:700; color:var(--encre); margin:0; list-style:none; }

.mir .mir-fiche-ref{ font-size:13px; line-height:18px; color:#7a7a72;
  margin:10px 0 0; }

.mir .mir-fiche-actions{ display:flex; flex-wrap:wrap; gap:10px;
  margin-top:20px; }

.mir .mir-fiche-actions .mir-cta{ font-size:15px; margin-top:0; }

.mir .mir-fiche-tel{ font-size:14px; line-height:20px; color:#5c5c55;
  margin:14px 0 0; }

.mir .mir-fiche-tel a{ color:var(--vert,#59815b); font-weight:700;
  text-decoration:none; }

/* Les deux faces de la fenetre : le resume, puis le formulaire. On
   bascule de l'une a l'autre au lieu de faire defiler. Sur la page du
   vehicule il n'y a pas de bascule : le formulaire est toujours la. */
.mir dialog.mir-fiche .mir-fiche-form{ display:none; margin-top:0;
  border-top:0; padding-top:0; }
.mir dialog.mir-fiche.est-forme .mir-fiche-form{ display:block; }
.mir dialog.mir-fiche.est-forme .mir-fiche-haut{ display:none; }

.mir .mir-fiche-retour{ background:none; border:0; padding:0;
  margin:0 0 14px; font-family:inherit; font-size:14px; font-weight:700;
  color:var(--vert,#59815b); cursor:pointer; }

/* Le bouton de retour n'a de sens que dans la fenetre a deux faces.
   Ailleurs -- la page du vehicule, ou le formulaire est deplace dans
   la fenetre maison .ec-fenetre -- il n'aurait rien a replier. */
.mir .mir-fiche-retour{ display:none; }
.ec-fenetre .mir-fiche-retour{ display:none; }
.mir dialog.mir-fiche .mir-fiche-retour{ display:inline-block; }

/* Les vignettes, a la place des points, sous la photo de la fiche. */
.mir .mir-fiche-haut .mir-carrousel-points{ gap:8px; flex-wrap:wrap;
  justify-content:flex-start; margin-top:10px; }

.mir .mir-fiche-haut .mir-point{ width:62px; height:46px;
  border-radius:0; background:none; overflow:hidden; opacity:.55;
  padding:0; border:2px solid transparent;
  transition:opacity .15s, border-color .15s; }

.mir .mir-fiche-haut .mir-point:hover{ opacity:1; }

.mir .mir-fiche-haut .mir-point.est-actif{ opacity:1; background:none;
  border-color:var(--vert,#59815b); }

/* La charte arrondit toutes les images a 20 px en `!important`
   (`main img`) : la photo de la vignette en sort a la meme force. */
.mir .mir-fiche-haut .mir-point img{ width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
  border-radius:0 !important; }

@media (max-width:820px){
  .mir .mir-fiche-gros{ font-size:28px; line-height:32px; }
  .mir .mir-fiche-haut .mir-point{ width:52px; height:39px; }
  .mir .mir-fiche-actions .mir-cta{ width:100%; text-align:center; }
}

/* Deux retouches posees avec la fenetre resumee, le 29/10/2026 :
   la photo de la fiche occupe toute sa colonne (une regle de releve la
   laissait a 80 % et la fleche de droite tombait a cote), et le nom du
   laissait a 80 % et la fleche de droite tombait a cote).
   Le nom du vehicule reste en capitales : h1, h2, h3 portent
   text-transform:uppercase !important dans la charte du site actuel,
   c'est sa signature, et la fenetre ne doit pas en sortir seule. */
.mir .mir-fiche-haut .mir-carrousel-vues{ width:100%; }

/* Sur telephone, la fenetre empile la photo et le resume : il faut la
   resserrer pour qu'elle tienne encore sans defilement. Les vignettes
   y redeviennent des points (on balaie, on ne vise pas une vignette de
   quatre millimetres), le titre et le prix descendent d'un cran, les
   boutons maigrissent et la reference s'efface : elle est sur la page
   du vehicule. Pose le 29/10/2026. */
@media (max-width:560px){
  .mir dialog.mir-fiche{ padding:16px; }
  .mir dialog.mir-fiche .mir-fiche-haut{ gap:16px; }
  .mir dialog.mir-fiche h3{ font-size:22px; line-height:26px;
    margin-top:10px; }
  .mir dialog.mir-fiche .mir-fiche-gros{ font-size:26px; line-height:30px;
    margin-top:10px; }
  .mir dialog.mir-fiche .mir-fiche-reperes{ margin-top:10px; gap:6px; }
  .mir dialog.mir-fiche .mir-fiche-reperes li{ font-size:12px;
    line-height:16px; padding:4px 10px; }
  .mir dialog.mir-fiche .mir-fiche-ref{ display:none; }
  .mir dialog.mir-fiche .mir-fiche-actions{ margin-top:14px; gap:8px; }
  .mir dialog.mir-fiche .mir-fiche-actions .mir-cta{ font-size:14px;
    padding:12px 18px; }
  .mir dialog.mir-fiche .mir-fiche-tel{ margin-top:10px; }
  .mir dialog.mir-fiche .mir-carrousel-points{ justify-content:center;
    gap:9px; margin-top:12px; }
  .mir dialog.mir-fiche .mir-fiche-haut .mir-point{ width:9px; height:9px;
    border-radius:50%; border:0; background:#c9c9c4; opacity:1; }
  .mir dialog.mir-fiche .mir-fiche-haut .mir-point.est-actif{
    background:#2b2f33; }
  .mir dialog.mir-fiche .mir-fiche-haut .mir-point img{ display:none; }
}

/* ==================== la page du vehicule ========================
   Elle n'avait ni en-tete ni largeur de lecture : le texte courait
   sur 1 465 px, le <h1> etait masque aux lecteurs d'ecran seulement,
   et le seul bouton sortait de l'ecran au premier geste.
   Pose le 29/10/2026. */

/* La charte pose `.mir > section{ min-width:100% !important }` pour que
   ses bandes pleine largeur le restent. L'en-tete et la fiche du
   vehicule ne sont pas des bandes mais des blocs de lecture : elles
   sortent de la regle, a la meme force. */
.mir > section.mir-fiche-page{ min-width:0 !important; }
/* Sur les 23 pages charte, une photo de hero demarre juste sous le menu
   et la barre sombre s'y fond. La fiche vehicule n'a pas de hero -- et
   les photos des vehicules ne sont pas toujours en haute definition, on
   n'en met donc pas en fond. La bande sombre prolonge le menu et porte
   le fil d'Ariane et le titre : la barre n'est plus suspendue, elle est
   le haut d'un bloc, comme le pied de page ferme la page. */
.mir .mir-veh-entete{ background:#2b2f33; color:#fff; margin:0;
  padding:2px 0 76px; }
.mir .mir-veh-entete-dedans{ width:min(1180px,94vw); margin:0 auto;
  padding-top:26px; }

.mir .mir-fil{ font-size:14px; line-height:20px; color:#b3b3ab;
  display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.mir .mir-fil a{ color:#b3b3ab; text-decoration:none; }
.mir .mir-fil a:hover{ color:#fff; text-decoration:underline; }
.mir .mir-fil span[aria-current]{ color:#fff; font-weight:700; }

.mir .mir-veh-entete h1{ font-size:clamp(28px,3vw,40px); line-height:1.1;
  letter-spacing:-1px !important; margin:14px 0 0; color:#fff; }

.mir .mir-fiche-page{ width:min(1180px,94vw); min-width:0; padding:34px;
  margin:-48px auto 26px; position:relative; z-index:1; }
.mir .mir-fiche-page .mir-fiche-resume{ display:flex;
  flex-direction:column; align-items:flex-start; }
.mir .mir-fiche-page .mir-fiche-liste{ width:100%; margin-top:14px; }
.mir .mir-fiche-page .mir-fiche-chapo{ max-width:74ch; }
.mir .mir-fiche-page .ec-fenetre-ouvre{ margin-top:20px; }
.mir .mir-fiche-page .mir-fiche-tel{ margin-top:12px; }

.mir .mir-similaires-titre{ padding-top:60px; }
.mir .mir-similaires{ padding-bottom:10px; }

/* La barre qui suit le defilement. Elle ne sort qu'une fois le bouton
   du haut passe, et rentre quand le retour a la liste arrive. */
.mir .mir-veh-barre{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:#fff; box-shadow:0 -6px 24px rgba(0,0,0,.16);
  transform:translateY(110%); transition:transform .22s ease;
  padding:10px 0; }
.mir .mir-veh-barre.est-visible{ transform:translateY(0); }
.mir .mir-veh-barre-dedans{ width:min(1180px,94vw); margin:0 auto;
  display:flex; align-items:center; gap:14px; }
.mir .mir-veh-barre-nom{ font-weight:900; font-size:15px; line-height:20px;
  letter-spacing:-.5px; flex:1 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mir .mir-veh-barre-prix{ font-weight:900; font-size:19px; line-height:24px;
  letter-spacing:-.5px; white-space:nowrap; }
.mir .mir-veh-barre-tel{ font-weight:700; font-size:15px;
  color:var(--vert,#59815b); text-decoration:none; white-space:nowrap; }
.mir .mir-veh-barre-cta{ white-space:nowrap; }

@media (max-width:820px){
  .mir .mir-veh-barre-nom{ display:none; }
  .mir .mir-veh-barre-tel{ display:none; }
  .mir .mir-veh-barre-dedans{ gap:10px; width:min(1180px,92vw); }
  .mir .mir-veh-barre-cta{ flex:1 1 auto; min-width:0;
    white-space:normal; font-size:13px; padding:11px 14px; }
  .mir .mir-veh-barre-prix{ font-size:17px; line-height:22px; }
  .mir .mir-fiche-page{ padding:22px; }
  .mir .mir-veh-entete{ padding-top:24px; }
}
@media (prefers-reduced-motion:reduce){
  .mir .mir-veh-barre{ transition:none; }
}

/* Le tableau comparatif a deux formes : avec ses onglets a gauche
   (`.mir-specs-onglets` + `.mir-tableau-panneaux`, d'ou la grille
   260 px + 1fr), et seul (`.mir-tableau-seul`), ou il n'y a que les
   panneaux. Dans le second cas la grille gardait ses deux colonnes :
   le tableau se tassait dans les 260 px de la premiere et laissait
   710 px de vide a cote. Vu sur Weekender 2 et Camp 2.
   `minmax(0,1fr)` et non `1fr` : `1fr` garde un minimum automatique
   egal au contenu, qui deborde des que la fenetre se reduit.
   Pose le 29/10/2026. */
.mir .mir-tableau-corps.mir-tableau-seul{
  grid-template-columns:minmax(0,1fr); }

/* La premiere colonne des tableaux comparatifs porte la cle de la
   ligne -- Cuisine, Froid, Eau, ou le nom du porteur sur les toits
   relevables. Elle se lisait au meme poids que les valeurs. 700 et
   non 900 : l'en-tete est deja a 900, la cle n'a pas a crier aussi
   fort que lui. Pose le 29/10/2026. */
.mir .mir-tableau-panneau tbody td:first-child{ font-weight:700; }

/* ============ « Informations techniques » : le bloc a onglets =========
   Releve avant reprise : trois gelules de 520 px de large, toutes avec
   la meme ombre portee a 25 %, et un onglet actif qui ne se distinguait
   que par un gris #f8f8f8 contre #fff -- invisible. La liste, elle,
   flottait en puces disque au milieu du panneau.

   Apres : une colonne de 300 px (trois mots n'en demandent pas 520),
   des onglets creme a plat, l'actif en vert avec un filet jaune, et
   une liste en rangees separees par un filet, avec une pastille verte
   a la place de la puce. Pose le 29/10/2026. */

.mir .mir-specs-corps{ grid-template-columns:300px minmax(0,1fr);
  gap:28px; }

.mir .mir-specs-onglets{ gap:8px; }

.mir .mir-specs-onglet{ width:100%; min-height:0; border:0;
  border-radius:14px; padding:15px 18px; margin:0;
  font-size:15px; line-height:20px; letter-spacing:-.5px;
  color:var(--encre,#2b2f33); background:var(--creme,#f2f1e7);
  box-shadow:none; display:flex; align-items:center; gap:11px;
  transition:background .14s ease, color .14s ease; }

.mir .mir-specs-onglet::before{ content:""; flex:0 0 auto;
  width:3px; height:17px; border-radius:2px; background:transparent;
  transition:background .14s ease; }

.mir .mir-specs-onglet:hover{ background:#e9e7da; }

.mir .mir-specs-onglet.est-actif{ background:var(--vert,#59815b);
  color:#fff; }
.mir .mir-specs-onglet.est-actif:hover{ background:var(--vert-f,#48694a); }
.mir .mir-specs-onglet.est-actif::before{ background:var(--jaune,#ffd202); }

.mir .mir-specs-panneau{ border-radius:20px; padding:26px 32px;
  box-shadow:0 0 16px rgba(0,0,0,.12); }

/* La liste devient une suite de rangees : un filet les separe, une
   pastille verte remplace la puce disque. */
.mir .mir-specs-panneau .mir-puces{ margin:0; padding:0;
  list-style:none; }

.mir .mir-specs-panneau .mir-puces li{ display:block; position:relative;
  font-size:17px; line-height:25px; letter-spacing:-.5px;
  padding:11px 0 11px 24px; border-bottom:1px solid #eceadf; }

.mir .mir-specs-panneau .mir-puces li:last-child{ border-bottom:0;
  padding-bottom:0; }

.mir .mir-specs-panneau .mir-puces li::before{ content:"";
  position:absolute; left:5px; top:21px; width:6px; height:6px;
  border-radius:50%; background:var(--vert,#59815b); }

@media (max-width:820px){
  .mir .mir-specs-corps{ grid-template-columns:minmax(0,1fr);
    gap:18px; }
  .mir .mir-specs-panneau{ padding:20px 22px; }
  .mir .mir-specs-panneau .mir-puces li{ font-size:16px;
    line-height:23px; padding:10px 0 10px 22px; }
  .mir .mir-specs-panneau .mir-puces li::before{ top:19px; }
}
@media (prefers-reduced-motion:reduce){
  .mir .mir-specs-onglet,
  .mir .mir-specs-onglet::before{ transition:none; }
}

/* Certains onglets ont douze lignes : sur grand ecran la liste devient
   une colonne maigre et tres haute. Elle passe sur deux colonnes.

   `columns:2 340px` plutot qu'un point de rupture : le navigateur ne
   coupe en deux que si chaque colonne garde au moins 340 px. Sur
   telephone, ou le panneau fait 298 px de contenu, il reste tout seul
   sur une colonne -- rien a maintenir.

   `break-inside:avoid` pour qu'une ligne ne se coupe pas d'une colonne
   a l'autre, et le filet revient sous la derniere ligne : en deux
   colonnes, un bas de colonne sans filet se lit comme un oubli.
   Pose le 29/10/2026. */

.mir .mir-specs-panneau .mir-puces{ columns:2 340px; column-gap:44px; }

.mir .mir-specs-panneau .mir-puces li{ break-inside:avoid;
  -webkit-column-break-inside:avoid; }

.mir .mir-specs-panneau .mir-puces li:last-child{
  border-bottom:1px solid #eceadf; padding-bottom:11px; }

/* ======= les largeurs figees entre le telephone et le grand ecran =====
   La charte reproduit le site actuel au pixel : ses grilles a deux
   colonnes portent les largeurs relevees sur un ecran de 1 707 px --
   `.mir-duo` 650+650, `.mir-loupe-bloc` 680+680, `.mir-porteurs-bloc`
   630+630. Elles tiennent au-dessus de ~1 500 px, et elles empilent
   sous 820 ou 1 040 px. Entre les deux, elles debordaient : 161 px de
   trop en 1 280, 79 px en 1 366 -- les deux largeurs de portable les
   plus repandues. L'audit du 28/10 n'avait mesure que 390, 820 et
   1 536 px et etait passe a cote.

   Dans cet entre-deux seulement, les colonnes deviennent fluides. Au
   dessus de 1 500 px rien ne change : le rendu de reference reste
   identique au pixel. Pose le 29/10/2026. */

@media (min-width:821px) and (max-width:1500px){
  .mir .mir-duo{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:1041px) and (max-width:1500px){
  .mir .mir-loupe-bloc{ grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:100%; }
  .mir .mir-porteurs-bloc{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mir .mir-deux{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mir .mir-chapitre-photo{ grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:100%; }
  .mir .mir-porteurs-seul{ grid-template-columns:minmax(0,630px); }
  .mir .mir-porteur img{ width:100%; }

  /* Le menu ne tient pas en 1 366 : sept entrees dont « VANS NEUFS
     REIMO BY ECO CAMPERS ». Un point de police en moins suffit --
     basculer un portable de 1 366 en burger serait pire. */
  .mir .mir-menu a{ font-size:14px; }
}

/* ====== le titre de hero sur telephone et tablette ====================
   Releve du 29/10, sur sept pages : 41 px a 390, 76 px entre 768 et
   1 040, 46 px a 1 536. Le titre etait donc **65 % plus gros sur une
   tablette que sur un 27 pouces**, jusqu'a 398 px de hauteur, plus de
   la moitie du hero. Puis il retombait d'un coup a 39 px a 1 280.

   La cause : `clamp(34px,10·5vw,76px)` sous 1 040 px datait du temps ou
   le titre faisait 90 px sur grand ecran. Quand il est passe a
   `clamp(34px,3·1vw,46px)` le 29/10, la borne du bas n'a pas suivi.

   Le nouveau clamp rejoint le plancher du dessus (34 px a 1 041) :
   l'echelle est continue d'un bout a l'autre, sans marche. L'interligne
   passe de 1·02 a 1·08, comme sur grand ecran -- a 1·02 les lignes
   d'un titre en capitales se touchaient. */

@media (max-width:1040px){
  .mir .mir-hero h1,
  .mir .mir-hero-modele h1{ font-size:clamp(32px,3.3vw,36px);
    line-height:1.08; }
}

/* ====== le plancher de lisibilite sur telephone et tablette ==========
   Le releve du site actuel descend a 10 px pour les etiquettes
   (« Compact · 4,85 m », « Salon », « Location », « 1 exemplaire dans
   la flotte ») et a 11 px pour les chapeaux de section et les
   libelles de formulaire. Ces valeurs sont identiques sur grand ecran
   et sur telephone : elles viennent du releve, pas d'un choix mobile.

   Sous 1 041 px elles remontent a 12 et 13 px. Au-dessus, rien ne
   change : le rendu de reference reste celui du site actuel, au pixel.
   Un libelle de formulaire a 11 px se lit pendant qu'on le remplit,
   le pouce devant : c'est la ou le point gagne compte le plus.
   Pose le 29/10/2026. */

@media (max-width:1040px){
  .eyebrow,
  .mt-sur, .mt-lien,
  .blog-theme, .bvi-theme,
  .veh-tag, .vc-sous, .barre-lib, .metier-sub,
  .vc-tarif span, .vc-tarif b,
  .mir .mir-deux li b{ font-size:12px; }

  .ec-form label, .ec-form-champs label,
  form label{ font-size:13px; }
}

/* Les onglets de la page d'accueil etaient a 11 px, releve du site
   actuel. Sous 1 041 px ils passent a 12 px -- voir le bloc
   « plancher de lisibilite » plus haut. */
@media (max-width:1040px){
  .mir .mir-onglet{ font-size:12px; }
}

/* ===== page gamme REIMO — trois reprises du 30/10/2026 =====

   1. La ligne des porteurs montait de 78 px sur le chapeau. La valeur
      tenait tant que le chapeau faisait une ligne ; il en fait deux, et
      les deux textes se chevauchaient.
   2. L'alternance photo / texte sautait : les blocs Weekender 2, Camp 2
      et Variocharge portaient la mauvaise classe. On impose l'alternance
      par le rang plutot que de corriger le contenu de la page.
   3. Le dernier bloc n'avait pas de marge basse et touchait le pied. */

.page-id-3582 .mir .mir-porteurs-ligne{margin-top:0}
.page-id-3582 .mir section.mir-duo:nth-of-type(2n) .mir-photo{order:0}
.page-id-3582 .mir section.mir-duo:nth-of-type(2n+1) .mir-photo{order:2}

/* ===== pages modeles : le carrousel remplit sa colonne =====
   Il etait a 80 % de sa colonne et cale a gauche : la photo s'arretait
   130 px avant le bord, la fleche de droite flottait dans le vide, et le
   bloc ne s'alignait plus sur les photos des autres sections. */
.mir .mir-photo .mir-carrousel .mir-carrousel-vues{width:100%}

/* ===== respiration entre la derniere section et le pied =====
   Les sections de contenu n'ont pas de marge basse : la derniere collait
   au pied sur toutes les pages. */
.mir > section:last-of-type{padding-bottom:96px}
@media (max-width:760px){.mir > section:last-of-type{padding-bottom:56px}}

/* ===== page Vendre mon van : titre, formulaire centre, carte =====
   Le formulaire etait cale a gauche sur 736 px au milieu d'une page de
   1690 : il flottait. On le pose au centre, dans une carte blanche sur
   fond clair, et on lui donne les reperes du reste du site : le filet
   jaune au-dessus des intitules, les angles arrondis des photos. */

.page-id-6903 .mir-intro .mir-chapeau,
.page-id-6903 .mir-intro p{max-width:58rem;margin-inline:auto}
.page-id-6903 .mir-intro h2{margin-bottom:.9rem}

.page-id-6903 .mir-depot{background:#f5f5f5}
.page-id-6903 .mir-depot form.ec-form{
  max-width:54rem;margin:0 auto;
  background:#ffffff;border-radius:20px;
  padding:clamp(1.6rem,3.5vw,3rem);
  box-shadow:0 18px 44px rgba(0,0,0,.07);
}
.page-id-6903 .mir-depot form.ec-form h2{
  font-size:clamp(1.15rem,2.2vw,1.45rem);margin:0 0 1.2rem;
}
.page-id-6903 .mir-depot form.ec-form h2 + .ec-form-champs{margin-top:0}
.page-id-6903 .mir-depot form.ec-form h2::before{
  content:'';display:block;width:34px;height:3px;
  background:#fdc300;margin:0 0 .75rem;
}
.page-id-6903 .mir-depot form.ec-form h2 ~ h2{margin-top:2.4rem}
.page-id-6903 .mir-depot form.ec-form .ec-form-case{margin-top:1.8rem}
.page-id-6903 .mir-depot form.ec-form .ec-form-envoi{margin-top:1.4rem}
.page-id-6903 .mir-depot .mir-mentions{
  max-width:54rem;margin:1.2rem auto 0;text-align:center;
}
@media (max-width:760px){
  .page-id-6903 .mir-depot form.ec-form{border-radius:14px}
  .page-id-6903 .mir-depot form.ec-form .ec-form-envoi{width:100%}
}

/* ===== page Contact : formulaire centre, bloc final en deux colonnes ===== */

.page-id-5779 .mir-depot{background:#f5f5f5}
.page-id-5779 .mir-depot form.ec-form{
  max-width:48rem;margin:0 auto;background:#ffffff;border-radius:20px;
  padding:clamp(1.6rem,3.5vw,3rem);box-shadow:0 18px 44px rgba(0,0,0,.07);
}
.page-id-5779 .mir-depot .mir-mentions{
  max-width:48rem;margin:1.2rem auto 0;text-align:center;
}

/* « Pourquoi contacter Eco Campers » : la photo a gauche, le texte a
   droite, la photo qui suit la lecture sur grand ecran. */
.page-id-5779 .mir section.mir-chapitre:last-of-type{
  display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);
  column-gap:clamp(2rem,4vw,3.5rem);row-gap:0;align-items:start;
}
.page-id-5779 .mir section.mir-chapitre:last-of-type > .mir-photos{
  grid-column:1;grid-row:1 / span 24;position:sticky;top:7rem;
}
.page-id-5779 .mir section.mir-chapitre:last-of-type > *:not(.mir-photos){
  grid-column:2;
}
@media (max-width:900px){
  .page-id-5779 .mir section.mir-chapitre:last-of-type{grid-template-columns:1fr}
  .page-id-5779 .mir section.mir-chapitre:last-of-type > .mir-photos{
    grid-column:1;grid-row:auto;position:static;
  }
  .page-id-5779 .mir section.mir-chapitre:last-of-type > *:not(.mir-photos){
    grid-column:1;
  }
}

/* ===== cartes du stock : les cinq lignes sous le titre ===== */
.mir .mir-modele-bref{
  list-style:none;margin:.2rem 0 1rem;padding:0;
  display:grid;gap:.3rem;text-align:left;
}
.mir .mir-modele-bref li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.34rem 0;border-bottom:1px solid #ececec;
  font-size:.88rem;line-height:1.35;letter-spacing:0;
}
.mir .mir-modele-bref li:last-child{border-bottom:0}
.mir .mir-modele-bref span{color:#6e6e6e}
.mir .mir-modele-bref b{color:#111111;font-weight:700;text-align:right}

/* ===== blocs photo + texte : la colonne est posee, pas devinee =====
   L'ordre seul ne suffisait pas : sur certaines sections les deux blocs
   se retrouvaient l'un sous l'autre dans la premiere colonne. On nomme
   la colonne de chacun. */
.mir .mir-chapitre-photo{grid-template-rows:auto}
.mir .mir-chapitre-photo > .mir-chapitre-image{grid-column:1;grid-row:1}
.mir .mir-chapitre-photo > .mir-chapitre-dit{grid-column:2;grid-row:1}
.mir .mir-chapitre-photo.mir-inverse > .mir-chapitre-image{grid-column:2}
.mir .mir-chapitre-photo.mir-inverse > .mir-chapitre-dit{grid-column:1}
@media (max-width:900px){
  .mir .mir-chapitre-photo > .mir-chapitre-image,
  .mir .mir-chapitre-photo > .mir-chapitre-dit,
  .mir .mir-chapitre-photo.mir-inverse > .mir-chapitre-image,
  .mir .mir-chapitre-photo.mir-inverse > .mir-chapitre-dit{
    grid-column:1;grid-row:auto;
  }
}

/* ===== trois colonnes : le chapeau tient la largeur =====
   Le paragraphe d'introduction etait un enfant comme les autres : il
   prenait une colonne et repoussait le troisieme bloc a la ligne. */
.mir .mir-colonnes > *:first-child:not(:has(h3)){grid-column:1 / -1}

/* Le chapitre regroupe au rendu : trois colonnes, pas une. */
.mir .mir-colonnes-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.mir .mir-colonnes-3{grid-template-columns:1fr}}

/* ===== guide d'achat : la bande creme du chapitre 4 =====
   Les deux separateurs encadrent une bande : le premier en ouvre le bord
   dechire, le second le referme a l'envers. La section prise entre les
   deux doit porter le fond creme, sinon la bande s'arrete au bord et le
   chapitre reste blanc. La seconde regle rend son fond a la section qui
   suit la fermeture. */
.page-id-4192 .mir-separateur + .mir-chapitre{background:#f2f1e7}
.page-id-4192 .mir-separateur + .mir-chapitre + .mir-separateur + .mir-chapitre{
  background:transparent;
}

/* Location : la reservation en ligne n’est pas encore ouverte -------
   Encart pose entre le hero et l’introduction de la page Location, et
   meme encart dans la fenetre d’un van a la place du tunnel. Le fond
   beige est celui du brush ; le texte est pose en dur car la boite
   garde son fond clair dans les deux themes. */
.mir .ec-resa-avis{ padding-top:0; }
.mir .ec-resa-avis-boite,
.mir .veh-resa-suspendue{
  background:#f2f1e7;
  color:#2b2f33;
  border-left:6px solid var(--gold);
  border-radius:4px;
  padding:28px 32px;
}
.mir .ec-resa-avis-boite{ max-width:76rem; margin-inline:auto; }
.mir .veh-resa-suspendue{ margin:24px 0 8px; }
.mir .ec-resa-avis-boite b,
.mir .veh-resa-suspendue b{
  display:block;
  font-size:1.2rem;
  line-height:1.3;
  margin-bottom:10px;
}
.mir .ec-resa-avis-boite p,
.mir .veh-resa-suspendue p{
  margin:0 0 18px;
  max-width:62ch;
  color:#4a4a4a;
}
.mir .ec-resa-avis-liens,
.mir .veh-resa-suspendue-liens{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
@media (max-width:600px){
  .mir .ec-resa-avis-boite,
  .mir .veh-resa-suspendue{ padding:22px 20px; }
  .mir .ec-resa-avis-liens > *,
  .mir .veh-resa-suspendue-liens > *{ flex:1 1 100%; text-align:center; }
}