/* ============================================================
   V POUR DESIGN — DESIGN SYSTEM
   Tokens repris tels quels du projet Claude Design
   « V pour Design — Design System » (c17f12a6).
   ============================================================ */

/* --- tokens/colors.css --- */
:root{
  --grenadine:#D44720;
  --beeswax:#E9A752;
  --darlington:#ACCAB2;
  --cafe-latte:#3A3A3A;
  --marine:#10394B;
  --azur:#3E7C99;
  --brume:#CFE1E6;
  --cream:#F7F5F2;
  --ink:#111111;
  --night:#0D0D0D;

  --grenadine-100:oklch(94% 0.030 40);
  --grenadine-300:oklch(78% 0.105 40);
  --grenadine-400:oklch(68% 0.145 39);
  --grenadine-500:oklch(58% 0.170 38);
  --grenadine-600:oklch(51% 0.155 37);
  --grenadine-700:oklch(43% 0.130 36);

  --beeswax-200:oklch(92% 0.048 71);
  --beeswax-300:oklch(86% 0.078 70);
  --beeswax-500:oklch(77% 0.115 68);
  --beeswax-700:oklch(58% 0.100 63);

  --darlington-300:oklch(86% 0.033 149);
  --darlington-700:oklch(56% 0.042 148);

  --marine-100:oklch(95% 0.012 225);
  --marine-200:oklch(89% 0.024 224);
  --marine-600:oklch(45% 0.070 232);
  --marine-700:oklch(37% 0.062 231);
  --marine-800:oklch(29% 0.050 230);
  --marine-900:oklch(22% 0.038 230);

  --latte-100:oklch(95% 0.002 90);
  --latte-300:oklch(78% 0.002 90);
  --latte-500:oklch(55% 0.002 90);
  --latte-600:oklch(43% 0.002 90);
  --latte-900:oklch(18% 0.001 90);

  --surface-base:var(--cream);
  --text-body:var(--ink);
  --text-muted:var(--latte-600);
  --text-faint:var(--latte-500);
  --text-accent:var(--grenadine-600);
  --text-on-accent:var(--cream);

  --border-hairline:oklch(0% 0 0 / 0.14);
  --border-strong:oklch(0% 0 0 / 0.38);

  --action-primary:var(--grenadine-500);
  --action-primary-hover:var(--grenadine-600);
  --action-secondary-hover:oklch(0% 0 0 / 0.07);
  --focus-ring:var(--grenadine-500);
}

/* --- tokens/typography.css --- */
:root{
  --font-display:"Poppins",system-ui,sans-serif;
  --font-sans:"Inter",system-ui,sans-serif;
  --font-label:"Inter",system-ui,sans-serif;

  --text-display:clamp(2.5rem,1.4rem + 4.4vw,4.75rem);
  --text-h1:clamp(2rem,1.4rem + 2.6vw,3.375rem);
  --text-h2:clamp(1.5rem,1.15rem + 1.6vw,2.375rem);
  --text-h3:clamp(1.1875rem,1.05rem + 0.75vw,1.625rem);
  --text-h4:clamp(1.25rem,1.08rem + 0.7vw,1.625rem);
  --text-lead:clamp(1.125rem,1.02rem + 0.45vw,1.4375rem);
  --text-body-size:clamp(1rem,0.96rem + 0.18vw,1.0625rem);
  --text-small:clamp(0.875rem,0.86rem + 0.1vw,0.9375rem);
  --text-label:0.8125rem;
  --text-micro:0.75rem;

  --leading-display:1.0;
  --leading-heading:1.12;
  --leading-body:1.7;
  --leading-tight:1.35;

  --tracking-display:-0.015em;
  --tracking-heading:-0.005em;
  --tracking-label:0.08em;
  --weight-display:800;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  --measure:68ch;
}

/* --- tokens/spacing.css --- */
:root{
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.5rem;
  --space-6:clamp(1.5rem,1.2rem + 1vw,2rem);
  --space-7:clamp(2rem,1.6rem + 1.6vw,3rem);
  --space-8:clamp(2.5rem,1.9rem + 2.6vw,4.5rem);
  --space-9:clamp(3.5rem,2.4rem + 4.4vw,7rem);
  --space-10:clamp(5rem,3.2rem + 7vw,10rem);
  --space-11:clamp(7rem,4rem + 11vw,15rem);
  --section-y:var(--space-10);
  --gutter:clamp(1.25rem,0.6rem + 2.6vw,3.5rem);
  --content-max:1240px;
  --grid-gap:clamp(1rem,0.5rem + 1.8vw,2rem);
  --nav-h:5.5rem; /* la nav est fixe : la scène doit la dégager */
}

/* --- tokens/shape.css + elevation.css --- */
:root{
  --radius-xs:2px; --radius-sm:4px;
  --border-width:1px; --border-width-thick:2px;
}

/* --- tokens/motion.css --- */
:root{
  --ease-settle:cubic-bezier(0.16,1,0.3,1);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --duration-1:250ms; --duration-2:350ms; --duration-3:450ms; --duration-4:600ms;
}

/* --- tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;background:var(--surface-base);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body-size);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-display);text-transform:uppercase;margin:0}
h1{font-size:var(--text-h1)}
h2{font-size:var(--text-h2);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading)}
h3{font-size:var(--text-h3);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading)}
h4{font-size:var(--text-h4);letter-spacing:var(--tracking-heading);line-height:var(--leading-tight)}
p{margin:0;max-width:var(--measure)}
img{max-width:100%}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
::selection{background:var(--beeswax-300);color:var(--ink)}

.vpd-label{font-family:var(--font-label);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);display:inline-block}
.vpd-container{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   COMPOSANTS  (components/components.css)
   ============================================================ */
.vpd-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-small);line-height:1;border-radius:var(--radius-sm);border:var(--border-width) solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--duration-1) var(--ease-out),color var(--duration-1) var(--ease-out),border-color var(--duration-1) var(--ease-out)}
.vpd-btn--sm{padding:0.5rem 0.875rem;font-size:var(--text-label)}
.vpd-btn--md{padding:0.8125rem 1.25rem}
.vpd-btn--lg{padding:1rem 1.75rem;font-size:var(--text-body-size)}
.vpd-btn:active{transform:translateY(1px)}
.vpd-btn--primary{background:var(--action-primary);color:var(--text-on-accent)}
.vpd-btn--primary:hover{background:var(--action-primary-hover)}
.vpd-btn--secondary{background:transparent;color:var(--text-body);border-color:var(--border-strong)}
.vpd-btn--secondary:hover{border-color:var(--text-body);background:var(--action-secondary-hover)}
.vpd-btn--tertiary{background:transparent;color:var(--text-accent);padding-inline:0}
.vpd-btn--tertiary .vpd-btn__label{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.vpd-btn--tertiary:hover .vpd-btn__label{text-decoration-thickness:2px}
.vpd-btn--on-dark.vpd-btn--primary{background:var(--cream);color:var(--ink)}
/* Le composant source passait à #fff au survol : le système bannit le blanc pur. */
.vpd-btn--on-dark.vpd-btn--primary:hover{background:var(--brume)}
.vpd-btn--on-dark.vpd-btn--secondary{color:var(--cream);border-color:color-mix(in oklch,var(--cream) 55%,transparent)}
.vpd-btn--on-dark.vpd-btn--secondary:hover{border-color:var(--cream);background:oklch(97% 0.01 70 / 0.1)}
.vpd-btn--on-dark.vpd-btn--tertiary{color:var(--cream)}
.vpd-btn__icon{display:inline-flex;transition:transform var(--duration-1) var(--ease-out)}
.vpd-btn:hover .vpd-btn__icon{transform:translateX(3px)}

.vpd-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:0.3125rem 0.625rem;border-radius:var(--radius-sm);border:var(--border-width) solid transparent;line-height:1}
.vpd-badge--solid{background:var(--ink);color:var(--cream)}

.vpd-case{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;border-radius:var(--radius-sm)}
.vpd-case__media{position:relative;aspect-ratio:1104/748;overflow:hidden;background:var(--marine-600);border-radius:var(--radius-sm)}
.vpd-case__media img{width:100%;height:100%;object-fit:cover;display:block}
.vpd-case__badge{position:absolute;top:var(--space-4);left:var(--space-4);z-index:2}
.vpd-case__body{padding:var(--space-5) 0 0;display:flex;flex-direction:column;gap:var(--space-3)}
.vpd-case__client{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.6}
.vpd-case__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--text-h4);letter-spacing:var(--tracking-heading);line-height:var(--leading-tight);margin:0}
.vpd-case__result{font-size:var(--text-small);margin:0;opacity:0.78}
.vpd-case__meta{display:flex;flex-wrap:wrap;gap:var(--space-5);margin:var(--space-1) 0 0}
.vpd-case__meta div{display:flex;gap:var(--space-2)}
.vpd-case__meta dt{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.55}
.vpd-case__meta dd{margin:0;font-size:var(--text-micro);text-transform:uppercase;letter-spacing:0.04em}
a.vpd-case:hover .vpd-case__title{text-decoration:underline;text-underline-offset:5px}

.vpd-nav{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--night);color:var(--cream)}
.vpd-nav__inner{display:flex;align-items:center;gap:var(--space-6);min-height:5.5rem;transition:min-height var(--duration-2) var(--ease-out)}
.vpd-nav--lifted .vpd-nav__inner{min-height:4rem}
.vpd-nav--lifted{border-bottom:var(--border-width) solid color-mix(in oklch,var(--cream) 18%,transparent)}
.vpd-nav__brand{display:flex;align-items:center;text-decoration:none}
.vpd-nav__logo{height:3.5rem;width:auto;display:block;transition:height var(--duration-2) var(--ease-out)}
.vpd-nav--lifted .vpd-nav__logo{height:2.4rem}
.vpd-nav__links{display:flex;align-items:center;gap:var(--space-5);margin-left:auto;list-style:none;padding:0;margin-block:0}
.vpd-nav__link{position:relative;font-size:var(--text-small);color:color-mix(in oklch,var(--cream) 65%,transparent);text-decoration:none;padding:0.375rem 0;transition:color var(--duration-1) var(--ease-out)}
.vpd-nav__link:hover,.vpd-nav__link[aria-current="page"]{color:var(--cream)}
.vpd-nav__progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--grenadine);transform:scaleX(0);transform-origin:0 50%}

.vpd-footer{background:var(--night);color:var(--cream)}
.vpd-footer__inner{padding-block:var(--space-9) var(--space-6);display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
.vpd-footer__logo{height:3rem;width:auto;display:block;margin-bottom:var(--space-5)}
.vpd-footer__blurb{font-size:var(--text-small);color:color-mix(in oklch,var(--cream) 70%,transparent);max-width:34ch}
.vpd-footer__coltitle{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:color-mix(in oklch,var(--cream) 50%,transparent);margin:0 0 var(--space-4)}
.vpd-footer__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.vpd-footer__list a{color:var(--cream);text-decoration:none;font-size:var(--text-small);transition:color var(--duration-1) var(--ease-out)}
.vpd-footer__list a:hover{color:var(--grenadine)}
.vpd-footer__base{border-top:var(--border-width) solid color-mix(in oklch,var(--cream) 20%,transparent);padding-block:var(--space-5);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-5);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:0.04em;color:color-mix(in oklch,var(--cream) 60%,transparent)}


/* --- Scène SVG : couleurs du système, typo du système --- */
.scene text{font-family:var(--font-label);fill:currentColor}
.scene .lab{font-weight:500;font-size:11.5px;letter-spacing:0.08em}
.scene .lab-s{font-size:10.5px}
.scene .lab-xs{font-size:9.5px}
.scene .num{font-family:var(--font-display);font-weight:800;letter-spacing:-0.015em;font-variant-numeric:tabular-nums}
.scene .num-t{font-variant-numeric:tabular-nums}
.scene .body{font-size:12.5px}
.scene .body-s{font-size:10.5px}
.scene .body-q{font-size:12px}
.scene .ico{color:currentColor}
.scene .ico-cr{color:var(--cream)}
.scene .f-gr{fill:var(--grenadine)} .scene .s-gr{stroke:var(--grenadine)}
.scene .f-bw{fill:var(--beeswax)} .scene .s-bw{stroke:var(--beeswax)}
.scene .f-mr{fill:var(--marine)} .scene .f-m9{fill:var(--marine-900)}
.scene .f-cr{fill:var(--cream)} .scene .f-nt{fill:var(--night)} .scene .f-bm{fill:var(--brume)}
.scene .f-dl{fill:var(--darlington)} .scene .f-lt1{fill:var(--latte-100)}
.scene .f-lt3{fill:var(--latte-300)} .scene .s-lt3{stroke:var(--latte-300)}
.scene .s-cr{stroke:var(--cream)}
.scene .f-az{fill:var(--azur)} .scene .s-az{stroke:var(--azur)}
/* Teintes des bustes illustrés : prises dans les rampes du système. */
.scene .f-sk1{fill:var(--beeswax-200)} .scene .f-sk2{fill:var(--grenadine-300)} .scene .f-sk3{fill:var(--beeswax-700)} .scene .f-cl{fill:var(--cafe-latte)}
.scene .f-bw3{fill:var(--beeswax-300)} .scene .f-dl3{fill:var(--darlington-300)} .scene .f-gr1{fill:var(--grenadine-100)}
.scene .brand-sq{fill:var(--grenadine)}
.scene text.f-gr,.scene tspan.f-gr{fill:var(--grenadine)}
.scene text.f-bw{fill:var(--beeswax)} .scene text.f-dl{fill:var(--darlington)} .scene text.f-m9{fill:var(--marine-900)}


/* ============================================================
   FONDS PLEINE LARGEUR — la page se lit comme une pile de blocs
   ============================================================ */
.ground{padding-block:var(--section-y);position:relative}
.ground--cream{background:var(--cream);color:var(--ink)}
.ground--night{background:var(--night);color:var(--cream)}
.ground--grenadine{background:var(--grenadine);color:var(--cream)}
.ground--beeswax{background:var(--beeswax);color:var(--ink)}
/* Sur grenadine, un anneau de focus grenadine disparaît : il passe en crème. */
.ground--grenadine,.story[data-ch="5"]{--focus-ring:var(--cream)}
.ground--band{padding-block:var(--space-9)}
.ground--thin{padding-block:var(--space-7)}

.head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-4);position:relative;padding-bottom:var(--space-4)}
.head .vpd-label{color:currentColor;opacity:0.6}
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--border-width);background:currentColor;opacity:0.35;transform:scaleX(var(--rule-scale,0));transform-origin:0 50%}
.head__title{margin-top:var(--space-6);max-width:16ch}
.line{display:block;overflow:hidden}
.line>span{display:block}

.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:var(--space-8)}

.marquee{overflow:hidden;padding-block:var(--space-6);white-space:nowrap}
.marquee__track{display:inline-flex;align-items:center;gap:var(--space-6);will-change:transform}
.marquee__item{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:clamp(1.25rem,0.9rem + 1.4vw,2rem);letter-spacing:var(--tracking-display);line-height:1}
.marquee__sep{width:8px;height:8px;border-radius:var(--radius-xs);background:var(--ink);opacity:0.5;flex:none}

.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-8)}
.figures>div{position:relative;padding-top:var(--space-4)}
.figures>div::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--border-width-thick);background:currentColor;transform:scaleX(var(--rule-scale,0));transform-origin:0 50%}
.figures__n{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:clamp(2.25rem,1.4rem + 3.4vw,4rem);line-height:1;letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums}
.figures__l{margin-top:var(--space-3);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.75;max-width:22ch}

.about{display:grid;grid-template-columns:0.35fr 0.65fr;gap:var(--space-8);align-items:start}
.about__aside{position:sticky;top:7rem;display:flex;flex-direction:column;gap:var(--space-5)}
.about__aside .vpd-label{color:color-mix(in oklch,var(--cream) 60%,transparent)}
.about__portrait{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-sm);background:var(--night)}
.about__portrait img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);filter:grayscale(100%) contrast(1.05);will-change:transform}
.about__prose{display:flex;flex-direction:column;gap:var(--space-6)}
.about__prose h2{max-width:18ch}
.about__prose p{color:color-mix(in oklch,var(--cream) 78%,transparent);max-width:56ch}
.about__prose em{font-style:normal;color:var(--grenadine)}

.contact{display:grid;grid-template-columns:1.15fr 0.85fr;gap:var(--space-8);align-items:end}
.contact h2{font-size:clamp(2rem,1.3rem + 2.9vw,3.5rem);max-width:14ch}
.contact__lead{margin-top:var(--space-6);font-size:var(--text-lead);color:color-mix(in oklch,var(--cream) 86%,transparent);max-width:42ch}
.contact__actions{display:flex;gap:var(--space-4);margin-top:var(--space-7);flex-wrap:wrap}
.contact__coords{display:flex;flex-direction:column;gap:var(--space-4);margin:0}
.contact__coords div{border-top:var(--border-width) solid color-mix(in oklch,var(--cream) 38%,transparent);padding-top:var(--space-3)}
.contact__coords dt{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.7}
.contact__coords dd{margin:var(--space-2) 0 0;font-size:var(--text-small)}
.contact__coords a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}

.cities{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.cities a{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink);text-decoration:none;border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sm);padding:0.5rem 0.875rem;transition:background-color var(--duration-1) var(--ease-out),border-color var(--duration-1) var(--ease-out),color var(--duration-1) var(--ease-out)}
.cities a:hover{background:var(--grenadine);border-color:var(--grenadine);color:var(--cream)}

/* ============================================================
   GABARITS — ce que les pages intérieures ajoutent au système.
   Voir DESIGN-gabarits-vpd.md. Même discipline que l'accueil :
   un rayon (4 px), aucune ombre, aucun dégradé, aucun flou,
   la couleur bascule au survol, rien ne bouge sauf la flèche.
   ============================================================ */

/* ---------- Base ---------- */
html{scroll-padding-top:6.5rem}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
h1 em,h2 em,h3 em,.accent{font-style:normal;color:var(--accent,var(--grenadine))}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:var(--space-4);top:-120px;z-index:100;background:var(--cream);color:var(--ink);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-weight:var(--weight-semibold);font-size:var(--text-small);text-decoration:none}
.skip:focus{top:var(--space-4)}
.nowrap{white-space:nowrap}
main{display:block}

