:root{
  --fond:#0c120f; --pierre:#161e1a; --pierre2:#1f2924; --ligne:#3a3a2c;
  --or:#c9a24b; --or-clair:#ecd9a2; --fel:#2f7a57; --arcane:#4a8fbf;
  --elfe:#8a6bc4; --hurle:#3d6fc4; --forge:#d9822b; --voile:.58;
  --texte:#d9d6c9; --doux:#a39f8e; --rouge:#b5523f;
  --titre:"Cinzel",Georgia,"Times New Roman",serif;
  --corps:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{background:var(--fond);color:var(--texte);font:1.125rem/1.6 var(--corps);-webkit-font-smoothing:antialiased}
a{color:var(--or-clair)}
:focus-visible{outline:2px solid var(--arcane);outline-offset:3px}
h1,h2,h3{font-family:var(--titre);color:var(--or-clair);line-height:1.15}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.6rem}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
section{padding:5rem 0}
.intro{color:var(--doux);max-width:60ch;margin-bottom:2.2rem}

/* En-tête */
header{position:sticky;top:0;z-index:20;background:rgba(12,18,15,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:3.6rem}
.logo{font-family:var(--titre);font-weight:700;color:var(--or);text-decoration:none;letter-spacing:.04em}
nav{display:flex;gap:1.6rem}
nav a{text-decoration:none;color:var(--texte);font-size:1rem}
nav a:hover{color:var(--or-clair)}
.burger{display:none;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;background:none;border:1px solid var(--ligne);border-radius:6px;color:var(--or-clair);cursor:pointer}
.burger svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:900px){
  .burger{display:inline-flex}
  nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:.4rem 1.25rem 1rem;background:rgba(12,18,15,.98);border-bottom:1px solid var(--or)}
  #entete.ouvert nav{display:flex}
  nav a{padding:.85rem 0;border-bottom:1px solid var(--ligne);font-size:1.1rem}
  .droite{margin-left:auto}
}

/* Boutons */
.btn{display:inline-block;font:700 1rem var(--titre);letter-spacing:.05em;padding:.9rem 1.7rem;border:1px solid var(--or);border-radius:2px;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s}
.btn-or{background:linear-gradient(#e0b45c,#b8731f);color:#1a1002;border-color:#f0cf86}
.btn-or:hover{box-shadow:0 0 26px rgba(217,130,43,.55)}
.btn-ligne{background:rgba(12,18,15,.55);color:var(--or-clair);border-color:var(--hurle)}
.btn-ligne:hover{background:rgba(61,111,196,.22);border-color:var(--elfe);box-shadow:0 0 22px rgba(138,107,196,.45)}

/* Hero */
.hero{position:relative;min-height:calc(100vh - 3.6rem);display:grid;place-items:center;text-align:center;overflow:hidden;padding:4rem 0;
  /* Image : fond-hero.jpg (à placer à côté de index.html). Voile sombre réglable avec --voile. */
  background:
   linear-gradient(rgba(6,9,8,var(--voile)),rgba(6,9,8,var(--voile))),
   url("fond-hero.jpg") center/cover no-repeat,
   radial-gradient(40% 55% at 15% 45%,rgba(138,107,196,.38),transparent 70%),
   radial-gradient(45% 55% at 50% 35%,rgba(61,111,196,.34),transparent 70%),
   radial-gradient(40% 55% at 85% 55%,rgba(217,130,43,.34),transparent 70%),
   var(--fond)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.55)),linear-gradient(transparent 70%,var(--fond));pointer-events:none}
