/* =============================================================================
   RITUEL D'AFFECTATION — STYLE
   Kreig Stellar / Les Chroniques de Myrthara
   navy nocturne + or patine — Cormorant Garamond
============================================================================= */

/* --- Palette & jetons ----------------------------------------------------- */
:root{
  --navy-0:   #05080f;
  --navy-1:   #0a1120;
  --navy-2:   #0d1729;
  --navy-3:   #122038;
  --ink:      #e9e2cf;
  --ink-soft: #b9b39e;

  --gold-1:   #6e5a2c;
  --gold-2:   #b9933f;
  --gold-3:   #d8b35f;
  --gold-4:   #f0d692;
  --gold-glow:#ffe9a8;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html, body{ height:100%; margin:0; }
html{ background: var(--navy-0); }

body{
  font-family: var(--serif);
  color: var(--ink);
  background: var(--navy-0);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Scene plein ecran ---------------------------------------------------- */
#stage{
  position: fixed;
  inset: 0;
  background: var(--navy-0);
  overflow: hidden;
}

/* --- Decor : couche FIXE, calee sur la fenetre ---------------------------- *
 * Le decor (gradient ambiant + photo) vit ici, en position:fixed, et NON sur
 * #stage. Ainsi, quand le contenu grandit sur mobile (insertion des reponses)
 * ou que la barre d'URL apparait/disparait, le fond ne se redimensionne pas :
 * plus de « saut » de l'image. L'image elle-meme est posee par app.js.
 */
#bgLayer{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--navy-0);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-blend-mode: screen, normal;
  pointer-events: none;
}
#stage::after{   /* vignettage nocturne */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(130% 110% at 50% 45%, transparent 52%, rgba(0,0,0,.62) 100%);
  pointer-events:none;
  z-index: 5;
}

/* --- Poussiere d'or -------------------------------------------------------- */
#dust{ position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
#dust .mote{
  position:absolute;
  bottom:-8px;
  width:2px; height:2px;
  border-radius:50%;
  background: radial-gradient(circle, var(--gold-glow), rgba(216,179,95,0));
  opacity:0;
  animation: rise linear infinite;
}
@keyframes rise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  12%{ opacity:.7; }
  85%{ opacity:.5; }
  100%{ transform: translateY(-104vh) translateX(var(--drift,0)); opacity:0; }
}

/* --- Le Chroniqueur : deux couches superposees pour le fondu enchaine ------ */
#chroniqueur, #chroniqueurB{
  position:absolute;
  right: 2.5vw;
  bottom: 8rem;
  height: 80%;
  width: auto;
  max-width: 46vw;
  object-fit: contain;
  object-position: bottom right;
  z-index: 6;
  opacity: 0;                 /* couche cachee par defaut */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.6));
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
  will-change: opacity, transform;
}
#chroniqueur.is-front, #chroniqueurB.is-front{ opacity: 1; }   /* couche visible */

/* --- Banniere verticale (haut-gauche) ------------------------------------- */
#banner{
  position:absolute;
  top: 2.4vh; left: 2.2vw;
  width: clamp(150px, 14vw, 230px);
  aspect-ratio: 763 / 1092;
  background: center/contain no-repeat;
  z-index: 9;
  display:flex; flex-direction:column; align-items:center;
  padding-top: var(--banner-title-top, 42%);
  text-align:center;
}
#banner .banner-title{
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size: clamp(.8rem, 1.15vw, 1.18rem);
  line-height:1.5;
  color: var(--gold-3);
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
#banner .banner-title span{ display:block; }
#banner .banner-title span:last-child{ color: var(--ink); font-style:italic; letter-spacing:.06em; }

/* --- Jauge de progression (bas-droite) ------------------------------------ */
#progress{
  position:absolute;
  right: 2vw; bottom: 2.2vh;
  z-index: 9;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.55rem .8rem;
  border:1px solid var(--gold-1);
  border-radius:6px;
  background: linear-gradient(180deg, rgba(13,23,41,.85), rgba(5,8,15,.85));
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(216,179,95,.12);
}
#progress .prog-label{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color: var(--gold-3);
}
#progress .prog-rose{
  width:34px; height:34px; opacity:.9;
  animation: spin 38s linear infinite;
}
#progress .prog-count{ font-size:1.05rem; color: var(--ink); letter-spacing:.08em; }
#progress .prog-count b{ color: var(--gold-4); font-weight:600; }
@keyframes spin{ to{ transform: rotate(360deg);} }

