/* ============================================================================
   ENSKY SOLAR — Design system et composants du site public (v2.2.0)
   Charte : encre + or Pantone 7407C (#E1AD6F), Archivo (titres),
   IBM Plex Sans (texte), IBM Plex Mono (données techniques).
   Accent électrique (--volt) réservé aux données vivantes : télémétrie,
   diodes, bordures éclairées. Ombres teintées encre, jamais noires.
   Thème sombre par défaut, thème clair via [data-theme="light"].
   Rayons : 6 px (commandes), 12 px (cartes), 20 px (panneaux et fenêtres).
   Couches : contenu < grain (90) < en-tête (100) < WhatsApp (120) ;
   les fenêtres modales vivent dans la couche supérieure du navigateur.
   ============================================================================ */

/* ─────────────────────────── 1. Jetons ─────────────────────────── */
:root {
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Couleurs de marque, invariantes */
  --or: #E1AD6F;
  --or-2: #C9A06C;
  --or-3: #F2CC93;
  --sable: #D3B8A2;
  --marine: #164065;
  --graphite: #29343D;
  --encre: #0E141A;

  /* Thème sombre */
  --fond: #0B1015;
  --fond-2: #111820;
  --fond-3: #161F28;
  --fond-4: #1C2630;
  --texte: #F3EFE8;
  --texte-2: rgba(243, 239, 232, .70);
  --texte-3: rgba(243, 239, 232, .48);
  --or-texte: #E8B97E;
  --sur-or: #0E141A;
  --ligne: rgba(255, 255, 255, .08);
  --ligne-2: rgba(255, 255, 255, .15);
  --ligne-or: rgba(225, 173, 111, .32);
  --verre: rgba(17, 24, 32, .62);
  --verre-haut: rgba(255, 255, 255, .055);
  --verre-bord: rgba(255, 255, 255, .11);
  --verre-reflet: rgba(255, 255, 255, .09);
  --tuile: #FFFFFF;
  --bande: #0F2338;
  --bande-texte: #F3EFE8;
  --volt: #62D3E4;
  --volt-texte: #7FDCEA;
  --volt-fond: rgba(98, 211, 228, .09);
  --volt-ligne: rgba(98, 211, 228, .32);
  --ombre-1: 0 1px 2px rgba(2, 8, 14, .4), 0 12px 32px -14px rgba(2, 8, 14, .65);
  --ombre-2: 0 2px 6px -2px rgba(2, 8, 14, .45), 0 28px 70px -28px rgba(2, 8, 14, .8);
  --ombre-3: 0 0 0 1px rgba(2, 8, 14, .25), 0 40px 120px -30px rgba(2, 8, 14, .9);
  --ombre-or: 0 18px 50px -22px rgba(225, 173, 111, .45);
  --scrim-1: rgba(11, 16, 21, .88);
  --scrim-2: rgba(11, 16, 21, .35);
  --voile: rgba(4, 8, 12, .52);
  --grain-opacite: .035;

  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --r-pill: 999px;

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --wrap: 1360px;
  --section: clamp(4rem, 8vw, 7.5rem);
  --hdr-h: 72px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-1: .18s;
  --t-2: .32s;
  --t-3: .6s;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --fond: #F6F3EF;
  --fond-2: #FFFFFF;
  --fond-3: #FBF9F6;
  --fond-4: #EEE9E2;
  --texte: #121920;
  --texte-2: rgba(18, 25, 32, .72);
  --texte-3: rgba(18, 25, 32, .52);
  --or-texte: #8E6228;
  --ligne: rgba(18, 25, 32, .09);
  --ligne-2: rgba(18, 25, 32, .17);
  --ligne-or: rgba(158, 112, 53, .38);
  --verre: rgba(255, 255, 255, .70);
  --verre-haut: rgba(255, 255, 255, .55);
  --verre-bord: rgba(18, 25, 32, .09);
  --verre-reflet: rgba(255, 255, 255, .95);
  --tuile: #FFFFFF;
  --bande: #E8EEF4;
  --bande-texte: #121920;
  --volt: #0E8DA0;
  --volt-texte: #0B7383;
  --volt-fond: rgba(14, 141, 160, .08);
  --volt-ligne: rgba(14, 141, 160, .30);
  --ombre-1: 0 1px 2px rgba(22, 40, 58, .08), 0 14px 34px -16px rgba(22, 40, 58, .26);
  --ombre-2: 0 2px 6px -2px rgba(22, 40, 58, .1), 0 28px 70px -28px rgba(22, 40, 58, .34);
  --ombre-3: 0 0 0 1px rgba(22, 40, 58, .06), 0 40px 120px -30px rgba(22, 40, 58, .45);
  --ombre-or: 0 18px 50px -22px rgba(158, 112, 53, .35);
  --scrim-1: rgba(11, 16, 21, .86);
  --scrim-2: rgba(11, 16, 21, .30);
  --voile: rgba(18, 25, 32, .34);
  --grain-opacite: .045;
  color-scheme: light;
}

/* ─────────────────────────── 2. Base ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 1rem); }
/* Une fenêtre modale ouverte fige la page derrière elle ; la largeur de la barre de défilement
   disparue (--compense, mesurée par le script) est rendue à la page, à l'en-tête et au bouton
   WhatsApp : rien ne bouge, et le fond flouté couvre bien tout l'écran. */
html.fenetre-ouverte { overflow: hidden; padding-right: var(--compense, 0px); }
html.fenetre-ouverte .hdr { padding-right: var(--compense, 0px); }
html.fenetre-ouverte .wa-flottant { margin-right: var(--compense, 0px); }
/* Grain très fin sur toute la page : casse l'aplat numérique, sous l'en-tête, jamais cliquable. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grain-opacite);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) { body::before { display: none; } }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(.98rem, .3vw + .92rem, 1.06rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t-2), color var(--t-2);
}
img, picture, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--or); color: var(--sur-or); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.022em; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
address { font-style: normal; }
.ic { width: 1.1em; height: 1.1em; flex: none; }
.ic--xs { width: .8em; height: .8em; }
.saut { position: absolute; left: 1rem; top: -4rem; z-index: 300; padding: .7rem 1rem; background: var(--or); color: var(--sur-or); border-radius: var(--r-s); font-family: var(--font-mono); font-size: .8rem; }
.saut:focus { top: 1rem; }
.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; }

/* Textes liés à la langue courante (contenu long non échangeable par attribut) */
.l-en { display: none; }
html[lang="en"] .l-fr { display: none; }
html[lang="en"] .l-en { display: revert; }

/* ─────────────────────────── 3. Typographie et mise en page ─────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); }
.section--serree { padding-block: clamp(3rem, 6vw, 5rem); }
.eyebrow {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--or-texte); display: inline-flex; align-items: center; gap: .8rem; margin: 0 0 1.2rem;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--or); }
.h-display { font-size: clamp(2.5rem, 5.2vw, 5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.h-2 { font-size: clamp(1.85rem, 3.4vw, 2.9rem); }
.h-3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -.012em; }
.lede { font-size: clamp(1.02rem, 1.05vw, 1.18rem); color: var(--texte-2); max-width: 62ch; margin-top: 1.1rem; text-wrap: pretty; }
.mono { font-family: var(--font-mono); }
.entete-section { max-width: 62ch; }
.entete-section + * { margin-top: clamp(2rem, 4vw, 3.2rem); }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section--centre .lede { margin-inline: auto; }

/* ─────────────────────────── 4. Composants ─────────────────────────── */

