/* ============================================================
   MAHER AMOR — Ingénieur Conseil Structures & V.R.D.
   Identité « Cyanotype & minium » : l'encre du plan, l'antirouille
   de l'acier. Bleu de Prusse, craie, cyan de traçage, rouge minium.
   ============================================================ */

:root{
  --nuit:    #071523;                       /* fond — bleu de Prusse nuit */
  --nuit-2:  #0A1C2E;                       /* sections surélevées */
  --nuit-3:  #0F2438;                       /* cartes */
  --craie:   #EAF2F7;                       /* texte principal */
  --brume:   #92AEC4;                       /* texte secondaire */
  --cyan:    #6FC2E8;                       /* traits techniques vifs */
  --plan:    #3E6E96;                       /* traits techniques calmes */
  --minium:  #F4552E;                       /* accent — rouge antirouille */
  --minium-2:#FF7E57;                       /* accent vif (hover, petits textes) */
  --ligne:   rgba(146, 174, 196, .15);      /* filets */
  --grad-minium: linear-gradient(120deg, #FF8A5C 0%, #F4552E 52%, #C93A1B 100%);

  --f-disp: "Cabinet Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "General Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --conteneur: 1240px;
  --marge: clamp(20px, 5vw, 52px);
  --header-h: 74px;
  --expo: cubic-bezier(.19, 1, .22, 1);
}

/* ---------- Socle ---------- */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
html, body{ overflow-x: clip; }
body{
  background: var(--nuit);
  color: var(--craie);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; }
address{ font-style: normal; }
strong{ font-weight: 600; color: var(--craie); }
.mono{ font-family: var(--f-mono); }
::selection{ background: var(--minium); color: var(--nuit); }
:focus-visible{ outline: 2px solid var(--minium); outline-offset: 3px; border-radius: 2px; }

::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--nuit); }
::-webkit-scrollbar-thumb{ background: #16324A; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover{ background: var(--plan); }

.container{ max-width: var(--conteneur); margin-inline: auto; padding-inline: var(--marge); }

.skip-link{
  position: fixed; top: -60px; left: 16px; z-index: 400;
  background: var(--minium); color: var(--nuit);
  padding: 10px 18px; font-family: var(--f-mono); font-size: .8rem;
  transition: top .3s;
}
.skip-link:focus{ top: 12px; }

/* ---------- Cadre de feuille + grain ---------- */
.feuille{
  position: fixed; inset: 13px; z-index: 90;
  border: 1px solid rgba(111, 194, 232, .13);
  pointer-events: none;
}
.feuille::after{
  content: "MA · A0 — ÉCH. 1:1";
  position: absolute; left: 12px; bottom: 8px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .22em;
  color: rgba(146, 174, 196, .5);
}
.grain{
  position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---------- Curseur personnalisé (activé par JS : html.cur) ---------- */
.cursor-dot, .cursor-ring{ display: none; }
@media (pointer: fine){
  html.cur *{ cursor: none !important; }
  html.cur .cursor-dot{
    display: block; position: fixed; z-index: 500; pointer-events: none;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--minium); top: 0; left: 0;
    transform: translate(-50%, -50%);
    transition: opacity .25s;
  }
  html.cur .cursor-ring{
    display: block; position: fixed; z-index: 499; pointer-events: none;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(111, 194, 232, .55);
    top: 0; left: 0; transform: translate(-50%, -50%);
    transition: width .25s var(--expo), height .25s var(--expo),
                border-color .25s, opacity .25s;
  }
  html.cur.cursor-hover .cursor-ring{
    width: 62px; height: 62px; border-color: var(--minium);
  }
  html.cur.cursor-hidden :is(.cursor-dot, .cursor-ring){ opacity: 0; }
}

/* ---------- Préchargeur (affiché seulement si JS) ---------- */
.loader{ display: none; }
html.js .loader{
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 600;
  background: var(--nuit);
  transition: transform .75s var(--expo), visibility 0s .75s;
}
html.js .loader.loader-exit{ transform: translateY(-101%); visibility: hidden; }
.loader-inner{ display: grid; justify-items: center; gap: 18px; }
.loader-mark{ width: 84px; height: 84px; overflow: visible; }
.loader-mark path, .loader-mark rect{ fill: none; stroke-width: 2.4; stroke-linecap: round; }
.lm-frame{ stroke: rgba(111, 194, 232, .5); }
.lm-arrow{ stroke: var(--minium); }
.lm-sol{ stroke: var(--craie); }
.lm-hach{ stroke: var(--plan); }
html.js .loader :is(path, rect){ stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .loader.loader-run :is(path, rect){ animation: draw 1s var(--expo) forwards; }
html.js .loader.loader-run .lm-arrow{ animation-delay: .18s; }
html.js .loader.loader-run .lm-sol{ animation-delay: .32s; }
html.js .loader.loader-run .lm-hach{ animation-delay: .44s; }
.loader-label{
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--brume);
}
.loader-pct{ font-family: var(--f-disp); font-weight: 700; font-size: 2rem; color: var(--craie); }

/* ---------- Bandeau ---------- */
.topbar{
  position: fixed; inset: 0 0 auto 0; z-index: 150;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.topbar.scrolled{
  background: rgba(7, 21, 35, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--ligne);
}
.topbar-inner{
  max-width: var(--conteneur); margin-inline: auto;
  padding: 15px var(--marge);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark{ width: 34px; height: 34px; color: var(--minium); flex: none; }
.brand-text{ display: grid; line-height: 1.25; min-width: 0; }
.brand-text strong{ font-family: var(--f-disp); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; }
.brand-text em{
  font-style: normal; font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brume);
  white-space: nowrap;
}
.nav{ display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.nav a{
  position: relative;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brume);
  padding: 6px 2px;
  transition: color .3s;
}
.nav a i{ font-style: normal; color: var(--minium); font-size: .6rem; margin-right: 5px; }
.nav a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--minium); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--expo);
}
.nav a:hover{ color: var(--craie); }
.nav a.active{ color: var(--craie); }
.nav a.active::after, .nav a:hover::after{ transform: scaleX(1); }
.nav-cta{
  border: 1px solid rgba(111, 194, 232, .4); padding: 8px 16px !important;
  border-radius: 999px; color: var(--craie) !important;
}
.nav-cta::after{ display: none; }
.nav-cta:hover{ border-color: var(--minium); background: rgba(244, 85, 46, .08); }
.nav-cta.active{ border-color: var(--minium); }

