/* ============================================================
   Diwanat — couche de finition (additive)
   Chargée APRÈS le <style> de chaque page : Diwanat.html,
   conseil.html, business-decision.html.
   Aucun token modifié, aucune structure touchée. Détails
   typographiques, micro-interactions, matière papier.
   ============================================================ */

/* ---------- 1. Ancres : la barre collante ne masque plus la cible ---------- */
[id]{scroll-margin-top:104px}

/* ---------- 2. Matière : grain de papier très léger ---------- */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 3. Typographie ---------- */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.prose p,.hero-lede,.contact-promise,.manifesto p{hanging-punctuation:first allow-end}
/* chiffres alignés en colonne partout où ils comptent */
.mono,.delta,.ck-row .val,.stat .figure,.price-figure,.phase-n,.o-id,.sec-head .num,.foot-bottom{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum"}
/* ligatures et italiques soignées dans le serif */
.serif,.hero h1,.sec-head h2,.quote-lead,.o-title,.degre-label,.frame h3,.step h4,.manifesto h2,.contact h2,.price-title,.cockpit-title{font-kerning:normal;font-variant-ligatures:common-ligatures contextual}
.quote-lead,.hero h1 em,.italic-accent{font-synthesis:none}

/* ---------- 4. Le filet rouille : signature d'en-tête de section ---------- */
.eyebrow::before,.sec-head .num::before{content:"";display:inline-block;width:16px;height:1px;margin:0 10px 4px 0;background:var(--accent);vertical-align:middle}
.manifesto .eyebrow::before{background:var(--accent-soft)}
.hero .eyebrow::before{content:none}

/* ---------- 5. Liens : soulignement à l'encre ---------- */
.prose a,.link-quiet,.contact-promise a,.manifesto p a,.stat .src a{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .4s cubic-bezier(.22,1,.36,1),color .2s;padding-bottom:1px}
.prose a:hover,.link-quiet:hover,.contact-promise a:hover,.manifesto p a:hover{background-size:100% 1px}
.foot-top a{position:relative;width:fit-content}
.foot-top a::after{content:"";position:absolute;left:0;right:auto;bottom:2px;width:0;height:1px;background:var(--accent);transition:width .35s cubic-bezier(.22,1,.36,1)}
.foot-top a:hover::after{width:100%}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px;border-radius:1px}

/* ---------- 6. Boutons : la flèche avance, le bouton s'enfonce ---------- */
.btn svg,.o-cta svg{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.btn:hover svg,.o-cta:hover svg{transform:translateX(3px)}
.btn:active,.o-cta:active{transform:translateY(1px)}
.btn-primary{box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 30%,transparent),0 10px 24px -14px color-mix(in srgb,var(--ink) 55%,transparent)}
.btn-primary:hover{box-shadow:0 1px 0 var(--accent-deep),0 12px 26px -12px color-mix(in srgb,var(--accent) 50%,transparent)}

/* ---------- 7. En-tête : jauge de lecture (rouille, 1px) ---------- */
header.nav{position:sticky}
@supports (animation-timeline:scroll()){
  header.nav::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;animation:om-progress linear both;animation-timeline:scroll(root block)}
  @keyframes om-progress{to{transform:scaleX(1)}}
}
.nav-link{padding-bottom:4px}
.nav-link::before{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .3s cubic-bezier(.22,1,.36,1)}
.nav-link:hover::before{width:100%}
.nav-link.active::before{content:none}
.brand{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.brand:hover{transform:translateY(-1px)}

/* ---------- 8. Cockpit : repères de coupe d'imprimeur ---------- */
.cockpit{position:relative}
.cockpit::before,.cockpit::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none;opacity:.85}
.cockpit::before{top:-1px;left:-1px;border-top:1px solid var(--accent);border-left:1px solid var(--accent)}
.cockpit::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent)}
.ck-row{transition:background .3s ease}
.ck-row:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.ck-decision{box-shadow:0 10px 30px -18px color-mix(in srgb,var(--ink) 70%,transparent)}

