/* ==========================================================================
   Yugend v3 : direction artistique "calme monumental"
   Palette inchangée : encre #1a1a18 / crème #f5f4f0 / terracotta #c4956a
   Titres en Cabinet Grotesk, accents en Cormorant italique, texte en DM Sans.
   Les jetons, la navigation et le hero vivent dans le bloc critique de chaque
   page (source : _build/critical.css).
   ========================================================================== */

@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/dm-sans-v17-latin-italic.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/dm-sans-v17-latin-300.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/caveat-v23-latin-500.woff2') format('woff2')}

/* ---------- Grain : casse l'aplat numérique, sans se faire remarquer ------ */
body::after{content:'';position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Titres secondaires : un seul gabarit -------------------------- */
.case h3,.team-member h3,.team-note h3,.stance-row h3,.creed-step h4,.panel h3,.svc-card h3,
.proj-name,.faq summary,.legal h2,.cta-band p,.prod-name,.prod-claim,.promesse span,
.constat-list p,.case-result,.manifesto-wrap blockquote{
    font-family:var(--font-display);text-transform:none;font-weight:600;letter-spacing:-.025em}

/* ---------- Bandeau clients ---------------------------------------------- */
.proof-band{background:var(--ink);padding:2.4rem 0 3.4rem;overflow:hidden}
.proof-band .label{color:var(--muted-d);margin-bottom:2.2rem}
.logo-marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.logo-track{display:flex;align-items:center;gap:4.5rem;width:max-content;animation:marquee 72s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-track img{height:auto;width:auto;max-height:38px;max-width:144px;object-fit:contain;flex:none;
    filter:brightness(0) invert(1);opacity:.5;transition:opacity .4s ease}
.logo-track img:hover{opacity:1}
@keyframes marquee{to{transform:translateX(calc(-50% - 2.25rem))}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none}}

/* ---------- Emplacements a completer -------------------------------------- */
.slot{position:relative;width:100%;aspect-ratio:16/10;border:1px dashed var(--gray-300);border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center}
.slot-note{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gray-500);text-align:center;padding:0 1rem}
.slot-note::after{content:' (à fournir)';color:var(--gray-300)}
.slot--empty{border:none;background:none}

/* ---------- Visuels de réalisation ---------------------------------------- */
.shot{display:block;width:100%;height:auto;border-radius:var(--radius)}
.shot--portrait{aspect-ratio:4/5;object-fit:cover}
.case-visual picture,.team-member picture,.case-strip picture{display:block;overflow:hidden;border-radius:var(--radius);
    background:var(--gray-100);box-shadow:0 0 0 1px rgba(26,26,24,.06),0 40px 70px -48px rgba(60,42,24,.45)}

/* ---------- Cas clients ---------------------------------------------------- */
.cases{display:flex;flex-direction:column;gap:clamp(5rem,10vw,9rem)}
.case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.case:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.case:nth-child(even) .case-body{order:2}
.case-meta{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gray-500);display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem}
.case-meta b{font-family:var(--font-display);color:var(--accent-deep);font-weight:600;font-size:.95rem;letter-spacing:0}
.case-meta b::after{content:'';display:inline-block;vertical-align:middle;width:1.7rem;height:1px;background:var(--gray-300);margin-left:.9rem}
.case h3{font-size:clamp(1.7rem,3.2vw,2.75rem);line-height:1.04;margin-bottom:1.4rem;max-width:18ch}
.case-body>p{font-size:1rem;line-height:1.78;color:var(--gray-700);max-width:54ch}
/* L'image se dévoile depuis un cadre resserré, comme une mise au point. */
.case .case-visual picture{clip-path:inset(7% 6% 7% 6% round var(--radius));transition:clip-path 1.5s var(--ease) .1s}
.case .case-visual img{transform:scale(1.14);transition:transform 1.9s var(--ease) .1s}
.case.visible .case-visual picture{clip-path:inset(0 0 0 0 round var(--radius))}
.case.visible .case-visual img{transform:scale(1)}
.case--wide,.case--wide:nth-child(even){grid-template-columns:1fr;gap:3.5rem}
.case--wide .case-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4.5rem;align-items:end}
.case--wide .case-head h3{max-width:16ch;margin-bottom:0}
.case--wide .case-head p{font-size:1rem;line-height:1.78;color:var(--gray-700);max-width:56ch}
.case-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;align-items:start}
.case-strip img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.case-strip picture{transition:transform .7s var(--ease)}
.case-strip picture:hover{transform:translateY(-8px)}
.case-strip picture:nth-child(even){margin-top:2.2rem}
.case-strip .slot{aspect-ratio:16/11}
.case-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.case-tags span{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--gray-700);border:1px solid var(--gray-300);border-radius:999px;padding:.4rem .85rem}
.case-result{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--rule-l);
    font-size:1.3rem;font-weight:500;color:var(--accent-deep);line-height:1.2;max-width:30ch}
.case-result b{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gray-500);font-weight:500;margin-bottom:.6rem}

