/*
 * main.css — Squelette maître CCPF v2, 100 % dérivé des rescans (conception-v2.md).
 * Monde anthracite continu (Alumilex) · vocabulaire de traits (Shalwin+Alumalco) ·
 * cartes 2:3 et motion Fabelta · souris normale · zéro CDN · fail-open.
 */

/* ═══ Fontes (familles du scan, auto-hébergées) ══════════════ */
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Yantramanav'; src: url('../fonts/yantramanav-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Yantramanav'; src: url('../fonts/yantramanav-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ═══ Base — html 10px (Alumalco), corps 18px/150 % (marché) ═ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 10px; scroll-behavior: smooth; }  /* Alumalco verbatim */
body {
  font-family: var(--font-corps);
  font-size: 1.8rem; font-weight: 300; line-height: 150%;  /* corps 18/300 Alumalco · lh 150 % Alumilex */
  color: var(--c-texte);
  background: var(--c-fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;  /* Alumalco body verbatim */
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
::selection { background: var(--c-accent); color: var(--c-fond); }

.conteneur { max-width: 1320px; margin-inline: auto; padding-inline: 33px; }  /* content-wrapper 1320 + padding-left 33 (Alumilex) */

/* Sections : rythme 100px avec atténuation ×.85/.7/.55/.4 (Alumalco verbatim) */
.section { padding-block: 100px; position: relative; }
.section--claire { background: var(--c-clair); color: var(--c-encre); }

/* ═══ Système de titres (échelle Alumalco + display Alumilex) ═ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; }
/* un mot plus long que la colonne (ex. « architecturales » en 48px) ne doit
   jamais élargir le document : césure autorisée sur tous les grands textes */
h1, h2, h3, h4, .titre-section, .display, .manifeste, .titre { overflow-wrap: break-word; }
.titre { font-weight: 700; line-height: 1.3em; text-transform: uppercase; margin: 0 0 1em; }  /* .title Alumalco */
.titre--big { font-size: 5rem; }
.titre--defaut { font-size: 4rem; }
.titre--small { font-size: 3rem; }
.titre--smaller { font-size: 2rem; }
.titre--light { font-weight: 300; }        /* Alumalco title-light */
.titre--not-caps { text-transform: none; } /* Alumalco */

/* Display géant : 72px/300/lh 100 % (héros Alumilex verbatim) */
.display { font-family: var(--font-display); font-size: 7.2rem; font-weight: 300; line-height: 100%; letter-spacing: -.02em; color: var(--c-texte); }
/* Manifeste : 100px/300/93 % (Alumilex verbatim) */
.manifeste { font-family: var(--font-display); font-size: 10rem; font-weight: 300; line-height: 93%; max-width: 1115px; color: var(--c-texte); }
/* H2 de section : 48px/400 (Alumilex) */
.titre-section { font-family: var(--font-display); font-size: 4.8rem; font-weight: 400; line-height: 110%; color: var(--c-texte); }
.section--claire .titre-section, .section--claire .display { color: var(--c-encre); }

/* Eyebrow : 18px/400/uppercase accent (Alumilex h5 verbatim) */
.eyebrow { font-family: var(--font-corps); font-size: 1.8rem; font-weight: 400; line-height: 100%; text-transform: uppercase; color: var(--c-accent); margin-bottom: 2.4rem; }

/* Préfixe « / » — grammaire Alumilex */
.barre-slash { display: flex; gap: 2rem; }
.barre-slash::before { content: '/'; font-weight: 700; font-size: 1.6rem; color: var(--c-accent); flex: none; }

/* Sous-titre 28px/400 (Alumilex héros) */
.sous-titre { font-size: 2.8rem; font-weight: 400; line-height: 150%; }

/* ═══ Vocabulaire décoratif (Shalwin + Alumalco verbatim) ════ */
.trait-h { display: block; width: 80px; height: 5px; background: var(--c-accent); margin-inline: auto; margin-block: 30px 0; } /* 80×5 centré Shalwin */
.trait-h--gauche { margin-inline: 0; }
.trait-v { display: inline-block; width: 5px; height: 60px; background: var(--c-accent); margin-right: 20px; flex: none; }   /* 5×60 Shalwin */
.tick { display: inline-block; width: 1px; height: 25px; background: var(--c-trait-clair); }                                 /* 1×25 Alumalco */
.rangee-titre { display: flex; align-items: center; }

/* Cartouche verre — Alumilex verbatim */
.verre {
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  background: var(--verre-fond); border: 1px solid var(--verre-bord);
  max-width: 1012px; width: 100%; margin: auto;
}

/* Cercle décoratif gris (Alumalco block-quote 350px) */
.cercle-deco { position: absolute; width: 350px; height: 350px; background: var(--c-clair); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; }

/* Filet + tick d'en-tête de bloc (Alumalco block-header) */
.filet-entete { position: relative; border-top: 1px solid var(--c-filet); padding-top: 2rem; }
.filet-entete::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 25px; background: var(--c-filet); }

/* ═══ Boutons ════════════════════════════════════════════════ */
/* Ghost Alumalco verbatim (famille Yantramanav, caps, radius 0, inversion) + levée Fabelta */
.bouton {
  display: inline-block;
  background: transparent; color: var(--c-texte);
  font-family: var(--font-action); font-size: 2rem; font-weight: 700;
  line-height: 1em; text-transform: uppercase;
  border: 2px solid var(--c-texte); border-radius: 0;  /* encadré plus affirmé (correction cliente) */
  padding: 1em 2em;
  transition: all .45s var(--ease-bouton);  /* Fabelta */
}
.bouton:hover { background: var(--c-texte); color: var(--c-fond); transform: translateY(-3px); box-shadow: var(--ombre-bouton); }  /* inversion Alumalco + levée Fabelta */
.section--claire .bouton, .bouton--noir { color: var(--c-encre); border-color: var(--c-encre); }
.section--claire .bouton:hover, .bouton--noir:hover { background: var(--c-encre); color: #fff; }
/* Contour dégradé bronze — Alumilex verbatim (structure), padding 10/30 */
.bouton--degrade {
  border: 1px solid transparent; border-image-slice: 1;
  border-image-source: var(--degrade-bouton);
  font-size: 1.6rem; font-weight: 500; font-family: var(--font-corps); text-transform: none;
  padding: 10px 30px;
  transition: all .4s ease-in-out;  /* Alumilex */
}
.bouton--degrade:hover { background: var(--c-accent); color: var(--c-fond); transform: none; box-shadow: none; border-image-source: none; border-color: var(--c-accent); }
/* Micro-CTA texte : Yantramanav 1.4rem caps + tick (Alumalco verbatim) */
.micro-cta { position: relative; display: inline-block; font-family: var(--font-action); font-size: 1.4rem; font-weight: 700; text-transform: uppercase; color: inherit; }
.micro-cta::before { content: ''; position: absolute; width: 2px; height: 25px; background: var(--c-trait-clair); left: 50%; bottom: calc(100% + 1em); }
/* Lien-flèche sur filet (Alumilex) */
.lien-filet { display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-top: 1px solid var(--c-accent); padding-top: 1.6rem; max-width: 987px; font-size: 1.8rem; transition: color .4s ease-in-out; }
.lien-filet:hover { color: var(--c-accent); }
.lien-filet .fleche { transition: transform .4s ease-in-out; }
.lien-filet:hover .fleche { transform: translateX(6px); }

/* ═══ Slots médias (infrastructure squelette) ════════════════ */
.slot-media {
  display: block; position: relative; width: 100%; overflow: hidden;
  background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(213,191,156,.07) 22px 23px), var(--c-fond-2);
  border: 1px dashed rgba(213,191,156,.35);
  min-height: 8rem;
}
.section--claire .slot-media, .slot-media--clair {
  background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(42,42,40,.06) 22px 23px), #e9e9e9;
  border-color: rgba(42,42,40,.3);
}
.slot-media--2-1  { aspect-ratio: 2 / 1; }   /* héros 2000×1000 (Alumalco) */
.slot-media--2-3  { aspect-ratio: 2 / 3; }   /* cartes 400×600 (Fabelta)  */
.slot-media--3-2  { aspect-ratio: 3 / 2; }
.slot-media--16-9 { aspect-ratio: 16 / 9; }
.slot-media--1-1  { aspect-ratio: 1 / 1; }
.slot-media--pano { aspect-ratio: 1902 / 352; } /* bannière Fabelta */
.slot-media--plein { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border: none; }
.slot-media-label {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font-family: var(--font-corps); font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244,240,240,.5); padding: 1rem; pointer-events: none;
}
.section--claire .slot-media-label, .slot-media--clair .slot-media-label { color: rgba(42,42,40,.45); }
.slot-media--plein .slot-media-label { place-content: start end; text-align: right; padding: 14rem 3rem 3rem; opacity: .6; }
/* Logo = slot image client (convention squelette) */
.logo-img { display: block; height: 64px; width: auto; transition: all .5s ease-in; }  /* wordmark large : hauteur pilotée (agrandi — demande cliente 2026-09-18) */