/* Couleur d'accent et filet par fond : le mot signature suit le fond. */
.ground--cream{--accent:var(--grenadine-600);--rule:var(--border-hairline)}
.ground--night{--accent:var(--grenadine);--rule:color-mix(in oklch,var(--cream) 22%,transparent)}
.ground--grenadine{--accent:var(--night);--rule:color-mix(in oklch,var(--cream) 38%,transparent)}
.ground--beeswax{--accent:var(--grenadine-700);--rule:color-mix(in oklch,var(--ink) 22%,transparent)}
.ground--marine{background:var(--marine-800);color:var(--cream);--accent:var(--beeswax);--rule:color-mix(in oklch,var(--cream) 24%,transparent)}
.ground--brume{background:var(--brume);color:var(--marine-900);--accent:var(--grenadine-700);--rule:color-mix(in oklch,var(--marine-900) 22%,transparent)}
.ground--latte{background:var(--latte-100);color:var(--ink);--accent:var(--grenadine-600);--rule:var(--border-hairline)}
.ground--marine,.ground--night{--focus-ring:var(--beeswax)}
.ground--flush{padding-top:0}

/* Boutons : l'icône est un vrai SVG, la flèche seule avance au survol. */
.vpd-btn .ico{width:1.05em;height:1.05em}
.vpd-btn--on-light.vpd-btn--secondary{color:var(--ink);border-color:var(--border-strong)}
.ground--brume .vpd-btn--secondary{color:var(--marine-900);border-color:color-mix(in oklch,var(--marine-900) 40%,transparent)}
.ground--brume .vpd-btn--secondary:hover{border-color:var(--marine-900);background:oklch(22% 0.038 230 / 0.07)}
.ground--grenadine .vpd-btn--primary.vpd-btn--on-dark{background:var(--night);color:var(--cream)}
.ground--grenadine .vpd-btn--primary.vpd-btn--on-dark:hover{background:var(--latte-900)}
.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-semibold);font-size:var(--text-small);text-decoration:none;color:inherit}
.link-arrow .ico{transition:transform var(--duration-1) var(--ease-out)}
.link-arrow:hover .link-arrow__t{text-decoration:underline;text-underline-offset:4px}
.link-arrow:hover .ico,a:hover>.link-arrow .ico,a:hover .go .ico{transform:translateX(3px)}

/* ---------- Nav : liens de page, bouton, menu mobile ---------- */
.vpd-nav__main{margin-left:auto}
.vpd-nav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--grenadine)}
.vpd-nav__cta{flex:none}
/* Bascule de langue : un libellé discret avant l'appel à l'action ; dans le menu mobile, en toutes lettres. */
.vpd-nav__lang{flex:none;font-size:var(--text-small);font-weight:500;letter-spacing:0.06em;color:color-mix(in oklch,var(--cream) 65%,transparent);text-decoration:none;padding:0.375rem 0.25rem;transition:color var(--duration-1) var(--ease-out)}
.vpd-nav__lang:hover{color:var(--cream)}
.vpd-nav__lang:focus-visible{outline:2px solid var(--grenadine);outline-offset:3px;border-radius:var(--radius-sm)}
.menu__lang{color:var(--cream);text-decoration:underline;text-underline-offset:0.2em}
.burger{display:none;position:relative;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;color:var(--cream);cursor:pointer;border-radius:var(--radius-sm)}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform var(--duration-2) var(--ease-settle),opacity var(--duration-1) var(--ease-out)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:59;background:var(--night);color:var(--cream);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--nav-h) + var(--space-6)) var(--gutter) var(--space-7);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-8)}
.menu__links{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.menu__links a{display:flex;align-items:baseline;gap:var(--space-4);padding:0.35rem 0;text-decoration:none;
  font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-display);font-size:clamp(2rem,1.2rem + 5vw,3.25rem);line-height:1.05;transition:color var(--duration-1) var(--ease-out)}
.menu__links a:hover,.menu__links a[aria-current="page"]{color:var(--grenadine)}
.menu__links small{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);opacity:0.55;min-width:1.8rem}
.menu__foot{display:grid;gap:var(--space-5)}
.menu__coords{display:grid;gap:var(--space-2);font-size:var(--text-small);color:color-mix(in oklch,var(--cream) 72%,transparent)}
.menu__coords a{text-decoration:none}
html.menu-open{overflow:hidden}

/* ---------- Pied de page ---------- */
.vpd-footer{position:relative;z-index:1}
.vpd-footer__inner{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.vpd-footer__addr{margin-top:var(--space-5);font-style:normal;display:grid;gap:var(--space-1);font-size:var(--text-small);color:color-mix(in oklch,var(--cream) 72%,transparent)}
.vpd-footer__addr a{text-decoration:none}
.vpd-footer__addr a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.vpd-footer__base nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.vpd-footer__base a,.vpd-footer__base button{color:inherit;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit}
.vpd-footer__base a:hover,.vpd-footer__base button:hover{color:var(--cream)}

/* ============================================================
   LE SEUIL — héros intérieur, collant ; le contenu le recouvre
   ============================================================ */
.phero{--ph-bg:var(--night);--ph-fg:var(--cream);--accent:var(--grenadine);--rule:color-mix(in oklch,var(--cream) 24%,transparent);
  position:sticky;top:var(--hero-top,0px);z-index:0;background:var(--ph-bg);color:var(--ph-fg);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:min(100vh,60rem);min-height:min(100svh,60rem);
  padding:calc(var(--nav-h) + var(--space-8)) 0 var(--space-7)}
.phero--short{min-height:min(78vh,44rem);min-height:min(78svh,44rem)}
.phero--marine{--ph-bg:var(--marine-800);--accent:var(--beeswax);--focus-ring:var(--beeswax)}
.phero--night{--focus-ring:var(--beeswax)}
.phero--brume{--ph-bg:var(--brume);--ph-fg:var(--marine-900);--accent:var(--grenadine-700);--rule:color-mix(in oklch,var(--marine-900) 22%,transparent)}
.phero--cream{--ph-bg:var(--cream);--ph-fg:var(--ink);--accent:var(--grenadine-600);--rule:var(--border-hairline)}
.phero--grenadine{--ph-bg:var(--grenadine);--accent:var(--night);--focus-ring:var(--cream);--rule:color-mix(in oklch,var(--cream) 40%,transparent)}
.phero__inner{display:flex;flex-direction:column;gap:var(--space-7);width:100%}
.phero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);align-items:end}
.phero__grid--half{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.phero__grid--solo{grid-template-columns:minmax(0,1fr)}
.phero__eyebrow{color:currentColor;opacity:0.72}
.phero__title{margin-top:var(--space-5);font-size:clamp(2.25rem,1.25rem + 3.2vw,4.25rem);text-wrap:balance;max-width:17ch}
.phero__title--long{font-size:clamp(1.9rem,1.2rem + 2.3vw,3.25rem);max-width:22ch}
.phero__lead{margin-top:var(--space-6);font-size:var(--text-lead);line-height:1.55;max-width:46ch;opacity:0.86}
.phero__aside{margin-top:var(--space-5);font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--text-h4);line-height:1.1;letter-spacing:var(--tracking-heading)}
.phero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-7)}
.phero__media{position:relative;min-width:0}
.phero__media .scene{width:100%;height:auto;max-height:62svh}
.phero__meta{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-7);margin:0;padding-top:var(--space-4);border-top:var(--border-width) solid var(--rule)}
.phero__meta div{display:flex;gap:var(--space-3);align-items:baseline}
.phero__meta dt,.phero__meta dd{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;font-variant-numeric:tabular-nums}
.phero__meta dt{opacity:0.6}
.phero__meta dd{margin:0}
.phero__meta a{text-decoration:underline;text-underline-offset:3px}
.cover{position:relative;z-index:1;background:var(--cream)}

/* Fil d'Ariane */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);
  font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.crumbs li{display:flex;align-items:center;gap:var(--space-3);opacity:0.7}
.crumbs li+li::before{content:"";width:5px;height:5px;border-radius:1px;background:currentColor;opacity:0.55}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{opacity:1}

/* Titres révélés mot par mot : le masque déborde un peu pour les accents des capitales. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0.16em 0.03em 0.08em;margin:-0.16em -0.03em -0.08em}
.w>span{display:inline-block}
.js-intro [data-reveal] .w>span{transform:translateY(118%)}
.js-intro [data-intro]{opacity:0}

/* Rideau : l'aplat de la couleur du fond se retire, l'image ne bouge pas. */
.curtain{position:relative;overflow:hidden}
.curtain::after{content:"";position:absolute;inset:-1px;background:var(--curtain,var(--cream));transform:scaleY(var(--c,0));transform-origin:50% 0%;pointer-events:none}
.js-intro .curtain{--c:1}

/* ---------- En-têtes de section ---------- */
.head--flush{margin-top:0}
.sec-lead{margin-top:var(--space-6);font-size:var(--text-lead);line-height:1.55;max-width:52ch;opacity:0.86}
.sec-title{margin-top:var(--space-6);max-width:18ch;text-wrap:balance}

/* ============================================================
   GRILLE DES SERVICES — bento à zones nommées
   ============================================================ */
.svc-grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"s1 s1 s2" "s3 s4 s5";margin-top:var(--space-8)}
.svc-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"a b c d"}
.svc-tile{--t-bg:var(--night);--t-bg-h:var(--latte-900);--t-fg:var(--cream);--t-accent:var(--grenadine);
  position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:var(--space-5);min-height:19rem;padding:var(--space-6);border-radius:var(--radius-sm);
  text-decoration:none;background:var(--t-bg);color:var(--t-fg);overflow:hidden;border:var(--border-width) solid transparent;
  transition:background-color var(--duration-1) var(--ease-out),border-color var(--duration-1) var(--ease-out)}
.svc-tile:hover{background:var(--t-bg-h)}
.svc-tile--w1{--t-bg:var(--marine-800);--t-bg-h:var(--marine-700);--t-accent:var(--beeswax)}
.svc-tile--w2{--t-bg:var(--brume);--t-bg-h:var(--marine-200);--t-fg:var(--marine-900);--t-accent:var(--grenadine-700)}
.svc-tile--w3{--t-bg:var(--cream);--t-bg-h:var(--latte-100);--t-fg:var(--ink);--t-accent:var(--grenadine-600);border-color:var(--border-hairline)}
.svc-tile--w4{--t-bg:var(--night);--t-bg-h:var(--latte-900)}
.svc-tile--w5{--t-bg:var(--grenadine);--t-bg-h:var(--grenadine-600);--t-accent:var(--night);--focus-ring:var(--cream)}
.ground--night .svc-tile--w4{border-color:color-mix(in oklch,var(--cream) 22%,transparent)}
.ground--grenadine .svc-tile--w5{border-color:color-mix(in oklch,var(--cream) 40%,transparent)}
.svc-tile__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.svc-tile__num{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);font-variant-numeric:tabular-nums}
.svc-tile__num b{color:var(--t-accent);font-weight:var(--weight-semibold)}
.svc-tile__art{display:flex;align-items:center;justify-content:center;min-height:0}
.svc-tile__art svg{display:block;width:100%;height:auto;max-height:15rem}
.svc-tile__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-heading);font-size:var(--text-h4);line-height:1.08;margin:0}
.svc-tile__desc{margin-top:var(--space-3);font-size:var(--text-small);line-height:1.55;opacity:0.82;max-width:40ch}
.svc-tile__tags{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-4);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.8}
.svc-tile__tags span{display:inline-flex;align-items:center;gap:var(--space-2)}
.svc-tile__tags span::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--t-accent)}
.go{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-semibold);font-size:var(--text-small)}
.go .ico{transition:transform var(--duration-1) var(--ease-out)}
.svc-tile:hover .go .ico{transform:translateX(3px)}
.svc-tile:hover .svc-tile__title{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.svc-tile--big .svc-tile__title{font-size:var(--text-h2)}
.svc-tile--big .svc-tile__desc{font-size:var(--text-body-size);max-width:44ch}
.svc-tile:not(.svc-tile--big) .svc-tile__art svg{max-height:11rem}
.svc-tile--big .svc-tile__art svg{max-height:13.5rem}
.svc-tile--big{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto 1fr;column-gap:var(--space-7)}
.svc-tile--big .svc-tile__top{grid-column:1 / -1}
.svc-tile--big .svc-tile__art{grid-column:2;grid-row:2}
.svc-tile--big>div:last-child{grid-column:1;grid-row:2;align-self:end}

/* ============================================================
   RÉCIT DES SERVICES — même moteur que l'accueil, cinq mondes
   ============================================================ */
.story{position:relative;background:var(--story-bg);color:var(--story-fg);
  transition:background-color var(--duration-4) var(--ease-out),color var(--duration-4) var(--ease-out);
  --story-bg:var(--marine-800);--story-fg:var(--cream);--story-accent:var(--beeswax);--story-rule:color-mix(in oklch,var(--cream) 26%,transparent)}
.story[data-ch="2"]{--story-bg:var(--brume);--story-fg:var(--marine-900);--story-accent:var(--grenadine-700);--story-rule:color-mix(in oklch,var(--marine-900) 24%,transparent)}
.story[data-ch="3"]{--story-bg:var(--cream);--story-fg:var(--ink);--story-accent:var(--grenadine-600);--story-rule:var(--border-hairline)}
.story[data-ch="4"]{--story-bg:var(--night);--story-fg:var(--cream);--story-accent:var(--grenadine);--story-rule:color-mix(in oklch,var(--cream) 26%,transparent)}
.story[data-ch="5"]{--story-bg:var(--grenadine);--story-fg:var(--cream);--story-accent:var(--night);--story-rule:color-mix(in oklch,var(--cream) 40%,transparent);--focus-ring:var(--cream)}
.story .vpd-btn--primary{background:var(--grenadine);color:var(--cream)}
.story .vpd-btn--primary:hover{background:var(--grenadine-600)}
.story[data-ch="5"] .vpd-btn--primary{background:var(--night)}
.story[data-ch="5"] .vpd-btn--primary:hover{background:var(--latte-900)}
.story__stage{position:sticky;top:0;height:100vh;height:100svh;z-index:0;pointer-events:none}
.stage__canvas{position:absolute;top:calc(var(--nav-h) + var(--space-5));bottom:clamp(4.5rem,11vh,6.5rem);left:max(42%,calc(50% - 3rem));right:var(--gutter)}
.scene{display:block;width:100%;height:100%;overflow:visible}
.story__steps{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh}
.step{min-height:120vh;min-height:120svh;display:flex;align-items:flex-start;padding-block:calc(var(--nav-h) + 10vh) var(--space-9)}
.step:first-child{padding-top:calc(var(--nav-h) + 16vh)}
.step__body{width:min(34rem,calc(max(42vw,50vw - 3rem) - max(0px,50vw - 620px) - var(--gutter) - 2rem))}
.step__num{color:currentColor}
.step__num b{font-weight:var(--weight-semibold);color:var(--story-accent);transition:color var(--duration-4) var(--ease-out)}
.step__num span{opacity:0.7}
.step h2{margin-top:var(--space-5);font-size:clamp(1.9rem,1.2rem + 1.8vw,2.75rem);text-wrap:balance}
.step__lead{margin-top:var(--space-5);font-size:var(--text-lead);line-height:1.55;max-width:44ch;opacity:0.86}
.deliver{list-style:none;margin:var(--space-7) 0 0;padding:var(--space-4) 0 0;border-top:var(--border-width) solid var(--story-rule,var(--rule));display:grid;gap:var(--space-3);max-width:30rem}
.deliver li{display:flex;gap:var(--space-3);align-items:baseline;font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.45}
.deliver li::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--radius-xs);background:var(--story-accent,var(--accent));transform:translateY(-1px);transition:background-color var(--duration-4) var(--ease-out)}
.step__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-7);pointer-events:auto}
.hud{position:absolute;left:max(42%,calc(50% - 3rem));bottom:clamp(1.25rem,3.6vh,2.25rem);display:flex;align-items:center;gap:var(--space-5);pointer-events:auto;
  font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;font-variant-numeric:tabular-nums}
.hud__now{display:flex;align-items:baseline;gap:var(--space-2);margin:0;white-space:nowrap;min-width:15.5em}
.hud__of{opacity:0.55}
.hud__name{margin-left:var(--space-2)}
.hud__segs{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.hud__segs a,.hud__segs span.seg{display:block;width:34px;padding-block:10px;color:inherit;border-radius:var(--radius-xs)}
.hud__segs i{display:block;position:relative;height:2px;background:color-mix(in oklch,currentColor 26%,transparent);overflow:hidden;transition:background-color var(--duration-1) var(--ease-out)}
.hud__segs a:hover i{background:color-mix(in oklch,currentColor 55%,transparent)}
.hud__segs i::after{content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(var(--p,0));transform-origin:0 50%}
html:not(.is-gsap) .scene .w-world{opacity:0;transition:opacity var(--duration-1) var(--ease-out)}
html:not(.is-gsap) .scene[data-ch="1"] .w-world--1,html:not(.is-gsap) .scene[data-ch="2"] .w-world--2,html:not(.is-gsap) .scene[data-ch="3"] .w-world--3,
html:not(.is-gsap) .scene[data-ch="4"] .w-world--4,html:not(.is-gsap) .scene[data-ch="5"] .w-world--5{opacity:1}
html:not(.is-gsap) .scene .brand-live{display:none}
.is-gsap .scene .brand-static{display:none}
/* Les mondes sur leur propre fond : la couleur courante suit le texte du chapitre. */
.scene .ink{color:var(--ink)}
.scene .f-acc{fill:var(--story-accent,var(--accent,var(--grenadine)))}
.scene .on-cream{color:var(--ink)}

/* ============================================================
   ÉNONCÉS D'UN SERVICE — le grand mot reste collant
   ============================================================ */
.stmt__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8);align-items:start}
.stmt__big{position:sticky;top:calc(50vh - 4.5rem);top:calc(50svh - 4.5rem);height:9rem}
.stmt__word{position:absolute;inset:0 auto auto 0;overflow:hidden;padding:0.14em 0 0.06em;margin-top:-0.14em}
.stmt__word>span{display:block;font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:1;
  font-size:clamp(3.5rem,2rem + 6vw,7.5rem);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.stmt__count{position:absolute;left:0;top:calc(100% + var(--space-3))}
.is-gsap .stmt__word:not(.is-on)>span{transform:translateY(110%)}
html:not(.is-gsap) .stmt__word:not(:first-child){display:none}
.stmt__list{list-style:none;margin:0;padding:0}
.stmt__item{min-height:62vh;min-height:62svh;display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);padding-block:var(--space-7);border-top:var(--border-width) solid var(--rule)}
.stmt__item:first-child{border-top:0}
.stmt__item h2,.stmt__item h3{font-size:var(--text-h2);max-width:20ch;text-wrap:balance}
.stmt__item p{font-size:var(--text-lead);line-height:1.6;opacity:0.84;max-width:48ch}
.stmt__mini{display:none;font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:clamp(2.5rem,1.6rem + 4vw,4rem);line-height:1;color:var(--accent);letter-spacing:var(--tracking-display)}

/* ---------- Phrase-choc : les mots s'allument au défilement ---------- */
.words{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:1.06;
  font-size:clamp(2rem,1.1rem + 3.6vw,4.5rem);max-width:20ch;text-wrap:balance;margin:0}
