/* IMEO SV - thème sombre (CORRECTIONS-IMEO-20261023 §2.4, ordre 216). Palette charte v2.8 seule.
   Fonds noirs : canevas E1, grain fixe, vignettage ; jamais de motif sous un texte. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/opensans-latin-var.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrainsmono-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --rouge: #A8001A;
  --noir: #000000;
  --blanc: #FFFFFF;
  --gris-fonce: #3C3C3C;
  --gris: #7A7A7A;
  --gris-clair: #F2F2F2;
  --gris-tres-clair: #FAFAFA;
  --titres: "Montserrat", Arial, sans-serif;
  --texte: "Open Sans", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  --entete: 68px;
  --sortie: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------ base (fond sombre) */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.7 var(--texte); color: var(--gris-clair); background: var(--noir); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
h1, h2, h3 { font-family: var(--titres); color: var(--blanc); line-height: 1.2; margin: 0 0 .6em; }
h1 { font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -.015em; }
h2 { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.3rem); letter-spacing: -.01em; }
h3 { font-weight: 700; font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--blanc); text-underline-offset: 3px; }
a:hover { color: var(--gris-clair); }
strong { color: var(--blanc); font-weight: 600; }
code { font-family: inherit; font-size: .92em; background: var(--gris-clair); color: var(--noir); padding: 0 .3em; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }

.in { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.principal { position: relative; padding-top: var(--entete); }

.evitement { position: absolute; left: -9999px; top: 0; }
.evitement:focus { left: 16px; top: 12px; z-index: 100; background: var(--blanc); color: var(--noir); padding: 8px 14px; }

/* Défilement fluide (E2) : règles de lenis.css */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Étiquettes techniques en JetBrains Mono (B20) : surtitres de l'accueil, zone, numéros de cartes */
.chapeau, .zone, .carte-num { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; }
.chapeau { display: flex; align-items: center; gap: 14px; font-size: .78rem; line-height: 1.4; color: var(--gris-clair); margin-bottom: 1.1em; }
.chapeau .num { padding: 3px 8px; border: 1px solid var(--gris-fonce); color: var(--blanc); letter-spacing: .08em; }
.chapeau::after { content: ""; flex: 0 0 48px; height: 2px; background: var(--rouge); }

/* ------------------------------------------------------------ zones de lecture (blanc) */

.page-metier, .contact, .mentions { background: var(--blanc); color: var(--gris-fonce); }
.page-metier h1, .page-metier h2, .page-metier h3, .contact h1, .contact h2, .contact h3,
.mentions h1, .mentions h2, .mentions h3, .page-metier strong, .contact strong, .mentions strong { color: var(--noir); }
.page-metier a, .contact a, .mentions a { color: var(--rouge); }
.page-metier a:hover, .contact a:hover, .mentions a:hover { color: var(--noir); }

/* ------------------------------------------------------------ boutons */

.btn {
  display: inline-block; font: 700 .9rem/1 var(--titres); text-transform: uppercase; letter-spacing: .05em;
  padding: 15px 24px; border: 2px solid var(--rouge); background: var(--rouge); color: var(--blanc);
  text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.page-metier .btn:hover, .contact .btn:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.page-metier a.btn, .contact a.btn { color: var(--blanc); }
.btn-contour { background: none; border-color: var(--blanc); color: var(--blanc); }
.btn-noir { background: var(--noir); border-color: var(--noir); }
.btn-noir:hover, .page-metier .btn-noir:hover { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.btn[disabled], .btn[disabled]:hover { background: var(--gris-fonce); border-color: var(--gris-fonce); color: var(--blanc); cursor: not-allowed; }

.lien-fleche { font: 700 .9rem var(--titres); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--rouge); padding-bottom: 3px; }
.lien-fleche span { display: inline-block; transition: transform .2s; }
.lien-fleche:hover span { transform: translateX(4px); }

/* ------------------------------------------------------------ barre de progression (E3) */

.progression { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none; }
.progression span { display: block; height: 100%; background: var(--rouge); transform-origin: left; transform: scaleX(0); }

/* ------------------------------------------------------------ en-tête (E18 : se cache au défilement, verre dépoli) */

.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--entete); isolation: isolate;
  background: var(--noir); border-bottom: 1px solid var(--noir);
  transition: transform .6s var(--sortie), background .3s, border-color .3s;
}
.entete::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--noir); opacity: .74; }
.entete.vitre { background: none; border-color: var(--gris-fonce); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.entete.cache { transform: translateY(-100%); }
.entete-in { max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 24px; }
.logo { flex: none; margin-right: auto; padding-right: 40px; }
.logo img { height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: 22px; }
.nav-liste { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-liste a, .nav-tel { font: 600 .92rem var(--titres); color: var(--blanc); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-liste a:hover, .nav-liste a[aria-current="page"] { border-color: var(--rouge); color: var(--blanc); }
.nav-tel { font-weight: 700; }
.nav-devis { padding: 11px 18px; }

.burger { display: none; align-items: center; gap: 10px; background: none; border: 0; padding: 8px; font: 700 .85rem var(--titres); text-transform: uppercase; color: var(--blanc); cursor: pointer; }
.burger-barres, .burger-barres::before, .burger-barres::after { display: block; width: 22px; height: 2px; background: var(--blanc); position: relative; }
.burger-barres::before, .burger-barres::after { content: ""; position: absolute; left: 0; }
.burger-barres::before { top: -7px; }
.burger-barres::after { top: 7px; }

.barre-mobile { display: none; }

/* ------------------------------------------------------------ fil sous tension (mission 214) */

.fil { position: absolute; top: 0; left: max(6px, calc(50% - 640px)); width: 24px; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.fil-fond { fill: none; stroke: var(--gris); stroke-width: 2; opacity: .35; }
.fil-trace { fill: none; stroke: var(--rouge); stroke-width: 2; }
.fil-point { fill: var(--rouge); animation: pouls 1.2s ease-in-out infinite; }
@keyframes pouls { 50% { opacity: .35; } }

/* ------------------------------------------------------------ états de départ des effets
   Posés seulement sous html.effets, classe ajoutée par JavaScript (jamais dans le CSS de base) */

.effets .reveal { opacity: 0; transform: translateY(30px); }
/* E4 à partir de 768 px ; sur mobile le H1 et l'ouverture s'affichent d'emblée (performance, design.md « Mobile ») */
@media (min-width: 768px) {
  .effets [data-apparait] { opacity: 0; transform: translateY(30px); }
  .effets [data-titre] { opacity: 0; }
}
.ligne-titre { padding-bottom: .06em; margin-bottom: -.06em; }
.compte { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ canevas E1, grain fixe, vignettage
   La zone commence au milieu de l'écran : les textes, limités à la moitié gauche, posent sur du noir uni. */

.toile-zone {
  position: absolute; top: 0; bottom: 0; left: 50%; right: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 22%); mask-image: linear-gradient(90deg, transparent 0, #000000 22%);
}
.toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.toile-zone::after {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/img/grain.svg") center / cover no-repeat, radial-gradient(ellipse at 55% 50%, transparent 35%, #000000 96%);
}

/* ------------------------------------------------------------ accueil : ouverture */

.ouverture { position: relative; overflow: hidden; background: var(--noir); color: var(--gris-clair); padding: 96px 0 104px; }
.ouverture-in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, min(560px, calc(50vw - 64px))) 1fr; gap: 48px; align-items: center; }
.ouverture h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; }
.ouverture h1::after { content: ""; display: block; width: 96px; height: 4px; margin-top: 22px; background: var(--rouge); transform-origin: left; animation: filet .4s ease-out 2.6s both; }
@keyframes filet { from { transform: scaleX(0); } }
.accroche { font-size: 1.12rem; }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
.zone { font-size: .8rem; color: var(--blanc); }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 36px; list-style: none; margin: 24px 0 0; padding: 0; }
.logos img { height: 64px; width: auto; }
.logos-blancs img { height: 46px; }

.tableau { width: 100%; max-width: 340px; margin-left: auto; }
.t-cadre { fill: var(--noir); stroke: var(--gris); stroke-width: 2; }
.t-fil { fill: none; stroke: var(--gris); stroke-width: 2; }
.t-rail { stroke: var(--gris-fonce); stroke-width: 4; }
.t-corps { fill: var(--gris-fonce); stroke: var(--gris); stroke-width: 1.5; }
.t-levier { fill: var(--blanc); animation: levier .28s ease-out both; }
.t-voyant { fill: var(--rouge); animation: voyant .3s ease-out 2.3s both; }
.t-trait { stroke: var(--gris-fonce); stroke-width: 2; }
@keyframes levier { from { transform: translateY(22px); } }
@keyframes voyant { from { fill: var(--gris-fonce); } }
.d1 .t-levier { animation-delay: .2s; } .d2 .t-levier { animation-delay: .37s; } .d3 .t-levier { animation-delay: .54s; }
.d4 .t-levier { animation-delay: .71s; } .d5 .t-levier { animation-delay: .88s; } .d6 .t-levier { animation-delay: 1.05s; }
.d7 .t-levier { animation-delay: 1.22s; } .d8 .t-levier { animation-delay: 1.39s; } .d9 .t-levier { animation-delay: 1.56s; }
.d10 .t-levier { animation-delay: 1.73s; } .d11 .t-levier { animation-delay: 1.9s; } .d12 .t-levier { animation-delay: 2.07s; }
.tableau-vu .tableau *, .tableau-vu .ouverture h1::after { animation: none !important; }

/* ------------------------------------------------------------ E12 : bandeau rouge défilant incliné */

.bande-cadre { position: relative; z-index: 3; overflow: hidden; background: var(--noir); padding: 26px 0; margin-top: -26px; }
.bande { background: var(--rouge); color: var(--blanc); padding: 16px 0; transform: rotate(-1.5deg) scale(1.03); }
.bande-piste { display: flex; width: max-content; }
.bande p { display: flex; align-items: center; margin: 0; padding-right: .2em; font: 800 clamp(1.25rem, 2.4vw, 2.2rem)/1.1 var(--titres); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.bande i { display: inline-block; width: .3em; height: .3em; margin: 0 .8em; background: var(--blanc); transform: rotate(45deg); }

/* ------------------------------------------------------------ E8 : « Nos métiers »
   Base (sans JavaScript, mobile, moins de 1 280 px) : cartes empilées. Défilement horizontal épinglé : .horizontal (site.js). */

.metiers { position: relative; background: var(--noir); padding: 96px 0; overflow: hidden; }
.metiers-piste { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.metiers-intro { grid-column: 1 / -1; margin-bottom: 12px; }
.metiers-intro h2 { max-width: 16em; }
.carte {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 24px;
  background: var(--gris-fonce); border-top: 4px solid var(--rouge); padding: 30px 28px 28px;
}
.carte-txt { display: flex; flex-direction: column; flex: 1; }
.carte-num { margin: 0 0 14px; font-size: .78rem; color: var(--gris-clair); }
.carte h3 { margin-top: 16px; font-size: 1.35rem; }
.carte p { font-size: .97rem; }
.carte .suite { margin: auto 0 0; padding-top: 8px; }
.picto { width: 40px; height: 40px; color: var(--blanc); }
.carte:hover .picto * { stroke-dasharray: 1; animation: trace .9s ease-out both; }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.carte-fig { position: relative; height: 210px; background: var(--noir); overflow: hidden; }
.carte-fig::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--rouge), transparent 62%); opacity: .14; }
.fig { position: relative; display: block; width: 100%; height: 100%; }