/* ═══ Médias réels (photos/vidéos client) ════════════════════ */
.media { display: block; position: relative; width: 100%; overflow: hidden; background: var(--c-fond-2); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--2-1  { aspect-ratio: 2 / 1; }
.media--2-3  { aspect-ratio: 2 / 3; }
.media--16-10 { aspect-ratio: 16 / 10; }   /* tuiles « Produits Centeral » au format Alumalco (2026-10-19) */
.media--3-2  { aspect-ratio: 3 / 2; }
.media--16-9 { aspect-ratio: 16 / 9; }
.media--1-1  { aspect-ratio: 1 / 1; }
.media--pano { aspect-ratio: 1902 / 352; }
.media--plein { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }

/* ═══ Bascule de langue FR/EN (patron maison LangueSite) ═════ */
.langue-site { display: contents; }
.langue-bouton {
  font-family: var(--font-corps); font-size: 1.7rem; font-weight: 600; letter-spacing: .08em;
  line-height: 1; padding: 13px 15px; color: var(--c-texte);
  background: transparent; border: 1px solid var(--c-filet); cursor: pointer;
  transition: color var(--t-micro), border-color var(--t-micro);
}
.langue-bouton:hover { color: var(--c-accent); border-color: var(--c-accent); }
.langue-bouton:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* Note de la page légale : ancrée sous le ruban, hors flux (la nav ne bouge pas).
   Hauteurs suivies à la main : elles doivent suivre la taille du ruban (agrandi 2026-09-18). */
.langue-note-fr {
  position: fixed; top: 106px; left: 0; right: 0; z-index: 8; margin: 0;
  padding: 1rem 3.3rem; text-align: center; font-size: 1.5rem;
  background: var(--c-accordeon); color: var(--c-texte);
  border-bottom: 1px solid var(--c-filet);
}
/* Pop-up de choix de langue (première visite de la session) */
/* tant que la langue n'est pas choisie, la page ne défile pas derrière le voile */
html.langue-attente, html.langue-attente body { overflow: hidden; }
/* Adresse cliquable vers la carte (correction cliente) */
.lien-carte { display: inline-block; transition: color var(--t-micro); }
.lien-carte:hover { color: var(--c-accent); }
.lien-carte-mention {
  display: block; margin-top: .8rem; font-size: 1.4rem; font-family: var(--font-action);
  text-transform: uppercase; letter-spacing: .06em; color: var(--c-accent);
}
.langue-voile {
  position: fixed; inset: 0; z-index: 2147483200; display: flex; align-items: center;
  justify-content: center; padding: 2rem; background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.langue-dialogue {
  width: min(100%, 42rem); padding: 4rem 3.5rem 3.5rem; text-align: center;
  background: var(--c-fond-2); color: var(--c-texte); border: 1px solid var(--c-filet);
  animation: langue-entree .35s var(--ease-reveal) both;
}
.langue-titre { font-family: var(--font-display); font-size: 3rem; font-weight: 300; margin-bottom: .6rem; }
.langue-texte { font-size: 1.6rem; opacity: .75; margin-bottom: 3rem; }
.langue-actions { display: flex; gap: 1.6rem; }
.langue-choix {
  flex: 1 1 0; font-family: var(--font-action); font-size: 1.6rem; font-weight: 700;
  text-transform: uppercase; padding: 1.4rem 1rem; cursor: pointer;
  color: var(--c-texte); background: transparent; border: 1px solid var(--c-texte);
  transition: all .45s var(--ease-bouton);
}
.langue-choix:hover { background: var(--c-texte); color: var(--c-fond); }
.langue-choix:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@keyframes langue-entree { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .langue-dialogue { animation: none; } }
/* CTA du panneau mobile (remplace le bouton Soumission du ruban sous 576px) */
.nav-mobile-cta { align-self: flex-start; margin-top: 2rem; font-size: 1.9rem; }

/* ═══ Header-ruban (Alumilex) + méga-menu (Alumalco) ═════════ */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; transition: all .5s ease-in; background: transparent; }
.header--verre { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background-color: rgba(27,27,25,.7); }  /* Alumilex verbatim, teinte assombrie 2026-09-23 */
/* Ruban agrandi (demande cliente 2026-09-18). Tout ce qui l'occupe est en taille FLUIDE :
   à pleine taille dès ~1400px, resserré vers 992px — sinon logo + 4 titres + bouton +
   langue passaient sur deux lignes entre 992 et 1400px. */
.header-barre { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: clamp(1.6rem, 2vw, 3rem); padding: 21px clamp(33px, 6vw, 91px) 20px 33px; }
/* Logo réduit au défilement (ruban Alumilex) : l'animation reste, mais elle réduit
   BEAUCOUP moins qu'avant (demande cliente 2026-09-18 — la barre devenait trop petite).
   Rapport ~92 % de la taille pleine au lieu de ~75 %. */
.header--verre .logo-img { height: clamp(48px, 4.2vw, 59px); }
.header--verre:hover .logo-img { height: clamp(52px, 4.6vw, 64px); }
/* nav repliée au scroll, redéployée au survol (Alumilex ruban) */
.nav-principale { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(1.6rem, 1.9vw, 3.6rem); transition: all .5s ease-in; }
/* La nav ne se replie plus au défilement : les quatre titres restent visibles
   en permanence (correction cliente). Le libellé « Menu » de remplacement disparaît. */
.menu-libelle { display: none !important; }
.nav-lien { position: relative; font-size: clamp(1.6rem, 1.45vw, 2rem); white-space: nowrap; font-weight: 500; color: var(--c-texte); transition: color .4s ease-in-out; padding-block: .6rem; }
.nav-lien:hover { color: var(--c-accent); }
/* soulignement animé 0→70 % (Alumalco verbatim) */
.nav-lien::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 0; height: 2px; background: var(--c-accent); transform: translateX(-50%); transition: .2s all ease-in-out; }
.nav-lien:hover::after { width: 70%; }
.header-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(1.2rem, 1.6vw, 2.4rem); }
.header-tel { font-size: 2.1rem; font-weight: 600; }  /* Alumalco */
/* Ruban agrandi d'environ un quart (demande cliente 2026-09-18 : « la barre de nav
   au complet est trop petite ») — le bouton du ruban seulement, pas ceux des pages. */
.header-actions .bouton--degrade { font-size: clamp(1.5rem, 1.35vw, 1.9rem); padding: 12px clamp(14px, 2.4vw, 34px); white-space: nowrap; }
.logo-img { height: clamp(52px, 4.6vw, 64px); }  /* le logo suit le même resserrage */

/* Méga-menu produits — Alumalco verbatim */
.megamenu {
  position: fixed; inset: 0; z-index: 9;
  background: rgba(0,0,0,.75);
  padding: 150px 33px 20px 33px;  /* la réserve de 400px à droite servait à la photo, retirée (cliente) */
  display: none;
}
body.mega-ouvert .megamenu { display: block; }
/* Méga-menu ouvert : la page s'efface derrière le voile sombre (demande cliente
   2026-09-18 — les textes du site restaient lisibles derrière le menu). Le ruban, lui,
   reste visible : c'est lui qui porte le déclencheur « Produits ». Retour au survol sorti. */