.runes{position:absolute;left:50%;top:50%;width:min(130vmin,1100px);translate:-50% -50%;opacity:.28;animation:tourne 160s linear infinite}
.runes *{fill:none;stroke:var(--or);stroke-width:1}
.runes text{fill:var(--or);stroke:none;font:20px var(--titre)}
@keyframes tourne{to{rotate:360deg}}
.hero .wrap{position:relative;z-index:1;animation:apparait 1.4s ease-out both}
@keyframes apparait{from{opacity:0;translate:0 14px}}
.hero h1{font-family:"Cinzel Decorative","Cinzel",Georgia,serif;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(2.1rem,7.2vw,5.4rem);line-height:1.12;text-wrap:balance;padding:.05em 0;
  /* métal doré : crème en haut, or au milieu, bronze chaud en bas */
  background:linear-gradient(180deg,#fffaf0 0%,#f6e6b8 28%,#d9b45a 55%,#b07a2a 80%,#7a4a17 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  /* ombre sombre prononcée + halo doré (drop-shadow, car text-shadow est masqué par le dégradé) */
  filter:drop-shadow(0 3px 1px rgba(0,0,0,.95)) drop-shadow(0 6px 14px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(224,180,92,.45))}
.hero p{text-shadow:0 2px 10px rgba(0,0,0,.95);font:500 clamp(.9rem,2.4vw,1.3rem) var(--titre);color:var(--or-clair);text-transform:uppercase;letter-spacing:.3em;margin:1.4rem 0 2.6rem}
.hero p::before,.hero p::after{content:"";display:inline-block;width:clamp(1.5rem,6vw,3.5rem);height:1px;vertical-align:middle;margin:0 .9rem 0 0;background:linear-gradient(90deg,transparent,var(--or))}
.hero p::after{margin:0 0 0 .6rem;background:linear-gradient(270deg,transparent,var(--or))}
.hero .note{max-width:54ch;margin:1.6rem auto 0;font-size:1rem;line-height:1.45;color:var(--or-clair);text-shadow:0 2px 10px rgba(0,0,0,.95);background:rgba(12,18,15,.6);border:1px solid rgba(201,162,75,.35);padding:.75rem 1.1rem;border-radius:3px}
.hero .actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Présentation */
.accroche{font-size:clamp(1.2rem,3vw,1.7rem);margin-bottom:1.6rem;color:var(--or)}
.badge{font:700 .8rem var(--corps);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--hurle);padding:.2rem .6rem;border-radius:3px;vertical-align:middle;margin-left:.5rem}
.lead{max-width:68ch;margin-bottom:2.4rem;font-size:1.2rem}
.lead p+p{margin-top:.3rem}
.blocs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.bloc{background:var(--pierre);border-left:3px solid var(--elfe);padding:1.4rem 1.5rem}
.bloc:nth-child(3n+2){border-color:var(--hurle)}
.bloc:nth-child(3n){border-color:var(--forge)}
.bloc.non{border-color:var(--rouge)}
.bloc.large{grid-column:1/-1}
.bloc h3{font-size:1.2rem;margin-bottom:.8rem}
.bloc p{margin-bottom:.7rem}
.bloc p:last-child{margin-bottom:0}
.bloc ul{list-style:none;padding:0;display:grid;gap:.4rem}
.resume{margin-top:1.2rem;text-align:center;padding:2rem 1.5rem;border:1px solid var(--or);background:linear-gradient(135deg,rgba(138,107,196,.14),rgba(61,111,196,.1),rgba(217,130,43,.14))}
.resume h3{font-size:1.5rem;margin-bottom:.8rem}
.resume p{max-width:62ch;margin:0 auto .6rem}
@media(max-width:820px){.blocs{grid-template-columns:1fr}}

