/* Polices auto-hébergées (latin + latin-ext) */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext-d9a6a0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-fe1634.woff2) format('woff2');
  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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext-d9a6a0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-fe1634.woff2) format('woff2');
  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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext-d9a6a0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-fe1634.woff2) format('woff2');
  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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext-d9a6a0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-fe1634.woff2) format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-689cff.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-533c11.woff2) format('woff2');
  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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/unbounded-latin-ext-936fcc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/unbounded-latin-37e641.woff2) format('woff2');
  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: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/unbounded-latin-ext-936fcc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/unbounded-latin-37e641.woff2) format('woff2');
  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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/unbounded-latin-ext-936fcc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/unbounded-latin-37e641.woff2) format('woff2');
  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;
}

/* ============================================================
   TC Agency · Refonte 2027 · Piste A « Sous tension »
   ============================================================ */
:root{
  --nuit:#0A0B0D; --ardoise:#14171C; --surface:#1B1F26; --anthra:#2A323F;
  --trait:#242932; --brume:#8A8F98; --brume-2:#B4B8BF; --craie:#ECEEF0; --jaune:#E3D504;
  --f-disp:"Unbounded",system-ui,sans-serif; --f-txt:"Hanken Grotesk",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(16px,3.4vw,56px); --max:1440px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--nuit);color:var(--craie);font:400 17px/1.6 var(--f-txt);overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.mono{font-family:var(--f-mono);font-weight:500}
.disp{font-family:var(--f-disp)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
::selection{background:var(--jaune);color:var(--nuit)}
:focus-visible{outline:2px solid var(--jaune);outline-offset:3px;border-radius:4px}

/* ---------- Boutons ---------- */
.pill{display:inline-flex;align-items:center;gap:.7em;border-radius:999px;font:600 16px/1 var(--f-txt);padding:17px 28px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s;will-change:transform}
.pill--j{background:var(--jaune);color:var(--nuit)}
.pill--j:hover{background:#F0E21A}
.pill--v{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:var(--craie);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pill--v:hover{border-color:rgba(255,255,255,.5)}
.pill svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.pill:hover svg{transform:translateX(3px)}
.pill:active{transform:scale(.98)}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--nuit);display:grid;place-items:center}
.loader-in{display:flex;flex-direction:column;align-items:center;gap:28px}
.loader svg{width:min(26vw,128px);height:auto;overflow:visible}
.loader svg path,.loader svg line{fill:none;stroke:var(--jaune);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 10px rgba(227,213,4,.55))}
.loader-n{font:500 13px/1 var(--f-mono);letter-spacing:.2em;color:var(--brume)}
.no-js .loader,.reduit .loader{display:none}

/* ---------- Barre de progression ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--jaune);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}

/* ---------- Nav ---------- */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav-in{display:flex;align-items:center;gap:40px;height:88px;transition:height .4s var(--ease)}
.nav-logo img{height:30px;width:auto;transition:height .4s var(--ease)}
.nav-links{display:flex;gap:34px;margin-left:auto;font-size:15.5px;font-weight:500;color:#C9CCD1}
.nav-links a{position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--jaune);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links a:hover{color:var(--craie)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .pill{padding:13px 22px;font-size:15px}
.nav-solide{background:rgba(10,11,13,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-color:var(--trait)}
.nav-solide .nav-in{height:70px}
.nav-solide .nav-logo img{height:24px}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(10,11,13,.4);position:relative;cursor:pointer}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;background:var(--craie);transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
.nav-ouverte .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.nav-ouverte .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}
.menu-mobile{position:fixed;inset:0;z-index:49;background:var(--nuit);padding:120px var(--gut) 40px;display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.menu-mobile a{font:500 clamp(28px,8vw,44px)/1.25 var(--f-disp);letter-spacing:-.03em}
.menu-mobile .pill{margin-top:28px;align-self:flex-start;font-size:16px}
.nav-ouverte .menu-mobile{opacity:1;visibility:visible}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--nuit)}
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-voile{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,11,13,.9) 0%,rgba(10,11,13,.5) 40%,rgba(10,11,13,0) 68%),
  linear-gradient(0deg,rgba(10,11,13,.92) 0%,rgba(10,11,13,0) 42%),
  linear-gradient(180deg,rgba(10,11,13,.55) 0%,rgba(10,11,13,0) 20%)}
.hero-ombre{position:absolute;inset:0;background:var(--nuit);opacity:0;pointer-events:none}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(40px,9vh,96px);z-index:2}
.hero-eyebrow{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--jaune);margin-bottom:26px}
.hero-eyebrow::before{content:"";width:40px;height:1px;background:currentColor}
.hero h1 .hero-eyebrow{font-size:13px;line-height:1.4;font-weight:500;letter-spacing:.18em;max-width:none}
.hero h1{font:500 clamp(42px,6.3vw,96px)/1.02 var(--f-disp);letter-spacing:-.04em;max-width:13.5ch;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--jaune)}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .l > span{display:block}
.hero-sub{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--brume-2);max-width:40ch;margin-bottom:36px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Manifeste + chiffres ---------- */
.manifeste{padding:clamp(110px,16vh,180px) 0 clamp(90px,12vh,140px)}
.manifeste-txt{font:400 clamp(28px,3.6vw,54px)/1.22 var(--f-disp);letter-spacing:-.035em;max-width:24ch}
.manifeste-txt .mot{color:#3A3F48;transition:color .2s}
.manifeste-txt em{font-style:normal}
.manifeste-txt .mot.j{--on:var(--jaune)}
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(80px,12vh,140px)}
.chiffre{position:relative;padding-top:26px}
.chiffre::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--trait)}
.chiffre .filet{position:absolute;top:0;left:0;right:0;height:1px;background:var(--jaune);transform-origin:0 50%}
.chiffre b{display:block;font:500 clamp(52px,6.2vw,96px)/1 var(--f-disp);letter-spacing:-.05em;margin-bottom:10px;font-variant-numeric:tabular-nums}
.chiffre span{font-size:15.5px;color:var(--brume)}