/* Boutons */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: .95rem 1.5rem; border-radius: var(--r-s); border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-2) var(--ease), color var(--t-2) var(--ease), border-color var(--t-2) var(--ease),
              transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--or { background: linear-gradient(180deg, var(--or-3), var(--or) 55%, var(--or-2)); color: var(--sur-or); border-color: var(--or); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(120, 78, 30, .35), var(--ombre-or); }
.btn--or:hover { background: var(--or-3); border-color: var(--or-3); }
.btn--contour { border-color: var(--ligne-or); color: var(--or-texte); background: transparent; }
.btn--contour:hover { background: var(--or); border-color: var(--or); color: var(--sur-or); }
.btn--neutre { border-color: var(--ligne-2); color: var(--texte); background: transparent; }
.btn--neutre:hover { border-color: var(--or); color: var(--or-texte); }
.btn--encre { background: var(--encre); color: var(--or); border-color: var(--encre); }
.btn--encre:hover { background: transparent; color: var(--encre); }
.btn--s { padding: .68rem 1.05rem; font-size: .72rem; }
.btn .ic { width: 1rem; height: 1rem; transition: transform var(--t-2) var(--ease); }
.btn:hover .ic--fleche { transform: translateX(3px); }
.btn--bloc { width: 100%; }

/* Pastilles de filtre et étiquettes */
.chip {
  position: relative; overflow: hidden;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; padding: .55rem .95rem; border-radius: var(--r-pill);
  border: 1px solid var(--ligne-2); background: transparent; color: var(--texte-2); cursor: pointer; white-space: nowrap;
  transition: all var(--t-2) var(--ease);
}
.chip:hover { border-color: var(--or); color: var(--or-texte); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--or); border-color: var(--or); color: var(--sur-or); }
.tag {
  display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: var(--r-pill); border: 1px solid var(--ligne-or); color: var(--or-texte); white-space: nowrap;
}
.tag--plein { background: var(--or); border-color: var(--or); color: var(--sur-or); }
.tag--neutre { border-color: var(--ligne-2); color: var(--texte-2); }

/* Verre : flou et saturation, reflet sur l'arête haute, fine arête sombre en bas
   (réfraction simulée), ombre teintée encre. Une seule source de lumière : le haut. */
.verre {
  background: linear-gradient(180deg, var(--verre-haut), transparent 42%), var(--verre);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--verre-bord);
  box-shadow: inset 0 1px 0 var(--verre-reflet), inset 0 -1px 0 rgba(2, 8, 14, .18), var(--ombre-1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre { background: var(--fond-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .verre { background: var(--fond-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Cartes */
.carte {
  position: relative; overflow: hidden; --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r-m);
  transition: transform var(--t-2) var(--ease), border-color var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease), background-color var(--t-2);
}
a.carte:hover, button.carte:hover, .carte--lien:hover { transform: translateY(-3px); border-color: var(--ligne-2); box-shadow: var(--ombre-2); }

/* Tuile blanche pour visuels produits détourés */
.tuile { background: var(--tuile); overflow: hidden; position: relative; }
.tuile img { width: 100%; height: 100%; object-fit: contain; }

/* États vides et avis */
.vide { padding: clamp(3rem, 6vw, 5rem) var(--pad); text-align: center; color: var(--texte-2); border-radius: var(--r-l); }
.vide .ic { width: 2.4rem; height: 2.4rem; color: var(--or); margin: 0 auto 1rem; }
.vide b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--texte); margin-bottom: .5rem; }
.avis { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.2rem; border: 1px solid var(--ligne-or); border-radius: var(--r-m); background: rgba(225, 173, 111, .06); font-size: .9rem; color: var(--texte-2); }
.avis .ic { color: var(--or-texte); margin-top: .15rem; }

/* Statistiques */
.stats { display: flex; flex-wrap: wrap; gap: 2.2rem 3rem; margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--ligne); }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 2.6vw, 2.3rem); color: var(--or-texte); line-height: 1; letter-spacing: -.03em; }
.stat span { display: block; margin-top: .45rem; font-size: .85rem; color: var(--texte-2); }

/* Métadonnées (date, lieu) */
.meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-family: var(--font-mono); font-size: .74rem; color: var(--texte-2); letter-spacing: .02em; }
.meta span { display: inline-flex; align-items: center; gap: .45rem; }
.meta .ic { color: var(--or-texte); }

/* Fil d'Ariane */
.fil { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--texte-3); margin-bottom: 1.4rem; }
.fil a:hover { color: var(--or-texte); }
.fil [aria-current] { color: var(--texte-2); }

/* Tableaux techniques */
.spec { width: 100%; border-collapse: collapse; font-size: .88rem; }
.spec tr { border-bottom: 1px solid var(--ligne); }
.spec tr:last-child { border-bottom: 0; }
.spec th { text-align: left; font-weight: 400; color: var(--texte-2); padding: .6rem 1rem .6rem 0; vertical-align: top; width: 52%; }
.spec td { text-align: right; font-family: var(--font-mono); font-size: .84rem; padding: .6rem 0; vertical-align: top; }

/* Accordéon natif */
.accordeon { border-top: 1px solid var(--ligne); }
.accordeon:last-of-type { border-bottom: 1px solid var(--ligne); }
.accordeon summary { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary .ic { margin-left: auto; color: var(--or-texte); transition: transform var(--t-2) var(--ease); }
.accordeon[open] summary .ic { transform: rotate(180deg); }
.accordeon__t { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.accordeon__n { font-family: var(--font-mono); font-size: .7rem; color: var(--or-texte); border: 1px solid var(--ligne-or); padding: .18rem .55rem; border-radius: var(--r-pill); }
.accordeon__corps { padding: 0 0 1.4rem; }

/* ─────────────────────────── 5. En-tête ─────────────────────────── */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hdr-h);
  background: var(--verre); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--verre-bord);
  transition: background-color var(--t-3) var(--ease), border-color var(--t-3) var(--ease);
}
.hdr--transparent:not(.is-stuck) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Fil lumineux sous l'en-tête figé : or au centre, électrique aux extrémités */
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; opacity: 0; transition: opacity var(--t-3) var(--ease);
  background: linear-gradient(90deg, transparent, var(--volt-ligne) 18%, rgba(225, 173, 111, .55) 50%, var(--volt-ligne) 82%, transparent); }
.hdr.is-stuck::after { opacity: 1; }
.hdr__in { display: flex; align-items: center; gap: 1.4rem; height: 100%; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo__img { height: 28px; width: auto; }
.logo__img--encre { display: none; }
:root[data-theme="light"] .hdr:not(.hdr--transparent) .logo__img--or,
:root[data-theme="light"] .hdr.is-stuck .logo__img--or,
:root[data-theme="light"] .ftr .logo__img--or { display: none; }
:root[data-theme="light"] .hdr:not(.hdr--transparent) .logo__img--encre,
:root[data-theme="light"] .hdr.is-stuck .logo__img--encre,
:root[data-theme="light"] .ftr .logo__img--encre { display: block; }
.hdr--transparent:not(.is-stuck) { --texte: #F3EFE8; --texte-2: rgba(243, 239, 232, .72); --or-texte: #E8B97E; --ligne-2: rgba(255, 255, 255, .18); }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 1.8vw, 2rem); margin-left: auto; }
.nav a {
  position: relative; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-2); padding: .4rem 0; transition: color var(--t-2);
}
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--or); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--t-2) var(--ease); }
.nav a:hover, .nav a[aria-current] { color: var(--or-texte); }
.nav a[aria-current]::after, .nav a:hover::after { transform: scaleX(1); }

