/* ==========================================================================
   COUCHE DÉCOR, même direction artistique, forme enrichie.
   Chargée APRÈS app.css : elle ne remplace pas la base, elle l'habille.

   Le décor n'est pas décoratif au hasard : il reprend « le motif de marque »
   de la charte (chap. 02.8), un arc de quart de cercle ouvert vers la droite
   et une diagonale entrante à 45°, sur une trame de 48 px, posé en filigrane.
   ========================================================================== */

/* Les trames sont désormais des jetons d'app.css, avec leur variante sombre. */

/* ---------- 1. Le filigrane de page ---------------------------------- */

/* Le fond de la page : une trame de pointillés sur 24 px, présente d'un
   bout à l'autre. C'est la matière du papier, pas un filigrane qui s'efface.
   Le calque est plus haut que l'écran pour que la parallaxe ne découvre
   jamais le bas. */
.motif{
  position:fixed;left:0;right:0;top:-10vh;height:130vh;
  z-index:-1;pointer-events:none;
  background-image:var(--points-clairs);
  background-size:24px 24px;
  opacity:.85;
  will-change:transform;
}

/* Sous les cartes, la trame se retire : le texte garde un fond franc. */
.card,.hud,.mod,.panel,.simcard{position:relative}

/* L'arc ambre qui déborde du hero, à droite. Un seul par écran. */
.arc-hero{
  position:absolute;top:-160px;right:-220px;width:620px;height:620px;
  border-radius:50%;pointer-events:none;z-index:-1;
  border:1.5px solid var(--gold);
  opacity:.20;
  -webkit-mask-image:linear-gradient(210deg,#000 10%,transparent 62%);
  mask-image:linear-gradient(210deg,#000 10%,transparent 62%);
  animation:arcIn 1.5s var(--ease) both;
}
.arc-hero::after{
  content:'';position:absolute;inset:56px;border-radius:50%;
  border:1px solid var(--gold);opacity:.5;
}
@keyframes arcIn{
  from{transform:rotate(-26deg) scale(.86);opacity:0}
  to{transform:none;opacity:.20}
}

main{position:relative}
/* L'arc décoratif dépasse volontairement du bloc : sans découpe, il élargit
   le document et la page défile latéralement (267 px constatés). */
.sec.airy{position:relative;overflow:hidden}

/* ---------- 2. Le monogramme animé ----------------------------------- */

/* L'anneau se trace au chargement, la flèche entre ensuite. */
.mark svg{overflow:visible}
.brand .mark{
  transition:transform .5s var(--ease);
  animation:markIn .9s var(--ease) both;
}
@keyframes markIn{
  from{transform:rotate(-70deg) scale(.6);opacity:0}
  to{transform:none;opacity:1}
}
.brand:hover .mark{transform:rotate(180deg)}

/* Halo ambre au survol : la marque respire, sans changer de couleur. */
.brand .mark{position:relative}
.brand .mark::before{
  content:'';position:absolute;inset:-7px;border-radius:50%;
  background:var(--gold);opacity:0;transform:scale(.6);
  transition:opacity .35s ease,transform .45s var(--ease);
  z-index:-1;filter:blur(7px);
}
.brand:hover .mark::before{opacity:.35;transform:scale(1)}

/* ---------- 3. L'eyebrow : le point devient un pouls ----------------- */

.eyebrow::before{
  box-shadow:0 0 0 0 rgba(43,143,255,.55);
  animation:pouls 3.4s var(--ease) infinite;
}
@keyframes pouls{
  0%,72%{box-shadow:0 0 0 0 rgba(43,143,255,.5)}
  88%{box-shadow:0 0 0 7px rgba(43,143,255,0)}
  100%{box-shadow:0 0 0 0 rgba(43,143,255,0)}
}

/* ---------- 4. Orchestration des entrées ------------------------------ */

/* Tout ce qui compose une page entre dans le même mouvement : une montée
   de 12 px avec fondu, décalée élément par élément. Les retards restent
   courts (0,05 s à 0,45 s) pour que la page soit lisible tout de suite. */
@keyframes monte{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.sec .eyebrow,
.sec h1, .sec h2, .sec .lede,
.mhead-n, #resume, .player, #sim, #pied,
.mods, footer.site .wrap > *{
  animation:monte .32s var(--ease) both;
}

/* --- Accueil --- */
.sec.airy .eyebrow{animation-delay:.05s}
.sec.airy h1{animation-delay:.13s}
.sec.airy .lede{animation-delay:.24s}
.accroche{animation:monte .32s var(--ease) .30s both}
.hud{animation-delay:.34s}
.sec:not(.airy) .eyebrow{animation-delay:.06s}
.mods{animation-delay:.10s}

/* La pastille du titre garde son mouvement propre : elle se pose après
   que la ligne est en place. */
h1 .hl{
  animation:pastille .75s var(--ease) .34s both;
  transform-origin:left center;
}
@keyframes pastille{
  from{opacity:0;transform:translateY(8px) scaleX(.93)}
  to{opacity:1;transform:none}
}

/* --- Page module --- */
.mhead .eyebrow{animation-delay:.05s}
.mhead-n{animation-delay:.09s}
.sec.airy h1{animation-delay:.13s}
#resume{animation-delay:.20s}
.player{animation-delay:.28s}
#sim{animation-delay:.36s}
#pied{animation-delay:.44s}

/* --- Pied de page --- */
footer.site .wrap > *{animation-delay:.20s}

/* ---------- 5. Le tableau de bord ------------------------------------ */

.hud{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--surface) 94%,transparent)),
    var(--points-clairs);
  background-size:auto,24px 24px;
  box-shadow:var(--sh-1);
}
/* Liseré ambre en haut de carte : le seul accent de la zone. */
.hud::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(43,143,255,0) 62%);
}

