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

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

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



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


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


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


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

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


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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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


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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Ce qui garde le jaune, et rien d'autre :
   le bloc du H1 — coup de pinceau et surtitre de hero,
   les boutons d'action (.btn.primary, a.discover, .bcf-lien, .itc-primaire),
   la bande d'abonnement, qui est l'appel a l'action de la page,
   la colonne mise en avant du tableau comparatif. */
/* ===== fin du bloc « jaune rare » ===== *//* ===== chiffres sur les cartes modeles — 16/10/2026 ===== */
/* Le gabarit avant le nom : c'est la premiere chose qu'on veut savoir. */
.model-tuile .mt-sur{ font-family:"Montserrat",sans-serif; font-size:.63rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#9b9da0;
  margin:.9rem 0 .25rem; }
/* Trois valeurs en gras, trois libelles minuscules : la carte dit en une
   seconde pour qui est le van. */
.model-tuile .mt-chiffres{ display:flex; gap:1.5rem; margin:.85rem 0 0; }
.model-tuile .mt-chiffres div{ min-width:0; }
.model-tuile .mt-chiffres b{ display:block; font-family:"Montserrat",sans-serif;
  font-size:.95rem; font-weight:800; color:#111111; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
.model-tuile .mt-chiffres b.attente{ color:#9b9da0; font-weight:700; font-size:.88rem; }
.model-tuile .mt-chiffres span{ display:block; font-family:"Montserrat",sans-serif;
  font-size:.58rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#9b9da0; margin-top:.15rem; }
/* la phrase et le prix se resserrent pour que la carte ne s'allonge pas */
.model-tuile .mt-texte{ margin-bottom:0; }
.model-tuile .mt-prix{ margin-top:.95rem; padding-top:.75rem;
  border-top:1px solid #e5e5e5; }
/* La carte etait centree : la ligne de chiffres, elle, se lit en colonne
   par colonne. Tout passe a gauche, comme chez eux — et c'est aussi plus
   rapide a balayer quand six cartes se suivent. */
.model-tuile{ text-align:left; }
.model-tuile .mt-titre, .model-tuile .mt-texte, .model-tuile .mt-prix,
.model-tuile .mt-lien, .model-tuile .mt-sur{ text-align:left; }
.model-tuile .mt-prix .pr-label, .model-tuile .mt-prix .pr-valeur{
  display:block; text-align:left; }
@media (max-width:520px){ .model-tuile .mt-chiffres{ gap:1.1rem; } }
/* ===== vraies photos dans les emplacements — 18/10/2026 ===== */
/* Une vraie photo remplace l'emplacement : elle remplit le cadre, qui garde
   sa hauteur et son recadrage. Le liseré en pointillés de l'emplacement
   disparaît avec lui. */
.ph-cadre img.ph-vraie{ display:block; width:100%; height:100%;
  object-fit:cover; }