/* ==========================================================================
   Enersun Tunisia — feuille de style
   Idée directrice : tout est dessiné au même trait. Un fil orange traverse la
   page, du soleil jusqu'au téléphone du SAV. La largeur des lettres dit la
   durée : étroit = court (3 jours), large = long (25 ans).
   Couleurs tirées du logo : sarcelle de la maison, orange du soleil, vert de
   la feuille.
   ========================================================================== */

/* ---------- Polices (hébergées localement) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Shantell Sans";
  src: url("../fonts/shantell-var-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
  /* couleurs : chaux, sarcelle, soleil et feuille du logo, alerte */
  --chaux: #f5f8f6;
  --blanc: #ffffff;
  --ciel: #dcebe6;          /* vert d'eau, pour les aplats */
  --sarcelle: #114c47;      /* la maison du logo */
  --encre: #0c2e2b;
  --nuit: #062422;
  --nuit-2: #0b3532;
  --soleil: #f6a117;        /* le soleil du logo */
  --soleil-fonce: #d98200;
  --feuille: #2e7d2e;       /* la feuille du logo, assombrie pour le texte */
  --feuille-vif: #7db928;
  --alerte: #cc3b22;

  /* rôles (redéfinis par section) */
  --bg: var(--chaux);
  --ink: var(--encre);
  --muted: #4a625e;
  --line: var(--sarcelle);
  --line-faint: #a9c6bf;
  --paper: var(--chaux);
  --tint: var(--ciel);
  --card: var(--blanc);
  --accent: var(--sarcelle);
  --focus: var(--feuille);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --hand: "Shantell Sans", "Comic Sans MS", "Chalkboard SE", cursive;

  /* échelle typographique */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.3125rem;
  --t-xl: 1.75rem;
  --t-2xl: clamp(1.75rem, 1.1rem + 2vw, 2.5rem);
  --t-3xl: clamp(2.125rem, 1.2rem + 3.1vw, 3.5rem);

  --gut: clamp(24px, 4.4vw, 56px);
  --mid: clamp(72px, 9vw, 128px);
  --sec: clamp(88px, 11vw, 168px);
  --top-h: 72px;
  --r: 20px;
  --stroke: 2px;
  --ease: cubic-bezier(0.6, 0.05, 0.3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0;
  background: var(--chaux);
  color: var(--encre);
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 700; }
::selection { background: var(--soleil); color: var(--encre); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 999px;
  background: var(--encre); color: #fff; text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap {
  position: relative; z-index: 2;
  width: min(1200px, 100% - 2 * var(--gut));
  margin-inline: auto;
}
.hand { font-family: var(--hand); font-weight: 500; letter-spacing: 0; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

h2 {
  font-size: var(--t-3xl);
  font-weight: 780;
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-stretch: 96%;
  text-wrap: balance;
}
h3 {
  font-size: var(--t-2xl);
  font-weight: 740;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.lead { font-size: var(--t-l); line-height: 1.45; color: var(--muted); max-width: 34rem; text-wrap: pretty; }
p { text-wrap: pretty; }

/* ---------- Trait : illustrations ---------- */
.ill {
  fill: none;
  stroke: var(--line);
  stroke-width: var(--sw, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ill .y { stroke: var(--fil-here, var(--soleil-fonce)); }
.ill .p { stroke: var(--alerte); }
.ill .thin { stroke-width: calc(var(--sw, 2) * 0.62); }
.ill .bold { stroke-width: calc(var(--sw, 2) * 1.5); }
.ill .faint { stroke: var(--line-faint); }
.ill .f-paper { fill: var(--paper); }
.ill .f-tint { fill: var(--tint); }
.ill .f-sun { fill: var(--soleil); }
.ill .f-p { fill: color-mix(in srgb, var(--alerte) 22%, var(--paper)); }
.ill .f-ink { fill: var(--line); }
.ill .dot { fill: var(--line); stroke: none; }
.ill text { stroke: none; fill: var(--ink); font-family: var(--hand); font-weight: 500; font-size: 17px; }
.ill text.t-line { fill: var(--line); }
.ill text.t-p { fill: var(--alerte); }
.ill text.t-sun { fill: var(--fil-here, var(--soleil-fonce)); }
.ill text.t-type { font-family: var(--font); font-weight: 800; }

/* le tracé : chaque trait se dessine (longueur posée en JS dans --l).
   L'état dessiné est le style de base de .is-on ; l'animation ne fournit que
   le point de départ (remplissage « backwards »). Ainsi un navigateur qui
   abandonne l'effet d'une animation terminée affiche quand même le dessin. */
.js [data-draw] .dr {
  stroke-dasharray: var(--l) calc(var(--l) + 8);
  stroke-dashoffset: calc(var(--l) + 4);
  fill-opacity: 0;
}
.js [data-draw].is-on .dr {
  stroke-dashoffset: 0;
  fill-opacity: 1;
  animation:
    trace var(--t, 700ms) var(--ease) var(--d, 0ms) backwards,
    emplir 420ms ease calc(var(--d, 0ms) + var(--t, 700ms) * 0.55) backwards;
}
.js [data-draw] .fd { opacity: 0; }
.js [data-draw].is-on .fd { opacity: 1; animation: paraitre 520ms ease var(--d, 0ms) backwards; }
@keyframes trace { from { stroke-dashoffset: calc(var(--l) + 4); } }
@keyframes emplir { from { fill-opacity: 0; } }
@keyframes paraitre { from { opacity: 0; } }

/* courant qui circule */
.flow {
  stroke: var(--soleil);
  stroke-width: calc(var(--sw, 2) * 2.4);
  stroke-dasharray: 0.1 14;
  opacity: 0;
  transition: opacity 0.4s;
}
.flow.is-live { opacity: 1; animation: couler 0.9s linear infinite; }
.flow.is-rev { animation-direction: reverse; }
@keyframes couler { to { stroke-dashoffset: -14.1; } }

/* ---------- Le fil ---------- */
main { position: relative; display: block; }
.fil {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.fil-track { stroke: url(#fil-track-g); stroke-width: 1.5; stroke-dasharray: 1 9; opacity: 0.55; }
.fil-line { stroke: url(#fil-g); stroke-width: 2.75; }
.fil-tip { fill: var(--soleil); stroke: none; }
.fil-halo { fill: var(--soleil); stroke: none; opacity: 0.28; transform-box: fill-box; transform-origin: center; animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.5); opacity: 0.12; } }
.fil-node { fill: var(--bg-here, var(--chaux)); stroke: url(#fil-track-g); stroke-width: 2; transition: fill 0.3s, r 0.3s; }
.fil-node.is-on { fill: var(--soleil); stroke: url(#fil-g); }
html:not(.js) .fil { display: none; }

.fil-a { position: absolute; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
.watch, .etsi, .contact-top { position: relative; }
/* pas d'éclair avant que les traits soient mesurés */
.js [data-draw]:not([data-ready]) { visibility: hidden; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px;
  border: var(--stroke) solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font-weight: 680; font-size: var(--t-m); line-height: 1.1; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-sun { background: var(--soleil); color: var(--encre); border-color: var(--encre); }
.btn-sun:hover { background: var(--encre); color: var(--soleil); }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn-sm { min-height: 44px; padding: 8px 20px; font-size: var(--t-s); }
.link {
  font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: var(--soleil-fonce);
}
.link:hover { text-decoration-color: currentColor; }

/* ---------- En-tête ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--top-h);
  display: flex; align-items: center; gap: 24px;
  padding-inline: var(--gut);
  color: var(--encre);
  transition: background-color 0.3s, box-shadow 0.3s, color 0.4s;
}
.top.is-stuck { background: color-mix(in srgb, var(--chaux) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 2px 0 var(--ciel); }
.top-nav a { white-space: nowrap; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; color: var(--sarcelle); flex: none; }
.lg-mark { width: 60px; height: 58px; flex: none; overflow: visible; }
.lg-word { width: 208px; height: 19.2px; flex: none; }
html.nuit-hero .top:not(.is-stuck) .logo { color: #fff; --mark-bg: #fff; }
.top-nav { display: flex; gap: clamp(14px, 2.2vw, 30px); font-size: var(--t-s); font-weight: 560; }
.top-nav a { text-decoration: none; padding: 8px 2px; background: linear-gradient(var(--soleil-fonce), var(--soleil-fonce)) left bottom / 0 2px no-repeat; transition: background-size 0.25s var(--ease); }
.top-nav a:hover, .top-nav a[aria-current="true"] { background-size: 100% 2px; }
.top-cta { display: flex; align-items: center; gap: 18px; }
.top-tel { display: grid; line-height: 1.15; text-align: right; }
.top-tel a { text-decoration: none; }
.top-tel a:hover b, .top-wa:hover i { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.top-tel > span { font-size: var(--t-xs); font-weight: 500; opacity: 0.75; }
.top-tel b { font-size: 1.0625rem; font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; }
.top-wa { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 2px; font-size: var(--t-xs); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-wa i { font-style: normal; }
.top-wa svg { width: 15px; height: 15px; flex: none; --line: currentColor; --sw: 3.8; transform: translateY(-0.07em); } /* centré sur la hauteur des chiffres, pas sur la ligne */
.top-cta .cta-s { display: none; }
html.nuit-hero .top:not(.is-stuck) { color: #eef6f3; --focus: var(--soleil); }
html.nuit-hero .top:not(.is-stuck) .btn-sun { border-color: var(--soleil); }

/* ---------- Héros ---------- */
.hero {
  --paper: var(--bg);
  position: relative; isolation: isolate;
  min-height: clamp(660px, 100svh, 980px);
  padding-top: calc(var(--top-h) + clamp(8px, 3vh, 36px));
  overflow-x: clip;
  background: var(--bg); color: var(--ink);
  transition: background-color 0.7s ease, color 0.7s ease;
}
.hero.is-night {
  --bg: var(--nuit); --ink: #eef6f3; --muted: #a9c4be; --line: #9fd5c9; --line-faint: #2f5a55;
  --tint: #0f413c; --fil-here: var(--soleil); --focus: var(--soleil);
}
.hero .ill * { transition: stroke 0.7s ease, fill 0.7s ease; }
.hero-text { pointer-events: none; z-index: 3; }
.hero-text a, .hero-text button { pointer-events: auto; }
.hero-title {
  container-type: inline-size;
  font-weight: 820; line-height: 0.9; letter-spacing: -0.025em;
  font-size: 1rem;
}
.hero-title .t-short { display: block; font-stretch: 62%; font-size: 8.6cqw; letter-spacing: -0.01em; font-weight: 760; }
.hero-title .t-long { display: block; font-stretch: 125%; font-size: 7.2cqw; white-space: nowrap; margin-top: 0.06em; }
.js .hero-title .t-long { font-stretch: 62%; }
.js .hero.is-on .hero-title .t-long { animation: etirer 1.9s cubic-bezier(0.2, 0.7, 0.1, 1) 0.25s forwards; }
@keyframes etirer { to { font-stretch: 125%; } }

.hero-sub { max-width: 36rem; margin-top: clamp(20px, 3.4vh, 40px); }
.hero-sub > p:first-child { font-size: var(--t-l); line-height: 1.42; max-width: 27.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-proof { margin-top: 20px; font-size: var(--t-s); color: var(--muted); max-width: 24rem; transition: color 0.7s; }

.scene {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  height: min(62svh, 620px, 46vw);
  aspect-ratio: 1440 / 640;
}
.scene-svg { width: 100%; height: 100%; --sw: 2.3; }
.scene-svg .win { fill: var(--win, var(--paper)); }
.hero.is-night .scene-svg .win { --win: var(--soleil); }
.scene-svg .pv { fill: color-mix(in srgb, var(--soleil) calc(var(--prod, 0) * 55%), var(--tint)); }
.scene-svg .led { fill: var(--led, var(--line-faint)); stroke: none; }
.scene-svg .night-only { opacity: 0; transition: opacity 0.7s ease; }
.hero.is-night .scene-svg .night-only { opacity: 1; }
.scene-svg .day-only { transition: opacity 0.5s ease; }
.hero.is-night .scene-svg .day-only { opacity: 0; }
.scene-svg .arc { stroke-dasharray: 0.1 11; }
.sun { cursor: grab; touch-action: pan-y; outline: none; }
.sun:active { cursor: grabbing; }
.sun .hit { fill: transparent; stroke: none; pointer-events: all; }
.sun .rays { transform-box: fill-box; transform-origin: center; animation: tourner 40s linear infinite; }
.sun:focus-visible .disc { stroke: var(--focus); stroke-width: 4; }
.moon { cursor: pointer; }
.moon .hit { fill: transparent; stroke: none; pointer-events: all; }
@keyframes tourner { to { transform: rotate(360deg); } }
.van { transform-box: fill-box; }
.js .scene-svg .van { transform: translateX(340px); }
.js .scene-svg.is-on .van { animation: arriver 1.5s cubic-bezier(0.16, 0.8, 0.2, 1) 2.3s forwards; }
@keyframes arriver { to { transform: translateX(0); } }
.van-txt { font-family: var(--font) !important; font-weight: 820 !important; font-stretch: 110%; font-size: 15px !important; fill: var(--line) !important; }

.scene-note {
  position: absolute; z-index: 4; left: 0; top: 0;
  width: max-content; max-width: min(15.5rem, 19vw);
  transform: translate(var(--nx, 0), var(--ny, 0));
  font-family: var(--hand); font-size: 1.0625rem; line-height: 1.25; font-weight: 500;
  color: var(--ink); pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease, color 0.7s;
}
.scene-note.is-on { opacity: 1; }
.scene-note b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--line); transition: color 0.7s; }
.scene-note .hint { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--feuille); font-size: 0.9375rem; }
.hero.is-night .scene-note .hint { color: var(--feuille-vif); }
.scene-note .hint svg { width: 34px; height: 20px; --line: currentColor; --sw: 2; }
.scene-note.is-used .hint { display: none; }

/* ---------- Bandeau promesse (plaque sarcelle) ---------- */
.band {
  --bg: var(--sarcelle); --ink: #fff; --line: #fff; --muted: #cfe3de; --paper: var(--sarcelle); --line-faint: #4f8a83; --focus: var(--soleil);
  position: relative; background: var(--bg); color: var(--ink);
  padding-block: clamp(40px, 5vw, 64px);
}
.band-in { display: grid; grid-template-columns: 1fr; gap: 28px; padding-right: clamp(0px, 20vw, 250px); }
.band-lead { font-size: var(--t-xl); font-weight: 720; line-height: 1.12; letter-spacing: -0.015em; max-width: 26rem; }
.band-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.band-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.band-list svg { width: 44px; height: 44px; --sw: 2; }
.band-list strong { display: block; font-size: 1.1875rem; line-height: 1.2; font-weight: 720; }
.band-list span { display: block; margin-top: 6px; font-size: var(--t-s); color: var(--muted); line-height: 1.4; }
.band .link { text-decoration-color: var(--soleil); justify-self: start; }

/* ---------- Photos annotées ---------- */
.photo { position: relative; margin: 0; min-width: 0; }
.photo img { display: block; width: 100%; height: auto; border-radius: 22px; background: var(--tint); }
.photo-stack { position: relative; display: grid; }
.photo-stack > picture { grid-area: 1 / 1; transition: opacity 0.5s ease, visibility 0.5s; }
.notes { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; --sw: 3.4; }
.notes .tag { filter: drop-shadow(0 3px 0 rgb(12 46 43 / 0.28)); }
.notes .tag rect { fill: #fffdf6; stroke: var(--encre); stroke-width: 2; }
.notes .tag text { font-family: var(--hand); font-size: 20px; font-weight: 600; fill: var(--encre); }
.notes .arrow { stroke: var(--soleil); }
.notes .sun-sk { stroke: var(--soleil); --sw: 3; }

/* ---------- La société ---------- */
.soc-row .photo { align-self: start; }
@media (min-width: 861px) { .soc-row .photo { position: sticky; top: calc(var(--top-h) + 40px); } }
.taches { max-width: 31rem; }
.taches h3 { font-size: var(--t-xl); margin-bottom: 10px; }
.tache-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1.5px solid var(--tint); }
.tache-list li:last-child { border-bottom: 0; }
.tick { width: 32px; height: 32px; --sw: 2.2; }
.tick .y { stroke-width: 3.2; }
.tache-list strong { display: block; font-size: 1.125rem; font-weight: 720; line-height: 1.25; }
.tache-list span { display: block; margin-top: 3px; font-size: var(--t-s); line-height: 1.45; color: var(--muted); }

/* ---------- Partenaires : le fil devient corde à linge ---------- */
/* Le fil passe par deux anneaux (.pt-a, data-node) posés dans les gouttières,
   à la hauteur --wire ; chaque étiquette y est accrochée par une pince. */
.sec-head.pt-head { margin-bottom: clamp(56px, 7vw, 104px); }
.pt { position: relative; --wire: 15px; --tag-w: 216px; --logo-k: 1; --fade: 76px; }
.pt-a-l { left: calc(var(--gut) * -0.5); top: calc(var(--wire) - 1px); }
.pt-a-r { right: calc(var(--gut) * -0.5); top: calc(var(--wire) - 0.5px); }
/* sous les étiquettes, le fil redescend dans la gouttière avant de rejoindre la section suivante */
.pt-a-b { right: calc(var(--gut) * -0.5); top: calc(100% + 24px); }
.pt-rail {
  position: relative; margin-inline: calc(var(--gut) * -0.5);
  padding-bottom: 26px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.pt-rail::-webkit-scrollbar { display: none; }
.js .pt-rail { overflow: clip; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.js .pt-rail.is-drag { cursor: grabbing; }
.pt-rail:focus-visible { outline-offset: -3px; border-radius: 22px; }
.pt-track { display: flex; gap: 30px; width: max-content; padding-inline: var(--fade); }
.js .pt-track { padding-inline: 0; will-change: transform; }

.pt-item {
  position: relative; flex: none; width: var(--tag-w); padding-top: 39px;
  transform-origin: 50% var(--wire);
  transform: rotate(calc(var(--swing, 0) * var(--k, 1) * 1deg));
}
.pt-item:nth-child(3n + 2) { --k: 0.84; --b: -2.3s; }
.pt-item:nth-child(3n) { --k: 1.14; --b: -4.1s; }
.pt.is-wait .pt-item { opacity: 0; translate: 0 -46px; }
.pt.is-in .pt-item { transition: translate 0.75s cubic-bezier(0.3, 1.5, 0.55, 1) var(--dly, 0ms), opacity 0.25s ease var(--dly, 0ms); }
.pt-pince { position: absolute; left: 50%; top: 0; z-index: 1; width: 22px; height: 54px; margin-left: -11px; overflow: visible; }
.pt-tag {
  display: grid; grid-template-rows: auto 1fr; height: 100%;
  background: var(--blanc); border: 2px solid var(--encre); border-radius: 16px;
  box-shadow: 0 4px 0 rgb(12 46 43 / 0.16);
  transform-origin: 50% -24px;
  animation: brise 5.6s ease-in-out var(--b, 0s) infinite alternate;
  transition: box-shadow 0.25s;
}
@keyframes brise { from { rotate: -0.7deg; } to { rotate: 0.7deg; } }
.pt-item:hover .pt-tag { box-shadow: 0 4px 0 var(--soleil); }
.pt-logo { display: grid; place-items: center; height: 124px; padding: 16px 16px 12px; }
.pt-logo img { width: calc(var(--w) * var(--logo-k) * 1px); max-width: 100%; max-height: 100%; height: auto; -webkit-user-drag: none; }
.pt-tag figcaption {
  display: grid; justify-items: center; align-content: start; gap: 1px; min-height: 60px; padding: 9px 12px 11px;
  border-top: 1.5px dashed var(--line-faint); text-align: center;
}
.pt-tag figcaption b { font-size: 0.75rem; font-weight: 760; letter-spacing: 0.08em; color: var(--encre); }
.pt-tag figcaption span { font-family: var(--hand); font-size: 0.9375rem; font-weight: 500; line-height: 1.25; color: var(--muted); text-wrap: balance; }

.pt-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pt-hint { display: flex; align-items: center; gap: 10px; font-family: var(--hand); font-size: 1.0625rem; font-weight: 500; color: var(--muted); }
.pt-hint svg { width: 46px; height: 18px; flex: none; --line: var(--soleil-fonce); --sw: 2.2; }
html:not(.js) .pt-ctrl { display: none; }
.pt-btns { display: flex; gap: 10px; margin-left: auto; }
.pt-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--encre); border-radius: 50%; background: var(--blanc); cursor: pointer;
  transition: background-color 0.18s;
}
.pt-btn:hover { background: var(--soleil); }
.pt-btn svg { width: 18px; height: 18px; --line: var(--encre); --sw: 2.6; }
.pt-btn .i-play { --sw: 2.2; margin-left: 2px; }
.pt-btn[aria-pressed="false"] .i-play, .pt-btn[aria-pressed="true"] .i-pause { display: none; }

@media (max-width: 860px) {
  .pt { --tag-w: 178px; --logo-k: 0.82; --fade: 40px; }
  /* sur téléphone le fil descend à gauche : il prend l'anneau de droite en premier */
  .pt-a-l { top: calc(var(--wire) - 0.5px); }
  .pt-a-r { top: calc(var(--wire) - 1px); }
  /* le fil quitte l'en-tête par en dessous, pour traverser l'espace vide et non le texte */
  .sec-head.pt-head { margin-bottom: 96px; }
  .duo.pt-head > .fil-a { top: calc(100% + 4px); }
  .pt-hint { font-size: 1rem; white-space: nowrap; }
  .pt-hint svg { display: none; }
  .pt-track { gap: 18px; }
  .pt-logo { height: 108px; }
  .pt-tag figcaption { min-height: 54px; padding: 7px 10px 10px; }
  .pt-tag figcaption span { font-size: 0.875rem; }
  .pt-a-b { right: auto; left: calc(var(--gut) * -0.5); }
}
@media (max-width: 385px) {
  .pt-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-tag { animation: none; }
}

/* ---------- Nos solutions ---------- */
.solutions { padding-top: 0; }
.solutions + .essentiel { padding-top: clamp(48px, 6vw, 96px); }
.sol { padding-block: clamp(36px, 5.5vw, 84px); }
.sol-text { max-width: 31rem; }
.duo.flip .sol-text { justify-self: start; }
.sol-ico { width: 52px; height: 52px; margin-bottom: 14px; --sw: 2.2; }
.sol-text h3 { margin-bottom: 16px; }
.sol-text > p, .volt > p { color: var(--muted); }
.sol .seg { margin: 0 0 18px; }
.volt[hidden] { display: none; }
.sol-facts { display: grid; gap: 10px; margin-top: 18px; }
.sol-facts li { position: relative; padding-left: 26px; font-size: var(--t-s); line-height: 1.5; }
.sol-facts li::before {
  content: ""; position: absolute; left: 1px; top: 0.42em; width: 11px; height: 11px; border-radius: 50%;
  background: var(--soleil); border: 2px solid var(--encre);
}
.sol-photo .cap { min-height: 0; }
.sol[data-volt="bt"] [data-volt-pic="mt"], .sol[data-volt="mt"] [data-volt-pic="bt"] { opacity: 0; visibility: hidden; }
.sol[data-volt="bt"] [data-volt-notes="mt"], .sol[data-volt="mt"] [data-volt-notes="bt"] { visibility: hidden; }
.sol-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: clamp(16px, 3vw, 40px); padding: clamp(20px, 3vw, 32px) clamp(22px, 3.4vw, 40px);
  background: var(--card); border: 2px solid var(--line); border-radius: 26px;
}
.sol-cta p { max-width: 36rem; font-size: var(--t-l); font-weight: 620; line-height: 1.35; }

/* ---------- Sections à deux colonnes autour du fil ---------- */
.sec { position: relative; padding-block: var(--sec); background: var(--bg); color: var(--ink); }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) var(--mid) minmax(0, 1fr); align-items: center; }
.duo > .a { grid-column: 1; grid-row: 1; }
.duo > .b { grid-column: 3; grid-row: 1; }
.duo > .fil-a { position: relative; grid-column: 2; grid-row: 1; justify-self: center; align-self: center; }
.duo.flip > .a { grid-column: 3; }
.duo.flip > .b { grid-column: 1; }
.duo.top-al { align-items: start; }
.sec-head { margin-bottom: clamp(32px, 5vw, 72px); }
.sec-head .lead { margin-top: 0; }

/* ---------- L'essentiel ---------- */
.nug { padding-block: clamp(36px, 5.5vw, 84px); }
.nug-text { max-width: 31rem; }
.nug-text h3 { margin-bottom: 18px; }
.nug-text p + p { margin-top: 14px; }
.nug-text p { color: var(--muted); }
.nug-text p b { color: var(--ink); font-weight: 680; }
.nug-aside {
  margin-top: 22px; padding-left: 18px; border-left: 2px solid var(--soleil-fonce);
  font-size: var(--t-s); color: var(--ink) !important; line-height: 1.5;
}
.duo.flip .nug-text { justify-self: start; }
.nug-fig { position: relative; width: 100%; }
.nug-fig > svg { width: 100%; height: auto; }
.cap { margin-top: 12px; font-family: var(--hand); font-size: 1rem; color: var(--line); line-height: 1.3; min-height: 2.6em; }

/* carte */
.map { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.nug-fig > svg.map-svg { height: clamp(420px, 44vw, 560px); width: auto; aspect-ratio: 300 / 600; justify-self: end; }
.map-svg .land { fill: var(--blanc); }
.map-svg .rays { stroke: var(--soleil); stroke-width: 1.4; }
.map-svg .city { cursor: pointer; }
.map-svg .city circle.pt { fill: var(--blanc); stroke: var(--line); stroke-width: 2; transition: r 0.2s, fill 0.2s; }
.map-svg .city .halo { fill: transparent; stroke: none; }
.map-svg .city:hover circle.pt, .map-svg .city:focus-visible circle.pt { fill: var(--soleil); }
.map-svg .city[aria-pressed="true"] circle.pt { fill: var(--soleil); stroke: var(--encre); r: 7px; }
.map-svg .city:focus { outline: none; }
.map-svg .city:focus-visible .halo { stroke: var(--focus); stroke-width: 2.5; }
.map-svg .sel-rays { stroke: var(--encre); stroke-width: 2; pointer-events: none; transition: transform 0.35s var(--ease); }
.map-side { align-self: end; padding-bottom: 8%; min-width: 0; }
.map-city { font-family: var(--hand); font-size: 1.375rem; color: var(--line); }
.map-val { display: block; font-size: clamp(2.75rem, 4.5vw, 4.5rem); font-weight: 820; font-stretch: 125%; letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.map-unit { display: block; margin-top: 8px; font-size: var(--t-s); color: var(--muted); max-width: 13rem; }
.map-vs { margin-top: 16px; font-size: var(--t-s); max-width: 13rem; }
.field { display: grid; gap: 6px; margin-top: 22px; max-width: 20rem; }
.field label, .field .lab { font-size: var(--t-s); font-weight: 620; color: var(--ink); }
.field select, .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea {
  width: 100%; min-height: 50px; padding: 10px 16px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
}
.field select {
  appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23114c47' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}

/* escalier des tranches */
.stairs { width: 100%; height: auto; --sw: 2; }
.stairs .step { fill: var(--tint); }
.stairs .ghost { stroke: var(--line-faint); stroke-dasharray: 3 6; }
.stairs .sunfill { fill: var(--soleil); stroke: var(--encre); }
.stairs .hatch { stroke: var(--encre); stroke-width: 1; opacity: 0.35; }
.stairs .axis { stroke: var(--ink); }
.stairs text { font-family: var(--font); font-weight: 600; font-size: 13px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.stairs text.price { fill: var(--ink); font-weight: 760; font-size: 15px; }
.stairs text.hand { font-family: var(--hand); font-weight: 500; font-size: 16px; fill: var(--line); }
.stairs .sweep { transition: transform 1.1s var(--ease); }

/* bascule (segmenté) */
.seg { display: inline-flex; padding: 4px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); gap: 4px; margin-top: 20px; }
.seg button {
  min-height: 44px; padding: 6px 18px; border: 0; border-radius: 999px; background: transparent;
  font-size: var(--t-s); font-weight: 640; cursor: pointer; color: var(--ink);
  transition: background-color 0.2s, color 0.2s;
}
.seg button[aria-pressed="true"] { background: var(--line); color: var(--card); }

/* figures spécifiques */
.fig-meter .counter { font-family: var(--font); font-weight: 800; font-size: 22px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.fig-meter .is-night-only, .fig-meter .is-day-only { transition: opacity 0.6s; }
.fig-meter[data-phase="jour"] .is-night-only { opacity: 0; }
.fig-meter[data-phase="nuit"] .is-day-only { opacity: 0; }
.fig-meter .winl { fill: var(--paper); transition: fill 0.6s; }
.fig-meter[data-phase="nuit"] .winl { fill: var(--soleil); }

.fig-cut .winl { fill: var(--paper); transition: fill 0.5s; }
.fig-cut[data-bat="1"] .winl { fill: var(--soleil); }
.fig-cut .bat { opacity: 0.18; transition: opacity 0.5s; }
.fig-cut[data-bat="1"] .bat { opacity: 1; }
.fig-cut .ledc { fill: var(--line-faint); stroke: none; transition: fill 0.4s; }
.fig-cut[data-bat="1"] .ledc { fill: var(--soleil); }

.slips text { font-family: var(--font); }
.slips .amt { font-weight: 820; font-stretch: 112%; font-size: 30px; fill: var(--ink); }
.slips .unit { font-weight: 600; font-size: 13px; fill: var(--muted); }
.slips .lbl { font-family: var(--hand); font-size: 16px; fill: var(--line); }
.slips .part { fill: var(--soleil); stroke: var(--encre); }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); }
.trio svg { width: 100%; height: auto; max-width: 190px; }
.trio strong { display: block; margin-top: 10px; font-size: 1.5rem; font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1; }
.trio span { display: block; margin-top: 6px; font-size: var(--t-s); color: var(--muted); line-height: 1.4; }

/* ---------- Simulateur ---------- */
.simu { padding-block: 0 var(--sec); }
.panel {
  position: relative; background: var(--card);
  border: 2px solid var(--line); border-radius: 28px;
  padding: clamp(22px, 4vw, 56px);
}
.simu-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.simu-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.simu-ctl .field { max-width: none; margin-top: 0; }
.simu-ctl .field + .field { margin-top: 26px; }
.bill-read { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.bill-read output { font-size: clamp(2.6rem, 5vw, 3.75rem); font-weight: 820; font-stretch: 112%; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.bill-read span { font-size: var(--t-m); color: var(--muted); font-weight: 560; }
.bill-kwh { font-size: var(--t-s); color: var(--muted); margin-top: 4px; }

input[type="range"].rng {
  -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; margin: 8px 0 0; cursor: pointer;
  --p: 30%;
}
.rng::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--soleil-fonce) var(--p), var(--line-faint) var(--p)); }
.rng::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-faint); }
.rng::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--soleil-fonce); }
.rng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -13px; border-radius: 50%;
  background: var(--soleil); border: 2.5px solid var(--encre); box-shadow: 0 0 0 5px color-mix(in srgb, var(--soleil) 30%, transparent);
}
.rng::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--soleil); border: 2.5px solid var(--encre); }
.rng-scale { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

.simu-stairs { margin-top: 30px; }
.simu-stairs .cap { min-height: 0; }

.res { display: grid; gap: 0; }
.res-main { padding-bottom: 22px; border-bottom: 2px solid var(--tint); }
.res-main .k { font-size: var(--t-s); color: var(--muted); font-weight: 560; }
.res-main .v { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: clamp(2.8rem, 6vw, 4.5rem); font-weight: 820; font-stretch: 125%; letter-spacing: -0.04em; line-height: 0.98; font-variant-numeric: tabular-nums; }
.res-main .v small { font-size: var(--t-l); font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--muted); }
.res-main .sub { margin-top: 8px; font-size: var(--t-m); }
.res-rows { display: grid; }
.res-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1.5px solid var(--tint); }
.res-rows dt { color: var(--muted); font-size: var(--t-s); }
.res-rows dt small { display: block; font-size: var(--t-xs); opacity: 0.9; }
.res-rows dd { font-weight: 740; font-size: 1.1875rem; font-variant-numeric: tabular-nums; text-align: right; }
.res-note { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--tint); font-size: var(--t-s); line-height: 1.45; }
.res-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fine { margin-top: 22px; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; max-width: 62rem; }

/* ---------- Étapes ---------- */
.etapes { padding-top: 0; }
.step-row { padding-block: clamp(22px, 3.2vw, 44px); }
.step-card { max-width: 27rem; }
.step-row:not(.flip) .step-card { justify-self: end; text-align: right; }
.step-row:not(.flip) .step-card .step-ico { margin-left: auto; }
.step-ico { width: 72px; height: 72px; margin-bottom: 14px; }
.step-when { font-size: var(--t-s); font-weight: 720; color: var(--line); font-variant-numeric: tabular-nums; }
.step-card h3 { font-size: var(--t-xl); margin: 4px 0 8px; }
.step-card p { color: var(--muted); }
.step-dur { align-self: center; }
.step-row:not(.flip) .step-dur { justify-self: start; }
.step-row.flip .step-dur { justify-self: end; text-align: right; }
.dur { display: inline-block; font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; color: var(--line); font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.dur.w-short { font-stretch: 62%; letter-spacing: 0; word-spacing: 0.12em; }
.dur sup { font-size: 0.5em; vertical-align: 0.75em; line-height: 0; margin-left: 0.04em; }
.dur.w-mid { font-stretch: 90%; }
.dur.w-long { font-stretch: 125%; }
.dur small { display: block; word-spacing: 0; font-size: var(--t-s); font-weight: 560; font-stretch: 100%; letter-spacing: 0; color: var(--muted); margin-top: 6px; }
.stop-note {
  font-family: var(--hand); font-size: 1.25rem; line-height: 1.3; color: var(--feuille); max-width: 15rem;
  display: flex; gap: 10px; align-items: flex-start;
}
.stop-note svg { width: 44px; height: 28px; flex: none; --line: currentColor; --sw: 2; margin-top: 4px; }

/* ---------- SAV (nuit) ---------- */
.sav {
  --bg: var(--nuit); --ink: #eef6f3; --muted: #a9c4be; --line: #9fd5c9; --line-faint: #2c5550;
  --paper: var(--nuit); --tint: #0f413c; --card: var(--nuit-2); --fil-here: var(--soleil); --bg-here: var(--nuit); --focus: var(--soleil);
  background:
    radial-gradient(1px 1px at 12% 8%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 5%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 14%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 3%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 11%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 22%, #fff5 50%, transparent 51%),
    linear-gradient(var(--nuit), var(--nuit));
  background-size: 100% 1400px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
.sav-title { align-items: end; font-size: clamp(2.5rem, 6.2vw, 5.625rem); line-height: 0.9; text-wrap: nowrap; }
.sav-title .a { text-align: right; font-stretch: 62%; font-weight: 760; justify-self: end; letter-spacing: -0.01em; }
.sav-title .a span { display: block; }
.sav-title .b { font-stretch: 125%; font-weight: 820; color: var(--soleil); letter-spacing: -0.04em; }
.sav-intro { margin-top: clamp(36px, 5vw, 72px); }
.sav-intro .lead { color: var(--ink); max-width: 30rem; }
.sav-intro .a { justify-self: end; }
.scale-note { margin-top: 26px; font-family: var(--hand); font-size: 1.125rem; line-height: 1.35; color: var(--soleil); max-width: 26rem; }
.night-scene { width: 100%; height: auto; --sw: 2.9; }
.night-scene .win { fill: var(--soleil); }
.night-scene .pv { fill: var(--tint); }
.night-scene .led { fill: var(--alerte); animation: clignoter 1.4s steps(2, jump-none) infinite; }
@keyframes clignoter { 50% { opacity: 0.2; } }

.eng { margin-top: clamp(48px, 7vw, 104px); }
.eng-row { padding-block: clamp(18px, 2.6vw, 34px); }
.eng-big { font-size: clamp(2.25rem, 5.2vw, 4.25rem); font-weight: 820; font-stretch: 125%; letter-spacing: -0.04em; line-height: 0.92; color: var(--ink); font-variant-numeric: tabular-nums; }
.eng-big small { display: block; font-size: var(--t-m); font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-top: 10px; line-height: 1.3; }
.eng-row:not(.flip) .eng-big { text-align: right; justify-self: end; }
.eng-txt { max-width: 27rem; }
.eng-row.flip .eng-txt { justify-self: end; text-align: right; }
.eng-txt h3 { font-size: var(--t-xl); margin-bottom: 8px; }
.eng-txt p { color: var(--muted); }

.watch { margin-top: clamp(56px, 8vw, 120px); }
.watch .panel { border-color: var(--line-faint); }
.watch-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: 28px; }
.watch-head h3 { font-size: var(--t-2xl); }
.watch-head p { color: var(--muted); }
.watch-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 52px); align-items: center; }
.chart { width: 100%; height: auto; --sw: 2.2; }
.chart .exp { stroke: var(--line); stroke-dasharray: 2 7; stroke-width: 1.6; }
.chart .real { stroke: var(--soleil); stroke-width: 3; }
.chart .zero { stroke: var(--alerte); stroke-width: 3; }
.chart .axis { stroke: var(--line-faint); }
.chart text { font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--muted); }
.chart .ev circle { fill: var(--nuit-2); stroke: var(--soleil); stroke-width: 2.4; }
.chart .ev text { fill: var(--ink); font-weight: 800; font-size: 14px; text-anchor: middle; }
.chart .ev { opacity: 0.25; transition: opacity 0.3s; transform-box: fill-box; transform-origin: center; }
.chart .ev.is-on { opacity: 1; }
.chart .ev.bad circle { stroke: var(--alerte); }
.chart .lost { fill: var(--alerte); opacity: 0.16; stroke: none; }
.evs { counter-reset: ev; display: grid; gap: 4px; }
.evs li {
  counter-increment: ev; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  padding: 10px 0; opacity: 0.35; transition: opacity 0.35s;
}
.evs li::before {
  content: counter(ev); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--soleil); font-size: var(--t-xs); font-weight: 800; color: var(--ink);
}
.evs li.bad::before { border-color: var(--alerte); }
.evs li.is-on { opacity: 1; }
.evs time { display: block; font-size: var(--t-xs); font-weight: 700; color: var(--soleil); font-variant-numeric: tabular-nums; }
.evs li.bad time { color: #ff9a82; }
.evs span { display: block; font-size: var(--t-s); line-height: 1.4; }
.watch-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 24px; padding-top: 22px; border-top: 1.5px solid var(--line-faint); }
.watch-foot p { max-width: 44rem; font-size: var(--t-m); }
.watch-foot p b { color: var(--soleil); }
.replay { border-color: var(--line); color: var(--ink); }
.replay:hover { background: var(--ink); color: var(--nuit); }