main, .pied { transition: opacity .25s ease-in-out; }
body.mega-ouvert main, body.mega-ouvert .pied { opacity: 0; pointer-events: none; }
.megamenu-colonnes { display: flex; gap: 8rem; }
.megamenu-cat-titre { font-size: 2.2rem; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 2rem; }
.megamenu-liste li { margin-bottom: 1.2rem; }
.megamenu-liste a { color: #fff; font-size: 1.8rem; transition: color .2s ease-in-out; }
.megamenu-liste a:hover { color: var(--c-accent); }
/* (.megamenu-image retirée le 2026-09-18 — la photo contextuelle n'existe plus) */
/* Ancres du méga-menu vers les sections de la page Produits : le ruban est fixe, donc la
   section visée doit s'arrêter SOUS lui (sinon son titre passe dessous). */
section[id] { scroll-margin-top: 130px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Burger 33×25, 4 barres → croix (Alumalco verbatim) */
.burger { position: relative; width: 33px; height: 25px; display: none; transition: .5s ease-in-out; }
/* Cible tactile 45×45 (recommandation mobile) — barres 33px recentrées dans la boîte */
.burger { width: 54px; height: 54px; }  /* agrandi avec le ruban (demande cliente 2026-09-18) */
.burger span { width: 33px; }
.burger span:nth-child(1) { top: 10px; }
.burger span:nth-child(2), .burger span:nth-child(3) { top: 22px; }
.burger span:nth-child(4) { top: 34px; }
body.menu-ouvert .burger span:nth-child(1), body.menu-ouvert .burger span:nth-child(4) { top: 19px; }
.burger span { position: absolute; left: 0; width: 100%; height: 3px; background: var(--c-texte); transition: .25s ease-in-out; }
.burger span:nth-child(1) { top: 2px; }
.burger span:nth-child(2), .burger span:nth-child(3) { top: 17px; }
.burger span:nth-child(4) { top: 32px; }
body.menu-ouvert .burger span:nth-child(1), body.menu-ouvert .burger span:nth-child(4) { top: 17px; width: 0; left: 50%; }
body.menu-ouvert .burger span:nth-child(2) { transform: rotate(45deg); }
body.menu-ouvert .burger span:nth-child(3) { transform: rotate(-45deg); }
/* Panneau mobile — fond Alumilex rgba(42,42,40,.95), liens 3rem (Alumalco) */
.nav-mobile {
  position: fixed; inset: 0; z-index: 9; background: rgba(27,27,25,.95);
  display: none; flex-direction: column; justify-content: center; gap: 1rem;
  padding: 20vh 15vw 10vh;
  transform: translateX(100%); visibility: hidden;
}
/* display:none au repos — un panneau fixe garé hors écran élargit le viewport de mise
   en page sur mobile. Affiché par la classe pendant toute l'animation (ouverture ET
   fermeture) ; le repli CSS sans JS reste body.menu-ouvert. */
.nav-mobile--actif, body.menu-ouvert .nav-mobile { display: flex; }
body.menu-ouvert .nav-mobile { transform: none; visibility: visible; }
body.menu-ouvert { overflow: hidden; }
.nav-mobile-lien { position: relative; display: inline-block; align-self: flex-start; font-size: 3.6rem; font-weight: 400; color: #fff; padding-block: .8rem; }
.nav-mobile-lien::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--c-accent); transition: .2s all ease-in-out; }
.nav-mobile-lien:hover::after { width: 50%; }
.nav-mobile-pied { margin-top: 4rem; font-size: 1.8rem; letter-spacing: .1em; color: rgba(244,240,240,.6); }

/* ═══ Héros (Alumilex S1 + Alumalco banner + entrée Fabelta) ═ */
.heros { position: relative; height: 100vh; min-height: 600px; background: var(--c-fond); overflow: hidden; }
/* Fond du héros = PHOTO (gpt-image-2 hyper-réaliste 4K, redescendue à 2560px et légèrement
   assombrie — ordre cliente 2026-09-18). L'effet zoom avant/arrière de l'ancienne boucle
   vidéo est refait ici en CSS : 34 s aller-retour, donc aucune cassure de boucle, et 10 Mo
   de vidéo en moins au chargement. Respecte « animations réduites » du système. */
.heros-photo { animation: heros-respire 34s ease-in-out infinite alternate; will-change: transform; }
@keyframes heros-respire { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .heros-photo { animation: none; transform: scale(1.04); } }
.heros-fond { position: absolute; inset: 0; }               /* wrapper contra-zoom */
.heros-fond-interne { position: absolute; inset: 0; }       /* inner contra-zoom  */
.heros::after { content: ''; position: absolute; inset: 0; background: var(--voile-heros); pointer-events: none; }
.heros-contenu {
  position: absolute; z-index: 2;
  width: 60%; left: 20%; right: 20%;  /* Alumalco banner-content verbatim */
  /* top borné = le bloc ne peut JAMAIS passer sous le ruban (correction cliente :
     sur fenêtre courte, l'ancrage bottom:20% seul faisait remonter le titre
     par-dessus le menu — reproduit sous ~770px de hauteur). */
  top: 150px; bottom: 20%;  /* top relevé : de l'air sous le ruban agrandi (cliente) */
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: left;
}
/* fenêtres courtes : on récupère la marge basse, puis on resserre la typo */
@media (max-height: 820px) { .heros-contenu { bottom: 10%; } }
@media (max-height: 700px) {
  .heros-contenu { bottom: 4%; }
  .heros-titre { font-size: 5.4rem; }
  .heros-sous { margin-top: 1.6rem; font-size: 2.2rem; }
  .heros-actions { margin-top: 2.2rem; }
}
/* Le paragraphe du héros a triplé de longueur (texte cliente 2026-09-18) : sur bureau il
   est élargi et resserré, sinon le bloc (ancré en bas) remontait sous le ruban dès que
   la fenêtre faisait moins de ~950px de haut. */
@media (min-width: 992px) {
  .heros-sous { max-width: 780px; font-size: 2rem; }
}
/* Titre du héros EN GRAS et réduit, bloc décollé du ruban (demande cliente 2026-09-18 :
   « beaucoup trop collé à la barre nav, réduire la taille d'écriture, descendre le tout ».
   Montserrat 700 est chargée en woff2 : vrai gras, aucune graisse synthétique. */
.heros-titre { font-weight: 700; font-size: 6rem; letter-spacing: -.015em; }
.heros-titre .ligne { display: block; overflow: hidden; }  /* split-heading Fabelta */
.heros-titre .ligne > span { display: block; }
.heros-sous { max-width: 600px; margin-top: 2.4rem; color: var(--c-texte); }  /* Alumilex max-width 600 */
.heros-actions { margin-top: 4rem; display: flex; gap: 2rem; flex-wrap: wrap; }

/* ═══ Slides plein écran épinglées (Alumilex S2) ═════════════ */
.slides-epinglees { position: relative; height: 100vh; background: var(--c-fond); overflow: hidden; }
.slide-e { position: absolute; inset: 0; visibility: hidden; }
.slide-e-exterieur, .slide-e-interieur { position: absolute; inset: 0; overflow: hidden; }
.slide-e .slot-media--plein { transform: scale(1.0); }
.slide-e .media--plein::after { content: ''; position: absolute; inset: 0; background: var(--voile-slide); pointer-events: none; }
.slide-e-titre { position: absolute; z-index: 2; top: 15%; left: 33px; max-width: 1200px; }  /* img_title Alumilex */
.slide-e-desc { position: absolute; z-index: 2; bottom: 10%; left: 33px; right: 33px; display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem; }  /* img_desc bottom 10 % */
.slide-e-desc p { max-width: 60ch; }
/* Slide architectes (texte cliente 2026-10-05) : paragraphe + trois lignes en gras, sans puces. */
.slide-e-texte { max-width: 60ch; }
.slide-e-texte ul { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.slide-e-texte li { font-weight: 700; }
.slide-e-texte strong { -webkit-hyphens: manual; hyphens: manual; }   /* pas de « l'ins-tallation » dans un passage en gras */
.slide-e-desc .bouton { flex-shrink: 0; white-space: nowrap; }        /* le texte long ne plie plus le bouton sur 2 lignes */
.slides-epinglees-statique .slide-e { position: relative; visibility: visible; height: 100vh; }  /* fallback sans JS/mobile */

/* ═══ Grille produits (Fabelta cartes + Alumalco gouttières) ═ */
/* Gouttières BLANCHES de 10 px, seulement ENTRE les photos (demande cliente 2026-10-05 :
   « l'espace entre les photos qui est gris, l'essayer blanc et un peu plus large ») —
   ex-gouttières 3 px Alumalco (6 px entre deux cartes, couleur du fond). Le blanc est le
   fond de la grille, visible par les seuls interstices : aucun cadre autour. */
.grille-produits { display: flex; flex-wrap: wrap; gap: var(--gouttiere-produits); background: #fff; --gouttiere-produits: 10px; }
/* ordinateur : interstices blancs plus larges (cliente, 2026-10-18 : « l'espace plus large entre les sections quand on est sur l'ordinateur ») */
@media (min-width: 992px) { .grille-produits { --gouttiere-produits: 24px; } }
.carte-produit {
  position: relative; display: block; overflow: hidden;
  width: calc((100% - 2 * var(--gouttiere-produits)) / 3);
}
.carte-produit .slot-media { transition: transform .62s cubic-bezier(.05,.2,.1,1); }  /* Fabelta verbatim */
.carte-produit:hover .slot-media { transform: scale(1.11); }
.carte-produit::before {  /* voile plus dense EN HAUT : le lettrage y est posé (2026-10-19) */
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 34%, rgba(0,0,0,.14) 72%, rgba(0,0,0,.08) 100%);
  transition: opacity .62s cubic-bezier(.05,.2,.1,1); pointer-events: none;
}
.carte-produit:hover::before { opacity: 1; background: linear-gradient(to bottom, rgba(0,0,0,.74) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.3) 100%); }
.carte-produit .plus {  /* « + » rotatif Alumalco */
  position: absolute; z-index: 2; bottom: 18px; left: 24px;   /* en bas : le haut porte le lettrage */
  color: var(--c-trait-clair); font-size: 4rem; font-weight: 300; line-height: 1; opacity: 0;
  transition: .2s all ease-in-out;
}
.carte-produit:hover .plus { opacity: 1; color: #fff; transform: rotate(180deg) scale(1.1); }
.carte-produit-corps {  /* lettrage EN HAUT de l'image (cliente, correction du 2026-10-18, item 8) */
  position: absolute; z-index: 2; left: 0; right: 0; top: 0;
  padding: 28px 30px 0; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-start; gap: .4rem;
}
.carte-produit-cat { font-size: 2.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-accent-actif); text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.6); }
.carte-produit-nom { font-family: var(--font-display); font-size: 4.4rem; font-weight: 700; line-height: 1.05; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.carte-produit-desc { font-size: 1.9rem; font-weight: 400; max-width: 85%; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
@media (min-width: 992px) and (max-width: 1399.98px) { .carte-produit-nom { font-size: 3.6rem; } .carte-produit-corps { padding: 22px 24px 0; } }
@media (max-width: 575.98px) { .carte-produit-nom { font-size: 3.4rem; } .carte-produit-cat { font-size: 1.9rem; } .carte-produit-desc { font-size: 1.7rem; } .carte-produit-corps { padding: 20px 20px 0; } }
/* Flèche SVG dessinée + tiret (Fabelta verbatim) */
.carte-produit .next-arrow { position: absolute; right: 60px; bottom: 24px; height: 30px; width: 40px; z-index: 2; }
.carte-produit .next-arrow line { stroke: #fff; stroke-width: 2px; stroke-dasharray: 10px; stroke-dashoffset: 30px; }
.carte-produit .ligne-fleche { position: absolute; z-index: 2; right: 92px; bottom: 38px; width: 37px; height: 2px; background: #fff; transform: translateY(-50%) translateX(-25px) scaleX(0); transform-origin: left; }
@keyframes rightArrowLineStart { 0% { stroke-dashoffset: 30px; } 100% { stroke-dashoffset: 40px; } }
@keyframes portRightLineStart { 0% { transform: translateY(-50%) translateX(-25px) scaleX(0); } 100% { transform: translateY(-50%) translateX(0) scaleX(1); } }
.carte-produit:hover .next-arrow line { animation: rightArrowLineStart 0.48s cubic-bezier(0.05,0.2,0.1,1) 0.12s forwards; }
.carte-produit:hover .ligne-fleche { animation: portRightLineStart 0.4s cubic-bezier(0.05,0.15,0.1,1) forwards; }
/* Bannière-lien pleine largeur (Fabelta 1902×352, margin-top 125px) */
.banniere-lien { display: block; margin-top: 125px; }

/* ═══ Stats claires + fondu (Alumilex S4 verbatim) ═══════════ */
.stats { position: relative; padding: 60px 0 800px; background: var(--degrade-clair); color: var(--c-encre); }
/* Fond photo derrière le décompte (ordre Fabris 2026-08-26 — IMG_0536, construction terminée inédite)
   + voile clair pour la lisibilité des chiffres encre, fondu en bas vers le gris de la section */
.stats-fond { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 740px); overflow: hidden; }
.stats-fond img { width: 100%; height: 100%; object-fit: cover; }
.stats-fond::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(240,241,244,.82) 0%, rgba(240,241,244,.6) 55%, rgba(240,241,244,.98) 100%);
}
.stats-liste { position: relative; z-index: 1; max-width: 1005px; margin-inline: auto; padding-inline: 33px; }
.stat { display: flex; align-items: baseline; gap: 4rem; border-top: 1px solid var(--c-accent); padding-block: 2rem; }
.stat:nth-child(2) { justify-content: center; }
.stat:nth-child(3) { justify-content: flex-end; }
.stat-nombre { font-family: var(--font-display); font-size: 20rem; font-weight: 400; line-height: 150%; width: 60%; color: var(--c-encre); }  /* 200px Alumilex */
.stat-nombre .signe { font-size: 11rem; vertical-align: super; }  /* Alumilex verbatim */
.stat-libelle { font-size: 3.6rem; line-height: 115%; width: 40%; }
.stats-image { position: absolute; bottom: 0; left: 0; width: 100%; height: 740px; }
.stats-image .slot-media { height: 100%; border: none; }
.stats-image::after { content: ''; position: absolute; inset: 0; background: var(--fondu-sombre); pointer-events: none; }
/* (fondu gris → image terrasse ajouté puis RETIRÉ le 2026-08-26 — « je n'aime pas finalement ») */

/* ═══ Manifeste (Alumilex S5 verbatim) ═══════════════════════ */
.manifeste-section { padding: 0 0 60px; margin-top: -40px; background: var(--c-fond); position: relative; z-index: 1; }
.manifeste-section .lien-filet { margin-top: 5rem; }

/* ═══ Carrousel projets (Alumalco S5) ════════════════════════ */
.projets { position: relative; padding-block: 100px 140px; }
.projets .swiper-slide { height: auto; }
.projets .projets-image { display: block; height: 65vh; }
.projets .projets-image .slot-media { height: 100%; }
.projets-legende { margin: 30px 100px 0; max-width: 70%; position: relative; opacity: 0; transition: .5s all ease-in-out; }
.swiper-slide-active .projets-legende { opacity: 1; }
.projets-legende::before { content: ''; position: absolute; left: -20px; bottom: 80%; width: 2px; height: 70px; background: var(--c-texte); }  /* trait 2×70 */
.projets-legende h3 { font-size: 3rem; font-weight: 700; text-transform: uppercase; margin-bottom: .25em; }
.projets-boutons {  /* cartouche flèches blanc (Alumalco) — COLLÉ au-dessus des photos (ordre Fabris 2026-08-26) */
  position: relative; z-index: 3; margin-left: auto; width: 16.5%;
  background: #fff; color: #000; padding: 10px;
  display: flex; justify-content: space-around; align-items: center;
}
.projets-boutons button { font-size: 2rem; padding: .6rem 1.4rem; transition: .2s all ease-in-out; }
.projets-boutons button:hover { color: var(--c-accent); }
.projets-tous { position: absolute; z-index: 3; bottom: 30px; right: 5%; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.projets-tous:hover { color: var(--c-accent); }

/* ═══ Témoignages (Alumalco S6) ══════════════════════════════ */
.temoignages { position: relative; margin: 100px 0 0; padding-block: 100px; }
.temoignages::before { content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 1px; background: var(--c-filet); }  /* filet 80 % */
.temoignages::after { content: ''; position: absolute; top: 0; right: 10%; width: 1px; height: 25px; background: var(--c-filet); }  /* tick */
.temoignages .swiper-slide { opacity: .5; transition: opacity .4s ease-in-out; text-align: center; padding-inline: 4rem; }
.temoignages .swiper-slide-active { opacity: 1; }
.temoignage-etoiles { display: flex; justify-content: center; gap: .6rem; margin-bottom: 50px; font-size: 2rem; color: var(--c-accent); }
.temoignage-citation { font-size: 3rem; font-weight: 500; font-style: italic; line-height: 1.4; }  /* blockquote Alumalco */
.temoignage-source { margin-top: 3rem; font-size: 1.8rem; }
.temoignages-fraction { position: absolute; top: 0; right: 10%; padding: 25px; font-size: 1.5rem; font-weight: 700; }
/* Flèches : le carrousel se parcourt au clic, plus seulement au glisser */
.temoignages-boutons { position: absolute; top: 0; left: 10%; display: flex; gap: 1rem; padding: 14px 0; z-index: 3; }
.temoignages-boutons button {
  font-size: 2rem; line-height: 1; padding: 1.1rem 1.6rem; color: var(--c-texte);
  background: transparent; border: 1px solid var(--c-filet); transition: var(--t-micro);
}
.temoignages-boutons button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.temoignages-boutons button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ═══ CTA verre (Alumilex S6 verbatim) ═══════════════════════ */
.cta-verre { position: relative; background: var(--c-fond); padding-block: 100px; overflow: hidden; }
.cta-verre-media { position: relative; }
.cta-verre .verre {
  position: relative; z-index: 2; height: 337px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 33px 33px 20px;
  margin-top: -260px;
}
.cta-verre .verre h2 { font-size: 4.8rem; font-weight: 400; line-height: 100%; color: var(--c-texte); max-width: 60%; }
.cta-verre .verre .bouton--degrade { align-self: flex-end; }

/* ═══ Footer (Alumilex + Alumalco) ═══════════════════════════ */
.pied { position: relative; background: var(--c-fond); overflow: hidden; padding: 100px 7% 50px; }  /* Alumalco padding */
.pied-filigrane { display: none; }  /* logo fantôme retiré (ordre Fabris 2026-08-26) — était Alumalco 500×500 .1 */
.pied-haut { position: relative; display: flex; justify-content: space-between; gap: 6rem; flex-wrap: wrap; }
.pied-gauche { display: flex; flex-direction: column; gap: 3rem; align-items: flex-start; }
.pied-sociaux { display: flex; gap: 1.6rem; }
.pied-sociaux a {  /* cercles 40px bordés (Alumalco) */
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--c-texte); border-radius: 50%; font-size: 1.6rem;
  transition: .2s all ease-in-out;
}
.pied-sociaux a:hover { background: var(--c-texte); color: var(--c-fond); }
.pied-liens { display: flex; flex-direction: column; gap: 1.6rem; max-width: 260px; }  /* Alumilex max-width 260 */
.pied-liens a { position: relative; display: inline-block; align-self: flex-start; font-size: 2rem; font-weight: 300; text-transform: uppercase; letter-spacing: .1em; opacity: .5; transition: .2s all ease-in-out; }  /* adresses Alumalco */
.pied-liens a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--c-texte); transition: .2s all ease-in-out; }
.pied-liens a:hover { opacity: 1; }
.pied-liens a:hover::after { width: 100%; }
.pied-wordmark { margin-top: 6rem; }
.pied-wordmark .slot-media { border-color: rgba(213,191,156,.25); }
.pied-legal {  /* barre légale border-top accent (Alumilex) */
  position: relative; margin-top: 4rem; padding-top: 2.4rem; border-top: 1px solid var(--c-accent);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.6rem;
  font-size: 1.2rem; opacity: .8;
}
.pied-legal a:hover { color: var(--c-accent); }