.metiers.horizontal { padding: 0; z-index: 3; }
.metiers.horizontal .metiers-piste { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; max-width: none; height: 100vh; padding: var(--entete) 0 0; gap: 0; }
.metiers.horizontal .metiers-intro {
  --bord: max(32px, calc((100vw - 1200px) / 2 + 32px));
  flex: none; width: calc(var(--bord) + 500px + 72px); margin: 0; padding: 0 72px 0 var(--bord);
}
.metiers.horizontal .carte { flex: none; width: min(78vw, 1060px); height: min(70vh, 560px); margin-right: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 48px; padding: 48px; }
.metiers.horizontal .carte:last-child { margin-right: max(32px, calc((100vw - 1060px) / 2)); }
.metiers.horizontal .carte-fig { height: 100%; }
.metiers.horizontal .carte h3 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); }

/* figures (couleurs de la charte, opacités) */
.fig-axe { stroke: var(--blanc); stroke-opacity: .25; stroke-dasharray: 2 4; }
.onde { fill: none; stroke-width: 2; }
.o1 { stroke: var(--rouge); }
.o2 { stroke: var(--blanc); stroke-opacity: .8; }
.o3 { stroke: var(--blanc); stroke-opacity: .3; }
.onde-piste { animation: onde 2.4s linear infinite; }
@keyframes onde { to { transform: translateX(-120px); } }