.burger{
  display: none; position: relative; z-index: 160;
  width: 44px; height: 44px; border: 1px solid var(--ligne); border-radius: 50%;
  background: transparent; cursor: pointer;
}
.burger span{
  position: absolute; left: 12px; right: 12px; height: 2px;
  background: var(--craie); transition: transform .4s var(--expo), top .4s var(--expo);
}
.burger span:first-child{ top: 17px; }
.burger span:last-child{ top: 25px; }
html.menu-open .burger span:first-child{ top: 21px; transform: rotate(45deg); }
html.menu-open .burger span:last-child{ top: 21px; transform: rotate(-45deg); }

/* ---------- Menu mobile ---------- */
.menu{
  position: fixed; inset: 0; z-index: 140;
  background:
    linear-gradient(rgba(111,194,232,.045) 1px, transparent 1px) 0 0 / 100% 72px,
    linear-gradient(90deg, rgba(111,194,232,.045) 1px, transparent 1px) 0 0 / 72px 100%,
    var(--nuit-2);
  display: grid; align-content: center; justify-items: start;
  padding: 100px var(--marge) 46px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s var(--expo), visibility 0s .45s;
}
html.menu-open .menu{ opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
html.menu-open{ overflow: hidden; }
.menu-links{ display: grid; gap: 6px; width: 100%; }
.menu-links a{
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.9rem, 8vw, 3rem);
  color: var(--craie); padding: 6px 0; line-height: 1.15;
  display: flex; align-items: baseline; gap: 14px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--expo), transform .5s var(--expo), color .3s;
}
.menu-links a i{ font-style: normal; font-family: var(--f-mono); font-size: .8rem; color: var(--minium); }
.menu-links a:hover{ color: var(--minium-2); }
html.menu-open .menu-links a{ opacity: 1; transform: none; }
html.menu-open .menu-links a:nth-child(1){ transition-delay: .08s; }
html.menu-open .menu-links a:nth-child(2){ transition-delay: .13s; }
html.menu-open .menu-links a:nth-child(3){ transition-delay: .18s; }
html.menu-open .menu-links a:nth-child(4){ transition-delay: .23s; }
html.menu-open .menu-links a:nth-child(5){ transition-delay: .28s; }
html.menu-open .menu-links a:nth-child(6){ transition-delay: .33s; }
.menu-foot{
  margin-top: 44px; display: grid; gap: 8px;
  border-top: 1px solid var(--ligne); padding-top: 22px; width: 100%;
}
.menu-foot a{ font-family: var(--f-mono); font-size: .95rem; color: var(--minium-2); width: fit-content; }
.menu-foot p{ font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }

/* ============================================================
   HÉROS
   ============================================================ */
