:root{
  --nuit:#16233B;
  --nuit-2:#20335a;
  --flame:#F26430;
  --flame-deep:#D9531E;
  --sable:#FBF6EF;
  --gris:#5A6472;
  --encre:#12161C;
  --line:#E7E0D4;
  --line-soft:#efe8dc;
  --maxw:1120px;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  font-family:'Inter',sans-serif;background:var(--sable);color:var(--encre);
  font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,.brand,.btn{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  text-decoration:none;padding:14px 26px;border-radius:10px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;line-height:1;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--flame);color:var(--nuit);box-shadow:0 8px 22px -10px rgba(242,100,48,.7);}
.btn-primary:hover{background:var(--flame-deep);color:#fff;}
.btn-ghost{background:transparent;color:var(--nuit);border-color:var(--nuit);}
.btn-ghost:hover{background:var(--nuit);color:#fff;}
.btn-sm{padding:11px 20px;font-size:14px;}
.btn-lg{padding:17px 32px;font-size:16px;}

.arrow-link{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;
  color:var(--flame-deep);text-decoration:none;font-size:15px;transition:gap .2s ease,color .2s ease;}
.arrow-link::after{content:"→";transition:transform .2s ease;}
.arrow-link:hover{color:var(--flame);}
.arrow-link:hover::after{transform:translateX(4px);}
.section-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* ---------- bandeau cookies ---------- */
#cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:940px;margin:0 auto;
  background:var(--nuit);color:var(--sable);border:1px solid rgba(251,246,239,.15);border-radius:var(--r);
  padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  box-shadow:0 14px 44px -12px rgba(0,0,0,.5);font-size:14.5px;line-height:1.55;}
#cookie-banner p{margin:0;flex:1 1 320px;}
#cookie-banner a{color:var(--flame);text-decoration:underline;}
#cookie-banner .cookie-actions{display:flex;gap:10px;flex:0 0 auto;}
#cookie-banner .btn-cookie{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;cursor:pointer;
  border-radius:9px;padding:10px 20px;border:1.5px solid transparent;transition:background .2s ease,color .2s ease;}