.etoile-liens path { fill: none; stroke: var(--blanc); stroke-opacity: .22; stroke-width: 1.2; }
.etoile-noeud { fill: var(--noir); stroke: var(--blanc); stroke-opacity: .7; stroke-width: 1.5; }
.etoile-centre { fill: var(--rouge); }
.paquet { fill: var(--rouge); offset-rotate: 0deg; animation: paquet 2.2s linear infinite; }
.p1 { offset-path: path("M200 150L90 70"); }
.p2 { offset-path: path("M200 150L320 80"); animation-duration: 1.8s; animation-delay: .4s; animation-direction: reverse; }
.p3 { offset-path: path("M200 150L80 220"); animation-duration: 2.6s; animation-delay: .9s; }
.p4 { offset-path: path("M200 150L310 230"); animation-duration: 2s; animation-delay: .2s; animation-direction: reverse; }
.p5 { offset-path: path("M200 150L200 40"); animation-duration: 1.6s; animation-delay: 1.1s; }
.p6 { offset-path: path("M200 150L200 265"); animation-duration: 2.4s; animation-delay: .6s; animation-direction: reverse; }
@keyframes paquet { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.air path { fill: none; stroke: var(--blanc); stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 6 10; animation: air 1.4s linear infinite; }
.air .air-sortie { stroke: var(--rouge); stroke-opacity: 1; }
@keyframes air { to { stroke-dashoffset: -32; } }
.vent-anneau { fill: none; stroke: var(--blanc); stroke-opacity: .5; stroke-width: 1.5; }
.vent-anneau-in { stroke-opacity: .12; stroke-dasharray: 3 5; }
.vent-rotor { transform-box: view-box; transform-origin: 200px 150px; animation: rotation 2.6s linear infinite; }
.vent-rotor path { fill: var(--blanc); fill-opacity: .85; }
.vent-moyeu { fill: var(--rouge); }
@keyframes rotation { to { transform: rotate(360deg); } }

.rec-trait { fill: none; stroke: var(--blanc); stroke-opacity: .7; stroke-width: 1.5; }
.rec-ecran { fill: var(--rouge); fill-opacity: .12; stroke: var(--rouge); }
.rec-eclair { fill: var(--rouge); }
.rec-cable { fill: none; stroke: var(--blanc); stroke-opacity: .5; stroke-width: 3; stroke-linecap: round; }
.rec-charge { fill: var(--rouge); transform-box: fill-box; transform-origin: 0 50%; }

/* E15 : halo qui suit la souris, posé sur le bord des cartes (jamais sous le texte) */
[data-halo] { position: relative; }
[data-halo]::after {
  content: ""; position: absolute; inset: 0; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--rouge), transparent 70%);
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000000 0 0) content-box exclude, linear-gradient(#000000 0 0);
}
[data-halo]:hover::after { opacity: 1; }

/* ------------------------------------------------------------ accueil : sections */

.services, .pourquoi, .securite, .confiance { padding: 96px 0; }
.services { background: var(--gris-fonce); }

/* E10 : frise de méthode qui se remplit ; --p (0 à 1) piloté par site.js, plein sans JavaScript */
.frise { --p: 1; list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; }
.frise::before, .frise::after { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; }
.frise::before { background: var(--noir); }
.frise::after { background: var(--rouge); transform-origin: left; transform: scaleX(var(--p)); }
.frise li { position: relative; z-index: 1; }
.frise-point { display: block; width: 21px; height: 21px; border-radius: 50%; background: var(--rouge); border: 3px solid var(--rouge); margin-bottom: 20px; transition: background .35s, box-shadow .35s; }
.effets .frise li:not(.allume) .frise-point { background: var(--gris-fonce); }
.frise li.allume .frise-point { box-shadow: 0 0 16px var(--rouge); }
.frise p { font-size: .95rem; }

.pourqui-noir { background: var(--noir); padding: 96px 0; }
.trois-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 36px; }
.trois-col h3 { font-size: 1.6rem; font-weight: 800; padding-top: 16px; border-top: 3px solid var(--rouge); }