.hdr__outils { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.nav + .hdr__outils { margin-left: 0; }
.lang { display: inline-flex; border: 1px solid var(--ligne-2); border-radius: var(--r-pill); padding: 2px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; }
.lang button { position: relative; overflow: hidden; background: transparent; border: 0; color: var(--texte-2); cursor: pointer; padding: .36rem .62rem; border-radius: var(--r-pill); transition: all var(--t-2); }
.lang button[aria-pressed="true"] { background: var(--or); color: var(--sur-or); }
.theme, .burger {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-pill);
  border: 1px solid var(--ligne-2); background: transparent; color: var(--texte-2); cursor: pointer; transition: all var(--t-2);
}
.theme:hover, .burger:hover { border-color: var(--or); color: var(--or-texte); }
.theme .ic { width: 1.05rem; height: 1.05rem; }
.theme .ic--lune { display: none; }
:root[data-theme="light"] .theme .ic--soleil { display: none; }
:root[data-theme="light"] .theme .ic--lune { display: block; }
.burger { display: none; }

/* ─────────────────────────── 5 bis. Fenêtres modales centrées ───────────────────────────
   Menu mobile, fiche technique, visionneuse : de vrais <dialog> ouverts en mode
   modal. Centrage mathématique (inset 0 + margin auto, aucun décalage manuel),
   fond flouté par ::backdrop, entrée et sortie animées (assets/js/ensky.js). */
.fenetre {
  inset: 0; margin: auto; padding: 0; border: 1px solid var(--verre-bord); border-radius: var(--r-l);
  max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow: hidden;
  background: linear-gradient(180deg, var(--verre-haut), transparent 30%), var(--fond-2); color: var(--texte);
  box-shadow: inset 0 1px 0 var(--verre-reflet), var(--ombre-3);
}
.fenetre[open] { display: flex; flex-direction: column; animation: fenetre-entree .42s var(--ease-out) both; }
.fenetre::backdrop { background: var(--voile); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); animation: voile-entree .32s ease both; }
.fenetre.is-fermeture { animation: fenetre-sortie .26s var(--ease) both; }
.fenetre.is-fermeture::backdrop { animation: voile-sortie .26s ease both; }
@keyframes fenetre-entree { from { opacity: 0; transform: translateY(14px) scale(.965); } }
@keyframes fenetre-sortie { to { opacity: 0; transform: translateY(8px) scale(.975); } }
@keyframes voile-entree { from { opacity: 0; } }
@keyframes voile-sortie { to { opacity: 0; } }
.fenetre__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fenetre__k { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--or-texte); display: inline-flex; align-items: center; gap: .6rem; }
.fenetre__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 10px var(--volt); }
.fenetre__x {
  position: relative; overflow: hidden; flex: none; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--ligne-2); background: transparent; color: var(--texte);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--t-2);
}
.fenetre__x:hover { background: var(--or); border-color: var(--or); color: var(--sur-or); transform: rotate(90deg); }

/* Menu mobile */
.fenetre--menu {
  width: min(440px, calc(100vw - 2rem)); padding: 1.15rem 1.3rem 1.4rem; gap: 1.1rem;
  background: linear-gradient(180deg, var(--verre-haut), transparent 35%), var(--verre);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
}
.fenetre--menu[open] { display: grid; }
.menu__nav { display: grid; }
.menu__nav a {
  position: relative; overflow: hidden; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.015em;
  padding: .85rem .2rem; border-bottom: 1px solid var(--ligne); display: flex; justify-content: space-between; align-items: center; transition: color var(--t-2), padding var(--t-2) var(--ease);
}
.menu__nav a .ic { color: var(--or-texte); opacity: .5; transition: transform var(--t-2) var(--ease), opacity var(--t-2); }
.menu__nav a:hover, .menu__nav a:focus-visible { color: var(--or-texte); padding-left: .5rem; }
.menu__nav a:hover .ic { opacity: 1; transform: translateX(3px); }
.menu__nav a[aria-current] { color: var(--or-texte); padding-left: .9rem; }
.menu__nav a[aria-current]::before { content: ""; position: absolute; left: 0; top: 32%; bottom: 32%; width: 3px; border-radius: 3px; background: var(--or); box-shadow: 0 0 12px rgba(225, 173, 111, .6); }
.menu__actions { display: grid; gap: .6rem; }
@media (min-width: 1121px) { .fenetre--menu { display: none !important; } }

@media (max-width: 1120px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 480px) { .logo__img { height: 24px; } .lang button { padding: .34rem .5rem; } }

/* ─────────────────────────── 6. Accueil ─────────────────────────── */
.hero { position: relative; min-height: max(640px, 100svh); display: grid; align-items: end; padding-top: calc(var(--hdr-h) + 2rem); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; transform: scale(1.06); animation: hero-zoom 26s var(--ease) both; }
.hero__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--scrim-1) 0%, rgba(11, 16, 21, .72) 34%, var(--scrim-2) 62%, rgba(11, 16, 21, .08) 100%),
              linear-gradient(180deg, rgba(11, 16, 21, .45) 0%, rgba(11, 16, 21, .05) 35%, rgba(11, 16, 21, .78) 80%, var(--fond) 100%); }
