/* ================================================================
   ENTERREMENT DE VIE DE GASTON  ·  Le festival merveilleux
   ================================================================ */

:root{
  --nuit:#0B0812;
  --nuit-2:#140f20;
  --or:#C9A227;
  --or-clair:#E8C86A;
  --creme:#F6F2E9;
  --rouge:#C21319;
  --rouge-fonce:#7d0a0e;

  --ombre-or: 0 0 0 1px rgba(201,162,39,.35);
  --wheel-size: 640px;      /* diametre du disque creme, pilote en JS aussi */
  --pad: clamp(16px, 4vw, 40px);
  --maxw: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%; overflow-x:hidden;}
body{
  margin:0;
  background:
    radial-gradient(1200px 900px at 50% -10%, #241436 0%, rgba(20,15,32,0) 60%),
    radial-gradient(900px 700px at 15% 30%, #2a1030 0%, rgba(11,8,18,0) 55%),
    var(--nuit);
  color:var(--creme);
  font-family:"Inter", system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* Ciel etoile + halos -------------------------------------------- */
#sky{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.halo{position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(40px);}
.halo-1{
  top:-160px; left:50%; transform:translateX(-50%);
  width:720px; height:720px;
  background:radial-gradient(circle, rgba(201,162,39,.16) 0%, rgba(160,40,120,.10) 45%, rgba(11,8,18,0) 70%);
}
.halo-wheel{
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:120%; height:120%;
  background:radial-gradient(circle, rgba(232,200,106,.14) 0%, rgba(150,30,110,.10) 45%, rgba(11,8,18,0) 72%);
}

main{position:relative; z-index:1;}

/* Typo utilitaires ----------------------------------------------- */
.visually-hidden,.skip-link{position:absolute; left:-9999px;}
.skip-link:focus{left:12px; top:12px; z-index:50; background:var(--or); color:var(--nuit); padding:10px 16px; border-radius:8px;}

/* Sections -------------------------------------------------------- */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(48px,7vw,96px) var(--pad);
}
.section-title{
  text-align:center;
  margin:0 0 clamp(28px,4vw,48px);
}
.section-lead{
  text-align:center;
  max-width:640px; margin:-16px auto clamp(28px,4vw,44px);
  color:#d8cfbf;
}

/* Ruban de titre de section -------------------------------------- */
.ribbon{
  display:inline-block;
  font-family:"Cinzel", serif;
  font-weight:800;
  font-size:clamp(1.5rem, 4.5vw, 2.6rem);
  letter-spacing:.04em;
  color:var(--or-clair);
  padding:.35em 1.1em;
  position:relative;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.ribbon::before,.ribbon::after{
  content:""; position:absolute; top:50%; width:26px; height:2px;
  background:linear-gradient(90deg, rgba(201,162,39,0), var(--or));
}
.ribbon::before{right:100%; transform:translateY(-50%);}
.ribbon::after{left:100%; transform:translateY(-50%) scaleX(-1); background:linear-gradient(90deg, rgba(201,162,39,0), var(--or));}

/* Separateur fleuron --------------------------------------------- */
.sep{display:flex; justify-content:center; margin:clamp(20px,3vw,32px) auto;}
.sep-svg{width:min(280px,70vw); height:32px; color:var(--or);}
.sep-svg line{stroke:var(--or); stroke-width:1.4; }

/* ================================================================
   CADRES ORNEMENTES
   ================================================================ */
.frame{
  position:relative;
  border:1px solid rgba(201,162,39,.45);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(30,20,44,.72), rgba(15,10,24,.72));
  box-shadow: inset 0 0 0 4px rgba(11,8,18,.5), inset 0 0 0 5px rgba(201,162,39,.25), 0 24px 60px rgba(0,0,0,.45);
  padding:6px;
}
.frame-inner{
  border:1px solid rgba(201,162,39,.3);
  border-radius:9px;
  padding:clamp(22px,4vw,44px);
}
.frame-lg{max-width:860px; margin:0 auto;}
.frame-md{max-width:720px; margin:0 auto;}
.frame-sm{max-width:640px; margin:0 auto;}
.frame-corner{
  position:absolute; width:56px; height:56px; color:var(--or-clair);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23E8C86A' stroke-linecap='round'%3E%3Cpath d='M4 4 H40 M4 4 V40' stroke-width='2.4'/%3E%3Cpath d='M11 11 H34 M11 11 V34' stroke-width='.9' opacity='.6'/%3E%3C/g%3E%3Cpath d='M14 14 C30 16 40 26 42 42 C30 40 20 34 14 14 Z' fill='%23C9A227' opacity='.85'/%3E%3Ccircle cx='14' cy='14' r='3' fill='%23E8C86A'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
}
.frame-corner.tl{top:-3px; left:-3px;}
.frame-corner.tr{top:-3px; right:-3px; transform:scaleX(-1);}
.frame-corner.bl{bottom:-3px; left:-3px; transform:scaleY(-1);}
.frame-corner.br{bottom:-3px; right:-3px; transform:scale(-1,-1);}

/* ================================================================
   CARTOUCHE (logo Just NOT Married)
   ================================================================ */
.cartouche{
  display:inline-block;
  padding:14px 22px;
  border:2px solid var(--or);
  border-radius:10px;
  background:radial-gradient(circle at 50% 40%, rgba(201,162,39,.14), rgba(11,8,18,.25));
  box-shadow: inset 0 0 0 3px rgba(11,8,18,.6), inset 0 0 0 4px rgba(232,200,106,.3), 0 10px 30px rgba(0,0,0,.4);
}
.cartouche-img{display:block; width:100%; height:auto;}
.cartouche-hero{width:min(340px,72vw); margin:0 auto 6px;}
.cartouche-foot{width:min(240px,60vw); margin:0 auto 18px;}

/* ================================================================
   HERO
   ================================================================ */
.hero{padding-top:clamp(40px,7vw,80px);}
.hero-inner{text-align:center;}
.kicker{
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  color:var(--or);
  margin:0 0 20px;
}
.hero-title{
  font-family:"Cinzel Decorative","Cinzel", serif;
  font-weight:900;
  line-height:1.02;
  margin:.35em 0 0;
  font-size:clamp(2.3rem, 8.5vw, 5rem);
  color:var(--creme);
  text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 34px rgba(232,200,106,.25);
}
.hero-title-de{
  display:inline-block;
  font-family:"Cinzel", serif;
  font-weight:600;
  font-size:.5em;
  letter-spacing:.12em;
  color:var(--or-clair);
}
.hero-accroche{
  font-family:"Cinzel", serif;
  font-size:clamp(1.05rem,2.6vw,1.4rem);
  color:#e9e0cf;
  margin:0 0 28px;
}

/* ================================================================
   BOUTONS
   ================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 30px;
  font-family:"Anton", sans-serif;
  text-transform:uppercase; letter-spacing:.08em;
  font-size:1.05rem;
  border-radius:10px;
  border:2px solid var(--or);
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: inset 0 0 0 2px rgba(11,8,18,.4), 0 8px 22px rgba(0,0,0,.4);
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.06);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:3px solid var(--or-clair); outline-offset:3px;}
.btn-red{background:var(--rouge); color:var(--creme); border-color:var(--or-clair);}
.btn-gold{background:linear-gradient(180deg,var(--or-clair),var(--or)); color:var(--nuit); border-color:var(--creme);}
.btn-cream{background:var(--creme); color:var(--nuit); border-color:var(--or);}
.btn-ghost{background:transparent; color:var(--or-clair); border-color:var(--or);}
.btn-spin{font-size:1.3rem; min-height:60px; padding:0 40px;}

/* ================================================================
   TEXTES DES CADRES
   ================================================================ */
.frame-inner p{margin:0 0 1em;}
.frame-inner p:last-child{margin-bottom:0;}

/* ================================================================
   VERROU
   ================================================================ */
.lock{max-width:520px; margin:0 auto; text-align:center;}
.lock-txt{color:#d8cfbf; margin:0 0 16px;}
.lock-form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.lock-input{
  min-height:52px; padding:0 18px;
  font-family:"Anton",sans-serif; letter-spacing:.14em; font-size:1.1rem;
  text-align:center; text-transform:uppercase;
  color:var(--nuit); background:var(--creme);
  border:2px solid var(--or); border-radius:10px;
  width:180px;
}
.lock-input:focus-visible{outline:3px solid var(--or-clair); outline-offset:2px;}
.lock-error{color:var(--rouge); font-family:"Anton",sans-serif; letter-spacing:.06em; margin-top:14px;}

/* ================================================================
   LA ROUE
   ================================================================ */
/* Bandeau du mode test : bien visible, rouge */
.test-banner{
  text-align:center;
  font-family:"Anton", sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--creme);
  background:var(--rouge);
  border:2px solid var(--or-clair);
  border-radius:10px;
  padding:12px 18px;
  font-size:1.05rem;
  max-width:520px;
  margin:0 auto clamp(20px,3vw,32px);
  box-shadow:0 6px 20px rgba(194,19,25,.4);
}
/* espace au-dessus de la roue : laisse monter la couronne du gagnant. */
.frame-wheel{max-width:760px; margin:clamp(24px,4vw,48px) auto 0; padding:8px;}
.frame-wheel .frame-inner{padding:clamp(10px,2.5vw,20px);}
.wheel-stage-wrap{position:relative;}

.wheel-stage{
  position:relative;
  width:100%;
  max-width:660px;
  aspect-ratio:1 / 1;
  margin:0 auto;
  /* le stage remplit le cadre ; le disque est plus petit et les tetes debordent
     sur son pourtour, sans jamais sortir du stage (donc aucun scroll horizontal). */
}
.wheel{
  position:absolute; inset:0;
  will-change:transform;
  transform:rotate(0deg);
}
/* Disque transparent (decision client) : seul un fin cercle dore borde la roue.
   Le fond creme est retire ; les noms passent ainsi sur la nuit (contraste net)
   et l'ecusson du moyeu devient le point focal. */
.disc{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(201,162,39,.55);
  box-shadow:
    0 0 0 3px rgba(11,8,18,.35),
    inset 0 0 40px rgba(201,162,39,.06);
}
/* filets separateurs (du centre vers le bord du disque), injectes en JS */
.wheel-sep{position:absolute; left:50%; top:50%; width:1px; transform-origin:top center; background:linear-gradient(180deg, rgba(201,162,39,.15), rgba(201,162,39,.7)); }

/* Conteneur des filets separateurs (injectes en JS) */
.wheel-seps{position:absolute; inset:0;}

/* ================================================================
   ROUE DOREE OUVRAGEE (asset du client, WebP + repli PNG via IMGEXT)
   Variante A : structure exterieure, derriere le disque et les tetes.
   Variante B : grand medaillon de fond, attenue et floute.
   Taille et src poses en JS. Toujours derriere la roue (#wheel) : placee
   avant elle dans le DOM du stage et z-index 0.
   ================================================================ */
.goldwheel{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:0;
  display:none;
}
body.variant-a .goldwheel{display:block;}
body.variant-b .goldwheel{display:block; opacity:.2; filter:blur(2px) saturate(.9);}

/* Variante A : la roue doree remplace le cadre rectangulaire (evite deux
   cadres imbriques) et le stage s'agrandit pour loger les tetes a l'interieur. */
body.variant-a .frame-wheel{max-width:960px; border:none; background:none; box-shadow:none; padding:0;}
body.variant-a .frame-wheel > .frame-corner{display:none;}
body.variant-a .frame-wheel .frame-inner{border:none; background:none; padding:0;}
body.variant-a .wheel-stage{max-width:900px;}
body.variant-a .halo-wheel{width:100%; height:100%;}
/* Un point au centre du stage ; l'interieur est pousse au rayon voulu.
   La transition sur transform anime la recomposition (les tetes glissent
   vers leur nouvelle position quand on coche/decoche un participant). */
.head{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
/* head-inner : boite exactement de la taille de l'image (l'image la dimensionne),
   centree au rayon headR (top pose en JS). Les autres elements sont absolus. */
.head-inner{position:absolute; left:0; top:0; transform:translate(-50%,-50%); line-height:0;
  transition:transform .4s ease;}
/* Tete hors roue (participant decoche) : elle disparait proprement, aucune trace. */
.head.is-off{opacity:0; pointer-events:none;}
.head.is-off .head-inner{transform:translate(-50%,-50%) scale(.35);}
.head-img{display:block; height:118px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));}
.head-name{
  position:absolute; left:50%; transform:translateX(-50%);
  white-space:nowrap; text-align:center; line-height:1.1;
  font-family:"Anton", sans-serif;
  font-size:.95rem; letter-spacing:.05em;
  color:var(--creme);
  /* halo sombre : les noms sont en creme sur les tetes claires ET sur la nuit ;
     le contour noir garantit la lisibilite sur les deux fonds. */
  text-shadow:0 0 2px #000, 0 1px 3px #000, 0 0 7px rgba(0,0,0,.9),
              1px 1px 0 rgba(0,0,0,.55), -1px 1px 0 rgba(0,0,0,.55);
  margin-top:2px;
}
/* Couronne du gagnant : posee sur le sommet du crane (dimensions/position en JS) */
.head-crown{
  position:absolute; z-index:3; pointer-events:none;
  opacity:0; transform:translateY(-55%) scale(.9);
  transform-origin:50% 100%;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.head.is-crowned .head-crown{
  animation:crownDrop .52s cubic-bezier(.34,1.7,.5,1) forwards;
}
@keyframes crownDrop{
  0%   {opacity:0; transform:translateY(-55%) scale(.92);}
  55%  {opacity:1; transform:translateY(7%)   scale(1.015);}
  78%  {opacity:1; transform:translateY(-2.5%) scale(.997);}
  100% {opacity:1; transform:translateY(0)    scale(1);}
}
.head.is-winner{z-index:22;}
.head.is-winner .head-inner{transform:translate(-50%,-50%) scale(1.42); transition:transform .5s ease;}

/* Moyeu central */
.hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:30%; height:30%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, #1c1330, #0B0812);
  box-shadow:0 0 0 3px var(--or), 0 0 0 6px var(--nuit), 0 0 22px rgba(0,0,0,.6);
  z-index:15;
}
.hub-svg{position:absolute; inset:0; width:100%; height:100%;}
.hub-ring-out{fill:none; stroke:var(--or); stroke-width:2;}
.hub-ring-in{fill:none; stroke:var(--or-clair); stroke-width:.8; opacity:.7; stroke-dasharray:2 4;}
/* Emblème du client au centre du moyeu (WebP/PNG servi en JS via IMGEXT) */
.hub-emblem{
  position:relative; z-index:1;
  width:78%; height:78%; object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
}

/* Pointeur : triangle taille a la main, pose dans la zone creme du disque,
   pointe vers le haut. Sa position verticale (top) est calculee en JS pour que
   la pointe affleure le bord interieur de la bande des tetes sans jamais la toucher. */
.pointer{
  position:absolute; left:50%; top:0; transform:translate(-50%,0);
  width:34px; height:34px; z-index:25;
  transform-origin:50% 8%;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.pointer svg{width:100%; height:100%; display:block;}

/* Confettis */
#confetti{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:30;}

/* Ligne de preuve */
.proof{
  text-align:center;
  font-family:"Inter", monospace;
  font-size:.82rem; letter-spacing:.02em;
  color:#c9bfa6;
  margin:22px auto 0; max-width:560px;
  word-break:break-word;
}

/* Commandes */
.controls{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:26px;}

/* Revelation */
.reveal{text-align:center; margin-top:34px;}
.reveal-kicker{
  font-family:"Cinzel", serif; font-size:1.1rem; color:var(--or-clair); margin:0 0 6px;
}
.reveal-name{
  font-family:"Anton", sans-serif;
  font-size:clamp(3rem, 14vw, 7rem);
  line-height:.95; margin:0;
  color:var(--creme);
  text-shadow:0 2px 0 #000, 0 0 40px rgba(232,200,106,.4);
}
.stamp{
  display:inline-block; margin:14px auto 0;
  font-family:"Anton", sans-serif; text-transform:uppercase;
  color:var(--creme); background:var(--rouge);
  border:3px solid var(--rouge-fonce);
  padding:.2em .7em; border-radius:8px;
  font-size:clamp(1.3rem,4vw,2rem); letter-spacing:.05em;
  transform:rotate(-6deg);
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.reveal-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px;}

/* Tirage des roles */
.roles-draw{margin-top:34px; text-align:center;}
.roles-draw-last{
  font-family:"Cinzel", serif; font-size:clamp(1.1rem,3.4vw,1.7rem);
  color:var(--or-clair); min-height:1.6em; margin:0 0 6px;
}
.roles-draw-last strong{color:var(--creme); font-family:"Anton",sans-serif; font-weight:400; letter-spacing:.03em;}
.recap{margin-top:30px;}
.recap-title{font-family:"Cinzel",serif; color:var(--creme); text-align:center; margin:0 0 18px; font-size:1.5rem;}
.recap-list{list-style:none; margin:0; padding:0; text-align:left;}
.recap-list li{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 6px; border-bottom:1px dashed rgba(201,162,39,.3);
}
.recap-list li:last-child{border-bottom:none;}
.recap-role{color:#d8cfbf;}
.recap-who{font-family:"Anton",sans-serif; letter-spacing:.03em; color:var(--or-clair);}
.recap-list li.is-gaston .recap-who{color:var(--rouge); }
.copy-note{color:var(--or-clair); margin-top:14px; font-family:"Cinzel",serif;}

/* ================================================================
   PANNEAU ORGANISATEUR : PARTICIPANTS + MODE TEST
   ================================================================ */
.org-panel{margin:0 auto clamp(28px,4vw,44px);}
.org-title{
  font-family:"Cinzel",serif; font-weight:800; color:var(--or-clair);
  text-align:center; font-size:1.5rem; margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em;
}
.org-note{color:#d8cfbf; text-align:center; margin:0 auto 20px; max-width:560px; font-size:.95rem;}
.participants{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px; margin:0 auto;
}
.participant{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(201,162,39,.35);
  background:linear-gradient(180deg, rgba(30,20,44,.55), rgba(15,10,24,.55));
  transition:border-color .15s ease, background .15s ease, opacity .15s ease;
  user-select:none;
}
.participant:hover{border-color:var(--or-clair);}
.participant input{position:absolute; opacity:0; width:0; height:0;}
.participant-tick{
  flex:0 0 auto; width:22px; height:22px; border-radius:6px;
  border:2px solid var(--or); background:rgba(11,8,18,.6);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.participant-tick::after{
  content:""; width:11px; height:6px; margin-top:-2px;
  border-left:2.5px solid var(--nuit); border-bottom:2.5px solid var(--nuit);
  transform:rotate(-45deg) scale(0); transition:transform .15s ease;
}
.participant input:checked ~ .participant-tick{background:var(--or-clair); border-color:var(--creme);}
.participant input:checked ~ .participant-tick::after{transform:rotate(-45deg) scale(1);}
.participant input:focus-visible ~ .participant-tick{outline:3px solid var(--or-clair); outline-offset:2px;}
.participant-name{font-family:"Anton",sans-serif; letter-spacing:.04em; font-size:1rem; color:var(--creme);}
.participant:has(input:not(:checked)){opacity:.55;}
.participant:has(input:not(:checked)) .participant-name{color:#b8ac90;}

.org-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:22px;
}
/* Interrupteur mode test */
.switch{display:inline-flex; align-items:center; gap:12px; cursor:pointer; user-select:none;}
.switch input{position:absolute; opacity:0; width:0; height:0;}
.switch-track{
  position:relative; flex:0 0 auto; width:52px; height:28px; border-radius:999px;
  background:rgba(11,8,18,.7); border:2px solid var(--or);
  transition:background .18s ease, border-color .18s ease;
}
.switch-knob{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--or-clair); transition:transform .18s ease, background .18s ease;
}
.switch input:checked ~ .switch-track{background:var(--rouge); border-color:var(--or-clair);}
.switch input:checked ~ .switch-track .switch-knob{transform:translateX(24px); background:var(--creme);}
.switch input:focus-visible ~ .switch-track{outline:3px solid var(--or-clair); outline-offset:2px;}
.switch-label{font-family:"Anton",sans-serif; letter-spacing:.05em; color:var(--creme); text-transform:uppercase; font-size:.95rem;}
.switch-sub{display:block; font-family:"Inter",sans-serif; letter-spacing:0; text-transform:none; color:#c9bfa6; font-size:.72rem;}

.data-line{
  margin-top:18px; padding:14px 16px;
  background:rgba(11,8,18,.7); border:1px solid rgba(201,162,39,.4); border-radius:10px;
  color:#e9e0cf; font-family:"Inter", ui-monospace, monospace; font-size:.82rem;
  white-space:pre-wrap; word-break:break-word; user-select:all;
}

/* Message roue vide + avertissement fusion */
.wheel-msg{
  text-align:center; margin:22px auto 0; max-width:520px;
  font-family:"Anton",sans-serif; letter-spacing:.06em; color:var(--rouge);
  background:rgba(11,8,18,.5); border:1px solid rgba(194,19,25,.5); border-radius:10px;
  padding:14px 18px;
}
.role-warn{
  text-align:center; margin:0 auto 16px; max-width:560px;
  color:var(--creme); background:rgba(194,19,25,.85);
  border:1px solid var(--or-clair); border-radius:10px; padding:10px 14px;
  font-size:.9rem;
}
.participants-warn{margin-top:16px;}

/* Panneau des roles a tirer (l'organisateur choisit l'ordre) */
.role-panel-lead{text-align:center; color:#d8cfbf; margin:0 0 16px;}
.role-panel{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px; max-width:760px; margin:0 auto;
}
.role-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:10px;
  border:1px solid rgba(201,162,39,.35);
  background:linear-gradient(180deg, rgba(30,20,44,.6), rgba(15,10,24,.6));
  text-align:left;
}
.role-row.is-done{border-color:rgba(201,162,39,.6); background:linear-gradient(180deg, rgba(40,30,60,.6), rgba(20,14,32,.6));}
.role-row.is-gaston-row{border-color:var(--or);}
.role-row-icon{flex:0 0 auto; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;}
.role-row-icon img{width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(201,162,39,.28));}
.role-row-name{
  flex:1 1 auto; min-width:0;
  font-family:"Cinzel",serif; font-weight:800; color:var(--or-clair);
  text-transform:uppercase; letter-spacing:.02em; font-size:.92rem; line-height:1.1;
}
.role-row-who{flex:0 0 auto; font-family:"Anton",sans-serif; letter-spacing:.03em; color:var(--creme);}
.role-row.is-gaston-row .role-row-who{color:var(--rouge);}
.role-row-btn{flex:0 0 auto; min-height:40px; padding:0 18px; font-size:.9rem;}

/* ================================================================
   LES ROLES (fiches de personnage)
   ================================================================ */
.roles-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(3, 1fr);
  align-items:start;
}
.rpg-card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid rgba(201,162,39,.45);
  border-radius:14px;
  padding:20px 20px 22px;
  /* fond legerement plus clair que la nuit */
  background:linear-gradient(180deg, rgba(32,22,48,.72), rgba(17,12,27,.72));
  box-shadow:inset 0 0 0 1px rgba(11,8,18,.5), inset 0 0 0 2px rgba(201,162,39,.16),
             0 6px 22px rgba(0,0,0,.35);
}
/* coins travailles : petit filet dore en haut de carte */
.rpg-card::before{
  content:""; position:absolute; left:16px; right:16px; top:0; height:2px;
  background:linear-gradient(90deg, rgba(201,162,39,0), var(--or) 20%, var(--or-clair) 50%, var(--or) 80%, rgba(201,162,39,0));
}
.rpg-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.rpg-medallion{
  flex:0 0 auto; width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(40,28,60,.9), rgba(11,8,18,.95));
  border:1px solid var(--or); box-shadow:0 0 0 3px rgba(11,8,18,.6), 0 0 14px rgba(201,162,39,.22);
}
.rpg-icon-img{width:72px; height:72px; display:block; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(201,162,39,.28));}
.rpg-titles{min-width:0;}
.rpg-name{
  font-family:"Cinzel", serif; font-weight:800; color:var(--or-clair);
  text-transform:uppercase; letter-spacing:.02em; line-height:1.05;
  font-size:1.18rem; margin:0;
}
.rpg-subtitle{
  font-family:"Cinzel", serif; font-style:italic; color:var(--creme);
  font-size:.92rem; margin:4px 0 0; opacity:.9;
}
.rpg-body{display:flex; flex-direction:column; gap:12px;}
.rpg-mission{color:#d3c9b2; font-size:.92rem; line-height:1.5; margin:0;}
.rpg-block{border-left:2px solid rgba(201,162,39,.5); padding-left:12px;}
.rpg-tag{
  display:block; font-family:"Anton", sans-serif; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:3px;
}
.rpg-tag-gold{color:var(--or-clair);}
.rpg-tag-red{color:var(--rouge);}
.rpg-text{color:#d3c9b2; font-size:.9rem; line-height:1.45; margin:0;}
.rpg-text-red{color:var(--rouge); font-weight:600;}
.rpg-weak{border-left-color:var(--rouge); background:rgba(0,0,0,.5); border-radius:0 6px 6px 0; padding-top:8px; padding-bottom:8px; padding-right:10px;}
/* stats en barres de pastilles */
.rpg-stats{display:flex; flex-direction:column; gap:7px; margin-top:2px;
  padding-top:12px; border-top:1px dashed rgba(201,162,39,.28);}
.rpg-stat{
  display:grid; grid-template-columns:minmax(0,1fr) max-content 1.5em;
  align-items:center; gap:8px;
}
.rpg-stat-label{
  font-family:"Anton", sans-serif; font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; color:#b8ac90; line-height:1.15;
}
.rpg-pips{display:inline-flex; gap:2.5px; white-space:nowrap;}
.rpg-pip{
  width:7px; height:7px; border-radius:50%;
  background:rgba(201,162,39,.16); box-shadow:inset 0 0 0 1px rgba(201,162,39,.25);
}
.rpg-pip.on{
  background:var(--or-clair);
  box-shadow:0 0 5px rgba(232,200,106,.7), inset 0 0 0 1px var(--or);
}
.rpg-stat-val{
  font-family:"Anton", sans-serif; color:var(--or-clair); font-size:.9rem;
  text-align:right; justify-self:end;
}
/* GASTON : le role-titre, plus large et plus marque */
.rpg-card.is-gaston{
  grid-column:span 2;
  border-color:var(--or); border-width:2px;
  background:linear-gradient(180deg, rgba(42,30,62,.8), rgba(20,14,32,.8));
  box-shadow:inset 0 0 0 1px rgba(11,8,18,.5), inset 0 0 0 3px rgba(201,162,39,.32),
             0 8px 30px rgba(0,0,0,.45);
}
.rpg-card.is-gaston::before{height:3px; left:12px; right:12px;}
.rpg-card.is-gaston .rpg-medallion{width:98px; height:98px;}
.rpg-card.is-gaston .rpg-icon-img{width:84px; height:84px;}
.rpg-card.is-gaston .rpg-name{font-size:1.7rem; color:var(--or-clair);}
.rpg-card.is-gaston .rpg-subtitle{font-size:1.05rem;}
/* sur large : corps de GASTON sur deux colonnes */
.rpg-card.is-gaston .rpg-head{grid-column:1 / -1;}
@media (min-width:901px){
  .rpg-card.is-gaston{display:grid; grid-template-columns:1fr 1fr; column-gap:26px; row-gap:8px;}
  .rpg-card.is-gaston .rpg-body{display:contents;}
  .rpg-card.is-gaston .rpg-mission{grid-column:1; grid-row:2;}
  .rpg-card.is-gaston .rpg-power{grid-column:1; grid-row:3; align-self:start;}
  .rpg-card.is-gaston .rpg-weak{grid-column:2; grid-row:2;}
  .rpg-card.is-gaston .rpg-stats{grid-column:2; grid-row:3; border-top:none; padding-top:0;}
}
.merge-note{margin-top:26px;}
.merge-note .frame-inner{padding:26px 34px;}
.merge-note p{font-size:.95rem; color:#d8cfbf; margin:0;}

/* ================================================================
   ARCHIVES
   ================================================================ */
.archives-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.archive-card{
  border:1px solid rgba(201,162,39,.4); border-radius:12px; padding:16px; text-align:center;
  background:linear-gradient(180deg, rgba(30,20,44,.6), rgba(15,10,24,.6));
}
.archive-year{font-family:"Anton",sans-serif; color:var(--or-clair); font-size:1.6rem;}
.archive-head{height:90px; width:auto; margin:8px auto; display:block; filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));}
.archive-gaston{font-family:"Cinzel",serif; font-weight:800; color:var(--creme);}
.archive-meta{color:#c9bfa6; font-size:.9rem;}
.archives-empty{
  grid-column:1/-1; text-align:center;
  font-family:"Cinzel",serif; font-size:1.3rem; color:var(--or-clair);
  padding:40px 20px;
}

/* ================================================================
   DEROULE
   ================================================================ */
.deroule-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;}
.deroule-block{max-width:520px;}
.deroule-when{display:block; font-family:"Anton",sans-serif; color:var(--or-clair); text-transform:uppercase; letter-spacing:.08em; font-size:1.15rem;}
.deroule-what{display:block; color:#d8cfbf; margin-top:4px;}
.deroule-sep{color:var(--or); }
.deroule-sep svg{width:80px; height:24px;}

/* ================================================================
   PIED DE PAGE
   ================================================================ */
.footer{
  position:relative; z-index:1;
  text-align:center; padding:60px var(--pad) 70px;
  border-top:1px solid rgba(201,162,39,.25);
  margin-top:40px;
}
.footer-name{font-family:"Cinzel Decorative","Cinzel",serif; font-weight:900; color:var(--or-clair); font-size:1.4rem; margin:0 0 10px;}
.footer-mention{color:#c9bfa6; margin:0 0 6px;}
.footer-end{font-family:"Cinzel",serif; color:#d8cfbf; font-style:italic; margin:0;}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:900px){
  .roles-grid{grid-template-columns:repeat(2, 1fr);}
  .rpg-card.is-gaston{grid-column:span 2;}
}
@media (max-width:820px){
  :root{--wheel-size:460px;}
  .head-img{height:92px;}
}
@media (max-width:560px){
  .roles-grid{grid-template-columns:1fr;}
  .rpg-card.is-gaston{grid-column:span 1;}
  .rpg-card.is-gaston .rpg-name{font-size:1.45rem;}
}
@media (max-width:520px){
  :root{--wheel-size:calc(100vw - 76px);}
  .head-img{height:64px;}
  .head-name{font-size:.82rem;}
  .pointer{width:26px; height:26px;}
  .frame-wheel .frame-inner{padding:10px;}
  .btn{font-size:.95rem; padding:0 20px;}
  .btn-spin{font-size:1.1rem;}
}
@media (max-width:380px){
  .head-img{height:56px;}
  .head-name{font-size:.8rem;}
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .wheel{transition:none !important;}
  .btn{transition:none;}
  #sky{display:none;}
  .head.is-crowned .head-crown{animation:none; opacity:1; transform:translateY(0) scale(1);}
}