/* ------------------------------------------------------------------
   Polices hebergees sur notre serveur
   ------------------------------------------------------------------
   Elles etaient chargees depuis Google Fonts, ce qui transmettait
   l'adresse IP de chaque visiteur a Google avant tout consentement.
   Servies d'ici, elles ne sortent plus du domaine : le site public ne
   contacte aucun service tiers et ne depose aucun cookie.
   « swap » affiche le texte tout de suite avec une police de secours,
   puis le redessine : la page reste lisible pendant le chargement.
   ------------------------------------------------------------------ */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(polices/montserrat-latin-500.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(polices/montserrat-latin-600.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(polices/montserrat-latin-700.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(polices/barlow-latin-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(polices/barlow-latin-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(polices/barlow-latin-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(polices/ibm-plex-mono-latin-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(polices/ibm-plex-mono-latin-500.woff2) format('woff2')}

/* Cophose — feuille de style du site public.
   Charte : bleu nuit, bleu vif, turquoise. Alternance de bandes claires et nuit,
   pastilles rondes a filet pour les domaines, titres soulignes d'un filet bleu. */

:root{
  --bg:#F4F7FA;
  --surface:#FFFFFF;
  --surface-2:#E9EFF5;
  --ink:#0A1E3C;
  --muted:#5B7089;
  --line:#D7E1EC;
  --accent:#1E8FE1;
  --accent-2:#1FD0C4;
  --accent-ink:#FFFFFF;
  --violet:#7B3FE4;
  --erreur:#C62828;
  /* Bandes nuit : memes valeurs dans les deux themes */
  --navy:#0A1E3C;
  --navy-2:#102E59;
  --navy-ink:#EAF2FB;
  --navy-muted:#9FB6D0;
  --navy-line:#1C3A63;
  --font-display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#061527;
    --surface:#0C2038;
    --surface-2:#112B47;
    --ink:#E6EFF8;
    --muted:#92A9C3;
    --line:#1B3353;
    --accent:#4FB3F0;
    --accent-2:#3EDDD0;
    --accent-ink:#04121F;
    --violet:#A47BF0;
    --erreur:#EF7B6E;
    --navy:#04101F;
    --navy-2:#0A2038;
    --navy-ink:#EAF2FB;
    --navy-muted:#9FB6D0;
    --navy-line:#15304F;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.18;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:10px 16px}

/* width:100% indispensable : dans une grille, margin auto reduit sinon
   le conteneur a la largeur de son contenu au lieu de l'etirer. */
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:24px}
.band{border-top:1px solid var(--line);background:var(--surface)}
.band-inner{padding-block:74px}
.band-navy{background:var(--navy);color:var(--navy-ink);border-top:0}
.band-navy .eyebrow{color:var(--accent-2)}
.band-navy .sub,.band-navy p{color:var(--navy-muted)}
.band-navy h1,.band-navy h2,.band-navy h3{color:var(--navy-ink)}

.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.h-sec{font-size:clamp(27px,3.5vw,37px)}
.h-sec + .filet{display:block;width:52px;height:3px;background:var(--accent);margin-top:16px}
.sub{margin-top:16px;color:var(--muted);font-size:16.5px;max-width:60ch}
.prose{max-width:66ch}
/* margin-top sur tous les paragraphes et non sur « p + p » : un paragraphe
   qui suit un titre ou une liste a besoin du meme air. Le premier est remis
   a zero, pour ne pas decoller le texte du filet de section. */
.prose p{margin-top:16px}
.prose > *:first-child{margin-top:0}
/* Un paragraphe entierement en gras sert de sous-titre : beaucoup de gens
   ecrivent leurs intertitres comme ca plutot qu'avec le bouton dedie. */
/* La marge du bloc interieur fusionne avec celle du paragraphe : c'est la
   plus grande des deux qui s'applique, d'ou ces 32px qui detachent
   l'intertitre de la section precedente. */
.prose p > strong:only-child,
.prose p > b:only-child{display:block;font-family:var(--font-display);font-size:18px;
  font-weight:600;margin-top:32px}
.prose > p:first-child > strong:only-child,
.prose > p:first-child > b:only-child{margin-top:0}
.prose h2{font-size:clamp(22px,2.8vw,28px);margin-top:38px}
.prose h3{font-size:19px;margin-top:28px}
.prose h4{font-size:16.5px;margin-top:22px}
.prose ul{margin-top:16px;display:grid;gap:11px}
.prose ul li{display:flex;gap:12px;align-items:flex-start}
.prose ul li::before{content:'';flex:0 0 auto;width:7px;height:7px;margin-top:10px;background:var(--accent);border-radius:50%}
.prose a{color:var(--accent)}

/* ---------- logo ---------- */
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:0;color:var(--ink)}
.logo svg{flex:0 0 auto;display:block;width:44px;height:44px}
.site-foot .logo{color:var(--navy-ink)}
.logo .sep{width:1px;align-self:stretch;background:var(--line);flex:0 0 auto}
.band-navy .logo .sep,.site-foot .logo .sep{background:var(--navy-line)}
.logo .mot{display:block;font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:.14em;line-height:1}
.logo .desc{
  display:block;font-family:var(--font-body);font-size:8px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);line-height:1.55;margin-top:6px;
}
.site-foot .logo .desc{color:var(--navy-muted)}

/* ---------- en-tete ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.nav{display:flex;flex-wrap:wrap;gap:24px}
.nav a{font-family:var(--font-display);font-size:14px;font-weight:500;text-decoration:none;color:var(--muted);padding-block:5px}
.nav a:hover,.nav a.actif{color:var(--ink)}
.nav a.actif{box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- hero ---------- */
.hero-navy{background:var(--navy);color:var(--navy-ink)}
.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:54px;align-items:center;padding-block:76px 68px}
.hero.simple{grid-template-columns:minmax(0,1fr);padding-block:62px 50px}
.hero h1{font-size:clamp(33px,4.4vw,50px);letter-spacing:-.02em}
.hero .lede{margin-top:22px;font-size:19px;color:var(--muted);max-width:34em}
.hero-navy .eyebrow{color:var(--accent-2)}
.hero-navy .lede{color:var(--navy-muted)}
.hero-navy h1{color:var(--navy-ink)}
.kicker-nav{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-muted);margin-top:30px}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{font-family:var(--font-display);font-size:15px;font-weight:600;padding:14px 24px;border-radius:3px;text-decoration:none;display:inline-block;border:1px solid var(--accent);cursor:pointer}
.btn-solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-ghost{color:var(--accent);background:transparent}
.hero-navy .btn-ghost,.band-navy .btn-ghost{color:var(--accent-2);border-color:var(--accent-2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* ---------- graphique ---------- */
.chart-card{background:var(--surface);border:1px solid var(--line);padding:24px 22px 20px;min-width:0;margin:0;border-radius:3px}
.hero-navy .chart-card{border-color:var(--navy-line)}
.chart-scroll{overflow-x:auto;min-width:0}
svg.curve{display:block;width:100%;height:auto;max-width:100%;min-width:420px}
.chart-card figcaption{font-family:var(--font-mono);font-size:11px;line-height:1.65;color:var(--muted);margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}

/* ---------- blocs ---------- */
.two-col{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:52px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.cell{background:var(--surface);padding:30px 26px;min-width:0}
.cell h3{font-size:19px;margin-bottom:10px}
.cell p{font-size:15.5px;color:var(--muted)}

/* ---------- domaines, pastilles rondes ---------- */
/* 3 colonnes au large : six domaines tombent en 3x2, comme sur la plaquette. */
.domaines{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px 36px;margin-top:46px}
.domaine{min-width:0}
.pastille{
  width:62px;height:62px;border-radius:50%;border:1.5px solid var(--accent-2);
  display:grid;place-items:center;margin-bottom:18px;
}
.band-navy .pastille{border-color:var(--accent-2)}
.pastille svg{width:28px;height:28px;stroke:var(--accent-2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.domaine h3{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;margin-bottom:9px}
.domaine p{font-size:15px}

/* liste a pastilles alignees */
.liste-pastilles{display:grid;gap:18px;margin-top:30px}
.liste-pastilles li{display:flex;gap:16px;align-items:center;min-width:0}
.liste-pastilles .pastille{width:42px;height:42px;margin:0;flex:0 0 auto;border-color:var(--accent)}
.liste-pastilles .pastille svg{width:19px;height:19px;stroke:var(--accent)}
.liste-pastilles span{font-size:16.5px;min-width:0}
.liste-pastilles b{font-weight:600}

/* atouts en ligne */
.atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px;margin-top:34px;text-align:center}
.atout{min-width:0;display:flex;flex-direction:column;align-items:center}
.atout .pastille{width:52px;height:52px;margin-bottom:14px;border-color:var(--accent)}
.atout .pastille svg{width:23px;height:23px;stroke:var(--accent)}
.atout p{font-size:14.5px;color:var(--muted)}
.atout b{display:block;font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--ink);margin-bottom:3px}
.band-navy .atout b{color:var(--navy-ink)}

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px 32px;margin-top:36px}
.spec{border-top:2px solid var(--accent);padding-top:13px;min-width:0}
.spec dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:7px 0 0;font-family:var(--font-display);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:36px;margin-top:40px}
.step{min-width:0}
.step .num{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.13em;display:block;margin-bottom:11px}
.step h3{font-size:18px;margin-bottom:9px}
.step p{font-size:15.5px;color:var(--muted)}

.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.tag{font-family:var(--font-mono);font-size:12px;border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:3px}
.band-navy .tag{border-color:var(--navy-line);background:var(--navy-2);color:var(--navy-ink)}

.feature{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);padding:42px 38px;border-radius:3px}
.feature .price-line{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.feature h1,.feature h2{font-size:clamp(24px,3vw,32px)}
.feature p{margin-top:16px;color:var(--muted);max-width:52ch}
.checks{margin-top:26px;display:grid;gap:13px}
.checks li{display:flex;gap:13px;font-size:16px;align-items:flex-start}
.checks li::before{content:'';flex:0 0 auto;width:8px;height:8px;margin-top:10px;background:var(--accent-2);border-radius:50%}

.upcoming{background:var(--navy);color:var(--navy-ink);padding:40px 36px;border-radius:3px;border-left:4px solid var(--accent-2)}
.upcoming .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.upcoming h2{font-size:clamp(22px,2.8vw,29px)}
.upcoming p{margin-top:15px;color:var(--navy-muted);max-width:60ch}

/* ---------- catalogue ---------- */
/* auto-fill et non auto-fit : une seule fiche garde une largeur de fiche
   au lieu de s'etaler sur toute la bande. */
/* Chaque fiche porte sa propre bordure : avec auto-fill, une grille au fond
   colore laisserait un grand aplat gris dans les colonnes vides. */
.produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:20px;margin-top:36px}
.produit{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:26px 24px;min-width:0;overflow:hidden}
.produit h3{font-size:18px}
.produit .fab{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.produit p{font-size:15px;color:var(--muted);margin-top:12px}
.produit .fiche{display:flex;flex-wrap:wrap;gap:16px;margin-top:17px;padding-top:15px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:12px;color:var(--muted)}

.realisations{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:28px;margin-top:36px}
.realisation{min-width:0;border-top:2px solid var(--accent);padding-top:15px}
.realisation .secteur{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.realisation h3{font-size:17px;margin-top:8px}
.realisation p{font-size:14.5px;color:var(--muted);margin-top:7px}

/* ---------- formulaire ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);padding:36px 32px;min-width:0;border-radius:3px}
.hero-navy .form-card{border-color:var(--navy-line)}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.champ{min-width:0;display:flex;flex-direction:column;gap:7px}
.champ.pleine{grid-column:1 / -1}
.champ label{font-family:var(--font-display);font-size:14px;font-weight:600}
.champ .aide{font-size:13.5px;color:var(--muted);font-family:var(--font-body);font-weight:400}
.champ input,.champ select,.champ textarea{
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:12px 13px;width:100%;
}
.champ textarea{resize:vertical;min-height:130px}
.champ .erreur{color:var(--erreur);font-size:13.5px;font-family:var(--font-display);font-weight:500}
.champ input[aria-invalid="true"],.champ select[aria-invalid="true"],.champ textarea[aria-invalid="true"]{border-color:var(--erreur)}
.consentement{display:flex;gap:12px;align-items:flex-start;margin-top:26px}
.consentement input{width:18px;height:18px;margin-top:3px;flex:0 0 auto;accent-color:var(--accent)}
.consentement label{font-size:14.5px;color:var(--muted)}
.consentement a{color:var(--accent)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alerte{border:1px solid var(--erreur);background:var(--surface);padding:16px 18px;margin-bottom:26px;font-size:15px;border-radius:3px}
.alerte p{color:var(--erreur);font-family:var(--font-display);font-weight:600}

.confirmation{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent-2);padding:44px 38px;border-radius:3px}
.confirmation .ref{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;color:var(--accent);margin-bottom:16px}
.confirmation h1{font-size:clamp(26px,3.4vw,34px)}
.confirmation p{margin-top:16px;color:var(--muted);max-width:56ch}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-top:32px}
.contact-grid dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact-grid dd{margin:0;font-size:17px;user-select:all}
.hero-navy .contact-grid dt{color:var(--navy-muted)}
.hero-navy .contact-grid dd{color:var(--navy-ink)}

/* ---------- pied ---------- */
.site-foot{background:var(--navy);color:var(--navy-ink);margin-top:0}
.foot-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:36px;padding-block:50px 36px}
.site-foot .logo .mot{color:var(--navy-ink)}
.site-foot .logo .desc{color:var(--navy-muted)}
.foot-title{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:12px}
.foot-note{font-size:14.5px;color:var(--navy-muted);line-height:1.8}
.foot-note a{text-decoration:none}
.foot-note a:hover{color:var(--navy-ink)}
.foot-base{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding-block:20px 30px;border-top:1px solid var(--navy-line);font-family:var(--font-mono);font-size:11.5px;color:var(--navy-muted)}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:52px 46px}
  .two-col{grid-template-columns:minmax(0,1fr);gap:28px}
  .band-inner{padding-block:56px}
  .head-row{flex-wrap:wrap;gap:10px}
  .nav{min-width:0;width:100%;gap:15px;row-gap:6px}
  .nav a{font-size:13px}
  .logo .desc{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------------
   Conventions de nommage employees par les gabarits de pages.
   Memes valeurs que la charte ci-dessus, autres noms de classes.
   ------------------------------------------------------------------ */

/* Filet de securite : toutes les icones partagent ce viewBox. Sans taille,
   un SVG occupe 100 % de son conteneur et devient une forme geante. */
svg[viewBox="0 0 24 24"]{width:24px;height:24px}

.band-clair,.band-gris,.band-nuit{padding-block:68px}
.band-clair{background:var(--surface)}
/* Teinte bleutée dérivée de l'accent : alternance nette avec le blanc,
   adaptée automatiquement à chaque thème. Repli sur --surface-2 si besoin. */
.band-gris{background:var(--surface-2);background:color-mix(in srgb, var(--accent) 8%, var(--surface))}
.band-nuit{background:var(--navy);color:var(--navy-ink);border-top:0}
.band-nuit h1,.band-nuit h2,.band-nuit h3{color:var(--navy-ink)}
.band-nuit p,.band-nuit .sub,.band-nuit .txt p{color:var(--navy-muted)}
.band-nuit .kicker{color:var(--accent-2)}
.band-nuit .tag{border-color:var(--navy-line);background:var(--navy-2);color:var(--navy-ink)}
.band-nuit .prose a{color:var(--accent-2)}

.kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px}

.btn-plein{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-vide{color:var(--accent);background:transparent;border-color:var(--accent)}
.band-nuit .btn-vide,.upcoming .btn-vide{color:var(--accent-2);border-color:var(--accent-2)}

/* Une seule colonne par defaut ; deux seulement s'il y a un second bloc. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
@media (min-width:861px){
  .hero-grid:has(> * + *){grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
}

.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px 34px}
.point{display:flex;gap:16px;align-items:flex-start;min-width:0}
.ico{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--accent);color:var(--accent);
  display:grid;place-items:center;
}
.ico svg{width:21px;height:21px;stroke:currentColor}
.band-nuit .ico{border-color:var(--accent-2);color:var(--accent-2)}
.txt{min-width:0}
.txt h3{font-size:16.5px;margin-bottom:5px}
.txt p{font-size:15px;color:var(--muted)}

@media (max-width:860px){
  .band-clair,.band-gris,.band-nuit{padding-block:52px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
}

/* ------------------------------------------------------------------
   Photos et textes longs des fiches, saisis dans l'espace client
   ------------------------------------------------------------------ */

/* Les fiches deviennent des colonnes : la photo en haut, le texte dessous,
   et la ligne de caracteristiques reste collee en bas quelle que soit la
   longueur du texte voisin. */
.produit{display:flex;flex-direction:column}
.produit .photo,.realisation .photo{
  display:block;width:100%;aspect-ratio:4/3;max-height:230px;object-fit:cover;
  border-radius:3px;background:var(--surface-2);margin-bottom:16px;
}
.produit .photo{margin:-26px -24px 18px;width:calc(100% + 48px);max-width:none;border-radius:0}
.realisation .photo{border-radius:3px}
.produit .fiche{margin-top:auto}

.produit .texte,.realisation .texte{font-size:15px;color:var(--muted);margin-top:12px}
.produit .texte > *:first-child,.realisation .texte > *:first-child{margin-top:0}
.produit .texte p,.realisation .texte p{margin:0 0 11px}
.produit .texte p:last-child,.realisation .texte p:last-child{margin-bottom:0}
.produit .texte h3,.realisation .texte h3,
.produit .texte h4,.realisation .texte h4{
  font-family:var(--font-display);font-size:15.5px;font-weight:600;
  color:var(--ink);margin:18px 0 7px;
}
.produit .texte ul,.realisation .texte ul,
.produit .texte ol,.realisation .texte ol{margin:11px 0;display:grid;gap:7px}
.produit .texte li,.realisation .texte li{display:flex;gap:10px;align-items:flex-start}
.produit .texte ul li::before,.realisation .texte ul li::before{
  content:'';flex:0 0 auto;width:5px;height:5px;margin-top:9px;
  background:var(--accent-2);border-radius:50%;
}
.produit .texte ol,.realisation .texte ol{counter-reset:p}
.produit .texte ol li,.realisation .texte ol li{counter-increment:p}
.produit .texte ol li::before,.realisation .texte ol li::before{
  content:counter(p) '.';flex:0 0 auto;font-family:var(--font-mono);
  font-size:12px;color:var(--accent);margin-top:2px;
}
.produit .texte a,.realisation .texte a{color:var(--accent)}

@media (max-width:640px){
  .produit .photo{margin:-20px -22px 16px;width:calc(100% + 44px)}
}

/* ------------------------------------------------------------------
   Fiches produits : page par produit, galerie, tableau technique
   ------------------------------------------------------------------ */

/* Classe utilitaire : lisible par un lecteur d'ecran, invisible a l'oeil.
   Les legendes de tableau en ont besoin. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- fil d'Ariane ---------- */
.fil{border-top:1px solid var(--line);background:var(--surface);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em}
.fil .wrap{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding-block:14px;color:var(--muted)}
.fil a{color:var(--accent);text-decoration:none}
.fil a:hover{text-decoration:underline}
.fil [aria-current]{color:var(--muted)}

/* ---------- en-tete de fiche ---------- */
/* Le filet separe l'en-tete de la presentation : les deux bandes partagent
   le meme fond, sans lui elles se confondent. */
.fiche-tete{padding-block:56px 64px;background:var(--bg);border-bottom:1px solid var(--line)}
.fiche-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
@media (min-width:881px){
  .fiche-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:52px}
}

.fiche-visuel{min-width:0}
.fiche-visuel .grand{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;
}
.sans-visuel{
  display:grid;place-items:center;aspect-ratio:4/3;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;color:var(--accent);
}
.sans-visuel svg{width:56px;height:56px}

.vignettes{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.vue{
  width:74px;height:74px;padding:0;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;line-height:0;
}
.vue img{width:100%;height:100%;object-fit:cover}
.vue.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

.fiche-intro{min-width:0}
.fiche-intro h1{font-size:clamp(28px,4vw,42px);margin-top:4px}
.fiche-intro .lede{margin-top:18px;font-size:18px;color:var(--muted);max-width:46em}
.fiche-intro .fabricant{margin-top:14px;font-size:14.5px;color:var(--muted)}
.fiche-intro .fabricant strong{color:var(--ink);font-weight:600}

.points-forts{margin-top:26px;display:grid;gap:12px}
.points-forts li{display:flex;gap:13px;align-items:flex-start;font-size:16px}
.points-forts li::before{
  content:'';flex:0 0 auto;width:8px;height:8px;margin-top:9px;
  background:var(--accent-2);border-radius:50%;
}

/* ---------- tableau technique ---------- */
/* Deux colonnes sur grand ecran, empilees sur telephone : un tableau qui
   deborde lateralement est illisible, et le defilement horizontal casse
   la lecture de la page entiere. */
.table-technique{margin-top:30px;overflow-x:auto}
.table-technique table{width:100%;border-collapse:collapse;font-size:15.5px}
.table-technique tr{border-bottom:1px solid var(--line)}
.table-technique tr:last-child{border-bottom:0}
.table-technique th{
  text-align:left;font-family:var(--font-body);font-weight:500;
  color:var(--muted);padding:14px 24px 14px 0;width:38%;vertical-align:top;
}
.table-technique td{padding:14px 0;color:var(--ink);vertical-align:top}
.band-clair .table-technique tr,.band-gris .table-technique tr{border-color:var(--line)}
.band-clair .table-technique th,.band-gris .table-technique th{color:var(--muted)}
.band-clair .table-technique td,.band-gris .table-technique td{color:var(--ink)}

@media (max-width:620px){
  .table-technique th,.table-technique td{display:block;width:auto;padding:0}
  .table-technique th{padding-top:14px;font-family:var(--font-mono);font-size:11.5px;
    letter-spacing:.08em;text-transform:uppercase}
  .table-technique td{padding:4px 0 14px}
}

/* ---------- documents a telecharger ---------- */
.documents{margin-top:30px;display:grid;gap:12px;max-width:640px}
.documents a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:3px;padding:16px 20px;text-decoration:none;
}
.documents a:hover{border-color:var(--accent)}
.documents .ico-doc{color:var(--accent);line-height:0}
.documents .doc-nom{font-weight:500;min-width:0;overflow-wrap:anywhere}
.documents .doc-type{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--accent);
  border:1px solid var(--accent);border-radius:2px;padding:3px 6px;
}

/* ---------- vignettes de catalogue cliquables ---------- */
/* La photo deborde jusqu'aux bords de la fiche : le lien doit porter cette
   marge negative, sinon l'image reste dans la zone de texte. */
.produit .photo-lien{display:block;margin:-26px -24px 18px;line-height:0}
.produit .photo-lien .photo{margin:0;width:100%;border-radius:0}
.produit h3 a{text-decoration:none}
.produit h3 a:hover{color:var(--accent)}
.produit .chapeau-fiche{font-size:15px;color:var(--muted);margin-top:12px}
/* margin-top:auto colle la ligne en bas de la fiche, quelle que soit la
   longueur du texte : les vignettes d'une meme rangee restent alignees. */
.produit .voir{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:12px}
.produit .fiche + .voir{margin-top:12px;padding-top:0;border-top:0}
.produit .voir a{color:var(--accent);text-decoration:none}
.produit .voir a:hover{text-decoration:underline}

@media (max-width:640px){
  .produit .photo-lien{margin:-20px -22px 16px}
}

/* ---------- page introuvable ---------- */
.plan-404{margin-top:40px}
.plan-404 h3{font-size:16px}
.plan-404 ul{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px 26px}
.plan-404 a{color:var(--accent);font-size:15px}

/* ------------------------------------------------------------------
   Attribution des marques distribuees
   ------------------------------------------------------------------ */

.foot-marques{
  padding-block:18px 0;border-top:1px solid var(--navy-line);
  font-size:13.5px;color:var(--navy-muted);
}
.foot-marques span{display:block;max-width:74ch}
.foot-marques a{color:var(--accent-2)}
.foot-base sup{font-size:.7em;vertical-align:super;line-height:0}

/* fiches des marques, sur la page Distribution */
.marques{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;margin-top:38px}
.marque-fiche{
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  border-top:3px solid var(--accent);padding:28px 26px;min-width:0;
  display:flex;flex-direction:column;
}
.marque-nom{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink)}
.marque-nom sup{font-size:.55em;vertical-align:super;line-height:0;color:var(--muted)}
.marque-pays{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-top:7px}
.marque-fiche .texte{margin-top:16px;font-size:15px;color:var(--muted)}
.marque-fiche .texte p + p{margin-top:12px}
.marque-fiche .fiche{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:auto;padding-top:17px;
  border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
}
.marque-fiche .fiche span{white-space:nowrap}