.hero__in { position: relative; padding-bottom: clamp(7rem, 12vw, 9.5rem); color: #F3EFE8; }
.hero__sig { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin-bottom: 1.4rem; display: inline-flex; align-items: center; gap: .8rem; }
.hero__sig::before { content: ""; width: 1.75rem; height: 1px; background: var(--or); }
.hero__titre { max-width: 20ch; font-size: clamp(2.4rem, 4.7vw, 4.6rem); text-transform: uppercase; color: #F3EFE8;
  text-shadow: 0 1px 2px rgba(11, 16, 21, .35), 0 10px 36px rgba(11, 16, 21, .5); }
.hero__titre em { font-style: normal; color: var(--or); display: block; }
.hero__sub { max-width: 50ch; margin-top: 1.6rem; color: rgba(243, 239, 232, .78); font-size: clamp(1rem, 1.1vw, 1.16rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero__cta .btn--contour { --or-texte: #F2CC93; border-color: rgba(242, 204, 147, .55); }
.hero__in > * { animation: montee .9s var(--ease-out) both; }
.hero__in > :nth-child(1) { animation-delay: .05s; }
.hero__in > :nth-child(2) { animation-delay: .15s; }
.hero__in > :nth-child(3) { animation-delay: .28s; }
.hero__in > :nth-child(4) { animation-delay: .4s; }
.hero__in > :nth-child(5) { animation-delay: .55s; }

/* Trame technique : grille fine sur la moitié droite du héros, fondue vers les bords */
.hero__trame {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(55% 65% at 78% 42%, #000 10%, transparent 75%);
  mask-image: radial-gradient(55% 65% at 78% 42%, #000 10%, transparent 75%);
}

/* Télémétrie du héros : chiffres du catalogue, onde électrique en balayage continu.
   Toujours sur fond sombre (photo + voile), quel que soit le thème. */
.hud {
  --verre: rgba(9, 14, 20, .46); --verre-haut: rgba(255, 255, 255, .06); --verre-bord: rgba(255, 255, 255, .14); --verre-reflet: rgba(255, 255, 255, .1);
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; margin-top: clamp(1.8rem, 3vw, 2.6rem); max-width: 660px; border-radius: var(--r-l);
  padding: .85rem 1.1rem 1rem; display: grid; gap: .55rem; color: #F3EFE8;
}
.hud::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t-2);
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(98, 211, 228, .12), transparent 65%);
}
.hud:hover::after { opacity: 1; }
.hud__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hud__k { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: #8FE2EE; }
.hud__led { width: 7px; height: 7px; border-radius: 50%; background: #62D3E4; box-shadow: 0 0 10px #62D3E4; position: relative; }
.hud__led::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(98, 211, 228, .7); animation: pouls 2.2s ease-out infinite; }
.hud__id { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: rgba(243, 239, 232, .45); }
.hud__onde { width: 100%; height: 30px; overflow: visible; }
.hud__grille { stroke: rgba(255, 255, 255, .07); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.hud__trace {
  fill: none; stroke: #62D3E4; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 70 230; animation: balayage 3.6s linear infinite; filter: drop-shadow(0 0 4px rgba(98, 211, 228, .85));
}
@keyframes balayage { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes pouls { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.hud__mesures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.hud__mesure { padding: .2rem .9rem .1rem; border-left: 1px solid rgba(255, 255, 255, .1); min-width: 0; }
.hud__mesure:first-child { border-left: 0; padding-left: 0; }
.hud__mesure dt { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 239, 232, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud__mesure dd { margin: .3rem 0 0; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.hud__mesure b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -.03em; line-height: 1; color: #F3EFE8; font-variant-numeric: tabular-nums; }
.hud__mesure small { font-family: var(--font-mono); font-size: .64rem; color: #E8B97E; }
@media (max-width: 700px) {
  .hud__mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .7rem; }
  .hud__mesure:nth-child(3) { border-left: 0; padding-left: 0; }
}
@keyframes montee { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Portes d'entrée : quatre parcours, en verre au bas du héros */
.portes { position: relative; z-index: 2; margin-top: clamp(-5.5rem, -8vw, -4rem); }
.portes__grille { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-l); overflow: hidden; }
.porte { position: relative; overflow: hidden; display: block; padding: 1.5rem 1.4rem 1.6rem; border-left: 1px solid var(--verre-bord); transition: background-color var(--t-2); }
.porte:first-child { border-left: 0; }
.porte:hover { background: rgba(225, 173, 111, .08); }
.porte__k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); display: block; margin-bottom: .75rem; }
.porte__t { font-family: var(--font-display); font-weight: 600; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.porte__t .ic { color: var(--or-texte); opacity: 0; transform: translateX(-4px); transition: all var(--t-2) var(--ease); }
.porte:hover .porte__t .ic { opacity: 1; transform: none; }
.porte__d { margin-top: .45rem; font-size: .84rem; color: var(--texte-2); line-height: 1.5; }

/* Chaîne de l'énergie : rail à cinq maillons */
.chaine { position: relative; }
.chaine__rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.2rem 1.4rem; padding-top: 2rem; }
.chaine__rail::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--or), var(--ligne-or) 60%, transparent); }
.maillon { position: relative; }
.maillon::before { content: ""; position: absolute; top: calc(-2rem - 5px); left: 0; width: 10px; height: 10px; background: var(--fond); border: 1px solid var(--or); transform: rotate(45deg); }
.maillon__n { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; color: var(--or-texte); display: block; margin-bottom: .8rem; }
.maillon__t { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; letter-spacing: -.01em; display: block; }
.maillon__d { margin-top: .55rem; font-size: .88rem; color: var(--texte-2); }

/* Gammes : grille asymétrique de neuf familles */
.gammes__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gamme { display: flex; flex-direction: column; overflow: hidden; color: inherit; }
.gamme--xl { grid-column: span 2; grid-row: span 2; }
.gamme__visuel { aspect-ratio: 1; border-radius: calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0 0; }
.gamme__visuel img { padding: 9%; transition: transform var(--t-3) var(--ease); }
.gamme:hover .gamme__visuel img { transform: scale(1.05); }
.gamme--xl .gamme__visuel { aspect-ratio: auto; flex: 1; min-height: 320px; }
.gamme__corps { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.gamme__ref { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; color: var(--or-texte); }
.gamme__t { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.gamme--xl .gamme__t { font-size: 1.35rem; }
.gamme__a { font-size: .84rem; color: var(--texte-2); line-height: 1.5; }
.gamme__specs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.gamme__specs li { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; color: var(--texte-2); border: 1px solid var(--ligne-2); padding: .25rem .5rem; border-radius: var(--r-pill); }

/* Échelle de puissance */
.echelle { position: relative; overflow: hidden; }
.echelle__rail { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.echelle__ligne { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ligne-2); }
.echelle__lueur { position: absolute; top: -1px; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, transparent, var(--or)); box-shadow: 0 0 24px 3px rgba(225, 173, 111, .5); transition: width 2.4s var(--ease); }
.echelle.is-lit .echelle__lueur { width: 100%; }
.paliers { display: grid; grid-template-columns: repeat(6, 1fr); }
.palier { position: relative; padding: 2.4rem .9rem 0 0; opacity: .22; transition: opacity .7s ease; }
.echelle.is-lit .palier { opacity: 1; }
.echelle.is-lit .palier:nth-child(2) { transition-delay: .35s; }
.echelle.is-lit .palier:nth-child(3) { transition-delay: .7s; }
.echelle.is-lit .palier:nth-child(4) { transition-delay: 1.05s; }
.echelle.is-lit .palier:nth-child(5) { transition-delay: 1.4s; }
.echelle.is-lit .palier:nth-child(6) { transition-delay: 1.75s; }
.palier::before { content: ""; position: absolute; top: -5px; left: 0; width: 10px; height: 10px; background: var(--fond); border: 1px solid var(--or); transform: rotate(45deg); }
.palier__ref { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; color: var(--or-texte); display: block; min-height: 1.4em; }
.palier__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.03em; display: block; margin: .45rem 0 .1rem; }
.palier__u { font-family: var(--font-mono); font-size: .78rem; color: var(--sable); }
.palier__d { margin-top: .6rem; font-size: .82rem; color: var(--texte-2); line-height: 1.45; }
.echelle__note { font-family: var(--font-mono); font-size: .72rem; color: var(--texte-3); margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--ligne); max-width: 72ch; }

/* Solutions par secteur : onglets */
.solutions { background: var(--fond-2); border-block: 1px solid var(--ligne); }
.onglets { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .25rem 0 .75rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.onglets::-webkit-scrollbar { display: none; }
.onglets .chip { scroll-snap-align: start; }
.panneau { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-top: clamp(1.5rem, 3vw, 2.5rem); animation: fondu .45s var(--ease-out); }
.panneau[hidden] { display: none; }
@keyframes fondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panneau__t { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.panneau__d { margin-top: 1rem; color: var(--texte-2); max-width: 56ch; font-size: 1.02rem; }
.panneau__materiel { margin-top: 1.6rem; }
.panneau__materiel h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); font-weight: 500; margin-bottom: .7rem; }
.panneau__materiel ul { display: flex; flex-wrap: wrap; gap: .45rem; }
.panneau__materiel a { font-family: var(--font-mono); font-size: .74rem; padding: .45rem .8rem; border: 1px solid var(--ligne-2); border-radius: var(--r-pill); transition: all var(--t-2); display: inline-flex; align-items: center; gap: .4rem; }
.panneau__materiel a:hover { border-color: var(--or); color: var(--or-texte); }
.panneau__cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.panneau__media { border-radius: var(--r-l); padding: 1rem; }
.panneau__media .tuile { border-radius: calc(var(--r-l) - 6px); aspect-ratio: 1; }
.panneau__media .tuile img { padding: 8%; }
.panneau__media .tuile--photo img { object-fit: cover; padding: 0; }

/* Pourquoi ENSKY */
.pourquoi__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.preuves { display: grid; align-content: start; }
.preuve { padding: 1.35rem 0 1.35rem 1.4rem; border-top: 1px solid var(--ligne); position: relative; }
.preuve:last-child { border-bottom: 1px solid var(--ligne); }
.preuve::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--or); border-radius: 2px; transform: scaleY(.35); transform-origin: top; transition: transform var(--t-3) var(--ease); }
.preuve:hover::before { transform: scaleY(1); }
.preuve__t { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; display: block; }
.preuve__d { margin-top: .4rem; font-size: .9rem; color: var(--texte-2); }
.pourquoi__media { position: relative; border-radius: var(--r-l); overflow: hidden; min-height: 420px; isolation: isolate; }
.pourquoi__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pourquoi__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 16, 21, .05) 0%, rgba(11, 16, 21, .55) 60%, rgba(11, 16, 21, .85) 100%); }
.chiffres { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: var(--r-m); overflow: hidden; --texte: #F3EFE8; --texte-2: rgba(243, 239, 232, .72); --or-texte: #E8B97E; }
.chiffre { padding: 1rem 1.1rem; background: rgba(17, 24, 32, .55); }
.chiffre b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--or-texte); letter-spacing: -.03em; line-height: 1; display: block; }
.chiffre b small { font-size: .55em; font-weight: 700; }
.chiffre span { display: block; font-size: .78rem; color: var(--texte-2); margin-top: .35rem; line-height: 1.4; }