.pourquoi { background: var(--gris-fonce); }
.trio { font-size: clamp(1.7rem, 3.4vw, 2.8rem); }
.trio .mot { display: inline-block; }
.engagements { list-style: none; margin: 40px 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.engagements li { --mx: 50%; --my: 50%; background: var(--noir); border-left: 4px solid var(--rouge); padding: 22px 24px; }
.logos-couleur { margin: 24px 0 8px; gap: 16px; }
.logos-couleur li { background: var(--blanc); padding: 12px 18px; }
.logos-couleur img { height: 56px; }

.securite { background: var(--noir); }
.encart { background: var(--gris-fonce); border-left: 6px solid var(--rouge); padding: 44px 48px; }
.encart p:last-child { margin: 0; }

/* E13 : deux rangées de logos en sens inverse ; sans JavaScript, logos posés à la ligne */
.confiance { background: var(--noir); }
.confiance h2 { margin-bottom: 36px; }
.rangees { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.rangee-piste { display: flex; justify-content: center; }
.rangee-jeu { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none; margin: 0; padding: 0 16px; }
.rangee-jeu + .rangee-jeu { display: none; }
.rangees.actif .rangee-piste { justify-content: flex-start; width: max-content; }
.rangees.actif .rangee-jeu { display: flex; flex-wrap: nowrap; padding: 0 16px 0 0; }
.rangee-jeu li { display: grid; place-items: center; width: 190px; height: 112px; padding: 14px 22px; background: var(--blanc); }
.rangee-jeu img { max-height: 76px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .4s, opacity .4s; }
.rangee-jeu li:hover img { filter: none; opacity: 1; }

/* Appel final ; E14 : parallaxe du fond (coins assombris, le centre sous le texte reste rouge uni) */
.appel-final { position: relative; overflow: hidden; isolation: isolate; background: var(--rouge); color: var(--blanc); text-align: center; padding: 104px 0; }
.appel-fond { position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; opacity: .5; background: radial-gradient(38% 50% at 0% 100%, #000000, transparent 72%), radial-gradient(32% 46% at 100% 0%, #000000, transparent 72%); }
.appel-final h2 { color: var(--blanc); font-size: clamp(1.8rem, 3.6vw, 3rem); }
.appel-final p { max-width: 44em; margin-left: auto; margin-right: auto; }
.appel-final a:not(.btn), .appel a:not(.btn), .page-metier .appel a:not(.btn) { color: var(--blanc); }
.appel-btn { margin: 28px 0 18px; }
.appel-coord { font-weight: 600; }

/* ------------------------------------------------------------ pages métier */

.bandeau { position: relative; overflow: hidden; background: var(--noir); color: var(--gris-clair); padding: 64px 0 60px; }
.bandeau-in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, min(560px, calc(50vw - 64px))) 1fr; gap: 48px; align-items: center; }
.bandeau h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.chapeau-page { font-size: 1.08rem; margin: 0; }
.bandeau-anim .anim { width: 100%; max-height: 230px; }
.toile-legere { opacity: .8; }
.ariane ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 18px; padding: 0; font: 600 .82rem var(--titres); color: var(--gris-clair); }
.ariane li + li::before { content: "›"; margin: 0 .6em; color: var(--gris); }
.ariane a { color: var(--gris-clair); }

.elec .e-disj { fill: var(--gris-fonce); stroke: var(--gris); }
.elec .e-levier { fill: var(--blanc); }
.elec .e-fil { stroke: var(--gris); stroke-width: 3; }
.elec .e-impulsion { fill: var(--rouge); animation: impulsion 2s linear infinite; }
.elec .e-lampe { fill: none; stroke: var(--blanc); stroke-width: 3; }
.elec .e-halo { fill: var(--rouge); opacity: .25; animation: halo 2s ease-in-out infinite; }
.elec .e-filament { fill: none; stroke: var(--rouge); stroke-width: 2.5; stroke-linejoin: round; }
@keyframes impulsion { to { transform: translateX(162px); } }
@keyframes halo { 0%, 70% { opacity: 0; } 85% { opacity: .4; } 100% { opacity: 0; } }

.reseau .r-lien { stroke: var(--gris); stroke-width: 2; stroke-dasharray: 1; animation: trace .6s ease-out both; }
.reseau .r-noeud { fill: var(--noir); stroke: var(--blanc); stroke-width: 2; animation: noeud 2.4s ease-in-out 1.6s infinite; }
@keyframes noeud { 50% { fill: var(--rouge); } }
.l2 { animation-delay: .15s !important; } .l3 { animation-delay: .3s !important; } .l4 { animation-delay: .45s !important; }
.l5 { animation-delay: .6s !important; } .l6 { animation-delay: .75s !important; } .l7 { animation-delay: .9s !important; }
.l8 { animation-delay: 1.05s !important; } .l9 { animation-delay: 1.2s !important; }
.n2 { animation-delay: 1.9s !important; } .n3 { animation-delay: 2.2s !important; } .n4 { animation-delay: 2.5s !important; }
.n5 { animation-delay: 2.8s !important; } .n6 { animation-delay: 3.1s !important; } .n7 { animation-delay: 3.4s !important; }

.flux { width: 100%; }
.flux-filet { fill: none; stroke: var(--gris-clair); stroke-width: 2; stroke-linecap: round; opacity: .5; stroke-dasharray: 8 12; animation: souffle 1.6s linear infinite; }
.f2 { animation-delay: -.3s; } .f3 { animation-delay: -.6s; } .f4 { animation-delay: -.9s; } .f5 { animation-delay: -1.2s; }
.flux:hover .flux-filet { animation-duration: .6s; }
@keyframes souffle { to { stroke-dashoffset: -40; } }
.bouche { fill: none; stroke: var(--blanc); stroke-width: 2; }

/* E11 : la jauge (data-charge) se charge en boucle, pilotée par site.js */
.borne .b-corps { fill: var(--noir); stroke: var(--blanc); stroke-width: 3; }
.borne .b-ecran { fill: var(--gris-fonce); }
.borne .b-eclair { fill: var(--blanc); }
.borne .b-cadre { fill: none; stroke: var(--gris); stroke-width: 2; }
.borne .b-jauge { fill: var(--rouge); transform-box: fill-box; transform-origin: 50% 100%; }
.borne .b-cable { fill: none; stroke: var(--gris); stroke-width: 4; stroke-linecap: round; }
.borne .b-socle { stroke: var(--gris); stroke-width: 3; }

.page-metier-in { max-width: 1200px; margin: 0 auto; padding: 56px 32px 24px; display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }
.sommaire { position: sticky; top: calc(var(--entete) + 24px); }
.sommaire summary { display: none; }
.sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gris-clair); }
.sommaire a, .page-metier .sommaire a, .mentions .sommaire a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid var(--gris-clair); color: var(--gris-fonce); text-decoration: none; font: 600 .88rem/1.35 var(--titres); }
.sommaire a:hover, .sommaire a.actif, .page-metier .sommaire a.actif, .mentions .sommaire a.actif { color: var(--rouge); border-color: var(--rouge); }