.words .wd{opacity:var(--o,1)}
.is-gsap .words .wd{--o:0.2}
.words em{color:var(--accent)}

/* ---------- Liste numérotée (offre, livrables) ---------- */
.feat{list-style:none;margin:var(--space-7) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap);counter-reset:f}
.feat li{counter-increment:f;display:grid;grid-template-columns:3rem 1fr;align-items:baseline;gap:var(--space-4);padding:var(--space-5) 0;border-top:var(--border-width) solid var(--rule);font-size:var(--text-lead);line-height:1.4}
.feat li::before{content:counter(f,decimal);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--accent);font-variant-numeric:tabular-nums}

/* ---------- Deux colonnes : texte + aparté ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8);align-items:start}
.split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split__aside{position:sticky;top:7rem}
.prose-lg p{font-size:var(--text-lead);line-height:1.6;max-width:52ch}
.prose-lg p+p{margin-top:var(--space-5)}
.prose-lg a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose-lg a:hover{text-decoration-thickness:2px}

/* ============================================================
   PROJETS — la pile, les sites web livrés, la fiche
   ============================================================ */
.stack{position:relative}
.stack__card{position:sticky;top:4rem;min-height:calc(100vh - 4rem);min-height:calc(100svh - 4rem);display:flex;align-items:center;padding-block:var(--space-8);background:var(--c-bg);color:var(--c-fg)}
.stack__card--marine{--c-bg:var(--marine-800);--c-fg:var(--cream);--accent:var(--beeswax);--rule:color-mix(in oklch,var(--cream) 26%,transparent);--curtain:var(--marine-800);--focus-ring:var(--beeswax)}
.stack__card--brume{--c-bg:var(--brume);--c-fg:var(--marine-900);--accent:var(--grenadine-700);--rule:color-mix(in oklch,var(--marine-900) 22%,transparent);--curtain:var(--brume)}
.stack__card--night{--c-bg:var(--night);--c-fg:var(--cream);--accent:var(--grenadine);--rule:color-mix(in oklch,var(--cream) 24%,transparent);--curtain:var(--night);--focus-ring:var(--beeswax)}
.stack__inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);align-items:center;width:100%}
.stack__media{border-radius:var(--radius-sm);overflow:hidden;background:color-mix(in oklch,currentColor 8%,transparent)}
.stack__media img{display:block;width:100%;height:auto}
.stack__body{display:flex;flex-direction:column;gap:var(--space-4)}
.stack__num{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;font-variant-numeric:tabular-nums}
.stack__num b{color:var(--accent);font-weight:var(--weight-semibold)}
.stack__title{font-size:var(--text-h2);margin-top:var(--space-2)}
.stack__title a{text-decoration:none}
.stack__title a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.stack__sub{font-size:var(--text-lead);line-height:1.55;opacity:0.86;max-width:40ch}
.meta-dl{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin:var(--space-2) 0 0;padding-top:var(--space-4);border-top:var(--border-width) solid var(--rule)}
.meta-dl div{display:flex;gap:var(--space-2);align-items:baseline}
.meta-dl dt,.meta-dl dd{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.meta-dl dt{opacity:0.6}
.meta-dl dd{margin:0}
.stack__actions{margin-top:var(--space-4)}

/* Sites web livrés : colonnes, ratio natif, aucun recadrage */
.wall{columns:3 17rem;column-gap:var(--grid-gap);margin:var(--space-8) 0 0;padding:0;list-style:none}
.wall li{break-inside:avoid;margin-bottom:var(--space-7)}
.shot{display:block;text-decoration:none;color:inherit}
.shot__media{display:block;border-radius:var(--radius-sm);overflow:hidden;background:var(--latte-100)}
.shot__media img{display:block;width:100%;height:auto}
.shot__cap{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--space-3);padding-top:var(--space-4);margin-top:var(--space-4);border-top:var(--border-width) solid var(--rule,var(--border-hairline))}
.shot__n{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--accent);font-variant-numeric:tabular-nums}
.shot__name{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:clamp(1rem,0.9rem + 0.45vw,1.25rem);line-height:1.15;letter-spacing:var(--tracking-heading)}
.shot__url{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:0.04em;opacity:0.7;white-space:nowrap}
.shot__url .ico{transition:transform var(--duration-1) var(--ease-out)}
.shot:hover .shot__name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.shot:hover .shot__url{opacity:1}
.shot:hover .shot__url .ico{transform:translate(2px,-2px)}

/* Fiche de projet (colonne collante) + corps */
.case{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-9);align-items:start}
.fiche{position:sticky;top:6.5rem;display:grid;gap:var(--space-6)}
.fiche dl{margin:0;display:grid;gap:0}
.fiche dl div{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--space-3);padding:var(--space-3) 0;border-top:var(--border-width) solid var(--rule)}
.fiche dt{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.6;padding-top:0.15em}
.fiche dd{margin:0;font-size:var(--text-small);line-height:1.5}
.fiche dd a{text-decoration:underline;text-underline-offset:3px}
.fiche__nav{display:grid;gap:var(--space-3)}
.fiche__nav ol{list-style:none;margin:0;padding:0;display:grid}
.fiche__nav a{display:grid;grid-template-columns:2rem 1fr;gap:var(--space-2);align-items:baseline;padding:var(--space-2) 0;text-decoration:none;font-size:var(--text-small);opacity:0.6;transition:opacity var(--duration-1) var(--ease-out)}
.fiche__nav a small{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);font-variant-numeric:tabular-nums}
.fiche__nav a:hover,.fiche__nav a[aria-current="true"]{opacity:1}
.fiche__nav a[aria-current="true"] small{color:var(--accent)}
.fiche__bar{height:2px;background:color-mix(in oklch,currentColor 20%,transparent);position:relative;overflow:hidden}
.fiche__bar i{position:absolute;inset:0;background:var(--grenadine);transform:scaleX(var(--p,0));transform-origin:0 50%}
.case__sec{padding-block:0 var(--space-9)}
.case__sec:last-child{padding-bottom:0}
.case__sec .vpd-label{color:currentColor;opacity:0.65}
.case__sec h2{margin-top:var(--space-4);font-size:var(--text-h2);max-width:20ch}
.case__sec p{margin-top:var(--space-5);font-size:var(--text-lead);line-height:1.6;max-width:54ch}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.tags li{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;border:var(--border-width) solid var(--rule);border-radius:var(--radius-sm);padding:0.4rem 0.7rem}

/* Galerie et vidéos : ratio natif */
.gallery{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--grid-gap);margin-top:var(--space-8)}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.gallery figcaption{margin-top:var(--space-3);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.6}
.reels{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--grid-gap);margin-top:var(--space-8);max-width:60rem}
.facade{position:relative;display:block;width:100%;aspect-ratio:var(--ratio,16/9);border:0;padding:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--latte-900);color:var(--cream);cursor:pointer;text-align:left}
.facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%);opacity:0.55;transition:filter var(--duration-4) var(--ease-out),opacity var(--duration-4) var(--ease-out)}
.facade:hover img,.facade:focus-visible img{filter:none;opacity:0.8}
.facade__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:var(--radius-sm);background:var(--grenadine);display:grid;place-items:center;transition:background-color var(--duration-1) var(--ease-out)}
.facade:hover .facade__play{background:var(--grenadine-600)}
.facade__play::before{content:"";width:0;height:0;border-left:16px solid var(--cream);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.facade__label{position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade.is-live{cursor:default}
.video-frame{border-radius:var(--radius-sm);overflow:hidden;background:var(--latte-900)}
.video-frame video{display:block;width:100%;height:auto}

/* Projet suivant : un grand lien, la page se prolonge */
.next{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);align-items:center;text-decoration:none;color:inherit}
.next__label{color:currentColor;opacity:0.65}
.next__title{margin-top:var(--space-4);font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-display);font-size:clamp(2.5rem,1.4rem + 4.4vw,5.5rem);line-height:0.98}
.next:hover .next__title{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:3px}
.next__media{border-radius:var(--radius-sm);overflow:hidden}
.next__media img{display:block;width:100%;height:auto}

/* ============================================================
   BLOG — vedette, filtres, liste numérotée
   ============================================================ */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);align-items:end;text-decoration:none;color:inherit}
.feature__media{border-radius:var(--radius-sm);overflow:hidden;background:var(--latte-900)}
.feature__media img{display:block;width:100%;height:auto;filter:grayscale(100%);transition:filter var(--duration-4) var(--ease-out)}
.feature:hover .feature__media img,.feature:focus-visible .feature__media img{filter:none}
.feature__body{display:flex;flex-direction:column;gap:var(--space-4);padding-bottom:var(--space-2)}
.feature__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-heading);font-size:clamp(1.5rem,1.05rem + 1.5vw,2.35rem);line-height:1.08;text-wrap:balance}
.feature:hover .feature__title{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.feature__ex{font-size:var(--text-body-size);line-height:1.6;opacity:0.82;max-width:48ch}
.cat{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
.cat b{font-weight:var(--weight-medium);color:var(--accent)}
.cat span{opacity:0.65}
.cat i{width:4px;height:4px;border-radius:1px;background:currentColor;opacity:0.4}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-9)}
.chip{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;
  background:transparent;color:inherit;border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-sm);padding:0.55rem 0.9rem;cursor:pointer;
  transition:background-color var(--duration-1) var(--ease-out),color var(--duration-1) var(--ease-out),border-color var(--duration-1) var(--ease-out)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip sup{font-size:0.9em;margin-left:0.35em;opacity:0.6;vertical-align:baseline}
.posts{list-style:none;margin:var(--space-6) 0 0;padding:0;border-bottom:var(--border-width) solid var(--rule)}
.post a{display:grid;grid-template-columns:3.5rem minmax(0,8rem) minmax(0,1fr) auto;gap:var(--space-6);align-items:center;padding:var(--space-5) 0;border-top:var(--border-width) solid var(--rule);text-decoration:none;color:inherit;transition:background-color var(--duration-1) var(--ease-out)}
.post__n{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);font-variant-numeric:tabular-nums;opacity:0.6}
.post__thumb{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:3/2;background:var(--latte-900)}
.post__thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter var(--duration-4) var(--ease-out)}
.post__main{display:grid;gap:var(--space-2)}
.post__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-heading);font-size:clamp(1.05rem,0.95rem + 0.55vw,1.4rem);line-height:1.18;margin:0;text-wrap:balance}
.post__go{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:var(--border-width) solid var(--rule);border-radius:var(--radius-sm);transition:background-color var(--duration-1) var(--ease-out),border-color var(--duration-1) var(--ease-out),color var(--duration-1) var(--ease-out)}
.post__go .ico{transition:transform var(--duration-1) var(--ease-out)}
.post a:hover .post__thumb img,.post a:focus-visible .post__thumb img{filter:none}
.post a:hover .post__title{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.post a:hover .post__go{background:var(--grenadine);border-color:var(--grenadine);color:var(--cream)}
.post a:hover .post__go .ico{transform:translateX(3px)}
.post[hidden]{display:none}
.posts__empty{padding:var(--space-6) 0;opacity:0.7}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);margin-top:var(--space-8)}
.card-post{display:flex;flex-direction:column;gap:var(--space-4);text-decoration:none;color:inherit}
.card-post__media{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:3/2;background:var(--latte-900)}
.card-post__media img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter var(--duration-4) var(--ease-out)}
.card-post:hover .card-post__media img,.card-post:focus-visible .card-post__media img{filter:none}
.card-post__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--text-h4);line-height:1.12;letter-spacing:var(--tracking-heading);margin:0;text-wrap:balance}
.card-post:hover .card-post__title{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* ============================================================
   ARTICLE ET PAGES LÉGALES — sommaire collant, corps de texte
   ============================================================ */
.read{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--space-9);align-items:start}
.toc{position:sticky;top:6.5rem;display:grid;gap:var(--space-4)}
.toc ol{list-style:none;margin:0;padding:0;display:grid}
.toc a{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);padding:0.6rem 0;border-top:var(--border-width) solid var(--rule);text-decoration:none;font-size:var(--text-small);line-height:1.35;color:var(--text-muted);transition:color var(--duration-1) var(--ease-out)}
.toc a::before{content:"";width:6px;height:6px;margin-top:0.42em;border-radius:1px;background:currentColor;opacity:0.35;transition:background-color var(--duration-1) var(--ease-out),opacity var(--duration-1) var(--ease-out)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink)}
.toc a[aria-current="true"]::before{background:var(--grenadine);opacity:1}
.toc__bar{height:2px;background:var(--border-hairline);position:relative;overflow:hidden}
.toc__bar i{position:absolute;inset:0;background:var(--grenadine);transform:scaleX(var(--p,0));transform-origin:0 50%}
.art-hero{margin-top:var(--space-8)}
.art-hero figure{margin:0}
.art-hero img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.byline{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}

.prose{max-width:var(--measure);font-size:clamp(1.0313rem,0.99rem + 0.2vw,1.125rem);line-height:1.75;color:var(--ink)}
.prose>*+*{margin-top:1.15em}
.prose p{max-width:none}
.prose>h2{margin-top:2.3em;font-size:clamp(1.375rem,1.1rem + 1.05vw,1.875rem);line-height:1.12;scroll-margin-top:7rem;text-wrap:balance}
.prose>h2+*{margin-top:0.9em}
.prose>h3{margin-top:1.9em;font-size:clamp(1.0625rem,1rem + 0.4vw,1.25rem);line-height:1.25;letter-spacing:0}
.prose>h3+*{margin-top:0.7em}
.prose a{color:var(--grenadine-600);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:var(--weight-semibold)}
.prose em{font-style:italic}
.prose ul,.prose ol{padding:0;list-style:none;display:grid;gap:0.55em}
.prose ul>li{position:relative;padding-left:1.4em}
.prose ul>li::before{content:"";position:absolute;left:0;top:0.72em;width:6px;height:6px;border-radius:1px;background:var(--grenadine)}
.prose ol{counter-reset:o}
.prose ol>li{counter-increment:o;position:relative;padding-left:2.4em}
.prose ol>li::before{content:counter(o,decimal);position:absolute;left:0;top:0.2em;font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--grenadine-600);font-variant-numeric:tabular-nums}
.prose .lead{font-size:var(--text-lead);line-height:1.6}
.prose blockquote{margin:1.8em 0;padding:var(--space-5) 0 0;border-top:var(--border-width-thick) solid var(--ink)}
.prose blockquote p{font-size:var(--text-lead);line-height:1.5;font-weight:var(--weight-medium)}
.prose blockquote cite{display:block;margin-top:var(--space-3);font-style:normal;font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.65}
.prose figure{margin:1.8em 0}
.prose figure img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.prose figcaption{margin-top:var(--space-3);font-size:var(--text-small);color:var(--text-muted)}
.callout{margin:1.8em 0;padding:var(--space-6);border-radius:var(--radius-sm);background:var(--brume);color:var(--marine-900)}
.callout--night{background:var(--night);color:var(--cream)}
.callout--night a{color:var(--beeswax-300)}
.callout__label{display:block;color:currentColor;opacity:0.7;margin-bottom:var(--space-3)}
.callout__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--text-h4);line-height:1.15;margin:0 0 var(--space-3)}
.callout>*+*{margin-top:0.8em}
.callout .vpd-btn{margin-top:var(--space-5)}
.tbl-wrap{margin:1.8em 0;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--text-small);line-height:1.5;font-variant-numeric:tabular-nums}
.tbl caption{text-align:left;margin-bottom:var(--space-3);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.tbl th{text-align:left;font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);padding:0 var(--space-4) var(--space-3) 0;border-bottom:var(--border-width) solid var(--border-strong);vertical-align:bottom}
.tbl td{padding:var(--space-3) var(--space-4) var(--space-3) 0;border-bottom:var(--border-width) solid var(--border-hairline);vertical-align:top}
.tbl tr>*:first-child{font-weight:var(--weight-semibold)}
.stats-row{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--space-6);margin:1.8em 0}
.stats-row>div{padding-top:var(--space-4);border-top:var(--border-width-thick) solid var(--ink)}
.stats-row b{display:block;font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--grenadine-600)}
.stats-row span{display:block;margin-top:var(--space-2);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);line-height:1.45}
.prose .steps{counter-reset:s;display:grid;gap:0;margin:1.8em 0}
.prose .steps>div{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:var(--space-4);padding:var(--space-5) 0;border-top:var(--border-width) solid var(--border-hairline)}
.prose .steps>div::before{content:counter(s,decimal);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--grenadine-600);padding-top:0.3em}
.prose .steps h4{font-size:1rem;line-height:1.3;letter-spacing:0;margin:0 0 var(--space-2)}
.author{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:center;margin-top:var(--space-9);padding-top:var(--space-6);border-top:var(--border-width) solid var(--border-hairline);max-width:var(--measure)}
.author__mark{width:56px;height:56px;border-radius:var(--radius-sm);background:var(--grenadine);display:grid;place-items:center}
.author__mark img{width:36px;height:auto;display:block}
.author p{font-size:var(--text-small);line-height:1.6;color:var(--text-muted)}
.author strong{display:block;color:var(--ink);font-weight:var(--weight-semibold)}

/* ---------- Composants interactifs repris des articles ---------- */
.widget{margin:2em 0;padding:var(--space-6);border-radius:var(--radius-sm);background:var(--night);color:var(--cream)}
.widget--light{background:var(--latte-100);color:var(--ink)}
.widget__label{display:block;color:currentColor;opacity:0.65;margin-bottom:var(--space-4)}
.widget__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--text-h4);line-height:1.15;margin:0}
.widget p{max-width:60ch}
.widget>*+*{margin-top:var(--space-4)}
.tabs__list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tabs__list [role="tab"]{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;background:transparent;color:inherit;border:var(--border-width) solid color-mix(in oklch,currentColor 40%,transparent);border-radius:var(--radius-sm);padding:0.55rem 0.85rem;cursor:pointer;transition:background-color var(--duration-1) var(--ease-out),color var(--duration-1) var(--ease-out),border-color var(--duration-1) var(--ease-out)}
.tabs__list [role="tab"]:hover{border-color:currentColor}
.tabs__list [role="tab"][aria-selected="true"]{background:var(--grenadine);border-color:var(--grenadine);color:var(--cream)}
.tabs__panel{margin-top:var(--space-5)}
.tabs__panel>*+*{margin-top:var(--space-3)}
.bars{display:grid;gap:var(--space-4);margin-top:var(--space-5)}
.bars__row{display:grid;grid-template-columns:minmax(8rem,14rem) 1fr auto;gap:var(--space-4);align-items:center;font-size:var(--text-small)}
.bars__track{height:10px;border-radius:2px;background:color-mix(in oklch,currentColor 14%,transparent);overflow:hidden}
.bars__fill{display:block;height:100%;width:100%;background:var(--grenadine);transform:scaleX(var(--v,0));transform-origin:0 50%}
.bars__fill--past{background:var(--latte-300)}
.bars__val{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:0.04em;font-variant-numeric:tabular-nums;min-width:4.5em;text-align:right}