#cookie-banner .btn-cookie.accept{background:var(--flame);color:var(--nuit);}
#cookie-banner .btn-cookie.accept:hover{background:var(--flame-deep);color:#fff;}
#cookie-banner .btn-cookie.refuse{background:transparent;color:var(--sable);border-color:rgba(251,246,239,.45);}
#cookie-banner .btn-cookie.refuse:hover{background:rgba(251,246,239,.1);}
@media(max-width:560px){#cookie-banner{flex-direction:column;align-items:stretch;}
  #cookie-banner .cookie-actions{justify-content:flex-end;}}

/* ---------- message d'état du formulaire ---------- */
.form-status{margin-top:16px;font-size:14.5px;font-weight:600;line-height:1.5;padding:13px 16px;border-radius:10px;}
.form-status:empty{display:none;padding:0;margin:0;}
.form-status.ok{background:var(--sable);color:var(--nuit);border-left:4px solid var(--flame);}
.form-status.ok::before{content:"\2713  ";color:var(--flame);font-weight:800;}
.form-status.err{background:rgba(242,100,48,.16);color:#ffe1d5;border:1px solid rgba(242,100,48,.55);}

/* ---------- nav ---------- */
nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s ease,box-shadow .3s ease,padding .3s ease;padding:8px 0;}
nav.scrolled{background:rgba(251,246,239,.85);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{font-weight:700;font-size:21px;color:var(--nuit);text-decoration:none;line-height:1;}
.brand span{color:var(--gris);}
.brand b{color:var(--flame);font-weight:700;}
nav.on-hero .brand{color:#fff;}
nav.on-hero .brand span{color:#9FB0C6;}
nav.on-hero .nav-cta{background:var(--flame);color:var(--nuit);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a.lnk{text-decoration:none;font-size:14.5px;color:var(--gris);font-weight:500;transition:color .2s;}
.nav-links a.lnk[aria-current="page"]{color:var(--flame-deep);}
nav.on-hero .nav-links a.lnk{color:#c9d2e0;}
nav.on-hero .nav-links a.lnk[aria-current="page"]{color:var(--flame);}
.nav-links a.lnk:hover{color:var(--flame);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;margin:-8px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--nuit);margin:5px 0;transition:.25s;border-radius:2px;}
nav.on-hero .nav-toggle span{background:#fff;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:860px){
  .nav-toggle{display:block;}
  .nav-links{position:fixed;inset:64px 0 auto 0;background:var(--nuit);flex-direction:column;align-items:stretch;
    gap:0;padding:10px 0 18px;transform:translateY(-130%);transition:transform .32s ease;box-shadow:0 16px 30px -12px rgba(0,0,0,.45);}
  .nav-links.open{transform:translateY(0);}
  .nav-links a.lnk{display:block;color:#fff;padding:15px 28px;font-size:16px;}
  nav.on-hero .nav-links a.lnk{color:#fff;}
  .nav-links .nav-cta{margin:12px 28px 4px;justify-content:center;}
}

/* ---------- hero ---------- */
.hero{position:relative;background:radial-gradient(120% 130% at 82% 0%,var(--nuit-2) 0%,var(--nuit) 55%);
  color:#fff;padding:150px 0 110px;overflow:hidden;}
.hero .orb{position:absolute;width:640px;height:640px;right:-160px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,100,48,.22),transparent 62%);filter:blur(8px);pointer-events:none;}
.hero .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:3px;
  text-transform:uppercase;color:var(--flame);margin-bottom:22px;}
.hero h1{font-size:clamp(34px,5.4vw,60px);font-weight:700;line-height:1.04;color:#fff;max-width:15ch;}
.hero h1 .u{color:var(--flame);}
.hero p.sub{font-size:clamp(17px,2vw,20px);color:#c9d2e0;margin:24px 0 36px;max-width:56ch;font-weight:300;}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap;}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);}
.hero .btn-ghost:hover{background:#fff;color:var(--nuit);}
.traj{position:absolute;right:0;bottom:-2px;width:min(52vw,560px);height:auto;pointer-events:none;opacity:.95;}
@media(max-width:820px){.traj{display:none;}}
.trust-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:40px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1px;color:#8ea0bb;}
.trust-row span{white-space:nowrap;}
.trust-row .dot{color:var(--flame);}

/* ---------- hero vidéo (accueil) ---------- */
.hero-video{position:relative;background:var(--nuit);color:#fff;overflow:hidden;}
.hero-video::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;
  background:linear-gradient(180deg,rgba(22,35,59,.92),rgba(22,35,59,0));z-index:2;pointer-events:none;}
.hero-stage{position:relative;z-index:1;width:100%;line-height:0;font-size:0;}
.hero-vid{width:100%;height:auto;display:block;}
.hero-band{padding:44px 0 66px;text-align:center;}
.hero-band .eyebrow{color:var(--flame);margin-bottom:18px;}
.hero-band h1{font-size:clamp(30px,4.4vw,52px);font-weight:700;line-height:1.05;color:#fff;max-width:22ch;margin:0 auto;}
.hero-band h1 .u{color:var(--flame);}
.hero-band p.sub{font-size:clamp(16px,1.9vw,19px);color:#c9d2e0;margin:20px auto 30px;max-width:60ch;font-weight:300;}
.hero-band .btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.hero-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);}
.hero-band .btn-ghost:hover{background:#fff;color:var(--nuit);}
.hero-band .trust-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:34px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1px;color:#8ea0bb;}
.hero-band .trust-row span{white-space:nowrap;}
.hero-band .trust-row .dot{color:var(--flame);}
@media(max-width:767px){
  .hero-band{padding:32px 0 46px;}
}

/* ---------- page hero (pages intérieures) ---------- */
.page-hero{position:relative;background:radial-gradient(120% 150% at 85% 0%,var(--nuit-2) 0%,var(--nuit) 58%);
  color:#fff;padding:140px 0 74px;overflow:hidden;}
.page-hero .orb{position:absolute;width:520px;height:520px;right:-140px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,100,48,.18),transparent 62%);pointer-events:none;}
.page-hero .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--flame);margin-bottom:18px;}
.page-hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:700;line-height:1.06;color:#fff;max-width:18ch;}
.page-hero h1 .u{color:var(--flame);}
.page-hero p{font-size:clamp(16px,1.9vw,19px);color:#c9d2e0;margin-top:20px;max-width:60ch;font-weight:300;}
/* phrase de chute du chapeau : passe a la ligne et ressort sur le fond nuit */
.page-hero .hero-punch{display:inline-block;margin-top:14px;color:#fff;font-weight:600;
  font-family:'Space Grotesk',sans-serif;font-size:1.06em;letter-spacing:-.01em;}

/* ---------- sections ---------- */
section{padding:96px 0;position:relative;}
.alt{background:#fff;}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--flame-deep);margin-bottom:12px;}
h2{font-size:clamp(28px,3.6vw,40px);font-weight:600;color:var(--nuit);line-height:1.1;margin-bottom:14px;max-width:20ch;}
/* Titres coupes a la main (<br> apres la virgule ou le point) : on elargit pour que
   chaque segment tienne sur SA ligne, sinon le max-width par defaut le recoupe.
   2 lignes visees, 3 tolerees quand la phrase est trop longue. */
h1.t2l,h2.t2l{max-width:38ch;}
@media(max-width:680px){h1.t2l,h2.t2l{max-width:none;}}
.lead{color:var(--gris);font-size:18px;max-width:64ch;margin-bottom:14px;}
.section-head{margin-bottom:52px;}

/* KPIs */
.kpis-band{background:var(--nuit);color:#fff;padding:64px 0;}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kpi .n{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(40px,6vw,58px);color:var(--flame);line-height:1;}
.kpi .l{color:#c9d2e0;font-size:15px;margin-top:12px;max-width:26ch;}
.kpis-note{color:#7f8ca3;font-size:12.5px;margin-top:30px;font-style:italic;}
@media(max-width:720px){.kpis{grid-template-columns:1fr;gap:34px;text-align:left;}}

/* à qui */
.audience{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;}
.pains{display:grid;gap:14px;margin-top:8px;}
.pain{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:18px 20px;}
.pain svg{flex:0 0 auto;margin-top:2px;}
.pain b{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--nuit);display:block;font-size:15.5px;}
.pain span{color:var(--gris);font-size:14.5px;}
.audience .aside{background:var(--nuit);color:#fff;border-radius:var(--r);padding:34px;position:sticky;top:96px;}
.audience .aside h3{color:#fff;font-size:21px;margin-bottom:12px;}
.audience .aside p{color:#c9d2e0;font-size:15px;font-weight:300;}
.audience .aside .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.audience .aside .tag{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#fff;
  border:1px solid rgba(255,255,255,.22);border-radius:30px;padding:6px 13px;}
/* variante cliquable de .pain : les 3 situations, sous l'encart.
   L'ombre, la bordure et le suivi de souris viennent de .tilt-card. */
.pain-link{text-decoration:none;}
.pain-link .arw{flex:0 0 auto;color:var(--flame-deep);font-weight:700;font-size:17px;line-height:1.35;
  transition:transform .28s cubic-bezier(.22,1,.36,1);}
@media (hover:hover) and (pointer:fine){
  .pain-link:hover .arw{transform:translateX(4px);}
}
@media(max-width:860px){.audience{grid-template-columns:1fr;gap:34px;}.audience .aside{position:static;}}

/* méthode AARRR */
.method{background:#fff;}
.traj-line{display:block;margin:0 auto 44px;max-width:400px;width:100%;height:auto;}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.step{padding:30px 24px;border-right:1px solid var(--line);position:relative;background:#fff;transition:background .25s;display:flex;flex-direction:column;}
.step:last-child{border-right:none;}
.step:hover{background:var(--sable);}
.step .idx{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--flame-deep);letter-spacing:1px;}
.step .ico{width:56px;height:56px;margin:12px 0 14px;color:var(--flame-deep);}
.step h3{font-size:18px;color:var(--nuit);margin-bottom:8px;}
.step p{font-size:14px;color:var(--gris);}
.step .lev{margin-top:auto;padding-top:18px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--nuit);opacity:.65;line-height:1.7;}
@media(max-width:960px){.steps{grid-template-columns:1fr 1fr;}.step{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}}
@media(max-width:560px){.steps{grid-template-columns:1fr;}}

/* ---------- trajectoire AARRR animée (page méthode) ---------- */
.aarrr{overflow:hidden;}
.aarrr .section-head{max-width:640px;margin-bottom:20px;}
.aarrr-rail{display:flex;gap:10px;align-items:center;margin:0 0 8px;}
.aarrr-rail .lt{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
  letter-spacing:2px;color:var(--nuit);opacity:.28;transition:opacity .45s ease,color .45s ease,transform .45s ease;}
.aarrr-rail .lt.on{opacity:1;color:var(--flame-deep);transform:translateY(-1px);}
.aarrr-rail .sep{flex:0 0 20px;height:1px;background:var(--line);}

.aarrr-stage{position:relative;margin-top:64px;padding-top:56px;}
.aarrr-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;}
.aarrr-svg .base{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round;}
.aarrr-svg .flame{fill:none;stroke:var(--flame);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 2px 6px rgba(242,100,48,.35));}
.aarrr-svg .comet{fill:var(--flame);filter:drop-shadow(0 0 10px rgba(242,100,48,.9));}
.aarrr-svg .comet-halo{fill:rgba(242,100,48,.18);}

.aarrr-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:start;}
.acard{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 22px 24px;display:flex;flex-direction:column;min-height:290px;box-shadow:0 1px 0 rgba(22,35,59,.02);
  opacity:.4;transform:translateY(26px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease;}
.aarrr-cards .acard:nth-child(1){transform:translateY(26px);}
.acard.on{opacity:1;box-shadow:0 22px 48px -26px rgba(22,35,59,.42);border-color:#e0d6c6;}
.acard.on:nth-child(1){transform:translateY(40px);}
.acard.on:nth-child(2){transform:translateY(20px);}
.acard.on:nth-child(3){transform:translateY(0);}
.acard.on:nth-child(4){transform:translateY(-20px);}
.acard.on:nth-child(5){transform:translateY(-40px);}
.acard .node{position:absolute;top:-12px;left:26px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2.5px solid var(--line);z-index:3;transition:border-color .4s ease,box-shadow .4s ease,transform .4s ease;}
.acard.on .node{border-color:var(--flame);box-shadow:0 0 0 5px rgba(242,100,48,.14);transform:scale(1.12);}
.acard .idx{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--flame-deep);
  letter-spacing:1.5px;text-transform:uppercase;margin-top:6px;}
.acard .ico{width:52px;height:52px;margin:14px 0 12px;opacity:0;transform:translateY(8px) scale(.8);
  transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.56,.64,1);}
.acard.on .ico{opacity:1;transform:none;transition-delay:.12s;}
.acard h3{font-size:19px;color:var(--nuit);margin-bottom:8px;position:relative;}
.acard h3::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:34px;background:var(--flame);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1) .18s;}
.acard.on h3::after{transform:scaleX(1);}
.acard p{font-size:13.5px;color:var(--gris);line-height:1.55;}
.acard .lev{margin-top:auto;padding-top:16px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;color:var(--nuit);opacity:.62;line-height:1.75;letter-spacing:.3px;}
.acard.on:hover{transform:translateY(calc(var(--rise,0px) - 6px));
  box-shadow:0 30px 60px -28px rgba(22,35,59,.5);border-color:var(--flame);}
.aarrr-cards .acard.on:nth-child(1):hover{--rise:40px;}
.aarrr-cards .acard.on:nth-child(2):hover{--rise:20px;}
.aarrr-cards .acard.on:nth-child(3):hover{--rise:0px;}
.aarrr-cards .acard.on:nth-child(4):hover{--rise:-20px;}
.aarrr-cards .acard.on:nth-child(5):hover{--rise:-40px;}
.acard.on:hover .node{transform:scale(1.35);box-shadow:0 0 0 7px rgba(242,100,48,.18);}
.acard.on:hover .ico{transform:translateY(-3px);}
@media(max-width:900px){
  .aarrr-stage{padding-top:8px;padding-left:34px;}
  .aarrr-cards{grid-template-columns:1fr;gap:18px;}
  .acard,.acard.on,
  .aarrr-cards .acard.on:nth-child(1),.aarrr-cards .acard.on:nth-child(2),
  .aarrr-cards .acard.on:nth-child(3),.aarrr-cards .acard.on:nth-child(4),
  .aarrr-cards .acard.on:nth-child(5){transform:translateY(22px);}
  .acard.on,
  .aarrr-cards .acard.on:nth-child(1),.aarrr-cards .acard.on:nth-child(2),
  .aarrr-cards .acard.on:nth-child(3),.aarrr-cards .acard.on:nth-child(4),
  .aarrr-cards .acard.on:nth-child(5){transform:translateY(0);}
  .acard{min-height:0;}
  .acard .node{top:24px;left:-34px;}
  .aarrr-cards .acard.on:hover{transform:translateX(3px);box-shadow:0 22px 48px -26px rgba(22,35,59,.42);}
}

/* ---------- rubriques accueil : survol magnétique + spotlight ---------- */
.rub-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:stretch;perspective:1000px;}
.rub-grid.cols-3{grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:900px){ .rub-grid.cols-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .rub-grid.cols-3{grid-template-columns:1fr;} }
.rub-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 22px 24px;overflow:hidden;transform-style:preserve-3d;
  box-shadow:0 1px 0 rgba(22,35,59,.02);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,border-color .32s ease;}
.rub-card .rub-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;
  transition:opacity .32s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(242,100,48,.16), transparent 62%);}
.rub-card .rub-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;}
.rub-card .idx{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--flame-deep);letter-spacing:1px;}
.rub-card .ico{width:56px;height:56px;margin:12px 0 14px;color:var(--flame-deep);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);}
.rub-card h3{font-size:18px;color:var(--nuit);margin-bottom:8px;}
.rub-card p{font-size:14px;color:var(--gris);}
.rub-card .lev{margin-top:auto;padding-top:18px;font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--nuit);opacity:.65;line-height:1.7;}
/* le survol (grossir + inclinaison + halo) ne s'active que sur un vrai pointeur (PC) */
@media (hover:hover) and (pointer:fine){
  .rub-card{cursor:default;}
  .rub-card:hover{box-shadow:0 32px 60px -26px rgba(22,35,59,.5);border-color:var(--flame);z-index:2;}
  .rub-card:hover .rub-glow{opacity:1;}
  .rub-card:hover .ico{transform:translateY(-4px) scale(1.06);}
}
@media(max-width:960px){.rub-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.rub-grid{grid-template-columns:1fr;}}