.contenu { min-width: 0; line-height: 1.8; }
.contenu .bloc { margin-bottom: 44px; }
.contenu h2 { border-left: 5px solid var(--rouge); padding-left: 16px; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.puces { list-style: none; padding: 0; margin: 0 0 1em; }
.puces li { position: relative; padding-left: 24px; margin-bottom: .45em; }
.puces li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; background: var(--rouge); }
.liste-num { counter-reset: n; list-style: none; padding: 0; margin: 0 0 1em; }
.liste-num li { counter-increment: n; position: relative; padding-left: 44px; margin-bottom: .6em; }
.liste-num li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--rouge); color: var(--blanc); font: 700 .9rem/30px var(--titres); text-align: center; }

.encart-pourqui { background: var(--gris-clair); padding: 32px 32px 16px; }
.pourqui { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pourqui li { background: var(--blanc); border-top: 3px solid var(--rouge); padding: 18px; margin-bottom: 16px; font-size: .95rem; line-height: 1.65; }
.page-metier .logos-couleur li { padding: 0; }

.appel { background: var(--rouge); color: var(--blanc); padding: 32px 36px; margin: 0 0 44px; }
.appel .appel-btn { margin: 0 0 14px; }
.appel .appel-coord { margin: 0; }

.ecodrop { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin: 20px 0; }
.ecodrop img { width: auto; max-height: 90px; }
.ecodrop .ecodrop-suivi img { max-height: none; width: 100%; }
.logos-partenaires { gap: 24px 40px; }
.logos-partenaires img { height: 44px; }

/* Défilé de logos de La société (mission 214, conservé) */
.defile { display: flex; overflow: hidden; margin: 16px 0 0; }
.defile-piste { display: flex; align-items: center; gap: 64px; flex: none; list-style: none; margin: 0; padding: 0 32px; animation: defile 50s linear infinite; }
.defile-piste img { height: 60px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.defile-piste img:hover { filter: none; opacity: 1; }
@keyframes defile { to { transform: translateX(-100%); } }

/* ------------------------------------------------------------ contact */

.contact { padding: 56px 0 72px; }
.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 24px; }
.coord { list-style: none; margin: 0 0 28px; padding: 0; font-size: 1.15rem; }
.coord li { margin-bottom: .7em; }
.coord a { font-weight: 600; }
.plan { margin: 0; background: var(--gris-tres-clair); border: 1px solid var(--gris-clair); }
.plan svg { display: block; width: 100%; height: auto; }
.c-zone { fill: var(--gris-clair); stroke: var(--gris); stroke-width: 1.5; stroke-dasharray: 4 6; }
.c-route { fill: none; stroke: var(--noir); stroke-width: 6; stroke-linecap: round; }
.c-n10 { stroke: var(--gris-fonce); stroke-width: 4; }
.c-txt { font: 700 14px var(--titres); fill: var(--noir); }
.c-ville { fill: var(--gris-fonce); }
.c-imeo { fill: var(--rouge); }
.c-pin path, .c-pin circle { fill: var(--blanc); stroke: var(--rouge); stroke-width: 2; }

.contact-form { background: var(--gris-clair); padding: 40px; }
.formulaire { position: relative; }
.champ { margin-bottom: 22px; }
.champ label { display: block; font: 600 .92rem var(--titres); color: var(--noir); margin-bottom: 4px; }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; color: var(--noir); background: none; padding: 10px 2px;
  border: 0; border-bottom: 2px solid var(--gris-fonce); border-radius: 0;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--rouge); }