/* Une seule marque distribuee : la fiche ne doit pas s'etaler sur toute la largeur. */
.marque-fiche:only-child{max-width:620px}

/* Marque citee sans lien de distribution : mention simple, pas de fiche. */
.autre-marque{
  margin-top:30px;font-size:15px;color:var(--muted);max-width:76ch;line-height:1.62;
}
.autre-marque strong{color:var(--ink);font-weight:600}

.mention-marques{
  margin-top:28px;font-size:13.5px;color:var(--muted);max-width:76ch;
  padding-left:14px;border-left:2px solid var(--line);
}

/* Page contact : colonnes alignées en haut (plutôt que centrées verticalement). */
.hero.simple .hero-grid{align-items:start}

/* ==========================================================================
   REFONTE CLAIRE — inspiration audiologie (Amplifon / VivaSon)
   Site clair et aéré, cartes arrondies à ombre douce, boutons pilule.
   Le bleu nuit ne sert plus que d'accent (pied de page, cartes « upcoming »).
   Ce bloc est en fin de fichier : il surcharge les règles précédentes.
   ========================================================================== */
:root{
  --r-card:18px; --r-btn:999px;
  --ombre:0 12px 32px rgba(10,30,60,.09), 0 3px 10px rgba(10,30,60,.05);
  --bleu-doux:#EEF4FC; --bleu-doux-2:#E4EEFA;
}
@media (prefers-color-scheme:dark){ :root{
  --bleu-doux:#0E2741; --bleu-doux-2:#0C2036;
  --ombre:0 12px 32px rgba(0,0,0,.42), 0 3px 10px rgba(0,0,0,.3);
}}