/* ---------- Equipe --------------------------------------------------------- */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,.62fr)) minmax(0,1fr);gap:clamp(1.6rem,3vw,3rem);align-items:start}
.team-member:nth-child(2){margin-top:3.5rem}
.team-member .slot{aspect-ratio:4/5}
.team-member img{transition:filter .9s var(--ease),transform 1.2s var(--ease)}
@media(hover:hover){
  .team-member img{filter:grayscale(1) contrast(1.04)}
  .team-member:hover img{filter:none;transform:scale(1.03)}
}
.team-member figcaption{margin-top:1.2rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.team-member h3{font-size:1.6rem;line-height:1.1}
.team-role{font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.team-note{padding-left:clamp(0rem,3vw,3rem);align-self:end}
.team-note h3{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.06;margin-bottom:1.3rem;max-width:14ch}
.team-note p{font-size:1rem;line-height:1.78;color:var(--gray-700);max-width:46ch}
.team-note p+p{margin-top:1.1rem}

/* ---------- Sections ----------------------------------------------------- */
section{position:relative}
.sec{padding:var(--space-2xl) 0}
.sec--light{background:var(--white);color:var(--ink)}
.sec--cream{background:var(--cream);color:var(--ink)}
.sec--dark{background:var(--ink);color:var(--cream)}
.sec--dark .label{color:var(--muted-d)}
.sec--tight{padding:var(--space-xl) 0}
.sec--light+.sec--light,.sec--cream+.sec--cream{padding-top:0}
.sec--dark+.sec--dark{padding-top:var(--space-lg)}
/* Le jour se pose sur la nuit : les blocs clairs sont une feuille aux coins arrondis. */
.hero+.sec--light,.hero+.sec--cream,.proof-band+.sec--light,.proof-band+.sec--cream,
.sec--dark+.sec--light,.sec--dark+.sec--cream{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.sec--light:has(+.sec--dark),.sec--cream:has(+.sec--dark),
.sec--light:has(+.closing),.sec--cream:has(+.closing),
.sec--light:has(+.mobile-cta),.sec--cream:has(+.mobile-cta),
.sec--light:has(+footer),.sec--cream:has(+footer),
.sec--light:has(+.back-to-top),.sec--cream:has(+.back-to-top){border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.hero+.sec:has(+.sec--dark),.hero+.sec:has(+.closing),.hero+.sec:has(+footer),.hero+.sec:has(+.mobile-cta),.hero+.sec:has(+.back-to-top){border-radius:var(--radius-lg)}

.sec-head{max-width:980px;margin-bottom:var(--space-lg)}
.sec-head .display{margin:1.6rem 0 1.8rem}
.sec-head p{max-width:620px;color:var(--gray-700)}
.sec--dark .sec-head p{color:var(--muted-d)}

/* ---------- Figures SVG -------------------------------------------------- */
.fig{width:100%;height:auto;display:block;
     --fig-grid:rgba(26,26,24,.08);--fig-line:var(--gray-300);--fig-accent:var(--accent);--fig-ink:var(--ink)}
.sec--dark .fig{--fig-grid:rgba(245,244,240,.08);--fig-line:rgba(245,244,240,.25);--fig-ink:var(--cream)}
.fig-caption{display:block;margin-top:1.5rem;padding-top:1.05rem;border-top:1px solid var(--rule-l)}
.fig-num{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-deep);margin-right:1.1rem}
.fig-title{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.fig-desc{display:block;margin-top:.75rem;font-family:var(--font-serif);font-style:italic;font-weight:300;
    font-size:1.2rem;line-height:1.4;color:var(--gray-700);max-width:36ch}
.sec--dark .fig-caption{border-top-color:var(--rule-strong-d)}
.sec--dark .fig-title{color:var(--cream)}
.sec--dark .fig-desc{color:var(--muted-d)}

/* ---------- Spirales de fond --------------------------------------------- */
.bg-fig{position:absolute;pointer-events:none;z-index:0;height:auto}
.has-bg-fig{overflow:hidden}
.hero .bg-fig{right:-10%;top:46%;width:min(118vh,74vw);color:rgba(var(--accent-rgb),.34);
    transform:translateY(-52%) rotate(var(--turn,0deg));transform-origin:52.5% 52.5%}
.hero--page .bg-fig{right:-12%;width:min(70vw,760px);color:rgba(var(--accent-rgb),.2)}
.closing .bg-fig{left:auto;right:-18%;top:42%;width:min(80vw,1000px);color:rgba(var(--accent-rgb),.14);
    transform:translateY(-50%) rotate(var(--turn,0deg));transform-origin:52.5% 52.5%}
.hero .bg-fig path{stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 4.2s var(--ease) forwards .35s}
@keyframes draw{to{stroke-dashoffset:0}}
@media(max-width:900px){
  .hero .bg-fig{right:-42%;top:38%;width:125vw;color:rgba(var(--accent-rgb),.24)}
  .closing .bg-fig{right:-50%;width:130vw;color:rgba(var(--accent-rgb),.1)}
}
.fig-draw{stroke-dasharray:2600;stroke-dashoffset:2600;transition:stroke-dashoffset 2.6s var(--ease) .25s}
.reveal.visible .fig-draw{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.fig-draw{stroke-dasharray:none;stroke-dashoffset:0}
  .hero .bg-fig path{animation:none;stroke-dashoffset:0}}

/* ---------- Le constat : grandes phrases empilées -------------------------- */
.constat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.6fr);gap:clamp(3rem,7vw,7rem);align-items:start}
.constat-main .display{margin:1.6rem 0 1.8rem}
.constat-main .panel-link{margin-top:2.8rem}
.constat-intro{color:var(--gray-700);max-width:52ch;font-size:1.05rem}
.constat-list{list-style:none;margin-top:3.6rem;border-top:1px solid var(--ink)}
.constat-list li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1rem;align-items:baseline;
    padding:1.55rem 0;border-bottom:1px solid var(--rule-l);
    transition:opacity .45s ease,padding-left .55s var(--ease),border-color .45s ease}
.constat-list .n{font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--accent-deep)}
.constat-list p{font-weight:500;font-size:clamp(1.2rem,2.3vw,1.95rem);line-height:1.12;color:var(--ink)}
@media(hover:hover){
  .constat-list:hover li{opacity:.32}
  .constat-list li:hover{opacity:1;padding-left:.9rem;border-bottom-color:var(--ink)}
}
.constat-figure{position:sticky;top:140px}

/* ---------- En-tête en deux colonnes ------------------------------------- */
.split-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:clamp(2rem,5vw,5rem);
    align-items:end;margin-bottom:clamp(3.5rem,7vw,6.5rem)}
.split-head .display{margin-top:1.6rem}
.split-head p{color:var(--gray-700);padding-bottom:.5rem;font-size:1.02rem;max-width:44ch}
.sec--dark .split-head p{color:var(--muted-d)}

/* ---------- Positionnement : lignes pleine largeur ----------------------- */
.stance{border-top:1px solid var(--ink)}
.stance-row{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,.9fr);gap:3rem;
    align-items:baseline;padding:3.1rem 0;border-bottom:1px solid var(--rule-l);isolation:isolate;
    transition:padding .6s var(--ease),color .5s ease}
