/* ============================================================
   ANKER FRANCE — refonte 2026 (A2 PRO)
   Direction artistique : acier sombre + bleu Anker, typo carrée,
   bento asymétrique, double-bezel, animations en cascade.
   Tout est lisible SANS JavaScript : .js n'ajoute que la couche motion.
   ============================================================ */

@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/ClashDisplay-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('/assets/fonts/ClashDisplay-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/GeneralSans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/GeneralSans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/GeneralSans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
    --noir: #0f1c31;      /* bleu nuit, plus de quasi-noir */
    --acier: #14243d;
    --acier-2: #1a2e4d;
    --papier: #f2f5f9;      /* fond de page */
    --papier-2: #ffffff;    /* cartes et plans posés dessus */
    --papier-3: #e6ecf4;    /* bandes alternées : le rythme sans passer au sombre */
    --encre: #10141b;
    --encre-2: #57606f;
    --brume: #a7b1c2;

    /* Accent : bleu Ankerslot ramené de 100 % à ~78 % de saturation.
       Un accent totalement saturé « crie » ; désaturé, il tient mieux.
       Les composantes RVB servent à toutes les transparences : une seule
       source de vérité, plus de bleu codé en dur dans la feuille. */
    --bleu: #3c97e7;            /* 6,1:1 sur le bleu nuit  */
    --bleu-rvb: 60, 151, 231;
    --bleu-fonce: #14639f;      /* 6,4:1 sur le papier     */
    --bleu-fonce-rvb: 20, 99, 159;
    --alerte: #b9453c;

    /* Filets teintés plutôt que blanc/noir purs : ils se voient sans trancher. */
    --filet-clair: rgba(150, 190, 235, 0.13);
    --filet-sombre: rgba(20, 45, 80, 0.11);

    --ressort: cubic-bezier(0.32, 0.72, 0, 1);

    /* Rayons gradués par échelle du bloc, au lieu d'un rayon unique partout. */
    --r-coque: 1.45rem;
    --r-core: 1rem;
    --r-petit: 0.6rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: 'General Sans', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.page-sombre body { background: var(--noir); color: #edf1f7; }
.page-claire body { background: var(--papier); color: var(--encre); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, .display { font-family: 'Clash Display', 'General Sans', sans-serif; font-weight: 600; line-height: 1.06; letter-spacing: -0.03em; }
h3 { font-weight: 500; line-height: 1.25; letter-spacing: -0.018em; }

.conteneur { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
/* Rythme resserré (09/08/2026) : à 8,5 rem de padding haut ET bas, deux sections
   voisines laissaient ~270 px de vide mort — invisible sur fond sombre, criant
   sur papier. Le silence reste, il est simplement mesuré. */
section { padding-block: clamp(3.4rem, 6vw, 5.6rem); }

.acces-contenu { position: absolute; left: -200vw; top: 0; background: var(--bleu); color: #fff; padding: 0.7rem 1.2rem; z-index: 90; border-radius: 0 0 0.8rem 0; }
.acces-contenu:focus { left: 0; }

/* ---------- Kicker (surtitre nu : pas de capsule, pas de puce) ---------- */
.sourcil {
    display: block;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
    margin-bottom: 1.3rem;
}
.page-sombre .sourcil, .bande-sombre .sourcil { color: var(--bleu); }
.page-claire .sourcil { color: var(--bleu-fonce); }

/* ---------- Boutons (rectangles nets, flèche nue) ----------
   Fond plat et ombre teintée du FOND (bleu nuit), jamais de l'accent :
   un halo coloré sous un bouton est la signature d'un template.
   --btn-x/--btn-y portent l'attraction magnétique (posées en JS) et se
   composent avec l'enfoncement au clic. */
.btn {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-weight: 600; font-size: 0.95rem; text-decoration: none;
    border-radius: 10px; padding: 0.85rem 1.35rem;
    transform: translate(var(--btn-x, 0px), var(--btn-y, 0px));
    transition: transform 0.45s var(--ressort), background 0.5s var(--ressort), box-shadow 0.5s var(--ressort);
    border: 0; cursor: pointer;
}
.btn:active { transform: translate(var(--btn-x, 0px), var(--btn-y, 0px)) scale(0.975); }
.btn-pastille {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    transition: transform 0.5s var(--ressort);
}
.btn:hover .btn-pastille { transform: translateX(4px); }
.btn-accent {
    background: var(--bleu-fonce); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 26px -18px rgba(9, 18, 32, 0.9);
}
.btn-accent:hover { background: #1a76ba; }
.btn-contour { border: 1px solid var(--filet-clair); color: inherit; background: rgba(255, 255, 255, 0.04); }
.btn-contour:hover { background: rgba(255, 255, 255, 0.08); }
.page-claire .btn-contour { border-color: var(--filet-sombre); background: rgba(20, 45, 80, 0.04); }
.page-claire .btn-contour:hover { background: rgba(20, 45, 80, 0.07); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.62; pointer-events: none; }

/* ---------- Focus clavier : visible partout, pas seulement sur les champs ---------- */
:focus-visible {
    outline: 2px solid var(--bleu);
    outline-offset: 3px;
    border-radius: 3px;
}
.page-claire :focus-visible { outline-color: var(--bleu-fonce); }

/* ---------- Double-bezel ---------- */
.shell {
    border-radius: var(--r-coque); padding: 0.45rem;
    position: relative;
    transition: transform 0.7s var(--ressort), border-color 0.7s var(--ressort);
}
.page-sombre .shell, .bande-sombre .shell { background: rgba(255, 255, 255, 0.045); border: 1px solid var(--filet-clair); }
.page-claire .shell { background: rgba(13, 20, 32, 0.045); border: 1px solid var(--filet-sombre); }
.shell > .core { border-radius: var(--r-core); height: 100%; position: relative; }
.page-sombre .core, .bande-sombre .core { background: linear-gradient(165deg, var(--acier-2), var(--acier)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07); }
.page-claire .core { background: var(--papier-2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 20px 45px -30px rgba(16, 24, 38, 0.25); }

/* Halo qui suit le curseur : le bezel s'éclaire là où la souris passe. */
.shell::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px; pointer-events: none;
    background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%), rgba(var(--bleu-rvb), 0.55), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 0.6s var(--ressort);
}
.shell:hover::before { opacity: 1; }
a.shell:hover, .carte-active:hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
    .shell, a.shell:hover, .carte-active:hover { transition: none; transform: none; }
}

/* ---------- En-tête : barre classique pleine largeur ---------- */
/* Barre claire : encre sur papier translucide (site 100 % clair depuis le 09/08). */
.entete {
    position: fixed; inset-inline: 0; top: 0; z-index: 60;
    background: rgba(242, 245, 249, 0.86);
    border-bottom: 1px solid rgba(24, 34, 48, 0.1);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    transition: background 0.55s var(--ressort);
}
.entete.entete-scrollee { background: rgba(242, 245, 249, 0.97); }
.entete-coque {
    width: min(1180px, 100% - 2.5rem); margin-inline: auto;
    display: flex; align-items: center; gap: 1.6rem;
    padding-block: 0.8rem;
}
.marque { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font-family: 'Clash Display'; font-weight: 600; font-size: 1.14rem; color: var(--encre); }
.marque img { border-radius: 10px; }
.marque em { font-style: normal; color: var(--bleu-fonce); }
/* Appartenance au groupe : une mention, pas un second logo qui rivalise. */
.marque-groupe {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0 0 0 1.05rem; padding-left: 1.05rem;
    border-left: 1px solid var(--filet-sombre);
}
.marque-groupe span {
    font-size: 0.6rem; line-height: 1.35; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--encre-2);
}
.marque-groupe img { height: 1.45rem; width: auto; opacity: 0.92; }
.nav-principale { margin-left: auto; }
.nav-principale ul { list-style: none; display: flex; gap: 0.35rem; }
.nav-principale a {
    text-decoration: none; color: var(--encre-2); font-size: 0.93rem; font-weight: 500;
    padding: 0.55rem 0.95rem; border-radius: 7px;
    transition: color 0.4s var(--ressort), background 0.4s var(--ressort);
}
.nav-principale a:hover, .nav-principale a[aria-current] { color: var(--encre); background: rgba(24, 34, 48, 0.06); }
.entete-cta { flex-shrink: 0; }

/* Sous-menu produits */
.a-sous-menu { position: relative; }
.sous-menu {
    position: absolute; top: calc(100% + 0.9rem); left: 50%;
    width: 21rem; padding: 0.45rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(24, 34, 48, 0.12);
    box-shadow: 0 26px 60px -34px rgba(16, 24, 38, 0.5);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    opacity: 0; visibility: hidden;
    transform: translate(-50%, 10px) scale(0.98);
    transition: opacity 0.45s var(--ressort), transform 0.45s var(--ressort), visibility 0s 0.45s;
}
.a-sous-menu:hover .sous-menu, .a-sous-menu:focus-within .sous-menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
    transition: opacity 0.45s var(--ressort), transform 0.45s var(--ressort);
}
.sous-menu-core { border-radius: 0.95rem; overflow: hidden; background: transparent; }
.sous-menu-core a { display: block; padding: 0.85rem 1.05rem; border-radius: 0; }
.sous-menu-core a + a { border-top: 1px solid rgba(24, 34, 48, 0.09); }
.sous-menu-core strong { display: block; color: var(--encre); font-weight: 600; font-size: 0.95rem; }
.sous-menu-core span { display: block; color: var(--encre-2); font-size: 0.8rem; line-height: 1.45; margin-top: 0.15rem; }
.sous-menu-core a:hover { background: rgba(24, 34, 48, 0.05); }

/* Burger + menu mobile */
.burger { display: none; width: 2.7rem; height: 2.7rem; border-radius: 8px; border: 1px solid rgba(24,34,48,0.16); background: rgba(24,34,48,0.04); position: relative; cursor: pointer; flex-shrink: 0; }
.burger span { position: absolute; left: 50%; top: 50%; width: 1.15rem; height: 1.6px; background: var(--encre); transition: transform 0.5s var(--ressort); }
.burger span:first-child { transform: translate(-50%, -4px); }
.burger span:last-child { transform: translate(-50%, 3px); }
.burger[aria-expanded="true"] span:first-child { transform: translate(-50%, -1px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translate(-50%, -1px) rotate(-45deg); }
.menu-mobile {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(242, 245, 249, 0.97);
    backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s var(--ressort), visibility 0s 0.5s;
}
.menu-mobile.ouvert { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ressort); }
.menu-mobile nav { display: grid; gap: 1.1rem; text-align: center; }
.menu-mobile a {
    color: var(--encre); text-decoration: none;
    font-family: 'Clash Display'; font-weight: 500; font-size: 1.7rem;
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.6s var(--ressort), transform 0.6s var(--ressort);
    transition-delay: calc(0.06s * var(--i, 0) + 0.1s);
}
.menu-mobile a.menu-mobile-sous { font-size: 1.15rem; color: var(--encre-2); }
.menu-mobile-groupe {
    display: flex; align-items: center; gap: 0.75rem;
    margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--filet-sombre);
}
.menu-mobile-groupe span {
    font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--encre-2);
}
.menu-mobile-groupe img { height: 1.4rem; width: auto; }
.menu-mobile a.btn { font-family: 'General Sans'; font-size: 1rem; margin-inline: auto; margin-top: 0.6rem; }
.menu-mobile.ouvert a { opacity: 1; transform: none; }

