: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:none}.petite{font-size:.92rem}
.lien-perso:hover{text-decoration:underline}
.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}

code.mdp-temp{font:700 1.1rem ui-monospace,Consolas,monospace;background:#000;color:var(--or-clair);padding:.1rem .6rem;border:1px solid var(--or);border-radius:3px;user-select:all}
.verif-carte{max-width:560px;margin:0 auto;text-align:center;padding:2.4rem 1.6rem;border:1px solid var(--or);background:linear-gradient(160deg,var(--pierre2),var(--pierre));display:grid;gap:1rem;justify-items:center}
.verif-carte h2{font-size:1.7rem;margin:0}
.verif-carte p{margin:0;max-width:44ch}
.verif-carte.ok{border-color:#3fae7a;box-shadow:0 0 28px rgba(63,174,122,.25)}
.verif-carte.ok h2{color:#8ce0b4}
.verif-carte.erreur{border-color:#8a4a3c}
.verif-carte.erreur h2{color:#e0a090}

/* ---------- Les Chroniques des Anciens ---------- */
:root{--parchemin:#e6d3a3;--parchemin2:#d4ba84;--encre:#2b2113;--encre-douce:#5b4a2e;--sceau:#8c3f12}
.chro-barre{display:flex;justify-content:flex-end;margin-bottom:1.4rem}
.chro-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:1.5rem;align-items:stretch}
.chro-liste[hidden],#chro-lecture[hidden]{display:none}

/* Note d'aventurier : cadre de pierre sombre, liseré d'or, papier parchemin à l'intérieur */
.note{display:flex;flex-direction:column;gap:.5rem;padding:.55rem;text-decoration:none;color:var(--encre);
  background:linear-gradient(160deg,var(--pierre2),var(--pierre));border:1px solid var(--or);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),0 8px 24px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s}
.note:hover,.note:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),0 10px 30px rgba(0,0,0,.55),0 0 24px rgba(201,162,75,.35)}
.note.brouillon{border-style:dashed;opacity:.85}
.note-image{height:150px;overflow:hidden;border:1px solid rgba(201,162,75,.5)}
.note-image img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25) saturate(.9)}
.note-papier{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.15rem .9rem;color:var(--encre);border:1px solid rgba(60,40,10,.55);
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,250,230,.55),transparent 60%),radial-gradient(90% 80% at 100% 100%,rgba(120,80,20,.28),transparent 65%),linear-gradient(#ead9ae,var(--parchemin2))}
.note-date{display:flex;align-items:center;gap:.6rem;font:700 .8rem var(--titre);letter-spacing:.08em;text-transform:uppercase;color:var(--sceau)}
.note-papier h3{font-size:1.3rem;color:#3b2209;line-height:1.2}
.note-papier p{margin:0;color:var(--encre-douce);font-size:1.02rem;line-height:1.5}
.note-pied{margin-top:auto;padding-top:.6rem;border-top:1px solid rgba(60,40,10,.35);display:flex;justify-content:space-between;gap:.6rem;color:var(--encre-douce);font-size:.92rem}
.note-pied b{color:#3b2209}

/* Lecture : même cadre de pierre, grand parchemin */
.chro-retour{display:inline-block;margin-bottom:1.2rem;font-weight:700}
.chro-cadre{max-width:820px;margin:0 auto;padding:.8rem;background:linear-gradient(160deg,var(--pierre2),var(--pierre));border:1px solid var(--or);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),0 12px 40px rgba(0,0,0,.55),0 0 34px rgba(201,162,75,.14)}
.chro-couv{margin:0 0 .8rem;border:1px solid rgba(201,162,75,.55);max-height:340px;overflow:hidden}
.chro-couv img{width:100%;display:block;object-fit:cover;max-height:340px;filter:sepia(.2) saturate(.95)}
.chro-papier{padding:2rem clamp(1.1rem,4vw,2.6rem) 1.6rem;color:var(--encre);border:1px solid rgba(60,40,10,.55);
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,250,230,.6),transparent 55%),radial-gradient(100% 70% at 100% 100%,rgba(120,80,20,.3),transparent 60%),linear-gradient(#ecdcb2,var(--parchemin2))}
.chro-tete{text-align:center;padding-bottom:1.2rem;margin-bottom:1.4rem;border-bottom:1px solid rgba(60,40,10,.4)}
.chro-tete .note-date{justify-content:center}
.chro-tete h2{margin:.5rem 0;font-family:"Cinzel Decorative","Cinzel",Georgia,serif;font-size:clamp(1.5rem,4.2vw,2.3rem);color:#3b2209;line-height:1.2}
.chro-signature{margin:0;font-style:italic;color:var(--encre-douce)}
.chro-signature b{color:#3b2209;font-style:normal}
.chro-corps{font-size:1.22rem;line-height:1.7;color:var(--encre)}
.chro-corps p{margin:0 0 1rem}
.chro-corps>p:first-child::first-letter{float:left;font:900 3.6rem/.85 var(--titre);padding:.2rem .5rem 0 0;color:var(--sceau)}
.chro-corps h3{margin:1.8rem 0 .7rem;font-size:1.35rem;color:#5a3010;border-bottom:1px solid rgba(60,40,10,.35);padding-bottom:.3rem}
.chro-corps strong{color:#3b2209}
.chro-corps ul{margin:0 0 1rem 1.4rem}
.chro-corps li{margin-bottom:.3rem}
.chro-corps blockquote{margin:1.4rem 0;padding:.9rem 1.2rem;border-left:4px solid var(--sceau);background:rgba(140,106,36,.14);font-style:italic}
.chro-corps blockquote p{margin:0}
.chro-corps cite{display:block;margin-top:.5rem;font-style:normal;font:700 .9rem var(--titre);letter-spacing:.04em;color:var(--sceau)}
.chro-corps figure{margin:1.6rem 0;text-align:center}
.chro-corps figure img{max-width:100%;height:auto;border:1px solid rgba(60,40,10,.6);box-shadow:0 6px 18px rgba(40,25,5,.45)}
.chro-corps figcaption{margin-top:.5rem;font-style:italic;font-size:.98rem;color:var(--encre-douce)}
.chro-corps hr.orn{border:0;height:1px;margin:1.8rem auto;width:70%;background:linear-gradient(90deg,transparent,var(--sceau),transparent);overflow:visible;position:relative}
.chro-corps hr.orn::after{content:"✦";position:absolute;left:50%;top:50%;translate:-50% -52%;padding:0 .6rem;background:var(--parchemin);color:var(--sceau);font-size:.9rem}
.chro-sceau{margin-top:1.6rem;text-align:center;letter-spacing:.6em;color:var(--sceau)}
.chro-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.pastille{white-space:nowrap}
.chro-papier .pastille{border-color:var(--sceau);color:var(--sceau)}

/* Commentaires : retour à la pierre sombre */
.chro-coms{max-width:820px;margin:2rem auto 0}
.chro-coms h3{font-size:1.3rem;margin-bottom:1rem}
.chro-coms h3 small{font:400 1rem var(--corps);color:var(--doux)}
.chro-com-liste{list-style:none;padding:0;display:grid;gap:.7rem;margin:0 0 1.4rem}
.chro-com{background:var(--pierre);border:1px solid var(--ligne);border-left:3px solid var(--or);padding:.7rem 1rem}
.chro-com.vide{border-left-color:var(--ligne);color:var(--doux)}
.chro-com-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .7rem}
.chro-com-tete b{color:var(--or-clair)}
.chro-com-tete small{color:var(--doux)}
.chro-com p{margin:.3rem 0 0;overflow-wrap:anywhere}
.chro-coms form .btn{width:auto}

/* Éditeur */
.ch-outils{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.ch-outils button{font:500 .9rem var(--corps);color:var(--texte);background:var(--fond);border:1px solid var(--ligne);padding:.3rem .7rem;border-radius:3px;cursor:pointer}
.ch-outils button:hover,.ch-outils button[aria-pressed="true"]{border-color:var(--or);color:var(--or-clair)}
.ch-apercu{max-height:50vh;overflow:auto;padding:1.2rem 1.4rem}
.ch-apercu[hidden],#ch-contenu[hidden]{display:none}
dialog code{font:.9rem ui-monospace,Consolas,monospace;background:#000;color:var(--or-clair);padding:.05rem .35rem;border-radius:3px}

/* =====================================================================
   THEME WOW : interface « pierre et or ». À COLLER TOUT EN BAS de style.css
   ===================================================================== */
:root{
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .75  0 0 0 0 .65  0 0 0 0 .45  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --laiton:linear-gradient(135deg,#f6e2a0 0%,#c9a24b 28%,#7a5c22 52%,#d9b45a 78%,#8a6a2c 100%);
  --cuir:linear-gradient(160deg,#272016,#14100b);
  --metal:#8a6a2c;
}

/* ---------- Titres : or brillant avec ombre ---------- */
h2{color:#f0cf86;text-shadow:0 2px 0 #000,0 0 18px rgba(224,180,92,.3)}
h3{text-shadow:0 2px 0 rgba(0,0,0,.8)}

/* ---------- En-tête : pierre sculptée, liserés dorés ---------- */
header#entete{position:sticky;top:0;z-index:40;border:0;border-image:none;border-bottom:3px solid #b08a3a;backdrop-filter:none;
  background:var(--grain),linear-gradient(180deg,#2a241a 0%,#16130d 55%,#0d0b08 100%);
  box-shadow:inset 0 -1px 0 #f0cf86,inset 0 -3px 0 #000,0 8px 22px rgba(0,0,0,.75)}
header#entete .wrap{display:block;height:auto}
.barre-compte{background:rgba(0,0,0,.4);border-bottom:1px solid rgba(201,162,75,.3)}
header#entete .barre-compte .wrap{display:flex;justify-content:flex-end;align-items:center;padding:.25rem 0}
.barre-compte .compte{margin:0;padding:.18rem .55rem;border:2px solid transparent;border-radius:4px;
  background:linear-gradient(#1c170f,#100d08) padding-box,var(--laiton) border-box;
  box-shadow:inset 0 1px 0 rgba(255,235,170,.25),inset 0 -2px 0 rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.6)}
.barre-compte .btn-compte{border-radius:3px;border-color:rgba(201,162,75,.5)}

header#entete .haut{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:1.2rem;height:4.6rem;width:min(1500px,100% - 2rem)}
header#entete #menu{display:contents}
.nav-bloc{display:flex;align-items:center}
.nav-g{grid-column:1;grid-row:1;justify-self:end}
.nav-d{grid-column:3;grid-row:1;justify-self:start}
.nav-bloc a{font:700 .95rem var(--titre);letter-spacing:.12em;text-transform:uppercase;color:var(--or-clair);text-decoration:none;
  padding:.35rem 1.1rem;text-shadow:0 2px 0 #000;border-bottom:2px solid transparent}
.nav-bloc a+a{border-left:1px solid rgba(201,162,75,.35)}
.nav-bloc a:hover{color:#fff;text-shadow:0 0 12px rgba(224,180,92,.8),0 2px 0 #000}
header#entete .nav-bloc a[aria-current="page"]{color:var(--or);border-bottom:2px solid var(--or)}
.nav-bloc .tw{border-radius:0;border:0;border-left:1px solid rgba(201,162,75,.35);background:none;color:var(--twitch-clair);
  font:700 .95rem var(--titre);letter-spacing:.12em;text-transform:uppercase;padding:.35rem 1.1rem}
.nav-bloc .tw:hover{background:none;color:#fff}
.nav-bloc .tw.live{color:#fff;background:rgba(224,58,58,.25);border-radius:3px}
.nav-bloc .tw .long{display:none}
.nav-bloc .ico{display:inline-flex;align-items:center;padding:.35rem .9rem}
.nav-bloc .ico svg{width:1.35rem;height:1.35rem;fill:currentColor}

/* Emblème central : un médaillon qui déborde sous la barre */
header#entete .embleme{grid-column:2;grid-row:1;position:relative;z-index:5;display:block;width:9rem;height:4.6rem}
header#entete .embleme img{position:absolute;left:50%;top:50%;translate:-50% -46%;height:9rem;width:auto;max-width:none;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(201,162,75,.35));transition:filter .3s,scale .3s}
header#entete .embleme:hover img{scale:1.04;filter:drop-shadow(0 5px 6px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(240,207,134,.7))}
.hero{min-height:calc(100vh - 7.5rem)}
html{scroll-padding-top:8rem}

/* Petits écrans : menu déroulant */
@media(max-width:1300px){
  header#entete .haut{height:3.8rem}
  header#entete .embleme{width:6.4rem;height:3.8rem}
  header#entete .embleme img{height:6.6rem}
  header#entete .burger{display:inline-flex;grid-column:3;grid-row:1;justify-self:end;background:rgba(0,0,0,.4);border-color:#8a6a2c}
  header#entete #menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:.4rem 1.25rem 1rem;
    background:var(--grain),linear-gradient(#1b160e,#0d0b08);border-bottom:3px solid #b08a3a;box-shadow:0 12px 24px rgba(0,0,0,.7)}
  header#entete.ouvert #menu{display:flex}
  .nav-bloc{flex-direction:column;align-items:stretch;justify-self:auto}
  .nav-bloc a,.nav-bloc .tw{padding:.85rem 0;border-left:0;border-bottom:1px solid var(--ligne);font-size:1rem}
  .nav-bloc a+a{border-left:0}
  .nav-bloc .tw .long{display:none}
  .nav-bloc .ico{padding:.85rem 0}
  .nav-bloc .tw:not(.live) #tw-txt{display:inline}
}
@media(max-width:520px){ .hero{min-height:calc(100vh - 6rem)} html{scroll-padding-top:6.5rem} }

/* ---------- Cadres de contenu : cuir sombre, bordure biseautée, coins ornés ---------- */
.bloc,.resume,.carte,.raid,.evt,.perso,.tw-cadre,.addon{position:relative;border:2px solid var(--metal);border-image:none;
  background:var(--grain),var(--cuir);
  box-shadow:inset 1px 1px 0 rgba(255,225,150,.35),inset -1px -1px 0 rgba(0,0,0,.85),inset 0 0 0 3px #17130c,inset 0 0 0 4px #5a4420,inset 0 0 34px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.55)}
.bloc{border-left:4px solid var(--elfe)}
.bloc:nth-child(3n+2){border-left-color:var(--hurle)}
.bloc:nth-child(3n){border-left-color:var(--forge)}
.bloc.non{border-left-color:var(--rouge)}
.bloc.large{border-left-color:var(--elfe)}
.carte{border-top:3px solid var(--cl)}
.evt{border-top:3px solid var(--hurle)}
.perso{border-left:4px solid var(--cl);
  background:var(--grain),radial-gradient(120% 140% at 0% 0%,var(--glow),transparent 60%),var(--cuir)}
.tw-cadre{border-top:3px solid var(--twitch)}
.resume{border-color:#b08a3a}

/* Ornements : équerres dorées et rivets de bronze aux quatre coins */
.bloc::before,.resume::before,.carte::before,.raid::before,.evt::before,.perso::before,.tw-cadre::before,.addon::before{
  content:"";position:absolute;inset:3px;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle,#f6e2a0 0 1.5px,#8a6a2c 1.5px 3px,transparent 3.6px) left top/11px 11px no-repeat,
    radial-gradient(circle,#f6e2a0 0 1.5px,#8a6a2c 1.5px 3px,transparent 3.6px) right top/11px 11px no-repeat,
    radial-gradient(circle,#f6e2a0 0 1.5px,#8a6a2c 1.5px 3px,transparent 3.6px) left bottom/11px 11px no-repeat,
    radial-gradient(circle,#f6e2a0 0 1.5px,#8a6a2c 1.5px 3px,transparent 3.6px) right bottom/11px 11px no-repeat,
    linear-gradient(#c9a24b,#c9a24b) left top/20px 2px no-repeat,
    linear-gradient(#c9a24b,#c9a24b) left top/2px 20px no-repeat,
    linear-gradient(#c9a24b,#c9a24b) right top/20px 2px no-repeat,
    linear-gradient(#c9a24b,#c9a24b) right top/2px 20px no-repeat,
    linear-gradient(#c9a24b,#c9a24b) left bottom/20px 2px no-repeat,
    linear-gradient(#c9a24b,#c9a24b) left bottom/2px 20px no-repeat,
    linear-gradient(#c9a24b,#c9a24b) right bottom/20px 2px no-repeat,
    linear-gradient(#c9a24b,#c9a24b) right bottom/2px 20px no-repeat}

/* ---------- Lecteur de l'hymne : contour laiton ---------- */
.lecteur{border:3px solid transparent;
  background:linear-gradient(#1c170f,#0e0b07) padding-box,var(--laiton) border-box;
  box-shadow:inset 0 1px 0 rgba(255,235,170,.25),inset 0 -2px 0 rgba(0,0,0,.6),0 6px 24px rgba(0,0,0,.7)}

/* ---------- Addons recommandés ---------- */
.addons-cat{padding:0;margin-bottom:2.4rem}
.addons-titre{display:flex;align-items:center;gap:1rem;font-size:clamp(1.3rem,3vw,1.8rem);margin-bottom:1.2rem}
.addons-titre::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,#b08a3a,transparent)}
.addons-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.3rem;align-items:stretch}
.addon{display:flex;flex-direction:column;gap:.7rem;padding:1.3rem 1.4rem 1.2rem;border-top:3px solid var(--hurle)}
.addon.niv-obligatoire{border-top-color:var(--forge)}
.addon.niv-confort{border-top-color:#6c7b6f}
.addon-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:.7rem;position:relative;z-index:3}
.addon-tete h3{font-size:1.2rem;color:#f0cf86;overflow-wrap:anywhere;text-shadow:0 2px 0 #000,0 0 12px rgba(224,180,92,.25)}
.badge-niv{flex:none;font:700 .72rem var(--titre);letter-spacing:.06em;text-transform:uppercase;padding:.22rem .6rem;border-radius:3px;border:1px solid;white-space:nowrap}
.badge-niv.niv-obligatoire{color:#1a1002;background:var(--forge);border-color:#f0cf86}
.badge-niv.niv-recommande{color:#fff;background:var(--hurle);border-color:#7ea4e6}
.badge-niv.niv-confort{color:#c9d3cb;background:rgba(108,123,111,.25);border-color:#6c7b6f}
.addon-desc{margin:0;color:var(--texte);font-size:1.02rem;line-height:1.5;position:relative;z-index:3}
.addon-pied{margin-top:auto;padding-top:.5rem;display:grid;gap:.6rem;position:relative;z-index:3}
.addon-pied .btn{width:100%;text-align:center;padding:.65rem 1rem;font-size:.9rem}
.addon-gestion{display:flex;justify-content:flex-end;gap:.9rem}
.addon-gestion button{background:none;border:0;padding:0;font:500 .85rem var(--corps);color:var(--doux);text-decoration:underline;cursor:pointer}
.addon-gestion button:hover{color:var(--or-clair)}
.addon-gestion button[data-suppr]:hover{color:#e0a090}