.stance-row::before{content:'';position:absolute;inset:0 calc(var(--gutter)*-1);z-index:-1;background:var(--ink);
    border-radius:var(--radius);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.stance-idx{font-family:var(--font-display);font-weight:500;font-size:1rem;line-height:1;color:var(--accent-deep);transition:color .4s ease}
.stance-row h3{font-size:clamp(1.7rem,3.6vw,3.2rem);line-height:1}
.stance-row p{font-size:1rem;line-height:1.75;color:var(--gray-700);transition:color .5s ease}
@media(hover:hover){
  .stance-row:hover{color:var(--cream)}
  .stance-row:hover::before{transform:scaleY(1);transform-origin:top}
  .stance-row:hover p{color:rgba(245,244,240,.72)}
  .stance-row:hover .stance-idx{color:var(--accent)}
}

/* ---------- Méthode : figure, puis quatre mots en escalier ---------------- */
.approach-top{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.25fr);gap:clamp(3rem,7vw,7rem);
    align-items:center;margin-bottom:var(--space-xl)}
.approach-intro .display{margin:1.6rem 0 1.8rem}
.approach-intro p{color:var(--gray-700);max-width:52ch;font-size:1.05rem}

.creed{display:flex;flex-direction:column;counter-reset:pas;border-top:1px solid var(--ink)}
.creed-step{counter-increment:pas;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34ch);gap:3rem;
    align-items:end;padding:1.6rem 0 1.9rem;border-bottom:1px solid var(--rule-l)}
.creed-step h4{position:relative;font-weight:700;letter-spacing:-.045em;font-size:clamp(2.8rem,9vw,8.4rem);line-height:.92;
    color:var(--ink);white-space:nowrap;transition:color .5s ease,transform .7s var(--ease)}
.creed-step h4::before{content:'0' counter(pas);display:inline-block;vertical-align:top;margin:.5em 1.4rem 0 0;
    font-size:.9rem;font-weight:600;letter-spacing:0;line-height:1;color:var(--accent-deep)}
.creed-step:nth-child(2) h4{margin-left:8%}
.creed-step:nth-child(3) h4{margin-left:16%}
.creed-step:nth-child(4) h4{margin-left:24%}
.creed-step:hover h4{color:var(--accent-deep);transform:translateX(.6rem)}
.creed-step p{font-size:.98rem;line-height:1.72;color:var(--gray-700);padding-bottom:.6rem}

/* ---------- Suite de services (index collant) ---------------------------- */
.suite{display:grid;grid-template-columns:300px 1fr;gap:clamp(3rem,7vw,7rem);align-items:start}
.suite-index{position:sticky;top:130px;border-top:1px solid var(--ink)}
.suite-index a{display:flex;align-items:baseline;gap:1rem;padding:1.15rem .5rem 1.15rem 0;border-bottom:1px solid var(--rule-l);
    text-decoration:none;color:var(--gray-500);font-size:1rem;font-weight:500;
    transition:color .4s ease,padding .5s var(--ease)}
.suite-index a .n{font-family:var(--font-display);font-size:.85rem;font-weight:600;color:var(--gray-300);transition:color .35s ease}
.suite-index a:hover{color:var(--ink);padding-left:.5rem}
.suite-index a.active{color:var(--ink);padding-left:.9rem}
.suite-index a.active .n{color:var(--accent-deep)}

.suite-panels{display:flex;flex-direction:column;gap:var(--space-2xl)}
.panel{scroll-margin-top:140px}
.panel-num{font-family:var(--font-display);font-weight:700;letter-spacing:-.05em;font-size:clamp(5rem,13vw,11rem);line-height:.8;
    color:transparent;-webkit-text-stroke:1px var(--gray-300);display:block;margin-bottom:1.8rem}
.panel h3{font-weight:700;letter-spacing:-.035em;font-size:clamp(2rem,4.2vw,3.7rem);line-height:1;margin-bottom:1.6rem;
    max-width:17ch;hyphens:none;overflow-wrap:normal}
.panel h3 em{display:block;font-family:var(--font-serif);font-style:italic;font-weight:300;letter-spacing:-.02em;
    font-size:1.08em;line-height:1;color:var(--accent-deep);padding-bottom:.08em}
.panel>p{font-size:1.05rem;line-height:1.78;color:var(--gray-700);max-width:60ch;margin-bottom:2.4rem}
.panel-list{list-style:none;border-top:1px solid var(--rule-l)}
.panel-list li{padding:1.3rem 0;border-bottom:1px solid var(--rule-l);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    gap:2rem;align-items:baseline;transition:padding-left .5s var(--ease)}
.panel-list li:hover{padding-left:.7rem}
.panel-list li>div{display:contents}
.panel-list strong{font-weight:500;font-size:1rem;line-height:1.4}
.panel-list span{display:block;font-size:.92rem;color:var(--gray-500);line-height:1.65}
.panel-link{display:inline-flex;align-items:center;gap:.7rem;margin-top:2rem;font-family:var(--font-body);font-size:.95rem;font-weight:500;
    color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:.35rem;
    transition:border-color .35s ease,color .35s ease,gap .45s var(--ease)}
.panel-link:hover{color:var(--accent-deep);border-color:var(--accent-deep);gap:1.1rem}
.panel-link svg{width:14px;height:14px}
.sec--dark .panel-link{color:var(--cream);border-color:var(--rule-strong-d)}
.sec--dark .panel-link:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- Chiffres ----------------------------------------------------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-strong-d)}
.figure{padding:2.2rem 2rem 1rem 0}
.figure+.figure{padding-left:2rem;border-left:1px solid var(--rule-d)}
.figure .n{font-family:var(--font-display);font-weight:600;letter-spacing:-.05em;font-size:clamp(3.2rem,6.6vw,6.6rem);line-height:.95;
    color:var(--cream);display:block;margin-bottom:1.4rem;white-space:nowrap}
.figure .n i{font-style:normal;color:var(--accent)}
.figure .t{font-size:.92rem;line-height:1.65;color:var(--muted-d);display:block;max-width:24ch}

/* ---------- Manifeste ---------------------------------------------------- */
.manifesto-wrap{max-width:1020px;margin:0 auto;text-align:left}
.manifesto-wrap .display{margin:1.6rem 0 var(--space-lg)}
.manifesto-wrap blockquote{font-weight:500;letter-spacing:-.03em;font-size:clamp(1.7rem,3.9vw,3.3rem);line-height:1.08;
    color:var(--cream);margin:var(--space-md) 0;max-width:24ch}
.manifesto-wrap blockquote.accent{font-family:var(--font-serif);font-style:italic;font-weight:300;letter-spacing:-.015em;
    font-size:clamp(2rem,4.6vw,4rem);line-height:1.04;color:var(--accent);max-width:22ch;margin-left:auto}