.hero{
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: clip;
}
.hero::before{ /* carroyage de la feuille */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(111,194,232,.05) 1px, transparent 1px) 0 0 / 100% 76px,
    linear-gradient(90deg, rgba(111,194,232,.05) 1px, transparent 1px) 0 0 / 76px 100%;
  -webkit-mask-image: radial-gradient(120% 90% at 30% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 30% 30%, #000 30%, transparent 78%);
}
.hero::after{ /* respiration lumineuse */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 44% at 74% 62%, rgba(111, 194, 232, .07), transparent 70%);
}
.hero-fond{ position: absolute; inset: 0; pointer-events: none; }
.epure{
  position: absolute; right: -3%; bottom: 0; height: 94%; width: auto;
  opacity: .9;
  -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 98%);
  mask-image: linear-gradient(to left, #000 62%, transparent 98%);
}
.epure path, .epure circle{ fill: none; stroke-linecap: round; }
.ep-dash{ stroke: rgba(62, 110, 150, .55); stroke-width: 1.2; stroke-dasharray: 7 9 !important; }
.ep-cercle{ stroke: rgba(111, 194, 232, .5); stroke-width: 1.4; }
.ep-lettre{ font-family: var(--f-mono); font-size: 15px; fill: rgba(111, 194, 232, .75); text-anchor: middle; }
.ep-trait, .ep-fleche{ stroke: rgba(244, 85, 46, .55); stroke-width: 1.8; }
.ep-poutre, .ep-poteau, .ep-semelle{ stroke: rgba(234, 242, 247, .5); stroke-width: 1.7; }
.ep-parab{ stroke: rgba(244, 85, 46, .5); stroke-width: 1.6; fill: rgba(244, 85, 46, .07); }
.ep-terre{ stroke: rgba(111, 194, 232, .55); stroke-width: 2.2; }
.ep-hach{ stroke: rgba(62, 110, 150, .6); stroke-width: 1.3; }
.ep-niveau{ stroke: rgba(111, 194, 232, .6); stroke-width: 1.3; }
.ep-cote{ font-family: var(--f-mono); font-size: 14px; fill: rgba(111, 194, 232, .75); }

/* traçage à l'arrivée */
html.js .epure :is(.ep-cercle, .ep-poutre, .ep-poteau, .ep-semelle, .ep-terre, .ep-hach, .ep-parab, .ep-trait, .ep-fleche, .ep-niveau){
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
html.js .epure :is(.ep-lettre, .ep-cote, .ep-dash){ opacity: 0; }
html.js.intro .epure :is(.ep-cercle, .ep-poutre, .ep-poteau, .ep-semelle, .ep-terre, .ep-hach, .ep-parab, .ep-trait, .ep-fleche, .ep-niveau){
  animation: draw 1.5s var(--expo) forwards;
}
html.js.intro .epure .ep-ossature :is(path){ animation-delay: .35s; }
html.js.intro .epure .ep-sol :is(path){ animation-delay: .65s; }
html.js.intro .epure .ep-charges :is(path){ animation-delay: 1s; }
html.js.intro .epure .ep-moments :is(path){ animation-delay: 1.25s; }
html.js.intro .epure :is(.ep-lettre, .ep-cote, .ep-dash){ animation: apparait 1s ease .9s forwards; }

.hero-inner{
  position: relative; z-index: 2; width: 100%;
  max-width: var(--conteneur); margin-inline: auto;
  padding: calc(var(--header-h) + 28px) var(--marge) clamp(64px, 9vh, 96px);
}
.hero-eyebrow{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brume);
  margin-bottom: clamp(18px, 3vh, 30px);
}
.pulse{ position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--minium); flex: none; }
.pulse::after{
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--minium); animation: ping 2.2s ease-out infinite;
}

.hero-title{
  font-family: var(--f-disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(4rem, 14vw, 11.6rem);
  line-height: .84; letter-spacing: -.015em;
  width: 100%;
}
.hero-title .line{ display: block; overflow: hidden; padding-block: .03em; }
.hero-title .line-in{ display: inline-block; }
.line-trace .line-in{
  color: transparent;
  -webkit-text-stroke: 2px rgba(111, 194, 232, .85);
}
@supports not (-webkit-text-stroke: 1px #fff){
  .line-trace .line-in{ color: var(--plan); }
}
html.js .hero-title .line-in{ transform: translateY(118%); }
html.js.intro .hero-title .line-in{ animation: monte 1.05s var(--expo) forwards; animation-delay: var(--d, 0s); }

.hero-cote{ width: 100%; height: 42px; margin-top: clamp(6px, 1.6vh, 16px); overflow: visible; }
.hero-cote path{ fill: none; stroke: rgba(111, 194, 232, .55); stroke-width: 1.4; }
html.js .hero-cote path{ stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js.intro .hero-cote path{ animation: draw 1.3s var(--expo) .55s forwards; }
.hero-portee{
  text-align: center; font-size: .64rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--brume); margin-top: 2px;
}

.hero-bas{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px); align-items: end;
  margin-top: clamp(30px, 5vh, 54px);
}
.hero-lede{ font-size: clamp(1.02rem, 1.45vw, 1.25rem); color: var(--brume); max-width: 56ch; }
.hero-lede strong{ color: var(--craie); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.hero-meta{
  display: flex; flex-wrap: wrap; gap: 18px 30px; justify-content: flex-end;
  margin-top: 26px;
}
.hero-meta li{ display: grid; gap: 3px; font-size: .9rem; }
.hero-meta li span{
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--plan);
}
.hero-meta a:hover{ color: var(--minium-2); }