.champ select option { background: var(--blanc); }
.champ-case { display: flex; gap: 12px; align-items: flex-start; }
.champ-case input { width: 20px; height: 20px; flex: none; margin-top: 4px; accent-color: var(--rouge); }
.champ-case label { font: 400 .95rem/1.6 var(--texte); color: var(--gris-fonce); }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-etat { font-weight: 600; color: var(--rouge); }
.rgpd { font-size: .85rem; color: var(--gris-fonce); margin: 18px 0 0; }

/* ------------------------------------------------------------ mentions légales */

.mentions { padding: 56px 0 72px; }
.mentions-cols { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; margin-top: 24px; }
.mentions .contenu h2 { font-size: 1.3rem; }

/* ------------------------------------------------------------ pied ; E17 : mot géant lettre par lettre */

.pied { background: var(--noir); color: var(--gris-clair); padding: 64px 0 0; font-size: .92rem; border-top: 1px solid var(--gris-fonce); overflow: hidden; }
.pied-in { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.pied-logo img { height: 48px; width: auto; margin-bottom: 20px; }
.pied-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.pied-nav li { margin-bottom: .5em; }
.pied-nav a { text-decoration: none; }
.pied-nav a:hover { text-decoration: underline; }
.pied-mentions p:first-child { font: 700 .82rem var(--titres); text-transform: uppercase; letter-spacing: .1em; color: var(--blanc); }
.pied-mentions p:last-child { color: var(--gris); }
.pied-mot {
  display: flex; justify-content: space-between; overflow: hidden; max-width: 1200px; margin: 56px auto 0; padding: .12em 32px 0;
  font: 800 clamp(4rem, 17vw, 15.5rem)/.8 var(--titres); letter-spacing: -.04em; color: var(--gris-clair);
}
.pied-mot span { display: inline-block; }
.pied-mot .mot-sv { color: var(--gris); }
.pied-mot span:nth-child(5) { margin-left: .3em; }

/* ------------------------------------------------------------ tablette et mobile */

@media (max-width: 1279px) {
  .burger { display: flex; position: relative; z-index: 60; }
  .nav {
    position: fixed; inset: 0; z-index: 55; display: none; flex-direction: column; align-items: flex-start;
    gap: 28px; padding: calc(var(--entete) + 32px) 28px 40px; background: var(--noir); overflow-y: auto;
  }
  .nav-ouvert .nav { display: flex; }
  .nav-ouvert .burger-barres { background: var(--noir); }
  .nav-ouvert .burger-barres::before { top: 0; transform: rotate(45deg); }
  .nav-ouvert .burger-barres::after { top: 0; transform: rotate(-45deg); }
  .nav-ouvert, .nav-ouvert body { overflow: hidden; }
  .nav-liste { flex-direction: column; gap: 18px; }
  .nav-liste a, .nav-tel { font-size: 1.4rem; }
  .nav-devis { font-size: 1rem; }
  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--noir); border-top: 1px solid var(--gris-fonce);
  }
  .barre-mobile a { display: block; padding: 16px 8px; text-align: center; font: 700 .95rem var(--titres); color: var(--blanc); text-decoration: none; }
  .barre-mobile .barre-devis { background: var(--rouge); text-transform: uppercase; }
  body { padding-bottom: 56px; }
}