/* ============================================================
   FAQ — détails natifs
   ============================================================ */
.faq{margin-top:var(--space-7);border-top:var(--border-width) solid var(--rule)}
.faq details{border-bottom:var(--border-width) solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:var(--space-5);align-items:center;padding:var(--space-5) 0;
  font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-heading);font-size:clamp(1rem,0.94rem + 0.35vw,1.25rem);line-height:1.25;border-radius:var(--radius-xs)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.faq__x{position:relative;width:14px;height:14px;flex:none;transition:transform var(--duration-2) var(--ease-settle)}
.faq__x::before,.faq__x::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--accent,var(--grenadine))}
.faq__x::after{transform:rotate(90deg)}
.faq details[open] .faq__x{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq__a{padding:0 0 var(--space-6);max-width:68ch}
.faq__a p{line-height:1.7}
.faq__a p+p{margin-top:var(--space-3)}
.faq__a a{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.form{display:grid;gap:var(--space-5)}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.field{display:grid;gap:var(--space-2);align-content:start}
.field__label{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;display:flex;justify-content:space-between;gap:var(--space-3)}
.field__label small{font-size:inherit;opacity:0.6;letter-spacing:0.04em;text-transform:none}
.field__ctl{width:100%;font:inherit;font-size:var(--text-body-size);line-height:1.5;color:var(--ink);background:var(--cream);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-sm);padding:0.8125rem 1rem;
  transition:border-color var(--duration-1) var(--ease-out),background-color var(--duration-1) var(--ease-out)}
.field__ctl::placeholder{color:var(--latte-500)}
.field__ctl:hover{border-color:var(--ink)}
.field__ctl:focus{outline:none}
.field__ctl:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--ink)}
textarea.field__ctl{min-height:9.5rem;resize:vertical}
.field__err{display:none;font-size:var(--text-small);line-height:1.4;color:var(--grenadine-700);font-weight:var(--weight-medium)}
.field[data-invalid] .field__ctl{border-color:var(--grenadine-600);background:var(--grenadine-100)}
.field[data-invalid] .field__err{display:block}
.form--on-dark .field__label{color:color-mix(in oklch,var(--cream) 80%,transparent)}
.form--on-dark .field[data-invalid] .field__err{color:var(--beeswax-300)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6);margin-top:var(--space-2)}
.form__note{font-size:var(--text-small);line-height:1.5;opacity:0.72;max-width:40ch}
.form__note a{text-decoration:underline;text-underline-offset:3px}
.form__status{font-size:var(--text-small);font-weight:var(--weight-medium)}
.form__status--err{color:var(--grenadine-700)}
.form-done{display:none;gap:var(--space-4);align-content:start;padding:var(--space-6) 0}
.form-done__mark{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--grenadine);display:grid;place-items:center;color:var(--cream)}
.form-done__mark .ico{width:26px;height:26px;stroke-width:2.5}
.form-done__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--text-h2);line-height:1}
.form-done p{max-width:44ch}
[data-state="sent"] .form-done{display:grid}
[data-state="sent"] .form,[data-state="sent"] .stepper{display:none}
.vpd-btn[disabled]{opacity:0.6;cursor:progress}

.contact-block{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-9);align-items:start}
.contact-block__title{font-size:clamp(2rem,1.3rem + 2.6vw,3.5rem);max-width:14ch;margin:var(--space-5) 0 var(--space-7)}
.coords{margin:0;display:grid;gap:0}
.coords div{padding:var(--space-4) 0;border-top:var(--border-width) solid var(--rule)}
.coords dt{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.62}
.coords dd{margin:var(--space-2) 0 0;font-size:var(--text-body-size);line-height:1.5}
.coords a{text-decoration:underline;text-underline-offset:3px}
.coords a:hover{text-decoration-thickness:2px}
.map-facade{margin-top:var(--space-6)}
.map-facade .facade{--ratio:4/3;background:var(--marine-800)}
.map-facade .facade svg{position:absolute;inset:0;width:100%;height:100%}
.map-facade__note{margin-top:var(--space-3);font-size:var(--text-micro);line-height:1.5;opacity:0.65}

/* Formulaire à étapes : les segments de l'accueil */
.stepper{display:grid;gap:var(--space-6)}
.stepper__hud{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:var(--border-width) solid var(--rule)}
.stepper__hud p{margin:0}
.stepper__hud b{color:var(--accent);font-weight:var(--weight-semibold)}
.stepper__hud .hud__segs span.seg{width:44px}
.stepper__step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--space-5)}
.stepper__step legend{padding:0;font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-heading);font-size:var(--text-h3);line-height:1.1;margin-bottom:var(--space-2)}
.stepper__help{font-size:var(--text-small);opacity:0.75;margin-top:calc(-1 * var(--space-3))}
.stepper__nav{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.stepper__nav [data-prev]{margin-right:auto}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.choice{position:relative;display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);align-items:start;padding:var(--space-4) var(--space-5);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;background:var(--cream);color:var(--ink);
  transition:border-color var(--duration-1) var(--ease-out),background-color var(--duration-1) var(--ease-out)}
.choice:hover{border-color:var(--ink)}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice__box{width:18px;height:18px;margin-top:0.18em;border:var(--border-width-thick) solid var(--ink);border-radius:var(--radius-xs);display:grid;place-items:center;transition:background-color var(--duration-1) var(--ease-out),border-color var(--duration-1) var(--ease-out)}
.choice__box::after{content:"";width:8px;height:8px;border-radius:1px;background:var(--cream);transform:scale(0);transition:transform var(--duration-2) var(--ease-settle)}
.choice input:checked~.choice__box{background:var(--grenadine);border-color:var(--grenadine)}
.choice input:checked~.choice__box::after{transform:scale(1)}
.choice:has(input:checked){border-color:var(--grenadine);background:var(--grenadine-100)}
.choice input:focus-visible~.choice__box{outline:2px solid var(--focus-ring);outline-offset:3px}
.choice__t{font-weight:var(--weight-semibold);line-height:1.35}
.choice__d{grid-column:2;font-size:var(--text-small);line-height:1.45;opacity:0.72}
.process{list-style:none;margin:0;padding:0;counter-reset:p;display:grid}
.process li{counter-increment:p;display:grid;grid-template-columns:2.5rem 1fr;gap:var(--space-3);padding:var(--space-4) 0;border-top:var(--border-width) solid var(--rule)}
.process li::before{content:counter(p,decimal);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--accent);padding-top:0.25em}

/* ============================================================
   TÉMOIGNAGES, CHIFFRES, VILLES, CTA
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);margin-top:var(--space-8)}
.quote{grid-column:span 4;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6);padding-top:var(--space-5);border-top:var(--border-width-thick) solid currentColor;margin:0}
.quote--wide{grid-column:span 6}
.quote blockquote{margin:0;font-size:var(--text-lead);line-height:1.55}
.quote blockquote p::before{content:"«\00a0";color:var(--accent);font-family:var(--font-display);font-weight:var(--weight-display)}
.quote blockquote p::after{content:"\00a0»";color:var(--accent);font-family:var(--font-display);font-weight:var(--weight-display)}
.quote figcaption{display:grid;gap:var(--space-1)}
.quote figcaption b{font-weight:var(--weight-semibold)}
.quote figcaption span{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.65}
.stars{display:flex;gap:3px;color:var(--beeswax)}
.stars svg{width:14px;height:14px;fill:currentColor}
.band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);align-items:end}
.band h2{font-size:clamp(2rem,1.3rem + 2.9vw,3.5rem);max-width:14ch}
.band__lead{margin-top:var(--space-6);font-size:var(--text-lead);line-height:1.55;max-width:42ch;opacity:0.88}
.band__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-7)}
.cities a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.cities--on-dark a{color:var(--cream);border-color:color-mix(in oklch,var(--cream) 30%,transparent)}
.cities--on-dark a:hover{background:var(--grenadine);border-color:var(--grenadine)}
.cities a.is-hub{border-color:var(--grenadine);color:var(--grenadine-600)}
.cities a.is-hub:hover{color:var(--cream)}
.figures--4{grid-template-columns:repeat(4,1fr)}
.figures__n small{font-size:0.45em;letter-spacing:0;margin-left:0.15em}

/* Schéma de la Rive-Nord */
.rnmap{display:block;width:100%;height:auto}
.rnmap text{font-family:var(--font-label);fill:currentColor}
.rnmap .rn-lab{font-weight:500;font-size:12px;letter-spacing:0.08em}
.rnmap .rn-lab-s{font-weight:500;font-size:10px;letter-spacing:0.1em}
.rnmap .rn-river{fill:none;stroke:var(--azur);stroke-linecap:round}
.rnmap .rn-road{fill:none;stroke:currentColor;stroke-opacity:0.3;stroke-width:2}
.rnmap .rn-road-lab{font-size:9.5px;font-weight:600;letter-spacing:0.06em}
.rnmap .rn-dot{fill:currentColor;fill-opacity:0.55}
.rnmap .rn-city.is-on .rn-dot{fill:var(--beeswax);fill-opacity:1}
.rnmap .rn-city.is-on text{fill:var(--beeswax)}
.rnmap a.rn-city:hover text,.rnmap a.rn-city:focus text{text-decoration:underline}
.rnmap a.rn-city:hover .rn-dot{fill:var(--beeswax);fill-opacity:1}
.rnmap .rn-office{fill:var(--grenadine)}
.rnmap .rn-link{fill:none;stroke:var(--beeswax);stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round}
.rnmap .rn-ring{fill:none;stroke:currentColor;stroke-opacity:0.14}
.rnmap-note{margin-top:var(--space-3);opacity:0.6}

/* ============================================================
   BANNIÈRE DE CONSENTEMENT
   ============================================================ */
.cookie{position:fixed;left:var(--gutter);bottom:var(--space-5);z-index:80;width:min(27rem,calc(100vw - 2 * var(--gutter)));max-height:calc(100svh - 2rem);overflow-y:auto;
  background:var(--night);color:var(--cream);border:var(--border-width) solid color-mix(in oklch,var(--cream) 20%,transparent);border-radius:var(--radius-sm);padding:var(--space-6);--focus-ring:var(--beeswax)}
.cookie__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--text-h4);line-height:1.1;margin:0}
.cookie p{margin-top:var(--space-3);font-size:var(--text-small);line-height:1.55;color:color-mix(in oklch,var(--cream) 80%,transparent)}
.cookie p a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.cookie__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.cookie__prefs{margin-top:var(--space-5);display:grid;gap:0;border-top:var(--border-width) solid color-mix(in oklch,var(--cream) 20%,transparent)}
.pref{display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-4);align-items:start;padding:var(--space-4) 0;border-bottom:var(--border-width) solid color-mix(in oklch,var(--cream) 20%,transparent)}
.pref__t{font-weight:var(--weight-semibold);font-size:var(--text-small)}
.pref__d{grid-column:1;font-size:var(--text-micro);line-height:1.5;color:color-mix(in oklch,var(--cream) 70%,transparent)}
.switch{grid-row:1 / span 2;grid-column:2;position:relative;width:44px;height:24px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:var(--radius-sm);background:color-mix(in oklch,var(--cream) 22%,transparent);transition:background-color var(--duration-1) var(--ease-out)}
.switch i::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:2px;background:var(--cream);transition:transform var(--duration-2) var(--ease-settle)}
.switch input:checked+i{background:var(--grenadine)}
.switch input:checked+i::after{transform:translateX(20px)}
.switch input:disabled+i{opacity:0.55}
.switch input:focus-visible+i{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ============================================================
   404 — le carré perdu dans le bruit
   ============================================================ */
.lost{position:relative;min-height:100vh;min-height:100svh;background:var(--night);color:var(--cream);display:flex;align-items:center;overflow:hidden;padding:calc(var(--nav-h) + var(--space-7)) 0 var(--space-8)}
.lost__field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lost__field rect{fill:var(--cream)}
.lost__field .is-brand{fill:var(--grenadine)}
.lost__inner{position:relative;z-index:1}
.lost__code{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(5rem,3rem + 10vw,11rem);line-height:0.9;letter-spacing:-0.03em;color:var(--grenadine)}
.lost__card{max-width:36rem;background:var(--night);padding:var(--space-6) var(--space-6) var(--space-6) 0}

/* ============================================================
   PLAN DES GABARITS
   ============================================================ */
.plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--space-7) var(--grid-gap);margin-top:var(--space-7)}
.plan__item{display:grid;gap:var(--space-3);text-decoration:none;color:inherit}
.plan__shot{border-radius:var(--radius-sm);overflow:hidden;background:var(--latte-100);border:var(--border-width) solid var(--border-hairline);aspect-ratio:16/10}
.plan__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.plan__name{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:1.05rem;line-height:1.15}
.plan__file{font-family:var(--font-label);font-size:var(--text-micro);letter-spacing:0.04em;opacity:0.6}
.plan__item:hover .plan__name{text-decoration:underline;text-underline-offset:4px}
.plan-group+.plan-group{margin-top:var(--space-9)}
.plan-secs{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:0 var(--grid-gap)}
.plan-secs li{border-top:var(--border-width) solid var(--border-hairline);padding:var(--space-4) 0;display:grid;gap:var(--space-1)}
.plan-secs a{font-weight:var(--weight-semibold);text-decoration:none}
.plan-secs a:hover{text-decoration:underline;text-underline-offset:3px}
.plan-secs span{font-size:var(--text-small);opacity:0.7}

/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .curtain::after{display:none}
  .burger span,.faq__x,.choice__box::after,.switch i::after{transition:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .vpd-nav__links{gap:var(--space-4)}
  .svc-tile--big{grid-template-columns:1fr;grid-template-rows:auto}
  .svc-tile--big .svc-tile__art,.svc-tile--big>div:last-child{grid-column:auto;grid-row:auto}
  .read{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;max-width:var(--measure)}
  .case{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .fiche{position:static}
  .fiche__nav{display:none}
  .vpd-footer__inner{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vpd-footer__inner>div:first-child{grid-column:1 / -1}
}
@media (max-width:1000px){
  .contact-block,.band,.split,.split--rev{grid-template-columns:1fr;gap:var(--space-7)}
  .split__aside{position:static}
  .quote,.quote--wide{grid-column:span 12}
  .feature{grid-template-columns:1fr;gap:var(--space-6)}
  .figures--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:899px){
  :root{--nav-h:4.75rem}
  .vpd-nav__main{display:none}
  .burger{display:block}
  .vpd-nav__cta{margin-left:auto}
  .vpd-nav__lang{display:none}
  .phero{min-height:0;padding-top:calc(var(--nav-h) + var(--space-7))}
  .phero__grid,.phero__grid--half{grid-template-columns:1fr;gap:var(--space-7)}
  .phero__media .scene{max-height:none}
  .stack__card{position:relative;top:auto;min-height:0;padding-block:var(--space-9)}
  .stack__inner{grid-template-columns:1fr;gap:var(--space-6)}
  .next{grid-template-columns:1fr;gap:var(--space-6)}
  .stmt__grid{grid-template-columns:1fr}
  .stmt__big{display:none}
  .stmt__mini{display:block}
  .stmt__item{min-height:0;padding-block:var(--space-7)}
  .stmt__item:first-child{border-top:var(--border-width) solid var(--rule)}
  .feat{grid-template-columns:1fr}
  .post a{grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:var(--space-4);align-items:start}
  .post__n,.post__go{display:none}
  .related{grid-template-columns:1fr;gap:var(--space-7)}
  /* Récit des services : la scène en haut, le texte défile dessous (comme l'accueil). */
  .story__stage{z-index:2}
  .stage__canvas{top:0;left:0;right:0;bottom:auto;height:calc(var(--nav-h) + 44svh);padding:calc(var(--nav-h) + var(--space-4)) var(--gutter) var(--space-7);background:var(--story-bg);transition:background-color var(--duration-4) var(--ease-out)}
  .hud{left:var(--gutter);right:var(--gutter);bottom:auto;top:calc(var(--nav-h) + 44svh - 2.75rem);justify-content:space-between;gap:var(--space-3)}
  .hud__now{display:none}
  .hud__segs{flex:1}
  .hud__segs li{flex:1}
  .hud__segs a{width:auto}
  .story__steps{padding-top:calc(var(--nav-h) + 44svh)}
  .step,.step:first-child{align-items:flex-start;min-height:72vh;min-height:72svh;padding-block:var(--space-6) var(--space-7);scroll-margin-top:calc(var(--nav-h) + 44svh)}
  .step__body{width:auto;max-width:36rem}
  .scene .lab,.scene .m-hide{display:none}
  .gallery{--n:1!important}
  .reels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .svc-grid,.svc-grid--4{grid-template-columns:1fr;grid-template-areas:none}
  .svc-tile{min-height:0}
  .form__row,.choices{grid-template-columns:1fr}
  .vpd-footer__inner{grid-template-columns:1fr 1fr}
  .stats-row{grid-template-columns:1fr}
  .figures--4{grid-template-columns:1fr 1fr}
  .cookie{left:var(--space-3);right:var(--space-3);width:auto;bottom:var(--space-3);padding:var(--space-5)}
  .vpd-nav__cta .vpd-btn__label{font-size:0.75rem}
}
@media (max-width:420px){
  .vpd-nav__cta{padding-inline:0.75rem}
}

/* ============================================================
   PAGES DE SERVICES — index du héros, bande image, offre
   ============================================================ */
.svc-index{list-style:none;margin:0;padding:0;border-top:var(--border-width) solid var(--rule)}
.svc-index a{display:grid;grid-template-columns:2.25rem 1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-4) 0;border-bottom:var(--border-width) solid var(--rule);text-decoration:none;
  font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-heading);font-size:clamp(1.05rem,0.95rem + 0.6vw,1.45rem);line-height:1.1;transition:color var(--duration-1) var(--ease-out)}