/* --- Les anciennes bandes sombres deviennent claires ---
   Fond basé sur --surface-2 (et non --bleu-doux) : --surface-2 est toujours
   redéfini en même temps que --ink (mode clair/sombre du système, thème admin,
   fond personnalisé), donc le contraste fond/texte ne peut jamais se désynchroniser. */
.hero-navy,.band-navy,.band-nuit{ background:var(--surface-2); color:var(--ink); border-top:1px solid var(--line); }
.hero-navy h1,.hero-navy h2,.hero-navy h3,
.band-navy h1,.band-navy h2,.band-navy h3,
.band-nuit h1,.band-nuit h2,.band-nuit h3{ color:var(--ink); }
.hero-navy .lede,.hero-navy p,
.band-navy p,.band-navy .sub,
.band-nuit p,.band-nuit .sub,.band-nuit .txt p{ color:var(--muted); }
.hero-navy .eyebrow,.band-navy .eyebrow,.band-nuit .eyebrow,.band-nuit .kicker,.hero-navy .kicker-nav{ color:var(--accent); }
.hero-navy .btn-ghost,.band-navy .btn-ghost,.band-nuit .btn-vide{ color:var(--accent); border-color:var(--accent); background:transparent; }
.band-navy .tag,.band-nuit .tag{ border-color:var(--line); background:var(--surface); color:var(--ink); }
.band-navy .pastille,.band-nuit .ico{ border-color:var(--accent); color:var(--accent); }
.band-navy .atout b,.band-navy .atout p,.band-nuit .atout b{ color:var(--ink); }
.hero-navy .chart-card{ border-color:transparent; }
.hero-navy .logo .sep,.band-navy .logo .sep{ background:var(--line); }
.band-navy .prose a,.band-nuit .prose a{ color:var(--accent); }