.years { margin-top: clamp(56px, 8vw, 120px); }
.years-head { margin-bottom: clamp(20px, 3vw, 40px); }
.years-title { font-size: var(--t-3xl); justify-self: end; text-align: right; max-width: 9ch; }
.year-row { padding-block: clamp(18px, 2.6vw, 36px); }
.year-when { font-weight: 820; line-height: 0.95; letter-spacing: -0.03em; color: var(--soleil); font-size: clamp(1.75rem, 3.8vw, 3rem); }
.year-row:not(.flip) .year-when { justify-self: end; text-align: right; }
.year-what { max-width: 27rem; display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: start; }
.year-row.flip .year-what { justify-self: end; }
.year-what svg { width: 60px; height: 60px; }
.year-what h3 { font-size: var(--t-l); line-height: 1.2; margin-bottom: 6px; letter-spacing: -0.01em; }
.year-what p { color: var(--muted); font-size: var(--t-s); line-height: 1.5; }

.etsi { margin-top: clamp(56px, 8vw, 120px); }
.etsi .panel { border-color: var(--line-faint); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); }
.etsi h3 { font-size: var(--t-2xl); margin-bottom: 20px; }
.etsi-tabs { display: grid; gap: 8px; }
.etsi-tabs button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 14px 18px; border: 2px solid var(--line-faint); border-radius: 16px; background: transparent;
  text-align: left; font-size: var(--t-m); font-weight: 620; line-height: 1.25; cursor: pointer; color: var(--ink);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.etsi-tabs button:hover { border-color: var(--line); }