/* Présence */
.presence { background: var(--bande); color: var(--bande-texte); }
.presence__grille { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.siege { padding: 1.6rem; border-radius: var(--r-l); }
.siege__k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); }
.siege__v { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin-top: .4rem; }
.siege__a { margin-top: .6rem; color: var(--texte-2); }
.siege__liens { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.villes { display: grid; gap: 1.4rem; }
.villes h3 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); font-weight: 500; margin-bottom: .75rem; }
.villes ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.villes li { font-family: var(--font-display); font-weight: 600; font-size: .95rem; padding: .6rem 1rem; border: 1px solid var(--ligne-2); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: .5rem; }
.villes li .ic { color: var(--or-texte); width: .95rem; height: .95rem; }
.villes li small { font-family: var(--font-mono); font-weight: 400; font-size: .68rem; color: var(--texte-2); }

/* Partenaires */
.partenaire { background: var(--or-2); color: var(--encre); }
.partenaire__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.partenaire h2 { max-width: 18ch; }
.partenaire .lede { color: rgba(14, 20, 26, .78); }
.partenaire__liste { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; }
.partenaire__liste li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; font-weight: 400; }
.partenaire__liste .ic { color: var(--encre); margin-top: .22rem; flex: none; }

/* Appel final */
.final__panneau { border-radius: var(--r-l); padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad); text-align: center; position: relative; overflow: hidden; }
.final__panneau::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(40% 50% at 50% 100%, rgba(225, 173, 111, .22), transparent 70%); pointer-events: none; }
.final__panneau > * { position: relative; }
.final__panneau h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); text-transform: uppercase; max-width: 18ch; margin-inline: auto; }
.final__panneau .lede { margin-inline: auto; }
.final__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.2rem; }

/* ─────────────────────────── 7. Pages intérieures ─────────────────────────── */
.en-tete { padding: calc(var(--hdr-h) + clamp(3rem, 7vw, 5.5rem)) var(--pad) clamp(1.5rem, 3vw, 2.5rem); position: relative; }
.en-tete__titre { font-size: clamp(2.1rem, 4.2vw, 3.5rem); text-transform: uppercase; max-width: 24ch; letter-spacing: -.03em; }
.page--catalogue .en-tete, .page--documents .en-tete, .page--projets .en-tete, .page--projet .en-tete, .page--404 .en-tete, .page--hors-ligne .en-tete {
  background: radial-gradient(60% 70% at 85% 0%, rgba(225, 173, 111, .14), transparent 70%);
}

/* Barre d'outils du catalogue */
.outils { position: sticky; top: var(--hdr-h); z-index: 50; padding-block: .85rem; border-block: 1px solid var(--verre-bord); border-radius: 0; box-shadow: none; }
.outils__in { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.champ-recherche { flex: 1; min-width: 220px; position: relative; }
.champ-recherche input {
  width: 100%; background: var(--fond-2); border: 1px solid var(--ligne-2); color: var(--texte); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: .8rem; padding: .72rem 1rem .72rem 2.5rem; transition: border-color var(--t-2);
}
.champ-recherche input::placeholder { color: var(--texte-3); }
.champ-recherche input:focus { border-color: var(--or); outline: none; }
.champ-recherche .ic { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--or-texte); width: .95rem; height: .95rem; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.compteur { font-family: var(--font-mono); font-size: .7rem; color: var(--texte-3); white-space: nowrap; margin-left: auto; }

/* Familles et produits */
.famille { padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--ligne); }
.famille[hidden] { display: none; }
.famille__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.famille__id { display: flex; align-items: center; gap: 1.2rem; flex: 1; min-width: 260px; }
.famille__vignette { width: 72px; height: 72px; border-radius: var(--r-m); flex: none; }
.famille__vignette img { padding: 8%; }
.famille__t { font-size: clamp(1.35rem, 2.3vw, 1.9rem); text-transform: uppercase; }
.famille__a { color: var(--texte-2); max-width: 60ch; margin-top: .5rem; font-size: .92rem; }
.produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }
.produit { text-align: left; cursor: pointer; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.produit[hidden] { display: none; }
.produit__visuel { aspect-ratio: 1; border-radius: calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0 0; }
.produit__visuel img { padding: 9%; transition: transform var(--t-3) var(--ease); }
.produit:hover .produit__visuel img { transform: scale(1.05); }
.produit__visuel--vide { display: flex; align-items: center; justify-content: center; background: var(--fond-3); }
.produit__visuel--vide span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); }
.produit__corps { padding: 1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.produit__haut { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.produit__ref { font-family: var(--font-mono); font-size: .82rem; font-weight: 500; color: var(--or-texte); letter-spacing: .03em; }
.produit__sg { font-family: var(--font-mono); font-size: .7rem; color: var(--texte-3); letter-spacing: .04em; }
.produit__prix { font-family: var(--font-mono); font-size: .92rem; font-weight: 600; color: var(--or-texte); }
.produit__specs { display: grid; gap: .35rem; margin-top: .2rem; }
.produit__specs li { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; padding-bottom: .35rem; border-bottom: 1px dotted var(--ligne-2); }
.produit__specs .k { color: var(--texte-2); }
.produit__specs .v { font-family: var(--font-mono); font-size: .76rem; text-align: right; }
.produit__plus { margin-top: auto; padding-top: .5rem; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or-texte); }
.produit__plus .ic { transition: transform var(--t-2) var(--ease); }
.produit:hover .produit__plus .ic { transform: translateX(3px); }

/* Fiche technique : fenêtre centrée, visuel à gauche, données à droite */
.fenetre--fiche { width: min(1060px, calc(100vw - 2rem)); height: min(88dvh, 880px); }
.fiche__panneau { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fiche__tete {
  position: sticky; top: 0; z-index: 3; border-bottom: 1px solid var(--ligne); padding: 1.15rem clamp(1.2rem, 3vw, 1.8rem);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--verre); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.fiche__ref { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; color: var(--or-texte); letter-spacing: .03em; }
.fiche__fam { font-size: .82rem; color: var(--texte-2); margin-top: .2rem; }
.fiche__x {
  position: relative; overflow: hidden; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--ligne-2); background: transparent; color: var(--texte);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: all var(--t-2);
}
.fiche__x:hover { background: var(--or); border-color: var(--or); color: var(--sur-or); transform: rotate(90deg); }
.fiche__grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.fiche__grille--seule { grid-template-columns: minmax(0, 1fr); }
.fiche__media { position: sticky; top: 4.6rem; padding: clamp(1rem, 2.4vw, 1.6rem); }
.fiche__visuel { aspect-ratio: 1; border-radius: var(--r-m); box-shadow: var(--ombre-1); }
.fiche__visuel img { padding: 6%; }
.fiche__corps { padding: 1.5rem clamp(1.2rem, 3vw, 2rem) 2.2rem; border-left: 1px solid var(--ligne); min-height: 100%; }
.fiche__grille--seule .fiche__corps { border-left: 0; }
@media (max-width: 760px) {
  .fenetre--fiche { height: calc(100dvh - 1.5rem); max-width: calc(100vw - 1rem); }
  .fiche__grille { grid-template-columns: 1fr; }
  .fiche__media { position: static; padding-bottom: 0; }
  .fiche__visuel { aspect-ratio: 16 / 10; }
  .fiche__corps { border-left: 0; }
}
.fiche__prix { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--or-texte); margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ligne); }
.fiche h3 { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--or-texte); margin: 1.8rem 0 .7rem; }
.fiche h3:first-child { margin-top: 0; }
.fiche__note { margin-top: 1.4rem; }
.fiche__actions { display: grid; gap: .6rem; margin-top: 1.8rem; }
.fiche__partage { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.4rem; }
.fiche__partage .btn.ok { background: var(--or); color: var(--sur-or); border-color: var(--or); }