/* ═══ Pages intérieures ══════════════════════════════════════ */
/* Inner-héros (Alumilex verbatim : 200px, H1 48/500 + « / ») */
.inner-heros { background: var(--c-fond); padding: 200px 0 30px; }
.inner-heros-grille { display: flex; justify-content: space-between; gap: 4rem; align-items: flex-start; }
.inner-heros h1 { font-family: var(--font-display); font-size: 4.8rem; font-weight: 500; line-height: 100%; width: 60%; }
.inner-heros-intro { max-width: 504px; }
.ariane { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; margin-bottom: 4rem; }
.ariane a:hover { color: var(--c-accent); }
.ariane .sep { color: var(--c-accent); }

/* Ancres sticky (Fabelta verbatim : fond blanc, soulignés, mr 50px) */
.ancres { position: sticky; top: 0; z-index: 6; background: #ffffff; color: var(--c-encre); border-bottom: 1px solid var(--c-trait-clair); }
.ancres-liste { display: flex; overflow-x: auto; max-width: 1320px; margin-inline: auto; padding-inline: 33px; }
.ancres-liste a { flex: none; margin: 0 50px 0 0; padding: 10px 0 12px; font-size: 1.6rem; text-decoration: underline; transition: color .2s ease-in-out; }
.ancres-liste a:hover, .ancres-liste a.actif { color: var(--c-accent); }

/* Bannière produit parallax (Alumalco verbatim) */
.banniere-produit { position: relative; height: calc(100vh - 100px); background: #000; overflow: hidden; }
/* Voile de lecture (cliente 2026-09-23) : ni cadre ni cartouche — un simple assombrissement
   de la photo en haut et en bas, invisible en soi, pour que le titre et les mentions se
   lisent en blanc PLEIN même quand la photo est claire à cet endroit. */
.banniere-produit::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 32%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.62) 100%);
}
.banniere-produit .slot-media--plein { opacity: .7; }
@media (min-width: 992px) { .banniere-produit--fixe { background-attachment: fixed; } }
.banniere-produit-entete { position: absolute; z-index: 2; top: 10%; left: 10%; right: 10%; }
.banniere-produit-features { position: absolute; z-index: 2; bottom: 10%; left: 10%; display: flex; }
.feature {  /* mentions de la bannière produit (Alumalco) */
  /* Demande cliente 2026-09-23 : ni cadre, ni barres de séparation, ni cartouche — seulement
     l'écriture, blanc PLEIN et opaque. La lisibilité est portée par l'ombre, pas par un fond. */
  position: relative; padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  font-size: 1.8rem; font-weight: 700; letter-spacing: .05em;
  color: #fff; opacity: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.75);
  text-transform: uppercase; text-align: center;
}
.feature .slot-media { width: 60px; min-height: 60px; }