/* ---------- Services ---------- */
.services{position:relative;padding:clamp(80px,12vh,140px) 0}
.services h2,.methode h2,.blog h2{font:500 clamp(34px,4.2vw,64px)/1.04 var(--f-disp);letter-spacing:-.04em;max-width:16ch}
.services h2 .sourd{color:var(--brume)}
/* Mise en page de base (mobile, sans JS, mouvement réduit) : métiers empilés */
.m-tete{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:clamp(40px,6vh,72px)}
.m-prog{display:none}
.metiers{display:grid;gap:clamp(64px,10vh,110px)}
.metier{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,90px);align-items:center}
.m-visuel{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--ardoise);order:2}
.m-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-visuel::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none}
.m-copy{max-width:560px}
.m-n{display:block;font-size:13px;color:var(--jaune);letter-spacing:.12em;margin-bottom:18px}
.m-copy h3{font:500 clamp(32px,3.5vw,56px)/1.02 var(--f-disp);letter-spacing:-.045em;margin-bottom:20px;max-width:13ch}
.m-accroche{font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--brume-2);margin-bottom:30px;max-width:38ch}
.m-liste{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-bottom:34px;padding-top:26px;border-top:1px solid var(--trait)}
.m-liste li{position:relative;padding-left:20px;font-size:15.5px;color:var(--craie)}
.m-liste li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--jaune)}
.m-lien{display:inline-flex;align-items:center;gap:10px;font-weight:600;border-bottom:1px solid var(--jaune);padding-bottom:4px}
.m-lien svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.m-lien:hover svg{transform:translateX(4px)}
/* Mode stepper épinglé (desktop, activé par le JS) */
.stepper-on{padding:0}
.stepper-on .m-scene{height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:70px}
.stepper-on .m-tete{margin-bottom:clamp(28px,4.5vh,52px)}
.stepper-on .m-prog{display:flex;align-items:center;gap:20px;font-size:13px;color:var(--brume)}
.m-prog b{font-weight:500;color:var(--craie);display:inline-block;min-width:2ch;text-align:right}
.m-segs{display:flex;gap:6px}
.m-segs i{position:relative;width:46px;height:2px;background:var(--trait);overflow:hidden}
.m-segs i::after{content:"";position:absolute;inset:0;background:var(--jaune);transform:scaleX(var(--p,0));transform-origin:0 50%}
.stepper-on .metiers{position:relative;display:block;height:min(62vh,600px)}
.stepper-on .metier{position:absolute;inset:0;height:100%}
.stepper-on .m-visuel{aspect-ratio:auto;height:100%}
.stepper-on .metier + .metier .m-copy{opacity:0;visibility:hidden}
.stepper-on .metier + .metier .m-visuel{clip-path:inset(100% 0 0 0 round 16px)}