/* Documents */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.doc { display: flex; align-items: center; gap: .85rem; padding: .8rem .95rem; border-radius: var(--r-s); border: 1px solid var(--ligne); background: var(--fond-2); transition: all var(--t-2); }
a.doc:hover { border-color: var(--or); transform: translateY(-2px); }
.doc__ic { color: var(--or-texte); }
.doc__n { font-family: var(--font-mono); font-size: .8rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc__m { font-family: var(--font-mono); font-size: .68rem; color: var(--texte-3); flex: none; }
.doc__dl { color: var(--or-texte); flex: none; }
.doc--attente { opacity: .55; border-style: dashed; }
.officiel { margin-top: 2.2rem; }
.officiel h3 { font-size: 1.1rem; }
.officiel p { color: var(--texte-2); font-size: .9rem; margin: .35rem 0 .9rem; max-width: 62ch; }
.aide { background: var(--bande); color: var(--bande-texte); }
.aide__in { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.aide h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.aide p { color: var(--texte-2); max-width: 52ch; margin-top: .6rem; }

/* Projets : liste */
.filtres { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.projets-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.4rem; }
.projet-carte { display: flex; flex-direction: column; overflow: hidden; color: inherit; }
.projet-carte[hidden] { display: none; }
.projet-carte__media { position: relative; isolation: isolate; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fond-3); border-radius: calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0 0; }
.projet-carte__media picture { position: relative; z-index: 1; width: 100%; height: 100%; }
.projet-carte__media picture img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-3) var(--ease), opacity .7s var(--ease-out); }
.projet-carte:hover .projet-carte__media picture img { transform: scale(1.04); }
.projet-carte__media--vide { display: flex; align-items: center; justify-content: center; color: var(--texte-3); }
.projet-carte__media--vide .ic { width: 2rem; height: 2rem; }
.projet-carte__corps { padding: 1.15rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; }
.projet-carte__t { font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; }
.projet-carte__r { font-size: .9rem; color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.projet-carte__pied { margin-top: auto; padding-top: .6rem; display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.projet-carte__pied .lien { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or-texte); }
.projet-carte__pied .lien .ic { transition: transform var(--t-2) var(--ease); }
.projet-carte:hover .lien .ic { transform: translateX(3px); }

/* Projet : page dédiée */
.projet-hero { position: relative; min-height: min(72vh, 680px); display: grid; align-items: end; padding-top: calc(var(--hdr-h) + 2rem); overflow: hidden; isolation: isolate; }
.projet-hero__media { position: absolute; inset: 0; z-index: -2; background: var(--fond-3); }
.projet-hero__media picture { height: 100%; }
.projet-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.projet-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 16, 21, .35) 0%, rgba(11, 16, 21, .15) 35%, rgba(11, 16, 21, .86) 85%, var(--fond) 100%); }
.projet-hero__in { padding-bottom: clamp(2.5rem, 5vw, 4rem); --texte: #F3EFE8; --texte-2: rgba(243, 239, 232, .75); --texte-3: rgba(243, 239, 232, .6); --or-texte: #E8B97E; color: var(--texte); }
.projet-hero__in .fil { color: var(--texte-3); }
.projet-hero__t { font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: 22ch; letter-spacing: -.03em; margin-top: 1rem; }
.projet-hero__in .meta { margin-top: 1.2rem; font-size: .8rem; }
.projet-hero--sans-image { min-height: 0; }
.projet-hero--sans-image .projet-hero__scrim { background: radial-gradient(60% 70% at 85% 0%, rgba(225, 173, 111, .14), transparent 70%); }
.projet-hero--sans-image .projet-hero__in { --texte: inherit; --texte-2: inherit; --texte-3: inherit; --or-texte: inherit; color: inherit; }
.projet__corps { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.projet__texte p { font-size: 1.04rem; line-height: 1.75; color: var(--texte-2); max-width: 70ch; }
.projet__texte p + p { margin-top: 1.1rem; }
.projet__texte p:first-child { color: var(--texte); font-size: 1.15rem; }
.projet__cote { position: sticky; top: calc(var(--hdr-h) + 1.5rem); border-radius: var(--r-l); padding: 1.5rem; display: grid; gap: 1.3rem; }
.projet__cote h3 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); font-weight: 500; }
.projet__cote dl { display: grid; gap: .55rem; margin: .6rem 0 0; }
.projet__cote dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; padding-bottom: .55rem; border-bottom: 1px dotted var(--ligne-2); }
.projet__cote dt { color: var(--texte-2); }
.projet__cote dd { margin: 0; font-family: var(--font-mono); font-size: .82rem; text-align: right; }
.projet__cote .panneau__materiel { margin-top: 0; }
.projet__cote .panneau__materiel h4 { margin-bottom: .6rem; }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }
.galerie__item { position: relative; isolation: isolate; padding: 0; border: 0; cursor: zoom-in; border-radius: var(--r-m); overflow: hidden; background: var(--fond-3); aspect-ratio: 4 / 3; box-shadow: var(--ombre-1); }
.galerie__item:first-child:nth-last-child(n+3) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galerie__item picture { position: relative; z-index: 1; width: 100%; height: 100%; }
.galerie__item picture img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-3) var(--ease), opacity .7s var(--ease-out); }
.galerie__item:hover picture img { transform: scale(1.04); }
.galerie__item::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(11, 16, 21, .6)); opacity: 0; transition: opacity var(--t-2); }
.galerie__item:hover::after, .galerie__item:focus-visible::after { opacity: 1; }
.galerie__item .ic { position: absolute; right: .75rem; bottom: .75rem; width: 1.4rem; height: 1.4rem; color: #fff; z-index: 2; opacity: 0; transform: translateY(4px); transition: all var(--t-2) var(--ease); }
.galerie__item:hover .ic, .galerie__item:focus-visible .ic { opacity: 1; transform: none; }
.galerie__legende { position: absolute; left: .9rem; right: 2.6rem; bottom: .8rem; z-index: 2; color: #fff; font-size: .78rem; text-align: left; opacity: 0; transition: opacity var(--t-2); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.galerie__item:hover .galerie__legende { opacity: 1; }
.projet-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); }
.projet-nav a { padding: 1.2rem 1.4rem; display: grid; gap: .35rem; }
.projet-nav a:last-child:not(:first-child) { text-align: right; }
.projet-nav .k { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); }
.projet-nav .t { font-family: var(--font-display); font-weight: 600; }