/* --- Zone basse : plaque nom + cartouche principal ------------------------ */
#panel{
  position:absolute;
  left:50%; bottom: 2.2vh;
  transform: translateX(-50%);
  width: min(1180px, 88vw);
  z-index: 8;
  display:flex; flex-direction:column; align-items:center;
}

/* Cartouche principal : plaque du nom integree en haut, separateur a ~58% */
#mainFrame{
  position:relative;
  width:100%;
  aspect-ratio: var(--frame-ratio, 2172 / 672);
  background: center/100% 100% no-repeat;
  background-color: transparent;
}

/* Les cinq tranches mobiles. Sur ordinateur elles s'effacent (display:contents)
   et leurs enfants (namePlate / prompt / answers) se positionnent comme avant,
   directement sur l'image unique du cartouche. La bascule mobile est plus bas. */
.slice{ display:contents; }

/* Plaque du nom, integree en haut-centre de cartoucheNom.webp */
#namePlate{
  position:absolute;
  top: var(--name-top, 8.5%);
  left:50%;
  transform: translateX(-50%);
  width: var(--name-width, 46%);
  text-align:center;
  z-index:2;
  pointer-events:none;
}
#namePlate .name{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  font-size: var(--name-size, clamp(.85rem, 1.35vw, 1.4rem));
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--gold-3);
  text-shadow: 0 1px 8px rgba(0,0,0,.85);
  white-space:nowrap;
}
/* Fondu doux quand le titre change d'une question a l'autre */
#namePlate .name.swap{ animation: nameFade .5s var(--ease) both; }
@keyframes nameFade{
  0%{   opacity:0; filter: blur(2px); }
  100%{ opacity:1; filter: blur(0); }
}

/* zone narrative (au-dessus du separateur) */
#prompt{
  position:absolute;
  left:8%; right:8%;
  top: var(--prompt-top, 23%);
  height: var(--prompt-height, 30%);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
#prompt .prompt-text{
  font-size: clamp(.92rem, 1.45vw, 1.4rem);
  line-height:1.3;
  font-style:italic;
  color: var(--ink);
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
/* Revelation manuscrite : chaque lettre est en place puis se decouvre en
   fondu, avec un leger flou qui se resorbe et une infime descente (encre). */
#prompt .prompt-text .word{
  display:inline-block;
  white-space:nowrap;   /* la coupure ne se fait qu'entre les mots */
}
#prompt .prompt-text .ink{
  display:inline-block;
  opacity:0;
  animation: inkIn .52s var(--ease) both;
}
@keyframes inkIn{
  0%{   opacity:0; transform: translateY(.14em); filter: blur(2px); }
  55%{  opacity:1; }
  100%{ opacity:1; transform: translateY(0);     filter: blur(0); }
}
/* Acceleration : toutes les lettres sautent a leur etat final, sans attendre */
#prompt .prompt-text.done .ink{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Texte de secours pour les lecteurs d'ecran (lettres animees masquees) */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path: inset(50%);
  overflow:hidden; white-space:nowrap;
}
/* zone reponses (sous le separateur) */
#answers{
  position:absolute;
  left:5%; right:5%;
  bottom: var(--answers-bottom, 9%);
  height: var(--answers-height, 21%);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--answers-gap, 1.2%);
  align-items:stretch;
}