/* Intro centrée + trait de descente (Alumalco block-intro) */
.bloc-intro { position: relative; text-align: center; padding: 100px 20% 250px; }
.bloc-intro::after { content: ''; position: absolute; left: 50%; bottom: 10%; width: 1px; height: 100px; background: var(--c-filet); }
.bloc-intro .texte-huge { font-size: 2.8rem; }

/* Splits alternés (Alumalco block-content-inverted) */
.split-item { display: flex; align-items: center; gap: 5rem; margin: 100px 0; }
.split-item:nth-child(even) { flex-direction: row-reverse; }
.split-item > * { flex: 1 1 50%; min-width: 0; }
.split-item .slot-media { height: 500px; }
.split-item-texte { padding: 50px; font-size: 2rem; }
.split-item-texte h3 { font-family: var(--font-display); font-size: 3rem; font-weight: 500; margin-bottom: 2rem; }
.split-item-texte li { border-top: 1px solid var(--c-filet); padding-block: 1.2rem; font-size: 1.8rem; }

/* Hotspots + halo heartbeat (Alumalco verbatim) */
.schema { position: relative; }
.hotspot {
  position: absolute; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-trait-clair); color: var(--c-fond);
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 700;
  transition: .2s all ease-in-out;
}
.hotspot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 125%; height: 125%; border: 1px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); animation: heartbeat 10s infinite; }
@keyframes heartbeat { 0% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.2); } 100% { transform: translate(-50%,-50%) scale(1); } }
.hotspot.actif, .hotspot:hover { background: var(--c-accent); color: var(--c-fond); }
.hotspot-panneau { border-left: 5px solid var(--c-accent); padding-left: 2.4rem; }
.hotspot-panneau h3 { font-size: 2.4rem; font-weight: 500; margin-bottom: 1rem; }

/* Table comparative (Alumilex verbatim : sidebar 30/70, filets accent-30) */
.comparatif { display: flex; gap: 0; align-items: flex-start; }
.comparatif-cote { width: 30%; padding-right: 54px; padding-top: 60px; position: sticky; top: 10rem; }
.comparatif-table { width: 70%; overflow-x: auto; }
.comparatif table { width: 100%; border-collapse: collapse; }
.comparatif td, .comparatif th { border-bottom: 1px solid var(--c-filet); padding: 12px 0; text-align: left; font-size: 1.8rem; font-weight: 300; vertical-align: top; }
.comparatif td:first-child { font-weight: 700; }
.comparatif thead .slot-media { max-width: 170px; margin-bottom: 1rem; }

/* Accordéons numérotés (Alumilex verbatim) */
.accordeon-item { margin-bottom: 1rem; }
.accordeon-entete {
  position: relative; width: 100%; display: flex; align-items: center; text-align: left;
  background: var(--c-accordeon); padding: 15px 30px 15px 40px;
  border-top: 1px solid var(--c-filet-acc); transition: all .2s ease-in-out;
}
.accordeon-item:hover .accordeon-entete { border-top-width: 3px; }
.accordeon-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; width: 90px; flex: none; color: var(--c-accent); }
.accordeon-titre { font-size: 2.4rem; font-weight: 400; flex: 1; }
.accordeon-signe { width: 70px; text-align: right; font-size: 2.4rem; color: var(--c-accent); flex: none; }
.accordeon-panneau { max-height: 0; overflow: hidden; transition: max-height .2s ease-out; }
.accordeon-panneau-corps { padding: 30px 40px; }

/* Block-quote cercle (Alumalco verbatim) */
.bloc-citation { position: relative; margin: 150px 0; text-align: center; }
.bloc-citation .accroche { position: relative; z-index: 1; width: 60%; margin: 0 auto .75em; font-size: 3.8rem; font-weight: 300; line-height: 1.1em; }  /* 5rem débordait du cercle de 350 px (cliente 2026-10-05) */

/* Galerie horizontale épinglée (Alumilex réalisations) */
.galerie-h { overflow: hidden; padding-left: 33px; }
/* Flèches minimalistes au-dessus de la galerie + défilement direct (ordre Fabris 2026-08-26 —
   remplace le scrub épinglé dont la course tombait à ~237px : ~900px d'images inaccessibles) */
.galerie-h-entete { display: flex; align-items: center; justify-content: space-between; padding-right: 33px; }
.galerie-h-boutons { display: flex; gap: 1rem; }
.galerie-h-boutons button {
  font-size: 2rem; line-height: 1; padding: .8rem 1.6rem;
  color: var(--c-texte); background: transparent; border: 1px solid var(--c-filet);
  transition: var(--t-micro);
}
.galerie-h-boutons button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.galerie-h-contenu { display: flex; gap: 2rem; width: auto; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-right: 33px; }
.galerie-h-contenu::-webkit-scrollbar { display: none; }
@media (max-width: 767.98px) { .galerie-h-boutons { display: none; } }  /* mobile : galerie en colonne */
.galerie-h-carte { width: clamp(300px, 32vw, 520px); flex: none; }
.galerie-h-carte .slot-media { transition: transform .4s ease-in-out; }
.galerie-h-carte:hover .slot-media { transform: scale(1.02); }
.galerie-h-carte h5 { font-size: 2rem; font-weight: 500; margin-top: 1.2rem; }
.galerie-h-carte .annee { color: var(--c-accent); font-size: 1.4rem; }
.galerie-h-carte--portrait { width: clamp(240px, 22vw, 380px); }