/* Visionneuse : fenêtre modale plein écran, photo centrée sur fond flouté */
.lightbox {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: auto; height: auto; max-width: none; max-height: none;
  background: rgba(5, 8, 11, .78); color: #F3EFE8; overflow: hidden;
}
.lightbox[open] { display: block; animation: voile-entree .3s ease both; }
.lightbox::backdrop { background: rgba(4, 8, 12, .5); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); }
.lightbox.is-fermeture { animation: voile-sortie .24s ease both; }
/* Barre et légende flottent au-dessus de la scène : la photo est centrée sur l'écran entier,
   avec la même marge en haut et en bas. */
.lightbox__barre { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--pad); font-family: var(--font-mono); font-size: .74rem; color: rgba(243, 239, 232, .7); }
.lightbox__compteur { display: inline-flex; align-items: center; gap: .6rem; letter-spacing: .12em; }
.lightbox__compteur::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #62D3E4; box-shadow: 0 0 8px #62D3E4; }
.lightbox__x, .lightbox__nav button {
  position: relative; overflow: hidden; width: 46px; height: 46px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .18); background: rgba(17, 24, 32, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F3EFE8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--t-2);
}
.lightbox__x:hover, .lightbox__nav button:hover { background: var(--or); border-color: var(--or); color: var(--sur-or); }
.lightbox__x:hover { transform: rotate(90deg); }
.lightbox__scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 78px var(--pad); }
.lightbox__scene picture { display: contents; }
.lightbox__scene img { max-width: 100%; max-height: calc(100dvh - 156px); width: auto; height: auto; object-fit: contain; border-radius: var(--r-s); box-shadow: 0 30px 90px rgba(2, 8, 14, .7), 0 0 0 1px rgba(255, 255, 255, .06); animation: fondu .3s var(--ease-out); }
.lightbox__nav { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; pointer-events: none; }
.lightbox__nav button { pointer-events: auto; }
.lightbox__legende { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: .9rem var(--pad) 1.3rem; text-align: center; font-size: .92rem; color: rgba(243, 239, 232, .85); pointer-events: none; }

/* 404 */
.page--404 .en-tete, .page--hors-ligne .en-tete { min-height: 70vh; display: grid; align-content: center; text-align: center; }
.page--404 .en-tete__titre, .page--hors-ligne .en-tete__titre { margin-inline: auto; }
.page--404 .lede, .page--hors-ligne .lede { margin-inline: auto; }
.page--404 .actions, .page--hors-ligne .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ─────────────────────────── 8. Pied de page et flottants ─────────────────────────── */
.ftr { border-top: 1px solid var(--ligne); padding-block: clamp(3rem, 6vw, 4.5rem) 1.6rem; background: var(--fond); }
.ftr__grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.ftr .logo__img { height: 32px; }
.ftr__adresse { margin-top: 1.1rem; display: grid; gap: .3rem; font-size: .88rem; color: var(--texte-2); }
.ftr__adresse strong { color: var(--texte); font-weight: 500; }
.ftr__adresse a:hover { color: var(--or-texte); }
.ftr__points { font-size: .82rem; color: var(--texte-3); margin-top: .3rem; }
.social { display: flex; gap: .5rem; margin-top: 1.3rem; }
.social a { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--ligne-2); color: var(--or-texte); transition: all var(--t-2); }
.social a:hover { background: var(--or); border-color: var(--or); color: var(--sur-or); transform: translateY(-2px); }
.social svg { width: 15px; height: 15px; }
.ftr h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--or-texte); font-weight: 500; margin-bottom: 1rem; }
.ftr__col ul { display: grid; gap: .55rem; }
.ftr__col a { font-size: .88rem; color: var(--texte-2); transition: color var(--t-2); }
.ftr__col a:hover { color: var(--or-texte); }
.ftr__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 1.5rem; margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid var(--ligne); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; color: var(--texte-3); }
.ftr__bas a:hover { color: var(--or-texte); }

.wa-flottant {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 120; overflow: hidden;
  display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.1rem; border-radius: var(--r-pill);
  background: var(--or); color: var(--sur-or); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), var(--ombre-or); transition: transform var(--t-2) var(--ease), background-color var(--t-2);
}
.wa-flottant .ic { width: 1.2rem; height: 1.2rem; }
.wa-flottant:hover { transform: translateY(-3px); background: var(--or-3); }
@media (max-width: 640px) { .wa-flottant span { display: none; } .wa-flottant { padding: .95rem; } }

/* Utilitaires (évitent tout style en ligne, incompatible avec la CSP) */
[data-i="0"] { --i: 0; } [data-i="1"] { --i: 1; } [data-i="2"] { --i: 2; } [data-i="3"] { --i: 3; } [data-i="4"] { --i: 4; } [data-i="5"] { --i: 5; }
.mt-2 { margin-top: 1.6rem; }
.mt-3 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.max-72 { max-width: 72ch; }
.max-76 { max-width: 76ch; }