/* effet réutilisable ailleurs (ex. cartes tarifs + expertises de la page offres) */
.tilt-card{position:relative;overflow:hidden;transform-style:preserve-3d;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,border-color .32s ease;}
.tilt-card .rub-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;
  transition:opacity .32s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(242,100,48,.16), transparent 62%);}
.tilt-card > *:not(.rub-glow){position:relative;z-index:1;}
@media (hover:hover) and (pointer:fine){
  .tilt-card:hover{box-shadow:0 32px 60px -26px rgba(22,35,59,.5);border-color:var(--flame);z-index:2;}
  .tilt-card:hover .rub-glow{opacity:1;}
}

/* ---------- Ecrans tactiles : le survol n'existe pas ----------
   Sans compensation, les cartes sont totalement figees sur mobile.
   On remplace l'effet de survol par deux choses : un accent permanent
   (la carte n'est plus un rectangle blanc) et un vrai retour au doigt.
   Volontairement AUCUNE animation en boucle : ca use la batterie et ca lasse. */
@media (hover:none), (pointer:coarse){
  .value, .rub-card, .tilt-card, .pcard{position:relative;}
  /* liseré Tiger Flame le long du bord gauche */
  .value::after, .rub-card::after, .pcard::after{
    content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;
    border-radius:0 3px 3px 0;pointer-events:none;
    background:linear-gradient(180deg,var(--flame),rgba(242,100,48,.18));}
  /* retour immediat au toucher : la carte s'enfonce et s'allume */
  .value:active, .rub-card:active, .tilt-card:active, .pcard:active{
    transform:scale(.984);border-color:var(--flame);
    box-shadow:0 14px 30px -16px rgba(22,35,59,.42);
    transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease;}
  .value:active .rub-glow, .rub-card:active .rub-glow, .tilt-card:active .rub-glow{opacity:1;}
}
@media (hover:none) and (prefers-reduced-motion:reduce){
  .value:active, .rub-card:active, .tilt-card:active, .pcard:active{transform:none;}
}