.manifesto-wrap p{font-size:1.1rem;line-height:1.85;color:var(--muted-d);margin-bottom:1.4rem;max-width:58ch}
.manifesto-wrap>p:nth-of-type(even){margin-left:auto}
.manifesto-sep{width:100%;height:1px;background:var(--rule-d);margin:var(--space-lg) 0}
.manifesto-values{list-style:none;display:flex;flex-direction:column;margin:var(--space-md) 0;font-size:1.05rem;color:var(--muted-d);
    border-top:1px solid var(--rule-d)}
.manifesto-values li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:baseline;
    padding:1.3rem 0;border-bottom:1px solid var(--rule-d)}
.manifesto-values li span{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;text-transform:none;color:var(--cream);
    font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1;margin:0}
.manifesto-sign{margin-top:var(--space-lg)}
.manifesto-sign img{width:170px;height:auto;opacity:.9;filter:invert(1)}
.manifesto-tagline{font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-d);margin-top:1.2rem}
.manifesto-kanji{font-size:.95rem;letter-spacing:.3em;color:var(--accent);margin-left:.2rem}
/* Texte qui s'éclaire à la lecture (yugend.js pose les .w) */
.lit .w{opacity:.2;transition:opacity .6s ease,color .6s ease}
.lit .w.on{opacity:1}
.manifesto-wrap p.lit .w{opacity:.38}
.manifesto-wrap p.lit .w.on{opacity:1;color:rgba(245,244,240,.88)}
@media(prefers-reduced-motion:reduce){.lit .w{opacity:1}}

/* ---------- CTA final ---------------------------------------------------- */
.closing{padding:var(--space-2xl) 0 var(--space-xl);position:relative;text-align:left}
.closing .container{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(3rem,7vw,7rem);
    grid-template-rows:auto auto auto 1fr;align-items:start}
.closing .container>*{grid-column:1}
.closing .contact-form{grid-column:2;grid-row:1/span 4;margin:0;max-width:none;
    background:rgba(34,34,31,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--rule-d);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.6rem)}
.closing .display{font-size:clamp(2.3rem,5vw,4.6rem);line-height:1;margin:1.6rem 0 2rem;max-width:14ch}
.closing p{max-width:46ch;margin:0 0 2.2rem;color:var(--muted-d);line-height:1.8;font-size:1.05rem}
.closing-contact{font-size:.95rem;color:var(--muted-d);display:block}
.closing :not(form)>.btn{margin-bottom:1.6rem}
.closing-contact a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--rule-strong-d);transition:color .3s ease,border-color .3s ease}
.closing-contact a:hover{color:var(--accent);border-color:var(--accent)}
/* Pages sans formulaire : le bloc reste une simple colonne. */
.closing .container:not(:has(.contact-form)){display:block}
.closing .container:not(:has(.contact-form)) .display{max-width:18ch}

/* ---------- Footer ------------------------------------------------------- */
footer{background:var(--ink);color:var(--cream);border-top:1px solid var(--rule-d);padding:var(--space-xl) 0 0;overflow:hidden;position:relative}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:3rem;padding-bottom:var(--space-lg)}
.footer-brand img{width:150px;height:auto;filter:invert(1);margin-bottom:1.4rem}
.footer-brand p{font-size:.95rem;line-height:1.75;color:var(--muted-d);max-width:32ch}
.footer-col h5{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-500);margin-bottom:1.4rem;font-weight:500}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.footer-col a{font-size:.98rem;color:rgba(245,244,240,.8);text-decoration:none;transition:color .3s ease,padding-left .45s var(--ease)}
.footer-col a:hover{color:var(--accent);padding-left:.35rem}
.footer-bottom{border-top:1px solid var(--rule-d);padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-bottom span,.footer-bottom a{font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);text-decoration:none}
.footer-bottom a:hover{color:var(--accent)}
/* Le nom, à l'échelle du paysage : il affleure au bas de page comme un horizon. */
.footer-word{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;text-align:center;
    font-size:25.5vw;line-height:.74;letter-spacing:-.045em;white-space:nowrap;user-select:none;pointer-events:none;
    margin:1.5rem 0 -.08em;padding-top:.04em;
    background:linear-gradient(to bottom,rgba(245,244,240,.2),rgba(var(--accent-rgb),.05) 88%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    transform:translateY(var(--rise,0))}

/* ---------- Retour en haut ----------------------------------------------- */
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:48px;height:48px;border:1px solid var(--rule-strong-d);background:var(--ink);color:var(--cream);
    border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);
    transition:opacity .4s ease,transform .4s var(--ease),background .3s ease,color .3s ease;z-index:90}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.back-to-top svg{width:16px;height:16px}