/* ─────────────────────────── 9. Adaptation ─────────────────────────── */
@media (max-width: 1180px) {
  .gammes__grille { grid-template-columns: repeat(3, 1fr); }
  .gamme--xl { grid-column: span 3; grid-row: span 1; flex-direction: row; }
  .gamme--xl .gamme__visuel { width: 42%; min-height: 0; aspect-ratio: 1; border-radius: calc(var(--r-m) - 1px) 0 0 calc(var(--r-m) - 1px); }
  .paliers { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.2rem; }
  .echelle__ligne, .echelle__lueur { display: none; }
  .palier { border-top: 1px solid var(--ligne-2); padding-top: 2rem; }
}
@media (max-width: 960px) {
  .chaine__rail { grid-template-columns: repeat(2, 1fr); }
  .chaine__rail::before { display: none; }
  .maillon::before { display: none; }
  .maillon { border-top: 1px solid var(--ligne-2); padding-top: 1.2rem; }
  .pourquoi__grille, .presence__grille, .partenaire__grille, .panneau { grid-template-columns: 1fr; }
  .panneau__media { max-width: 420px; }
  .projet__corps { grid-template-columns: 1fr; }
  .projet__cote { position: static; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie__item:first-child:nth-last-child(n+3) { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; }
  .ftr__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .portes__grille { grid-template-columns: 1fr 1fr; }
  .porte { border-left: 0; border-top: 1px solid var(--verre-bord); }
  .porte:nth-child(odd) { border-right: 1px solid var(--verre-bord); }
  .porte:nth-child(-n+2) { border-top: 0; }
  .gammes__grille { grid-template-columns: repeat(2, 1fr); }
  .gamme--xl { grid-column: span 2; }
  .hero__in { padding-bottom: 6.5rem; }
  .portes { margin-top: -4.5rem; }
}
@media (max-width: 600px) {
  :root { --section: clamp(3rem, 12vw, 4.5rem); }
  .hero { min-height: max(560px, 92svh); }
  .hero__titre { font-size: clamp(2.1rem, 10vw, 3rem); }
  .portes__grille { grid-template-columns: 1fr; }
  .porte { border-right: 0 !important; border-top: 1px solid var(--verre-bord); }
  .porte:first-child { border-top: 0; }
  .chaine__rail { grid-template-columns: 1fr; }
  .gammes__grille { grid-template-columns: 1fr; }
  .gamme--xl { grid-column: span 1; flex-direction: column; }
  .gamme--xl .gamme__visuel { width: 100%; border-radius: calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0 0; }
  .paliers { grid-template-columns: 1fr; }
  .partenaire__liste { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: 1fr 1fr; left: .6rem; right: .6rem; bottom: .6rem; }
  .pourquoi__media { min-height: 500px; }
  .fiche__partage { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .projet-nav { grid-template-columns: 1fr; }
  .projet-nav a:last-child:not(:first-child) { text-align: left; }
  .ftr__grille { grid-template-columns: 1fr; gap: 2rem; }
  .en-tete__titre { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .lightbox__scene { padding: 70px .75rem; }
  .lightbox__scene img { max-height: calc(100dvh - 140px); }
}
@media (min-width: 1800px) {
  :root { --wrap: 1480px; }
}

/* ─────────────────────────── 10. Mouvement et transitions ───────────────────────────
   Tout le mouvement du site est déclaré ici : révélations au défilement,
   entrées de page, micro-interactions, barre de lecture et transitions entre
   pages. Chaque effet repose sur transform et opacity (composés par la carte
   graphique, jamais de recalcul de mise en page) et s'efface entièrement
   lorsque le visiteur demande moins d'animations. */

/* Révélation au défilement : montée par défaut, variantes directionnelles,
   cadence réglée par data-i (0 à 5). Aucun écouteur de défilement. */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.rise--g { transform: translateX(-32px); }
.rise--d { transform: translateX(32px); }
.rise--z { transform: scale(.94) translateY(10px); }
.rise--f { transform: none; }
.rise.is-in { opacity: 1; transform: none; }

/* Pages intérieures : l'en-tête entre en scène dès l'affichage */
.en-tete > * { animation: montee .8s var(--ease-out) both; }
.en-tete > :nth-child(2) { animation-delay: .08s; }
.en-tete > :nth-child(3) { animation-delay: .16s; }
.en-tete > :nth-child(4) { animation-delay: .24s; }
.en-tete > :nth-child(5) { animation-delay: .32s; }

/* Héros : titre dévoilé ligne par ligne */
.hero__titre > span, .hero__titre > em { display: block; animation: devoiler 1.1s var(--ease-out) both; animation-delay: .12s; }
.hero__titre > em { animation-delay: .3s; }
@keyframes devoiler {
  from { opacity: 0; transform: translateY(.5em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(-15% 0 -25% 0); }
}

/* Héros : lumière dorée dérivante, grands écrans seulement */
@media (min-width: 800px) and (prefers-reduced-motion: no-preference) {
  .hero::before {
    content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: screen;
    background: radial-gradient(28% 36% at 72% 28%, rgba(225, 173, 111, .32), transparent 70%),
                radial-gradient(22% 30% at 24% 70%, rgba(22, 64, 101, .55), transparent 70%);
    animation: aurore 22s ease-in-out infinite alternate;
  }
}
@keyframes aurore {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.08); }
}

/* Menu mobile : les entrées descendent l'une après l'autre */
.menu__nav a { animation: montee .5s var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 45ms); }

/* Boutons : balayage lumineux au survol, pression nette */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%);
  transform: translateX(-130%); transition: transform .75s var(--ease-out);
}
.btn:hover::before { transform: translateX(130%); }
.chip:active { transform: scale(.95); }
.theme:active, .burger:active, .lang button:active, .social a:active { transform: scale(.94); }

/* Cartes : halo suivant le pointeur, arête éclairée sous le curseur (or au cœur,
   électrique en périphérie), bascule 3D légère (variables posées par le script) */
.carte::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t-2);
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(225, 173, 111, .14), transparent 62%);
}
.carte::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity var(--t-2);
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(242, 204, 147, .95), var(--volt-ligne) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.carte:hover::after, .carte:hover::before { opacity: 1; }

/* Onde lumineuse au clic, depuis le point de contact (posée par le script) */
.onde {
  position: absolute; z-index: 4; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .9;
  background: radial-gradient(circle, rgba(255, 255, 255, .42) 0%, rgba(242, 204, 147, .22) 35%, transparent 62%);
  animation: onde .7s var(--ease-out) forwards;
}
.btn--or .onde, .chip[aria-pressed="true"] .onde, .lang button[aria-pressed="true"] .onde { background: radial-gradient(circle, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .2) 35%, transparent 62%); }
@keyframes onde { to { transform: scale(1); opacity: 0; } }

/* Chargement progressif : les images différées apparaissent en fondu une fois décodées,
   l'aperçu flou (32 px embarqué) ou un reflet de chargement occupe la place en attendant.
   .img-pret n'est posée que par le script : sans lui, tout reste visible. */
img[loading="lazy"] { transition: opacity .7s var(--ease-out), transform var(--t-3) var(--ease); }
.img-pret img[loading="lazy"]:not(.is-charge),
.img-pret .projet-carte__media picture img:not(.is-charge),
.img-pret .galerie__item picture img:not(.is-charge) { opacity: 0; }
.lqip { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(120%); transform: scale(1.15); transition: opacity .9s var(--ease-out); }
.is-charge > .lqip { opacity: 0; }
.img-pret .projet-carte__media:not(.is-charge):not(:has(.lqip)),
.img-pret .galerie__item:not(.is-charge):not(:has(.lqip)) {
  background: linear-gradient(100deg, var(--fond-3) 30%, var(--fond-4) 50%, var(--fond-3) 70%) 0 0 / 220% 100%;
  animation: reflet 1.4s linear infinite;
}
@keyframes reflet { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.carte.is-tilt, .carte.is-tilt:hover {
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px);
  transition: transform .12s linear, border-color var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}

/* Barre de lecture des pages longues : pilotée par le défilement, sans script */
.progression {
  position: fixed; top: 0; left: 0; z-index: 110; width: 100%; height: 3px; pointer-events: none; display: none;
  background: linear-gradient(90deg, var(--or-2), var(--or-3)); transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progression { display: block; animation: progresser linear both; animation-timeline: scroll(root); }
}
@keyframes progresser { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Transitions entre pages (navigateurs compatibles ; navigation ordinaire ailleurs).
   L'en-tête et le bouton WhatsApp restent en place, le contenu glisse en fondu,
   la photo d'une réalisation voyage de sa carte vers l'en-tête de sa page. */
@view-transition { navigation: auto; }
.hdr { view-transition-name: entete; }
.wa-flottant { view-transition-name: whatsapp; }
.projet-hero__media img { view-transition-name: projet-visuel; }
::view-transition-old(root) { animation: .22s var(--ease) both sortir; }
::view-transition-new(root) { animation: .45s var(--ease-out) both entrer; }
::view-transition-group(projet-visuel), ::view-transition-group(zoom) { animation-duration: .55s; animation-timing-function: var(--ease-out); }
::view-transition-old(projet-visuel), ::view-transition-new(projet-visuel),
::view-transition-old(zoom), ::view-transition-new(zoom) { animation: none; height: 100%; object-fit: cover; overflow: clip; }
::view-transition-image-pair(projet-visuel), ::view-transition-image-pair(zoom) { isolation: none; }
@keyframes sortir { to { opacity: 0; transform: translateY(-8px); } }
@keyframes entrer { from { opacity: 0; transform: translateY(12px); } }

/* Visiteurs demandant moins de mouvement : tout est immédiat */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rise, .rise--g, .rise--d, .rise--z { opacity: 1; transform: none; }
  .palier { opacity: 1; }
  .echelle__lueur { width: 100% !important; }
  .hero__media img { transform: none; }
  .hero__titre > span, .hero__titre > em { clip-path: none; }
  .carte::after, .carte::before, .btn::before, .progression, .onde, .hud__led::after { display: none; }
  .hud__trace { stroke-dasharray: none; }
  .img-pret img[loading="lazy"]:not(.is-charge), .img-pret .projet-carte__media picture img:not(.is-charge), .img-pret .galerie__item picture img:not(.is-charge) { opacity: 1; }
  @view-transition { navigation: none; }
}