/* --- Boutons-reponses (cadres a icone incrustee) -------------------------- */
.answer{
  position:relative;
  border:0;
  cursor:pointer;
  background: center/100% 100% no-repeat;
  background-color: transparent;
  color: var(--ink);
  font-family: var(--serif);
  text-align:left;
  padding: 0 6% 0 var(--answer-pad-left, 27%);
  display:flex; align-items:center;
  min-height:0;
  transition: transform .28s var(--ease), filter .28s var(--ease);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
  
}
.answer .answer-label{
  position:relative;
  z-index:1;
  font-size: clamp(.74rem, .95vw, 1.02rem);
  line-height:1.18;
  letter-spacing:.01em;
  transition: color .24s var(--ease), text-shadow .24s var(--ease);
}
/* leger relief du cadre + libelle qui s'illumine (sans agrandissement) */
.answer:hover, .answer:focus-visible{
  transform: translateY(-3px);
  filter: drop-shadow(0 7px 15px rgba(0,0,0,.5));
  outline:none;
}
.answer:hover .answer-label, .answer:focus-visible .answer-label{
  color: var(--gold-glow);
  text-shadow: 0 0 12px rgba(255,233,168,.55), 0 0 2px rgba(255,233,168,.4);
}
.answer:focus-visible{ box-shadow: 0 0 0 2px var(--gold-3); border-radius:6px; }
.answer.chosen{
  filter: drop-shadow(0 0 22px var(--gold-glow)) brightness(1.3);
  transform: translateY(-5px) scale(1.2);
}

/* --- Revelation de texte (balayage dore) ---------------------------------- */
.reveal{ opacity:0; transform: translateY(8px); }
.reveal.in{ animation: revealUp .7s var(--ease) forwards; }
@keyframes revealUp{
  0%{   opacity:0; transform: translateY(10px); filter: blur(3px); }
  60%{  filter: blur(0); }
  100%{ opacity:1; transform: translateY(0);    filter: blur(0); }
}

.sweep{ position:relative; }
.sweep::after{
  content:"";
  position:absolute; inset:-2px -8px;
  background: linear-gradient(100deg, transparent 0%, rgba(255,233,168,.0) 35%, rgba(255,233,168,.55) 50%, rgba(255,233,168,0) 65%, transparent 100%);
  transform: translateX(-120%);
  pointer-events:none;
}
.sweep.in::after{ animation: sweepX .9s var(--ease) forwards; }
@keyframes sweepX{ to{ transform: translateX(120%);} }

/* --- Ecran d'intro : mise en scene ---------------------------------------- *
 * Reglages alignables sur l'image (la porte). Modifiables aussi via config.js
 * (intro.glowY / glowSize / floorY), qui posent ces variables.
 */
#intro{
  --intro-glow-y:    56%;     /* centre vertical du halo dore */
  --intro-glow-size: 60vmin;  /* diametre du halo */
  --intro-floor-y:   8%;      /* hauteur du reflet au sol (depuis le bas) */
  --intro-floor-w:   52vmin;  /* largeur du reflet au sol */
  position:absolute; inset:0; z-index:12;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 6vw;
  overflow:hidden;
  background:#05080f;          /* base sombre sous l'image */
}

/* Decor : l'image de la porte (posee par app.js) */
#intro .intro-bg{
  position:absolute; inset:0; z-index:0;
  background: center/cover no-repeat;
  opacity:0; transform: scale(1.05);
  transition: opacity 1.3s var(--ease), transform 1.7s var(--ease);
}
#intro .intro-bg::after{   /* voile de lisibilite pour le texte */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,8,15,.45) 0%, rgba(5,8,15,.12) 38%, rgba(5,8,15,.74) 100%);
}

/* Halo dore tres doux sous la porte */
#intro .intro-glow{
  position:absolute; z-index:1; pointer-events:none;
  left:50%; top: var(--intro-glow-y);
  width: var(--intro-glow-size); height: var(--intro-glow-size);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,233,168,.55), rgba(216,179,95,.20) 40%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity:0;
  transition: opacity 1.4s var(--ease) .3s, filter .6s var(--ease);
}

/* Reflet leger au sol */
#intro .intro-floor{
  position:absolute; z-index:1; pointer-events:none;
  left:50%; bottom: var(--intro-floor-y);
  width: var(--intro-floor-w); height: 14vmin;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,225,150,.34), transparent 72%);
  mix-blend-mode: screen;
  filter: blur(4px);
  opacity:0;
  transition: opacity 1.6s var(--ease) .5s, filter .6s var(--ease);
}