/* ---------- Reveal : le contenu sort de la brume -------------------------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.display.reveal,.reveal>.display{filter:blur(10px)}
.reveal.visible{opacity:1;transform:translateY(0)}
.display.reveal.visible,.reveal.visible>.display{filter:blur(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ---------- Responsive --------------------------------------------------- */
@media(max-width:1100px){
  .case,.case:nth-child(even){grid-template-columns:1fr;gap:2.5rem}
  .case .case-visual{order:-1}
  .case--wide .case-head{grid-template-columns:1fr;gap:1.8rem;align-items:start}
  .case:nth-child(even) .case-body{order:0}
  .team{grid-template-columns:repeat(2,1fr)}
  .team-note{grid-column:1/-1;padding:1.8rem 0 0}

  .constat{grid-template-columns:1fr;gap:3.5rem}
  .constat-figure{position:static;max-width:420px}
  .approach-top{grid-template-columns:1fr;gap:3rem}
  .approach-figure{order:2;max-width:420px}
  .approach-intro{order:1}
  .creed-step:nth-child(2) h4{margin-left:5%}
  .creed-step:nth-child(3) h4{margin-left:10%}
  .creed-step:nth-child(4) h4{margin-left:15%}
  .closing .container{display:block}
  .closing .contact-form{margin:2.6rem 0 2rem}
}
@media(max-width:1000px){
  .suite{grid-template-columns:1fr;gap:2.5rem}
  .suite-index{position:static}
  .split-head{grid-template-columns:1fr;gap:2rem;align-items:start}
  .stance-row{grid-template-columns:60px minmax(0,1fr);gap:1.2rem 1.5rem;align-items:start}
  .stance-idx{grid-row:span 2;padding-top:.5rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
}
@media(max-width:820px){
  .refs-list{grid-template-columns:1fr;gap:0}

  .figures{grid-template-columns:1fr 1fr}
  .figure,.figure+.figure{border-left:none;padding:2rem 1rem 1.6rem 0;border-bottom:1px solid var(--rule-d)}
  .case-strip{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .creed-step{grid-template-columns:1fr;gap:.9rem;align-items:start}
  .creed-step h4{white-space:normal}
  .creed-step:nth-child(n) h4{margin-left:0}
  .panel-list li{grid-template-columns:1fr;gap:.3rem}
  .manifesto-values li{grid-template-columns:1fr;gap:.3rem}
  .manifesto-wrap blockquote.accent,.manifesto-wrap>p:nth-of-type(even){margin-left:0}
}
@media(max-width:600px){
  .constat-list li{grid-template-columns:2rem minmax(0,1fr);gap:.6rem}
  .team{grid-template-columns:1fr 1fr;gap:1rem}
  .team-member:nth-child(2){margin-top:2rem}
  .team-member h3{font-size:1.25rem}
  .case-strip picture:nth-child(even){margin-top:1.2rem}

  .footer-grid{grid-template-columns:1fr}
  .back-to-top{bottom:1.2rem;right:1.2rem}
  .stance-row{grid-template-columns:1fr;gap:.7rem;padding:2.2rem 0}
  .stance-idx{grid-row:auto;padding-top:0}
  .sec--light:has(+.sec--dark),.sec--cream:has(+.sec--dark){border-radius:0 0 20px 20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.display.reveal,.reveal>.display{opacity:1;transform:none;filter:none}
  .case .case-visual picture{clip-path:none}
  .case .case-visual img{transform:none}
}

/* ==========================================================================
   Pages services
   ========================================================================== */

/* ---------- Aiguillage : trois cartes ------------------------------------ */
.svc-cards{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.svc-card{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1fr) auto;gap:3rem;
    align-items:center;padding:3.2rem 0;border-bottom:1px solid var(--rule-l);text-decoration:none;isolation:isolate;
    color:inherit;transition:color .5s ease}
.svc-card::before{content:'';position:absolute;inset:0 calc(var(--gutter)*-1);z-index:-1;background:var(--ink);
    border-radius:var(--radius);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.svc-card .n{font-family:var(--font-display);font-weight:500;font-size:1rem;line-height:1;color:var(--accent-deep);transition:color .4s ease}
.svc-card h3{font-size:clamp(1.6rem,3.2vw,2.8rem);line-height:1}
.svc-card p{font-size:.98rem;line-height:1.75;color:var(--gray-700);transition:color .5s ease}
.svc-card .go{font-size:.9rem;font-weight:500;color:var(--accent-deep);white-space:nowrap;display:flex;align-items:center;gap:.6rem;transition:color .4s ease}
.svc-card .go svg{width:14px;height:14px;transition:transform .45s var(--ease)}
@media(hover:hover){
  .svc-card:hover{color:var(--cream)}
  .svc-card:hover::before{transform:scaleY(1);transform-origin:top}
  .svc-card:hover p{color:rgba(245,244,240,.72)}
  .svc-card:hover .n,.svc-card:hover .go{color:var(--accent)}
  .svc-card:hover .go svg{transform:translateX(5px)}
}

/* ---------- Fil d'ariane -------------------------------------------------- */
.crumb{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted-d);text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;
    transition:color .3s ease,gap .45s var(--ease)}
.crumb:hover{color:var(--accent);gap:.95rem}
.crumb svg{width:14px;height:14px}

/* ---------- Projets rattachés à un levier (logos) ------------------------ */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.proj-item{padding:2.6rem 2.2rem 2.8rem;border-bottom:1px solid var(--rule-l);border-right:1px solid var(--rule-l)}
.proj-item:nth-child(3n){border-right:none;padding-right:0}
.proj-item:nth-child(3n+1){padding-left:0}
.proj-mark{height:38px;display:flex;align-items:center;margin-bottom:1.5rem}
.proj-mark img{height:auto;width:auto;max-height:32px;max-width:130px;object-fit:contain;
    filter:brightness(0);opacity:.55;transition:opacity .35s ease}
.proj-item:hover .proj-mark img{opacity:1}
.proj-name{font-size:1.5rem;line-height:1.1;color:var(--ink);opacity:.6;transition:opacity .35s ease}
.proj-item:hover .proj-name{opacity:1}
.proj-item p{font-size:.92rem;line-height:1.7;color:var(--gray-700)}
.sec--dark .proj-mark img{filter:brightness(0) invert(1)}

/* ---------- FAQ ----------------------------------------------------------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule-l)}
.faq summary{list-style:none;cursor:pointer;padding:1.7rem 0;display:grid;
    grid-template-columns:1fr auto;gap:2rem;align-items:center;
    font-weight:500;font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.15;transition:padding-left .5s var(--ease)}
.faq summary:hover{padding-left:.6rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--font-display);font-weight:400;font-size:1.7rem;line-height:1;color:var(--accent-deep);
    transition:transform .45s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-size:1rem;line-height:1.78;color:var(--gray-700);max-width:62ch;padding-bottom:1.9rem}

/* ---------- Bloc en attente de matière ------------------------------------ */
.todo{border:1px dashed var(--gray-300);border-radius:var(--radius);padding:2.2rem 2.4rem}
.todo b{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--accent-deep);margin-bottom:.9rem;font-weight:500}
.todo p{font-size:.92rem;line-height:1.75;color:var(--gray-500);max-width:60ch}

@media(max-width:1000px){
  .svc-card{grid-template-columns:50px minmax(0,1fr);gap:1rem 1.4rem;align-items:start}
  .svc-card .n{grid-row:span 3;padding-top:.5rem}
  .svc-card .go{margin-top:.6rem}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .proj-item:nth-child(3n){border-right:1px solid var(--rule-l);padding-right:2.2rem}
  .proj-item:nth-child(3n+1){padding-left:2.2rem}
  .proj-item:nth-child(2n){border-right:none;padding-right:0}
  .proj-item:nth-child(2n+1){padding-left:0}
}
@media(max-width:600px){
  .proj-grid{grid-template-columns:1fr}
  .proj-item{border-right:none!important;padding:2rem 0!important}
}

/* ---------- Hero des pages internes --------------------------------------- */
.hero--page{min-height:auto;padding:12rem 0 5.5rem;justify-content:flex-start}
.hero--page::before{content:'';position:absolute;inset:-20%;z-index:0;pointer-events:none;
    background:radial-gradient(36% 40% at 78% 40%,rgba(var(--accent-rgb),.17),transparent 70%),
               radial-gradient(30% 36% at 10% 100%,rgba(245,244,240,.05),transparent 70%);
    animation:mist 36s ease-in-out infinite alternate}
.hero--page h1{font-size:clamp(2.4rem,6vw,5.4rem);max-width:17ch;margin-top:1.6rem}
.hero--page .lede{margin-top:2.2rem}
.hero--page .hero-cta{margin-top:2.6rem}
.hero--page .hero-label{animation-delay:.1s}
@media(max-width:900px){.hero--page{padding:8.5rem 0 4rem}}

/* ---------- Promesse de délai --------------------------------------------- */
.promesse{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.promesse>div{padding:2.2rem 2rem 2.4rem;border-right:1px solid var(--rule-l)}
.promesse>div:first-child{padding-left:0}
.promesse>div:last-child{border-right:none;padding-right:0}
.promesse b{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--gray-500);font-weight:500;margin-bottom:1.1rem}
.promesse span{font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.08;color:var(--ink)}
.promesse-key b{color:var(--accent-deep)}
.promesse-key span{color:var(--accent-deep)}
@media(max-width:820px){
  .promesse{grid-template-columns:1fr}
  .promesse>div{border-right:none;border-bottom:1px solid var(--rule-l);padding:1.8rem 0!important}
  .promesse>div:last-child{border-bottom:none}
}

/* ---------- Pages légales -------------------------------------------------- */
.legal{max-width:70ch}
.legal-intro{font-size:1.08rem;line-height:1.8;color:var(--gray-700);padding-bottom:2rem;
    border-bottom:1px solid var(--rule-l);margin-bottom:2.6rem}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.15;margin:2.8rem 0 1rem}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:1rem;line-height:1.85;color:var(--gray-700);margin-bottom:.9rem}