/* entrées héros */
html.js .hero .rise{ opacity: 0; transform: translateY(26px); }
html.js.intro .hero .rise{ animation: leve .95s var(--expo) forwards; animation-delay: var(--d, 0s); }

.scroll-cue{
  position: absolute; z-index: 3; bottom: 30px; right: var(--marge);
  display: grid; justify-items: center; gap: 10px; width: fit-content;
}
.scroll-cue span{
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--brume);
}
.scroll-cue i{
  position: relative; width: 1px; height: 44px; background: var(--ligne); overflow: hidden;
}
.scroll-cue i::after{
  content: ""; position: absolute; left: 0; top: -12px; width: 1px; height: 12px;
  background: var(--minium); animation: descend 1.8s ease-in-out infinite;
}

/* ---------- Boutons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: .86rem; letter-spacing: .04em;
  padding: 15px 26px; border-radius: 3px;
  transition: transform .35s var(--expo), box-shadow .35s, border-color .3s, background .3s, color .3s;
  will-change: transform;
}
.btn svg{ width: 17px; height: 17px; flex: none; }
.btn-solid{
  background: var(--grad-minium); color: var(--nuit); font-weight: 500;
  box-shadow: 0 8px 28px rgba(244, 85, 46, .22);
}
.btn-solid:hover{ box-shadow: 0 12px 36px rgba(244, 85, 46, .34); }
.btn-ghost{ border: 1px solid rgba(146, 174, 196, .35); color: var(--craie); }
.btn-ghost:hover{ border-color: var(--cyan); background: rgba(111, 194, 232, .07); }

/* ---------- Règle graduée (séparateur) ---------- */
.regle{
  height: 30px; border-top: 1px solid var(--ligne);
  background:
    repeating-linear-gradient(90deg, var(--ligne) 0 1px, transparent 1px 14px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(111,194,232,.4) 0 1px, transparent 1px 112px) 0 0 / 100% 22px no-repeat;
}

/* ============================================================
   SECTIONS — socle commun
   ============================================================ */
.section{ position: relative; padding-block: clamp(90px, 12vw, 150px); }
.section-sur{
  background: var(--nuit-2);
  border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne);
}
[data-spy]{ scroll-margin-top: calc(var(--header-h) + 10px); }

.section-head{ position: relative; margin-bottom: clamp(40px, 6vw, 72px); }
.section-index{
  position: absolute; right: 0; top: -.28em; z-index: 0;
  font-family: var(--f-disp); font-weight: 800;
  font-size: clamp(5rem, 11vw, 9.5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(111, 194, 232, .14);
  pointer-events: none; user-select: none;
}
@supports not (-webkit-text-stroke: 1px #fff){
  .section-index{ color: rgba(111, 194, 232, .07); }
}
.kicker{
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--minium-2); margin-bottom: 16px;
}
.kicker::before{ content: "— "; color: var(--plan); }
.section-title{
  position: relative; z-index: 1;
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.04; letter-spacing: -.01em;
  max-width: 22ch;
}
.section-sous{ margin-top: 18px; color: var(--brume); max-width: 58ch; }

/* Révélations au défilement */
.mask{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .05em; }
.mask > span{ display: inline-block; }
html.js .reveal{ opacity: 0; transform: translateY(26px); transition: opacity .9s var(--expo), transform .9s var(--expo); transition-delay: var(--d, 0s); }
html.js .reveal.in{ opacity: 1; transform: none; }
html.js .reveal .mask > span{ transform: translateY(115%); transition: transform 1s var(--expo); }
html.js .reveal.in .mask > span{ transform: none; }
html.js .reveal.in .mask:nth-of-type(2) > span{ transition-delay: .1s; }

/* ============================================================
   01 · PROFIL
   ============================================================ */
.profil-grid{
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(30px, 5vw, 70px); align-items: start;
}
.profil-copy p{ color: var(--brume); font-size: clamp(1rem, 1.3vw, 1.14rem); }
.profil-copy p + p{ margin-top: 20px; }

.fiche{
  border: 1px solid var(--ligne); background: var(--nuit-2);
  padding: 24px 26px 10px; border-radius: 4px; position: relative;
}
.fiche::before{
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid rgba(111, 194, 232, .08);
}
.fiche-titre{
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--minium-2); margin-bottom: 14px;
}
.fiche-table div{
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px;
  padding-block: 11px; border-top: 1px solid var(--ligne);
}
.fiche-table dt{
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--plan); padding-top: 3px;
}
.fiche-table dd{ font-size: .95rem; overflow-wrap: anywhere; }
.fiche-table a{ border-bottom: 1px solid rgba(111, 194, 232, .35); transition: color .3s, border-color .3s; }
.fiche-table a:hover{ color: var(--minium-2); border-color: var(--minium); }
.fiche-manque dd{
  color: var(--brume); font-style: italic;
  border: 1px dashed rgba(244, 85, 46, .45); border-radius: 3px;
  padding: 2px 10px; width: fit-content; font-size: .85rem;
}