/* Cartes portfolio pleine largeur hover-reveal (Alumalco) */
.hub-projet { position: relative; display: block; height: 700px; background: #000; overflow: hidden; margin-bottom: 30px; }
.hub-projet .slot-media { height: 100%; transition: opacity .4s ease-in-out; }
.hub-projet-contenu { position: absolute; z-index: 2; top: 10%; left: 5%; right: 5%; opacity: 0; transition: .4s all ease-in-out; color: #fff; }
.hub-projet:hover .slot-media { opacity: .65; }
.hub-projet:hover .hub-projet-contenu { opacity: 1; }

/* Timeline (Shalwin verbatim : barre 4px, années accent 3.5em sticky) */
.chrono { position: relative; padding-left: 3%; }
.chrono-piste { position: absolute; left: 3%; top: 0; bottom: 0; width: 4px; background: rgba(0,0,0,.06); }
.section--claire .chrono-piste { background: rgba(0,0,0,.06); }
.chrono-barre { position: absolute; inset-inline: 0; top: 0; height: 0; background: var(--c-accent); }
.chrono-item { display: flex; gap: 6rem; padding: 5% 0 5% 6rem; }
.chrono-annee { width: 30%; }
.chrono-annee h3 { position: sticky; top: 40vh; font-family: var(--font-display); font-size: 3.5rem; font-weight: 500; color: var(--c-accent); }
.chrono-texte { width: 70%; font-size: 1.5rem; }
.chrono-texte p { font-size: 1.8rem; }

/* Équipe (Shalwin verbatim : 3 col gap 50, nom 2em/900... graisses du scan → 700 dispo) */
.equipe-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; width: 90%; margin-inline: auto; }
.equipe-nom { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: 3px; margin-top: 1.4rem; }
.equipe-role { font-size: 1.7rem; font-weight: 400; opacity: .85; }

/* Contact (Alumilex : page inversée claire ; Alumalco : labels flottants) */
.contact-section { background: rgba(244,240,240,1); color: var(--c-encre); padding: 100px 0 80px; }
.contact-grille { display: flex; gap: 0; }
.contact-gauche { width: 50%; padding-right: 59px; }
.contact-droite { width: 50%; }
.champ { position: relative; margin: 0 0 30px; }
.champ input, .champ select, .champ textarea {
  font-family: var(--font-corps); font-size: 1.7rem; font-weight: 400; color: var(--c-encre);
  background: transparent; width: 100%; padding: 1.5em 10px .5em;
  border: 0; border-bottom: 2px solid #bbb; border-radius: 0; outline: none;
  transition: all .2s ease-in-out;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: #000; }
.champ label {  /* label flottant Alumalco verbatim */
  position: absolute; top: 25px; left: 10px; font-size: 1.7rem; color: var(--c-encre-2);
  pointer-events: none; transition: all .2s ease-in-out;
}
.champ.actif label, .champ input:focus + label, .champ textarea:focus + label, .champ select:focus + label { top: 10px; font-size: 1.2rem; }
/* Champ REMPLI (correction cliente du 2026-10-18, item 3) : le libellé reste en haut au lieu de
   retomber sur le texte saisi. « placeholder=" " » rend :placeholder-shown fiable ; l'autoremplissage
   du navigateur et la liste « Type de projet » (option choisie non vide) sont couverts aussi. */
.champ input:not(:placeholder-shown) + label, .champ textarea:not(:placeholder-shown) + label,
.champ input:-webkit-autofill + label, .champ:has(select option:checked:not([value=""])) label { top: 10px; font-size: 1.2rem; }
.champ input::placeholder, .champ textarea::placeholder { color: transparent; }
.champ textarea { min-height: 120px; resize: vertical; }
.formulaire-note { font-size: 1.4rem; color: var(--c-encre-2); margin-bottom: 2.4rem; }
.coordonnees h3 { font-size: 2rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 400; margin-bottom: 1rem; color: var(--c-encre-2); }
.coordonnees address, .coordonnees p { font-style: normal; font-size: 1.8rem; line-height: 1.8; margin-bottom: 3rem; }

/* Légal */
.legal-corps { max-width: 76rem; }
.legal-corps h2 { font-size: 2.4rem; font-weight: 500; margin: 4rem 0 1.6rem; }
.legal-corps p { margin-bottom: 1.6rem; }

/* ═══ Mots géants (Alumilex 20vw lh 90 %) ════════════════════ */
.mot-geant {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 300;
  font-size: 20vw; line-height: 90%; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(244,240,240,.1);
  white-space: nowrap; left: 50%; transform: translateX(-50%);
}
.section--claire .mot-geant { -webkit-text-stroke-color: rgba(42,42,40,.08); }
.section > .conteneur { position: relative; z-index: 1; }

/* ═══ Reveals fail-open (750ms easeOutCubic — Fabelta) ═══════
 * États cachés seulement si html.anime-ok ; filet anime-fin !important. */
html.anime-ok [data-reveal] { opacity: 0; transform: translateY(100px); }  /* fade-in-from-bottom Fabelta */
html.anime-ok [data-reveal='fondu'] { transform: none; }
html.anime-ok .est-revele[data-reveal] { opacity: 1; transform: none; transition: opacity .75s var(--ease-reveal), transform .75s var(--ease-reveal); }
html.anime-ok .heros-titre .ligne > span { transform: translateY(200%); }  /* split Fabelta */
html.anime-ok .heros-fond { transform: scale(.7); opacity: 0; }            /* contra-zoom Fabelta */
html.anime-ok .heros-fond-interne { transform: scale(1.75); }
html.anime-ok .heros.anime-in .heros-fond { transform: scale(1); opacity: 1; transition: transform 1.3s var(--ease-heros), opacity .4s ease-out; }
html.anime-ok .heros.anime-in .heros-fond-interne { transform: scale(1); transition: transform 1.3s var(--ease-heros); }
html.anime-fin [data-reveal], html.anime-fin .heros-titre .ligne > span,
html.anime-fin .heros-fond, html.anime-fin .heros-fond-interne {
  opacity: 1 !important; transform: none !important; visibility: visible !important;
}
/* filet des slides : seulement si le mécanisme GSAP n'a PAS pris la main
   (sinon le !important superposait les 3 slides — bug attrapé 2026-08-23) */
html.anime-fin .slides-epinglees:not(.slides-epinglees--actif) .slide-e {
  opacity: 1 !important; transform: none !important; visibility: visible !important;
  position: relative; height: 100vh;
}
@media (prefers-reduced-motion: reduce) {
  html.anime-ok [data-reveal], html.anime-ok .heros-titre .ligne > span,
  html.anime-ok .heros-fond, html.anime-ok .heros-fond-interne { opacity: 1; transform: none; }
  .hotspot::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ═══ Responsive (breakpoints Alumalco 1199.98/991.98/767.98/575.98
       + atténuation ×.85/.7/.55/.4 verbatim) ═══════════════════ */
@media (max-width: 1199.98px) {
  .section { padding-block: 85px; }
  body { font-size: 1.7rem; }
  .titre--big { font-size: 4.5rem; } .titre--defaut { font-size: 3.5rem; }
  .display { font-size: 5rem; }              /* Alumilex 768-1024 : 50px */
  .manifeste { font-size: 7rem; }
  .stat-nombre { font-size: 14rem; }
  .stat-nombre .signe { font-size: 7.7rem; }
  .header-barre { padding: 20px 33px; }
  .megamenu { padding: 150px 10vw 20px 33px; }
  .megamenu-image { display: none; }         /* Alumalco : photo masquée <1200 */
}
@media (max-width: 991.98px) {
  /* Le méga-menu n'existe pas en mobile (la nav-mobile le remplace) : GSAP lui pose un
     display:block INLINE à l'init → il restait dans le flux, large de 379px à 360px de
     fenêtre = débordement horizontal de la page entière. !important bat le style inline. */
  .megamenu { display: none !important; }
  /* Cibles tactiles ≥ 44px sur les commandes principales */
  .bouton--degrade { padding-block: 15px; }
  .micro-cta { display: inline-block; padding-block: 1.2rem; }
  .hotspot { width: 44px; height: 44px; }
  .nav-mobile-lien { padding-block: 1.2rem; }
  .pied-coordonnees a { display: inline-block; padding-block: .7rem; }
  /* navigation de pied et fil d'Ariane : liens de navigation autonomes → 44px de cible */
  .pied-liens a { padding-block: 1.1rem; }
  .pied-liens { gap: .4rem; }
  .ariane a, .ariane span { display: inline-block; padding-block: 1.1rem; }
  .pied-legal a { display: inline-block; padding-block: 1.1rem; }
  .section { padding-block: 70px; }
  body { font-size: 1.6rem; }
  .titre--big { font-size: 4rem; } .titre--defaut { font-size: 3rem; }
  .nav-principale, .header-tel { display: none; }
  .menu-libelle { display: none !important; }
  .burger { display: block; }
  /* Héros tablette/mobile EN FLUX, hauteur minimale 600px (Alumalco) mais jamais figée :
     une boîte fixe de 600px laissait ~370px au bloc absolu, le contenu (446-572px)
     débordait vers le haut et le titre passait sous le ruban (iPad, Galaxy Tab, 800×600).
     position:relative + z-index OBLIGATOIRES : un bloc static peint SOUS le fond absolu
     (.heros-fond). Le texte n'était visible que tant que l'animation lui laissait un
     transform ; à 2,5 s html.anime-fin pose transform:none → le titre et le sous-titre
     disparaissaient sous la photo (rapport cliente 2026-09-15, mobile).
     inset:auto neutralise top:110px/left:20% du bureau (sinon décalage relatif). */
  .langue-note-fr { top: 95px; }
  .heros-sous.sous-titre { font-size: 2.1rem; }  /* tablette : le 2,8rem de base était hors d'échelle */
  .heros { min-height: 600px; height: auto; }
  .heros-contenu { position: relative; z-index: 2; inset: auto; width: 100%; max-width: 760px; display: block; padding: 185px 33px 80px; }
  .carte-produit { width: calc((100% - var(--gouttiere-produits)) / 2); }
  .stats { padding-bottom: 400px; }             /* Alumilex tablette */
  .stats-image { height: 360px; }
  .stats-fond { height: calc(100% - 360px); }
  .stat-nombre { font-size: 10rem; }
  .stat-nombre .signe { font-size: 5.5rem; }
  .comparatif { flex-direction: column; }
  .comparatif-cote, .comparatif-table { width: 100%; position: static; padding: 0 0 3rem; }
  .contact-grille { flex-direction: column; }
  .contact-gauche, .contact-droite { width: 100%; padding: 0 0 4rem; }
  .equipe-grille { grid-template-columns: repeat(2, 1fr); }
  .inner-heros { padding-top: 140px; }
  .inner-heros-grille { flex-direction: column; }
  .inner-heros h1 { width: 100%; font-size: 3.6rem; }  /* 48px coupait « documentation » en plein mot */
  .split-item { flex-direction: column !important; margin: 60px 0; }
  /* en colonne, align-items:center laissait les blocs à leur largeur de contenu */
  .split-item > *, .split-item .slot-media { width: 100%; }
  .split-item-texte { padding: 30px 0; }
  .hub-projet { height: 500px; }
}
@media (max-width: 767.98px) {
  .titre-section { font-size: 3.6rem; }
  .section { padding-block: 55px; }
  body { font-size: 1.5rem; }
  .titre--defaut { font-size: 2.5rem; }
  .display { font-size: 3.8rem; }            /* Alumilex ≤1023 : 38px */
  .manifeste { font-size: 4.4rem; }
  .header-barre { padding: 15px 20px; }      /* Alumilex ≤991 verbatim */
  /* héros mobile EN FLUX (Alumilex : image fixe + padding-top 140px — plus d'absolu contraint) */
  .heros { min-height: 0; }
  .heros::after { display: none; }
  .heros-fond::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); pointer-events: none; }  /* voile renforcé SOUS le texte — correction contraste (faiblesse scannée) */
  .heros-contenu { max-width: none; padding: 165px 20px 60px; }  /* reste relative + z-index (bloc ≤991) */
  .heros-titre { font-size: 3.4rem; }
  .heros-sous.sous-titre { font-size: 1.8rem; }  /* bat le .sous-titre 2rem plus bas dans ce bloc */
  .heros .slot-media--plein .slot-media-label { place-content: end center; text-align: center; padding: 0 1rem 2rem; }
  .sous-titre { font-size: 2rem; }
  /* slides : flux statique fond #222220, contenus empilés (Alumilex mobile verbatim) */
  .slides-epinglees { height: auto; }
  .slide-e { position: relative; visibility: visible; height: auto; background: var(--c-fond-2); padding: 55px 15px; }
  /* en téléphone les slides sont en flux : les deux replis à 100vh (statique, filet anime-fin), plus
     spécifiques que .slide-e, coupaient le texte long de la slide architectes (2026-10-05) */
  .slides-epinglees-statique .slide-e,
  html.anime-fin .slides-epinglees:not(.slides-epinglees--actif) .slide-e { height: auto; }
  .slide-e::after { display: none; }
  .slide-e-exterieur, .slide-e-interieur { position: static; inset: auto; overflow: visible; }
  .slide-e .media--plein, .slide-e .slot-media--plein { position: relative; inset: auto; height: auto; aspect-ratio: 320 / 347; }  /* variante portrait 320×347 Alumilex */
  .slide-e .media--plein img { object-position: center 70%; }
  .slide-e-titre { position: static; max-width: 100%; margin-top: 3rem; }
  .slide-e-desc { position: static; flex-direction: column; align-items: flex-start; gap: 2rem; margin-top: 2rem; }
  .stats { padding-bottom: 200px; }          /* Alumilex mobile */
  .stats-image { height: 180px; }
  .stats-fond { height: calc(100% - 180px); }
  .stat { flex-wrap: wrap; gap: 1rem; }
  .stat-nombre, .stat-libelle { width: 100%; }
  .stat-nombre { font-size: 8rem; line-height: 110%; }
  .stat-nombre .signe { font-size: 4.4rem; }
  .projets-legende { margin: 20px 20px 0; max-width: 100%; }
  .projets-boutons { display: none; }        /* Alumalco ≤575 masqué — anticipé */
  .bloc-intro { padding: 55px 8% 120px; }
  .bloc-citation .accroche { width: 90%; font-size: 3.5rem; }
  .cta-verre .verre { height: auto; gap: 3rem; margin-top: -120px; }
  .cta-verre .verre h2 { font-size: 3.2rem; max-width: 100%; }
  .equipe-grille { grid-template-columns: 1fr; }
  .chrono-item { flex-direction: column; gap: 1rem; }
  .chrono-annee, .chrono-texte { width: 100%; }
  .chrono-annee h3 { position: static; }
  .galerie-h-contenu { flex-direction: column; width: auto; }
  .galerie-h-carte, .galerie-h-carte--portrait { width: 100%; }
  /* Bannière produit en téléphone : titre et tuiles EN FLUX l'un après l'autre. L'en-tête
     restait en position absolue alors que les tuiles passaient en flux — les deux se
     chevauchaient (invisible tant que les tuiles étaient presque transparentes). */
  .banniere-produit {
    height: auto; min-height: 70vh;
    display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 70px 0;
  }
  .banniere-produit-entete { position: static; top: auto; left: auto; right: auto; padding: 0 10%; }
  .banniere-produit-entete .sous-titre { max-width: 100% !important; }
  .banniere-produit-features { position: static; margin: 0 10%; flex-wrap: wrap; }
  .carte-produit { width: 100%; }
  .carte-produit .next-arrow, .carte-produit .ligne-fleche { display: none; }  /* Fabelta <1000 */
  .mot-geant { font-size: 28vw; }
  .pied { padding: 55px 7% 30px; text-align: left; }
}
@media (max-width: 575.98px) {
  .titre-section { font-size: 3rem; }
  /* accordéon : colonnes fixes trop larges pour 360px (le titre débordait la fenêtre) */
  .accordeon-entete { padding: 15px 16px; gap: 1rem; }
  .accordeon-num { width: 46px; font-size: 2rem; }
  .accordeon-titre { min-width: 0; }
  .accordeon-signe { width: 28px; }
  /* Header compact : logo + CTA + burger ne tenaient pas dans 360px (débordement
     horizontal du document). Géométrie resserrée, CTA conservé (seule porte vers
     la soumission sur petit écran), cible tactile maintenue à 44px. */
  .header-barre { gap: 1.6rem; padding-inline: 16px; }
  .header-actions { gap: 1.4rem; }
  /* ruban : logo + langue + burger seulement — le CTA vit dans le panneau mobile */
  .header-actions .bouton--degrade { display: none; }
  .langue-note-fr { top: 85px; }
  .langue-bouton { font-size: 1.6rem; padding: 15px 12px; }
  .logo-img, .header--verre:hover .logo-img { height: 50px; }
  .header--verre .logo-img { height: 47px; }  /* réduction douce au défilement (cliente) */
  .section { padding-block: 40px; }
  body { font-size: 1.4rem; }
  .titre--defaut { font-size: 2rem; }
  /* (ex-height:400px Alumalco retiré : avec overflow:hidden il coupait le sous-titre et
     masquait entièrement les deux boutons du héros sur téléphone) */
  .display { font-size: 3rem; }
}

/* Voile de transition — fondu couleur de fond (Fabelta ajax-loading-screen, adapté au fond) */
.voile-page { position: fixed; inset: 0; z-index: 1000; background: var(--c-fond); opacity: 0; pointer-events: none; }

/* ═══ Page Catalogue (2026-09-18) ═══════════════════════════════
   Fiches de téléchargement, tableaux techniques et chiffres clés. Les tableaux sont
   dans un conteneur à défilement horizontal : sur téléphone, une grille de 5 colonnes
   ne rentre pas et le reste de la page ne doit PAS déborder pour autant. */
.section--sombre { background: var(--c-fond-2); }
.docs-grille { display: flex; flex-wrap: wrap; gap: 3rem; margin-top: 4rem; }
.doc-carte { flex: 1 1 380px; padding: 4rem 3.5rem; background: var(--c-fond-2); border: 1px solid var(--c-filet); display: flex; flex-direction: column; }
.section--claire .doc-carte, .doc-carte--clair { background: #fff; border-color: var(--c-trait-clair); color: var(--c-encre); }
.doc-cat { font-family: var(--font-corps); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-accent); margin-bottom: 1.6rem; }
.doc-carte h2, .doc-carte h3 { margin-bottom: 1.4rem; }
.doc-meta { font-size: 1.5rem; opacity: .7; margin-bottom: 2.4rem; }
.doc-liste { list-style: none; margin: 0 0 3.2rem; padding: 0; }
.doc-liste li { position: relative; padding-left: 2.2rem; margin-bottom: 1.2rem; font-size: 1.6rem; }
.doc-liste li::before { content: ''; position: absolute; left: 0; top: .9em; width: 10px; height: 2px; background: var(--c-accent); }
.doc-liste--large { display: flex; flex-wrap: wrap; gap: 0 5rem; margin-top: 2.4rem; }
.doc-liste--large li { flex: 1 1 280px; }
.doc-carte .bouton { align-self: flex-start; margin-top: auto; }
.trio-fiche { display: flex; flex-wrap: wrap; gap: 4rem; margin-top: 4rem; }
.trio-fiche > div { flex: 1 1 300px; }
.trio-fiche h3 { margin-bottom: 1.6rem; }
.chiffres-fiche { display: flex; flex-wrap: wrap; gap: 3rem; margin: 5rem 0; }
.chiffres-fiche > div { flex: 1 1 220px; border-top: 2px solid var(--c-accent); padding-top: 2rem; }
.chiffre { display: block; font-family: var(--font-display); font-size: 5.6rem; font-weight: 300; line-height: 100%; }
.chiffre-libelle { display: block; margin-top: 1rem; font-size: 1.5rem; opacity: .75; }
.tableau-fiche { margin-top: 4rem; overflow-x: auto; border: 1px solid var(--c-filet); }
.section--claire .tableau-fiche { border-color: var(--c-trait-clair); }
.tableau-fiche table { width: 100%; border-collapse: collapse; font-size: 1.5rem; min-width: 560px; }
.tableau-fiche th, .tableau-fiche td { padding: 1.6rem 2rem; text-align: left; border-bottom: 1px solid var(--c-filet); }
.section--claire .tableau-fiche th, .section--claire .tableau-fiche td { border-bottom-color: var(--c-trait-clair); }
.tableau-fiche thead th { font-family: var(--font-action); text-transform: uppercase; letter-spacing: .06em; font-size: 1.4rem; }
.tableau-fiche tbody tr:last-child th, .tableau-fiche tbody tr:last-child td { border-bottom: 0; }
.tableau-fiche tbody th[scope="row"] { font-weight: 600; width: 45%; }
.note-fiche { margin-top: 2.4rem; font-size: 1.4rem; line-height: 170%; opacity: .7; max-width: 900px; }
.docs-boutons { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 4rem; }
@media (max-width: 767.98px) {
  .doc-carte { padding: 3rem 2.4rem; }
  .chiffre { font-size: 4.4rem; }
  .docs-boutons .bouton { width: 100%; text-align: center; }
}

/* ═══ Textes justifiés (Correction document 1, item 5 — 2026-09-21) ═══
   « Tous les textes à grandeur du site doivent être en mode justifié. » Appliqué aux
   paragraphes et listes du contenu et du pied. Exclus : les blocs volontairement CENTRÉS
   (manifeste, citation, témoignages) — justifier une ligne unique l'alignerait à gauche et
   casserait leur mise en page — et les sur-titres d'une ligne. La coupure de mots (hyphens)
   évite les « rivières » d'espaces, surtout sur téléphone ; elle suit la langue de <html>. */
:where(main, .pied) :where(p, li):not(:where(.bloc-intro, .bloc-citation, .temoignages, .slot-media-label) *, .eyebrow, .doc-cat) {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* coupures rares : seulement les mots d'au moins 10 lettres, 4 lettres de part et d'autre */
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
}
/* Doc 1 item 1 : numéro de licence RBQ dans le pied de page */
.pied-rbq { display: inline-block; margin-top: .4rem; opacity: .85; letter-spacing: .02em; }
/* ═══ Formulaire de contact : pièce jointe + consentements (Doc 2 item 4, 2026-09-21) ═══ */
.champ-fichier { margin: 0 0 30px; padding: 1.6rem 1.4rem; border: 1px solid #bbb; position: relative; }
.champ-fichier-titre { position: absolute; top: -.9em; left: 1rem; padding: 0 .6rem; background: rgba(244,240,240,1); font-size: 1.3rem; color: var(--c-encre-2); }
.champ-fichier input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.champ-fichier-bouton { display: inline-block; padding: .8rem 1.6rem; font-size: 1.4rem; cursor: pointer;
  border: 1px solid var(--c-encre); color: var(--c-encre); transition: all .3s ease-in-out; }
.champ-fichier-bouton:hover, .champ-fichier input:focus-visible + .champ-fichier-nom { background: var(--c-encre); color: #fff; }
.champ-fichier input:focus-visible ~ .champ-fichier-bouton, .champ-fichier:focus-within .champ-fichier-bouton { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.champ-fichier-nom { display: inline-block; margin-left: 1.4rem; font-size: 1.4rem; color: var(--c-encre-2); word-break: break-all; }
.champ-fichier-aide { display: block; margin-top: 1rem; font-size: 1.25rem; color: var(--c-encre-2); opacity: .8; }
.case { display: flex; gap: 1.2rem; align-items: flex-start; margin: 0 0 1.6rem; font-size: 1.45rem; color: var(--c-encre); cursor: pointer; }
.case input { flex: none; width: 20px; height: 20px; margin-top: .15em; accent-color: var(--c-accent); cursor: pointer; }
.formulaire-note a { text-decoration: underline; }
.formulaire-retour { margin-top: 2rem; font-size: 1.5rem; color: var(--c-erreur); }
.formulaire-retour--ok { color: var(--c-succes); }
.champ-piege { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.contact-droite .bouton[disabled] { opacity: .6; cursor: progress; }
/* Doc 1 item 3 : « diminuer l'espace entre Produits et le dessus de la photo, et que l'on
   voie l'écriture plus haut » — la 1re section de la page Produits colle à l'en-tête
   (écart 230 px → ~60 px). */
#fenetres .split-item { margin-top: 30px; }

/* ═══ Page S77 — nuancier RAL et vue 3D (document cliente du 2026-10-05, items 4 et 5) ═══ */
/* Nuancier : éventail SVG maison (components/PaletteRal.tsx). Lames ouvertes par défaut ;
   avec le moteur, fermées sous la couverture jusqu'à .est-revele, puis déployées en cascade. */
.palette-ral { aspect-ratio: 1 / 1; background: radial-gradient(ellipse at 40% 60%, #2a2a27 0%, var(--c-fond-2) 70%); }
.palette-ral svg { display: block; width: 100%; height: 100%; }
.palette-ral-lame { transform-box: fill-box; transform-origin: 50% 93.333%; transform: rotate(var(--a)); filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.palette-ral-carton { fill: #f3f1ec; }
.palette-ral-couverture rect { fill: var(--c-accent); }
.palette-ral-couverture text { fill: #fff; font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 2px; }
.palette-ral-rivet { fill: #c9c9c9; stroke: #7a7a7a; stroke-width: 2; }
html.anime-ok .palette-ral .palette-ral-lame { transition: transform 1.2s var(--ease-reveal) calc(var(--i) * 22ms); }
html.anime-ok .palette-ral:not(.est-revele) .palette-ral-lame { transform: rotate(-10deg); }
.palette-ral-lame:not(.palette-ral-couverture):hover { transform: rotate(var(--a)) translateY(-16px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .palette-ral .palette-ral-lame { transition: none !important; } }

/* Vue 3D (components/VueS77.tsx) : même gabarit 3:4 que la photo qu'elle remplace. */
.vue-3d { position: relative; aspect-ratio: 3 / 4; overflow: hidden; touch-action: pan-y;
  background: radial-gradient(ellipse at 50% 45%, #34342f 0%, var(--c-fond-2) 72%); cursor: grab; }
.vue-3d:active { cursor: grabbing; }
.vue-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; }
.vue-3d-aide { position: absolute; left: 16px; bottom: 18px; z-index: 1; pointer-events: none;
  display: inline-flex; align-items: center; gap: .8rem; padding: .7rem 1.4rem; border-radius: 99px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.3rem; letter-spacing: .04em; white-space: nowrap; transition: opacity .6s; }
.vue-3d--manipulee .vue-3d-aide { opacity: 0; }
.vue-3d-secours { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Flèches de rotation (échantillon S77, 2026-10-06) : croix en bas à droite — au téléphone, le
   doigt vertical fait défiler la page, ce sont elles qui font pivoter de bas en haut. */
.vue-3d-fleches { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: grid;
  grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px);
  grid-template-areas: ". haut ." "gauche . droite" ". bas ."; }
.vue-3d-fleche { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .2s; }
.vue-3d-fleche:hover, .vue-3d-fleche:focus-visible { background: var(--c-accent); }
.vue-3d-fleche:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vue-3d-fleche--haut { grid-area: haut; } .vue-3d-fleche--bas { grid-area: bas; }
.vue-3d-fleche--gauche { grid-area: gauche; } .vue-3d-fleche--droite { grid-area: droite; }
/* même triangle « ▲ » pour les quatre, orienté ici (jamais d'émoji ◀ ▶) */
.vue-3d-fleche span { display: block; line-height: 1; font-variant-emoji: text; }
.vue-3d-fleche--bas span { transform: rotate(180deg); }
.vue-3d-fleche--gauche span { transform: rotate(-90deg); }
.vue-3d-fleche--droite span { transform: rotate(90deg); }
@media (max-width: 767.98px) {   /* boîte de 324 × 432 : les 4 flèches en une rangée au bas (cibles de 40 px gardées), l'aide en haut */
  .vue-3d-fleches { right: 50%; transform: translateX(50%); bottom: 10px; gap: 8px;
    grid-template-columns: repeat(4, 40px); grid-template-rows: 40px; grid-template-areas: "gauche haut bas droite"; }
  .vue-3d-aide { top: 12px; bottom: auto; left: 12px; }
}

/* ═══ Textes posés SUR une photo ═══════════════════════════════════════════════
   Quatre endroits écrivent par-dessus une photo : le héros, les slides épinglées, la
   bannière produit et le cartouche de verre du CTA. Sur le fond charcoal actuel ils
   seraient blancs de toute façon — mais ils sont épinglés ICI, sur --c-texte-media,
   pour que le jour où le fond redevient clair (essai crème du 2026-09-23, annulé le
   2026-09-24 : « mon client n'aime pas le blanc ») ils ne basculent pas à l'encre avec
   le reste. Liste exhaustive, en fin de fichier pour battre les règles génériques sans
   recourir à !important. */
.heros-contenu,
.heros-contenu .display,
.heros-contenu .titre-section,
.heros-sous,
.slide-e-titre, .slide-e-titre .display, .slide-e-titre .titre-section,
.slide-e-desc,
.banniere-produit,
.banniere-produit .display,
.banniere-produit .titre-section,
.cta-verre .verre,
.cta-verre .verre h2 { color: var(--c-texte-media); }

/* Boutons posés sur une photo : contour et libellé blancs, inversion au survol */
.heros-contenu .bouton, .cta-verre .verre .bouton, .banniere-produit .bouton {
  color: var(--c-texte-media); border-color: var(--c-texte-media);
}
.heros-contenu .bouton:hover, .cta-verre .verre .bouton:hover, .banniere-produit .bouton:hover {
  background: var(--c-texte-media); color: var(--c-encre);
}
/* Filets d'en-tête sur photo : le filet encre ne se voit pas sur une image sombre */
.banniere-produit .filet-entete, .slide-e-titre .filet-entete { border-top-color: rgba(255,255,255,.45); }
.banniere-produit .filet-entete::after, .slide-e-titre .filet-entete::after { background: rgba(255,255,255,.45); }

/* Exception de l'exception — téléphone : les slides épinglées quittent la photo et
   passent en flux sur le fond de section (.slide-e ≤767.98px, --c-fond-2). L'écriture
   suit donc --c-texte, pas --c-texte-media : c'est ce qui la garde lisible quelle que
   soit la teinte du fond. */
@media (max-width: 767.98px) {
  .slide-e-titre, .slide-e-titre .display, .slide-e-titre .titre-section,
  .slide-e-desc { color: var(--c-texte); }
  .slide-e-titre .filet-entete { border-top-color: var(--c-filet); }
  .slide-e-titre .filet-entete::after { background: var(--c-filet); }
}