/* ---------- HÉRO accueil ----------
   Photo métier en fond (conservée), discours à gauche, et à droite la VUE
   ÉCLATÉE animée du cylindre : c'est la pièce de bravoure de la page. */
.heros {
    position: relative; min-height: 0;
    display: grid; align-items: center;
    padding: 9.5rem 0 4rem;
    isolation: isolate;
    overflow: clip;
    background: var(--papier);
}
.heros-duo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(1.5rem, 3vw, 2.8rem); align-items: center;
}
/* Le schéma déborde jusqu'au bord de l'écran : sans ce fond perdu, la colonne
   tombe à ~590 px et les étiquettes du SVG passent sous 12 px, illisibles.
   width:auto est indispensable — avec width:100 %, la boîte est surcontrainte
   et la marge négative ne l'élargit pas, elle la décale seulement. */
.heros-duo .eclate {
    width: auto;
    margin-right: calc(-1 * max((100vw - 1180px) / 2, 1.25rem));
}
.heros-duo .heros-pied { display: block; }
.heros-duo .heros-pied > p { max-width: 42ch; }
/* La photo métier n'est plus un fond voilé : elle devient une BANDE pleine
   largeur juste sous le héros (voir .bande-photo). Sur papier, un schéma au
   trait ne peut pas cohabiter avec une photo en surimpression. */