.ring svg{filter:drop-shadow(0 2px 6px rgba(43,143,255,.28))}
.ring .bar{stroke-linecap:round}
/* Anneau témoin qui tourne lentement : le parcours est « vivant ». */
.ring::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px dashed var(--line);opacity:.75;
  animation:tourne 34s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}

.ring-v{font-variant-numeric:tabular-nums}

/* Les étapes se remplissent de gauche à droite. */
.step{position:relative;overflow:hidden;background:var(--line-2)}
.step.done::after{
  content:'';position:absolute;inset:0;background:var(--gold);
  transform-origin:left;animation:remplit .55s var(--ease) both;
}
@keyframes remplit{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.step.now{background:var(--ink)}
.step.now::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:balaye 2.6s var(--ease) infinite;
}
@keyframes balaye{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Les deux entrées du fil arrivent après les étapes. */
.suite-i{animation:monte .3s var(--ease) both}
.suite-i:nth-child(1){animation-delay:.40s}
.suite-i:nth-child(2){animation-delay:.50s}

/* ---------- 6. Les cartes de module ---------------------------------- */

.mod{position:relative;overflow:hidden}

/* Le numéro fantôme, très grand, en fond de carte. */
.mod::before{
  content:'';position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:190px;height:190px;pointer-events:none;
  background-image:var(--motif);background-size:64px 64px;
  opacity:0;transition:opacity .4s ease,transform .5s var(--ease);
}
.mod:hover::before{opacity:.09;transform:translateY(-50%) translateX(-10px)}

.mod-n{
  position:relative;display:inline-block;
  transition:transform .35s var(--ease),color .3s ease;
}
.mod:hover .mod-n{transform:translateY(-2px)}

/* Le liseré de validation se dessine au lieu d'apparaître. */
.mod.done{border-left-color:transparent;}
.mod.done::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold);transform-origin:top;
  animation:trace .6s var(--ease) both;
}
@keyframes trace{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.mod-go{position:relative;overflow:hidden}
.mod-go svg{transition:transform .3s var(--ease)}
.mod:hover .mod-go svg{transform:translateX(4px)}

/* Carte verrouillée : trame diagonale discrète. */
.mod.locked{
  background-image:repeating-linear-gradient(
    -45deg, transparent 0 9px, var(--hachure) 9px 18px);
}
.mod.locked .lock{transition:transform .3s var(--ease)}
.mod.locked:hover .lock{transform:scale(1.12)}

/* ---------- 7. Boutons ----------------------------------------------- */

.btn{position:relative;overflow:hidden}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary:hover,.btn-gold:hover{transform:translateY(-1px)}
.btn-primary,.btn-gold{box-shadow:var(--sh-1)}

/* Balayage lumineux sur le bouton principal, au survol seulement. */
.btn-primary::after,.btn-gold::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-120%);
}
.btn-primary:hover::after,.btn-gold:hover::after{
  animation:eclat .75s var(--ease) both;
}
@keyframes eclat{to{transform:translateX(120%)}}

/* ---------- 8. Page module ------------------------------------------- */