/* --- Alternance douce blanc / bleuté --- */
.band,.band-clair{ background:var(--surface); }
.band-gris{ background:var(--surface-2); }

/* --- Arrondis + ombres douces (fini les angles vifs et les bordures dures) --- */
.chart-card,.feature,.form-card,.produit,.confirmation,.cell,.grid-3,.alerte,.realisation,.upcoming{ border-radius:var(--r-card); }
.chart-card,.form-card,.produit,.confirmation{ box-shadow:var(--ombre); border:1px solid transparent; }
.feature{ box-shadow:var(--ombre); }
.realisation{ box-shadow:var(--ombre); border:1px solid transparent; overflow:hidden; }

/* --- Boutons « pilule » --- */
.btn{ border-radius:var(--r-btn); padding:13px 28px; font-weight:600; }
.btn-solid,.btn-plein{ box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 34%, transparent); }
.btn-solid:hover,.btn-plein:hover{ filter:brightness(1.05); }

/* --- Plus d'air + filet à l'accent --- */
.band-inner{ padding-block:86px; }
.filet,.h-sec + .filet{ background:var(--accent); height:3px; }
@media (max-width:720px){ .band-inner{ padding-block:56px; } }

/* --- Accueil : carte « engagements » du hero + cartes solutions --- */
.hero-trust{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--ombre);padding:30px 32px}
.hero-trust ul{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none}
.hero-trust li{display:flex;gap:16px;align-items:center}
.hero-trust li > span:last-child{display:flex;flex-direction:column;gap:2px;font-size:14.5px;color:var(--muted);line-height:1.4}
.hero-trust li b{color:var(--ink);font-family:var(--font-display);font-size:16px}
.hero-trust .pastille{flex:0 0 auto;color:var(--accent);border-color:var(--accent)}