@media (max-width: 1023px) {
  .toile-zone { display: none; }
  .ouverture-in, .bandeau-in { grid-template-columns: 1fr; gap: 32px; }
  .ouverture-anim .tableau { max-width: 260px; margin: 0; }
  .page-metier-in, .mentions-cols { grid-template-columns: 1fr; gap: 24px; }
  .sommaire { position: static; }
  .sommaire summary { display: list-item; cursor: pointer; font: 700 .9rem var(--titres); text-transform: uppercase; letter-spacing: .08em; color: var(--noir); padding: 14px 16px; background: var(--gris-clair); }
  .sommaire ol { padding: 8px 0; }
  .contact-cols { grid-template-columns: 1fr; }
  .pied-in { grid-template-columns: 1fr 1fr; }
  .frise { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .frise::before, .frise::after { display: none; }
}

@media (max-width: 767px) {
  :root { --entete: 60px; }
  .in, .ouverture-in, .bandeau-in, .page-metier-in, .pied-in, .metiers-piste { padding-left: 30px; padding-right: 18px; }
  .pied-mot { padding-left: 18px; padding-right: 18px; }
  .entete-in { padding: 0 18px 0 22px; }
  .logo { padding-right: 20px; }
  .logo img { height: 34px; }
  .ouverture { padding: 56px 0 64px; }
  .bandeau-anim .anim { max-height: 150px; max-width: 260px; }
  .metiers, .services, .pourquoi, .securite, .confiance, .pourqui-noir, .appel-final { padding: 60px 0; }
  .metiers-piste, .trois-col, .engagements, .pourqui { grid-template-columns: 1fr; }
  .carte-fig { height: 180px; }
  .frise { grid-template-columns: 1fr; gap: 0; margin-left: 4px; }
  .frise::before, .frise::after { display: block; top: 0; bottom: 0; left: 9px; right: auto; width: 3px; height: auto; }
  .frise::after { transform-origin: top; transform: scaleY(var(--p)); }
  .frise li { display: grid; grid-template-columns: 21px 1fr; column-gap: 18px; padding-bottom: 18px; }
  .frise-point { grid-row: span 2; }
  .encart { padding: 30px 24px; }
  .ecodrop { grid-template-columns: 1fr; }
  .contact-form { padding: 28px 20px; }
  .pied-in { grid-template-columns: 1fr; }
  .rangee-jeu li { width: 150px; height: 92px; }
  /* Mobile : animations réduites au fil et aux apparitions ; tableau en image fixe (design.md) */
  .anim *, .flux *, .picto *, .tableau *, .fig *, .defile-piste, .ouverture h1::after { animation: none !important; }
  .defile { justify-content: center; }
  .defile-piste { flex-wrap: wrap; justify-content: center; gap: 28px 36px; padding: 0 18px; flex: 1; }
  .defile-double { display: none; }
  .defile-piste img { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, [data-apparait], [data-titre] { opacity: 1 !important; transform: none !important; }
  .defile { justify-content: center; }
  .defile-piste { flex-wrap: wrap; justify-content: center; gap: 28px 40px; flex: 1; }
  .defile-double { display: none; }
}