/* ============================================================
   02 · LA DESCENTE DE CHARGES — moment signature
   ============================================================ */
.charges{ position: relative; background: var(--nuit-2); border-block: 1px solid var(--ligne); }
.charges-piste{ height: 380vh; }
.charges-scene{
  position: sticky; top: 0;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; overflow: clip;
}
.charges-scene::before{ /* carroyage discret */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(111,194,232,.04) 1px, transparent 1px) 0 0 / 100% 76px,
    linear-gradient(90deg, rgba(111,194,232,.04) 1px, transparent 1px) 0 0 / 76px 100%;
  -webkit-mask-image: radial-gradient(75% 75% at 60% 50%, #000 40%, transparent 90%);
  mask-image: radial-gradient(75% 75% at 60% 50%, #000 40%, transparent 90%);
}
.charges-grid{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 70px); align-items: center; width: 100%;
}
.charges-copy .section-title{ margin-bottom: 8px; }
.charges-sous{ color: var(--brume); max-width: 42ch; margin-bottom: clamp(18px, 3vh, 34px); }

.etapes{ display: grid; gap: clamp(10px, 1.8vh, 20px); }
.etape{
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;
  transition: opacity .45s ease;
}
html.js .etape{ opacity: .3; }
html.js .etape.on{ opacity: 1; }
.etape-num{
  font-size: .78rem; color: var(--plan); padding-top: 4px;
  transition: color .4s;
}
.etape.on .etape-num{ color: var(--minium-2); }
.etape h3{
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  margin-bottom: 4px;
}
.etape p{ color: var(--brume); font-size: .92rem; max-width: 46ch; }
.etape sub{ font-size: .7em; }
.charges-compteur{
  margin-top: clamp(16px, 2.6vh, 30px); font-size: .72rem; letter-spacing: .3em;
  color: var(--plan);
}
.charges-compteur #etape-cur{ color: var(--minium-2); }

.charges-fig{ position: relative; }
.charges-svg{ width: 100%; max-height: 78svh; height: auto; margin-inline: auto; overflow: visible; }
.charges-cap{
  margin-top: 10px; text-align: center;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--plan);
}

.charges-svg path{ fill: none; stroke-linecap: round; }
.ch-trait{ stroke: rgba(234, 242, 247, .88); stroke-width: 2; }
.ch-sol-ligne{ stroke: var(--cyan); stroke-width: 2.4; }
.ch-niv{ stroke: rgba(111, 194, 232, .8); stroke-width: 1.4; }
.ch-cote{ font-family: var(--f-mono); font-size: 13px; fill: rgba(111, 194, 232, .85); }
.ch-tag{ font-family: var(--f-mono); font-size: 14px; letter-spacing: .04em; }
.ch-sub{ font-size: .64em; }
.ch-tag-min{ fill: var(--minium-2); }
.ch-tag-cyan{ fill: var(--cyan); }
.ch-centre{ text-anchor: middle; }
.ch-droite{ text-anchor: end; }
.ch-qline{ stroke: var(--minium); stroke-width: 2.2; }
.ch-qfl, .ch-nfl{ stroke: var(--minium); stroke-width: 2; }
.ch-nfl{ stroke: var(--minium-2); }
.ch-parab{ stroke: var(--minium); stroke-width: 2; fill: rgba(244, 85, 46, .13); }
.ch-hach{ stroke: rgba(111, 194, 232, .7); stroke-width: 1.5; }
.ch-press{ stroke: var(--minium-2); stroke-width: 2; }

/* traçage de la base à l'entrée de la section */
html.js .charges .ch-base :is(path){ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--expo); }
html.js .charges .ch-base .ch-cote{ opacity: 0; transition: opacity .8s ease .9s; }
html.js .charges.in .ch-base :is(path){ stroke-dashoffset: 0; }
html.js .charges.in .ch-base .ch-cote{ opacity: 1; }

/* étapes pilotées par --p1..--p4 (JS) */
html.js .ch-st path{ stroke-dasharray: 1; }
html.js .ch-st1{ opacity: var(--p1, 0); }
html.js .ch-st1 path{ stroke-dashoffset: calc(1 - var(--p1, 0)); }
html.js .ch-st2{ opacity: var(--p2, 0); }
html.js .ch-st2 path{ stroke-dashoffset: calc(1 - var(--p2, 0)); }
html.js .ch-st3{ opacity: var(--p3, 0); }
html.js .ch-st3 path{ stroke-dashoffset: calc(1 - var(--p3, 0)); }
html.js .ch-st4{ opacity: var(--p4, 0); }
html.js .ch-st4 path{ stroke-dashoffset: calc(1 - var(--p4, 0)); }