.svc-index small{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);opacity:0.6;font-variant-numeric:tabular-nums}
.svc-index i{width:14px;height:14px;border-radius:3px;background:var(--sw);box-sizing:border-box}
.svc-index li:nth-child(1) i{--sw:var(--marine-600)}
.svc-index li:nth-child(2) i{--sw:var(--brume)}
.svc-index li:nth-child(3) i{--sw:var(--cream)}
.svc-index li:nth-child(4) i{--sw:var(--night);border:1px solid color-mix(in oklch,var(--cream) 45%,transparent)}
.svc-index li:nth-child(5) i{--sw:var(--grenadine)}
.svc-index a:hover{color:var(--grenadine)}
.media-band{position:relative;height:min(62vh,40rem);height:min(62svh,40rem);overflow:hidden;background:var(--night)}
.media-band img,.media-band video{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;filter:grayscale(100%);opacity:0.9;transition:filter var(--duration-4) var(--ease-out)}
.media-band:hover img,.media-band:hover video{filter:none}
.media-band figcaption{position:absolute;left:var(--gutter);bottom:var(--space-5);z-index:1;background:var(--night);color:var(--cream);padding:0.4rem 0.7rem;border-radius:var(--radius-sm)}
.offer{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--space-9);align-items:start}
.offer h2{font-size:clamp(2.25rem,1.4rem + 3vw,4rem);margin-top:var(--space-5);max-width:12ch}
.offer p{margin-top:var(--space-6);font-size:var(--text-lead);line-height:1.6;max-width:46ch}
.offer .vpd-btn{margin-top:var(--space-7)}
.checks{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid}
.checks li{display:grid;grid-template-columns:1.25rem 1fr;gap:var(--space-3);align-items:baseline;padding:var(--space-4) 0;border-top:var(--border-width) solid var(--rule);font-size:var(--text-lead);line-height:1.4}
.checks li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--grenadine);transform:translateY(-2px)}
.checks li:last-child{border-bottom:var(--border-width) solid var(--rule)}
.manif{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-9);align-items:start}
.manif__text p:first-child{font-weight:var(--weight-medium);font-size:clamp(1.4rem,1.05rem + 1.3vw,2.1rem);line-height:1.35;letter-spacing:-0.01em;max-width:30ch;text-wrap:pretty}
.manif__text p+p{margin-top:var(--space-6);font-size:var(--text-lead);line-height:1.6;max-width:46ch}
.manif__text a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.manif__text a:hover{text-decoration-thickness:2px}
.manif__aside .video-frame{margin-bottom:var(--space-7)}
.feat--one{grid-template-columns:1fr;margin-top:var(--space-5)}
.feat--one li{font-size:var(--text-body-size);padding:var(--space-4) 0}
.splitimg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);align-items:center}
.splitimg__media{border-radius:var(--radius-sm);overflow:hidden;background:var(--latte-900)}
.splitimg__media img{display:block;width:100%;height:auto;filter:grayscale(100%);transition:filter var(--duration-4) var(--ease-out)}
.splitimg:hover .splitimg__media img{filter:none}
.splitimg__t{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-heading);font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);line-height:1.08;margin-top:var(--space-5)}
@media (max-width:1000px){
  .offer,.manif,.splitimg{grid-template-columns:1fr;gap:var(--space-7)}
}

.phero__media--world .scene{max-height:none}

/* Études de cas : visuel du héros au ratio natif */
.phero__vid{display:flex;justify-content:center}
.phero__vid .facade{height:min(64vh,36rem);height:min(64svh,36rem);width:auto;max-width:100%}
.phero__poster{border-radius:var(--radius-sm);overflow:hidden}
.phero__poster img{display:block;width:100%;height:auto;max-height:68svh;object-fit:contain;background:var(--night)}
.figures--2{grid-template-columns:repeat(2,1fr);max-width:52rem}
.stack__media{display:block}
.stack__card:hover .stack__title a{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* ============================================================
   ARTICLES — détails du corps et composants interactifs
   ============================================================ */
.prose>h2[data-n]::before{content:attr(data-n);display:block;margin-bottom:0.7em;font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);color:var(--grenadine-600);font-variant-numeric:tabular-nums}
.prose .note{font-size:var(--text-small);line-height:1.6;color:var(--text-muted);padding-left:var(--space-4);border-left:0;position:relative}
.prose .note::before{content:"";position:absolute;left:0;top:0.55em;width:6px;height:6px;border-radius:1px;background:var(--latte-300)}
.stats-row__d{margin-top:var(--space-3);font-size:var(--text-small);line-height:1.55;color:var(--text-muted)}
.faq--prose{margin-top:1.4em}
.faq--prose summary{font-size:clamp(0.95rem,0.9rem + 0.3vw,1.1rem)}
.prose .widget p,.prose .callout p{max-width:none}
.chip--dark{border-color:color-mix(in oklch,var(--cream) 40%,transparent);color:var(--cream)}
.chip--dark:hover{border-color:var(--cream)}
.chip--dark[aria-pressed="true"]{background:var(--grenadine);border-color:var(--grenadine);color:var(--cream)}

/* Simulateur « 4 fois » */
.mult__rows{display:grid;gap:var(--space-5);margin-top:var(--space-6)}
.mult__row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab val" "rng rng" "det det";gap:var(--space-2) var(--space-4);align-items:baseline}
.mult__lab{grid-area:lab;font-weight:var(--weight-semibold);font-size:var(--text-small)}
.mult__val{grid-area:val;font-family:var(--font-display);font-weight:var(--weight-display);font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--beeswax)}
.mult__row .range{grid-area:rng}
.mult__det{grid-area:det;font-size:var(--text-micro);letter-spacing:0.04em;opacity:0.7;font-variant-numeric:tabular-nums}
.mult__res{margin-top:var(--space-6);padding-top:var(--space-5);border-top:var(--border-width) solid color-mix(in oklch,var(--cream) 24%,transparent)}
.mult__total{margin-top:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(2.75rem,2rem + 3vw,4.5rem);line-height:1;color:var(--grenadine);font-variant-numeric:tabular-nums}
.mult__line{margin-top:var(--space-3);font-variant-numeric:tabular-nums}
.mult__verdict{margin-top:var(--space-2);opacity:0.8}
.mult__note{margin-top:var(--space-5);font-size:var(--text-micro);line-height:1.55;opacity:0.65}
.range{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;margin:0}
.range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:color-mix(in oklch,var(--cream) 25%,transparent)}
.range::-moz-range-track{height:4px;border-radius:2px;background:color-mix(in oklch,var(--cream) 25%,transparent)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:var(--radius-xs);background:var(--grenadine);border:0}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:var(--radius-xs);background:var(--grenadine);border:0}
.range:focus-visible{outline:2px solid var(--focus-ring,var(--beeswax));outline-offset:4px;border-radius:var(--radius-xs)}

/* Onglets : leviers, plaintes */
.lev__axe{display:flex;align-items:center;gap:var(--space-3);font-weight:var(--weight-semibold)}
.lev__sq{width:10px;height:10px;border-radius:2px;background:var(--grenadine);flex:none}
.lev__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-5)}
.lev__grid>div{padding:var(--space-5);border-radius:var(--radius-sm);background:var(--cream);border:var(--border-width) solid var(--border-hairline)}
.lev__grid .vpd-label{display:block;margin-bottom:var(--space-3)}
.lev__grid p{font-size:var(--text-small);line-height:1.6}
.lev__grid .lev__effet{background:var(--brume);border-color:transparent;color:var(--marine-900)}
.pp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.pp .vpd-label{display:block;margin-bottom:var(--space-3)}
.pp__q{margin:0}
.pp__q p{font-size:var(--text-lead);line-height:1.5;font-weight:var(--weight-medium)}
.pp__post{border-radius:var(--radius-sm);overflow:hidden;border:var(--border-width) solid var(--border-hairline);background:var(--cream)}
.pp__img{margin:0;padding:var(--space-6) var(--space-5);background:var(--marine-800);color:var(--cream);font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:1.05rem;line-height:1.2}
.pp__cap{margin:0;padding:var(--space-4) var(--space-5);font-size:var(--text-small)}
.pp__why{grid-column:1 / -1;padding-top:var(--space-4);border-top:var(--border-width) solid var(--border-hairline)}

/* Tableau de bord de démonstration (règles DASHBOARD.md) */
.dash__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4)}
.dash__periods{display:flex;gap:var(--space-2)}
.dash__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.kpi{padding-top:var(--space-3);border-top:var(--border-width) solid color-mix(in oklch,var(--cream) 30%,transparent);display:grid;gap:var(--space-2)}
.kpi__l{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.7}
.kpi__n{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);line-height:1;font-variant-numeric:tabular-nums}
.kpi__n small{font-size:0.5em;opacity:0.6;margin-left:0.15em}
.dash__chart{display:flex;align-items:flex-end;gap:6px;height:9rem;margin-top:var(--space-6);padding-bottom:1px;border-bottom:var(--border-width) solid color-mix(in oklch,var(--cream) 30%,transparent)}
.dash__bar{flex:1;height:100%;border-radius:2px 2px 0 0;background:var(--latte-300);transform:scaleY(var(--h,0));transform-origin:50% 100%}
.dash__bar.is-now{background:var(--grenadine)}
.dash__cap{margin-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-micro);letter-spacing:0.04em;opacity:0.75}
.dash__key{display:inline-flex;align-items:center;gap:var(--space-2)}
.dash__key i{width:8px;height:8px;border-radius:2px;background:var(--grenadine)}

/* Maquettes : résultat de recherche, publication */
.serp__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:0.75rem 1rem;border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--cream);font-size:var(--text-small)}
.serp__loc{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2);opacity:0.7}
.serp__r{margin-top:var(--space-4);padding:var(--space-5);border-radius:var(--radius-sm);background:var(--cream);border:var(--border-width) solid var(--border-hairline)}
.serp__st{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.serp__st::before{content:"";width:8px;height:8px;border-radius:2px}
.serp__r--pos .serp__st::before{background:var(--darlington-700)}
.serp__r--neg .serp__st::before{background:var(--grenadine)}
.serp__r--neg{opacity:0.72}
.serp__t{margin-top:var(--space-3);font-weight:var(--weight-semibold);color:var(--marine-600);font-size:1.0625rem}
.serp__m{margin-top:var(--space-1);font-size:var(--text-micro);letter-spacing:0.02em;color:var(--darlington-700)}
.serp__r--neg .serp__m{color:var(--grenadine-700)}
.serp__s{margin-top:var(--space-2);font-size:var(--text-small);line-height:1.55}
.post-mock__card{max-width:32rem;padding:var(--space-5);border-radius:var(--radius-sm);background:var(--cream);border:var(--border-width) solid var(--border-hairline);display:grid;gap:var(--space-3)}
.post-mock__card p{font-size:var(--text-small);line-height:1.6}
.post-mock__head{display:flex;align-items:center;gap:var(--space-3)}
.post-mock__head b{display:block;font-size:var(--text-small)}
.post-mock__head small{display:block;font-size:var(--text-micro);opacity:0.65}
.post-mock__av{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--grenadine);color:var(--cream);display:grid;place-items:center;font-weight:var(--weight-semibold);font-size:var(--text-small)}
.post-mock__img{padding:var(--space-7) var(--space-5);border-radius:var(--radius-sm);background:var(--brume);color:var(--marine-900);font-size:var(--text-small);text-align:center}
.post-mock__tags{color:var(--marine-600)}
.post-mock__eng{font-size:var(--text-micro)!important;opacity:0.7;padding-top:var(--space-3);border-top:var(--border-width) solid var(--border-hairline)}
@media (max-width:760px){
  .lev__grid,.pp,.dash__kpis{grid-template-columns:1fr}
  .dash__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Blog : photo du héros, titres en span, mots-clés */
.phero__photo{border-radius:var(--radius-sm);overflow:hidden;background:var(--marine-800)}
.phero__photo img{display:block;width:100%;height:auto;transform:scale(1.08);filter:grayscale(100%);transition:filter var(--duration-4) var(--ease-out)}
.phero__photo:hover img{filter:none}
.h-like{display:block}
.art-tags{margin-top:var(--space-8);display:grid;gap:var(--space-3)}
.art-tags .tags li{border-color:var(--border-hairline)}
.prose .art-tags ul,.prose .author{margin-top:0}
.prose>.author{margin-top:var(--space-7)}
.prose .tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.prose .tags li{padding:0.4rem 0.7rem}
.prose .tags li::before{display:none}
.prose>.faq,.prose>.widget,.prose>.stats-row,.prose>.tbl-wrap,.prose>.steps,.prose>.callout{margin-top:1.8em}

.phero--article{min-height:min(66vh,38rem);min-height:min(66svh,38rem)}
.faq--prose summary{font-family:var(--font-sans);text-transform:none;font-weight:var(--weight-semibold);letter-spacing:0;line-height:1.4}
.read__main{min-width:0}
.read__main .art-hero{margin:0 0 var(--space-8)}
.read__main .art-hero img{display:block;width:100%;height:auto}

/* Contact : photo en bichromie grenadine (multiplication), carte en façade */
.phero__duo{border-radius:var(--radius-sm);overflow:hidden;background:var(--grenadine)}
.phero__duo img{display:block;width:100%;height:auto;filter:grayscale(100%) contrast(1.12);mix-blend-mode:multiply}
.map-facade .facade{color:var(--cream)}
.map-facade .facade:hover{background:var(--marine-700)}
.map-facade .rnmap .rn-lab{font-size:15px}
/* Soumission : groupe de choix en erreur, colonne de droite */
[data-need-one][data-invalid] .field__err{display:block}
[data-need-one][data-invalid] .choice{border-color:var(--grenadine-600)}
.soum-aside .coords{margin-top:var(--space-7)}
.stepper .form__note{margin-top:var(--space-2)}
.phero__aside em{font-style:normal;color:var(--accent)}
.choice{align-content:start}
.map-facade .facade__label{left:0;right:0;bottom:0;padding:0.65rem 0.9rem;background:var(--marine-900);color:var(--cream)}
.map-facade .facade:hover .facade__label{background:var(--grenadine)}

/* ============================================================
   PAGES LOCALES — villes, hub Rive-Nord, SEO Laval
   ============================================================ */
.phero__media .rnmap{max-height:64svh;margin-inline:auto}
.figures--stack{grid-template-columns:1fr;gap:var(--space-5);margin-top:var(--space-8);max-width:24rem}
.figures--stack .figures__n{font-size:clamp(2rem,1.4rem + 2.4vw,3.25rem)}
.city-photo{border-radius:var(--radius-sm);overflow:hidden;background:var(--latte-900)}
.city-photo img{display:block;width:100%;height:auto;transform:scale(1.08);filter:grayscale(100%);transition:filter var(--duration-4) var(--ease-out)}
.city-photo:hover img{filter:none}
.chip-static{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sm);padding:0.5rem 0.875rem}
.numlist{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid}
.numlist--cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap)}
.numlist li{display:grid;grid-template-columns:3.5rem 1fr;gap:var(--space-4);padding:var(--space-6) 0;border-top:var(--border-width) solid var(--rule)}
.numlist__n{font-family:var(--font-display);font-weight:var(--weight-display);font-size:1.5rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.numlist h3{font-size:var(--text-h4);max-width:26ch}
.numlist p{margin-top:var(--space-3);line-height:1.65;max-width:52ch}
.citycards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--grid-gap)}
.citycards a{display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-4);align-items:start;padding:var(--space-5) 0;border-top:var(--border-width) solid var(--rule);text-decoration:none}
.citycards__t{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--text-h4);line-height:1.1}
.citycards__d{grid-column:1;font-size:var(--text-small);line-height:1.55;opacity:0.8}
.citycards .ico{grid-row:1;grid-column:2;margin-top:0.3em;transition:transform var(--duration-1) var(--ease-out)}
.citycards a:hover .citycards__t{color:var(--beeswax)}
.citycards a:hover .ico{transform:translateX(3px)}
.prose--flush{max-width:none}
.prose--flush>*:first-child{margin-top:0}
.ground--brume .prose,.ground--brume .prose a{color:var(--marine-900)}
@media (max-width:1000px){
  .numlist--cols,.citycards{grid-template-columns:1fr}
}

/* À propos : le champ, le carré qui pense autrement */
.about-field{aspect-ratio:14/10;border-radius:var(--radius-sm);overflow:hidden;background:var(--night);border:var(--border-width) solid color-mix(in oklch,var(--cream) 14%,transparent)}
.about-field__svg{display:block;width:100%;height:100%}
.about-field__svg .fld{fill:var(--cream)}
.about-field__svg .is-brand{fill:var(--grenadine)}
.tags--dark li{border-color:color-mix(in oklch,var(--cream) 30%,transparent)}
.about__prose .tags{margin-top:var(--space-2)}
.lost__field .fld{fill:var(--cream)}
/* Tableaux : sur téléphone, ils défilent dans leur cadre plutôt que d'écraser les colonnes. */
@media (max-width:700px){
  .tbl{min-width:34rem}
  .tbl-wrap{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
}
.plan-secs li{align-content:start}

/* Grille des services, version simple : numéro, titre, expertises. Aucune illustration. */
.svc-grid{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));grid-template-areas:none;gap:var(--grid-gap);margin-top:var(--space-8)}
.svc-grid>.svc-tile{grid-area:auto}
.svc-tile{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-7);min-height:15rem;padding:var(--space-5) var(--space-5) var(--space-6)}
.svc-tile__top{display:flex;justify-content:space-between;align-items:center}
.svc-tile__num b{font-size:var(--text-small)}
.svc-tile__top .ico{width:1.25rem;height:1.25rem;transition:transform var(--duration-1) var(--ease-out)}
.svc-tile:hover .svc-tile__top .ico{transform:translateX(3px)}
.svc-tile__bottom{display:grid;gap:var(--space-3)}
.svc-tile__title{font-size:clamp(1.15rem,0.95rem + 0.7vw,1.5rem);line-height:1.1}
.svc-tile .svc-tile__tags{display:block;margin:0;font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:0.04em;text-transform:uppercase;opacity:0.7;line-height:1.5}
/* Cinq services : trois tuiles puis deux plus larges, les titres longs respirent. */
.svc-grid--n5{grid-template-columns:repeat(6,minmax(0,1fr))}
.svc-grid--n5>.svc-tile{grid-column:span 2}
.svc-grid--n5>.svc-tile:nth-child(n+4){grid-column:span 3}
@media (max-width:1100px){.svc-grid,.svc-grid--n5{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-grid--n5>.svc-tile,.svc-grid--n5>.svc-tile:nth-child(n+4){grid-column:auto}}
@media (max-width:700px){.svc-grid,.svc-grid--n5{grid-template-columns:1fr}.svc-tile{min-height:9rem;gap:var(--space-5)}}

/* Entre les deux : la vignette du monde revient, sans description ni libellé de bouton. */
.svc-tile{gap:var(--space-5)}
.svc-tile .svc-tile__art{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding-block:var(--space-2)}
.svc-tile .svc-tile__art svg{display:block;width:100%;height:auto;max-height:10.5rem}
.svc-grid--n5>.svc-tile:nth-child(n+4) .svc-tile__art svg{max-height:12rem}
@media (max-width:700px){.svc-tile .svc-tile__art svg{max-height:9rem}}

/* Sites web livrés : grille symétrique. Toutes les captures au même ratio 4:3 ; les deux captures
   en 3:2 perdent environ 5 % de décor de chaque côté, le portable reste entier et centré. */
.wall{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8) var(--grid-gap);align-items:start}
.wall li{margin:0}
.shot__media{aspect-ratio:4/3}
.shot__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.shot__cap{grid-template-columns:1fr;gap:var(--space-2)}
.shot__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1000px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.wall{grid-template-columns:1fr}}
.wall .shot__name{font-size:clamp(0.95rem,0.6rem + 0.6vw,1.2rem)}