/* ---------- 9. Lignes et cartes : la rouille apparaît au survol ---------- */
.offer{position:relative}
.offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.offer:hover::before,.offer.active::before{transform:scaleY(1)}
.offer:hover .o-id{color:var(--accent)}
.o-id,.phase-n,.step .step-meta .n,.friction .tag{transition:color .3s ease}
.degre,.volet,.frame,.eng,.phase,.friction,.stat,.step{transition:background .35s ease}
.degre:hover,.phase:hover,.friction:hover,.stat:hover,.step:hover{background:color-mix(in srgb,var(--paper) 55%,transparent)}
.frame:hover,.volet:hover,.eng:hover{background:var(--paper)}
.degre{position:relative}
.degre::after{content:"";position:absolute;left:-14px;top:34px;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.degre:hover::after{opacity:1;transform:none}
.phase:hover .phase-n,.friction:hover .tag{color:var(--accent)}
.bordure{position:relative}
.bordure::before{content:"";position:absolute;left:-4px;top:0;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- 10. Manifeste : lettrine ---------- */
.manifesto p:first-of-type::first-letter{float:left;font-family:'EB Garamond',ui-serif,Georgia,serif;font-size:62px;line-height:.82;padding:6px 14px 0 0;color:var(--accent-soft);font-weight:500}
.manifesto-sig{position:relative}
.manifesto-sig::after{content:"";position:absolute;right:0;top:-4px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- 11. Section sombre / prix : mêmes soins ---------- */
.price .btn-light:hover,.manifesto .btn-light:hover{box-shadow:0 12px 28px -16px rgba(0,0,0,.6)}

/* ---------- 12. Apparition au défilement (accueil React, pilotée par le CSS) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    #root :is(.sec-head,.offer,.step,.stat,.degre,.friction,.quote-lead,.bordure,.contact-list,.form-card,.manifesto-sig){animation:om-rise linear both;animation-timeline:view();animation-range:entry 4% entry 46%}
  }
}
@keyframes om-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* stagger léger sur les grilles à révélation (sous-pages) */
.phases .reveal:nth-child(2),.volets .reveal:nth-child(2),.frames .reveal:nth-child(2),.eng-grid .reveal:nth-child(2){transition-delay:.07s}
.phases .reveal:nth-child(3),.volets .reveal:nth-child(3),.frames .reveal:nth-child(3),.eng-grid .reveal:nth-child(3){transition-delay:.14s}
.phases .reveal:nth-child(4),.volets .reveal:nth-child(4),.eng-grid .reveal:nth-child(4){transition-delay:.21s}
.phases .reveal:nth-child(5){transition-delay:.28s}

/* ---------- 13. Repères de coupe : la page comme une feuille imprimée ---------- */
html::before{content:"";position:fixed;inset:14px;z-index:59;pointer-events:none;opacity:.45;
  background:
    linear-gradient(var(--ink-mute),var(--ink-mute)) 0 0/1px 13px no-repeat,
    linear-gradient(var(--ink-mute),var(--ink-mute)) 0 0/13px 1px no-repeat,
    linear-gradient(var(--ink-mute),var(--ink-mute)) 100% 0/1px 13px no-repeat,
    linear-gradient(var(--ink-mute),var(--ink-mute)) 100% 0/13px 1px no-repeat,
    linear-gradient(var(--ink-mute),var(--ink-mute)) 0 100%/1px 13px no-repeat,
    linear-gradient(var(--ink-mute),var(--ink-mute)) 0 100%/13px 1px no-repeat,
    linear-gradient(var(--ink-mute),var(--ink-mute)) 100% 100%/1px 13px no-repeat,
    linear-gradient(var(--ink-mute),var(--ink-mute)) 100% 100%/13px 1px no-repeat}
@media (max-width:900px){html::before{display:none}}

/* ---------- 14. Divers ---------- */
/* une offre sans lien ne se présente pas comme cliquable */
.offer:not(:has(.o-cta)){cursor:default}
html{scrollbar-color:var(--ink-mute) transparent;scrollbar-width:thin}
::selection{text-shadow:none}
img{-webkit-user-drag:none}
@media (prefers-reduced-motion:reduce){
  .btn svg,.o-cta svg,.brand,.nav-link::before,.offer::before,.degre::after{transition:none}
  .pulse,.scroll-cue .bar{animation:none}
}
@media print{
  body::after,html::before,header.nav::after,.cockpit::before,.cockpit::after{display:none}
  .offer::before,.degre::after{display:none}
}