.legal a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gray-300);
    transition:color .3s ease,border-color .3s ease}
.legal a:hover{color:var(--accent-deep);border-color:var(--accent-deep)}

/* ---------- Formulaire de contact ----------------------------------------- */
.contact-form{max-width:640px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:1.7rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.contact-form label{display:flex;flex-direction:column;gap:.35rem}
.contact-form label>span{font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted-d);transition:color .3s ease}
.contact-form label:focus-within>span{color:var(--accent)}
.contact-form label>span em{font-style:normal;color:var(--gray-500);text-transform:none;letter-spacing:0}
.contact-form input,.contact-form textarea{font-family:var(--font-body);font-size:1.05rem;color:var(--cream);
    background:transparent;border:none;border-bottom:1px solid var(--rule-strong-d);border-radius:0;
    padding:.7rem 0 .8rem;width:100%;transition:border-color .4s ease}
.contact-form textarea{resize:vertical;line-height:1.65;min-height:130px}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(245,244,240,.3)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-bottom-color:var(--accent)}
.contact-form input:-webkit-autofill{-webkit-text-fill-color:var(--cream);transition:background-color 9999s}
.contact-form button{align-self:flex-start;margin-top:.2rem}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .cf-legal,.closing .cf-legal{font-size:.8rem;line-height:1.6;color:var(--gray-500);margin:-.4rem 0 0;max-width:none}
.cf-legal a{color:var(--muted-d);border-bottom:1px solid var(--rule-strong-d);text-decoration:none}
.cf-legal a:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:600px){.cf-row{grid-template-columns:1fr}}

/* ---------- Barre d'action collante (mobile) ------------------------------ */
.mobile-cta{display:none}
@media(max-width:1150px){
  .mobile-cta{display:flex;position:fixed;left:.8rem;right:.8rem;bottom:calc(.8rem + env(safe-area-inset-bottom));z-index:95;
      opacity:0;transform:translateY(140%);pointer-events:none;
      transition:opacity .3s ease,transform .5s var(--ease);
      align-items:center;justify-content:center;min-height:54px;padding:0 1.5rem;border-radius:999px;
      background:var(--accent);color:var(--ink);text-decoration:none;
      font-family:var(--font-body);font-size:.95rem;font-weight:500;
      box-shadow:0 18px 40px -18px rgba(26,26,24,.6)}
  .mobile-cta.visible{opacity:1;transform:none;pointer-events:auto}
  .mobile-nav.open~.mobile-cta{opacity:0;pointer-events:none}
  .back-to-top{bottom:calc(54px + 1.8rem + env(safe-area-inset-bottom))}
}

/* ---------- Micro-typographie --------------------------------------------- */
.nav-links a[aria-current="page"]{color:var(--cream)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

/* ==========================================================================
   Accessibilite et finition typographique
   ========================================================================== */

/* Lien d'evitement : visible uniquement au clavier */
.saut-contenu{position:absolute;left:1rem;top:-100px;z-index:200;
    background:var(--accent);color:var(--ink);padding:.85rem 1.4rem;border-radius:999px;
    font-size:.9rem;font-weight:500;text-decoration:none;transition:top .25s ease}
.saut-contenu:focus{top:1rem}

/* Anneau de focus visible partout, sans polluer la souris */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:4px}
.sec--dark a:focus-visible,.hero a:focus-visible,.closing a:focus-visible,
footer a:focus-visible,nav a:focus-visible{outline-color:var(--accent-light)}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:none}

/* Chiffres alignes en colonne */
.figure .n,.promesse span,.case-result,.stance-idx,.panel-num,.constat-list .n,
.suite-index a .n,.case-meta b,.svc-card .n{font-variant-numeric:tabular-nums}

/* Evite les mots orphelins en fin de titre et les fins de paragraphe bancales */
.display,.case h3,.panel h3,.stance-row h3,.team-note h3,
.svc-card h3,.faq summary,.legal h2,.manifesto-wrap blockquote,.prod-claim{text-wrap:balance}
.lede,.case-body>p,.sec-head p,.split-head p,.legal p,.faq details p,
.panel>p,.constat-intro,.approach-intro p,.manifesto-wrap p,.constat-list p{text-wrap:pretty}