.etsi-tabs button[aria-selected="true"] { background: var(--soleil); border-color: var(--soleil); color: var(--encre); }
.etsi-tabs button svg { width: 18px; height: 18px; flex: none; --line: currentColor; --sw: 2.4; opacity: 0; }
.etsi-tabs button[aria-selected="true"] svg { opacity: 1; }
.etsi-panel[hidden] { display: none; }
.etsi-panel { scroll-margin-top: calc(var(--top-h) + 20px); }
.etsi-panel h4 { font-size: var(--t-xl); font-weight: 760; line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 20px; }
.proto { position: relative; display: grid; gap: 0; }
.proto li { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 0 0 22px 26px; }
.proto li::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: -8px; width: 2px; background: var(--soleil); transform-origin: top; }
.proto li:last-child::before { display: none; }
.proto li::after { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--nuit-2); border: 2px solid var(--soleil); }
.proto time { font-weight: 800; color: var(--soleil); font-size: var(--t-s); line-height: 1.5; font-variant-numeric: tabular-nums; }
.proto span { font-size: var(--t-m); line-height: 1.45; }
.js .etsi-panel.is-in .proto li { animation: paraitre 0.4s ease both; animation-delay: calc(var(--i) * 110ms); }
.js .etsi-panel.is-in .proto li::before { animation: pousser 0.45s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 120ms); }
@keyframes pousser { from { transform: scaleY(0); } }
.etsi-cost { margin-top: 6px; padding: 14px 18px; border-radius: 14px; background: var(--tint); font-size: var(--t-s); }
.etsi-cost b { color: var(--soleil); }