/* ---------- Réalisations (écrans qui défilent) ---------- */
.work{position:relative;background:var(--ardoise);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:clamp(100px,14vh,170px) 0 clamp(90px,12vh,140px);overflow:hidden}
.work-tete{margin-bottom:clamp(48px,8vh,90px)}
.work-tete h2{font:500 clamp(38px,4.6vw,72px)/1 var(--f-disp);letter-spacing:-.045em;margin-bottom:22px;max-width:14ch}
.work-tete p{color:var(--brume-2);max-width:52ch}
.ecrans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,56px);align-items:start}
.col{display:grid;gap:clamp(56px,8vh,100px)}
.col--b{margin-top:clamp(90px,18vh,220px)}
.ecran{display:block}
.ecran-cadre{border-radius:14px;overflow:hidden;background:#1F242C;border:1px solid #2C323C;box-shadow:0 50px 90px -50px rgba(0,0,0,.9);transition:border-color .4s,box-shadow .4s}
.ecran-barre{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#1A1E25;border-bottom:1px solid #262B33}
.ecran-barre i{width:10px;height:10px;border-radius:50%;background:#3A404A;transition:background .4s}
.ecran-barre span{margin-left:12px;flex:0 1 300px;min-width:0;height:22px;border-radius:6px;background:#111419;font:500 12px/22px var(--f-mono);color:var(--brume);padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ecran-vue{position:relative;aspect-ratio:16/11;overflow:hidden;background:#fff}
.ecran-vue img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;will-change:transform}
.ecran:hover .ecran-cadre{border-color:var(--jaune);box-shadow:0 50px 90px -50px rgba(0,0,0,.9),0 0 0 1px var(--jaune)}
.ecran:hover .ecran-barre i:first-child{background:var(--jaune)}
.ecran-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px}
.ecran-meta h3{font:500 clamp(18px,1.5vw,24px)/1.2 var(--f-disp);letter-spacing:-.025em}
.ecran-meta span{font-size:14.5px;color:var(--brume);white-space:nowrap}
.work-fin{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;margin-top:clamp(70px,11vh,130px)}
.work-fin p{font:400 clamp(22px,2vw,30px)/1.25 var(--f-disp);letter-spacing:-.03em;color:var(--brume-2)}
.work-fin b{font-weight:500;color:var(--craie)}

/* ---------- Méthode (ligne de circuit) ---------- */
.methode{padding:clamp(100px,14vh,170px) 0}
.methode-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,110px)}
.methode-tete{position:sticky;top:clamp(110px,18vh,170px);align-self:start}
.methode-tete p{color:var(--brume-2);max-width:36ch;margin-top:24px}
.etapes{position:relative;padding-left:64px}
.circuit{position:absolute;left:0;top:10px;bottom:10px;width:40px}
.circuit svg{width:100%;height:100%}
.circuit path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.circuit .fond{stroke:var(--trait)}
.circuit .trace{stroke:var(--jaune);filter:drop-shadow(0 0 6px rgba(227,213,4,.6))}
.etape{position:relative;padding:0 0 clamp(64px,10vh,110px)}
.etape:last-child{padding-bottom:0}
.etape::before{content:"";position:absolute;left:-64px;top:8px;width:16px;height:16px;margin-left:-7px;border-radius:50%;background:var(--nuit);border:2px solid var(--trait);transition:border-color .4s,background .4s,box-shadow .4s}
.etape.on::before{border-color:var(--jaune);background:var(--jaune);box-shadow:0 0 0 6px rgba(227,213,4,.14),0 0 18px rgba(227,213,4,.6)}
.etape .mono{font-size:13px;color:var(--brume);letter-spacing:.08em;transition:color .4s}
.etape.on .mono{color:var(--jaune)}
.etape h3{font:500 clamp(26px,2.6vw,40px)/1.1 var(--f-disp);letter-spacing:-.035em;margin:10px 0 14px}
.etape p{color:var(--brume-2);max-width:46ch}