.heros-fond { display: none; }
/* Grille d'ingénieur RETIRÉE du héros (retour Rémi 09/08 : « les traits au
   milieu façon bandes, c'est quoi ? »). Discrète sur fond sombre, elle devenait
   sur papier une série de bandes verticales qui coupaient le titre. Le repère
   technique est désormais porté par les axes du schéma éclaté, là où il a un
   sens. La règle est conservée, inactive, pour l'en-tête des pages intérieures. */
.heros-grille { display: none; }
/* ---------- Héros à deux colonnes (16/08/2026) ----------
   Le titre est calibré sur 14ch : seul, il laissait la moitié droite blanche.
   La colonne visuelle porte le produit détouré sur un panneau bleu nuit. */
.heros-scene {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
    gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center;
}
.heros-scene .heros-pied { display: block; }
.heros-scene .heros-pied > p { max-width: 46ch; }
.heros-scene .heros-actions { margin-top: 2.1rem; }
.heros-visuel {
    position: relative; margin: 0; padding: clamp(1.6rem, 3vw, 2.8rem);
    border-radius: var(--r-coque); overflow: hidden;
    background: radial-gradient(125% 105% at 28% 0%, var(--acier-2) 0%, var(--noir) 72%);
    box-shadow: 0 42px 70px -46px rgba(9, 20, 38, 0.75);
}
/* Trame technique très basse, pour que le panneau ne soit pas un aplat mort. */
.heros-visuel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(var(--bleu-rvb), 0.09) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(var(--bleu-rvb), 0.09) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 78%);
}
.heros-visuel img {
    position: relative; display: block; width: 100%; height: auto;
    filter: drop-shadow(0 26px 32px rgba(0, 0, 0, 0.5));
}
.heros-visuel figcaption {
    position: relative; margin-top: 1.4rem; padding-top: 1.1rem;
    border-top: 1px solid var(--filet-clair);
}
.heros-visuel figcaption strong {
    display: block; font-family: 'Clash Display'; font-weight: 600;
    font-size: 1.05rem; color: #fff;
}
.heros-visuel figcaption span { display: block; margin-top: 0.25rem; font-size: 0.84rem; color: var(--brume); }

/* ---------- Bande produit : remplace la photo de crochetage (16/08/2026) ---------- */
.bande-produit { background: var(--papier-3); border-block: 1px solid var(--filet-sombre); }
.bande-produit .conteneur {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.bande-produit h2 { font-size: clamp(1.6rem, 2.9vw, 2.3rem); max-width: 18ch; }
.bande-produit ul { list-style: none; margin: 1.8rem 0 2.2rem; display: grid; gap: 0.85rem; }
/* Puce en position absolue, PAS en colonne de grille : un <li> qui mélange
   <strong> et texte nu donne deux items de grille, et la phrase se casse en
   deux lignes décalées (vu au rendu du 16/08). */
.bande-produit li {
    position: relative; padding-left: 1.4rem;
    color: var(--encre-2); font-size: 1.02rem; line-height: 1.6; max-width: 46ch;
}
.bande-produit li::before {
    content: ""; position: absolute; left: 0; top: 0.62em;
    width: 0.42rem; height: 0.42rem; border-radius: 2px; background: var(--bleu-fonce);
}
.bande-produit li strong { color: var(--encre); font-weight: 600; }
.bande-produit-visuel { margin: 0; }
.bande-produit-visuel img { display: block; width: 100%; height: auto; }
/* Titre volontairement descendu d'un cran : sur un site de sécurité, la
   hiérarchie se tient par la graisse et la couleur, pas par la taille.
   Et surtout : PAS de dégradé en background-clip sur le texte — c'est la
   signature « IA » la plus reconnaissable qui soit. */
.heros h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); max-width: 14ch; }
.heros h1 em { font-style: normal; color: var(--bleu-fonce); }
.heros-pied { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: end; justify-content: space-between; margin-top: 2.6rem; }
.heros-pied > p { max-width: 44ch; color: var(--encre-2); font-size: 1.1rem; }
.heros-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.heros-duo .heros-actions { margin-top: 2.2rem; }

/* La vue éclatée animée a été retirée le 09/08/2026 (rejetée par Rémi).
   Le SVG, sa feuille de style et sa timeline sont archivés dans
   .styleseed/studio/anker-france-refonte-premium/build-abandonne/. */
/* ---------- Bandeau labels : les vrais logos, pas des pastilles de texte ---------- */
.bande-labels { border-block: 1px solid var(--filet-sombre); padding-block: 1.5rem; background: var(--papier); }
.bande-labels .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 3rem; }
.bande-labels p { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre-2); max-width: 26ch; }
.bande-labels img { margin-left: auto; width: min(29rem, 100%); opacity: 0.85;
    /* Le fichier est un aplat BLANC (fait pour les fonds sombres) : sur papier il
       faut l'inverser, sans quoi il devient invisible. */
    filter: invert(1) contrast(1.7); }
.page-claire .bande-labels { border-block-color: var(--filet-sombre); background: rgba(13, 20, 32, 0.02); }
.page-claire .bande-labels p { color: var(--encre-2); }
/* Variante posée à l'intérieur d'une section : ni bordure, ni fond, ni conteneur propre. */
.bande-labels-nue {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 3rem;
    border: 0; background: transparent; padding: 2.8rem 0 0;
}
.page-claire .bande-labels-nue { border: 0; background: transparent; }