/* ---------- Contact (aube) ---------- */
.contact {
  --bg: var(--soleil); --ink: var(--encre); --muted: #4a3410; --line: var(--encre); --line-faint: #b47400;
  --paper: var(--soleil); --card: #fff6e2; --tint: #ffc95e; --bg-here: var(--soleil); --focus: var(--encre);
  padding-bottom: clamp(72px, 9vw, 128px);
}
.contact-top { display: grid; justify-items: center; text-align: center; }
.phone-ill { width: 132px; height: 132px; --sw: 2.6; margin-top: 150px; }
.contact h2 { font-size: clamp(2.5rem, 7vw, 6.25rem); line-height: 0.9; margin-top: 28px; max-width: 12ch; font-stretch: 125%; font-weight: 820; letter-spacing: -0.04em; }
.contact h2 span { display: block; font-stretch: 62%; font-weight: 760; letter-spacing: -0.01em; }
.contact-top .lead { margin-top: 24px; color: var(--ink); text-align: center; }
.tel-big {
  display: inline-block; margin-top: 30px; text-decoration: none;
  font-size: clamp(2.25rem, 7vw, 5rem); font-weight: 820; font-stretch: 100%; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(var(--encre), var(--encre)) left bottom / 100% 4px no-repeat; padding-bottom: 10px;
}
.tel-big:hover { background-size: 100% 100%; color: var(--soleil); }
.contact-hours { margin-top: 16px; font-size: var(--t-s); font-weight: 560; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); margin-top: clamp(48px, 7vw, 96px); align-items: start; }
.devis-slot { min-width: 0; }
.form {
  --field-bg: #fffdf5;
  display: grid; gap: 16px; padding: clamp(20px, 3vw, 36px);
  background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: 26px;
}
.form .field { margin: 0; max-width: none; gap: 5px; align-content: start; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .field input, .form .field select, .form .field textarea { border-color: var(--encre); background-color: var(--field-bg); }
.form textarea { min-height: 96px; resize: vertical; }
.form-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 4px; }
.form-head .lg-mark { width: 52px; height: 50px; }
.form-head h3 { font-size: var(--t-xl); }
.form-head p { margin-top: 4px; font-size: var(--t-s); color: var(--muted); line-height: 1.45; }
.estim-note { padding: 12px 16px; border-radius: 14px; background: var(--tint); font-size: var(--t-s); line-height: 1.45; }
.estim-note[hidden] { display: none; }
.f-help { font-size: var(--t-xs); color: var(--muted); line-height: 1.4; }
.f-err { font-size: var(--t-s); font-weight: 650; color: #a3290f; line-height: 1.35; }
.f-err:empty { display: none; }
.field.is-bad input { border-color: var(--alerte); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alerte) 22%, transparent); }
.ref-box { position: relative; }
.ref-box input { padding-right: 132px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.ref-dots { position: absolute; right: 16px; top: 50%; display: flex; gap: 5px; transform: translateY(-50%); pointer-events: none; }
.ref-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--encre) 45%, transparent); transition: background-color 0.15s, border-color 0.15s, transform 0.2s var(--ease); }
.ref-dots i.on { background: var(--soleil); border-color: var(--encre); transform: scale(1.12); }
.ref-box.is-full .ref-dots i { background: var(--feuille); border-color: var(--feuille); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.btn .ill { --line: currentColor; --sw: 2.4; }
.btn-ink { background: var(--encre); color: var(--soleil); border-color: var(--encre); }
.btn-ink:hover { background: transparent; color: var(--encre); }
.form .btn-line { border-color: var(--encre); color: var(--encre); }
.form .btn-line:hover { background: var(--encre); color: #fff; }
.form-note { font-size: var(--t-xs); color: var(--muted); }
.form-done { padding: 14px 16px; border-radius: 14px; border: 2px solid var(--feuille); background: color-mix(in srgb, var(--feuille) 10%, var(--card)); font-size: var(--t-s); line-height: 1.45; }
.form-done:empty { display: none; }
.form-done a { font-weight: 700; }

/* fenêtre du devis */
.dlg {
  --ink: var(--encre); --muted: #4a625e; --line: var(--sarcelle); --line-faint: #a9c6bf;
  --card: #ffffff; --tint: var(--ciel); --focus: var(--feuille); --field-bg: #ffffff;
  width: min(600px, 100% - 24px); max-width: none; max-height: calc(100dvh - 24px);
  padding: 0; border: 0; background: transparent; color: var(--encre); overflow: visible;
}
.dlg::backdrop { background: rgb(6 36 34 / 0.58); backdrop-filter: blur(3px); }
.dlg[open] { animation: dlg-in 0.38s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(28px); } }
.dlg-card { position: relative; max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; border-radius: 26px; }
.dlg .form-head { padding-right: 48px; }
.dlg-x {
  position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border: 2px solid var(--encre); border-radius: 50%; background: #fff; cursor: pointer;
}
.dlg-x svg { width: 18px; height: 18px; --line: var(--encre); --sw: 2.6; }
.dlg-x:hover { background: var(--soleil); }
html.has-dlg { overflow: hidden; }
.ways h3 { font-size: var(--t-xl); margin-bottom: 14px; }
.ways ul { display: grid; gap: 0; }
.ways li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 2px solid color-mix(in srgb, var(--encre) 18%, transparent); }
.ways li svg { width: 40px; height: 40px; --sw: 2; }
.ways li a { font-weight: 720; font-size: 1.1875rem; text-decoration: none; }
.ways li a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ways li small { display: block; font-size: var(--t-s); color: var(--muted); font-weight: 500; }