/* ---------- Breaker offshore ---------- */
.breaker{position:relative;height:120svh;min-height:760px}
.breaker-cadre{position:sticky;top:0;height:100svh;overflow:hidden;clip-path:inset(0 0 0 0 round 0)}
.breaker-cadre img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.breaker-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,13,.88),rgba(10,11,13,.35) 60%,rgba(10,11,13,.15)),linear-gradient(0deg,rgba(10,11,13,.7),rgba(10,11,13,0) 50%)}
.breaker-copy{position:absolute;left:0;right:0;bottom:clamp(48px,10vh,110px);z-index:2}
.breaker-copy h2{font:500 clamp(34px,4.4vw,70px)/1.04 var(--f-disp);letter-spacing:-.045em;max-width:15ch;margin-bottom:22px}
.breaker-copy p{color:#C9CDD3;max-width:46ch;margin-bottom:30px;font-size:clamp(16px,1.25vw,19px)}
.breaker-copy .lien{display:inline-flex;align-items:center;gap:10px;font-weight:600;border-bottom:1px solid var(--jaune);padding-bottom:4px}

/* ---------- Clients (mur de logos) + partenaires ---------- */
.clients{padding:clamp(90px,13vh,150px) 0 clamp(70px,10vh,120px)}
.clients-tete{margin-bottom:clamp(40px,6vh,64px)}
.clients-tete h2{font:500 clamp(34px,4.2vw,64px)/1.04 var(--f-disp);letter-spacing:-.04em;margin-bottom:16px}
.clients-tete p{color:var(--brume-2);max-width:48ch}
.mur{display:flex;flex-wrap:wrap;justify-content:center;padding:1px 0 0 1px}
.mur li{flex:0 0 calc(100% / 6);height:clamp(104px,9vw,136px);display:grid;place-items:center;padding:0 clamp(16px,2vw,30px);margin:-1px 0 0 -1px;box-shadow:inset 0 0 0 1px var(--trait);transition:background .35s}
.mur li:hover{background:var(--ardoise)}
.mur li.haut img{max-height:clamp(54px,5vw,78px)}
.mur img{max-height:clamp(38px,3.6vw,56px);max-width:min(100%,170px);width:auto;height:auto;object-fit:contain;opacity:.74;transition:opacity .35s,transform .45s var(--ease)}
.mur li:hover img{opacity:1;transform:scale(1.05)}
.partenaires{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(24px,4vw,64px);margin-top:clamp(56px,8vh,90px);padding:clamp(28px,4vh,40px) clamp(24px,3vw,44px);border-radius:16px;background:#060607;border:1px solid var(--trait)}
.partenaires h3{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brume);white-space:nowrap}
.partenaires ul{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px 40px}
.partenaires img{height:clamp(30px,3vw,46px);width:auto}

/* ---------- Blog (cartes empilées) ---------- */
.blog{padding:clamp(90px,12vh,140px) 0 clamp(60px,8vh,100px)}
.blog-tete{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(40px,6vh,70px)}
.blog-tete .lien{font-weight:600;border-bottom:1px solid var(--jaune);padding-bottom:4px;white-space:nowrap}
.pile{position:relative}
.pile-item{position:sticky;padding-bottom:28px}
.pile-item:nth-child(1){top:14vh}.pile-item:nth-child(2){top:17vh}.pile-item:nth-child(3){top:20vh}
.article{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,64px);align-items:end;min-height:min(52vh,460px);padding:clamp(28px,3.4vw,52px);border-radius:16px;background:var(--surface);border:1px solid var(--trait);transform-origin:50% 0;will-change:transform}
.pile-item:nth-child(2) .article{background:var(--anthra);border-color:#36404F}
.pile-item:nth-child(3) .article{background:var(--jaune);color:var(--nuit);border-color:var(--jaune)}
.article .meta{display:flex;gap:18px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--brume);align-self:start;grid-column:1/-1}
.pile-item:nth-child(3) .meta{color:#4A4605}
.article h3{font:500 clamp(24px,2.6vw,40px)/1.1 var(--f-disp);letter-spacing:-.035em}
.article p{color:var(--brume-2);max-width:48ch}
.pile-item:nth-child(3) .article p{color:#2C2A06}
.article .lire{display:inline-flex;gap:10px;align-items:center;margin-top:20px;font-weight:600}

/* ---------- CTA final ---------- */
.cta{padding:clamp(110px,16vh,190px) 0 clamp(70px,10vh,110px);text-align:left;overflow:hidden}
.cta h2{font:500 clamp(48px,9vw,150px)/.95 var(--f-disp);letter-spacing:-.055em;margin-bottom:clamp(36px,5vh,56px)}
.cta h2 em{font-style:normal;color:var(--jaune)}
.cta-bas{display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,6vw,100px);align-items:start}
.cta .pill{font-size:18px;padding:22px 36px}
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;color:var(--brume-2);font-size:15.5px}
.contacts b{display:block;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brume);margin-bottom:10px}
.contacts a:hover{color:var(--craie)}
.citation{margin-top:clamp(70px,10vh,110px);padding-top:32px;border-top:1px solid var(--trait);display:flex;gap:22px;align-items:center;color:var(--brume-2)}
.citation p{font-size:clamp(17px,1.4vw,21px);max-width:60ch;color:var(--craie)}
.citation span{display:block;margin-top:6px;font-size:14.5px;color:var(--brume)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--trait);padding:56px 0 34px;color:var(--brume);font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.footer img{height:26px;width:auto;margin-bottom:18px}
.footer h2{font:500 12px/1 var(--f-mono);max-width:none;letter-spacing:.12em;text-transform:uppercase;color:var(--brume);margin-bottom:16px}
.footer li{margin-bottom:8px}
.footer a{color:var(--brume-2)}.footer a:hover{color:var(--craie)}
.footer-bas{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--trait);font-size:13.5px}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav-links,.nav-in > .pill{display:none}
  .burger{display:block}
  .chiffres{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .metier{grid-template-columns:1fr;gap:28px}
  .col--b{margin-top:clamp(60px,10vh,120px)}
  .m-visuel{order:0}
  .methode-grid{grid-template-columns:1fr}
  .methode-tete{position:static}
  .breaker{height:auto}
  .breaker-cadre{position:relative;height:88svh}
  .article{grid-template-columns:1fr;min-height:0}
  .mur li{flex-basis:calc(100% / 5)}
  .partenaires{grid-template-columns:1fr}
  .partenaires ul{justify-content:flex-start}
  .cta-bas{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav-in{height:72px}
  .nav-logo img{height:24px}
  .hero-voile{background:linear-gradient(0deg,rgba(10,11,13,.95) 0%,rgba(10,11,13,.55) 55%,rgba(10,11,13,.25) 100%)}
  .hero-media video,.hero-media img{object-position:72% 50%}
  .hero-ctas .pill{flex:1 1 100%;justify-content:center}
  .hero-eyebrow{font-size:11.5px;letter-spacing:.12em;gap:10px}
  .hero-eyebrow::before{width:24px}
  .chiffre b{font-size:48px}
  .m-liste{grid-template-columns:1fr}
  .ecrans{grid-template-columns:1fr;gap:56px}
  .col--b{margin-top:0}
  .ecran-meta{flex-direction:column;gap:4px}
  .m-tete{flex-direction:column;align-items:flex-start}
  .blog-tete{flex-direction:column;align-items:flex-start}
  .pile-item{position:relative;top:auto!important}
  .contacts{grid-template-columns:1fr}
  .mur li{flex-basis:calc(100% / 3);height:92px;padding:0 12px}
  .partenaires ul{gap:22px 28px}
  .partenaires img{height:30px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bas{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .manifeste-txt .mot{color:var(--craie)}
  .manifeste-txt .mot.j{color:var(--jaune)}
  .etape::before{border-color:var(--jaune)}
  .circuit .trace{stroke-dashoffset:0!important}
}

/* ============================================================
   Composants des pages intérieures (ajoutés au socle de la homepage)
   ============================================================ */

/* ---------- Nav : page courante + sous-menu Services ---------- */
.nav-links a[aria-current="page"]{color:var(--craie)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.deroulant{position:relative}
.deroulant > a{display:inline-flex;align-items:center;gap:6px}
.deroulant > a svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.sous-menu{position:absolute;top:calc(100% + 14px);left:-22px;min-width:270px;padding:10px;border-radius:14px;background:rgba(20,23,28,.96);border:1px solid var(--trait);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.sous-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.sous-menu a{display:block;padding:11px 14px;border-radius:9px;font-size:15px;color:#C9CCD1}
.sous-menu a::after{display:none}
.sous-menu a:hover{background:var(--surface);color:var(--craie)}
.deroulant:hover .sous-menu,.deroulant:focus-within .sous-menu{opacity:1;visibility:visible;transform:none}
.deroulant:hover > a svg{transform:rotate(180deg)}
.menu-mobile .sous{display:flex;flex-direction:column;gap:2px;padding:4px 0 14px 18px;border-left:1px solid var(--trait);margin-left:4px}
.menu-mobile .sous a{font:500 17px/1.5 var(--f-txt);letter-spacing:0;color:var(--brume-2)}

/* ---------- Bande d'en-tête (photo + voile + parallaxe) ---------- */
.bande{position:relative;min-height:min(78svh,760px);display:flex;align-items:flex-end;overflow:hidden;padding:calc(96px + 8vh) 0 clamp(52px,9vh,100px);background:var(--nuit)}
.bande-img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.bande-voile{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,11,13,.94) 0%,rgba(10,11,13,.6) 45%,rgba(10,11,13,.15) 80%),
  linear-gradient(0deg,var(--nuit) 0%,rgba(10,11,13,0) 50%),
  linear-gradient(180deg,rgba(10,11,13,.6) 0%,rgba(10,11,13,0) 25%)}
.bande .wrap{position:relative;z-index:2;width:100%}
.fil{display:flex;flex-wrap:wrap;gap:10px;font:500 12.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brume);margin-bottom:26px}
.fil li{display:flex;gap:10px;align-items:center}
.fil li + li::before{content:"/";color:#4A505A}
.fil a:hover{color:var(--craie)}
.fil li:last-child{color:var(--jaune)}
.bande h1{font:500 clamp(40px,5.6vw,84px)/1.02 var(--f-disp);letter-spacing:-.045em;max-width:15ch;margin-bottom:24px}
.bande h1 em{font-style:normal;color:var(--jaune)}
.bande h1 .hero-eyebrow{font-size:13px;line-height:1.4;font-weight:500;letter-spacing:.18em;max-width:none;margin-bottom:22px}
.bande-sub{font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--brume-2);max-width:50ch}
.bande-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
/* Visuel néon (sujet centré) : placé dans la moitié droite, fondu vers la gauche */
.bande--droite .wrap > *{max-width:min(48vw,700px)}
.bande--droite h1{font-size:clamp(40px,4.5vw,72px)}
.bande--droite .bande-img{left:auto;right:0;width:min(56%,1100px);object-position:50% 45%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%)}
.bande--droite .bande-voile{background:
  linear-gradient(90deg,rgba(10,11,13,.85) 0%,rgba(10,11,13,.35) 40%,rgba(10,11,13,0) 62%),
  linear-gradient(0deg,var(--nuit) 0%,rgba(10,11,13,0) 45%),
  linear-gradient(180deg,rgba(10,11,13,.6) 0%,rgba(10,11,13,0) 25%)}
.bande--texte{min-height:auto;padding-top:calc(110px + 7vh)}
.bande--texte h1{max-width:22ch;font-size:clamp(34px,4.4vw,66px)}

/* ---------- Sections génériques ---------- */
.sec{padding:clamp(90px,13vh,160px) 0}
.sec--ardoise{background:var(--ardoise);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.sec--serree{padding-top:clamp(40px,6vh,70px)}
.h2{font:500 clamp(34px,4.2vw,64px)/1.04 var(--f-disp);letter-spacing:-.04em;max-width:17ch}
.h2 .sourd,.h2 span.sourd{color:var(--brume)}
.sec-tete{margin-bottom:clamp(44px,7vh,80px)}
.sec-tete p{color:var(--brume-2);max-width:56ch;margin-top:20px;font-size:18px}
.texte p{color:var(--brume-2);font-size:clamp(17px,1.3vw,19px);line-height:1.7;max-width:64ch}
.texte p + p{margin-top:1.1em}
.texte strong{color:var(--craie);font-weight:600}
.deux{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:start}
.deux > .colle{position:sticky;top:clamp(110px,16vh,150px)}
.lien-j{display:inline-flex;align-items:center;gap:10px;font-weight:600;border-bottom:1px solid var(--jaune);padding-bottom:4px}
.lien-j svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.lien-j:hover svg{transform:translateX(4px)}

/* ---------- Groupes d'expertise ---------- */
.groupes{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(32px,5vw,90px)}
.groupe{padding:clamp(28px,4vh,40px) 0;border-top:1px solid var(--trait)}
.groupe-tete{display:flex;align-items:baseline;gap:18px;margin-bottom:18px}
.groupe-tete .mono{font-size:12.5px;color:var(--jaune);letter-spacing:.1em}
.groupe h3{font:500 clamp(21px,1.9vw,28px)/1.15 var(--f-disp);letter-spacing:-.03em}
.groupe > p{color:var(--brume-2);margin-bottom:18px;max-width:52ch}
.puces{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.puces li{position:relative;padding-left:20px;font-size:15.5px;color:var(--craie)}
.puces li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--jaune)}

/* ---------- Rangs numérotés (valeurs, engagements) ---------- */
.rangs{border-top:1px solid var(--trait)}
.rang{display:grid;grid-template-columns:110px 1fr 1.1fr;gap:clamp(20px,4vw,60px);align-items:baseline;padding:clamp(30px,5vh,48px) 0;border-bottom:1px solid var(--trait)}
.rang .mono{font-size:13px;color:var(--jaune)}
.rang h3{font:500 clamp(26px,2.8vw,42px)/1.05 var(--f-disp);letter-spacing:-.04em}
.rang p{color:var(--brume-2);max-width:52ch}

/* ---------- Cartes de navigation (autres métiers, services) ---------- */
.cartes-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.carte-nav{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:230px;padding:26px;border-radius:16px;background:var(--surface);border:1px solid var(--trait);overflow:hidden;transition:border-color .35s,transform .45s var(--ease)}
.carte-nav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;transition:opacity .5s,transform .8s var(--ease)}
.carte-nav::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,13,.92),rgba(10,11,13,.2))}
.carte-nav > *:not(img){position:relative;z-index:1}
.carte-nav .mono{font-size:12.5px;color:var(--jaune);letter-spacing:.1em}
.carte-nav h3{font:500 clamp(21px,1.8vw,26px)/1.15 var(--f-disp);letter-spacing:-.03em}
.carte-nav p{color:var(--brume-2);font-size:15px;margin-top:10px}
.carte-nav:hover{border-color:var(--jaune);transform:translateY(-4px)}
.carte-nav:hover img{opacity:.55;transform:scale(1.05)}
.cartes-nav--grandes .carte-nav{min-height:340px}