/* ============================================================
   ÉTUDES DE CAS — chaque projet a ses couleurs
   ============================================================ */
.phero--azur{--ph-bg:var(--azur);--accent:var(--beeswax);--focus-ring:var(--beeswax)}
.phero--beeswax{--ph-bg:var(--beeswax);--ph-fg:var(--ink);--accent:var(--grenadine-700);--rule:color-mix(in oklch,var(--ink) 22%,transparent)}
.ground--azur{background:var(--azur);color:var(--cream);--accent:var(--beeswax);--rule:color-mix(in oklch,var(--cream) 30%,transparent);--focus-ring:var(--beeswax)}
.stack__card--azur{--c-bg:var(--azur);--c-fg:var(--cream);--accent:var(--beeswax);--rule:color-mix(in oklch,var(--cream) 30%,transparent);--curtain:var(--azur);--focus-ring:var(--beeswax)}
.stack__card--beeswax{--c-bg:var(--beeswax);--c-fg:var(--ink);--accent:var(--grenadine-700);--rule:color-mix(in oklch,var(--ink) 22%,transparent);--curtain:var(--beeswax)}

/* Fiche en bande de couleur : les chiffres en grand, les faits, les services en étiquettes */
.pband{padding-block:var(--space-9)}
.pband__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--space-8);align-items:end}
.pband__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.pband__n{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:clamp(3rem,1.8rem + 5vw,6.5rem);line-height:0.9;letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums;margin:0}
.pband__l{margin-top:var(--space-3);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.8;max-width:20ch}
.pband__facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);padding-top:var(--space-4);border-top:var(--border-width-thick) solid currentColor}
.pband__facts dt{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.7}
.pband__facts dd{margin:var(--space-2) 0 0;font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.pband__facts a{text-decoration:underline;text-underline-offset:3px}
.pband__svc{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pband__svc li{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:0.5rem 0.8rem;border-radius:var(--radius-sm);background:color-mix(in oklch,currentColor 12%,transparent)}

/* Le récit du projet : un rail qui se remplit, des étapes 1, 2, 3, le visuel collant qui change */
.pstory__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-9);align-items:start;margin-top:var(--space-8)}
.pstory__steps{position:relative;padding-left:5.5rem}
.pstory__rail{position:absolute;left:1.55rem;top:1.6rem;bottom:1.6rem;width:3px;border-radius:2px;background:var(--border-hairline);overflow:hidden}
.pstory__rail i{position:absolute;inset:0;background:var(--p-accent,var(--grenadine));transform:scaleY(var(--p,0));transform-origin:50% 0}
.pstep{position:relative;padding-block:var(--space-4) var(--space-10)}
.pstep:last-child{padding-bottom:var(--space-4)}
.pstep__n{position:absolute;left:-5.5rem;top:var(--space-3);width:3.25rem;height:3.25rem;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--cream);border:var(--border-width-thick) solid var(--p-accent,var(--grenadine));color:var(--p-accent,var(--grenadine));
  font-family:var(--font-display);font-weight:var(--weight-display);font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums;transition:background-color var(--duration-2) var(--ease-out),color var(--duration-2) var(--ease-out)}
.pstep.is-on .pstep__n{background:var(--p-accent,var(--grenadine));color:var(--cream)}
.pstep h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.5rem);line-height:1;max-width:14ch;text-wrap:balance}
.pstep h2 em{color:var(--p-accent,var(--grenadine))}
.pstep p{margin-top:var(--space-5);font-size:var(--text-lead);line-height:1.6;max-width:48ch}
.pstep__img{display:none}
.pstory__media{position:sticky;top:7rem}
/* Le récit garde le fond de la page : aucun panneau de couleur derrière le visuel. */
.pstory__frame{position:relative;aspect-ratio:4/5;overflow:hidden}
.pstory__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity var(--duration-3) var(--ease-out)}
.pstory__frame img.is-on{opacity:1}
.pstory__cap{margin-top:var(--space-4);display:flex;justify-content:space-between;gap:var(--space-4);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.pstory__cap b{color:var(--p-accent,var(--grenadine));font-weight:var(--weight-semibold)}
@media (max-width:1000px){
  .pband__grid,.pstory__grid{grid-template-columns:1fr}
  .pstory__media{display:none}
  .pstep__img{display:block;margin:var(--space-6) 0 0;border-radius:var(--radius-sm);overflow:hidden;}
  .pstep__img img{display:block;width:100%;height:auto;max-height:26rem;object-fit:contain}
  .pstep{padding-bottom:var(--space-9)}
}
@media (max-width:600px){
  .pstory__steps{padding-left:3.75rem}
  .pstep__n{left:-3.75rem;width:2.5rem;height:2.5rem;font-size:1.15rem}
  .pstory__rail{left:1.2rem}
  .pband__facts{grid-template-columns:1fr 1fr}
}

.pband__stats>div{min-width:0}
.pband__n{font-size:clamp(3rem,1.6rem + 4.2vw,6rem)}
.pband__n--word{font-size:clamp(1.75rem,1.1rem + 2.2vw,3.25rem);padding-top:0.35em}

/* Bande grenadine : un formulaire simple, rien d'autre */
.band--form{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.band--form h2{max-width:11ch}
.band--form .form__foot{justify-content:flex-end}
.ground--grenadine .form--on-dark .field__ctl{border-color:transparent}
.ground--grenadine .form--on-dark .field__ctl:hover{border-color:var(--night)}
.ground--grenadine .form--on-dark .field[data-invalid] .field__err{color:var(--cream)}
.ground--grenadine .form--on-dark .field[data-invalid] .field__ctl{border-color:var(--night)}
.ground--grenadine .form-done__mark{background:var(--night)}
@media (max-width:1000px){.band--form{grid-template-columns:1fr}}

/* ============================================================
   Plus compact : les héros ne prennent que la place de leur contenu
   ============================================================ */
.phero,.phero--short,.phero--article{min-height:0;padding:calc(var(--nav-h) + var(--space-8)) 0 var(--space-7)}
.phero__wide{margin-top:calc(-1 * var(--space-2))}
.phero__wide .video-frame video{width:100%}
/* Travaux récents : trois cartes de couleur, même format d'image, sur un écran */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);margin-top:var(--space-8)}
.pcard{display:flex;flex-direction:column;border-radius:var(--radius-sm);overflow:hidden;text-decoration:none;background:var(--c-bg);color:var(--c-fg);transition:background-color var(--duration-1) var(--ease-out)}
.pcard--marine{--c-bg:var(--marine-800);--c-fg:var(--cream);--c-acc:var(--beeswax);--c-h:var(--marine-700)}
.pcard--azur{--c-bg:var(--azur);--c-fg:var(--cream);--c-acc:var(--beeswax);--c-h:var(--marine-600)}
.pcard--beeswax{--c-bg:var(--beeswax);--c-fg:var(--ink);--c-acc:var(--grenadine-700);--c-h:var(--beeswax-500)}
.pcard:hover{background:var(--c-h)}
.pcard__media{display:block;aspect-ratio:1104/748}
.pcard__media img{display:block;width:100%;height:100%;object-fit:cover}
.pcard__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-6);flex:1}
.pcard__num{font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.85}
.pcard__num b{color:var(--c-acc);font-weight:var(--weight-semibold)}
.pcard__title{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--text-h3);line-height:1.05;letter-spacing:var(--tracking-heading)}
.pcard__sub{font-size:var(--text-small);line-height:1.55;opacity:0.88}
.pcard__foot{margin-top:auto;padding-top:var(--space-4);border-top:var(--border-width) solid color-mix(in oklch,currentColor 25%,transparent);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase}
.pcard__foot .go{font-family:var(--font-sans);text-transform:none;letter-spacing:0;font-size:var(--text-small)}
.pcard:hover .pcard__title{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.pcard:hover .go .ico{transform:translateX(3px)}
@media (max-width:1000px){.pcards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pcards{grid-template-columns:1fr}}

/* Travaux récents, version épurée : l'image, le nom, la portée. */
.pcards{gap:var(--space-7) var(--grid-gap);margin-top:var(--space-7)}
.pcard{background:none;color:inherit;border-radius:0;overflow:visible;gap:0}
.pcard:hover{background:none}
.pcard__media{border-radius:var(--radius-sm);overflow:hidden}
.pcard__row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}
.pcard__row .ico{width:1.1rem;height:1.1rem;flex:none;transition:transform var(--duration-1) var(--ease-out)}
.pcard__title{font-size:var(--text-h4)}
.pcard__tags{margin-top:var(--space-2);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:0.6}
.pcard:hover .pcard__row .ico{transform:translateX(3px)}

/* Projets en couleur : beeswax, marine, brume, puis la bande grenadine */
.ground--beeswax .pcard__tags{opacity:0.75}
.ground--marine .shot__media{background:var(--marine-700)}
.ground--marine .shot__url{opacity:0.8}
.ground--brume .stars{color:var(--grenadine)}
.ground--brume .quote{border-top-color:var(--marine-900)}

/* ---------- Nos réalisations : le reel (projets.html) ----------
   Une affiche par projet : visuel entier, texte, et le nom du client ajusté à la largeur.
   Sans JS, en mouvement réduit ou sur petit écran : les affiches s'empilent. Le script ajoute
   .is-h : la scène colle à l'écran et chaque projet glisse de la droite par-dessus le précédent. */
.ground--beeswax .vpd-btn--primary{background:var(--night);color:var(--cream)}
.ground--beeswax .vpd-btn--primary:hover{background:var(--latte-900)}
.ground--azur .vpd-btn--on-dark.vpd-btn--primary:hover,.ground--marine .vpd-btn--on-dark.vpd-btn--primary:hover{background:var(--beeswax)}
.rl{--rl-tmin:18.75rem;--rl-gap:var(--space-8);position:relative}
.rl-panel.ground{padding:0;overflow:hidden}
.rl-panel.ground--beeswax{--focus-ring:var(--ink)}
.rl-chrome__in{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5);padding-top:calc(var(--nav-h) + var(--space-6))}
.rl-panel+.rl-panel .rl-chrome{display:none}
.rl-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-5);row-gap:var(--space-2);min-width:0}
.rl-h1{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:clamp(1.5rem,1rem + 1.4vw,2.25rem);line-height:1;letter-spacing:var(--tracking-display);margin:0}
.rl-sub{margin:0;font-size:var(--text-small);opacity:0.78}
.rl-hud{display:none;align-items:center;gap:var(--space-4);flex:none;font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-label);letter-spacing:var(--tracking-label);font-variant-numeric:tabular-nums}
.rl-hud__sq{width:0.625rem;height:0.625rem;background:var(--grenadine)}
.rl-hud__n b{font-weight:var(--weight-semibold)}
.rl-hud__segs{display:flex;gap:6px}
.rl-hud__segs i{display:block;width:34px;height:2px;background:color-mix(in oklch,currentColor 28%,transparent)}
.rl-hud__segs i.is-on{background:currentColor}
.rl-poster{display:flex;flex-direction:column;padding-block:var(--space-8) var(--space-9)}
.rl-panel:first-child .rl-poster{padding-top:var(--space-7)}
.rl-idx{color:currentColor;opacity:0.7;margin:0 0 var(--space-3)}
.rl-name{font-size:clamp(2.75rem,1rem + 8vw,9rem);line-height:0.84;letter-spacing:-0.02em;margin:0}
.rl-name__vis{display:inline-block;white-space:nowrap}
.rl-word{display:inline-block;overflow:hidden;vertical-align:top}
.rl-word>span{display:inline-block}
.rl-body{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-6)}
.rl-frame{display:block;position:relative;aspect-ratio:1104/748;border-radius:var(--radius-sm);overflow:hidden;background:color-mix(in oklch,currentColor 10%,transparent)}
.rl-frame img{position:absolute;inset:0;width:100%;height:100%;display:block}
.rl-curtain{position:absolute;inset:0;background:var(--rl-c);transform-origin:0 50%;transform:scaleX(0)}
.rl-txt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.rl-txt__top{display:flex;flex-direction:column;gap:var(--space-4)}
.rl-txt__bot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);width:100%}
.rl-svc{list-style:none;margin:0;padding:0;width:100%;max-width:24rem;font-size:var(--text-small);line-height:1.35}
.rl-svc li{padding-block:0.6rem;border-top:var(--border-width) solid color-mix(in oklch,currentColor 26%,transparent)}
.rl-svc li:last-child{border-bottom:var(--border-width) solid color-mix(in oklch,currentColor 26%,transparent)}
.rl-tags{color:currentColor;opacity:0.72;margin:0}
.rl-line{margin:0;font-size:var(--text-lead);line-height:1.45;max-width:26ch}
@media (max-width:899px){.rl-word{display:block;width:max-content}}
@media (min-width:900px){.rl:not(.is-h) .rl-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(16rem,1fr);gap:var(--rl-gap);align-items:end}}
/* Avant le script : la première affiche attend son entrée. */
.js-intro .rl-panel:first-child .rl-word>span{transform:translateY(112%)}
.js-intro .rl-panel:first-child .rl-curtain{transform:scaleX(1)}
.js-intro .rl-panel:first-child [data-rl-part]{opacity:0}
/* Empilé, avec mouvement : chaque affiche se révèle une fois, à l'entrée. */
.rl.rl-io:not(.is-h) .rl-word>span{transform:translateY(112%);transition:transform 0.9s cubic-bezier(0.16,1,0.3,1) calc(var(--k,0) * 32ms)}
.rl.rl-io:not(.is-h) .rl-curtain{transform:scaleX(1);transition:transform 1.1s cubic-bezier(0.65,0,0.35,1) 0.1s}
.rl.rl-io:not(.is-h) [data-rl-part],.rl.rl-io:not(.is-h) .rl-idx{opacity:0;transform:translateY(20px);transition:opacity 0.7s var(--ease-out) calc(0.3s + var(--pk,0) * 60ms),transform 0.9s cubic-bezier(0.16,1,0.3,1) calc(0.3s + var(--pk,0) * 60ms)}
.rl.rl-io:not(.is-h) .is-in .rl-word>span,.rl.rl-io:not(.is-h) .is-in [data-rl-part],.rl.rl-io:not(.is-h) .is-in .rl-idx{transform:none;opacity:1}
.rl.rl-io:not(.is-h) .is-in .rl-curtain{transform:scaleX(0)}
/* Le reel : la scène colle, les affiches se recouvrent. */
.rl.is-h{height:calc(var(--n) * 100vh + 60vh);height:calc(var(--n) * 100svh + 60svh)}
.rl.is-h .rl-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.rl.is-h .rl-panel{position:absolute;inset:0;will-change:transform}
.rl.is-h .rl-panel+.rl-panel .rl-chrome{display:block}
.rl.is-h .rl-chrome{position:absolute;inset:0;z-index:2;pointer-events:none}
.rl.is-h .rl-chrome__in{padding-top:calc(var(--nav-h) + var(--space-5))}
.rl.is-h .rl-hud{display:flex}
.rl.is-h .rl-poster,.rl.is-h .rl-panel:first-child .rl-poster{height:100%;padding-block:calc(var(--nav-h) + 5.5rem) var(--space-6)}
.rl.is-h .rl-idx{display:none}
.rl.is-h .rl-name{order:2;flex:none;margin-top:var(--space-5)}
/* Le visuel part du bord gauche de l'écran et prend toute la hauteur libre ; le texte occupe le reste,
   tenu en haut par l'énoncé et en bas par le bouton. Largeurs en unités de conteneur. */
.rl.is-h .rl-panel{container-type:inline-size}
.rl.is-h .rl-body{order:1;flex:1;min-height:0;display:block;position:relative;container-type:size;margin:0 0 0 calc((min(100cqw,var(--content-max)) - 100cqw) / 2 - var(--gutter))}
.rl.is-h .rl-frame{--fw:min(calc(100cqh * 1104 / 748),calc(100cqw - var(--rl-tmin) - var(--rl-gap)));position:absolute;left:0;bottom:0;width:var(--fw);border-radius:0 var(--radius-sm) var(--radius-sm) 0;will-change:transform}
.rl.is-h .rl-txt{position:absolute;right:0;bottom:0;top:max(0px,calc(100cqh - (100cqw - var(--rl-tmin) - var(--rl-gap)) * 748 / 1104));left:calc(min(calc(100cqh * 1104 / 748),calc(100cqw - var(--rl-tmin) - var(--rl-gap))) + var(--rl-gap));justify-content:space-between}
.rl.is-h .rl-line{font-size:clamp(1.25rem,min(0.7rem + 1.15vw,3.1vh),2.125rem);line-height:1.2;letter-spacing:-0.012em;max-width:19ch}
@media (max-height:900px){.rl.is-h .rl-svc li:nth-child(n+5){display:none}.rl.is-h .rl-svc li:nth-child(4){border-bottom:var(--border-width) solid color-mix(in oklch,currentColor 26%,transparent)}}
@media (max-height:790px){.rl.is-h .rl-svc{display:none}}
.ground--night .shot__media{background:color-mix(in oklch,var(--cream) 7%,var(--night))}

/* Bloc « imgs » des articles : deux photos verticales côte à côte, une seule légende. */
.prose .figs__row{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:var(--space-3)}
.prose .figs__row img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.phero__byline{margin:var(--space-5) 0 0;font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-small);color:currentColor;opacity:0.72}

/* ============================================================
   V POUR DESIGN · ÉDITION LÉGÈRE (2026-09-28)
   Même palette, autre dosage. Voir DESIGN-gabarits-vpd.md, « Légèreté ».
   - Titres en Poppins Light, casse normale, interlettrage serré.
   - Les grands aplats passent aux neutres (crème, pierre, charbon), aux
     profonds (marine, sauge) et aux pâles (brume, pierre, rosé). Aucun beige. Les teintes
     vives restent en petites touches ; une seule note saturée par page :
     la bande grenadine du formulaire.
   - Plus d'air, mouvement plus doux (voir vpd.js et app.js).
   Chargée en dernier par l'accueil et par les gabarits.
   ============================================================ */