/* ---------- Pied ---------- */
.foot { --focus: var(--soleil); background: var(--encre); color: #cfe0dc; padding: 48px 0 56px; font-size: var(--t-s); }
.foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.foot .logo { color: #fff; margin-bottom: 16px; --mark-bg: #fff; }
.foot h4 { color: #fff; font-size: var(--t-s); font-weight: 720; margin-bottom: 10px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot li { padding: 3px 0; }
.foot-src { grid-column: 1 / -1; padding-top: 22px; border-top: 1.5px solid #23504b; font-size: var(--t-xs); line-height: 1.6; color: #a8c4be; max-width: none; }
.foot-credits { padding-top: 0; border-top: 0; margin-top: -14px; }
.foot-credits a { text-decoration: underline; text-decoration-color: #4f8a83; text-underline-offset: 3px; }

/* ---------- Barre de contact mobile ---------- */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px; border-radius: 999px; background: var(--encre);
  transform: translateY(140%); transition: transform 0.35s var(--ease);
}
.dock.is-up { transform: none; }
.dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: var(--t-s); }
.dock a svg { width: 20px; height: 20px; --sw: 2.2; }
.dock .d-devis { background: var(--soleil); color: var(--encre); --line: var(--encre); }
.dock .d-call { color: #fff; --line: #fff; border: 2px solid #3f7871; }

/* le fil ondule : il penche vers l'illustration de chaque rangée */
@media (min-width: 861px) {
  .nug > .fil-a, .sol > .fil-a, .step-row > .fil-a, .eng-row > .fil-a, .year-row > .fil-a { left: 20px; }
  .nug.flip > .fil-a, .sol.flip > .fil-a, .soc-row > .fil-a, .step-row.flip > .fil-a, .eng-row.flip > .fil-a, .year-row.flip > .fil-a { left: -20px; }
}

/* ==========================================================================
   Adaptation
   ========================================================================== */
@media (max-width: 1300px) {
  .top-cta .cta-l { display: none; }
  .top-cta .cta-s { display: inline; }
  .top-cta { gap: 14px; }
  .top { gap: 18px; }
}

@media (max-width: 1140px) {
  .top-nav { display: none; }
}

/* le mot « WhatsApp » cède la place quand l'en-tête est plein : il reste l'icône et le numéro */
@media (min-width: 1141px) and (max-width: 1300px), (max-width: 480px) {
  .top-wa i { display: none; }
}

@media (max-width: 1080px) {
  .band-in { padding-right: 0; }
  .band-list { grid-template-columns: 1fr; gap: 18px; max-width: 30rem; }
}

@media (max-width: 1000px) {
  .scene-note { max-width: 13rem; }
  .hero { min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; }
  .scene { position: relative; align-self: flex-end; height: min(86vw, 520px); margin-top: 12px; flex: none; }
  .scene-svg { --sw: 2.8; }
}

@media (max-width: 860px) {
  :root { --top-h: 64px; --mid: 0px; }
  .top-tel > span { display: none; }
  .top-cta .btn { display: none; }
  .logo-sub { display: none; }
  .lg-mark { width: 52px; height: 50px; }
  .lg-word { width: 184px; height: 17px; }

  .hero-sub { max-width: 32rem; }
  .scene-svg { --sw: 3.4; }
  .scene-note { max-width: 11.5rem; font-size: 0.9375rem; }
  .scene-note b { font-size: 1.25rem; }

  .duo { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .duo > .a, .duo > .b, .duo.flip > .a, .duo.flip > .b { grid-column: 1; grid-row: auto; }
  .duo { position: relative; }
  .duo > .fil-a { position: absolute; left: calc(var(--gut) * -0.5); top: 50%; grid-column: auto; grid-row: auto; }
  .fil-a.c { left: calc(var(--gut) * -0.5) !important; }
  .band > .fil-a { left: calc(var(--gut) * 0.5); }
  .nug-fig { order: 2; }
  .step-row:not(.flip) .step-card, .eng-row.flip .eng-txt { justify-self: start; text-align: left; }
  .step-row:not(.flip) .step-card .step-ico { margin-left: 0; }
  .step-row .step-dur, .step-row.flip .step-dur, .step-row:not(.flip) .step-dur { justify-self: start; text-align: left; order: -1; }
  .step-row { row-gap: 10px; }
  .step-ico { display: none; }
  .eng-row:not(.flip) .eng-big, .year-row:not(.flip) .year-when { text-align: left; justify-self: start; }
  .eng-row .eng-big { order: -1; }
  .eng-row { row-gap: 12px; }
  .year-row .year-when { order: -1; }
  .year-row { row-gap: 10px; }
  .year-row.flip .year-what { justify-self: start; }
  .sav-title .a { text-align: left; justify-self: start; }
  .sav-title { row-gap: 0; }
  .sav-intro .a { justify-self: start; }
  .stop-note { max-width: none; }

  .map { display: flex; flex-direction: column; }
  .map-side { display: contents; }
  .nug-fig > svg.map-svg { order: 1; align-self: flex-end; height: min(118vw, 470px); }
  .map-out { position: absolute; left: 0; top: 57%; width: min(46%, 170px); z-index: 1; }
  .map-val { font-size: 2.75rem; }
  .map-unit { max-width: none; }
  .map-vs { order: 2; max-width: none; margin-top: 4px; }
  .years-title { justify-self: start; text-align: left; max-width: none; }
  .stop-note { order: 3 !important; }
  .simu-ctl { display: contents; }
  .simu-ctl > .field { order: 1; }
  .simu-grid > .res { order: 2; }
  .simu-ctl > .simu-stairs { order: 3; margin-top: 0; }
  .simu-grid { row-gap: 26px; }
  .simu-ctl .field + .field { margin-top: 0; }
  .chart text { font-size: 22px; }
  .chart .ev { transform: scale(1.45); }
  .nug-fig .ill:not(.stairs):not(.slips):not(.map-svg) text { font-size: 21px; }
  .fig-meter .counter { font-size: 24px !important; }
  .simu-head, .simu-grid, .watch-head, .watch-grid, .etsi .panel, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .panel { border-radius: 22px; }
  .trio { gap: 14px; }
  .trio strong { font-size: 1.375rem; }
  .foot-in { grid-template-columns: 1fr; }
  .foot { padding-bottom: 112px; }
  .dock { display: grid; }
  .proto li { grid-template-columns: 1fr; gap: 2px; }
  .phone-ill { margin-top: 120px; width: 108px; height: 108px; }
  /* photos bord à bord : les annotations restent lisibles */
  .photo { margin-inline: calc(var(--gut) * -1); }
  .photo img { border-radius: 0; }
  .photo .cap { padding-inline: var(--gut); }
}

@media (max-width: 420px) {
  .lg-mark { width: 44px; height: 42.6px; }
  .lg-word { width: 146px; height: 13.5px; }
  .logo { gap: 8px; }
}

/* titre en affiche sur téléphone : « 25 ans. » prend toute la largeur */
@media (max-width: 600px) {
  .hero-title .t-short { font-size: 13.2cqw; }
  .hero-title .t-long { white-space: normal; font-size: 10.6cqw; line-height: 0.92; }
  .hero-title .t-long span { display: block; white-space: nowrap; }
  .hero-title .t-long span + span { font-size: 21.4cqw; margin-top: 0.02em; }
}

@media (max-width: 600px) {
  .dlg { width: 100%; max-height: 100dvh; margin: auto 0 0; }
  .dlg-card { max-height: 94dvh; border-radius: 26px 26px 0 0; }
  .dlg .form { border-radius: 26px 26px 0 0; border-width: 2px 0 0; padding-bottom: 28px; }
  .dlg[open] { animation-name: dlg-up; }
  @keyframes dlg-up { from { transform: translateY(40%); opacity: 0.4; } }
}

@media (max-width: 520px) {
  .form .row2 { grid-template-columns: 1fr; }
  .form-actions .btn { flex: 1 1 100%; }
  .form-head { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .form-head .lg-mark { width: 44px; height: 42px; }
  .trio { grid-template-columns: 1fr; }
  .trio li { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; align-items: center; }
  .trio svg { grid-row: span 2; }
  .trio strong { margin-top: 0; align-self: end; }
  .trio span { align-self: start; }
  .hero-actions .btn { flex: 1 1 100%; }
  .res-actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-draw] .dr { stroke-dasharray: none; stroke-dashoffset: 0; fill-opacity: 1; animation: none !important; }
  .js [data-draw] .fd { opacity: 1; animation: none !important; }
  .js .hero-title .t-long { font-stretch: 125%; animation: none !important; }
  .js .scene-svg .van { transform: none; animation: none !important; }
  .flow.is-live, .sun .rays, .fil-halo, .night-scene .led { animation: none; }
  * { transition-duration: 0.01ms !important; }
}