/* coup de pinceau jaune derriere le mot d'accroche (signature REIMO) */
.brush-wrap .brush-fill{ fill:#fdc300; }
.brush-wrap em{ color:#111111; font-style:normal; }

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

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


/* ===== Logo : plus de plaque, plus d'ombre, plus de texte a cote ===== */
.logo{ display:flex; align-items:center; gap:.7rem; font-size:0; }
.logo .mark{ display:none !important; }
.logo-full{ height:2.6rem; width:auto; display:block; background:none;
            box-shadow:none; filter:none; border:0; border-radius:0; padding:0;
            transition:height var(--dur, .25s); }
header.top.scrolled .logo-full{ height:2.15rem; }
.foot-grid .logo-full{ height:3rem; }


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


/* ===== 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; }


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

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


/* ======================================================================
   Socle catalogue — 14/10/2026
   Transposition du parti valide sur la page d'accueil.
   ====================================================================== */

:root{
  --ec-serif:"Spectral",Georgia,"Times New Roman",serif;
  --ec-titre:#3a3a3a;
  --ec-filet-2:#d8d8d8;
}

/* --- les gris de lecture remontent ------------------------------------- */
:root, :root[data-theme="dark"], :root[data-theme="light"]{
  --ec-gris-fonce:#2f2f2f; --ink-soft:#2f2f2f; --grey-700:#2f2f2f;
  --ec-gris:#5a5a5a;       --ink-faint:#5a5a5a; --grey-500:#5a5a5a;
}

/* --- la serif prend le corps du texte ---------------------------------- */
main p, main li, main td, main blockquote, main figcaption,
main .lead, main .mt, main .bx, main .fa, main dd{
  font-family:var(--ec-serif);
}
main p{ font-size:1.02rem; line-height:1.72; }
main li{ line-height:1.6; }
main .btn, main .eyebrow, main .discover, main .arrow, main .ac-tag, main .rl,
main .bd, main th, main .quick-specs span, main .spec-group h3, main .mn-tag,
main .metier-sub, main .tab, main .pill, main .chip, main .nv, main .num,
main .big-num, main .hero-stats b, main .hero-stats span{
  font-family:"Montserrat",sans-serif;
}

/* --- les titres en gris, un mot en jaune -------------------------------- */
main h2, .section-head h2{ color:var(--ec-titre); letter-spacing:-.01em; }
main h2 em.jm{ font-style:normal; color:var(--ec-accent,#fdc300); }
.page-hero h1 em.jm, .cta-band h2 em.jm, .photo-band h2 em.jm,
.config-banner h2 em.jm{ color:var(--ec-accent,#fdc300); }

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

/* --- plus aucun angle arrondi ------------------------------------------ */
body *{ border-radius:0 !important; }

/* --- le chapeau de section passe sous le titre, en italique ------------- */
.section-head{ display:block !important; margin-bottom:2.6rem; }
.section-head > p, .section-head > div + p{
  max-width:74ch !important; margin:.7rem 0 0 !important;
  font-family:"Montserrat",sans-serif !important; font-style:italic; font-weight:500;
  font-size:1.02rem !important;
}

/* --- les boutons au gabarit du catalogue -------------------------------- */
main .btn, main a.discover, main .arrow{
  font-family:"Montserrat",sans-serif !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.07em; font-size:.78rem;
  padding:.86rem 1.8rem;
}

/* --- les listes de donnees passent au filet ----------------------------- */
main .model-specs li, main .quick-specs li{
  border-bottom:1px solid var(--ec-filet-2,#d8d8d8); padding:.55rem 0; align-items:center;
}
main .sp-i{ color:#111111; }

/* --- le pied de page, deja corrige, garde ses contrastes ---------------- */
footer .foot-grid p{ font-family:"Montserrat",sans-serif !important; font-size:.88rem !important; }


/* ===== Page Actualités (16/10/2026) ===== */
.blog-filtres{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.8rem 0 .2rem; }
.blog-filtres .bf{ font-family:"Montserrat",sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.02em; color:var(--ink); background:none; border:1px solid var(--line);
  padding:.52rem .9rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; }
.blog-filtres .bf span{ font-size:.72rem; font-weight:700; color:var(--ink-faint); }
.blog-filtres .bf:hover{ border-color:var(--ink); }
.blog-filtres .bf.on{ background:var(--gold); border-color:var(--gold); }
.blog-filtres .bf.on span{ color:#111; }
.blog-filtres .bf:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.blog-note{ font-size:.82rem; color:var(--ink-faint); margin:.85rem 0 0; }
.blog-provisoire{ font-family:var(--ec-serif,Georgia,serif); font-size:.84rem;
  color:var(--ink-faint); border-left:3px solid var(--gold); padding:.45rem .8rem;
  margin:1.6rem 0 0; background:var(--paper-alt); }
  /* Le bouton « Charger plus » — 22/10/2026. Centré sous la grille, discret :
     il ne doit pas concurrencer les cartes qu'il sert à compléter. */
  .blog-plus{ display:flex; justify-content:center; margin-top:2.2rem; }
  .blog-plus .btn[hidden]{ display:none; }
  .blog-grid[aria-busy="true"]{ opacity:.45; transition:opacity .18s ease; }
  .blog-filtres .bf[disabled]{ opacity:.55; cursor:progress; }

  /* La bande « Suivez-nous ». Même grammaire que la lettre d'information
     juste au-dessus : deux colonnes, du texte à gauche, l'action à droite. */
  .rs-bande{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.4rem;
    align-items:center; border-top:1px solid var(--line); padding-top:3rem; }
  .rs-bande h2{ margin:.4rem 0 .8rem; }
  .rs-bande p{ font-size:.94rem; line-height:1.7; color:var(--ink-soft);
    max-width:52ch; margin:0; }
  .rs-liens{ display:grid; gap:.9rem; }
  .rs-liens a{ display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem;
    border:1.5px solid var(--line); background:#ffffff; text-decoration:none;
    color:var(--ink); transition:border-color .18s ease, transform .18s ease; }
  .rs-liens a:hover{ border-color:var(--ink); transform:translateX(3px); }
  .rs-liens svg{ width:26px; height:26px; flex:0 0 auto; fill:currentColor; }
  .rs-liens span{ display:flex; flex-direction:column; line-height:1.35; }
  .rs-liens b{ font-family:"Montserrat",sans-serif; font-weight:700;
    font-size:.95rem; }
  .rs-liens span{ font-size:.84rem; color:var(--ink-faint); }
  @media (max-width:860px){
    .rs-bande{ grid-template-columns:1fr; gap:1.6rem; }
  }

a.blog-card{ display:flex; flex-direction:column; color:inherit; text-decoration:none;
  transition:box-shadow .18s ease, transform .18s ease; }
a.blog-card .blog-photo{ flex:0 0 auto; }
a.blog-card:hover{ transform:translateY(-3px); }
a.blog-card:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.blog-card[hidden]{ display:none; }
.blog-card .blog-body{ display:flex; flex-direction:column; gap:.45rem; flex:1 1 auto; }
.blog-extrait{ font-family:var(--ec-serif,Georgia,serif); font-size:.9rem; line-height:1.65;
  color:var(--ink-soft); margin:0; }
.blog-pied{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.4rem .8rem; margin-top:auto; padding-top:.5rem; border-top:1px solid var(--line); }
.blog-pied time{ font-size:.78rem; color:var(--ink-faint); }
.blog-lire{ font-family:"Montserrat",sans-serif; font-size:.78rem; font-weight:700;
  text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:2px; text-underline-offset:3px; }
@media (prefers-reduced-motion:reduce){ a.blog-card{ transition:none; } a.blog-card:hover{ transform:none; } }

/* ===== Gabarit d’article (16/10/2026) ===== */
.art-wrap{ max-width:760px; margin:0 auto; padding:0 clamp(1.2rem,4vw,3rem); }
.art-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem;
  font-size:.82rem; color:var(--ink-faint); margin:0 0 1.1rem; }
.art-theme{ font-family:"Montserrat",sans-serif; font-size:.68rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#111; background:var(--gold);
  padding:.32rem .6rem .26rem; }
.art-corps{ font-family:var(--ec-serif,Georgia,serif); font-size:1.04rem; line-height:1.85;
  color:var(--ink); }
.art-corps > p{ margin:0 0 1.3rem; }
.art-corps h2{ font-family:"Montserrat",sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.4vw,1.6rem); margin:2.6rem 0 .5rem; }
.art-corps h2::before{ content:''; display:block; width:1.9rem; height:3px;
  background:var(--gold); margin:0 0 .7rem; }
.art-corps h3{ font-family:"Montserrat",sans-serif; font-weight:700; font-size:1rem;
  margin:1.8rem 0 .4rem; }
.art-corps ul{ margin:0 0 1.3rem; padding-left:1.1rem; }
.art-corps li{ margin:.3rem 0; }
.art-corps .art-chapo{ font-size:1.12rem; line-height:1.8; color:var(--ink-soft); }
.art-repere{ background:var(--paper-alt); border-left:3px solid var(--gold);
  padding:1rem 1.2rem; margin:1.8rem 0; font-size:.96rem; }
.art-repere b{ font-family:"Montserrat",sans-serif; }
.art-photo{ margin:0 0 2.4rem; }
.art-photo img{ display:block; width:100%; height:auto; }
.art-photo figcaption{ font-size:.78rem; color:var(--ink-faint); margin-top:.5rem; }
.art-pied{ border-top:1px solid var(--line); margin-top:2.6rem; padding-top:1.4rem;
  font-size:.86rem; color:var(--ink-faint); }

/* ===== Abonnement à la lettre d’information (16/10/2026) ===== */
.lettre{ background:var(--ink); color:#f1f1f1; padding:clamp(2.4rem,5vw,3.6rem)
  clamp(1.4rem,4vw,3rem); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:center; }
@media (max-width:860px){ .lettre{ grid-template-columns:1fr; } }
.lettre .eyebrow{ color:#111; background:var(--gold); display:inline-block;
  padding:.36rem .62rem .3rem; margin:0 0 .9rem; }
.lettre h2{ font-family:"Montserrat",sans-serif; font-weight:800; letter-spacing:-.025em;
  font-size:clamp(1.5rem,3.2vw,2.1rem); color:#fff; margin:0 0 .8rem; }
.lettre p{ font-family:var(--ec-serif,Georgia,serif); font-size:1rem; line-height:1.8;
  color:#c6c6c6; margin:0 0 1.2rem; max-width:52ch; }
.lettre ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.lettre li{ position:relative; padding-left:1.5rem; font-size:.92rem; color:#e4e4e4; }
.lettre li::before{ content:''; position:absolute; left:0; top:.52em; width:.62rem;
  height:2px; background:var(--gold); }
.lettre .ac-placeholder{ display:flex; width:100%; background:#1b1b1b;
  border:1px dashed #5a5a5a; border-radius:0; padding:1.5rem 1.4rem; gap:.5rem; }
.lettre .ac-placeholder .ac-tag{ color:#111; background:var(--gold);
  padding:.26rem .5rem .2rem; font-weight:800; }
.lettre .ac-placeholder .ac-label{ color:#ffffff; font-size:1.02rem; font-style:normal;
  font-weight:600; }
.lettre .lettre-note{ font-size:.78rem; color:#9a9a9a; margin:.9rem 0 0; max-width:46ch; }
/* ===== menu : entrees cliquables 16/10/2026 ===== */
.nv-volet-tete{ grid-column:1/-1; display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:.78rem;
  letter-spacing:.03em; text-transform:uppercase; color:#111; text-decoration:none;
  padding:0 0 .75rem; margin:0 0 1rem; border-bottom:1px solid #e5e5e5; }
.nv-volet-tete:hover{ text-decoration:underline; text-decoration-color:#fdc300;
  text-decoration-thickness:2px; text-underline-offset:3px; }
.nvp-sous .nvp-page{ font-weight:800; }
/* ===== volet « visuel pilote » 16/10/2026 ===== */
/* Le volet n'est plus un panneau blanc a moitie vide : liens a gauche, photo a
   droite qui suit le survol. Les angles redeviennent droits.

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

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

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

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

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

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

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

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

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

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

/* Ce qui garde le jaune, et rien d'autre :
   le bloc du H1 — coup de pinceau et surtitre de hero,
   les boutons d'action (.btn.primary, a.discover, .bcf-lien, .itc-primaire),
   la bande d'abonnement, qui est l'appel a l'action de la page,
   la colonne mise en avant du tableau comparatif. */
/* ===== fin du bloc « jaune rare » ===== */
/* ===== pages légales ===== */
.cgl-sommaire ol{list-style:decimal outside !important;padding-left:1.4rem}
.cgl-sommaire ol li{list-style:decimal outside !important;display:list-item}
.cgl ul{list-style:disc outside !important}
.cgl ul li{list-style:disc outside !important;display:list-item}
.cgl{max-width:46rem;margin:0 auto;padding:3.5rem 1.25rem 5rem}
.cgl-projet{margin:0 0 2.5rem;padding:1rem 1.15rem;background:#fff6d9;
  border-left:4px solid #fdc300;font-size:.92rem;line-height:1.6}
.cgl-projet mark{background:#fdc300;padding:0 .2em}
.cgl-hero{margin:0 0 2.5rem}
.cgl-hero h1{margin:.3rem 0 .9rem}
.cgl-hero .lead{margin:0}
.cgl-date{margin:1.1rem 0 0;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:#6e6e6e}
.cgl-sommaire{margin:0 0 3rem;padding:1.4rem 1.6rem;background:#f5f5f5}
.cgl-sommaire ol{margin:0;padding-left:1.3rem}
.cgl-sommaire li{margin:.3rem 0;font-size:.95rem}
.cgl-sommaire a{color:#111;text-decoration:none;border-bottom:1px solid #e5e5e5}
.cgl-sommaire a:hover{border-bottom-color:#fdc300}
.cgl section{margin:0 0 2.75rem;scroll-margin-top:7rem}
.cgl h2{margin:0 0 1rem;padding-bottom:.55rem;border-bottom:2px solid #111;
  font-size:1.35rem}
.cgl h3{margin:1.6rem 0 .6rem;font-size:1.02rem}
.cgl p{margin:0 0 .9rem;line-height:1.7}
.cgl ul{margin:0 0 1rem;padding-left:1.2rem}
.cgl li{margin:.35rem 0;line-height:1.65}
.cgl a{color:#111}
.cgl-note{padding:.75rem 1rem;background:#f5f5f5;border-left:3px solid #e5e5e5;
  font-size:.9rem}
.cgl-note mark{background:#fdc300;padding:0 .2em}
.cgl-pied{margin:3.5rem 0 0;padding-top:1.5rem;border-top:1px solid #e5e5e5;
  font-size:.95rem;color:#4a4a4a}
@media (max-width:640px){.cgl{padding:2.25rem 1rem 3.5rem}
  .cgl-sommaire{padding:1.1rem 1.2rem}}

/* ===== pages legales : le hero du site et une colonne large =====
   Le hero est pose par le thema (voir ec_legal_hero) : c'est le gabarit
   des autres pages — photo, voile, titre, sous-titre, brush. Ici on ne
   regle que sa hauteur, la date de version, et la largeur du texte.

   La colonne de lecture est portee par les enfants de .cgl, pas par .cgl,
   pour que le hero tienne toute la largeur sans recourir a 100vw, qui
   compte la barre de defilement et decalait la page de neuf pixels. */

.cgl{
  display:flex;flex-direction:column;
  max-width:none;margin:0;padding:0 0 5rem;
  font-family:Montserrat,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:1.0625rem;color:#333333;
}
.cgl > *:not(.cgl-mir){width:min(76rem,100% - 10vw);margin-inline:auto}
.cgl > .cgl-mir{order:-1;margin-bottom:3.5rem}

.mir-hero-legal{
  min-height:clamp(330px,44vh,470px);
  padding-top:clamp(7rem,11vw,8.5rem);
  padding-bottom:clamp(4.5rem,8vw,6.5rem);
}
.mir-hero-legal .mir-hero-date{
  margin:1.4rem 0 0;color:rgba(255,255,255,.62);
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
}

.cgl p,.cgl li,.cgl td,.cgl th,.cgl-note,.cgl-projet,.cgl-sommaire a{
  font-family:Montserrat,'Segoe UI',Helvetica,Arial,sans-serif !important;
}
.cgl section p{font-size:1rem;line-height:1.75;margin:0 0 1.05rem;max-width:62rem}
.cgl section li{font-size:1rem;line-height:1.7}
.cgl section ul{max-width:62rem}
.cgl h2{font-size:clamp(1.4rem,2.6vw,1.75rem);letter-spacing:-.01em}
.cgl h3{font-size:clamp(1.05rem,2vw,1.2rem)}
.cgl-sommaire{padding:1.6rem 1.9rem}
.cgl-sommaire ol{columns:2;column-gap:3rem}
.cgl-sommaire li{break-inside:avoid}

@media (max-width:760px){
  .cgl > *:not(.cgl-mir){width:min(76rem,100% - 2.5rem)}
  .cgl-sommaire ol{columns:1}
  .cgl section p,.cgl section li{font-size:.97rem}
}