.charges-rail{
  position: absolute; left: max(16px, calc((100vw - var(--conteneur)) / 2 - 40px));
  top: 50%; transform: translateY(-50%);
  width: 2px; height: 38vh; background: var(--ligne); overflow: hidden;
}
.charges-rail span{
  display: block; width: 100%; height: 100%;
  background: var(--grad-minium);
  transform: scaleY(var(--p, 0)); transform-origin: top;
}

/* ============================================================
   03 · EXPERTISE
   ============================================================ */
.expertises{ border-top: 1px solid var(--ligne); }
.expertise-row{
  position: relative;
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px;
  gap: clamp(16px, 3vw, 40px); align-items: start;
  padding: clamp(26px, 3.6vw, 44px) 8px;
  border-bottom: 1px solid var(--ligne);
  transition: background .45s;
}
.expertise-row::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--grad-minium); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--expo);
}
.expertise-row:hover{ background: rgba(111, 194, 232, .035); }
.expertise-row:hover::after{ transform: scaleX(1); }
.exp-num{ font-size: .8rem; color: var(--minium-2); padding-top: 8px; letter-spacing: .1em; }
.exp-corps h3{
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); margin-bottom: 8px;
}
.exp-corps p{ color: var(--brume); max-width: 62ch; }
.exp-fleche{
  font-size: 1.4rem; color: var(--plan); padding-top: 6px; justify-self: end;
  transition: transform .5s var(--expo), color .3s;
}
.expertise-row:hover .exp-fleche{ transform: translateX(8px); color: var(--minium-2); }

/* ============================================================
   04 · MATÉRIAUX
   ============================================================ */
.materiaux-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
.mat-carte{
  border: 1px solid var(--ligne); background: var(--nuit-2);
  border-radius: 4px; padding: 22px 22px 26px;
  transition: transform .5s var(--expo), border-color .4s, box-shadow .5s;
}
.mat-carte:hover{
  transform: translateY(-6px); border-color: rgba(111, 194, 232, .35);
  box-shadow: 0 18px 48px rgba(3, 10, 18, .5);
}
html.js .mat-carte.reveal:nth-child(2){ --d: .12s; }
html.js .mat-carte.reveal:nth-child(3){ --d: .24s; }
.mat-swatch{
  height: 118px; border: 1px solid var(--ligne); border-radius: 3px;
  overflow: hidden; margin-bottom: 18px; position: relative;
}
.mat-swatch::after{
  content: "COUPE — HACHURES NORMALISÉES"; position: absolute; right: 8px; bottom: 6px;
  font-family: var(--f-mono); font-size: 8px; letter-spacing: .18em; color: var(--plan);
}
.mat-swatch svg{ width: 100%; height: 100%; }
.mat-carte:nth-child(1) .mat-swatch{ color: rgba(111, 194, 232, .8); }
.mat-carte:nth-child(2) .mat-swatch{ color: rgba(234, 242, 247, .75); }
.mat-carte:nth-child(3) .mat-swatch{ color: rgba(255, 126, 87, .78); }
.mat-fill{ transition: transform .6s linear; }
.mat-carte:hover .mat-fill{ animation: glisse 7s linear infinite; }
.mat-code{ font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--minium-2); margin-bottom: 8px; }
.mat-carte h3{ font-family: var(--f-disp); font-weight: 700; font-size: 1.5rem; margin-bottom: 8px; }
.mat-carte > p{ color: var(--brume); font-size: .95rem; }
.mat-specs{
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(111, 194, 232, .25);
  font-size: .72rem; color: var(--cyan); letter-spacing: .04em;
}

/* ============================================================
   05 · PARCOURS
   ============================================================ */
.jalons{ position: relative; padding-left: 26px; }
.jalons::before{
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(var(--cyan), var(--plan) 55%, transparent);
}
.jalon{
  position: relative;
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  padding-block: clamp(22px, 3vw, 34px);
}
.jalon::before{
  content: ""; position: absolute; left: -26px; top: calc(clamp(22px, 3vw, 34px) + 8px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--nuit); border: 2px solid var(--minium);
}
.jalon + .jalon{ border-top: 1px dashed rgba(111, 194, 232, .14); }
.jalon-date{ font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); padding-top: 6px; }
.jalon-corps h3{ font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: 6px; }
.jalon-lieu{ font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--minium-2); margin-bottom: 10px; }
.jalon-corps > p:last-child{ color: var(--brume); max-width: 62ch; }
.jalon-manque .jalon-corps{
  border: 1px dashed rgba(244, 85, 46, .4); border-radius: 4px;
  padding: 16px 20px; background: rgba(244, 85, 46, .025);
}
.jalon-manque .jalon-date{ color: var(--brume); }
.jalon-manque h3{ color: var(--brume); }
.jalon-manque::before{ border-color: var(--plan); border-style: dashed; }