/* ---------- Réalisations : filtres + grille ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(36px,6vh,60px)}
.filtre{font:600 15px/1 var(--f-txt);padding:13px 20px;border-radius:999px;border:1px solid var(--trait);background:transparent;color:var(--brume-2);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.filtre span{font:500 12px/1 var(--f-mono);margin-left:8px;color:var(--brume)}
.filtre:hover{border-color:#4A505A;color:var(--craie)}
.filtre.on{background:var(--jaune);border-color:var(--jaune);color:var(--nuit)}
.filtre.on span{color:#4A4605}
.projets{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(40px,5vw,72px) clamp(24px,3vw,48px)}
.projet{display:block}
.projet.cache{display:none}
.projet-img{position:relative;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#232933 0%,var(--surface) 60%);border:1px solid var(--trait);transition:border-color .4s}
.projet-img img{position:absolute;inset:6% 4%;width:92%;height:88%;object-fit:contain;transition:transform .9s var(--ease)}
.projet-img.photo img{inset:0;width:100%;height:100%;object-fit:cover}
.projet:hover .projet-img{border-color:var(--jaune)}
.projet:hover .projet-img img{transform:scale(1.04) translateY(-1%)}
.projet-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px}
.projet-meta h3{font:500 clamp(19px,1.6vw,25px)/1.2 var(--f-disp);letter-spacing:-.025em}
.projet-meta span{font-size:14.5px;color:var(--brume);white-space:nowrap}
.projet-desc{color:var(--brume-2);font-size:15.5px;margin-top:8px;max-width:52ch}

/* ---------- Étude de cas ---------- */
.fiche{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);margin-top:clamp(40px,6vh,60px)}
.fiche div{padding:22px 24px 22px 0}
.fiche div + div{padding-left:24px;border-left:1px solid var(--trait)}
.fiche dt{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brume);margin-bottom:10px}
.fiche dd{font-size:16.5px;color:var(--craie)}
.vitrine{position:relative;border-radius:20px;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#232933 0%,var(--surface) 60%);border:1px solid var(--trait);aspect-ratio:16/9}
.vitrine img{position:absolute;inset:5% 6%;width:88%;height:90%;object-fit:contain}
.vitrine.photo img{inset:0;width:100%;height:100%;object-fit:cover}
.ecran--grand .ecran-vue{aspect-ratio:16/10}
.suivant{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;padding:clamp(50px,8vh,80px) 0;border-top:1px solid var(--trait)}
.suivant .mono{font-size:12.5px;color:var(--brume);letter-spacing:.12em;text-transform:uppercase}
.suivant > div{min-width:0}
.suivant h2{overflow-wrap:break-word;hyphens:auto;font:500 clamp(28px,4.4vw,68px)/1 var(--f-disp);letter-spacing:-.045em;margin-top:14px;transition:color .3s}
.suivant:hover h2{color:var(--jaune)}
.suivant .rond{width:72px;height:72px;border-radius:50%;border:1px solid var(--trait);display:grid;place-items:center;transition:background .35s,border-color .35s}
.suivant .rond svg{width:22px;height:22px}
.suivant:hover .rond{background:var(--jaune);border-color:var(--jaune);color:var(--nuit)}

/* ---------- Blog : liste ---------- */
.billets{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.billet{display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:300px;padding:clamp(26px,3vw,40px);border-radius:16px;background:var(--surface);border:1px solid var(--trait);transition:border-color .35s,transform .45s var(--ease)}
.billet:hover{border-color:var(--jaune);transform:translateY(-4px)}
.billet .meta{display:flex;gap:16px;font:500 12.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brume)}
.billet .meta span:first-child{color:var(--jaune)}
.billet h3{font:500 clamp(21px,1.9vw,29px)/1.15 var(--f-disp);letter-spacing:-.03em;margin-bottom:14px}
.billet p{color:var(--brume-2);font-size:15.5px;max-width:56ch}
.billet--une{grid-column:1/-1;background:var(--jaune);border-color:var(--jaune);color:var(--nuit);min-height:380px}
.billet--une .meta,.billet--une .meta span:first-child{color:#4A4605}
.billet--une h3{font-size:clamp(28px,3.4vw,52px);max-width:22ch}
.billet--une p{color:#2C2A06;font-size:17px}
.billet--une:hover{border-color:var(--nuit)}
.billets .billet--une ~ .billet:last-child:nth-child(even){grid-column:1/-1}

/* ---------- Article ---------- */
.lecture{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(40px,6vw,100px);align-items:start}
.prose{max-width:72ch;font-size:clamp(17px,1.25vw,19px);line-height:1.75;color:#CDD0D5}
.prose > * + *{margin-top:1.1em}
.prose h2{font:500 clamp(25px,2.3vw,34px)/1.2 var(--f-disp);letter-spacing:-.03em;color:var(--craie);margin-top:2.2em;scroll-margin-top:110px}
.prose h3{font:500 clamp(20px,1.7vw,24px)/1.25 var(--f-disp);letter-spacing:-.02em;color:var(--craie);margin-top:1.8em}
.prose strong{color:var(--craie);font-weight:600}
.prose a{color:var(--craie);text-decoration:underline;text-decoration-color:var(--jaune);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:0}
.prose ul li{position:relative;padding-left:24px;list-style:none}
.prose ul li::before{content:"";position:absolute;left:2px;top:.85em;width:10px;height:1px;background:var(--jaune)}
.prose ol{list-style:decimal;padding-left:1.4em}
.prose li + li{margin-top:.5em}
.prose blockquote{border-left:2px solid var(--jaune);padding:4px 0 4px 24px;color:var(--craie);font-size:1.08em}
.prose table{width:100%;border-collapse:collapse;font-size:.88em;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose th,.prose td{min-width:130px}
.prose th,.prose td{border-bottom:1px solid var(--trait);padding:12px 10px;text-align:left;vertical-align:top}
.prose th{color:var(--craie);font-weight:600}
.sommaire{position:sticky;top:120px;padding:24px;border-radius:16px;background:var(--surface);border:1px solid var(--trait)}
.sommaire h2{font:500 12.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brume);margin-bottom:16px}
.sommaire li + li{margin-top:4px}
.sommaire a{display:block;font-size:14.5px;line-height:1.4;padding:7px 0 7px 14px;border-left:1px solid var(--trait);color:var(--brume-2);transition:color .3s,border-color .3s}
.sommaire a:hover{color:var(--craie)}
.sommaire a.on{color:var(--craie);border-color:var(--jaune)}
.auteur{display:flex;align-items:center;gap:16px;margin-top:clamp(50px,8vh,80px);padding-top:30px;border-top:1px solid var(--trait);color:var(--brume-2);font-size:15.5px}
.auteur b{display:block;color:var(--craie);font-weight:600}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(40px,6vw,110px);align-items:start}
.form{display:grid;gap:22px}
.form .ligne{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.champ{display:grid;gap:9px}
.champ label{font-size:14.5px;font-weight:600;color:var(--craie)}
.champ label span,.champ legend span{color:var(--brume);font-weight:400}
fieldset.champ{border:0;min-width:0}
.champ legend{font-size:14.5px;font-weight:600;color:var(--craie);margin-bottom:9px}
.champ input,.champ select,.champ textarea{width:100%;font:400 16.5px/1.5 var(--f-txt);color:var(--craie);background:var(--ardoise);border:1px solid #303641;border-radius:12px;padding:15px 16px;transition:border-color .25s,box-shadow .25s;appearance:none;-webkit-appearance:none}
.champ select{background-image:linear-gradient(45deg,transparent 50%,var(--brume) 50%),linear-gradient(135deg,var(--brume) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.champ textarea{min-height:170px;resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:#7C828C}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--jaune);box-shadow:0 0 0 3px rgba(227,213,4,.18)}
.champ .aide{font-size:13.5px;color:var(--brume)}
.champ .erreur{font-size:13.5px;color:#FF8A7A;display:none}
.champ.invalide input,.champ.invalide textarea,.champ.invalide select{border-color:#FF8A7A}
.champ.invalide .erreur{display:block}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix label{position:relative}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix span{display:inline-block;font:500 14.5px/1 var(--f-txt);padding:12px 16px;border-radius:999px;border:1px solid #303641;color:var(--brume-2);cursor:pointer;transition:all .25s}
.choix input:checked + span{background:var(--jaune);border-color:var(--jaune);color:var(--nuit)}
.choix input:focus-visible + span{outline:2px solid var(--jaune);outline-offset:2px}
.form-bas{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.form-bas p{font-size:13.5px;color:var(--brume);max-width:40ch}
.form-ok{display:none;padding:26px;border-radius:16px;background:var(--surface);border:1px solid var(--jaune)}
.form-ok h3{font:500 22px/1.2 var(--f-disp);margin-bottom:8px}
.form-ok p{color:var(--brume-2)}
.envoye .form{display:none}.envoye .form-ok{display:block}
.coord{display:grid;gap:30px}
.coord div{padding-bottom:26px;border-bottom:1px solid var(--trait)}
.coord b{display:block;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brume);margin-bottom:12px}
.coord a,.coord p{font-size:18px;color:var(--craie)}
.coord a:hover{color:var(--jaune)}
.carte-maps{margin-top:clamp(60px,9vh,100px);border-radius:20px;overflow:hidden;border:1px solid var(--trait);height:clamp(320px,46vh,480px)}
.carte-maps iframe{width:100%;height:100%;border:0;filter:invert(.9) hue-rotate(180deg) grayscale(.6) contrast(.95)}

/* ---------- Responsive des pages intérieures ---------- */
@media (max-width:1024px){
  .deux,.contact-grid,.lecture{grid-template-columns:minmax(0,1fr)}
  .prose{min-width:0}
  .deux > .colle,.sommaire{position:static}
  .bande--droite .bande-img{width:100%;-webkit-mask-image:none;mask-image:none}
  .bande--droite .wrap > *{max-width:none}
  .bande--droite .bande-voile{background:linear-gradient(0deg,var(--nuit) 0%,rgba(10,11,13,.72) 55%,rgba(10,11,13,.5) 100%)}
  .sommaire{display:none}
  .groupes{grid-template-columns:1fr}
  .rang{grid-template-columns:70px 1fr}
  .rang p{grid-column:2}
  .fiche{grid-template-columns:1fr 1fr}
  .fiche div:nth-child(3){padding-left:0;border-left:0}
  .fiche div:nth-child(n+3){border-top:1px solid var(--trait)}
}
@media (max-width:640px){
  .bande{min-height:min(84svh,640px)}
  .bande-voile{background:linear-gradient(0deg,var(--nuit) 0%,rgba(10,11,13,.7) 55%,rgba(10,11,13,.45) 100%)}
  .puces{grid-template-columns:1fr}
  .projets,.billets{grid-template-columns:1fr}
  .projet-meta{flex-direction:column;gap:4px}
  .form .ligne{grid-template-columns:1fr}
  .fiche{grid-template-columns:1fr}
  .fiche div + div{padding-left:0;border-left:0;border-top:1px solid var(--trait)}
  .suivant .rond{width:56px;height:56px}
}

/* ---------- FAQ (details/summary natifs, accessibles sans JS) ---------- */
.faq{border-top:1px solid var(--trait);max-width:980px}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 40px;align-items:center;gap:24px;padding:clamp(20px,3vh,28px) 0;font:500 clamp(18px,1.6vw,23px)/1.3 var(--f-disp);letter-spacing:-.02em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:40px;height:40px;border-radius:50%;border:1px solid var(--trait);background:
  linear-gradient(var(--craie),var(--craie)) center/14px 1.5px no-repeat,linear-gradient(var(--craie),var(--craie)) center/1.5px 14px no-repeat;transition:transform .35s var(--ease),background-color .3s,border-color .3s}
.faq summary:hover{color:var(--jaune)}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--jaune);border-color:var(--jaune);
  background-image:linear-gradient(var(--nuit),var(--nuit)),linear-gradient(var(--nuit),var(--nuit))}
.faq details p{color:var(--brume-2);font-size:clamp(16px,1.2vw,18px);line-height:1.7;max-width:70ch;padding:0 60px 26px 0}

/* ---------- Pages légales et page auteur ---------- */
.legal > *{max-width:820px}
.legal h2{font:500 clamp(22px,2vw,28px)/1.2 var(--f-disp);letter-spacing:-.03em;color:var(--craie);margin:2.2em 0 .8em}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--brume-2);font-size:17px;line-height:1.7}
.legal p + p{margin-top:.8em}
.legal dl{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:10px 28px;margin-top:6px}
.legal dt{font:500 12.5px/1.9 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brume)}
.legal dd{color:var(--craie);font-size:17px}
.legal a{color:var(--craie);text-decoration:underline;text-decoration-color:var(--jaune);text-underline-offset:3px}
.legal ul{padding-left:0}
.legal ul li{position:relative;padding-left:22px}
.legal ul li + li{margin-top:.4em}
.legal ul li::before{content:"";position:absolute;left:2px;top:.85em;width:10px;height:1px;background:var(--jaune)}
.byline a{color:var(--craie);text-decoration:underline;text-decoration-color:var(--jaune);text-underline-offset:3px}
.auteur a{color:var(--craie);text-decoration:underline;text-decoration-color:var(--jaune);text-underline-offset:3px}
@media (max-width:640px){.legal dl{grid-template-columns:1fr;gap:2px}.legal dd{margin-bottom:12px}.faq details p{padding-right:0}}