/* Refonte : ajouts à la charte v2 (transitions entre pages, Sankey vertical sur mobile). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Sankey : grand format au-delà de 900 px ; en dessous, format compact horizontal (4 modèles + Autres), libellés horizontaux ≥ 12 px. */
.sankey--m { display: none; max-width: 340px; margin-inline: auto; }
@media (max-width: 900px) {
  .sankey:not(.sankey--m) { display: none; }
  .sankey--m { display: block; }
  .sankey--m .sk-lab { font-size: 13px; }
  .sankey--m .sk-val { font-size: 12px; letter-spacing: 0; }
  .sankey--m .sk-corelab { font-size: 14px; }
}
}
/* Emplacements à compléter (relecture juridique à venir) */
.a-completer { background: rgba(221,172,99,.18); color: inherit; border: 1px dashed var(--gold-400, #ddac63); padding: 0 .3em; border-radius: 3px; }
/* Pied de page : titres de colonnes en h2 (ordre des titres), même rendu que l'ancien h4 */
.foot .foot__title{font:700 13px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-200);margin:0 0 14px;max-width:none;text-wrap:initial}
/* Créer et Prouver : même mécanisme que le Sankey de Contrôler (--q de la scène épinglée → --k du panneau), scrubbé et réversible.
   Chaque ligne a sa propre timeline --t (0 → 1) : --r apparition, --s coche/sceau, --a mise en avant de l'étape en cours, --c maillon de chaîne. */
/* Trois plages contiguës (aucun palier figé entre deux blocs) : Créer q 0 → ⅓, Contrôler ⅓ → ⅔, Prouver ⅔ → 1 */
.pin3 .pin3__panel:nth-child(1){--k:clamp(0,calc(var(--q) * 3.05),1);--st:.22}
.pin3 .pin3__panel:nth-child(2){--k:clamp(0,calc((var(--q) - .3333) * 3.05),1)}
.pin3 .pin3__panel:nth-child(3){--k:clamp(0,calc((var(--q) - .6667) * 3.05),1);--st:.17}
.seq-panel{--pk:var(--k,1)}
.seq .seq-row{--t:calc((var(--pk,1) - var(--i) * var(--st,.2)) / var(--st,.2));
  --r:clamp(0,calc(var(--t) * 2.2),1);--s:clamp(0,calc((var(--t) - .45) * 2.6),1);
  --a:clamp(0,calc(1 - max(var(--t) - .55, .55 - var(--t)) * 1.7),1);--c:clamp(0,calc((var(--t) - .8) * 4),1);
  opacity:var(--r);transform:translate3d(calc((1 - var(--r)) * -48px),calc((1 - var(--r)) * 22px),0) scale(calc(1 + var(--a) * .03),calc(.4 + var(--r) * (.6 + var(--a) * .03)));transform-origin:left bottom;
  background:rgba(221,172,99,calc(var(--a) * .16))}
.seq .seq-row td:first-child{box-shadow:inset 3px 0 0 rgba(221,172,99,var(--a))}
/* Barre de progression verticale (remplissage = --k) */
.seq-panel .ui__body{position:relative;padding-left:18px}
.seq-panel .ui__body::before,.seq-panel .ui__body::after{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:3px;border-radius:2px;background:rgba(221,172,99,.18)}
.seq-panel .ui__body::after{background:var(--gold-400,#ddac63);transform:scaleY(var(--pk,1));transform-origin:top;box-shadow:0 0 10px rgba(221,172,99,.5)}
/* Compteur d'étape (1/4 … 4/4) : positions empilées, une seule visible */
.seq-count{display:inline-grid;margin-left:auto;margin-right:12px;font:600 12px/1 var(--font-mono);letter-spacing:.08em;color:var(--gold-400,#ddac63)}
.seq-count>span{grid-area:1/1;opacity:var(--l,0)}   /* sans JS : N/N ; avec JS : nombre de lignes visibles (motion.js) */
/* Créer : la coche se dessine puis le badge « sous contrôle » s'allume */
.seq--create .seq-row .pill{display:inline-block;opacity:var(--s);transform:scale(calc(.55 + var(--s) * .45));box-shadow:0 0 0 1px rgba(221,172,99,var(--s)),0 0 14px rgba(221,172,99,calc(var(--s) * .35))}
.seq--create .seq-row .pill::before{content:"✓";display:inline-block;margin-right:.35em;color:var(--gold-400,#ddac63);clip-path:inset(0 calc((1 - var(--s)) * 100%) 0 0)}
/* Prouver : un sceau se pose sur chaque événement, une chaîne relie les lignes, « Chaîne vérifiée » arrive en dernier */
.seq--prove .seq-row .sig{position:relative;padding-left:30px;opacity:clamp(.35,var(--s),1)}
.seq--prove .seq-row .sig::before{content:"";position:absolute;left:4px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
  background:conic-gradient(var(--gold-400,#ddac63) calc(var(--s) * 360deg),rgba(221,172,99,.15) 0);
  -webkit-mask:radial-gradient(circle,transparent 6px,#000 6.5px);mask:radial-gradient(circle,transparent 6px,#000 6.5px);
  transform:scale(calc(2.2 - var(--s) * 1.2)) rotate(calc((1 - var(--s)) * -90deg));box-shadow:0 0 12px rgba(221,172,99,calc(var(--s) * .5))}
.seq--prove .seq-row .sig::after{content:"";position:absolute;left:12px;top:calc(50% + 9px);width:2px;height:calc(100% - 18px);background:var(--gold-400,#ddac63);transform:scaleY(var(--c));transform-origin:top}
.seq--prove .seq-row:last-child .sig::after{display:none}
.seq-chain{opacity:clamp(0,calc((var(--pk,1) - .88) * 9),1);transform:scale(calc(1.15 - clamp(0,calc((var(--pk,1) - .88) * 9),1) * .15))}

.pin3 .word-seq h2.w{margin:0;max-width:none}
/* Mobile (≤ 900 px) : plus d'épinglage ; titre, surtitre puis illustration, bloc par bloc ; une ligne dorée relie les trois blocs. */
@media (max-width:900px){
  .pin3__stage{display:flex;flex-direction:column;gap:20px;padding-left:calc(var(--gutter) + 20px);padding-top:32px}
  /* la scène « L'enjeu » (100svh, contenu centré) laissait ~250 px vides avant « Créer » */
  .scene:has(+ .pin3){min-height:0;padding-bottom:40px}
  .pin3 .word-seq,.pin3 .pin3__visual{display:contents}
  .pin3 .word-seq .w{opacity:1;margin:0;max-width:none}
  .pin3 .word-seq .w small{opacity:1}
  .pin3 .word-seq .w:nth-child(1){order:1}.pin3 .pin3__panel:nth-child(1){order:2}
  .pin3 .word-seq .w:nth-child(2){order:3;margin-top:40px}.pin3 .pin3__panel:nth-child(2){order:4}
  .pin3 .word-seq .w:nth-child(3){order:5;margin-top:40px}.pin3 .pin3__panel:nth-child(3){order:6}
  .pin3__stage::before,.pin3__stage::after{content:"";position:absolute;left:var(--gutter);top:96px;bottom:48px;width:2px;background:rgba(221,172,99,.15)}
  .pin3__stage::after{background:linear-gradient(180deg,var(--gold-400,#ddac63) 88%,transparent);transform:scaleY(var(--q,1));transform-origin:top;transition:transform .6s linear}
  /* Événements signés : 4 lignes (la 5e reste dans le HTML) */
  .seq--prove tr:nth-child(6){display:none}
  .seq--prove tr:nth-child(5) .sig::after{display:none}
  .seq-panel:has(.seq--prove) .seq-count{display:none}
}
@media (max-width:900px) and (prefers-reduced-motion: no-preference){
  /* chaque ligne progresse selon sa propre position dans l'écran (--p de motion.js) */
  .seq .seq-row{--t:calc((var(--p,1) - .04) * 4.5)}
  .pin3 .pin3__panel.seq-panel{--k:clamp(0,calc((var(--p,1) - .12) * 3),1)!important}
  .pin3 .pin3__panel.sk-panel{--k:clamp(0,calc((var(--p,1) - .08) * 2.6),1)!important}
}
@media (prefers-reduced-motion: reduce){
  .pin3 .pin3__panel.seq-panel{--k:1!important}
  .seq .seq-row{--t:5!important;transform:none!important;opacity:1!important}
  .seq .seq-row .pill,.seq .seq-row .sig,.seq-chain{opacity:1!important;transform:none!important}
  .pin3__stage::after{transform:none!important;transition:none}
}

/* Captures démo · bloc « Ascenzia Sentinel, en vrai. » */
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:32px 0}
.demo-frame{margin:0;background:var(--navy-900,#1a202c);border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.demo-frame__bar{display:flex;gap:6px;padding:8px 10px;background:var(--navy-900,#1a202c);border-bottom:1px solid rgba(255,255,255,.08)}
.demo-frame__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.demo-frame img{display:block;width:100%;height:auto}
@media (max-width:720px){.demo-grid{grid-template-columns:1fr}}

.demo-grid--single{grid-template-columns:1fr;max-width:1040px;margin-inline:auto}
.demo-grid figure:last-child:nth-child(odd){grid-column:1/-1}