/* Contenu (au-dessus des calques lumineux) */
#intro .intro-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  max-width: 720px;
}
#intro .eyebrow{
  letter-spacing:.4em; text-transform:uppercase; color: var(--gold-3);
  font-size: clamp(.7rem,1vw,.95rem); margin-bottom:1.4rem;
}
#intro .intro-title{
  font-size: clamp(2.2rem, 5.5vw, 4.6rem);
  font-weight:600; line-height:1.04; color: var(--ink);
  text-shadow: 0 2px 24px rgba(0,0,0,.75);
  margin:0 0 1.4rem;
}
#intro .intro-text{
  max-width: 620px;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  font-style:italic; line-height:1.45; color: var(--ink-soft);
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
  margin:0 0 2.6rem;
}

/* Etat initial du contenu : invisible, legerement descendu */
#intro .eyebrow,
#intro .intro-title,
#intro .intro-text,
#intro .intro-start{
  opacity:0; transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* --- Entree progressive : decor -> LE SEUIL -> titre -> texte -> bouton --- */
#intro.enter .intro-bg{    opacity:1; transform: scale(1); }
#intro.enter .intro-glow{  opacity:.9; }
#intro.enter .intro-floor{ opacity:1; }
#intro.enter .eyebrow    { opacity:1; transform: translateY(0); transition-delay:.65s; }
#intro.enter .intro-title{ opacity:1; transform: translateY(0); transition-delay:1.0s; }
#intro.enter .intro-text { opacity:1; transform: translateY(0); transition-delay:1.45s; }
#intro.enter .intro-start{ opacity:1; transform: translateY(0); transition-delay:1.9s; }

/* Pulsation lente du halo (transform seul : n'interfere pas avec l'opacite) */
#intro.enter .intro-glow{ animation: introPulse 6s var(--ease) 1.8s infinite; }
@keyframes introPulse{
  0%, 100%{ transform: translate(-50%, -50%) scale(1); }
  50%     { transform: translate(-50%, -50%) scale(1.07); }
}

/* Intensification subtile au survol (ou focus clavier) du bouton */
#intro.hot .intro-glow{ opacity:1; filter: brightness(1.4) blur(4px); }
#intro.hot .intro-floor{ opacity:1; filter: brightness(1.3) blur(3px); }

/* --- Depart : fondu enchaine fluide vers le bureau ------------------------ *
 * Plus de flash. Le bureau est revele derriere l'intro, puis l'intro se fond
 * en douceur (opacite -> 0 + leger zoom). En meme temps, le cartouche et le
 * Chroniqueur apparaissent en fondu : une transition continue, sans a-coup.
 */
#intro.leaving{
  opacity:0;
  transform: scale(1.03);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  pointer-events:none;
}
#intro.leaving .intro-glow{ animation:none; }

/* Le cartouche entre en fondu quand le rituel demarre */
body.is-quiz #panel{ animation: panelFadeIn .8s var(--ease) both; }
@keyframes panelFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* #fade n'est plus utilise (ancien voile/flash) : neutralise */
#fade{ display:none; }

@media (prefers-reduced-motion: reduce){
  #intro.leaving{ transition:none; }
  body.is-quiz #panel{ animation:none; }
}

/* --- Boutons d'action dores ----------------------------------------------- */
.btn-gold{
  font-family: var(--serif);
  cursor:pointer;
  border:1px solid var(--gold-2);
  border-radius:4px;
  background: linear-gradient(180deg, rgba(20,34,60,.9), rgba(8,13,26,.95));
  color: var(--gold-4);
  letter-spacing:.18em; text-transform:uppercase;
  font-size: clamp(.82rem, 1.1vw, 1rem);
  font-weight:600;
  padding:.85rem 2.2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(216,179,95,.16);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.btn-gold:hover, .btn-gold:focus-visible{
  transform: translateY(-2px);
  color: var(--gold-glow);
  box-shadow: 0 8px 26px rgba(0,0,0,.6), inset 0 0 0 1px rgba(240,214,146,.32), 0 0 18px rgba(255,233,168,.18);
  outline:none;
}
.btn-ghost{
  background: transparent;
  border:1px solid var(--gold-1);
  color: var(--ink-soft);
}
.btn-ghost:hover, .btn-ghost:focus-visible{ color: var(--gold-3); border-color: var(--gold-2); }

/* --- Ecran final ---------------------------------------------------------- */
#result{
  position:absolute; inset:0; z-index:11;
  display:none;
  /* "safe center" : centre quand ca tient, sinon aligne en haut (pas de
     rognage) ; combine a overflow-y:auto, le contenu long devient defilable. */
  align-items: safe center; justify-content:center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 5vw, 4rem);
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: radial-gradient(90% 90% at 50% 40%, rgba(8,13,26,.5), rgba(3,5,11,.9));
}
#result.show{ display:flex; }