/* Message d'erreur du formulaire */
.cf-erreur{display:none;border:1px solid var(--accent);border-left-width:3px;border-radius:8px;
    padding:.9rem 1.1rem;font-size:.9rem;line-height:1.6;color:var(--cream);
    background:rgba(var(--accent-rgb),.1)}
.closing .cf-erreur{max-width:none;margin:0;color:var(--cream)}
.cf-erreur.visible{display:block}

/* ---------- Relance contextuelle en cours de page ------------------------- */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
    margin-top:clamp(4rem,8vw,7rem);padding-top:2.4rem;border-top:1px solid var(--ink)}
.cta-band p{font-weight:600;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.04;max-width:22ch;margin:0}
.faq-more{margin-top:2.2rem;font-size:.98rem;color:var(--gray-700)}
.faq-more a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gray-300);
    transition:color .3s ease,border-color .3s ease}
.faq-more a:hover{color:var(--accent-deep);border-color:var(--accent-deep)}
@media(max-width:600px){.cta-band{flex-direction:column;align-items:flex-start;gap:1.5rem}}

/* ---------- Studio SaaS : fiches produit ---------------------------------- */
.prods{border-top:1px solid var(--ink)}
.prod{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,6vw,6rem);
    padding:4rem 0 4.4rem;border-bottom:1px solid var(--rule-l);align-items:start}
/* Gabarit commun aux quatre marques : un carre de 46px. Taille explicite plutot
   qu'intrinseque, alignmarc.svg n'ayant qu'un viewBox et donc aucune dimension
   propre : hors flux bloc il se replierait a zero. */
.prod-mark{width:46px;height:46px;flex:none;display:flex;align-items:center;
    justify-content:center;margin-bottom:1.4rem}
.prod-mark img,.prod-mark picture{display:block}
.prod-mark img{width:100%;height:100%;object-fit:contain}
/* Le SVG d'Alignmarc porte deja son carre arrondi ; les trois autres marques sont
   nues, on leur donne le meme cadre pour que la colonne se lise d'un bloc. */
.prod-mark--cadre{border:1px solid var(--rule-l);border-radius:12px;background:var(--cream)}
.prod-mark--cadre img{width:26px;height:26px}
.prod-idx{font-family:var(--font-display);font-size:.9rem;font-weight:600;
    color:var(--accent-deep);display:block;margin-bottom:1rem}
.prod-name{font-weight:700;letter-spacing:-.035em;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1;color:var(--ink)}
.prod-sector{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent-deep);display:block;margin-top:1rem}
.prod-meta{margin-top:2rem;border-top:1px solid var(--rule-l)}
.prod-meta div{padding:.85rem 0;border-bottom:1px solid var(--rule-l)}
.prod-meta dt{font-family:var(--font-mono);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gray-500);margin-bottom:.35rem}
.prod-meta dd{font-size:.9rem;line-height:1.65;color:var(--gray-700)}
.prod-claim{font-weight:500;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.1;max-width:24ch}
.prod-body{font-size:1rem;line-height:1.78;color:var(--gray-700);margin-top:1.4rem;max-width:60ch}
.prod-facts{list-style:none;margin-top:2rem;border-top:1px solid var(--rule-l)}
.prod-facts li{padding:.9rem 0;border-bottom:1px solid var(--rule-l);display:grid;
    grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
    font-size:.92rem;line-height:1.7;color:var(--gray-700)}
.prod-facts li::before{content:'';width:12px;height:1px;background:var(--accent-deep);transform:translateY(-4px)}
.prod-go{display:inline-flex;align-items:center;gap:.6rem;margin-top:2rem;text-decoration:none;
    font-size:.95rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:.3rem;
    transition:border-color .35s ease,color .35s ease,gap .45s var(--ease)}
.prod-go:hover{color:var(--accent-deep);border-color:var(--accent-deep);gap:.95rem}
.prod-go svg{width:14px;height:14px;transition:transform .45s var(--ease)}
.prod-go:hover svg{transform:translate(2px,-2px)}
@media(max-width:900px){
    .prod{grid-template-columns:1fr;gap:1.9rem;padding:2.8rem 0 3rem}
    .prod-meta{margin-top:1.4rem}
    /* Plus de place en hauteur qu'en largeur : la marque passe sur la ligne du nom. */
    .prod-head{display:flex;align-items:center;gap:1rem}
    .prod-mark{margin-bottom:0}
}


/* ==========================================================================
   Yugend v4 : surcouche appliquée aux pages intérieures.
   Les pages gardent leur balisage v3 (mêmes classes). Ce fichier les habille
   comme la page d'accueil v4 : navigation flottante, hero en image, feuille
   claire qui monte sur le hero, cartes plus douces, bloc final en carte,
   pied de page clair. Typographie v3 conservée telle quelle.

   La première partie est aussi injectée dans le bloc critique de chaque page
   (voir _build/build_v4.py), pour éviter tout flash de l'ancienne navigation.
   ========================================================================== */

:root{--radius:20px;--radius-lg:28px;--white-rgb:250,250,248}
body{background:var(--white)}