/* ============================================================
   06 · LOGICIELS
   ============================================================ */
.outils-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
.outils-groupe{
  border-top: 2px solid var(--minium); background: var(--nuit-2);
  border-inline: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne);
  padding: 20px 22px 14px; border-radius: 0 0 4px 4px;
}
html.js .outils-groupe.reveal:nth-child(2){ --d: .12s; }
html.js .outils-groupe.reveal:nth-child(3){ --d: .24s; }
.outils-cat{
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--minium-2); margin-bottom: 12px;
}
.outils-groupe li{
  padding: 10px 0; border-top: 1px solid var(--ligne);
  font-size: .96rem; display: flex; align-items: baseline; gap: 10px;
}
.outils-groupe li::before{ content: "—"; color: var(--plan); font-family: var(--f-mono); font-size: .8rem; }

/* ============================================================
   07 · CONTACT
   ============================================================ */
.contact{ padding-block: clamp(100px, 13vw, 170px); }
.contact-grid{
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(30px, 5vw, 80px); align-items: center;
}
.contact-lede{ color: var(--brume); max-width: 50ch; margin-top: 18px; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.contact-lignes{ margin-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--ligne); }
.contact-lignes li{
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding-block: 15px; border-bottom: 1px solid var(--ligne);
}
.contact-lignes li > span{
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--plan);
}
.contact-tel{
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); letter-spacing: .01em;
  display: inline-block; width: fit-content;
  transition: color .3s;
}
.contact-tel:hover{ color: var(--minium-2); }
.contact-lien{
  font-family: var(--f-mono); font-size: 1rem; color: var(--cyan);
  display: inline-block; width: fit-content;
}
.contact-lien:hover{ color: var(--minium-2); }
.contact-lignes address{ color: var(--brume); font-size: .95rem; overflow-wrap: anywhere; }
.contact-manque em{
  color: var(--brume); font-size: .85rem;
  border: 1px dashed rgba(244, 85, 46, .45); border-radius: 3px;
  padding: 2px 10px; width: fit-content;
}

/* Cachet : seul l'anneau tourne, le monogramme reste fixe */
.cachet{ justify-self: center; }
.cachet-svg{ width: clamp(170px, 16vw, 220px); height: auto; overflow: visible; }
.cachet-bord{ fill: none; stroke: rgba(111, 194, 232, .4); stroke-width: 1.4; }
.cachet-bord-int{ stroke: rgba(111, 194, 232, .22); }
.cachet-anneau{ animation: tourne 30s linear infinite; transform-origin: 90px 90px; }
.cachet-texte{
  font-family: var(--f-mono); font-size: 10.6px; letter-spacing: .24em;
  fill: var(--brume); text-transform: uppercase;
}
.cachet-marque{ color: var(--minium); }

/* ============================================================
   PIED — CARTOUCHE
   ============================================================ */