/* Carte de classe (revele par retournement) */
.card-stage{ perspective: 1400px; flex:0 0 auto; }
.card-flip{
  position:relative;
  width: clamp(200px, 24vw, 360px);
  aspect-ratio: 1024 / 1536;
  transform-style: preserve-3d;
  transition: transform 1.1s var(--ease);
}
.card-flip.flipped{ transform: rotateY(180deg); }
.card-flip .face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  background: center/contain no-repeat;
  border-radius:10px;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.7));
}
.card-flip .back{ }
.card-flip .front{ transform: rotateY(180deg); }

/* Colonne de droite : verset + tache */
.result-body{
  flex:1 1 460px;
  max-width: 560px;
  display:flex; flex-direction:column;
  text-align:left;
}
.result-body .eyebrow{
  letter-spacing:.34em; text-transform:uppercase; color: var(--gold-3);
  font-size: clamp(.66rem,.95vw,.9rem); margin-bottom:.8rem;
}
.result-body .class-name{
  font-size: clamp(2rem, 4vw, 3.4rem); font-weight:600; line-height:1.04;
  color: var(--ink); margin:0;
}
.result-body .class-name .num{ color: var(--gold-3); font-size:.62em; margin-right:.4em; }
.result-body .verse{
  font-style:italic; font-size: clamp(1.1rem,1.8vw,1.55rem); line-height:1.4;
  color: var(--ink-soft); margin:.9rem 0 1.6rem;
  padding-left:1rem; border-left:2px solid var(--gold-1);
}

/* Cartouche de tache */
.task{
  position:relative;
  padding: clamp(1.1rem, 2.4vw, 2rem);
  margin-bottom:1.6rem;
}
.task.frame-img{ background: center/100% 100% no-repeat; }
.task.placeholder{
  border:1px solid var(--gold-2);
  border-radius:6px;
  background:
    linear-gradient(180deg, rgba(18,32,56,.92), rgba(8,13,26,.95));
  box-shadow: inset 0 0 0 4px rgba(5,8,15,.6), inset 0 0 0 5px rgba(216,179,95,.18), 0 8px 26px rgba(0,0,0,.5);
}
.task.placeholder::before,
.task.placeholder::after{
  content:"\2666"; position:absolute; color: var(--gold-2); font-size:.8rem;
}
.task.placeholder::before{ top:.5rem; left:.7rem; }
.task.placeholder::after{ bottom:.5rem; right:.7rem; }
.task .task-title{
  letter-spacing:.24em; text-transform:uppercase; color: var(--gold-3);
  font-size: clamp(.72rem,1vw,.92rem); margin-bottom:.6rem;
  display:flex; align-items:center; gap:.6rem;
}
.task .task-title::before, .task .task-title::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-1), transparent); }
.task .task-text{
  font-size: clamp(1rem,1.5vw,1.28rem); line-height:1.45; font-style:italic; color: var(--ink);
  white-space: pre-line;   /* affiche les sauts de paragraphe (\n) du texte */
}

