/* ── TOPBAR ── */
.topbar{display:none;background:var(--n-950);padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.topbar .w{max-width:calc(1280px + 5rem);margin:0 auto;padding:0 2.5rem;display:flex;align-items:center;justify-content:space-between}
.aud-tabs{display:flex}
.aud-tab{font-size:var(--ty-xs);font-weight:400;color:var(--n-300);padding:3px 16px;border-right:1px solid rgba(255,255,255,.08);cursor:pointer;transition:color .15s}
.aud-tab:first-child{padding-left:0}.aud-tab:last-child{border-right:none}
.aud-tab:hover{color:var(--white)}.aud-tab.on{color:#7FC4F5;font-weight:500}
.tdiv{width:1px;height:12px;background:rgba(255,255,255,.1)}
.topbar-r{display:flex;align-items:center;gap:20px}
.topbar-r a{font-size:var(--ty-xs);font-weight:400;color:var(--n-300);transition:color .15s}
.topbar-r a:hover{color:var(--white)}

/* ── MAIN NAV ── */
.mainnav{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;transition:background .35s,backdrop-filter .35s,border-color .35s}
.nav-w{max-width:calc(1280px + 5rem);margin:0 auto;padding:0 2.5rem;display:flex;align-items:center;height:64px;position:relative}
.logo{display:flex;align-items:center;margin-right:28px;flex-shrink:0}
.logo-img{height:32px;width:auto;display:block;transition:filter .35s ease}
.nav-links{display:flex;flex:1;align-items:center}
.nl{font-size:var(--ty-xs);font-weight:500;color:var(--text2);padding:0 13px;height:64px;display:flex;align-items:center;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.nav-sep{width:1px;height:18px;background:var(--border2);flex-shrink:0;margin:0 4px}
.nl:hover{color:var(--n-900);border-bottom-color:transparent;text-decoration:underline;text-decoration-color:var(--n-200);text-underline-offset:5px;text-decoration-thickness:2px}.nl.on{color:var(--n-900);border-bottom-color:transparent;font-weight:600;text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:5px;text-decoration-thickness:2px}
.nav-cta{margin-left:auto;display:flex;gap:10px;flex-shrink:0}
.nav-cta-m{display:none}   /* copie des boutons dans le panneau du burger : affichée seulement ≤ 1240 px */
/* Groupe de liens CENTRÉ entre le logo et les boutons (2026-10-20, après le masquage de « Notre Offre ») : écarts égaux des deux côtés, 24 px mini.
   Bureau seulement : en mobile le groupe est le panneau déroulant du burger. */
@media(min-width:1241px){
  .logo{margin-right:0}
  .nav-links{justify-content:center;padding:0 24px}
}
/* En-tête resserré entre 1241 et 1360 px : le menu complet (logo + 5 liens + 2 boutons + loupe) demande ≈ 1330 px ; on regagne ≈ 120 px sur les marges
   (gouttière, espace autour des liens, marges internes des boutons) pour qu'il tienne dès 1241 px. En dessous de 1241 px : en-tête à burger (plus bas). */
@media(min-width:1241px) and (max-width:1360px){
  .nav-w{padding:0 1.5rem}
  .nav-links{padding:0 8px}
  .nl{padding:0 10px}
  .nav-cta{gap:8px}
  .btn-nav,.btn-nav-ghost{padding:10px 16px}
}

/* ── NAV OVERLAY (hero pages) ── */
/* --overlay-gap : espace entre le bas du header (94px) et le contenu hero */
:root{--overlay-gap:200px}
body.nav-overlay section[class*="hero"]{padding-top:calc(94px + var(--overlay-gap))}
body.nav-overlay section[class*="hero"],body.nav-solid section[class*="hero"]{padding-bottom:220px;min-height:869px}
/* Même hauteur de héros partout (≥1101px) : hauteur FIXE, pas seulement un minimum. Un contenu plus haut que la zone
   utile (869 - 294 - 220 = 355px) déborde dans le padding bas au lieu d'allonger le héros (avant : 899 à 1007px selon la page).
   En dessous, les héros s'empilent et restent déterminés par leur contenu (min-height 869px). */
@media(min-width:1101px){
  body.nav-overlay section[class*="hero"],body.nav-solid section[class*="hero"]{height:869px;box-sizing:border-box}
}
/* Héros EN DESSOUS de 1101 px (tablettes, téléphones) — décidé le 2026-10-26 (« gère toute la version responsive ») : la hauteur est donnée par le contenu, avec un plancher.
   Avant, le plancher de 869 px (et 294 / 220 px de marges) faisait un héros plus haut qu'un écran de téléphone, avec 300 px de vide au-dessus du titre.
   Tablette (769–1100 px) : plancher 640 px, titre à 176 px (bas de l'en-tête ≈ 94 px + 82 px). Téléphone (≤ 768 px) : pas de plancher, titre à 124 px (en-tête ≈ 86 px + 38 px).
   Les héros qui ont leur propre marge (accueil, pages univers, contact, pages légales) la règlent dans leur feuille. */
@media(max-width:1100px){
  body.nav-overlay section[class*="hero"],body.nav-solid section[class*="hero"]{padding-top:176px;padding-bottom:96px;min-height:640px}
}
@media(max-width:768px){
  body.nav-overlay section[class*="hero"],body.nav-solid section[class*="hero"]{padding-top:124px;padding-bottom:56px;min-height:0}
}
body.nav-overlay #site-header{position:fixed;top:30px;left:0;right:0;z-index:200;transition:top .35s ease}
body.nav-solid #site-header{position:fixed;top:0;left:0;right:0;z-index:200;transition:top .35s ease}
body.nav-overlay .breadcrumb{display:none}
body.nav-overlay .mainnav{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
body.nav-overlay .mainnav .nl,body.nav-overlay .mainnav .mega-trigger{color:rgba(255,255,255,.9);transition:color .15s}
body.nav-overlay .mainnav .nl:hover,body.nav-overlay .mainnav .mega-trigger:hover,
body.nav-overlay .mainnav .mega-wrap:hover .mega-trigger,
body.nav-overlay .mainnav .nl.on,body.nav-overlay .mainnav .mega-trigger.on{color:#fff !important;border-bottom-color:transparent !important;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:5px;text-decoration-thickness:2px}
body.nav-overlay .mainnav .nav-sep{background:rgba(255,255,255,.3)}
body.nav-overlay .mainnav .search-btn{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85)}
body.nav-overlay .mainnav .search-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6);color:#fff}
body.nav-overlay .logo-img{filter:brightness(0) invert(1)}
body.nav-solid .breadcrumb{position:fixed;top:64px;left:0;right:0;z-index:199;background:rgba(255,255,255,.12);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.3)}
body.nav-solid .breadcrumb a,body.nav-solid .breadcrumb .bc-sep,body.nav-solid .breadcrumb .bc-current{color:var(--text)}
body.nav-solid .mainnav{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom-color:var(--border)}
body.nav-solid .mainnav .nl,body.nav-solid .mainnav .mega-trigger{color:var(--text2)}
body.nav-solid .mainnav .nl.on,body.nav-solid .mainnav .mega-trigger.on{text-decoration-color:var(--lavande,#757baf)}
body.nav-solid .logo-img{filter:none}

/* ── MEGA MENU ── */
.mega-wrap{display:flex;align-items:stretch}
/* « Notre Offre » (méga-menu + son déclencheur) MASQUÉ du menu le 2026-10-20 à la demande de l'utilisateur. Rien n'est supprimé : pour le rétablir, effacer cette règle. */
.mega-wrap-offre{display:none !important}
.mega-trigger{background:none;border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-size:var(--ty-xs);font-weight:500;display:flex;align-items:center;gap:4px;color:var(--text2);padding:0 13px;height:64px;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.mega-trigger:hover,.mega-wrap:hover .mega-trigger{color:var(--n-900);border-bottom-color:transparent;text-decoration:underline;text-decoration-color:var(--n-200);text-underline-offset:5px;text-decoration-thickness:2px}
.mega-trigger.on{color:var(--n-900);border-bottom-color:transparent;font-weight:500;text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:5px;text-decoration-thickness:2px}
.mega-trigger svg{transition:transform .2s;flex-shrink:0}
.mega-wrap:hover .mega-trigger svg{transform:rotate(180deg)}
.mega-panel{visibility:hidden;opacity:0;pointer-events:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:calc(100vw - 80px);max-width:1140px;z-index:200;background:var(--white);border:1px solid var(--border);border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:0 20px 60px rgba(11,30,53,.13);transition:opacity .18s,visibility .18s;margin-top:-1px}
.mega-wrap:hover .mega-panel,.mega-panel:hover{visibility:visible;opacity:1;pointer-events:auto}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.mega-col{display:flex;flex-direction:column;gap:10px;min-width:0}
/* un bloc par univers : fond teinté de sa couleur (--u = base, --ud = foncé) ; repli pour les pages sans global.css */
.mega-blk{flex:1 1 auto;border-radius:var(--r-lg);padding:14px 16px;background:color-mix(in srgb,var(--u) 9%,#fff)}
.mega-blk-cop{--u:var(--cop,#757baf);--ud:var(--cop-d,#525377)}
.mega-blk-gli{--u:var(--bil,#c9472e);--ud:var(--bil-d,#b54d40)}
.mega-blk-pro{--u:var(--pro,#993d4a);--ud:var(--pro-d,#6a2938)}
.mega-blk-ter{--u:var(--ent,#9a903a);--ud:var(--ent-d,#64613e)}
.mega-pill{display:inline-flex;align-items:center;gap:5px;padding:7px 16px 7px 20px;border-radius:100px;font-size:var(--ty-xs);font-weight:700;margin-bottom:10px;max-width:100%;background:var(--u,var(--lavande,#757baf));color:#fff;letter-spacing:.15px;text-decoration:none;transition:transform .22s cubic-bezier(.22,1,.36,1),filter .2s,padding .22s cubic-bezier(.22,1,.36,1)}
.mega-pill::after{content:'→';font-size:11px;font-weight:500;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .22s cubic-bezier(.22,1,.36,1);display:inline-block}
a.mega-pill{cursor:pointer}
a.mega-pill:hover{transform:translateX(4px);filter:brightness(.92);padding-right:12px}
a.mega-pill:hover::after{opacity:1;transform:translateX(0)}
.mega-item{display:flex;align-items:center;font-size:var(--ty-xs);font-weight:400;color:var(--text);padding:5px 0;transition:color .15s}
/* Soulignement du survol porté par le LIBELLÉ seul (.mi-u, que header.js enveloppe autour du texte) : il s'arrête à la fin du texte et non à la fin de la ligne
   (demande du 2026-10-26) ; un libellé sur 2 lignes est souligné ligne par ligne. La ligne entière reste cliquable / survolable. */
.mega-item .mi-u{background-image:linear-gradient(var(--u,var(--lavande,#757baf)),var(--u,var(--lavande,#757baf)));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:5px;transition:background-size .22s ease}   /* 5px : le trait reste à ~5px sous le texte comme avant, sans toucher la ligne suivante d'un libellé sur 2 lignes */
.mega-item:hover{color:var(--ud,var(--lavande-d,#525377))}
.mega-item:hover .mi-u{background-size:100% 1px}
/* page courante : soulignement de 2px dans la couleur de l'univers (même trait que le survol, en permanent) — classe posée par header.js */
.mega-item.is-current .mi-u,.mega-item.is-current:hover .mi-u{background-size:100% 2px}
.mega-footer{border-top:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--navy,#1c1c36) 4%,#fff);border-radius:0 0 var(--r-xl) var(--r-xl)}
.mega-footer span{font-size:var(--ty-xs);color:var(--text3);font-weight:300}
.mega-all{font-size:var(--ty-xs);font-weight:600;color:var(--navy,#1c1c36);display:inline-flex;align-items:center;gap:4px;position:relative}
.mega-all::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.mega-all:hover{color:var(--n-900)}
.mega-all:hover::after{transform:scaleX(1)}

/* ── SUB DROPDOWNS (Professionnels / Particuliers) ── */
.sub-wrap{display:flex;align-items:stretch}
.sub-trigger svg{transition:transform .2s;flex-shrink:0}
.sub-wrap:hover .sub-trigger svg{transform:rotate(180deg)}
.sub-panel{visibility:hidden;opacity:0;pointer-events:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:calc(100vw - 80px);max-width:1140px;z-index:200;background:var(--white);border:1px solid var(--border);border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:0 20px 60px rgba(11,30,53,.13);transition:opacity .18s,visibility .18s;margin-top:-1px}
.sub-wrap:hover .sub-panel,.sub-panel:hover{visibility:visible;opacity:1;pointer-events:auto}
.sub-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
/* audience tags */
.mi-tag{font-size:var(--ty-xs);font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:0 7px;line-height:22px;border-radius:var(--r-sm);margin-left:auto;flex-shrink:0;white-space:nowrap}
.mi-tag-pro{background:rgba(28,28,54,.08);color:var(--navy,#1c1c36)}
.mi-tag-part{background:transparent;border:1px solid rgba(28,28,54,.25);padding:0 6px;color:var(--navy,#1c1c36)}
.mi-tag+.mi-tag{margin-left:4px}

/* ── BREADCRUMB ── */
.breadcrumb{background:rgba(146,186,214,.25);padding:11px 2.5rem;border-bottom:1px solid var(--border)}
.bc-w{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:var(--ty-xs);font-weight:300;color:var(--text3)}
.bc-w a{color:var(--text3)}.bc-w a:hover{color:var(--text)}
.bc-sep{color:var(--n-200)}
.bc-current{color:var(--univers, var(--lavande,#757baf));font-weight:500}
.bc-w{min-width:0}.bc-w a,.bc-sep{flex-shrink:0}
.bc-current{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}  /* un titre long (articles) ne doit pas passer sur plusieurs lignes : le fil est fixe et masquerait les ancres */

/* ════════════════════════════════════════
   SYSTÈME DE BOUTONS — 5 STYLES
   ════════════════════════════════════════
   .btn-navy    → fond navy        (CTA principal, fonds clairs)
   .btn-teal    → fond teal        (CTA accent)
   .btn-ghost   → transparent blanc (fonds sombres/colorés)
   .btn-white   → blanc plein      (fonds sombres/colorés)
   .btn-outline → transparent navy (secondaire, fonds clairs)
   .btn-outline.btn-outline-light → idem, contour et texte blancs (secondaire sur photo / dégradé)

   Modificateur taille : .btn-lg
   Tokens → modifier :root ci-dessous pour tout changer d'un coup
   ════════════════════════════════════════ */

/* ── Tokens taille (1 seul endroit) ── */
:root{
  --btn-py:11px;--btn-px:22px;--btn-font:var(--ty-lead,18px);--btn-fw:600;--btn-radius:6px;
  --btn-py-lg:14px;--btn-px-lg:32px;--btn-font-lg:var(--ty-lead,18px);--btn-radius-lg:6px;
}

/* ── Base commune ── */
.btn-navy,.btn-teal,.btn-ghost,.btn-white,.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:var(--btn-py) var(--btn-px);
  font-size:var(--btn-font);font-weight:var(--btn-fw);line-height:1;
  border-radius:var(--btn-radius);
  font-family:'Poppins',sans-serif;cursor:pointer;
  text-decoration:none;white-space:nowrap;border:none;
  transition:background .2s,transform .15s ease,box-shadow .15s,border-color .2s,color .3s ease .1s;
}

/* ── Couleurs ── */
.btn-navy{background:var(--navy,#1c1c36);color:#fff}
.btn-navy:hover,.btn-navy:focus-visible{background:var(--navy,#1c1c36);color:var(--navy,#1c1c36);outline:1.5px solid var(--navy,#1c1c36);outline-offset:-1.5px;transform:translateY(-2px);box-shadow:0 6px 20px rgba(11,30,53,.25)}

.btn-teal{background:var(--lavande,#757baf);color:#fff}
.btn-teal:hover,.btn-teal:focus-visible{background:var(--lavande,#757baf);color:var(--lavande-d,#525377);outline:1.5px solid var(--lavande,#757baf);outline-offset:-1.5px;transform:translateY(-2px);box-shadow:0 6px 20px color-mix(in srgb,var(--lavande,#757baf) 35%,transparent)}

.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.8)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:transparent;color:var(--navy,#1c1c36);border-color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1)}

/* ── Survol : un fond blanc balaie le bouton de gauche à droite (plein lavande/univers, marine et contour sur fond sombre).
   Les boutons déjà blancs (.btn-white, bouton principal des héros) font l'inverse (voir plus bas). ── */
.btn-navy,.btn-teal,.btn-ghost{position:relative;overflow:hidden;isolation:isolate}
.btn-navy::before,.btn-teal::before,.btn-ghost::before{content:'';position:absolute;inset:0;z-index:-1;background:#fff;transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.btn-navy:hover::before,.btn-teal:hover::before,.btn-ghost:hover::before,.btn-navy:focus-visible::before,.btn-teal:focus-visible::before,.btn-ghost:focus-visible::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.btn-navy::before,.btn-teal::before,.btn-ghost::before{transition:none}}

/* Bouton principal posé sur un héros (photo, aplat ou dégradé) : fond blanc, texte dans la teinte FONCÉE de l'univers (suit data-univers ; ≥ 4,5:1 sur blanc) — remplace l'ancienne règle .hero-flat. Survol INVERSE : le fond blanc se retire de gauche à droite (le fond du héros réapparaît) et le texte passe en blanc */
.hero:not(.hero-home2):not(.hero-contact) .btn-teal{background:transparent;color:var(--lavande-d,#525377)}
.hero:not(.hero-home2):not(.hero-contact) .btn-teal::before{background:#fff;transform:scaleX(1);transform-origin:right center}
.hero:not(.hero-home2):not(.hero-contact) .btn-teal:hover,.hero:not(.hero-home2):not(.hero-contact) .btn-teal:focus-visible{background:transparent;color:#fff;outline:1.5px solid #fff;outline-offset:-1.5px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.hero:not(.hero-home2):not(.hero-contact) .btn-teal:hover::before,.hero:not(.hero-home2):not(.hero-contact) .btn-teal:focus-visible::before{transform:scaleX(0)}

.btn-white{position:relative;overflow:hidden;isolation:isolate;background:transparent;color:var(--text)}
.btn-white::before{content:'';position:absolute;inset:0;z-index:-1;background:#fff;transform:scaleX(1);transform-origin:right center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
/* survol inverse (boutons déjà blancs, posés sur un fond coloré) : le blanc se retire de gauche à droite, le texte passe en blanc */
.btn-white:hover,.btn-white:focus-visible{background:transparent;color:#fff;outline:1.5px solid #fff;outline-offset:-1.5px;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.btn-white:hover::before,.btn-white:focus-visible::before{transform:scaleX(0)}

.btn-outline{background:transparent;color:var(--text);border:1px solid rgba(28,28,54,.3)}
.btn-outline{position:relative;overflow:hidden;isolation:isolate}
/* survol : la couleur du texte (marine) se déploie de gauche à droite et le texte passe en blanc — même effet que les autres boutons */
.btn-outline::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--navy,#1c1c36);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.btn-outline:hover,.btn-outline:focus-visible{background:transparent;color:#fff;border-color:var(--navy,#1c1c36);transform:translateY(-2px);box-shadow:0 6px 20px rgba(11,30,53,.1)}
.btn-outline:hover::before,.btn-outline:focus-visible::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.btn-outline::before{transition:none}}
/* Variante : contour ET texte BLANCS, fond transparent — bouton secondaire posé sur une photo / un dégradé */
.btn-outline.btn-outline-light{border-color:#fff;color:#fff}
.btn-outline.btn-outline-light::before{background:#fff}
.btn-outline.btn-outline-light:hover,.btn-outline.btn-outline-light:focus-visible{border-color:#fff;background:transparent;color:var(--navy,#1c1c36)}

/* ── Modificateur taille (après les couleurs pour override) ── */
.btn-lg{padding:var(--btn-py-lg) var(--btn-px-lg);font-size:var(--btn-font-lg);border-radius:var(--btn-radius-lg);font-weight:700}

/* ── Rétrocompat .btn (layout de base — utilisé avec .btn-nav / .btn-nav-ghost) ── */
.btn,.btn-nav,.btn-nav-ghost{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Poppins',sans-serif;cursor:pointer;
  white-space:nowrap;text-decoration:none;
}
.btn{padding:9px 20px;border-radius:var(--r-sm);font-size:var(--ty-xs);font-weight:500;transition:background .2s,transform .15s ease,box-shadow .15s}

/* ── Header nav — sans translateY (header sticky) ── */
/* ── Boutons de l'en-tête (« Espace client » + « Obtenir un devis ») : les DEUX transparents, avec liseré, et le balayage de survol de gauche à droite
   (décision du 2026-10-20). Sur le héros : liseré/texte blancs, balayage BLANC, texte marine au survol. En-tête plein (page défilée, fond blanc) :
   liseré/texte de la COULEUR DU TEXTE DE L'EN-TÊTE (--text2, le gris-bleu #4A6785 des liens du menu), balayage de cette même couleur, texte blanc au survol. Les boutons sont masqués en mobile (.nav-cta{display:none}). ── */
body.nav-overlay .mainnav{--nb-ink:#fff;--nb-border:rgba(255,255,255,.8);--nb-fill:#fff;--nb-hover-ink:var(--navy,#1c1c36);--nb-shadow:rgba(0,0,0,.25)}
body.nav-solid .mainnav{--nb-ink:var(--text2,#4A6785);--nb-border:var(--text2,#4A6785);--nb-fill:var(--text2,#4A6785);--nb-hover-ink:#fff;--nb-shadow:rgba(74,103,133,.3)}
.btn-nav,.btn-nav-ghost{
  position:relative;overflow:hidden;isolation:isolate;
  padding:10px 22px;border-radius:var(--btn-radius);background:transparent;
  color:var(--nb-ink,var(--n-900));border:1px solid var(--nb-border,var(--n-900));
  font-size:var(--ty-xs);font-weight:700;line-height:1;
  transition:color .3s ease .1s,transform .15s ease,box-shadow .2s,border-color .2s;
}
.btn-nav::before,.btn-nav-ghost::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--nb-fill,var(--n-900));transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.btn-nav:hover,.btn-nav-ghost:hover,.btn-nav:focus-visible,.btn-nav-ghost:focus-visible{color:var(--nb-hover-ink,#fff);transform:translateY(-2px);box-shadow:0 6px 20px var(--nb-shadow,rgba(11,30,53,.28))}
.btn-nav:hover::before,.btn-nav-ghost:hover::before,.btn-nav:focus-visible::before,.btn-nav-ghost:focus-visible::before{transform:scaleX(1)}
.btn-nav:active,.btn-nav-ghost:active{transform:translateY(0);box-shadow:none}
@media(prefers-reduced-motion:reduce){.btn-nav::before,.btn-nav-ghost::before{transition:none}}

/* Survol des 2 boutons de l'en-tête (Espace client / Obtenir un devis) : même langage que les autres boutons du site
   (cf. .btn-navy:hover) — la carte se soulève + ombre + changement de fond — dans chaque état de l'en-tête. */
.btn-nav:focus-visible,.btn-nav-ghost:focus-visible{outline:2px solid var(--lavande,#757baf);outline-offset:3px}
body.nav-overlay .mainnav .btn-nav:focus-visible,body.nav-overlay .mainnav .btn-nav-ghost:focus-visible{outline-color:#fff}

/* ── TYPOGRAPHIE GLOBALE — charte DA ── */
/* Tokens desktop — 1 seul endroit pour modifier */
:root{
  /* Échelle typographique — 8 paliers, standard 2026 */
  --ty-xs:16px;      /* plancher absolu — labels, badges, meta, copyright, tableaux, champs, nav, boutons */
  --ty-body:16px;    /* corps de texte standard */
  --ty-lead:18px;    /* intro, hero-sub, paragraphes mis en avant */
  /* H4 */ --ty-h4-size:20px;  --ty-h4-weight:600;
  /* H3 */ --ty-h3-size:24px;  --ty-h3-weight:600;
  /* H2 */ --ty-h2-size:40px;  --ty-h2-weight:800;
  /* H1 */ --ty-h1-size:60px;  --ty-h1-weight:800;
  /* alias p */ --ty-p-size:var(--ty-lead); --ty-p-weight:400;
}
/* H1 — titre hero */
.hero h1{font-size:var(--ty-h1-size);font-weight:var(--ty-h1-weight);font-family:'Poppins',sans-serif;color:#fff;line-height:1.1;letter-spacing:-1.5px;margin-bottom:20px}
/* H2 — titre de section */
.stitle{font-size:var(--ty-h2-size);font-weight:var(--ty-h2-weight);font-family:'Poppins',sans-serif;line-height:1.15;letter-spacing:-1px;margin-bottom:14px;color:var(--text)}
/* H3 — sous-titre de contenu */
h3{font-size:var(--ty-h3-size);font-weight:var(--ty-h3-weight);font-family:'Poppins',sans-serif;line-height:1.25;color:var(--text);margin:0 0 10px}
/* H3 — kicker en majuscules (override) */
.kicker{font-size:var(--ty-h3-size);font-weight:var(--ty-h3-weight);font-family:'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;color:var(--univers, var(--lavande, var(--cop)))}
/* H4 */
h4{font-size:var(--ty-h4-size);font-weight:var(--ty-h4-weight);font-family:'Poppins',sans-serif;line-height:1.3;color:var(--text);margin:0 0 8px}
/* H4 — sous-titre classe */
.subtitle{font-size:var(--ty-h4-size);font-weight:var(--ty-h4-weight);font-family:'Poppins',sans-serif;line-height:1.35;margin-bottom:10px;color:var(--text)}
/* p */
.hero-sub{font-size:var(--ty-p-size);font-weight:var(--ty-p-weight);line-height:1.75;color:rgba(255,255,255,.85);margin-bottom:28px}
/* Mobile */
@media(max-width:768px){
  :root{
    --ty-h1-size:36px;
    --ty-h2-size:26px;
    --ty-h3-size:19px;
    --ty-h4-size:18px;
  }
}

/* ═══════════════════════════════════════════════════════════
   HÉROS — 4 VARIANTES
   Géré ici pour toutes les pages du site.
   Seule la prop `background` reste dans le <style> de chaque page.
   ═══════════════════════════════════════════════════════════ */

/* ── Base commune ── */
.hero{position:relative;overflow:hidden}

/* ── 1. Home ── */
.hero-home{padding:140px 2.5rem 120px;background:url('../images/header-home.jpg') center top/cover no-repeat}
.hero-home .hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:5rem;align-items:center;position:relative;z-index:1}
.hero-home .hero-stats,.hero-cible.hero-split .hero-stats{display:flex;flex-direction:column;gap:2rem;align-items:center}
.hero-home h1 em{font-style:normal;color:var(--lavande,#757baf);font-weight:500}

/* ── 2. Pages produit ── */
.hero-produit{padding:220px 2.5rem}
.hero-produit .hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}

/* ── 3. Pages filles (partenaires) ── */
.hero-fille{padding:180px 2.5rem 160px}
.hero-fille .hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1}
.hero-fille h1{color:var(--text);text-transform:uppercase;letter-spacing:-1px}
.hero-fille .hero-sub{color:var(--text);font-size:var(--ty-h2-size);font-weight:300;line-height:1.25;margin-bottom:36px}

/* ── 4. Pages cibles (Pro / Particulier / Courtier) ── */
.hero-cible{padding:160px 0 120px;background:linear-gradient(to right,rgba(255,255,255,.72) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 80%),url('../images/header-home.jpg') center center/cover no-repeat}
.hero-cible .hero-wrap{max-width:calc(1280px + 5rem);margin:0 auto;padding:0 2.5rem}
.hero-cible .hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:5px 14px;font-size:var(--ty-xs);font-weight:500;color:#fff;margin-bottom:20px}
.hero-cible .hero-inner{max-width:680px;position:relative;z-index:1}
.hero-cible.hero-split .hero-inner{max-width:none;display:grid;grid-template-columns:1fr 380px;gap:5rem;align-items:center}
@media(max-width:1280px){.hero-cible.hero-split .hero-inner{grid-template-columns:1fr 260px;gap:3rem}}  /* écrans moyens : sinon le titre est écrasé (colonne de texte < 600px) et le héros déborde de ses 869px */
@media(max-width:900px){
  .hero-cible.hero-split .hero-inner{grid-template-columns:1fr;gap:2.5rem}
  .hero-cible.hero-split .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 24px;align-items:start}
}
@media(max-width:600px){.hero-cible.hero-split .hero-stats{grid-template-columns:1fr 1fr}}

/* ── Chiffres clés hero ── */
.hero-stats>div{opacity:0;animation:stat-in .55s cubic-bezier(.22,1,.36,1) forwards}
.hero-stats>div:nth-child(1){animation-delay:.28s}
.hero-stats>div:nth-child(2){animation-delay:.42s}
.hero-stats>div:nth-child(3){animation-delay:.56s}
.hero-stats>div:nth-child(4){animation-delay:.70s}
@keyframes stat-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-stats>div{animation:none;opacity:1}}
.hs-num{font-size:clamp(2rem,3.5vw,48px);font-weight:800;color:white;line-height:1;text-align:center;margin-bottom:7px}
.hs-lbl{font-size:var(--ty-xs);font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.65);text-align:center}
.hero-home .hs-num,.hero-cible.hero-split .hs-num{font-size:clamp(2.4rem,3.8vw,3.4rem);text-align:center}
.hero-home .hs-lbl{font-size:var(--ty-xs);text-align:center}

/* ── CTA group ── */
/* groupe de boutons du héros : grille à colonnes égales → tous les boutons ont la largeur du plus large (empilés pleine largeur ≤ 768 px, voir plus bas) */
.hero-ctas,.hero-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;width:fit-content;max-width:100%}
.hero-actions{margin-bottom:40px}
/* les boutons d'un groupe de héros ont `overflow:hidden` (balayage de survol) : leur largeur minimale automatique est donc 0 et la grille à colonnes égales les rétrécit en COUPANT le libellé quand la colonne de texte est étroite (« Contacter notre attachée de presse » : 19 px coupés à 1241 px). Le libellé peut passer sur 2 lignes. */
.hero-ctas>*,.hero-actions>*{white-space:normal}

/* ── Responsive héros ── */
/* Tablette (769–1100 px) : la colonne de texte d'un héros produit fait ≈ 370 px (grille 1,2fr / 1fr) ; deux boutons côte à côte y étaient coupés (« Demander un devis » dépassait de 33 px) → empilés, à largeur égale */
@media(min-width:769px) and (max-width:1100px){
  .hero-produit .hero-ctas{grid-auto-flow:row}
}
/* Petit écran : le libellé d'un bouton passe sur 2 lignes au lieu d'être coupé (« Contacter notre attachée de presse » dépassait de 29 px à 375 px) */
@media(max-width:600px){
  .btn-navy,.btn-teal,.btn-ghost,.btn-outline,.btn-white{white-space:normal;text-align:center;justify-content:center;max-width:100%}
}
@media(max-width:768px){
  .hero-home{padding:64px 1.25rem 52px}
  .hero-home .hero-inner{grid-template-columns:1fr;gap:2.5rem}
  .hero-home .hero-stats{grid-template-columns:1fr 1fr;gap:20px 24px}
  .hero-produit{padding:60px 1.25rem;background-size:cover !important;background-position:center center !important}
  .hero-produit .hero-inner{grid-template-columns:1fr;gap:2.5rem}
  .hero-ctas,.hero-actions{grid-auto-flow:row;width:100%}
  .hero-produit .hero-ctas a{width:100%;justify-content:center}
  .hero-fille{padding:80px 1.25rem 70px}
  .hero-cible{padding:80px 0 70px}  /* le gutter vient de .hero-wrap (2.5rem) : sinon il se cumulait avec celui de la section (60px au lieu de 20px à gauche) */
  .hero-cible .hero-wrap{padding:0 1.25rem}
}

/* ── FOOTER ── */
/* Autonome : police/graisse/interligne posées ici pour ne pas hériter du body de la page (certaines pages ont font-weight:300) */
footer{background:#1c1c36;color:rgba(255,255,255,.55);padding:64px 2.5rem 28px;font-family:'Poppins',system-ui,sans-serif;font-weight:400;line-height:1.6}
.footer-w{max-width:1280px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr 1fr;gap:3.5rem;margin-bottom:3rem}
.fb-logo-link{display:inline-block}
.fb-logo-img{height:26px;width:auto;display:block;margin-bottom:2px}
.fb-desc{font-size:var(--ty-xs);line-height:1.75;color:rgba(255,255,255,.55);margin-top:14px;max-width:280px;font-weight:300}
.fb-brand{font-size:var(--ty-xs);line-height:1.6;color:rgba(255,255,255,.55);margin-top:32px;font-weight:300}   /* mention sous les réseaux sociaux (demande du 2026-10-27) ; 32 px d'écart après les icônes (16 px au 1er essai : « ajoute de l'espace ») */
.fc h4{font-size:var(--ty-xs);font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.9);margin-bottom:16px}
.fc a{display:block;font-size:var(--ty-xs);color:rgba(255,255,255,.55);margin-bottom:10px;font-weight:300;background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:color .15s,background-size .22s ease}.fc a:hover{color:#fff;background-size:100% 1px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:var(--ty-xs);color:rgba(255,255,255,.35)}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer-legal a{font-size:var(--ty-xs);color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s}
.footer-legal a:hover{color:#fff;text-decoration:underline}
/* « Gérer mes cookies » : un bouton (il ouvre le panneau de js/cookie-banner.js), habillé exactement comme les liens voisins */
.footer-legal .ck-open{background:none;border:0;padding:0;font-family:inherit;font-size:var(--ty-xs,16px);font-weight:inherit;line-height:inherit;color:rgba(255,255,255,.7);cursor:pointer;transition:color .2s}
.footer-legal .ck-open:hover{color:#fff;text-decoration:underline}
/* tablette : la grille à 5 colonnes déborde sous ~830px → 2 colonnes dès 900px */
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}}

/* ── SEARCH ── */
.search-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:none;cursor:pointer;color:var(--text2);transition:all .15s;flex-shrink:0;margin-left:8px}
.search-btn:hover,.search-btn.active{background:rgba(146,186,214,.25);color:var(--n-900);border-color:var(--border2)}
.search-overlay{display:none;position:absolute;top:100%;left:0;right:0;z-index:200;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 16px 48px rgba(11,30,53,.12)}
.search-overlay.open{display:block;animation:srch-drop .16s ease}
@keyframes srch-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.search-overlay-inner{max-width:calc(1280px + 5rem);margin:0 auto;padding:16px 2.5rem}
.search-field-wrap{display:flex;align-items:center;gap:12px;border:2px solid var(--blue);border-radius:var(--r-md);padding:10px 14px;background:var(--white)}
.search-field-icon{color:var(--text3);flex-shrink:0}
.search-field{flex:1;border:none;outline:none;font-size:var(--ty-body);font-family:'Poppins',sans-serif;color:var(--text);background:transparent}
.search-field::placeholder{color:var(--text3)}
.search-close-btn{border:none;background:none;cursor:pointer;font-size:20px;line-height:1;color:var(--text3);padding:2px 4px;transition:color .12s;flex-shrink:0}
.search-close-btn:hover{color:var(--text)}
.search-results{margin-top:10px}
.search-results:empty{margin:0}  /* vide : ne doit pas ajouter d'espace sous le champ (marge haut = marge bas) */
.srch-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--text);transition:background .12s}
.srch-item:hover{background:rgba(146,186,214,.25)}
.srch-item:hover .srch-arrow{opacity:1;transform:translateX(2px)}
.srch-cat{font-size:var(--ty-xs);font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-sm);flex-shrink:0}
.srch-title{font-size:var(--ty-xs);font-weight:500;flex:1}
.srch-arrow{flex-shrink:0;color:var(--text3);opacity:0;transition:opacity .12s,transform .12s}
.srch-empty{font-size:var(--ty-xs);color:var(--text3);padding:10px;text-align:center}
@media(max-width:768px){
  .search-overlay-inner{padding:12px 1.25rem}
  .search-field{font-size:var(--ty-xs)}
}

/* ── PILL DOT PULSE ── */
.pill-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;animation:pulse-dot 2.5s ease infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(27,95,168,.5)}50%{box-shadow:0 0 0 5px rgba(27,95,168,0)}}

/* ── HAMBURGER (hidden on desktop) ── */
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:none;margin-left:12px;flex-shrink:0}
.ham span{display:block;width:22px;height:2px;background:var(--n-800);border-radius:2px;transition:transform .25s,opacity .2s}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-overlay .ham span{background:#fff}  /* sur le héros (en-tête transparent) : sinon marine sur image sombre, contraste 1,3:1 */

/* ── RESPONSIVE ── */
/* ── EN-TÊTE À BURGER : ≤ 1240 px (tablettes, petits portables, téléphones) ──
   Le menu complet a besoin d'≈ 1240 px (voir le bloc « resserré » plus haut) : en dessous, les liens passent dans un panneau déroulant et les deux boutons (« Espace client »,
   « Obtenir un devis ») y sont repris en bas (.nav-cta-m, ajouté par js/header.js). Le point de bascule est aussi dans js/header.js (NAV_BURGER_MQ) : les garder identiques. */
@media(max-width:1240px){
  .ham{display:flex;margin-left:4px;padding:12px 11px}   /* zone tactile ≈ 44 × 40 px (8 px de marge avant) */
  .search-btn{margin-left:auto;width:40px;height:40px}
  .nav-cta{display:none}

  /* panneau déroulant sous l'en-tête (top:100% = bas de .nav-w : 64 px sur tablette, 56 px sur téléphone) */
  .nav-links{
    display:none;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--white);border-bottom:1px solid var(--border);
    box-shadow:0 8px 24px rgba(11,30,53,.1);
    z-index:300;max-height:calc(100vh - 100px);overflow-y:auto
  }
  .nav-links.open{display:flex}
  .nl{height:auto;padding:13px 20px;border-bottom:1px solid var(--border);justify-content:flex-start;width:100%}
  .nl.on{border-left:3px solid var(--lavande,#757baf);padding-left:17px;border-bottom-color:var(--border)}
  body.nav-overlay .mainnav .nl,body.nav-overlay .mainnav .mega-trigger{color:var(--text2)}
  body.nav-overlay .mainnav .nl:hover,body.nav-overlay .mainnav .mega-trigger:hover,body.nav-overlay .mainnav .nl.on,body.nav-overlay .mainnav .mega-trigger.on{color:var(--n-900) !important;text-decoration:none}
  .mega-col:empty{display:none}
  .nav-sep{display:none}

  /* boutons repris en bas du panneau : le panneau est blanc, donc les couleurs « en-tête plein » (liseré et texte gris-bleu) même sur un héros */
  .nav-cta-m{display:flex;flex-direction:column;gap:10px;width:100%;box-sizing:border-box;padding:16px 20px 20px;--nb-ink:var(--text2,#4A6785);--nb-border:var(--text2,#4A6785);--nb-fill:var(--text2,#4A6785);--nb-hover-ink:#fff;--nb-shadow:rgba(74,103,133,.3)}
  .nav-cta-m .btn{justify-content:center;width:100%;padding:13px 22px}

  /* mega menu — static on mobile */
  .mega-wrap{width:100%;flex-direction:column;align-items:stretch}
  .mega-trigger{width:100%;height:auto;padding:13px 20px;border-bottom:1px solid var(--border);justify-content:space-between}
  .mega-panel{
    position:static;transform:none;
    width:100%;max-width:none;
    border-radius:0;border:none;border-top:1px solid var(--border);
    box-shadow:none;margin-top:0;
    display:none !important;
    visibility:visible;opacity:1;pointer-events:auto
  }
  .mega-wrap:hover .mega-panel,.mega-panel:hover{display:none !important}
  .mega-wrap .mega-panel.mob-open{display:block !important}
  .mega-grid{grid-template-columns:1fr}
  /* pied du menu : le lien « Voir toutes les solutions … » reste visible sur téléphone / tablette (2026-11-03, demande de l'utilisateur ; avant : display:none) ; seule la phrase d'accroche est masquée */
  .mega-footer{border-radius:0;padding:14px 20px;justify-content:flex-start}
  .mega-footer span{display:none}
  .mega-all{padding:4px 0}

  /* sub dropdowns */
  .sub-wrap{width:100%;flex-direction:column;align-items:stretch}
  .sub-panel{position:static;transform:none;left:auto;width:100% !important;border-radius:0;border:none;border-top:1px solid var(--border);box-shadow:none;margin-top:0;display:none !important;visibility:visible;opacity:1;pointer-events:auto}
  .sub-wrap:hover .sub-panel,.sub-panel:hover{display:none !important}
  .sub-wrap .sub-panel.mob-open{display:block !important}
  .sub-cols{grid-template-columns:1fr}
}
/* tablette / petit portable : le panneau est une carte alignée à droite (pas une barre pleine largeur) */
@media(min-width:769px) and (max-width:1240px){
  .nav-links{left:auto;right:2rem;width:min(420px,calc(100% - 4rem));border:1px solid var(--border);border-top:none;border-radius:0 0 14px 14px}
}
/* ── TÉLÉPHONE : ≤ 768 px ── */
@media(max-width:768px){
  /* topbar */
  .topbar .w{padding:6px 1.25rem}
  .aud-tabs{display:none}
  .tdiv{display:none}
  .topbar-r{gap:10px}
  .topbar-r a:not(:first-child){display:none}

  /* main nav */
  .nav-w{padding:0 1.25rem;height:56px}
  .logo-img{height:22px}

  /* breadcrumb */
  .breadcrumb{padding:8px 1.25rem}
  body.nav-solid .breadcrumb{top:57px}  /* le header mobile fait 57px (7px de trou avant) */

  /* footer */
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .fc a{padding:7px 0;margin-bottom:0}   /* lignes de liens de 26 px → 40 px de haut au doigt */
  .footer-legal a,.footer-legal .ck-open{padding:6px 0}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
}