/* Recrutement */
.recrutement{background:linear-gradient(180deg,rgba(138,107,196,.08),transparent 35%),linear-gradient(0deg,rgba(217,130,43,.07),transparent 30%),var(--pierre);border-block:1px solid var(--ligne)}
header{border-image:linear-gradient(90deg,var(--elfe),var(--hurle),var(--forge)) 1}
.filtres{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
.filtres button{font:500 1rem var(--corps);color:var(--texte);background:transparent;border:1px solid var(--ligne);padding:.45rem 1.1rem;border-radius:999px;cursor:pointer}
.filtres button[aria-pressed="true"]{background:var(--hurle);color:#fff;border-color:var(--hurle)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.carte{background:var(--fond);border:1px solid var(--ligne);border-top:3px solid var(--cl);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.carte h3{font-size:1.1rem;color:var(--cl)}
.carte small{color:var(--doux);font-size:.95rem;min-height:2.6em}
.statut{align-self:flex-start;font-weight:700;font-size:.92rem;padding:.2rem .7rem;border-radius:3px;border:1px solid}
.s-ouvert{color:#6fcf9b;border-color:var(--fel);background:rgba(47,122,87,.18)}
.s-ferme{color:#c98a7c;border-color:#6b3a30;background:rgba(181,82,63,.12)}
.s-prio{color:#1a1002;background:var(--forge);border-color:#f0cf86}
.carte.is-prio{box-shadow:0 0 22px rgba(217,130,43,.22)}
.carte .btn{margin-top:auto;padding:.5rem .9rem;font-size:.85rem;text-align:center}
.carte[data-s="ferme"] .btn{opacity:.45;pointer-events:none}

/* Progression : l'image revient en filigrane pour garder l'ambiance */
#progression{background:linear-gradient(rgba(12,18,15,.9),rgba(12,18,15,.94)),url("fond-hero.jpg") center 75%/cover no-repeat}
@media(max-width:640px){.hero{background-position:center,50% 40%,0 0,0 0,0 0,0 0}}
/* Progression */
.raids{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.raid{background:linear-gradient(160deg,var(--pierre2),var(--pierre));border:1px solid var(--ligne);padding:1.4rem}
.raid h3{font-size:1.2rem;margin-bottom:.2rem}
.raid .score{font:700 2rem var(--titre);color:var(--or)}
.raid .score span{font-size:1rem;color:var(--doux);font-family:var(--corps);font-weight:400}
.barre{height:8px;background:#0a0f0d;border:1px solid var(--ligne);margin:.7rem 0 .5rem}
.barre i{display:block;height:100%;background:linear-gradient(90deg,var(--elfe),var(--hurle),var(--forge))}
.raid p{color:var(--doux);font-size:.98rem}
.raid.fini{border-color:var(--or)}

/* Pied de page */
footer{padding:2.5rem 0;border-top:1px solid var(--ligne);color:var(--doux);font-size:.98rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}

/* Formulaire modal */
dialog{border-top:3px solid var(--hurle)!important;margin:auto;width:min(560px,100% - 1.5rem);max-height:92vh;overflow:auto;background:var(--pierre);color:var(--texte);border:1px solid var(--or);border-radius:3px;padding:2rem}
dialog::backdrop{background:rgba(0,0,0,.78)}
dialog h2{font-size:1.7rem}
.fermer{position:absolute;top:.6rem;right:.8rem;background:none;border:0;color:var(--doux);font-size:2rem;line-height:1;cursor:pointer}
.fermer:hover{color:var(--or-clair)}
label{display:block;margin-top:1.1rem;font-weight:700;font-size:1rem}
input,select,textarea{width:100%;margin-top:.35rem;font:1rem var(--corps);color:var(--texte);background:var(--fond);border:1px solid var(--ligne);border-radius:2px;padding:.7rem .8rem}
input:focus,select:focus,textarea:focus{border-color:var(--arcane);outline:none;box-shadow:0 0 0 2px rgba(74,143,191,.35)}
textarea{min-height:120px;resize:vertical}
form .btn{margin-top:1.6rem;width:100%}
.hp{position:absolute;left:-9999px}
.msg{margin-top:1rem;padding:.9rem 1rem;border-left:3px solid var(--fel);background:rgba(47,122,87,.15)}
.msg.err{border-color:var(--rouge);background:rgba(181,82,63,.15)}

/* Annonce */
.annonce{background:linear-gradient(90deg,rgba(138,107,196,.28),rgba(61,111,196,.28),rgba(217,130,43,.3));border-bottom:1px solid var(--or);padding:.8rem 0;text-align:center}
.annonce[hidden]{display:none}
.annonce strong{font-family:var(--titre);color:var(--or-clair);margin-right:.6rem;letter-spacing:.05em}
.specs{list-style:none;padding:0;display:grid;gap:.25rem;font-size:.92rem;margin:.2rem 0 .6rem}
.specs li{display:flex;justify-content:space-between;gap:.5rem}
.specs em{font-style:normal;color:var(--doux)}
.sp-prio em{color:var(--forge);font-weight:700}
.sp-ouvert em{color:#6fcf9b}
footer{padding-bottom:5.5rem}
.l-officier{background:none;border:0;color:var(--doux);font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.l-officier:hover{color:var(--or-clair)}

/* Comptes membres et armurerie */
[hidden]{display:none!important}
.compte{display:flex;align-items:center;gap:.5rem;margin-left:.8rem}
.btn-compte{display:inline-flex;align-items:center;gap:.4rem;font:700 .85rem var(--corps);color:var(--or-clair);background:rgba(12,18,15,.6);border:1px solid var(--or);border-radius:999px;padding:.3rem .9rem;cursor:pointer;text-decoration:none;white-space:nowrap;max-width:14rem}
.btn-compte:hover{background:rgba(201,162,75,.18);color:#fff}
.btn-compte.discret{border-color:var(--ligne);color:var(--doux)}
.btn-compte svg{width:1rem;height:1rem;fill:currentColor;flex:none}
#compte-pseudo{overflow:hidden;text-overflow:ellipsis}
.btn-compte .court{display:none}
@media(max-width:640px){#btn-deconnexion{display:none}}
@media(max-width:520px){.btn-compte .long{display:none}.btn-compte .court{display:inline}.tw:not(.live) #tw-txt{display:none}.logo{font-size:.85rem}.compte{margin-left:.4rem}#compte-pseudo{max-width:6rem}}
.verrou{grid-column:1/-1;text-align:center;padding:3rem 1.5rem;border:1px dashed var(--or);background:rgba(201,162,75,.05);display:grid;gap:1rem;justify-items:center}
.verrou svg{width:2.4rem;height:2.4rem;fill:var(--or)}
.verrou p{max-width:56ch;margin:0}
.verrou .actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.armu-barre{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-bottom:1.4rem}
.armu-barre .info{color:var(--doux);font-size:.95rem;margin-right:auto}
.persos{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.2rem}
.perso{display:flex;gap:1rem;align-items:center;padding:1.1rem 1.2rem;background:radial-gradient(120% 140% at 0% 0%,var(--glow),transparent 60%),linear-gradient(160deg,#1c2520,#0f1512);border:1px solid rgba(201,162,75,.55);border-left:4px solid var(--cl);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 24px var(--glow)}
.perso-embleme{position:relative;width:4.6rem;height:4.6rem;flex:none;display:grid;place-items:center}
.perso-embleme svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--cl);stroke-width:1.4;opacity:.9}
.perso-embleme b{font:900 1.9rem var(--titre);color:var(--cl);text-shadow:0 2px 8px #000}
.perso-corps{min-width:0;display:grid;gap:.2rem}
.perso h3{font-size:1.25rem;color:var(--cl);letter-spacing:.04em;overflow-wrap:anywhere}
.perso-classe{color:var(--texte)}
.perso-role{display:inline-flex;gap:.35rem;align-items:center;font-weight:700;color:var(--rc);font-size:.95rem}
.perso-meta{color:var(--doux);font-size:.92rem}
.perso-actions{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.lien-perso{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--cl);cursor:pointer;text-decoration:underline dotted}
.lien-bouton{background:none;border:0;color:var(--doux);text-decoration:underline;cursor:pointer;font:inherit;margin-top:.8rem;padding:0}
.petite{font-size:.92rem}
.a-ligne.attente{border-left-color:var(--forge)}
#fiche-carte .perso{margin-top:1rem}

/* Calendrier de raid */
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:1.2rem;align-items:start}
.evt{background:linear-gradient(160deg,var(--pierre2),var(--pierre));border:1px solid var(--ligne);border-top:3px solid var(--hurle);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.9rem}
.evt.complet{border-top-color:var(--forge)}
.evt.annule{border-top-color:var(--rouge);opacity:.65}
.evt-tete{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;flex-wrap:wrap}
.evt h3{font-size:1.35rem}
.quand{color:var(--or-clair);font-weight:700;margin-top:.2rem}
.quand small{color:var(--doux);font-weight:400;font-size:1rem}
.evt p{color:var(--doux);margin:0;font-size:1rem}
.etiq{font-weight:700;font-size:.85rem;padding:.2rem .7rem;border-radius:3px;border:1px solid;white-space:nowrap}
.et-ouvert{color:#6fcf9b;border-color:var(--fel);background:rgba(47,122,87,.18)}
.et-complet{color:#1a1002;background:var(--forge);border-color:#f0cf86}
.et-annule{color:#c98a7c;border-color:#6b3a30;background:rgba(181,82,63,.12)}
.compo{display:flex;flex-wrap:wrap;gap:.5rem}
.puce{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .75rem;border:1px solid var(--rc);color:var(--rc);border-radius:999px;font-size:.92rem}
.role-tank{--rc:#5a9bd0}.role-soigneur{--rc:#3fae7a}.role-dps{--rc:#d2605a}.role-aux{--rc:var(--doux)}
.ic{width:1.05rem;height:1.05rem;fill:currentColor;flex:none}
.roles{display:grid;gap:.7rem}
.role{border-left:3px solid var(--rc);background:rgba(0,0,0,.2);padding:.6rem .9rem}
.role-tete{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--rc);flex-wrap:wrap}
.role-tete span{margin-left:auto;font-weight:400;color:var(--doux);font-size:.92rem}
.inscrits{list-style:none;padding:0;margin:.45rem 0 0;display:grid;gap:.3rem}
.inscrits li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;font-size:1rem}
.inscrits b{color:var(--cl)}
.inscrits small{color:var(--doux);font-size:.88rem}
.note-i{width:100%;font-style:italic}
.pastille{font-style:normal;font-size:.76rem;font-weight:700;padding:.05rem .5rem;border-radius:3px;border:1px solid var(--forge);color:var(--forge)}
.pastille.ok{border-color:#3fae7a;color:#6fcf9b}
.x{margin-left:auto;background:none;border:0;color:var(--doux);cursor:pointer;font-size:1rem;padding:0 .3rem}
.x:hover{color:var(--rouge)}
.evt .btn{align-self:flex-start}

/* Espace Officier */
dialog.large{width:min(920px,100% - 1.5rem)}
.admin-barre{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:1rem 0;padding-bottom:1rem;border-bottom:1px solid var(--ligne)}
.petit{padding:.5rem 1rem!important;font-size:.82rem!important}
#tableau h3{margin:1.8rem 0 .8rem;font-size:1.3rem}
.a-classe{border:1px solid var(--ligne);border-left:3px solid var(--cl);padding:.8rem 1rem 1rem;margin-bottom:.8rem}
.a-classe legend{font:700 1rem var(--titre);color:var(--cl);padding:0 .4rem}
.a-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem}
.a-classe label,.a-raid label{margin-top:.5rem;font-size:.92rem}
.a-raid{display:grid;grid-template-columns:2fr .7fr .7fr 1fr;gap:.2rem .7rem;border:1px solid var(--ligne);padding:.8rem 1rem 1rem;margin-bottom:.8rem}
.a-raid .pleine{grid-column:1/-1}
@media(max-width:640px){.a-raid{grid-template-columns:1fr 1fr}.a-raid .nom{grid-column:1/-1}}
.onglets{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.onglets button{font:500 1rem var(--corps);color:var(--texte);background:transparent;border:1px solid var(--ligne);padding:.5rem 1.1rem;border-radius:999px;cursor:pointer}
.onglets button[aria-pressed="true"]{background:var(--hurle);color:#fff;border-color:var(--hurle)}
.a-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.2rem .8rem}
.a-grille .pleine{grid-column:1/-1}
.a-evt{border:1px solid var(--ligne);border-left:3px solid var(--or);padding:.9rem 1rem;margin-bottom:1rem}
.a-evt.archive{opacity:.6}
.a-evt-tete{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.a-evt-tete select{width:auto;margin:0}
.a-evt-tete span{color:var(--doux)}
.a-ins{margin-top:.8rem;display:grid;gap:.4rem}
.a-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;padding:.4rem .6rem;background:rgba(0,0,0,.2);border-left:3px solid var(--cl)}
.a-ligne b{color:var(--cl)}
.a-ligne select{width:auto;margin:0}
.a-ligne .ic{width:1rem;height:1rem;vertical-align:-.15rem}
.a-nom{flex:1 1 220px}
.a-pres{flex:1 1 160px;color:var(--doux);font-size:.95rem}
.admin-pied{position:sticky;bottom:-2rem;background:var(--pierre);padding:1rem 0;border-top:1px solid var(--ligne);margin-top:1.5rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.admin-pied .msg{margin:0;flex:1}

/* Twitch */
:root{--twitch:#9146ff;--twitch-clair:#c9a9ff}
.tw{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .8rem;border:1px solid rgba(145,70,255,.65);border-radius:999px;color:var(--twitch-clair);text-decoration:none;font:700 .85rem var(--corps);letter-spacing:.03em;white-space:nowrap}
.tw[hidden]{display:none}
.tw:hover{background:rgba(145,70,255,.18);color:#fff}
.tw svg{width:1rem;height:1rem;fill:currentColor}
.tw .pt{display:none;width:.65rem;height:.65rem;border-radius:50%;background:#ff3b3b}
.tw.live{border-color:#e03a3a;color:#fff;background:rgba(224,58,58,.2)}
.tw.live svg{display:none}
.tw.live .pt{display:inline-block;animation:clignote 1.1s ease-in-out infinite}
@keyframes clignote{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,59,59,.7)}50%{opacity:.35;box-shadow:0 0 0 .4rem rgba(255,59,59,0)}}
#live{background:linear-gradient(180deg,rgba(145,70,255,.09),transparent 40%)}
.tw-cadre{border:1px solid rgba(145,70,255,.45);border-top:3px solid var(--twitch);background:var(--pierre);box-shadow:0 0 34px rgba(145,70,255,.14)}
.tw-lecteur{height:clamp(300px,58vw,600px)}
.tw-lecteur iframe{width:100%;height:100%;border:0;display:block}
.tw-lecteur.cache{position:absolute;left:-9999px;top:0;width:640px;height:360px;opacity:0;pointer-events:none}
.tw-hors{padding:3rem 1.5rem;text-align:center;display:grid;gap:1rem;justify-items:center}
.tw-hors[hidden]{display:none}
.tw-hors svg{width:3rem;height:3rem;fill:var(--twitch)}
.tw-hors h3{font-size:1.5rem}
.tw-hors p{color:var(--doux);max-width:52ch;margin:0}
.tw-hors .actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}
.btn-tw{background:var(--twitch);color:#fff;border-color:#b58cff}
.btn-tw:hover{box-shadow:0 0 24px rgba(145,70,255,.6)}

/* Lecteur de l'hymne */
.lecteur{position:fixed;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:.7rem;padding:.45rem .95rem .45rem .45rem;background:rgba(12,18,15,.92);backdrop-filter:blur(8px);border:1px solid var(--or);border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.65),0 0 18px rgba(201,162,75,.2)}
.l-play{width:2.7rem;height:2.7rem;flex:none;border-radius:50%;border:1px solid #f0cf86;background:linear-gradient(#e0b45c,#b8731f);color:#1a1002;display:grid;place-items:center;cursor:pointer}
.l-play svg,.l-mute svg{width:1.25rem;height:1.25rem;fill:currentColor}
.ondes{display:none;align-items:center;gap:2px;height:1.2rem}
.ondes i{width:3px;height:30%;border-radius:2px;background:#1a1002;animation:onde 1s ease-in-out infinite}
.ondes i:nth-child(2){animation-delay:.2s}
.ondes i:nth-child(3){animation-delay:.4s}
.ondes i:nth-child(4){animation-delay:.6s}
@keyframes onde{0%,100%{height:25%}50%{height:100%}}
.lecteur.joue .l-play .i-off{display:none}
.lecteur.joue .ondes{display:flex}
.lecteur.muet .ondes i{animation-play-state:paused;height:40%}
.lecteur.attente .l-play{animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,130,43,.7)}100%{box-shadow:0 0 0 .9rem rgba(217,130,43,0)}}
.l-txt{display:flex;flex-direction:column;line-height:1.2}
.l-txt b{font:700 .85rem var(--titre);color:var(--or-clair);letter-spacing:.04em}
.l-txt span{font-size:.85rem;color:var(--doux)}
.l-mute{background:none;border:0;color:var(--or-clair);cursor:pointer;padding:.3rem;display:grid;place-items:center;border-radius:4px}
.l-mute:hover{color:var(--forge)}
.l-mute .i-off,.lecteur.muet .l-mute .i-on{display:none}
.lecteur.muet .l-mute .i-off{display:block}
.lecteur input{width:86px;margin:0;padding:0;background:none;border:0;accent-color:var(--or);cursor:pointer}
.lecteur input:focus{box-shadow:none}
@media(max-width:520px){.l-txt{display:none}.lecteur{gap:.4rem}.lecteur input{width:70px}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* ---------- Site multi-pages ---------- */
.droite{display:flex;align-items:center;gap:.6rem}
.droite .compte{margin-left:0}
nav a[aria-current="page"]{color:var(--or);border-bottom:2px solid var(--or)}
@media(max-width:900px){nav a[aria-current="page"]{border-bottom:1px solid var(--ligne);color:var(--or)}}
@media(max-width:520px){.logo .l2{display:none}.droite{gap:.4rem}}
.page-entete{position:relative;padding:3.4rem 0 2.6rem;border-bottom:1px solid var(--ligne);background:linear-gradient(rgba(6,9,8,.72),var(--fond)),url("fond-hero.jpg") center 35%/cover no-repeat}
.page-entete h1{font-family:"Cinzel Decorative","Cinzel",Georgia,serif;font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1.8rem,5.5vw,3.2rem);line-height:1.15;margin-bottom:.7rem;
  background:linear-gradient(180deg,#fffaf0 0%,#f6e6b8 28%,#d9b45a 55%,#b07a2a 80%,#7a4a17 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 1px rgba(0,0,0,.95)) drop-shadow(0 0 18px rgba(224,180,92,.4))}
.page-entete p{color:var(--texte);max-width:62ch;margin:0;text-shadow:0 2px 8px #000}
.page-section{padding:3rem 0 5rem}
.page-section + .page-section{padding-top:0}
.roster-outils{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:1rem}
.roster-outils input{width:min(100%,280px);margin:0}
.roster-resume{color:var(--doux);margin-bottom:1.6rem}
.membre{margin-bottom:2.2rem}
.membre-nom{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-bottom:.8rem;font:700 1.25rem var(--titre);color:var(--or-clair)}
.membre-nom small{font:400 .95rem var(--corps);color:var(--doux)}
#mon-personnage{scroll-margin-top:5rem}