.pied{ border-top: 1px solid var(--ligne); padding-top: clamp(36px, 5vw, 60px); }
.cartouche{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--ligne); border: 1px solid var(--ligne);
}
.cartouche-cell{ background: var(--nuit); padding: 14px 16px; font-size: .88rem; }
.cartouche-cell span{
  display: block; font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--plan);
  margin-bottom: 5px;
}
.c-large{ grid-column: span 2; }
.pied-ligne{
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding-block: 24px; margin-top: 6px;
}
.pied-ligne p{ color: var(--brume); font-size: .84rem; }
.pied-ligne p a{ color: var(--craie); border-bottom: 1px solid rgba(111, 194, 232, .35); }
.pied-ligne p a:hover{ color: var(--minium-2); border-color: var(--minium); }
.pied-haut{
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brume);
}
.pied-haut:hover{ color: var(--minium-2); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes apparait{ to{ opacity: 1; } }
@keyframes monte{ from{ transform: translateY(118%); } to{ transform: translateY(0); } }
@keyframes leve{ from{ opacity: 0; transform: translateY(26px); } to{ opacity: 1; transform: none; } }
@keyframes ping{ 0%{ transform: scale(.6); opacity: 1; } 100%{ transform: scale(2.1); opacity: 0; } }
@keyframes descend{ 0%{ top: -12px; } 60%{ top: 44px; } 100%{ top: 44px; } }
@keyframes tourne{ to{ transform: rotate(360deg); } }
@keyframes glisse{ from{ transform: translate(0, 0); } to{ transform: translate(-52px, -52px); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1120px){
  .charges-rail{ display: none; }
  .epure{ right: -14%; }
}

@media (max-width: 900px){
  .nav{ display: none; }
  .burger{ display: block; }
  .epure{ right: -32%; opacity: .38; height: 78%; }

  .hero-bas{ grid-template-columns: minmax(0, 1fr); }
  .hero-actions, .hero-meta{ justify-content: flex-start; }

  .profil-grid{ grid-template-columns: minmax(0, 1fr); }
  .contact-grid{ grid-template-columns: minmax(0, 1fr); }
  .cachet{ justify-self: start; }

  .materiaux-grid{ grid-template-columns: minmax(0, 1fr); }
  .outils-grid{ grid-template-columns: minmax(0, 1fr); }

  /* Descente de charges : figure au-dessus, étape active seule en dessous */
  .charges-piste{ height: 340vh; }
  .charges-scene{ padding-top: calc(var(--header-h) + 6px); }
  .charges-grid{
    grid-template-columns: minmax(0, 1fr);
    gap: 12px; align-content: center;
  }
  .charges-copy{ display: contents; }
  .charges-copy .kicker{ order: 1; margin-bottom: 4px; }
  .charges-copy .section-title{ order: 2; font-size: clamp(1.7rem, 6.4vw, 2.3rem); }
  .charges-copy .section-title br{ display: none; }
  .charges-sous{ order: 3; font-size: .88rem; margin-bottom: 4px; }
  .charges-fig{ order: 4; }
  .charges-svg{ max-height: 42svh; }
  .charges-cap{ display: none; }
  .etapes{ order: 5; position: relative; min-height: 128px; }
  html.js .etapes .etape{
    position: absolute; inset: 0 auto auto 0; width: 100%;
    opacity: 0; transform: translateY(10px);
    transition: opacity .45s ease, transform .45s var(--expo);
  }
  html.js .etapes .etape.on{ opacity: 1; transform: none; }
  .etape p{ max-width: none; }
  .charges-compteur{ order: 6; margin-top: 4px; }

  .expertise-row{ grid-template-columns: 60px minmax(0, 1fr); }
  .exp-fleche{ display: none; }

  .jalon{ grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .jalon-date{ padding-top: 0; }

  .cartouche{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 700px) and (max-width: 900px){
  .charges-svg{ max-height: 34svh; }
  .charges-sous{ display: none; }
}

@media (max-width: 760px){
  .scroll-cue{ display: none; }        /* chevauche le contenu sur petits écrans */
  .feuille{ display: none; }
  .hero-title{ font-size: clamp(3.4rem, 16.5vw, 6rem); }
  .hero-inner{ padding-bottom: 64px; }
  .section-index{ font-size: clamp(3.6rem, 14vw, 5.4rem); top: -.2em; }
}

@media (max-width: 520px){
  body{ font-size: 15.5px; }
  .brand-text em{ display: none; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .btn{ justify-content: center; }
  .hero-meta{ gap: 12px 20px; }
  .fiche{ padding: 18px 16px 6px; }
  .fiche-table div{ grid-template-columns: 88px minmax(0, 1fr); }
  .contact-lignes li{ grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 13px; }
  .contact-tel{ font-size: 1.6rem; }
  .cachet-svg{ width: 150px; }
  .cartouche{ grid-template-columns: minmax(0, 1fr); }
  .c-large{ grid-column: auto; }
}

/* ============================================================
   ACCESSIBILITÉ — mouvement réduit & absence de JS
   ============================================================ */

/* Sans JS : tout est visible, rien n'est épinglé */
html:not(.js) .charges-piste{ height: auto; }
html:not(.js) .charges-scene{ position: static; min-height: 0; padding-block: 90px; }

/* JS actif mais mouvement réduit : on fige tout, tout est dessiné */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html{ scroll-behavior: auto; }
  .pulse::after, .scroll-cue i::after{ display: none; }
  .cachet-anneau{ animation: none; }
  .mat-carte:hover .mat-fill{ animation: none; }

  html.js .hero .rise, html.js .hero-title .line-in{ opacity: 1; transform: none; animation: none; }
  html.js .epure :is(path, circle, text){ stroke-dashoffset: 0 !important; opacity: 1 !important; animation: none; }
  html.js .hero-cote path{ stroke-dashoffset: 0; animation: none; }
  html.js .reveal{ opacity: 1; transform: none; }
  html.js .reveal .mask > span{ transform: none; }

  html.js .charges-piste{ height: auto; }
  html.js .charges-scene{ position: static; min-height: 0; padding-block: 90px; }
  html.js .charges .ch-base path{ stroke-dashoffset: 0; }
  html.js .charges .ch-base .ch-cote{ opacity: 1; }
  html.js .ch-st{ opacity: 1 !important; }
  html.js .ch-st path{ stroke-dashoffset: 0 !important; }
  html.js .etape{ opacity: 1; }
  html.js .etapes .etape{ position: static; opacity: 1; transform: none; }
  .etapes{ min-height: 0; }
  .charges-compteur{ display: none; }
  .charges-rail{ display: none; }
}