:root{
  --latte-200:oklch(90% 0.002 90);
  --latte-800:oklch(26% 0.001 90);
  --darlington-800:oklch(43% 0.035 148);
  --stone:oklch(93.5% 0.004 85);
  --charcoal:var(--latte-800);
  --night:var(--charcoal); /* les grands fonds sombres passent au charbon */
  --blush:var(--grenadine-100);
  --sage:var(--darlington-800);

  --weight-display:300;
  --weight-title:400;
  --tracking-display:-0.03em;
  --tracking-heading:-0.02em;
  --tracking-label:0.01em;
  --leading-display:1.05;
  --leading-heading:1.12;
  --leading-body:1.65;
  --text-display:clamp(2.75rem,1.35rem + 5vw,6rem);
  --text-h1:clamp(2.375rem,1.3rem + 3.6vw,4.75rem);
  --text-h2:clamp(1.875rem,1.25rem + 2.2vw,3.25rem);
  --text-h3:clamp(1.375rem,1.1rem + 0.9vw,1.875rem);
  --text-h4:clamp(1.1875rem,1.05rem + 0.5vw,1.4375rem);
  --text-lead:clamp(1.1875rem,1rem + 0.6vw,1.5625rem);
  --text-body-size:clamp(1rem,0.95rem + 0.2vw,1.125rem);
  --text-label:0.875rem;
  --text-micro:0.8125rem;

  --section-y:clamp(5.5rem,3rem + 8vw,11rem);
  --grid-gap:clamp(1.25rem,0.6rem + 2vw,2.5rem);

  --ease-out:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-soft:cubic-bezier(0.33,1,0.68,1);
}

/* --- Typographie : légère, en casse normale --- */
body{font-weight:400}
h1,h2,h3,h4{font-weight:var(--weight-display);text-transform:none;letter-spacing:var(--tracking-display);line-height:var(--leading-display)}
h2{line-height:var(--leading-heading)}
h3,h4{font-weight:var(--weight-title);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading)}
h1,h2,h3,h4,.vpd-label,.vpd-badge,.vpd-case__client,.vpd-case__title,.vpd-case__meta dt,.vpd-case__meta dd,.vpd-footer__coltitle,.marquee__item,.figures__n,.figures__l,.contact__coords dt,.cities a,.menu__links a,.phero__aside,.phero__meta dt,.phero__meta dd,.crumbs ol,.svc-tile__title,.svc-tile__tags,.deliver li,.hud,.stmt__word>span,.stmt__mini,.words,.stack__num,.meta-dl dt,.meta-dl dd,.shot__name,.fiche dt,.tags li,.gallery figcaption,.facade__label,.next__title,.feature__title,.cat,.chip,.post__title,.card-post__title,.prose blockquote cite,.callout__title,.tbl caption,.tbl th,.stats-row span,.widget__title,.tabs__list [role="tab"],.faq summary,.field__label,.form-done__title,.coords dt,.stepper__step legend,.quote figcaption span,.cookie__title,.plan__name,.svc-index a,.splitimg__t,.pp__img,.kpi__l,.serp__st,.chip-static,.citycards__t,.svc-tile .svc-tile__tags,.pband__n,.pband__l,.pband__facts dt,.pband__svc li,.pstory__cap,.pcard__num,.pcard__title,.pcard__foot,.pcard__tags,.rl-h1{text-transform:none}
.svc-tile__title,.shot__name,.post__title,.card-post__title,.callout__title,.widget__title,.faq summary,.form-done__title,.stepper__step legend,.cookie__title,.plan__name,.svc-index a,.splitimg__t,.citycards__t,.vpd-case__title,.stmt__mini,.stats-row b,.kpi__n,.mult__val,.pp__img{font-weight:var(--weight-title)}
.vpd-label{font-weight:var(--weight-medium);font-size:var(--text-label);letter-spacing:var(--tracking-label)}
.vpd-btn{font-weight:var(--weight-medium);letter-spacing:0}
.vpd-btn--lg{padding:1.05rem 1.75rem}
strong,b{font-weight:var(--weight-semibold)}

/* --- Fonds : les grands aplats en neutres, profonds ou pâles --- */
.ground--night{--accent:var(--grenadine-300);--rule:color-mix(in oklch,var(--cream) 18%,transparent)}
.ground--marine{--accent:var(--beeswax-300)}
.ground--latte{background:var(--stone)}
.ground--blush{background:var(--blush);color:var(--ink);--accent:var(--grenadine-600);--rule:color-mix(in oklch,var(--grenadine-900) 16%,transparent)}
.ground--sage{background:var(--sage);color:var(--cream);--accent:var(--beeswax-300);--rule:color-mix(in oklch,var(--cream) 22%,transparent);--focus-ring:var(--beeswax)}
.vpd-footer a,.vpd-footer [data-phone] a{color:inherit}

/* Chapitre 5 (présence 360, SEO) : la sauge remplace l'aplat grenadine ; le grenadine reste au bouton et au carré. */
.story[data-ch="5"]{--story-bg:var(--sage);--story-fg:var(--cream);--story-accent:var(--beeswax-300);--story-rule:color-mix(in oklch,var(--cream) 24%,transparent);--focus-ring:var(--beeswax)}
.story[data-ch="5"] .vpd-btn--primary{background:var(--grenadine);color:var(--cream)}
.story[data-ch="5"] .vpd-btn--primary:hover{background:var(--grenadine-600)}
.svc-tile--w4{--t-bg-h:oklch(22% 0.001 90)}
.svc-tile--w5{--t-bg:var(--sage);--t-bg-h:oklch(38% 0.035 148);--t-accent:var(--beeswax-300);--focus-ring:var(--beeswax)}

/* --- Images : un fondu, plus de rideau de couleur --- */
.curtain::after{display:none}
.js-intro .phero .curtain{opacity:0}

/* --- Phrase-choc : les mots s'allument en grenadine, sur la pierre --- */
.words{letter-spacing:-0.025em;line-height:1.12}
.ground--latte .words,.ground--cream .words{color:var(--grenadine-600)}

/* --- Reel des projets : nom léger, entrée en une ligne, visuel en fondu --- */
.rl-name{letter-spacing:-0.035em;line-height:1.08}
.rl-word{padding-block:0.02em 0.16em;margin-block:-0.02em -0.16em}
.rl-curtain{display:none}
.js-intro .rl-panel:first-child .rl-frame{opacity:0}
.rl.rl-io:not(.is-h) .rl-word>span{transition:transform 1s var(--ease-soft) 0.1s}
.rl.rl-io:not(.is-h) .rl-frame{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease-soft) 0.2s,transform 1.1s var(--ease-soft) 0.2s}
.rl.rl-io:not(.is-h) .is-in .rl-frame{opacity:1;transform:none}
.rl-hud__sq{background:var(--grenadine)}

/* --- Héros intérieurs : mêmes rôles de couleur --- */
.phero--night{--accent:var(--grenadine-300)}
.phero--marine{--accent:var(--beeswax-300)}
.phero--blush{--ph-bg:var(--blush);--ph-fg:var(--ink);--accent:var(--grenadine-600);--rule:color-mix(in oklch,var(--grenadine-900) 16%,transparent)}
.phero--latte{--ph-bg:var(--stone);--ph-fg:var(--ink);--accent:var(--grenadine-600);--rule:var(--border-hairline)}
.phero--sage{--ph-bg:var(--sage);--accent:var(--beeswax-300);--focus-ring:var(--beeswax);--rule:color-mix(in oklch,var(--cream) 22%,transparent)}

/* --- Nav : s'efface en descendant, revient en remontant. Le fil de lecture grenadine reste visible. --- */
.vpd-nav{transition:transform 0.5s var(--ease-soft),border-color var(--duration-1) var(--ease-out)}
.vpd-nav--away{transform:translateY(calc(-100% + 2px))}
@media (prefers-reduced-motion:reduce){.vpd-nav{transition:none}}

/* --- Simplicité : un titre se suffit, pas de méta décorative --- */
.head__title--solo{margin-top:0}
.head__kicker{color:currentColor;opacity:0.7;margin:0 0 var(--space-4)}
.svc-tile__top{justify-content:flex-end}
.head{padding-bottom:0}
.head::after{display:none}
.head>.vpd-label+.vpd-label{display:none}

/* ============================================================
   ATMOSPHÈRE ET INTERFACES DES MONDES (2026-09-29)
   Même traitement que l'accueil : une lumière et une ombre dans la teinte
   du monde, un grain fixe, des cartes flottantes à ombre douce.
   Exception assumée aux bans « dégradé, grain, texture, ombre » et au
   rayon unique : limitée aux mondes des services (récit, grille, héros).
   ============================================================ */
@property --atmo-hi{syntax:"<color>";inherits:true;initial-value:transparent}
@property --atmo-lo{syntax:"<color>";inherits:true;initial-value:transparent}
:root{
  --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 0.3'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-mult:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 0.55'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.7' intercept='0.55'/%3E%3CfeFuncG type='linear' slope='0.7' intercept='0.55'/%3E%3CfeFuncB type='linear' slope='0.7' intercept='0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* Tons par monde : 1 marine, 2 brume, 3 crème, 4 charbon, 5 sauge. */
.story,.svc-tile--w1{--hi:oklch(46% 0.075 225 / 0.55);--lo:oklch(19% 0.04 235 / 0.65)}
.story[data-ch="2"],.svc-tile--w2{--hi:oklch(98.5% 0.008 200 / 0.85);--lo:oklch(76% 0.05 228 / 0.5)}
.story[data-ch="3"],.svc-tile--w3{--hi:oklch(99.5% 0.003 90 / 0.9);--lo:oklch(88% 0.005 90 / 0.6)}
.story[data-ch="4"],.svc-tile--w4{--hi:oklch(39% 0.004 90 / 0.5);--lo:oklch(14% 0.004 60 / 0.65)}
.story[data-ch="5"],.svc-tile--w5{--hi:oklch(58% 0.055 150 / 0.55);--lo:oklch(28% 0.03 150 / 0.65)}

/* Récit des services : l'atmosphère porte le fond de la scène (le grain s'y mélange). */
.story{background-image:var(--grain-soft),var(--grain-mult);background-size:220px;background-blend-mode:soft-light,multiply}
.stage__atmo{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--story-bg);
  --atmo-hi:var(--hi);--atmo-lo:var(--lo);transition:background-color var(--duration-4) var(--ease-out),--atmo-hi 1.4s var(--ease-soft),--atmo-lo 1.4s var(--ease-soft)}
.stage__atmo::before{content:"";position:absolute;inset:-15%;will-change:transform;
  transform:translate3d(calc(var(--ax,0) * 1%),calc(var(--ay,0) * 1%),0);
  background:
    radial-gradient(46% 52% at 66% 36%,var(--atmo-hi) 0%,color-mix(in oklch,var(--atmo-hi) 42%,transparent) 50%,transparent 100%),
    radial-gradient(58% 55% at 4% 100%,var(--atmo-lo) 0%,color-mix(in oklch,var(--atmo-lo) 40%,transparent) 50%,transparent 100%)}
.stage__atmo>i{position:absolute;inset:0;background:var(--grain-mult) 0 0/220px;mix-blend-mode:multiply}
.stage__atmo::after{content:"";position:absolute;inset:0;background:var(--grain-soft) 0 0/220px;mix-blend-mode:soft-light}
@media (max-width:899px){
  .stage__atmo{top:0;left:0;right:0;bottom:auto;height:calc(var(--nav-h) + 44svh)}
  .stage__atmo::before{inset:0;background:
    radial-gradient(72% 56% at 64% 44%,var(--atmo-hi) 0%,color-mix(in oklch,var(--atmo-hi) 42%,transparent) 50%,transparent 100%),
    radial-gradient(70% 50% at 0% 0%,var(--atmo-lo) 0%,transparent 100%)}
  .story .stage__canvas{background:transparent}
}
@media (prefers-reduced-motion:reduce){.stage__atmo{transition:none}}

/* Grille des services : même lumière, même grain, dans chaque tuile. */
.svc-tile>*{position:relative;z-index:1}
.svc-tile::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 70% 30%,var(--hi) 0%,color-mix(in oklch,var(--hi) 40%,transparent) 50%,transparent 100%),
    radial-gradient(70% 70% at 0% 100%,var(--lo) 0%,transparent 100%)}
.svc-tile::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--grain-soft) 0 0/220px;mix-blend-mode:soft-light}
.svc-tile,.svc-tile:hover{background-image:var(--grain-mult);background-size:220px;background-blend-mode:multiply}