/* ---------- Chiffres : bande éditoriale à filets, pas des cartes ---------- */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.chiffres > div { padding: 0.4rem clamp(1rem, 2.4vw, 2.2rem); border-left: 1px solid var(--filet-sombre); }
.chiffres > div:first-child { border-left: 0; padding-left: 0; }
.chiffres strong {
    display: block; font-family: 'Clash Display'; font-weight: 600;
    font-size: clamp(2rem, 3.7vw, 3rem); letter-spacing: -0.035em; color: var(--encre);
    /* chasse tabulaire : les chiffres ne dansent plus pendant le comptage */
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.chiffres strong small { font-size: 0.36em; color: var(--bleu-fonce); font-weight: 600; letter-spacing: 0; }
/* ⚠ Cibler le SEUL span de légende (enfant direct) : le compteur est un span
   imbriqué dans le <strong>, un sélecteur large le réduirait à la taille du texte. */
.chiffres > div > span { display: block; color: var(--encre-2); font-size: 0.9rem; margin-top: 0.45rem; max-width: 22ch; }

/* ---------- Planche produit : illustration détourée du catalogue, posée sur fond clair.
   Les deux planches (Magnet / Infinity) sont transparentes : jamais de « cover »,
   sinon on rogne le cylindre. Toujours « contain » avec de l'air autour. ---------- */
.planche {
    position: relative; overflow: hidden;
    background: radial-gradient(78% 80% at 50% 42%, #ffffff, #e7eef7 78%);
}
.planche img {
    width: 100%; height: 100%; object-fit: contain;
    padding: clamp(1.1rem, 2.4vw, 2.2rem);
    transition: transform 1.1s var(--ressort);
}
.planche::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(13, 24, 42, 0.07);
}

/* ---------- Schéma technique officiel (planche du catalogue client) ---------- */
.schema { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.schema-inverse { grid-template-columns: 1.15fr 1fr; }
.schema-planche { border-radius: var(--r-core); overflow: hidden; background: #eaf1f8; }
.schema-planche img { width: 100%; }
.schema-legende { display: grid; gap: 1.5rem; align-content: center; }
.schema-legende h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.schema-points { list-style: none; display: grid; gap: 1rem; }
.schema-points li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.schema-points b {
    font-family: 'Clash Display'; font-weight: 600; font-size: 0.82rem; color: var(--bleu);
    border: 1px solid rgba(var(--bleu-rvb), 0.35); border-radius: 6px;
    padding: 0.18rem 0.5rem; line-height: 1.4;
}
.page-claire .schema-points b { color: var(--bleu-fonce); border-color: rgba(var(--bleu-fonce-rvb), 0.3); }
.schema-points span { font-size: 0.97rem; }
.page-sombre .schema-points span, .bande-sombre .schema-points span { color: var(--brume); }
.page-claire .schema-points span { color: var(--encre-2); }
.schema-source { font-size: 0.8rem; color: var(--encre-2); }
.bande-sombre .schema-source, .page-sombre .schema-source { color: #7f8b9d; }

/* ---------- Cartes gammes (split éditorial) ---------- */
.gammes { display: grid; gap: 1.2rem; }
.gamme-carte .core { display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden; }
.gamme-carte:nth-child(2) .core { grid-template-columns: 1fr 1.05fr; }
.gamme-carte:nth-child(2) .gamme-txt { order: -1; }
.gamme-visuel { position: relative; min-height: 340px; }
.gamme-visuel img { position: absolute; inset: 0; }
.gamme-carte:hover .gamme-visuel img { transform: scale(1.04); }
.gamme-txt { padding: clamp(1.8rem, 3.5vw, 3.2rem); display: grid; align-content: center; gap: 1rem; justify-items: start; }
.gamme-txt h3 { font-family: 'Clash Display'; font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--encre); }
.gamme-txt p { color: var(--encre-2); }
.gamme-txt ul { list-style: none; display: grid; gap: 0.45rem; color: var(--encre); font-size: 0.95rem; }
.gamme-txt li::before { content: "◆"; color: var(--bleu-fonce); font-size: 0.6rem; margin-right: 0.6rem; vertical-align: 2px; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
.bento .core { padding: clamp(1.5rem, 2.6vw, 2.3rem); display: grid; align-content: start; gap: 0.8rem; }
.bento h3 { font-size: 1.25rem; color: inherit; }
.bento p { font-size: 0.97rem; }
.page-sombre .bento p, .bande-sombre .bento p { color: var(--brume); }
.b-4 { grid-column: span 4; }
.b-5 { grid-column: span 5; }
.b-6 { grid-column: span 6; }
.b-7 { grid-column: span 7; }
.b-8 { grid-column: span 8; }
.b-12 { grid-column: span 12; }
.bento-icone {
    width: 2.9rem; height: 2.9rem; border-radius: 0.9rem;
    display: grid; place-items: center;
    background: linear-gradient(140deg, rgba(var(--bleu-rvb), 0.2), rgba(var(--bleu-fonce-rvb), 0.08));
    border: 1px solid rgba(var(--bleu-rvb), 0.25);
    color: var(--bleu);
}
.bento-icone svg { width: 1.35rem; height: 1.35rem; }
/* Faits sortis des paragraphes : c'est ce qui comble les cartes courtes posées
   à côté d'une planche, au lieu de laisser un tiers de carte blanc. */
.bento-liste { list-style: none; display: grid; gap: 0.6rem; margin-top: 0.35rem; }
.bento-liste li {
    position: relative; padding-left: 1.15rem;
    font-size: 0.92rem; line-height: 1.55; color: var(--encre-2);
}
.bento-liste li::before {
    content: ""; position: absolute; left: 0; top: 0.6em;
    width: 0.36rem; height: 0.36rem; border-radius: 1px; background: var(--bleu-fonce);
}
.bento-liste strong { color: var(--encre); font-weight: 600; }
.page-sombre .bento-liste li, .bande-sombre .bento-liste li { color: var(--brume); }
.page-sombre .bento-liste strong, .bande-sombre .bento-liste strong { color: #fff; }
.bento-image { position: relative; min-height: 240px; overflow: hidden; padding: 0; }
.bento-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento-image figcaption {
    position: absolute; inset-inline: 0; bottom: 0; padding: 1.4rem;
    background: linear-gradient(transparent, rgba(8, 10, 14, 0.85));
    color: #fff; font-weight: 500;
}
/* Variante pour un visuel DÉTOURÉ sur fond clair (rendu produit, pas photo).
   En « cover » plein cadre, le blanc faisait un trou dans le bento sombre et
   la légende blanche tombait sur du quasi-blanc. Ici : plaque claire assumée,
   visuel entier, légende dans sa propre barre en encre foncée.
   Mise en colonne (et non en absolu) pour que l'image occupe toute la
   hauteur restante au lieu de flotter au milieu du vide. */
.core.bento-planche {
    display: flex; flex-direction: column;
    background: radial-gradient(80% 82% at 50% 42%, #ffffff, #e6edf6 84%);
}
/* La planche est carrée : sans plafond, elle impose à sa rangée une hauteur que
   la carte de texte voisine ne peut pas remplir — c'est l'origine du bloc blanc
   signalé le 16/08. Le plafond aligne la rangée sur le texte, pas sur l'image. */
.bento-planche img {
    position: static; flex: 1; min-height: 0; max-height: 15rem;
    width: 100%; height: auto; object-fit: contain;
    padding: clamp(0.9rem, 1.8vw, 1.5rem) clamp(0.9rem, 1.8vw, 1.5rem) 0.3rem;
}
.bento-planche figcaption {
    position: static; background: none;
    color: #16283f; font-weight: 600; font-size: 0.88rem;
    border-top: 1px solid rgba(13, 24, 42, 0.1);
    margin-inline: clamp(0.9rem, 1.8vw, 1.5rem);
    padding: 0.8rem 0 1rem;
}
.shell.bento-planche { min-height: 0; }
/* ---------- Sites sensibles : diptyque à fond perdu + références en pied ----------
   Les deux illustrations viennent du catalogue client (page « sites sensibles ») ;
   elles sont très claires, donc voilées de bleu nuit pour tenir dans la page sombre. */
/* La grande colonne est à DROITE : le panoramique radars/antennes est la zone
   la plus définie du catalogue (1100 px), alors que les tours ne tiennent que
   sur 395 px utilisables — le halo blanc de l'illustration source interdit un
   cadrage plus large. L'ordre de lecture énergie → surveillance, lui, ne bouge
   pas : il suit la liste de références du client. */
.sites-diptyque { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1.1rem; }
.sites-diptyque figure {
    position: relative; overflow: hidden;
    border-radius: var(--r-core); min-height: 300px;
    border: 1px solid var(--filet-clair);
}
.sites-diptyque img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s var(--ressort);
}
.sites-diptyque figure:hover img { transform: scale(1.05); }
.sites-diptyque figure::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 28, 49, 0.32) 0%, rgba(15, 28, 49, 0.12) 45%, rgba(10, 18, 32, 0.9) 100%);
}
.sites-diptyque figcaption {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
    padding: 1.5rem;
    font-family: 'Clash Display'; font-weight: 600; font-size: 1.15rem; color: #fff;
}
/* Sans le diptyque au-dessus, la liste de références n'a plus de bloc à suivre :
   elle démarre donc directement, sans marge d'attente ni filet supérieur. */
.sites-refs-seules { margin-top: 0; padding-top: 0; border-top: 0; }
.sites-refs {
    margin-top: 2.8rem; padding-top: 2rem;
    border-top: 1px solid var(--filet-sombre);
    display: grid; grid-template-columns: auto 1fr; gap: 1rem 3.5rem; align-items: start;
}
.sites-refs h3 {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
    font-family: 'General Sans'; color: var(--encre-2); padding-top: 0.25rem;
}
.sites-refs .liste-refs { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 2rem; }
/* Références + catalogue : deux blocs de nature différente, donc pas deux cartes
   jumelles — la liste reste nue, l'objet imprimé est le seul à porter un cadre. */
.sites-duo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.46fr);
    gap: clamp(1.6rem, 3.5vw, 3.2rem); align-items: start;
}
.sites-duo .sites-refs { margin: 0; }
/* Panneau des secteurs : même bleu nuit que le visuel du héros, pour que les deux
   se répondent d'un bout à l'autre de la page au lieu de faire accident. */