.solutions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px;margin-top:40px}
.solution-card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border-radius:var(--r-card);
  padding:30px 28px;box-shadow:var(--ombre);text-decoration:none;color:var(--ink);border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease}
.solution-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(10,30,60,.14)}
.solution-card .pastille{color:var(--accent);border-color:var(--accent)}
.solution-card h3{font-size:19px;margin:4px 0 0}
.solution-card p{color:var(--muted);font-size:15px;line-height:1.5;flex:1;margin:0}
.solution-card .fleche{color:var(--accent);font-weight:600;font-size:14px;margin-top:4px}

/* ==================================================================
   CARROUSEL PHOTO (page d'accueil — défilement continu)
   ================================================================== */
.cr-section .band-inner{text-align:center}
.cr{
  overflow:hidden;
  margin-top:36px;
  /* dégradé aux bords pour une entrée/sortie douce */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.cr-piste{
  display:flex;
  width:max-content;
  animation:cr-defile calc(var(--cr-n,6) * 5.5s) linear infinite;
  will-change:transform;
}
.cr:hover .cr-piste{animation-play-state:paused}
.cr-slide{
  flex:0 0 auto;
  width:360px;
  height:240px;
  margin-right:18px;
  border-radius:var(--r-card,18px);
  overflow:hidden;
  box-shadow:var(--ombre,0 10px 30px rgba(16,42,67,.10));
  background:var(--surface-2,#eef2f6);
}
.cr-slide img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes cr-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:760px){
  .cr-slide{width:264px;height:176px;margin-right:14px}
}
@media (prefers-reduced-motion:reduce){
  .cr{overflow-x:auto}
  .cr-piste{animation:none}
}

/* ==================================================================
   HERO CARROUSEL (grand bandeau photo en haut de l'accueil)
   ================================================================== */
.cr-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:clamp(440px,60vh,600px);
  background:var(--navy);
  border-bottom:1px solid var(--navy-line);
}
.cr-hero-uni{
  background:
    radial-gradient(120% 140% at 85% 0%, color-mix(in srgb,var(--accent) 22%, var(--navy)) 0%, var(--navy) 60%);
}
.cr-hero-piste{
  position:absolute; inset:0;
  display:flex; width:max-content;
  animation:cr-defile calc(var(--cr-n,6) * 7s) linear infinite;
  z-index:-2; will-change:transform;
}
.cr-hero:hover .cr-hero-piste{animation-play-state:paused}
.crh-slide{
  flex:0 0 auto;
  width:clamp(340px,32vw,480px);
  height:100%;
  overflow:hidden;
}
.crh-slide img{width:100%;height:100%;object-fit:cover;display:block}
.cr-hero-voile{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(6,17,32,.93) 0%, rgba(6,17,32,.80) 44%, rgba(6,17,32,.42) 100%),
    linear-gradient(0deg, rgba(6,17,32,.70) 0%, rgba(6,17,32,0) 55%);
}
.cr-hero-contenu{
  position:relative;
  color:#fff;
  max-width:640px;
  padding-block:52px;
}
.cr-hero-contenu .eyebrow{color:#8CC8F6}
.cr-hero-contenu h1{
  color:#fff;
  font-size:clamp(34px,4.7vw,56px);
  line-height:1.04; letter-spacing:-.02em;
}
.cr-hero-contenu .lede{
  color:#D9E7F6;
  margin-top:20px; font-size:19px; max-width:40ch;
  text-shadow:0 1px 2px rgba(6,17,32,.35);
}
.cr-hero .btn-solid{box-shadow:0 10px 24px rgba(6,17,32,.45)}
.cr-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.cr-hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cr-hero .kicker-nav{color:rgba(224,236,249,.72);margin-top:28px}
@media (max-width:760px){
  .cr-hero{min-height:clamp(380px,76vh,520px)}
  .crh-slide{width:72vw}
  .cr-hero-voile{background:linear-gradient(0deg, rgba(6,17,32,.92) 10%, rgba(6,17,32,.55) 60%, rgba(6,17,32,.5) 100%)}
}
@media (prefers-reduced-motion:reduce){.cr-hero-piste{animation:none}}

/* --- Bande « engagements » (sous le hero) --- */
.band-inner-serre{padding-block:46px}
.engagements{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
  margin:0; padding:0; list-style:none;
}
.engagements li{display:flex; flex-direction:column; gap:11px}
.engagements li > span:last-child{
  display:flex; flex-direction:column; gap:3px;
  color:var(--muted); font-size:14.5px; line-height:1.45;
}
.engagements li b{color:var(--ink); font-family:var(--font-display); font-size:16.5px}
.engagements .pastille{
  width:52px; height:52px; margin:0 0 2px;
  color:var(--accent); border-color:var(--accent);
}
.engagements .pastille svg{width:24px; height:24px; stroke:var(--accent)}
@media (max-width:860px){ .engagements{grid-template-columns:repeat(2,1fr); gap:26px 22px} }
@media (max-width:480px){ .engagements{grid-template-columns:1fr; gap:20px} }

/* ==================================================================
   RYTHME VERTICAL UNIFIÉ — fin des doubles paddings (blancs vides)
   Toutes les bandes prennent leur marge verticale au niveau de la
   SECTION ; .band-inner ne rajoute plus de marge verticale.
   ================================================================== */
.band, .band-clair, .band-gris, .band-nuit, .band-navy { padding-block: 60px; }
.band-inner { padding-block: 0; }
@media (max-width:720px){
  .band, .band-clair, .band-gris, .band-nuit, .band-navy { padding-block: 44px; }
}

/* --- Photo d'illustration dans les sections "Gamme" --- */
.gamme{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:stretch; }
@media (max-width:860px){ .gamme{ grid-template-columns:minmax(0,1fr); } }
.gamme-txt .actions{ margin-top:26px; }
.gamme-media{ display:flex; }
.gamme-media img{
  width:100%; height:100%; min-height:300px;
  object-fit:cover; display:block;
  border-radius:var(--r-card,18px);
  box-shadow:var(--ombre,0 10px 30px rgba(16,42,67,.12));
}
@media (max-width:860px){
  .gamme-media img{ min-height:220px; }
}

/* ==================================================================
   BOUTONS — le texte ne doit jamais prendre la couleur des liens
   (.prose a, .texte a… repeignaient le texte des boutons pleins)
   ================================================================== */
.btn.btn-solid, .btn.btn-plein { color:var(--accent-ink); }
.btn.btn-ghost, .btn.btn-vide  { color:var(--accent); }
.cr-hero .btn.btn-ghost        { color:#fff; }

/* ==================================================================
   ACCÈS RAPIDE — volet fixe (contact + espace pro), toutes les pages
   ================================================================== */
.acces-rapide{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:3px;
}
.ar-tab{
  display:flex; align-items:center; text-decoration:none; color:#fff;
  background:var(--navy); border-radius:10px 0 0 10px; overflow:hidden;
  box-shadow:0 6px 18px rgba(10,30,60,.28);
  transition:background .15s ease;
}
.ar-tab .ar-ico{ width:50px; height:50px; display:grid; place-items:center; flex:0 0 auto; }
.ar-tab .ar-ico svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ar-tab .ar-lib{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--font-display); font-size:14px; font-weight:600;
  transition:max-width .28s ease, padding .28s ease; padding-right:0;
}
.ar-tab:hover .ar-lib, .ar-tab:focus-visible .ar-lib{ max-width:180px; padding-right:20px; }
.ar-tel{ background:var(--accent); }
.ar-tel:hover{ filter:brightness(1.06); }
.ar-mail:hover{ background:var(--navy-2); }
.ar-pro{ background:var(--accent-2); }
.ar-pro:hover{ filter:brightness(1.06); }
@media (max-width:700px){
  .acces-rapide{ right:0; left:0; top:auto; bottom:0; transform:none;
    flex-direction:row; width:100%; gap:0; }
  .ar-tab{ flex:1 1 0; flex-direction:column; justify-content:center; gap:3px;
    border-radius:0; padding:8px 4px; box-shadow:0 -4px 14px rgba(10,30,60,.22); }
  .ar-tab .ar-ico{ width:auto; height:auto; }
  .ar-tab .ar-lib{ max-width:none; padding:0 !important; font-size:11px; }
  body{ padding-bottom:60px; }
}

/* ==================================================================
   BANDES ÉCLAIRCIES — les variables de texte "navy" suivent le thème
   clair, pour que TOUT composant hérité (tableaux, grille contact…)
   reste lisible sur le nouveau fond clair. Le pied de page garde ses
   vraies couleurs (il n'est pas dans ces bandes).
   ================================================================== */
.hero-navy, .band-navy, .band-nuit{
  --navy-ink: var(--ink);
  --navy-muted: var(--muted);
  --navy-line: var(--line);
}
/* Exception : carte foncée autonome, garde un texte clair */
.hero-navy .upcoming, .band-navy .upcoming, .band-nuit .upcoming{
  --navy-ink:#EAF2FB; --navy-muted:#9FB6D0; --navy-line:#1C3A63;
}