/* ---------- Boutons : pastilles pleines, flèche simple --------------------- */
.btn{padding:.85rem 1.4rem;gap:.6rem}
.btn svg{width:14px;height:14px;padding:0;border-radius:0;background:none!important}
.btn:hover svg{transform:translateX(3px)}
.btn-accent{background:var(--ink);color:var(--white)}
.btn-accent:hover{background:var(--accent-deep);color:var(--white)}
.hero .btn-accent,.closing .btn-accent,.sec--dark .btn-accent{background:var(--white);color:var(--ink)}
.hero .btn-accent:hover,.closing .btn-accent:hover,.sec--dark .btn-accent:hover{background:var(--accent);color:var(--ink)}
.btn-ghost-d{background:rgba(var(--white-rgb),.14);border-color:rgba(var(--white-rgb),.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ---------- Petits libellés : plus de capitales espacées ------------------ */
.label,.crumb{font-family:var(--font-body);font-size:.82rem;font-weight:400;letter-spacing:0;text-transform:none}
.label::before{width:1.4rem}

/* ---------- Navigation flottante ------------------------------------------ */
nav#nav{top:10px;left:10px;right:10px;border-radius:18px;border:1px solid transparent;
    transition:background .45s var(--ease),border-color .45s var(--ease)}
nav#nav.scrolled{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.nav-inner,nav#nav.scrolled .nav-inner{max-width:none;height:62px;padding:0 1rem 0 1.4rem}
.nav-logo img{height:26px}
.nav-links{gap:1.9rem;margin-left:auto}
.nav-links a{color:var(--white);opacity:.86;font-size:.9rem;transition:opacity .3s,color .45s}
.nav-links a::after{display:none}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1;color:var(--white)}
nav#nav .nav-cta{padding:.65rem 1.15rem;font-size:.86rem;background:var(--white);color:var(--ink)}
nav#nav .nav-cta:hover{background:var(--accent)}
nav#nav.is-solid{background:rgba(var(--white-rgb),.88);border-color:var(--rule-l);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
nav#nav.is-solid .nav-links a{color:var(--ink)}
nav#nav.is-solid .nav-logo img{filter:none}
nav#nav.is-solid .nav-burger span{background:var(--ink)}
nav#nav.is-solid .nav-cta{background:var(--ink);color:var(--white)}
nav#nav.is-solid .nav-cta:hover{background:var(--accent-deep)}
/* Menu mobile ouvert : la barre repasse en clair sur fond d'encre. */
body:has(.mobile-nav.open) nav#nav{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body:has(.mobile-nav.open) nav#nav .nav-logo img{filter:invert(1)}
body:has(.mobile-nav.open) nav#nav .nav-burger span{background:var(--white)}

/* ---------- Hero des pages : image ou vidéo plein cadre -------------------- */
.hero--page{min-height:min(80vh,780px);justify-content:flex-end;padding:10rem 0 calc(4.5rem + var(--radius-lg))}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img,.hero-media video{display:block;width:100%;height:100%;object-fit:cover}
.hero-media::after{content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(24,20,16,.86) 0%,rgba(24,20,16,.55) 50%,rgba(24,20,16,.22) 100%),
               linear-gradient(0deg,rgba(24,20,16,.7) 0%,rgba(24,20,16,0) 45%),
               linear-gradient(180deg,rgba(24,20,16,.6) 0%,rgba(24,20,16,0) 24%)}
.hero--page:has(.hero-media)::before{display:none}
.hero--page:has(.hero-media) .bg-fig{color:rgba(var(--accent-rgb),.55)}
.hero--page h1{font-size:clamp(2.6rem,5.6vw,5rem)}
.hero .lede{color:rgba(var(--white-rgb),.86)}
.hero .crumb{color:rgba(var(--white-rgb),.8)}
/* La feuille claire monte sur le hero, coins arrondis. */
.hero+.sec{margin-top:calc(var(--radius-lg) * -1);position:relative;z-index:2;border-radius:var(--radius-lg) var(--radius-lg) 0 0!important}
/* Pages sans suite (404, merci) : le hero occupe l'écran, sans réserve en bas. */
.hero--page:not(:has(+.sec)){min-height:100dvh;justify-content:center;padding-bottom:5rem}

@media(max-width:900px){
    .hero--page{min-height:min(74vh,640px);padding:7.5rem 0 calc(3rem + var(--radius-lg))}
}

/* ==== NON CRITIQUE ======================================================== */

/* Le grain de la v3 est retiré : il n'existe pas sur l'accueil v4 et coûte cher par-dessus une vidéo. */
body::after{display:none}

/* ---------- Titres de section : l'échelle de l'accueil -------------------- */
.sec .display,.closing .display{font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.04}

/* ---------- Transitions entre sections : plus de coins arrondis en bas ----- */
.sec--light:has(+.sec--dark),.sec--cream:has(+.sec--dark),
.sec--light:has(+.closing),.sec--cream:has(+.closing),
.sec--light:has(+.mobile-cta),.sec--cream:has(+.mobile-cta),
.sec--light:has(+footer),.sec--cream:has(+footer),
.sec--light:has(+.back-to-top),.sec--cream:has(+.back-to-top){border-radius:0}
.sec:has(+.closing){background:var(--white)}

/* ---------- Bloc final : une carte d'encre, image floutée en fond ---------- */
.closing{margin:0 10px 10px;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
    padding:clamp(5rem,10vw,8rem) 0;text-align:center}
.closing .bg-fig,.closing .blueprint{display:none}
.closing-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.closing-media video,.closing-media img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(34px) saturate(1.25);opacity:.95}
.closing-media::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(24,20,16,.3),rgba(24,20,16,.74))}
.closing .container:not(:has(.contact-form)) .display{max-width:20ch;margin-left:auto;margin-right:auto}
.closing .container:not(:has(.contact-form)) p{margin-left:auto;margin-right:auto}
.closing p{color:rgba(var(--white-rgb),.84)}
.closing-contact{color:rgba(var(--white-rgb),.7)}

/* ---------- Pied de page clair, grand mot en encre ------------------------ */
footer{background:var(--white);color:var(--ink);border-top:0;padding:4.5rem 0 0}
.footer-grid{padding-bottom:3rem}
.footer-brand img{filter:none;width:auto;height:26px;margin-bottom:1.1rem}
.footer-brand p{font-size:.92rem;color:var(--gray-700);max-width:36ch}
.footer-col h5{font-family:var(--font-body);font-size:.95rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:1rem}
.footer-col ul{gap:.6rem}
.footer-col a{font-size:.9rem;color:var(--gray-700)}
.footer-col a:hover{color:var(--ink);padding-left:0}
.footer-bottom{border-top:1px solid var(--rule-l);padding:1.3rem 0}
.footer-bottom span,.footer-bottom a{font-family:var(--font-body);font-size:.8rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--gray-500)}
.footer-word{font-weight:600;text-transform:none;text-align:left;font-size:clamp(5rem,25.5vw,26rem);letter-spacing:-.055em;
    padding:0 0 0 var(--gutter);margin:1.5rem 0 -.1em;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);transform:none}

/* ---------- Boutons flottants --------------------------------------------- */
.back-to-top{border-color:transparent}
@media(max-width:1150px){.mobile-cta{background:var(--ink);color:var(--white)}}