.sites-panneau {
    padding: clamp(1.7rem, 3vw, 2.5rem);
    border-radius: var(--r-coque);
    background: radial-gradient(125% 110% at 12% 0%, var(--acier-2) 0%, var(--noir) 76%);
    box-shadow: 0 38px 64px -48px rgba(9, 20, 38, 0.8);
}
.sites-panneau h3 {
    font-family: 'General Sans', sans-serif; font-weight: 600;
    font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--bleu); margin-bottom: 1.9rem;
}
.secteurs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 1.9rem; }
.secteurs li { display: grid; gap: 0.75rem; align-content: start; }
.secteurs svg { width: 2.15rem; height: 2.15rem; color: var(--bleu); }
.secteurs span { font-size: 0.94rem; line-height: 1.45; color: #e7edf6; }
.carte-catalogue {
    display: grid; grid-template-columns: auto 1fr auto; gap: 0.35rem 1.1rem;
    align-items: center; text-decoration: none; color: inherit;
    padding: 1rem; border: 1px solid var(--filet-sombre); border-radius: var(--r-core);
    background: var(--papier-2);
    transition: transform 0.25s var(--ressort), box-shadow 0.25s var(--ressort);
}
.carte-catalogue img {
    grid-row: span 2; width: 5.6rem; height: 5.6rem; object-fit: cover;
    border-radius: var(--r-petit); box-shadow: 0 8px 18px -10px rgba(16, 24, 38, 0.5);
}
.carte-catalogue-txt strong { display: block; font-weight: 600; font-size: 1.02rem; }
.carte-catalogue-txt span { display: block; margin-top: 0.2rem; font-size: 0.86rem; color: var(--encre-2); }
.carte-catalogue:hover { transform: translateY(-3px); box-shadow: 0 22px 38px -26px rgba(16, 24, 38, 0.55); }
@media (prefers-reduced-motion: reduce) { .carte-catalogue, .carte-catalogue:hover { transition: none; transform: none; } }

.liste-refs { list-style: none; display: grid; gap: 0.55rem; }
.b-12 .liste-refs { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 1.6rem; }
.liste-refs li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.97rem; }
.liste-refs li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 2px; background: var(--bleu-fonce); flex-shrink: 0; transform: rotate(45deg) translateY(-1px); }

/* ---------- Sections claires (pages intérieures) ---------- */
.bande-sombre { background: var(--noir); color: #edf1f7; }
/* En-tête de page sur papier : un filet bas remplace le contraste que donnait
   le bloc sombre, et la grille d'ingénieur signe l'entrée sans l'assombrir. */
.entete-page {
    position: relative; isolation: isolate; overflow: clip;
    padding: 9.5rem 0 3.4rem;
    background: var(--papier); color: var(--encre);
    border-bottom: 1px solid var(--filet-sombre);
}
/* Pas de grille ici non plus : sur papier elle se lit comme des bandes. */
.entete-page h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 20ch; }
.h1-accent { font-style: normal; color: var(--bleu-fonce); }
.heros-court { min-height: 78dvh; }
.bloc-encadre { margin-top: 1.1rem; }
.bloc-encadre > .core { padding: 1.6rem 1.9rem; }
.entete-page .fil { margin-bottom: 1.6rem; }
.entete-page p.chapo { color: var(--encre-2); max-width: 58ch; margin-top: 1.2rem; font-size: 1.12rem; }
.fil { font-size: 0.82rem; color: var(--encre-2); }
.fil a { color: inherit; text-decoration: none; }
.fil a:hover { color: var(--encre); }
.fil span { margin-inline: 0.5rem; opacity: 0.5; }