/* Actions finales + email */
.result-actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.email-zone{ display:none; flex-direction:column; gap:.7rem; width:100%; margin-top:.4rem; }
.email-zone.show{ display:flex; }
.email-zone label{
  letter-spacing:.16em; text-transform:uppercase; color: var(--gold-3);
  font-size:.74rem;
}
.email-row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.email-zone input[type=email]{
  flex:1 1 240px;
  font-family: var(--serif);
  font-size:1.05rem;
  padding:.7rem 1rem;
  color: var(--ink);
  background: rgba(5,8,15,.7);
  border:1px solid var(--gold-1);
  border-radius:4px;
}
.email-zone input[type=email]::placeholder{ color: rgba(185,179,158,.55); font-style:italic; }
.email-zone input[type=email]:focus{ outline:none; border-color: var(--gold-3); box-shadow:0 0 0 2px rgba(216,179,95,.25); }
.email-msg{ font-style:italic; font-size:.98rem; min-height:1.2em; }
.email-msg.err{ color: #d98a7a; }

/* --- Confirmation « sceau scelle » : claire mais discrete ----------------- *
 * Le message de succes n'est plus un simple texte dore : il glisse doucement
 * vers le haut, s'illumine d'un halo, et un petit sceau dore (coche cerclee)
 * se pose a sa gauche. Tout est leger ; rien ne clignote.
 */
.email-msg.ok{
  color: var(--gold-4);
  font-style: normal;
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-shadow: 0 0 14px rgba(255,233,168,.45);
  animation: sealMsgIn .6s var(--ease) both;
}
.email-msg.ok::before{
  content: "\2713";                 /* coche */
  display: inline-grid;
  place-items: center;
  width: 1.55em; height: 1.55em;
  flex: 0 0 auto;
  font-size: .82em; line-height: 1;
  color: var(--gold-4);
  border: 1px solid var(--gold-2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(216,179,95,.22), rgba(8,13,26,.6));
  box-shadow: 0 0 0 3px rgba(216,179,95,.10), 0 0 16px rgba(255,233,168,.4);
  animation: sealPop .55s var(--ease) .12s both;
}
@keyframes sealMsgIn{
  0%{   opacity:0; transform: translateY(6px); }
  100%{ opacity:1; transform: translateY(0); }
}
@keyframes sealPop{
  0%{   opacity:0; transform: scale(.4) rotate(-14deg); }
  60%{  opacity:1; transform: scale(1.12) rotate(0); }
  100%{ opacity:1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce){
  .email-msg.ok, .email-msg.ok::before{ animation: none; }
}

/* --- Bouton de partage (ecran final) -------------------------------------- */
.share-wrap{
  width:100%;
  margin-top:1.3rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
}
.share-btn{
  position:relative;
  width: min(420px, 100%);
  aspect-ratio: 1082 / 281;
  border:0;
  cursor:pointer;
  background: center/100% 100% no-repeat;
  background-color: transparent;
  font-family: var(--serif);
  text-align:left;
  display:flex; align-items:center;
  padding: 0 7% 0 26%;            /* reserve la pastille de l'icone a gauche */
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
  transition: transform .28s var(--ease), filter .28s var(--ease);
}
.share-btn .share-label{
  position:relative; z-index:1;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  font-size: clamp(.76rem, 1.02vw, 1rem);
  color: var(--gold-3);
  transition: color .28s var(--ease), text-shadow .28s var(--ease);
}
.share-btn:hover, .share-btn:focus-visible{
  transform: translateY(-3px);
  filter: drop-shadow(0 7px 15px rgba(0,0,0,.5));
  outline:none;
}
.share-btn:hover .share-label, .share-btn:focus-visible .share-label{
  color: var(--gold-glow); text-shadow:0 0 12px rgba(255,233,168,.55), 0 0 2px rgba(255,233,168,.4);
}
/* repli si aucune image dediee (share-frame vide) */
.share-btn.placeholder{
  aspect-ratio:auto;
  border:1px solid var(--gold-2);
  border-radius:6px;
  padding:.8rem 1.4rem;
  background: linear-gradient(180deg, rgba(20,34,60,.9), rgba(8,13,26,.95));
  box-shadow: inset 0 0 0 1px rgba(216,179,95,.16), 0 4px 16px rgba(0,0,0,.5);
}
.share-btn.placeholder .share-label{ letter-spacing:.18em; }
.share-msg{ font-style:italic; font-size:.95rem; min-height:1.1em; }
.share-msg.ok{ color: var(--gold-4); }
.share-msg.err{ color:#d98a7a; }

/* --- Menu de partage (plateformes) ---------------------------------------- */
.share-wrap{ position:relative; }
.share-menu{
  display:none;
  position:absolute;
  left:0; bottom:calc(100% + .6rem);
  min-width: min(260px, 82vw);
  padding:.4rem;
  background: linear-gradient(180deg, rgba(18,32,56,.98), rgba(8,13,26,.98));
  border:1px solid var(--gold-1);
  border-radius:8px;
  box-shadow: 0 16px 38px rgba(0,0,0,.6), inset 0 0 0 1px rgba(216,179,95,.14);
  z-index:30;
}
.share-menu.open{ display:block; animation: menuIn .26s var(--ease) both; }
@keyframes menuIn{ from{ opacity:0; } to{ opacity:1; } }
.share-item{
  display:flex; align-items:center; gap:.75rem;
  width:100%; text-align:left;
  background:transparent; border:0; cursor:pointer;
  color: var(--ink);
  font-family: var(--serif);
  font-size:1.02rem; letter-spacing:.03em;
  padding:.58rem .8rem; border-radius:5px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.share-item svg{ color: var(--gold-3); flex:0 0 auto; transition: color .2s var(--ease); }
.share-item:hover, .share-item:focus-visible{
  background: rgba(216,179,95,.10);
  color: var(--gold-glow);
  outline:none;
}
.share-item:hover svg, .share-item:focus-visible svg{ color: var(--gold-glow); }

/* --- Utilitaires ---------------------------------------------------------- */
[hidden]{ display:none !important; }

/* --- Responsive : version mobile (< 760 px) ------------------------------- *
 * La mise en page bureau est entierement en position absolue dans un cadre a
 * ratio fixe. Sur mobile on repasse en colonne : les cinq tranches du cartouche
 * deviennent de vraies boites empilees, le haut/milieu/bas gardent leur ratio,
 * les deux tranches « vides » s'etirent autour du contenu.
 * Les valeurs reglables sont regroupees dans :root.is-mobile ci-dessous.
 */
@media (max-width: 760px){
  :root{
    --m-topbar-h: 50px;   /* hauteur de la barre du haut */
    --m-prog-h:   34px;   /* hauteur de la jauge sous la barre */
    --m-scene-h:  30vh;   /* hauteur reservee au Chroniqueur au-dessus du cartouche */
    --m-name-width: 66%;  /* largeur de la plaque du titre (a ajuster a l'oeil) */
  }

  body{ overflow-x:hidden; overflow-y:auto; }
  #stage{ position:relative; min-height:100dvh; display:block; }
  #stage::after{ position:fixed; }          /* vignette calee sur l'ecran, pas sur le scroll */

  /* --- Barre du haut (banniere reconvertie) : visible pendant le rituel --- */
  body.is-quiz #banner{
    position:fixed; inset:0 0 auto 0;
    width:100%; height:var(--m-topbar-h);
    aspect-ratio:auto; padding:0 1rem;
    flex-direction:row; justify-content:center; align-items:center;
    background-image:none !important;
    background:linear-gradient(180deg, rgba(5,8,15,.94), rgba(5,8,15,.5));
    border-bottom:1px solid rgba(216,179,95,.25);
    z-index:20;
  }
  body:not(.is-quiz) #banner{ display:none; }
  body.is-quiz #banner .banner-title{
    font-size:.8rem; letter-spacing:.18em; line-height:1;
  }
  body.is-quiz #banner .banner-title span{ display:inline; }
  body.is-quiz #banner .banner-title span:first-child::after{ content:"\00a0"; }
  body.is-quiz #banner .banner-title span:last-child{
    font-style:normal; color:var(--gold-3);
  }

  /* --- Jauge centree sous la barre --------------------------------------- */
  body.is-quiz #progress{
    position:fixed; top:var(--m-topbar-h); left:50%; transform:translateX(-50%);
    right:auto; bottom:auto;
    flex-direction:row; gap:.5rem; align-items:center;
    padding:.25rem .9rem; height:var(--m-prog-h);
    background:transparent; border:0; box-shadow:none; z-index:20;
  }
  #progress .prog-label{ display:none; }
  #progress .prog-rose{ width:20px; height:20px; }
  #progress .prog-count{ font-size:.95rem; }

  /* --- Le Chroniqueur : bandeau haut, centre, recadre tete/epaules -------- */
  #chroniqueur, #chroniqueurB{
    position:absolute;
    top: calc(var(--m-topbar-h) + var(--m-prog-h));
    left:50%; right:auto; transform:translateX(-50%);
    height: var(--m-scene-h) !important;
    width: min(82vw, 360px); max-width:none;
    object-fit:cover; object-position:top center;
    opacity:0;
    mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  }
  #chroniqueur.is-front, #chroniqueurB.is-front{ opacity:1; }

  /* --- Panneau (cartouche) sous la scene --------------------------------- */
  #panel{
    position:relative; left:auto; bottom:auto; transform:none;
    width:92vw; max-width:520px;
    margin: calc(var(--m-topbar-h) + var(--m-prog-h) + var(--m-scene-h)) auto 7vh;
    z-index:8;
  }

  /* --- Les tranches deviennent de vraies boites -------------------------- */
  .slice{ display:block; }
  #mainFrame{
    aspect-ratio:auto; background:none !important;
    display:flex; flex-direction:column;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.6));
  }
  .slice-top{
    position:relative; aspect-ratio: 450 / 191;
    background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  }
  .slice-fill{
    position:relative;
    background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  }
  .slice-mid{
    aspect-ratio: 450 / 27;
    background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  }
  .slice-bot{
    aspect-ratio: 450 / 113;
    background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  }

  /* Plaque du nom, posee sur la tranche du haut */
  #namePlate{
    position:absolute; top:15%; left:50%; transform:translateX(-50%);
    width: var(--m-name-width, 66%); white-space:nowrap; margin:0;
    text-align:center;
  }
  #namePlate .name{ font-size: clamp(.66rem, 3.2vw, .95rem); }

  /* Texte du Chroniqueur, dans la tranche vide haute (qui s'etire) */
  #prompt{
    position:relative; left:auto; right:auto; top:auto; height:auto;
    padding: .3rem 13% 1rem;
  }
  #prompt .prompt-text{ font-size: clamp(1rem, 4.3vw, 1.3rem); line-height:1.3; }

  /* Reponses empilees, dans la tranche vide basse (qui s'etire) */
  #answers{
    position:relative; left:auto; right:auto; bottom:auto; height:auto;
    display:flex; flex-direction:column; gap:.5rem;
    padding: .3rem 8% .2rem;
  }
  .answer{
    width:100%; aspect-ratio:auto;
    height:70px; min-height:70px;
    background-size:100% 100%;
    padding: .55rem 11% .55rem 20%;
    align-items:center;
  }
  .answer .answer-label{ font-size: clamp(.8rem, 3.3vw, 1rem); line-height:1.16; }
  .answer.chosen{ transform: translateY(-2px) scale(1.05); }

  /* --- Ecran final empile ------------------------------------------------ */
  #result.show{
    flex-direction:column; overflow-y:auto;
    justify-content:flex-start; gap:1.3rem;
    padding: 6vh 6vw 8vh;
  }
  .card-flip{ width: clamp(180px, 56vw, 260px); }
  .result-body{ text-align:center; max-width:520px; }
  .result-body .verse{ border-left:0; padding-left:0; }
  .task .task-title::before, .task .task-title::after{ display:none; }
  .result-actions{ justify-content:center; }
  .share-wrap{ align-items:center; }
  .share-btn{ width:min(420px, 100%); }
  .share-menu{ left:50%; transform:translateX(-50%); }

  /* Entree des reponses : plus longue et plus douce sur mobile */
  .answer.reveal.in{ animation-duration:.62s; }
}

/* Tres petits ecrans : on resserre encore */
@media (max-width: 380px){
  :root{ --m-scene-h: 26vh; }
  #prompt{ padding-left:11%; padding-right:11%; }
  .answer{ padding-left:21%; }
}

/* --- Mouvement reduit : tout se calme -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  #dust{ display:none; }
  .card-flip{ transition:none; }
}