/* boucle d'expérimentation (page méthode) */
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px;}
.loop-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;position:relative;}
.loop-step .n{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--flame-deep);margin-bottom:10px;}
.loop-step h4{font-size:16px;color:var(--nuit);margin-bottom:6px;}
.loop-step p{font-size:14px;color:var(--gris);}
@media(max-width:820px){.loop{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.loop{grid-template-columns:1fr;}}

/* offres */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px;}
.offer{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;}
.offer h3{font-size:20px;color:var(--nuit);margin-bottom:6px;}
.offer .kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--flame-deep);margin-bottom:16px;}
.offer .price{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:26px;color:var(--nuit);margin:6px 0 16px;}
.offer ul{list-style:none;display:grid;gap:10px;margin-bottom:22px;}
.offer li{font-size:14.5px;color:var(--gris);padding-left:22px;position:relative;}
.offer li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--flame);}
.nb{white-space:nowrap;}
.offer .foot{margin-top:auto;font-size:13px;color:var(--gris);}
.offer.feature{background:var(--nuit);color:#fff;border-color:var(--nuit);}
.offer.feature h3,.offer.feature .price{color:#fff;}
.offer.feature .kicker{color:var(--flame);}
.offer.feature li{color:#c9d2e0;}
.offer.feature .foot{color:#9fb0c6;}
.free-audit{background:radial-gradient(120% 130% at 100% 0%,var(--nuit-2),var(--nuit));color:#fff;
  border-radius:var(--r);padding:38px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;margin-bottom:24px;}
.free-audit .tag-free{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--nuit);background:var(--flame);border-radius:30px;padding:6px 14px;margin-bottom:16px;}
.free-audit h3{color:#fff;font-size:26px;margin-bottom:10px;}
.free-audit p{color:#e3eaf4;font-size:15.5px;font-weight:400;line-height:1.6;}
.free-audit .fa-cta{text-align:right;}
@media(max-width:860px){.offers{grid-template-columns:1fr;}.free-audit{grid-template-columns:1fr;}.free-audit .fa-cta{text-align:left;}}
.tjm-note{margin-top:22px;color:var(--gris);font-size:14px;}
.tjm-note b{color:var(--nuit);font-family:'Space Grotesk',sans-serif;}

/* process (3 étapes) */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px;}
.process.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){ .process.cols-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .process.cols-4{grid-template-columns:1fr;} }
.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;}
.pcard .n{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:22px;color:var(--flame);margin-bottom:12px;}
.pcard h3{font-size:18px;color:var(--nuit);margin-bottom:8px;}
.pcard p{font-size:14.5px;color:var(--gris);}
/* ---------- fil de chronologie des etapes (.process.timeline) ----------
   Le fil relie les jalons et se remplit au scroll, etape apres etape.
   Sans JS, il est plein et tous les jalons sont allumes : rien ne disparait.
   C'est le JS qui "arme" la section en ajoutant .armed, donc qui l'eteint. */
.process.timeline{position:relative;padding-top:44px;}
.process.timeline .pcard{position:relative;}
.process.timeline::before,
.process.timeline::after{content:"";position:absolute;top:19px;height:2px;border-radius:2px;}
.process.timeline::before{left:var(--rail-x,0);width:var(--rail-w,100%);background:var(--line);}
.process.timeline::after{left:var(--rail-x,0);width:calc(var(--rail-w,100%) * var(--fill,1));
  background:linear-gradient(90deg,var(--flame-deep),var(--flame));
  box-shadow:0 0 12px rgba(242,100,48,.4);
  transition:width .75s cubic-bezier(.22,1,.36,1);}
/* left = padding de la carte (28px) + demi-chiffre, moins le rayon du jalon :
   le jalon tombe ainsi pile au-dessus du numero. */
.process.timeline .pcard::before{content:"";position:absolute;top:-32px;left:24px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  border:2.5px solid var(--flame);box-shadow:0 0 0 5px rgba(242,100,48,.14);
  transition:border-color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);}
/* etat eteint, pose par le JS uniquement */
.js .process.timeline.armed{--fill:0;}
.js .process.timeline.armed .pcard::before{border-color:var(--line);box-shadow:none;}
.js .process.timeline.armed .pcard .n{color:var(--gris);transition:color .5s ease;}
.js .process.timeline.armed .pcard.step-on::before{border-color:var(--flame);
  box-shadow:0 0 0 5px rgba(242,100,48,.14);transform:scale(1.12);}
.js .process.timeline.armed .pcard.step-on .n{color:var(--flame);}
/* survol : la bordure seulement, le geste appartient au scroll */
@media (hover:hover) and (pointer:fine){
  .process.timeline .pcard{transition:border-color .3s ease,box-shadow .3s ease;}
  .process.timeline .pcard:hover{border-color:var(--flame);
    box-shadow:0 20px 44px -26px rgba(22,35,59,.4);}
}
/* en colonne, un fil horizontal n'a plus de sens */
.process.timeline.stacked{padding-top:0;}
.process.timeline.stacked::before,
.process.timeline.stacked::after,
.process.timeline.stacked .pcard::before{display:none;}
@media(max-width:820px){.process{grid-template-columns:1fr;}}

/* preuves */
.proof{background:var(--nuit);color:#fff;}
.proof h2{color:#fff;}
.proof .lead{color:#c9d2e0;}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px;}
.case{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:26px;}
.case .metric{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:30px;color:var(--flame);line-height:1.1;margin-bottom:10px;}
.case h4{font-size:16px;color:#fff;margin-bottom:6px;}
.case p{font-size:14px;color:#c9d2e0;font-weight:300;}
.proof blockquote{margin-top:34px;border-left:3px solid var(--flame);padding:6px 0 6px 22px;
  font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.4vw,24px);color:#fff;font-weight:500;max-width:70ch;line-height:1.4;}
.proof .disclaimer{color:#7f8ca3;font-size:12.5px;margin-top:24px;font-style:italic;max-width:70ch;}
.proof blockquote + .lead{margin-top:26px;}
/* graphique de preuve sur fond bleu nuit */
.proof-graph{margin:30px 0 8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  border-radius:16px;padding:22px 20px 16px;}
.proof-graph svg{width:100%;height:auto;display:block;}
.proof-graph figcaption{font-family:'JetBrains Mono',monospace;font-size:12px;color:#8c9bb3;
  margin-top:14px;line-height:1.55;}
@media(max-width:720px){.cases{grid-template-columns:1fr;}}

/* qui je suis */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center;}
.about .photo{aspect-ratio:4/5;border-radius:var(--r);background:linear-gradient(160deg,var(--nuit-2),var(--nuit));
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#5b6b86;position:relative;overflow:hidden;}
.about .photo .ph{font-family:'JetBrains Mono',monospace;font-size:12px;color:#5b6b86;letter-spacing:1px;text-align:center;padding:20px;}
.about .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.about h2{margin-bottom:20px;}
.about p{color:var(--encre);font-size:16px;margin-bottom:16px;}
.about p.sig{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--nuit);font-size:18px;}
@media(max-width:800px){.about{grid-template-columns:1fr;gap:30px;}}

/* valeurs (page à propos) */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px;}
/* 4 cartes dans une grille de 3 laissent la derniere orpheline : passer en 2x2 */
.values.cols-2{grid-template-columns:repeat(2,1fr);}
.value{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;}
.value h3{font-size:17px;color:var(--nuit);margin-bottom:8px;}
.value p{font-size:14.5px;color:var(--gris);}
@media(max-width:820px){.values,.values.cols-2{grid-template-columns:1fr;}}

/* FAQ */
.faq{background:#fff;}
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:24px 44px 24px 0;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;color:var(--nuit);position:relative;line-height:1.4;}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:26px;color:var(--flame);font-weight:400;transition:transform .25s;}
.faq-item.open .faq-q::after{content:"–";}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 0 24px;color:var(--gris);font-size:15.5px;max-width:70ch;}

/* CTA final / contact */
.final{background:radial-gradient(120% 140% at 20% 0%,var(--nuit-2),var(--nuit));color:#fff;}
.final .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.final h2{color:#fff;max-width:16ch;}
.final .lead{color:#c9d2e0;}
.final .contact-alt{margin-top:26px;font-size:15px;color:#c9d2e0;}
.final .contact-alt a{color:var(--flame);text-decoration:none;font-weight:600;}
form{display:grid;gap:14px;}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
label{font-size:13px;color:#9fb0c6;font-family:'JetBrains Mono',monospace;letter-spacing:.5px;margin-bottom:5px;display:block;}
input,textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:13px 15px;color:#fff;font-family:'Inter',sans-serif;font-size:15px;transition:border .2s;}
input:focus,textarea:focus{outline:none;border-color:var(--flame);}
textarea{resize:vertical;min-height:110px;}
form .btn-primary{justify-content:center;margin-top:6px;}
.form-hint{font-size:12.5px;color:#7f8ca3;}
@media(max-width:800px){.final .grid{grid-template-columns:1fr;gap:34px;}form .row{grid-template-columns:1fr;}}

/* footer */
footer{background:var(--nuit);color:#8d99ad;padding:54px 0 34px;border-top:1px solid rgba(255,255,255,.08);}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;}
.foot-brand .brand{color:#fff;font-size:22px;}
.foot-brand .brand span{color:#9FB0C6;}
.foot-brand p{margin-top:10px;font-size:13.5px;max-width:34ch;color:#8d99ad;}
.foot-col h5{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#6f7d94;margin-bottom:12px;}
.foot-col a{display:block;color:#c9d2e0;text-decoration:none;font-size:14px;margin-bottom:9px;transition:color .2s;}
.foot-col a:hover{color:var(--flame);}
.foot-social{display:flex;gap:10px;margin-top:16px;}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(251,246,239,.18);color:#c9d2e0;transition:color .2s ease,border-color .2s ease,transform .2s ease;}
.foot-social a:hover{color:var(--flame);border-color:var(--flame);transform:translateY(-2px);}
.foot-social svg{width:19px;height:19px;}
/* Réalisations */
.realisations .works{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.work{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;background:var(--nuit);box-shadow:0 12px 30px -22px rgba(22,35,59,.5);transition:transform .3s ease,box-shadow .3s ease;}
.work:hover{transform:translateY(-4px);box-shadow:0 26px 52px -26px rgba(22,35,59,.6);}
.work-shot{position:relative;aspect-ratio:1200/750;overflow:hidden;}
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.work:hover .work-shot img{transform:scale(1.06);}
/* Voile + contenu revele au survol (inspiration dixsept-paris) */
.work-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:11px;padding:28px;
  background:linear-gradient(180deg,rgba(22,35,59,.955),rgba(18,22,28,.975));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .4s ease;}
.work:hover .work-body{opacity:1;}
.work-body>*{transform:translateY(15px);transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.work:hover .work-body>*{transform:translateY(0);}
.work-client{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--flame);}
.work-body h3{font-family:'Space Grotesk',sans-serif;font-size:23px;line-height:1.22;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:8px;}
.work-body h3 .ext{color:var(--flame);font-size:17px;transition:transform .2s ease;}
.work:hover .work-body h3 .ext{transform:translate(3px,-3px);}
.work-desc{font-size:13px;color:rgba(255,255,255,.9);line-height:1.55;max-width:36ch;}
.work-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:2px;}
.work-tags span{font-size:10.5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:3px 11px;color:#fff;font-weight:500;}
/* Ecrans tactiles (pas de survol) : voile permanent en bas + titre visible */
@media(hover:none){
  .work-body{opacity:1;justify-content:flex-end;align-items:flex-start;text-align:left;gap:8px;
    background:linear-gradient(0deg,rgba(18,22,28,.92) 0%,rgba(18,22,28,.5) 46%,rgba(18,22,28,0) 100%);}
  .work-body>*{transform:none;}
  .work-body h3{font-size:20px;}
  .work-desc{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .work-shot img,.work:hover .work-shot img{transition:none;transform:none;}
  .work-body>*{transform:none;}
}
@media(max-width:820px){.realisations .works{grid-template-columns:1fr;}}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;font-family:'JetBrains Mono',monospace;color:#6f7d94;}

/* reveal (activé seulement si JS) */
.js .reveal{opacity:0;transform:translateY(28px);}
.js .reveal-stagger>*{opacity:0;transform:translateY(24px);}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px;}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s;}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(22,35,59,.4);}
.post-card .pc-body{padding:26px;display:flex;flex-direction:column;flex:1;}
.post-card .pc-cat{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--flame-deep);margin-bottom:12px;}
.post-card h3{font-size:19px;color:var(--nuit);margin-bottom:10px;line-height:1.25;}
.post-card p{font-size:14.5px;color:var(--gris);margin-bottom:16px;}
.post-card .pc-more{margin-top:auto;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--flame-deep);font-size:14px;}
.post-card.soon{opacity:.55;}
@media(max-width:860px){.blog-grid{grid-template-columns:1fr;}}

/* ---------- liens inline en pastille (charte Tiger Flame) ---------- */
a.inline{
  color:var(--flame-deep);
  font-weight:500;
  text-decoration:none;
  padding:1px 11px;
  border:1px solid rgba(242,100,48,.5);
  border-radius:999px;
  background:rgba(242,100,48,.07);
  /* la pastille se coupe proprement quand le lien passe a la ligne */
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
a.inline:hover,a.inline:focus-visible{
  background:var(--flame);
  border-color:var(--flame);
  color:#fff;
}
/* sur fond bleu nuit */
.proof a.inline,.article-cta a.inline{
  color:#ffd0bd;
  border-color:rgba(242,100,48,.65);
  background:rgba(242,100,48,.16);
}
.proof a.inline:hover,.article-cta a.inline:hover{color:#fff;background:var(--flame);}

/* article */
.article{max-width:760px;margin:0 auto;}
.article .a-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gris);letter-spacing:.5px;margin-bottom:22px;}
.article .a-meta .cat{color:var(--flame-deep);}
.article h2{font-size:clamp(24px,3vw,30px);margin:44px 0 14px;max-width:none;}
.article h3{font-size:20px;color:var(--nuit);margin:30px 0 10px;}
.article p{font-size:17px;color:var(--encre);margin-bottom:18px;line-height:1.72;}
.article ul,.article ol{margin:0 0 18px 22px;}
.article li{font-size:17px;color:var(--encre);margin-bottom:8px;line-height:1.6;}
.article a.inline{text-decoration:none;}
.article .lead-p{font-size:19px;color:var(--nuit);font-weight:500;line-height:1.6;margin-bottom:24px;}
.article blockquote{border-left:3px solid var(--flame);padding:4px 0 4px 20px;margin:26px 0;font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--nuit);font-weight:500;line-height:1.45;}
.article .tldr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:0 0 32px;}
.article .tldr h4{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--flame-deep);margin-bottom:10px;}
.article .tldr p{font-size:16px;margin:0;color:var(--encre);}
.article .video-synthese{margin:0 0 34px;}
.article .art-video{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);background:var(--nuit);}
.article .art-video-tall{display:none;}
.article .video-synthese figcaption{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--gris);margin-top:10px;letter-spacing:.3px;}
@media(max-width:767px){
  .article .art-video-wide{display:none;}
  .article .art-video-tall{display:block;}
}
.article code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:rgba(22,35,59,.06);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--nuit);white-space:nowrap;}
.article .table-wrap{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch;}
.article table{width:100%;min-width:560px;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.article thead th{background:var(--nuit);color:#fff;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;text-align:left;padding:13px 16px;letter-spacing:-.01em;}
.article tbody td{font-size:15px;color:var(--encre);padding:14px 16px;border-top:1px solid var(--line-soft);vertical-align:top;line-height:1.55;}
.article tbody tr:nth-child(even){background:rgba(251,246,239,.55);}
/* ---------- illustrations d'article (captures + schemas) ---------- */
.article .art-fig{margin:0 0 24px;}
.article .art-fig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(22,35,59,.09);}
.article .art-fig figcaption{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gris);margin-top:9px;letter-spacing:.2px;line-height:1.5;}
.article .art-fig .src{color:var(--flame-deep);}
@media(min-width:768px){
  .article .art-fig.f-r{float:right;width:47%;margin:6px 0 20px 28px;}
  .article .art-fig.f-l{float:left;width:47%;margin:6px 28px 20px 0;}
}
.article h2{clear:both;}

.article .art-schema{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px 22px;margin:0 0 26px;clear:both;}
.article .art-schema .sch-t{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--flame-deep);margin:0 0 16px;}
.article .art-schema figcaption{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gris);margin-top:16px;line-height:1.5;}

/* schema 1 : classer vs citer */
.sch-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.sch-col{border:1px solid var(--line-soft);border-radius:12px;padding:16px 16px 18px;background:var(--sable);}
.sch-col.win{background:var(--nuit);border-color:var(--nuit);}
.sch-col h5{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--nuit);margin:0 0 4px;}
.sch-col.win h5{color:#fff;}
.sch-col .sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--gris);margin:0 0 12px;}
.sch-col.win .sub{color:var(--flame);}
.sch-bar{height:9px;border-radius:5px;background:rgba(22,35,59,.14);margin-bottom:6px;}
.sch-bar.s1{width:100%;}.sch-bar.s2{width:88%;}.sch-bar.s3{width:94%;}
.sch-bar.s4{width:76%;}.sch-bar.s5{width:90%;}.sch-bar.s6{width:70%;}
.sch-ans{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:11px 12px;margin-bottom:12px;}
.sch-ans span{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.42);margin-bottom:5px;}
.sch-ans span:nth-child(2){width:92%;}
.sch-ans span:nth-child(3){width:64%;margin-bottom:0;}
.sch-cite{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#c9d2e0;margin-bottom:5px;}
.sch-cite b{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;background:var(--flame);color:#fff;font-size:10px;flex:none;}
.sch-cite.you{color:#fff;}
.sch-note,.article p.sch-note{font-size:12.5px;color:var(--gris);line-height:1.5;margin:14px 0 0;}

/* schema 2 : anatomie d'un bloc citable */
.sch-anat{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;}
.sch-row{display:grid;grid-template-columns:1fr 190px;gap:0;border-bottom:1px solid var(--line-soft);}
.sch-row:last-child{border-bottom:0;}
.sch-main{padding:14px 16px;background:#fff;}
.sch-main .q{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:var(--nuit);margin:0;}
.sch-main .a{font-size:14.5px;color:var(--encre);margin:0;line-height:1.6;}
.sch-main .p{font-size:13px;color:var(--gris);margin:0;font-family:'JetBrains Mono',monospace;}
.sch-tag{background:var(--sable);border-left:1px solid var(--line-soft);padding:14px 14px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--flame-deep);line-height:1.5;display:flex;align-items:center;}

/* schema 3 : les 3 piliers */
.sch-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.sch-pil{border:1px solid var(--line-soft);border-radius:12px;padding:18px 16px;background:var(--sable);position:relative;}
.sch-pil .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--flame-deep);letter-spacing:1px;}
.sch-pil h5{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--nuit);margin:6px 0 8px;}
.sch-pil p{font-size:13.5px;color:var(--gris);line-height:1.55;margin:0;}
.sch-pil .k{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--nuit);margin-top:10px;padding-top:9px;border-top:1px solid var(--line);}
@media(max-width:640px){
  .sch-vs,.sch-pillars{grid-template-columns:1fr;}
  .sch-row{grid-template-columns:1fr;}
  .sch-tag{border-left:0;border-top:1px solid var(--line-soft);}
}

.article-cta{background:var(--nuit);color:#fff;border-radius:var(--r);padding:34px;margin:46px auto 0;max-width:760px;text-align:center;}
.article-cta h3{color:#fff;font-size:22px;margin-bottom:10px;}
.article-cta p{color:#c9d2e0;margin-bottom:22px;font-size:15px;}
.alire{max-width:760px;margin:52px auto 0;}
.alire h4{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--flame-deep);margin-bottom:8px;}
.alire a{display:block;color:var(--nuit);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;padding:14px 0;border-top:1px solid var(--line);}
.alire a:hover{color:var(--flame-deep);}

/* ---------- photos lifestyle ---------- */
.featured-img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);margin:0 auto 8px;}
.figure{margin:0 auto;max-width:var(--maxw);}
.figure figcaption{margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--gris);text-align:center;}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px;}
.photo-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block;}
@media(max-width:720px){.photo-strip{grid-template-columns:1fr;}}