/* grille produits */
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.1rem; }
.prod-carte .core { padding: 0.9rem 0.9rem 1.4rem; display: grid; gap: 1rem; align-content: start; }
.prod-pict {
    border-radius: 0.85rem; overflow: hidden; position: relative;
    background: linear-gradient(160deg, #eef2f7, #fbfcfe);
    display: grid; place-items: center; aspect-ratio: 4 / 2.6;
}
.prod-pict::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(70% 60% at 50% 30%, rgba(var(--bleu-rvb), 0.09), transparent 70%);
}
.prod-pict img {
    width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 0.9rem;
    transition: transform 0.9s var(--ressort);
}
.prod-carte:hover .prod-pict img { transform: scale(1.06); }
.prod-pict-vide { color: #b9c2cf; width: 4rem; }
.prod-carte h3 { font-family: 'General Sans'; font-size: 1rem; font-weight: 500; line-height: 1.5; padding-inline: 0.4rem; }
.prod-note { font-size: 0.85rem; color: var(--bleu-fonce); font-weight: 500; padding-inline: 0.4rem; }

/* ---------- Faits techniques : blocs séparés par un filet, SANS carte ----------
   Une carte ne se justifie que quand l'élévation dit quelque chose (bloc
   cliquable, appel à l'action). Pour de l'information technique, un filet et
   de l'air lisent « fiche produit » là où la carte lit « tableau de bord ».
   Remplace l'ancien .carac (4 cartes à double liseré par page). */
.faits { list-style: none; display: grid; }
.faits > li {
    display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 1.4rem;
    padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
    border-top: 1px solid var(--filet-sombre);
    align-items: start;
}
.page-sombre .faits > li, .bande-sombre .faits > li { border-top-color: var(--filet-clair); }
.faits-index {
    font-family: 'Clash Display'; font-weight: 600;
    font-size: 0.78rem; letter-spacing: 0.1em; padding-top: 0.42rem;
    color: var(--bleu-fonce); font-variant-numeric: tabular-nums;
}
.page-sombre .faits-index, .bande-sombre .faits-index { color: var(--bleu); }
.faits-icone {
    width: 2.4rem; height: 2.4rem; border-radius: var(--r-petit);
    display: grid; place-items: center; margin-top: 0.15rem;
    background: rgba(var(--bleu-fonce-rvb), 0.08);
    border: 1px solid rgba(var(--bleu-fonce-rvb), 0.18);
    color: var(--bleu-fonce);
}
.page-sombre .faits-icone, .bande-sombre .faits-icone {
    background: rgba(var(--bleu-rvb), 0.13);
    border-color: rgba(var(--bleu-rvb), 0.24);
    color: var(--bleu);
}
.faits-icone svg { width: 1.15rem; height: 1.15rem; }
.faits h3 { font-size: 1.18rem; margin-bottom: 0.5rem; }
.faits p { font-size: 0.98rem; color: var(--encre-2); max-width: 62ch; }
.page-sombre .faits p, .bande-sombre .faits p { color: var(--brume); }
.page-sombre .faits h3, .bande-sombre .faits h3 { color: #fff; }
/* Deux colonnes quand les faits sont nombreux et courts */
@media (min-width: 900px) {
    .faits-2 { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); }
}

/* Duo de cartes d'action (page de remerciement) : ici la carte se justifie,
   chacune porte un bouton. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.duo .core { padding: clamp(1.6rem, 2.6vw, 2.2rem); display: grid; gap: 0.7rem; align-content: start; }
.duo h3 { font-size: 1.12rem; }
.duo p { font-size: 0.97rem; color: var(--encre-2); }

/* étapes duplication */
.etapes { display: grid; gap: 1.1rem; counter-reset: etape; }
.etapes .core { padding: 1.9rem; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; }
.etape-num {
    counter-increment: etape;
    width: 3.2rem; height: 3.2rem; border-radius: 1rem;
    display: grid; place-items: center;
    font-family: 'Clash Display'; font-weight: 600; font-size: 1.3rem;
    background: var(--bleu-fonce); color: #fff;
}
.etape-num::before { content: counter(etape); }
.etapes h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.etapes p, .etapes li { font-size: 0.97rem; color: var(--encre-2); }
.etapes ul { padding-left: 1.1rem; margin-top: 0.5rem; display: grid; gap: 0.35rem; }

/* appel à l'action final — composition asymétrique : le discours à gauche,
   les actions calées à droite. Un bloc centré ferme la page comme une
   bannière ; en split, il ferme comme une signature. */
.cta-final .core {
    padding: clamp(2.2rem, 4.6vw, 3.6rem);
    display: grid; grid-template-columns: 1fr auto; gap: 1.8rem 3.5rem;
    align-items: end; position: relative; overflow: hidden;
}
/* Le bloc d'appel à l'action est le seul aplat de couleur de marque du site :
   bleu Anker plein, texte blanc. Ce n'est pas un « fond sombre » mais l'accent,
   et il sert la hiérarchie — c'est la dernière décision de la page. */
.cta-final > .core, .page-claire .cta-final > .core { background: var(--bleu-fonce); box-shadow: none; }
.cta-final .core::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 95% at 12% -25%, rgba(255, 255, 255, 0.1), transparent 68%); pointer-events: none; }
.cta-txt { display: grid; gap: 1rem; position: relative; }
.cta-final h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: #fff; max-width: 20ch; }
.cta-final p { color: rgba(255, 255, 255, 0.82); max-width: 52ch; }
.cta-final .sourcil { color: rgba(255, 255, 255, 0.72); }
.cta-final .btn-accent { background: #fff; color: var(--bleu-fonce); }
.cta-final .btn-accent:hover { background: #eef4fa; }
.cta-final .btn-contour { border-color: rgba(255, 255, 255, 0.36); color: #fff; background: rgba(255, 255, 255, 0.08); }
.cta-final .btn-contour:hover { background: rgba(255, 255, 255, 0.16); }
.cta-final .heros-actions { position: relative; }
/* Variante sans bezel, posée directement dans une page claire. */
.cta-nu { background: transparent; border: 0; padding: 0; }
.page-claire .cta-nu { background: transparent; border: 0; }
.cta-nu > .core, .page-claire .cta-nu > .core { background: var(--bleu-fonce); box-shadow: none; }

/* ---------- Formulaire ---------- */
.form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grille .pleine { grid-column: 1 / -1; }
.champ { display: grid; gap: 0.4rem; }
.champ label { font-size: 0.86rem; font-weight: 600; }
.champ input, .champ textarea, .champ select {
    font: inherit; color: inherit;
    padding: 0.85rem 1.05rem;
    border-radius: 0.85rem;
    border: 1px solid var(--filet-sombre);
    background: var(--papier-2);
    transition: border-color 0.4s var(--ressort), box-shadow 0.4s var(--ressort);
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
    outline: none; border-color: var(--bleu);
    box-shadow: 0 0 0 4px rgba(var(--bleu-rvb), 0.15);
}
.champ-honey { position: absolute; left: -200vw; }
.form-rgpd { font-size: 0.82rem; color: var(--encre-2); }

/* ---------- États du formulaire : erreur, aide, envoi ----------
   :user-invalid (et non :invalid) pour que le rouge n'apparaisse qu'APRÈS
   une saisie — un formulaire qui s'affiche déjà en erreur est agressif. */
.alerte {
    padding: 1rem 1.25rem; margin-bottom: 1.7rem;
    border-radius: var(--r-petit);
    border: 1px solid rgba(185, 69, 60, 0.32);
    background: rgba(185, 69, 60, 0.07);
    color: var(--alerte); font-size: 0.95rem; font-weight: 500;
}
.champ-aide { font-size: 0.8rem; color: var(--encre-2); }
.champ-erreur { display: none; font-size: 0.82rem; color: var(--alerte); font-weight: 500; }
.champ input:user-invalid, .champ textarea:user-invalid { border-color: var(--alerte); }
.champ input:user-invalid:focus, .champ textarea:user-invalid:focus {
    border-color: var(--alerte); box-shadow: 0 0 0 4px rgba(185, 69, 60, 0.14);
}
.champ input:user-invalid ~ .champ-erreur,
.champ textarea:user-invalid ~ .champ-erreur { display: block; }
.champ input:user-invalid ~ .champ-aide,
.champ textarea:user-invalid ~ .champ-aide { display: none; }
.contact-grille { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.2rem; align-items: start; }
.contact-infos .core { padding: 2rem; display: grid; gap: 1.5rem; }
.contact-infos h3 { font-size: 1.05rem; }
.contact-infos p { color: var(--encre-2); font-size: 0.97rem; }
.contact-infos a { color: var(--bleu-fonce); font-weight: 500; text-decoration: none; }
.form-coque .core { padding: 2rem; display: grid; gap: 1.2rem; }

/* ---------- Utilitaires (remplacent les styles en ligne des vues) ---------- */
.titre-moyen { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.txt { margin-top: 1rem; }
.txt-2 { margin-top: 0.8rem; }
.page-claire .txt, .page-claire .txt-2 { color: var(--encre-2); }
.page-sombre .txt, .page-sombre .txt-2, .bande-sombre .txt, .bande-sombre .txt-2 { color: var(--brume); }
.bande-sombre .txt strong, .page-sombre .txt strong { color: #fff; }
.apres-texte { margin-top: 1.6rem; }
.lien-bleu { color: var(--bleu); }
.page-claire .lien-bleu { color: var(--bleu-fonce); }
.sans-deco { text-decoration: none; }
.rangee-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.2rem; }
.cadre-visuel { padding: 0; overflow: hidden; }
.cadre-visuel img { width: 100%; display: block; }
.bandeau-large .core { background: #eef3f9; }
.fond-produit { background: linear-gradient(150deg, #dfeaf5, #f6fafe); }

/* Carte gamme illustrée (page Produits & services) */
.carte-gamme .core { display: grid; grid-template-rows: auto 1fr; }
/* Cadre calé sur le format des planches (~1,1:1) : en 16/9 le cylindre
   ne remplissait que 46 % de la largeur et flottait dans du vide. */
.visuel-gamme { aspect-ratio: 5 / 4; }
.visuel-gamme img { padding: clamp(0.8rem, 1.6vw, 1.4rem); }
.carte-gamme-txt { padding: 1.7rem 1.9rem 2rem; display: grid; gap: 0.55rem; align-content: start; }
.carte-gamme-txt h3 { font-family: 'Clash Display'; font-weight: 600; font-size: 1.55rem; }
.carte-gamme-txt h3 i { font-style: normal; color: var(--bleu-fonce); display: inline-block; transition: transform 0.55s var(--ressort); }
.carte-gamme:hover .carte-gamme-txt h3 i { transform: translateX(6px); }
.page-claire .carte-gamme-txt p { color: var(--encre-2); }

/* Carte-lien de navigation interne (grilles « choisissez votre configuration ») */
.carte-lien .core { display: grid; align-content: start; gap: 0.55rem; }
.carte-lien h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1.2rem; }
.carte-lien h3 i { font-style: normal; color: var(--bleu); transition: transform 0.55s var(--ressort); }
.page-claire .carte-lien h3 i { color: var(--bleu-fonce); }
.carte-lien:hover h3 i { transform: translateX(5px); }

/* ---------- Divers ---------- */
.entete-section { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.entete-section h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.entete-section p { margin-top: 1rem; }
/* Entête sur deux colonnes : le titre est calibré court, seul il laissait la
   moitié droite de la section vide sur trois écrans successifs (16/08).
   Titre à gauche, chapô à droite : même contenu, plus de bloc blanc. */
@media (min-width: 960px) {
    .entete-section-large {
        max-width: none; display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        /* row-gap serré : le gap unique s'appliquait aussi entre le sourcil et
           le titre et ouvrait un blanc de 4,5 rem au milieu de l'entête. */
        gap: 0.85rem clamp(2rem, 5vw, 4.5rem); align-items: end;
    }
    .entete-section-large .sourcil { grid-column: 1 / -1; }
    .entete-section-large h2 { margin: 0; max-width: 16ch; }
    .entete-section-large p { margin-top: 0; max-width: 52ch; padding-bottom: 0.35rem; }
}
.page-sombre .entete-section p, .bande-sombre .entete-section p { color: var(--brume); }
.page-claire .entete-section p { color: var(--encre-2); }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.legal-prose { max-width: 74ch; }
.legal-prose h2 { font-size: 1.35rem; margin: 2.2rem 0 0.8rem; }
.legal-prose p { color: var(--encre-2); margin-bottom: 0.9rem; }
.plan-listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.plan-listes .core { padding: 1.7rem; }
.plan-listes h2 { font-size: 1.1rem; margin-bottom: 0.9rem; }
.plan-listes a { display: block; padding: 0.45rem 0; color: var(--encre-2); text-decoration: none; border-bottom: 1px solid var(--filet-sombre); font-size: 0.96rem; }
.plan-listes a:last-child { border-bottom: 0; }
.plan-listes a:hover { color: var(--bleu-fonce); }

/* ---------- Pied ---------- */
/* Pied en papier soutenu : plus aucun bloc sombre dans le site. */
.pied { background: var(--papier-3); color: var(--encre); border-top: 1px solid var(--filet-sombre); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.pied-haut { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.pied-marque p { color: var(--encre-2); font-size: 0.95rem; margin-top: 1.1rem; max-width: 38ch; }
.pied-certifs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
.pied-certifs li { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; padding: 0.3rem 0.75rem; border-radius: 6px; border: 1px solid rgba(24, 34, 48, 0.2); color: var(--encre-2); }
.pied-col h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--encre-2); margin-bottom: 1.1rem; font-family: 'General Sans'; font-weight: 600; }
.pied-col a { display: block; color: var(--encre); text-decoration: none; padding: 0.3rem 0; font-size: 0.95rem; transition: color 0.35s var(--ressort); }
.pied-col a:hover { color: var(--bleu-fonce); }
.pied-col p { color: var(--encre-2); font-size: 0.95rem; margin-bottom: 0.4rem; }
.pied-col .btn { margin-top: 1rem; }
.pied-bas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 3.2rem; padding-top: 1.6rem; border-top: 1px solid var(--filet-sombre); font-size: 0.86rem; color: var(--encre-2); }
.pied-bas a { color: inherit; text-decoration: none; margin-left: 1.4rem; }
.pied-bas a:hover { color: var(--encre); }

/* ---------- Bandes teintées : le rythme d'un site 100 % clair (09/08/2026) ----------
   Elles remplacent les anciennes .bande-sombre dans les 7 sections concernées.
   Un papier plus soutenu suffit à séparer deux sections : plus aucun fond sombre
   dans le site. Les règles .page-sombre / .bande-sombre ci-dessous sont devenues
   INACTIVES (aucune vue ne porte plus ces classes) ; elles restent en place pour
   pouvoir rebasculer une page si le besoin revient. */
.bande-teinte { background: var(--papier-3); color: var(--encre); }
.bande-teinte .shell { background: rgba(13, 20, 32, 0.05); border: 1px solid var(--filet-sombre); }
.bande-teinte .core { background: var(--papier-2); }

/* ---------- (inactif) Bandes sombres DANS les pages claires ---------- */
.page-claire .bande-sombre { color: #edf1f7; }
.page-claire .bande-sombre .shell { background: rgba(255, 255, 255, 0.045); border: 1px solid var(--filet-clair); }
.page-claire .bande-sombre .core { background: linear-gradient(165deg, var(--acier-2), var(--acier)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07); }
.page-claire .bande-sombre .sourcil { color: var(--bleu); }
.page-claire .bande-sombre .btn-contour { border-color: var(--filet-clair); background: rgba(255, 255, 255, 0.04); }
.page-claire .bande-sombre .carac p, .page-claire .bande-sombre .bento p { color: var(--brume); }

/* ---------- Motion (uniquement si JS) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(34px); }
.js .heros [data-reveal] { transform: translateY(26px); }
/* Les titres se découvrent par un masque qui remonte, pas par la translation
   générique appliquée à tout le reste : la lecture démarre sur le texte. */
.js h1[data-reveal], .js h2[data-reveal] {
    opacity: 1; transform: none;
    clip-path: inset(-0.25em -0.25em 100% -0.25em);
}
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
    .js h1[data-reveal], .js h2[data-reveal] { clip-path: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1150px) {
    /* L'en-tête n'a plus la place pour la mention de groupe : elle reste dans le
       menu mobile et le pied de page, jamais perdue. */
    .marque-groupe { display: none; }
}
@media (max-width: 1020px) {
    .nav-principale, .entete-cta { display: none; }
    .burger { display: block; margin-left: auto; }
    .heros-duo { grid-template-columns: 1fr; gap: 2.4rem; }
    /* Le produit passe SOUS le texte du héros : en colonne, un visuel en tête
       repousserait le titre et le CTA sous la ligne de flottaison. */
    .heros-scene, .bande-produit .conteneur { grid-template-columns: 1fr; gap: 2.6rem; }
    .heros-visuel { max-width: 34rem; }
    /* En colonne, le fond perdu n'a plus lieu d'être : sans ce retour à zéro,
       la clé du schéma sortait du cadre à droite. */
    .heros-duo .eclate { width: 100%; margin-right: 0; }
    .pied-haut { grid-template-columns: 1fr 1fr; }
    .chiffres { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
    .chiffres > div:nth-child(odd) { border-left: 0; padding-left: 0; }
    .b-4, .b-5, .b-6, .b-7, .b-8 { grid-column: span 6; }
    .schema, .schema-inverse { grid-template-columns: 1fr; }
    .schema-planche { order: -1; }
    .secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    section { padding-block: 3.6rem; }
    .heros { padding-top: 7rem; }
    /* Sous 768 px, les étiquettes du schéma tomberaient à ~7 px : on garde le
       dessin éclaté (qui reste parlant) et on retire textes et traits de rappel.
       Le <title> du SVG continue de décrire la scène aux lecteurs d'écran. */
    .eclate .etiq, .eclate .rappel { display: none; }
    .gamme-carte .core, .gamme-carte:nth-child(2) .core { grid-template-columns: 1fr; }
    .gamme-carte:nth-child(2) .gamme-txt { order: 0; }
    .gamme-visuel { min-height: 265px; }
    .bento { grid-template-columns: 1fr; }
    .b-4, .b-5, .b-6, .b-7, .b-8, .b-12 { grid-column: span 1; }
    .deux-colonnes, .contact-grille, .form-grille { grid-template-columns: 1fr; }
    .chiffres { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
    .pied-haut { grid-template-columns: 1fr; gap: 1.8rem; }
    .bande-labels img { margin-left: 0; }
    .etapes .core { grid-template-columns: 1fr; }
    .b-12 .liste-refs { grid-template-columns: 1fr; }
    .sites-diptyque { grid-template-columns: 1fr; }
    .sites-diptyque figure { min-height: 230px; }
    .sites-duo { grid-template-columns: 1fr; }
    .secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sites-refs { grid-template-columns: 1fr; gap: 1.2rem; }
    .cta-final .core { grid-template-columns: 1fr; align-items: start; }
    .faits > li { grid-template-columns: 2.2rem 1fr; gap: 0 1rem; }
    .duo { grid-template-columns: 1fr; }
}