/* Interfaces des mondes : ombres douces, titres de carte, libellés en casse normale. */
.scene .sh-l{filter:url(#sh-l)} .scene .sh-d{filter:url(#sh-d)}
.scene .num{font-weight:500}
.scene .ttl{font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em}
.scene .t-s{font-family:var(--font-label);font-weight:600;font-size:11px}
.scene .s-mr{stroke:var(--marine)} .scene .f-sg{fill:var(--sage)} .scene .f-cl{fill:var(--cafe-latte)}

/* ============================================================
   V POUR DESIGN · PISTE 2 « RIVIÈRE » + SAUGE (2026-10-22)
   Image de marque, trois pistes (TEST-VPD/06_livrables/image-de-marque-trois-pistes),
   piste 2, avec la sauge ajoutée en note d'action. Voir DESIGN.md.
   - Marine #10394B (~60 %) : les moments forts, la nav, le pied, le texte sur la brume.
   - Brume #CFE1E6 (~30 %) : le fond de lecture et le texte sur le marine.
   - Sauge #ACCAB2 (~10 %) : les boutons d'action, la bande d'appel de chaque page,
     le cinquième monde, les petites marques sur le marine. Jamais de texte sauge sur la brume.
   - Toutes les photos en bichromie : ombres marine, lumières brume (filtre #vpd-duo).
   On remappe les jetons : les anciennes couleurs tombent sur ces trois-là.
   Chargée en dernier, après _legerete.css, par l'accueil et par les gabarits.
   ============================================================ */
:root{
  --marine:#10394B;
  --brume:#CFE1E6;
  --sauge:#ACCAB2;
  --sauge-hover:oklch(86% 0.042 152);
  --brume-pale:oklch(94% 0.012 220);
  --marine-ink:oklch(40% 0.062 232);   /* accent de texte sur la brume : un marine plus vif */

  /* Neutres : tout passe au marine ou à la brume. */
  --cream:var(--brume);
  --ink:var(--marine);
  --night:var(--marine);
  --charcoal:var(--marine);
  --cafe-latte:var(--marine);
  --stone:var(--brume-pale);
  --blush:var(--brume-pale);

  /* Gris teintés vers le marine. */
  --latte-100:oklch(95% 0.010 220);
  --latte-200:oklch(90% 0.016 222);
  --latte-300:oklch(78% 0.022 225);
  --latte-500:oklch(52% 0.035 230);
  --latte-600:oklch(43% 0.040 230);
  --latte-800:oklch(27% 0.045 230);
  --latte-900:oklch(23% 0.040 230);

  /* L'ancien accent grenadine devient la sauge (fonds, boutons) ;
     ses teintes foncées, utilisées pour le texte sur fond pâle, passent au marine vif. */
  --grenadine:var(--sauge);
  --grenadine-300:var(--sauge);
  --grenadine-400:var(--sauge);
  --grenadine-500:var(--sauge);
  --grenadine-600:var(--marine-ink);
  --grenadine-700:var(--marine-ink);
  --grenadine-900:var(--marine);
  --grenadine-100:var(--brume-pale);

  --beeswax:var(--sauge);
  --beeswax-200:var(--brume-pale);
  --beeswax-300:var(--sauge);
  --beeswax-500:var(--sauge);
  --beeswax-700:var(--marine-ink);

  --azur:var(--marine-600);
  --darlington:var(--sauge);
  --darlington-300:var(--sauge-hover);
  --darlington-700:var(--marine-ink);
  --darlington-800:var(--sauge);
  --sage:var(--sauge);

  --surface-base:var(--brume);
  --text-on-accent:var(--marine);
  --text-accent:var(--marine-ink);
  --border-hairline:color-mix(in oklch,var(--marine) 16%,transparent);
  --border-strong:color-mix(in oklch,var(--marine) 42%,transparent);
  --action-primary:var(--sauge);
  --action-primary-hover:var(--sauge-hover);
  --action-secondary-hover:color-mix(in oklch,var(--marine) 7%,transparent);
  --focus-ring:var(--marine);
}
body{background:var(--brume);color:var(--marine)}
::selection{background:var(--sauge);color:var(--marine)}

/* --- Boutons : la sauge est le seul appel, marine écrit dessus --- */
.vpd-btn--primary,.vpd-btn--on-dark.vpd-btn--primary{background:var(--sauge);color:var(--marine)}
.vpd-btn--primary:hover,.vpd-btn--on-dark.vpd-btn--primary:hover{background:var(--sauge-hover);color:var(--marine)}

/* --- Fonds sombres : marine, brume écrit, la sauge marque --- */
.vpd-nav,.vpd-footer{background:var(--marine);color:var(--brume)}
.ground--night,.ground--marine{background:var(--marine);color:var(--brume);--accent:var(--sauge);--focus-ring:var(--sauge);--rule:color-mix(in oklch,var(--brume) 20%,transparent)}
.phero,.phero--night,.phero--marine{--ph-bg:var(--marine);--ph-fg:var(--brume);--accent:var(--sauge);--focus-ring:var(--sauge);--rule:color-mix(in oklch,var(--brume) 22%,transparent)}
.vpd-nav,.vpd-footer,.cookie{--focus-ring:var(--sauge)}

/* --- Fonds pâles : brume ou brume pâle, marine écrit --- */
.ground--cream,.ground--brume{background:var(--brume);color:var(--marine);--accent:var(--marine-ink);--rule:var(--border-hairline)}
.ground--latte,.ground--blush{background:var(--brume-pale);color:var(--marine);--accent:var(--marine-ink);--rule:var(--border-hairline)}
.phero--brume,.phero--latte,.phero--blush{--ph-fg:var(--marine);--accent:var(--marine-ink);--focus-ring:var(--marine);--rule:var(--border-hairline)}
.phero--brume{--ph-bg:var(--brume)}
.phero--latte,.phero--blush{--ph-bg:var(--brume-pale)}
.ground--brume .vpd-btn--secondary{color:var(--marine);border-color:var(--border-strong)}
.ground--brume .vpd-btn--secondary:hover{border-color:var(--marine);background:var(--action-secondary-hover)}
.ground--latte .words,.ground--cream .words{color:var(--marine-ink)}

/* --- La note sauge : la bande d'appel de chaque page, le cinquième monde --- */
.ground--grenadine,.ground--beeswax,.ground--sage{background:var(--sauge);color:var(--marine);--accent:var(--marine);--focus-ring:var(--marine);--rule:color-mix(in oklch,var(--marine) 24%,transparent)}
.phero--sage{--ph-bg:var(--sauge);--ph-fg:var(--marine);--accent:var(--marine);--focus-ring:var(--marine);--rule:color-mix(in oklch,var(--marine) 24%,transparent)}
.ground--grenadine .vpd-btn--primary,.ground--sage .vpd-btn--primary,.ground--beeswax .vpd-btn--primary,.phero--sage .vpd-btn--primary,
.ground--grenadine .vpd-btn--primary.vpd-btn--on-dark{background:var(--marine);color:var(--brume)}
.ground--grenadine .vpd-btn--primary:hover,.ground--sage .vpd-btn--primary:hover,.ground--beeswax .vpd-btn--primary:hover,.phero--sage .vpd-btn--primary:hover,
.ground--grenadine .vpd-btn--primary.vpd-btn--on-dark:hover{background:var(--marine-800);color:var(--brume)}
.ground--grenadine .vpd-btn--secondary,.ground--sage .vpd-btn--secondary,.ground--grenadine .vpd-btn--on-dark.vpd-btn--secondary{color:var(--marine);border-color:color-mix(in oklch,var(--marine) 45%,transparent)}
.story[data-ch="5"]{--story-bg:var(--sauge);--story-fg:var(--marine);--story-accent:var(--marine);--story-rule:color-mix(in oklch,var(--marine) 24%,transparent);--focus-ring:var(--marine)}
.story[data-ch="5"] .vpd-btn--primary{background:var(--marine);color:var(--brume)}
.story[data-ch="5"] .vpd-btn--primary:hover{background:var(--marine-800)}
.svc-tile--w5{--t-bg:var(--sauge);--t-bg-h:var(--sauge-hover);--t-fg:var(--marine);--t-accent:var(--marine);--focus-ring:var(--marine);color:var(--marine)}
.author__mark{background:var(--marine)}

/* --- Mondes : quatre teintes du marine et de la brume, la sauge au cinquième --- */
.story[data-ch="1"]{--story-bg:var(--marine-800);--story-fg:var(--brume);--story-accent:var(--sauge)}
.story[data-ch="2"]{--story-bg:var(--brume);--story-fg:var(--marine);--story-accent:var(--marine-ink)}
.story[data-ch="3"]{--story-bg:var(--brume-pale);--story-fg:var(--marine);--story-accent:var(--marine-ink)}
.story[data-ch="4"]{--story-bg:var(--marine);--story-fg:var(--brume);--story-accent:var(--sauge)}
.story[data-ch="3"],.svc-tile--w3{--hi:oklch(98% 0.006 215 / 0.85);--lo:oklch(86% 0.022 225 / 0.55)}
.story[data-ch="4"],.svc-tile--w4{--hi:oklch(44% 0.06 228 / 0.5);--lo:oklch(18% 0.035 235 / 0.65)}
.story[data-ch="5"],.svc-tile--w5{--hi:oklch(93% 0.035 150 / 0.75);--lo:oklch(68% 0.05 152 / 0.5)}
.svc-tile--w3{--t-bg:var(--brume-pale)}
.svc-tile--w4{--t-bg:var(--marine);--t-bg-h:var(--marine-800)}

/* --- Photos et vidéos en bichromie (filtre #vpd-duo injecté dans chaque page) ---
   Au repos : ombres marine, lumières brume. Les survols qui rendaient la couleur la rendent encore. */
:where(main,section,article,figure,.ground,.story,.phero) :where(img,video){filter:url(#vpd-duo)}
img[src$=".svg"],.vpd-nav__logo,.vpd-footer__logo,.author__mark img{filter:none}
.facade img,.feature__media img,.post__thumb img,.card-post__media img,.media-band img,.media-band video,
.splitimg__media img,.phero__photo img,.city-photo img,.phero__duo img,.about__portrait img{filter:url(#vpd-duo);mix-blend-mode:normal}

/* Formulaire de la bande d'appel : il était sur la grenadine, il est maintenant sur la sauge. */
:is(.ground--grenadine,.ground--sage,.ground--beeswax,.story[data-ch="5"]) .form--on-dark .field__label{color:color-mix(in oklch,var(--marine) 82%,transparent)}
:is(.ground--grenadine,.ground--sage,.ground--beeswax,.story[data-ch="5"]) :is(.vpd-btn--secondary,.vpd-btn--on-dark.vpd-btn--secondary){color:var(--marine);border-color:color-mix(in oklch,var(--marine) 45%,transparent)}
:is(.ground--grenadine,.ground--sage,.ground--beeswax,.story[data-ch="5"]) :is(.vpd-btn--secondary,.vpd-btn--on-dark.vpd-btn--secondary):hover{border-color:var(--marine);background:color-mix(in oklch,var(--marine) 8%,transparent)}
:is(.ground--grenadine,.ground--sage,.ground--beeswax,.story[data-ch="5"]) .form--on-dark .field[data-invalid] .field__err{color:var(--marine);font-weight:var(--weight-semibold)}

/* Liens sans couleur propre (menu mobile de l'accueil) : ils héritent, jamais le bleu du navigateur. */
:where(a){color:inherit}

/* --- Clients et Vincent : aucun traitement, jamais ---
   Les images des clients (travaux, sites livrés, études de cas) et le portrait de Vincent
   restent en couleurs naturelles, au repos comme au survol : ni bichromie, ni noir et blanc,
   ni fusion. La bichromie ne touche que les lieux et l'ambiance (villes, blogue, contact, services). */
:is(img,video)[src*="/images/accueil-clients/"],:is(img,video)[src*="/images/sitesweb/"],
:is(img,video)[src*="/images/projets/"],:is(img,video)[src*="/images/apropos/"],
video[poster*="/images/projets/"],video:has(source[src*="/images/projets/"]){filter:none!important;mix-blend-mode:normal!important}

/* Événements où Vincent apparaît (conférences, rencontres) : jamais de traitement non plus. */
:is(img,video)[src*="/images/evenements/"]{filter:none!important;mix-blend-mode:normal!important}

/* ============================================================
   NAV · MÉGA-MENU DES SERVICES (2026-10-22)
   « Services » reste un lien vers /services. Le chevron à côté ouvre un panneau
   sous la nav : les cinq services, une ligne chacun, et la vue d'ensemble.
   Une liste éditoriale à filets, comme la liste « Ce que nous faisons » de la
   piste Rivière : pas de cartes, pas d'icônes, pas d'ombre.
   Au survol de la souris (intention de 90 ms) ou au clic du chevron ; Échap,
   clic hors du panneau, défilement ou sortie du focus le referment.
   Écran étroit : le menu mobile liste les services sous « Services ».
   Chargée après _riviere.css, par l'accueil et par les gabarits.
   ============================================================ */
.vpd-nav__has-mega{display:flex;align-items:center;gap:0.125rem}
.vpd-nav__more{display:grid;place-items:center;width:1.5rem;height:1.5rem;margin-right:-0.25rem;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer;
  color:color-mix(in oklch,var(--brume) 65%,transparent);transition:color var(--duration-1) var(--ease-out)}
.vpd-nav__more svg{display:block;transition:transform 0.35s var(--ease-soft)}
.vpd-nav__more:hover,.vpd-nav__more[aria-expanded="true"]{color:var(--brume)}
.vpd-nav__more[aria-expanded="true"] svg{transform:rotate(180deg)}
.vpd-nav__more:focus-visible{outline:2px solid var(--sauge);outline-offset:2px}

/* Le panneau : marine comme la nav, un filet le sépare. */
.mega{position:absolute;left:0;right:0;top:100%;z-index:2;background:var(--marine);color:var(--brume);
  border-top:1px solid color-mix(in oklch,var(--brume) 12%,transparent);border-bottom:1px solid color-mix(in oklch,var(--brume) 12%,transparent);
  visibility:hidden;opacity:0;transform:translateY(-0.5rem);pointer-events:none;
  transition:opacity 0.25s var(--ease-soft),transform 0.35s var(--ease-soft),visibility 0s linear 0.35s}
.mega.is-open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
.mega__inner{padding-block:clamp(1.25rem,0.9rem + 1.2vw,2rem) clamp(2rem,1.5rem + 1.8vw,3rem)}
.mega__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.5rem,0.8rem + 2vw,3rem)}

/* Un service : numéro, nom, une ligne. Le filet s'allume en sauge au survol. */
.mega__item{position:relative;display:grid;grid-template-columns:1.25rem minmax(0,1fr) auto;grid-template-areas:"num title go" ". line line";
  column-gap:0.75rem;row-gap:0.35rem;padding:1.1rem 0 1.4rem;color:var(--brume);text-decoration:none;
  border-top:1px solid color-mix(in oklch,var(--brume) 16%,transparent)}
.mega__item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--sauge);transform:scaleX(0);transform-origin:0 50%;transition:transform 0.45s var(--ease-soft)}
.mega__num{grid-area:num;font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);line-height:1.9;font-variant-numeric:tabular-nums;color:color-mix(in oklch,var(--brume) 50%,transparent);transition:color var(--duration-1) var(--ease-out)}
.mega__title{grid-area:title;font-family:var(--font-display);font-weight:400;font-size:clamp(1.125rem,1rem + 0.4vw,1.375rem);line-height:1.2;letter-spacing:-0.01em}
.mega__line{grid-area:line;max-width:34ch;font-size:var(--text-small);line-height:1.5;color:color-mix(in oklch,var(--brume) 68%,transparent)}
.mega__go{grid-area:go;align-self:center;color:var(--sauge);opacity:0;transform:translateX(-0.375rem);transition:opacity 0.3s var(--ease-soft),transform 0.35s var(--ease-soft)}
.mega__go .ico{display:block;width:1.125rem;height:1.125rem}
.mega__item--all{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title go" "line line"}
.mega__item--all .mega__go{opacity:1;transform:none}

.mega__item:hover::before,.mega__item:focus-visible::before,.mega__item[aria-current="page"]::before{transform:scaleX(1)}
.mega__item:hover .mega__go,.mega__item:focus-visible .mega__go{opacity:1;transform:none}
.mega__item:hover .mega__num,.mega__item[aria-current="page"] .mega__num{color:var(--sauge)}
.mega__item:focus-visible{outline:2px solid var(--sauge);outline-offset:4px;border-radius:var(--radius-sm)}

/* Entrée : les lignes arrivent l'une après l'autre. */
.mega__grid>li{opacity:0;transform:translateY(0.375rem);transition:opacity 0.3s var(--ease-soft),transform 0.4s var(--ease-soft)}
.mega.is-open .mega__grid>li{opacity:1;transform:none}
.mega.is-open .mega__grid>li:nth-child(2){transition-delay:30ms}
.mega.is-open .mega__grid>li:nth-child(3){transition-delay:60ms}
.mega.is-open .mega__grid>li:nth-child(4){transition-delay:90ms}
.mega.is-open .mega__grid>li:nth-child(5){transition-delay:120ms}
.mega.is-open .mega__grid>li:nth-child(6){transition-delay:150ms}

/* Le reste de la page s'assombrit (un marine plus profond que le fond) : le panneau reste seul au premier plan. */
.mega-scrim{position:absolute;left:0;right:0;top:100%;z-index:1;height:100vh;background:oklch(17% 0.035 235 / 0.62);
  visibility:hidden;opacity:0;transition:opacity 0.3s var(--ease-soft),visibility 0s linear 0.3s}
.mega-scrim.is-open{visibility:visible;opacity:1;transition-delay:0s}

/* Panneau ouvert : la nav ne s'efface pas au défilement. */
.vpd-nav.is-mega{transform:none}

@media (max-width:1099px){.mega__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){.vpd-nav__more,.mega,.mega-scrim{display:none}}
@media (prefers-reduced-motion:reduce){
  .mega,.mega-scrim,.mega__grid>li,.mega__item::before,.mega__go,.vpd-nav__more svg{transition:none}
  .mega{transform:none}
}

/* --- Menu mobile : les services sous « Services », en plus petit --- */
.menu__sub{list-style:none;margin:0.15rem 0 0.75rem;padding:0 0 0 calc(1.8rem + var(--space-4));display:grid;gap:0.1rem}
.menu__links .menu__sub a{display:block;padding:0.3rem 0;font-family:var(--font-sans);font-weight:400;font-size:var(--text-body-size);letter-spacing:0;line-height:1.4;
  color:color-mix(in oklch,var(--brume) 72%,transparent);text-decoration:none}
.menu__links .menu__sub a:hover,.menu__links .menu__sub a[aria-current="page"]{color:var(--sauge)}

/* ============================================================
   MOBILE ET iPHONE (2026-10-22)
   Corrections relevées dans le simulateur iOS (iPhone 17, Safari) et à 320-402 px.
   Chargée en dernier, par l'accueil et par les gabarits.
   ============================================================ */
/* Le fond du document est marine comme la nav et le pied : au rebond du défilement d'iOS et sous la barre de Safari,
   on voit du marine, jamais une bande de brume sous le pied de page. Le contenu garde son fond brume (body). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--marine)}
/* Safari (iOS 26) teinte sa barre du bas avec le fond du <body> : marine, comme la nav et le pied.
   Le fond de lecture brume passe sur <main>. */
body{background:var(--marine)}
main{background:var(--brume)}
a,button,summary,label{-webkit-tap-highlight-color:transparent}

/* Une colonne de grille ne s'élargit jamais au-delà de l'écran à cause d'un tableau ou d'un mot long. */
.split>*,.prose{min-width:0}

/* Un bouton ne dépasse jamais son conteneur ; sur téléphone, son texte peut aller à la ligne. */
.vpd-btn{max-width:100%}
@media (max-width:480px){
  .vpd-btn{white-space:normal;text-align:center;line-height:1.25}
}

/* Nav sur téléphone : le logo garde ses proportions, l'appel reste un vrai bouton tactile (44 px). */
.vpd-nav__brand,.vpd-nav__logo{flex:none}
@media (max-width:899px){
  .vpd-nav__inner{gap:var(--space-3)}
  .vpd-nav__cta{min-height:2.75rem;padding-inline:0.875rem}
  .vpd-nav__logo,.vpd-nav--lifted .vpd-nav__logo{height:2.75rem}
}
/* Moins de 360 px : il n'y a plus la place pour trois éléments ; l'appel est dans le menu. */
@media (max-width:359px){.vpd-nav__cta{display:none}}

/* Bannière des témoins et menu : au-dessus de l'indicateur d'accueil et de la barre de Safari. */
.cookie{margin-bottom:env(safe-area-inset-bottom,0px)}
.menu{padding-bottom:calc(var(--space-7) + env(safe-area-inset-bottom,0px))}

/* Soumission : la consigne respire sous la question (Safari ignore la marge basse d'une <legend>). */
.stepper__help{margin-top:var(--space-3)}

/* Témoins sur téléphone : « Tout accepter » et « Tout refuser » côte à côte, à poids égal (Loi 25),
   et des boutons de 44 px, la taille d'un doigt. */
@media (max-width:480px){
  .cookie__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
  .cookie__actions .vpd-btn{min-height:2.75rem}
  .cookie__actions .vpd-btn--tertiary{grid-column:1 / -1;justify-self:start;min-height:2.75rem}
}

/* ============================================================
   PIED DE PAGE (2026-10-23)
   Éditorial et compact, sur la grille de 12 colonnes :
   l'identité (4) · Services (2) · Agence (2) · Régions sur deux colonnes (4).
   Pas d'appel à l'action : la bande sauge du formulaire est juste au-dessus sur chaque page.
   Liens en petit texte, soulignés en sauge au survol ; un filet sépare la base.
   Chargée en dernier, par l'accueil et par les gabarits.
   ============================================================ */
.vpd-foot{position:relative;z-index:1;background:var(--marine);color:var(--brume);
  --foot-muted:color-mix(in oklch,var(--brume) 62%,transparent);
  --foot-rule:color-mix(in oklch,var(--brume) 14%,transparent)}
.vpd-foot__main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:var(--space-8);
  padding-block:clamp(4rem,2.5rem + 4vw,6.5rem) clamp(3rem,2rem + 3vw,4.5rem)}
.vpd-foot__brand{grid-column:span 4;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.vpd-foot__col{grid-column:span 2}
.vpd-foot__col--regions{grid-column:span 4}

.vpd-foot__logo{height:2.5rem;width:auto;display:block;margin:0 0 var(--space-1)}   /* annule la marge basse de .vpd-footer__logo */
.vpd-foot__blurb{margin:0;max-width:30ch;font-size:var(--text-small);line-height:1.55;color:var(--foot-muted)}
.vpd-foot__coords{font-style:normal;display:grid;gap:0.35rem;font-size:var(--text-small);line-height:1.45;color:var(--foot-muted)}

.vpd-foot__title{margin:0 0 var(--space-4);font-family:var(--font-label);font-weight:var(--weight-medium);font-size:var(--text-micro);
  letter-spacing:0.02em;text-transform:none;color:color-mix(in oklch,var(--brume) 50%,transparent)}
.vpd-foot__list{list-style:none;margin:0;padding:0;display:grid;gap:0.6rem}
.vpd-foot__col--regions .vpd-foot__list{grid-template-columns:repeat(2,minmax(0,max-content));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:clamp(1.5rem,1rem + 2vw,3rem)}

/* Un seul traitement pour tous les liens du pied : brume, soulignement sauge au survol. */
.vpd-foot a,.vpd-foot__legal button{color:inherit;text-decoration:none;text-decoration-color:var(--sauge);text-decoration-thickness:1px;text-underline-offset:0.3em;
  transition:color var(--duration-1) var(--ease-out),text-decoration-color var(--duration-1) var(--ease-out)}
.vpd-foot__list a{font-size:var(--text-small);line-height:1.4;color:color-mix(in oklch,var(--brume) 88%,transparent)}
.vpd-foot a:hover,.vpd-foot__legal button:hover{color:var(--brume);text-decoration-line:underline}
.vpd-foot a:focus-visible,.vpd-foot__legal button:focus-visible{outline:2px solid var(--sauge);outline-offset:3px;border-radius:2px}
.vpd-foot__coords a,.vpd-foot__coords [data-phone] a{color:var(--foot-muted)}

.vpd-foot__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-6);
  padding-block:var(--space-5) var(--space-6);border-top:1px solid var(--foot-rule);
  font-size:var(--text-micro);color:color-mix(in oklch,var(--brume) 55%,transparent)}
.vpd-foot__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.vpd-foot__legal button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;cursor:pointer}

/* Tablette : l'identité sur toute la largeur (texte et coordonnées côte à côte), puis les trois listes. */
@media (max-width:1099px){
  .vpd-foot__brand{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:var(--space-7)}
  .vpd-foot__col{grid-column:span 3}
  .vpd-foot__col--regions{grid-column:span 6}
}
/* Téléphone : identité, puis Services et Agence côte à côte, puis les régions sur deux colonnes. */
@media (max-width:699px){
  .vpd-foot__main{row-gap:var(--space-7)}
  .vpd-foot__brand{display:flex}
  .vpd-foot__col{grid-column:span 6}
  .vpd-foot__col--regions{grid-column:1 / -1}
  .vpd-foot__list{gap:0.25rem}
  .vpd-foot__list a{display:inline-block;padding-block:0.35rem}   /* cible tactile d'environ 40 px */
  .vpd-foot__base{flex-direction:column;align-items:flex-start}
}