.player{position:relative;box-shadow:var(--sh-2)}
/* Coins tracés : le cadre du lecteur devient un objet. */
.player::before,.player::after{
  content:'';position:absolute;width:26px;height:26px;pointer-events:none;z-index:2;
  border:1.5px solid var(--gold);opacity:.55;
}
.player::before{left:12px;top:12px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.player::after{right:12px;bottom:12px;border-left:0;border-top:0;border-radius:0 0 8px 0}

.player-todo{background-image:var(--points);background-size:22px 22px}

.mhead-n{position:relative;padding-left:14px}
.mhead-n::before{
  content:'';position:absolute;left:0;top:50%;width:8px;height:1px;
  background:var(--line);
}

/* ---------- 9. Bandeau simulateur et fin ----------------------------- */

.simcard{position:relative;overflow:hidden}
.simcard::before{
  content:'';position:absolute;right:-70px;bottom:-90px;width:260px;height:260px;
  border-radius:50%;border:1.5px solid var(--gold);opacity:.28;pointer-events:none;
}
.simcard::after{
  content:'';position:absolute;right:-20px;bottom:-40px;width:160px;height:160px;
  border-radius:50%;border:1px solid var(--gold);opacity:.2;pointer-events:none;
}

.done-banner{position:relative;overflow:hidden}
.done-banner::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--points);background-size:24px 24px;opacity:.5;
}

/* ---------- 10. Fil de lecture --------------------------------------- */

/* Barre de défilement en haut : où on en est dans la page.
   La barre du bas reste celle du parcours. */
.scrollbar{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;
  background:transparent;pointer-events:none;
}
.scrollbar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold-600),var(--gold));
}

.rail{height:4px}
.rail i{position:relative;overflow:hidden}
.rail i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:balaye 3.4s var(--ease) infinite;
}

/* ---------- 11. Apparitions en cascade -------------------------------- */

.rise{animation-duration:.65s}

/* Les cartes entrent l'une après l'autre. Animation CSS pure, pas
   d'observateur : une animation se termine toujours, alors qu'un script
   qui échoue laisserait les cartes invisibles. */
@keyframes entreCarte{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.mod{animation:entreCarte .3s var(--ease) both}
.mod:nth-child(1){animation-delay:.05s}
.mod:nth-child(2){animation-delay:.12s}
.mod:nth-child(3){animation-delay:.19s}
.mod:nth-child(4){animation-delay:.26s}
.mod:nth-child(5){animation-delay:.33s}
.mod:nth-child(6){animation-delay:.40s}

/* Révélation au défilement.
   Le masquage n'est appliqué que si decor.js a pu installer l'observateur
   (classe `defile` sur <html>). Sans lui, les cartes gardent la cascade au
   chargement ci-dessus : dans tous les cas, elles finissent visibles. */
html.defile .mod{
  animation:none;
  opacity:0;
  transform:translateY(8px);
}
html.defile .mod.vu{
  opacity:1;
  transform:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             border-color .2s ease, box-shadow .2s ease;
}

/* ---------- 12. Sobriété imposée -------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .arc-hero,.brand .mark,h1 .hl,.step.done::after,.mod.done::after{animation:none}
  .sec .eyebrow,.sec h1,.sec h2,.sec .lede,.accroche,
  .mhead-n,#resume,.player,#sim,#pied,.mods,footer.site .wrap > *{
    animation:none;opacity:1;transform:none;
  }
  .ring::after,.step.now::after,.rail i::after,.eyebrow::before{animation:none}
  .mod{animation:none;opacity:1;transform:none}
  .motif{transform:none !important}
}

/* ---------- 13. Mobile : on allège le décor --------------------------- */

@media (max-width:767px){
  .arc-hero{width:380px;height:380px;top:-110px;right:-170px}
  .motif{opacity:.7;background-size:20px 20px}
  .mod::before{display:none}
  .simcard::before{right:-100px;bottom:-120px}
  .player::before,.player::after{width:18px;height:18px}
  .ring::after{inset:-4px}
}


/* ---------- Incisiv (maquette du 15/09/2026) ---------------------------
   Ce qui n'appartient pas au langage d'Incisiv s'efface : les arcs ambrés,
   le halo autour du logo, les coins tracés du lecteur, les cercles du
   bandeau simulateur. La trame de points, les révélations, l'anneau, le fil
   et les balayages restent, au bleu des courbes. */
.arc-hero,.brand .mark::before,.player::before,.player::after,.simcard::before,.simcard::after{display:none}
.hud::before{background:linear-gradient(90deg,var(--gold),rgb(43 143 255 / 0) 62%)}
.done-banner::before{background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--on-night) 14%,transparent) 1px, transparent 0);opacity:.6}
.ring::after{border-color:var(--line-fort)}
.motif{opacity:1}

/* ---------- RESTRUCTURATION (15/09/2026 au soir) ----------------------
   Les cercles et les carrés décoratifs partent : motif et liseré des cartes,
   hachure des modules fermés, filet du tableau de bord, pouls des libellés. */
.mod::before,.mod.done::after,.hud::before{display:none}
.mod.locked{background-image:none}
.eyebrow::before{animation:none}