/* OrbSiege : feuille de style du site (vitrine, espace testeurs, administration). */

@font-face{font-family:"Alegreya SC";font-weight:500;font-style:normal;font-display:swap;src:url(../polices/alegreya-sc-500.woff2) format("woff2")}
@font-face{font-family:"Alegreya SC";font-weight:700;font-style:normal;font-display:swap;src:url(../polices/alegreya-sc-700.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../polices/alegreya-sans-400.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../polices/alegreya-sans-500.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../polices/alegreya-sans-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(../polices/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(../polices/plex-mono-500.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --fond:#0f0d14; --fond2:#15121c; --surface:#1c1826; --surface2:#231e30; --trait:#2c2638; --trait-fort:#3d3450;
  --texte:#ece5d6; --doux:#a39bb0; --tres-doux:#7d7590;
  --or:#d6a84e; --or-clair:#e9c173; --or-fonce:#a67c2e;
  --rune:#a47aff; --rune-clair:#c9b0ff; --rune-doux:#3a2a5e;
  --rouge:#d8604a; --bleu:#5b8fe6; --ok:#6fbf73; --alerte:#ff9a86;
  --titre:"Alegreya SC",Georgia,"Times New Roman",serif;
  --corps:"Alegreya Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --rayon:10px;
  --largeur:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;min-height:100vh;color:var(--texte);font:17px/1.6 var(--corps);
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(164,122,255,.10),transparent 60%),
    radial-gradient(900px 700px at -10% 40%,rgba(214,168,78,.05),transparent 60%),
    var(--fond);
  background-attachment:fixed;
}
img{max-width:100%}
.page{max-width:var(--largeur);margin:0 auto;padding-inline:16px}
h1,h2,h3{font-family:var(--titre);font-weight:700;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:.01em}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:21px}
p{margin:0}
a{color:var(--or);text-underline-offset:3px}
a:hover{color:var(--or-clair)}
::selection{background:rgba(164,122,255,.35)}
:focus-visible{outline:2px solid var(--rune-clair);outline-offset:3px;border-radius:4px}
.visuellement-cache{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lien-evitement{position:absolute;left:16px;top:-60px;z-index:50;background:var(--or);color:#1a1206;padding:10px 14px;border-radius:6px;font-weight:700;text-decoration:none}
.lien-evitement:focus{top:12px}

.etiquette{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rune-clair)}
.etiquette::before{content:"";width:18px;height:1px;background:linear-gradient(90deg,transparent,var(--rune))}

/* Boutons */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 16px/1 var(--corps);padding:14px 22px;border-radius:7px;border:1px solid var(--or);background:linear-gradient(180deg,#e2b55c,var(--or));color:#1a1206;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;box-shadow:0 6px 20px -8px rgba(214,168,78,.6)}
.bouton:hover{background:linear-gradient(180deg,#f0c56d,#e2b55c);color:#1a1206;transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(214,168,78,.75)}
.bouton:active{transform:translateY(0)}
.bouton.fantome{background:rgba(214,168,78,.04);color:var(--or);box-shadow:none}
.bouton.fantome:hover{background:rgba(214,168,78,.12);color:var(--or-clair)}
.bouton.petit{padding:9px 14px;font-size:14.5px}
.bouton.danger{border-color:#c8553d;background:#c8553d;color:#fff;box-shadow:none}
.bouton.danger:hover{background:#d8664e;color:#fff}
.bouton.discret{border-color:var(--trait-fort);background:transparent;color:var(--texte);box-shadow:none}
.bouton.discret:hover{background:var(--surface2);color:var(--texte)}
.bouton[disabled],.bouton[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.bouton svg{width:18px;height:18px;flex:none}

/* Barre du haut */
.barre-fixe{position:sticky;top:0;z-index:30;transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;border-bottom:1px solid transparent}
.barre-fixe.defilee{background:rgba(15,13,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--trait)}
.barre{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
.marque{font:700 23px/1 var(--titre);letter-spacing:.06em;display:flex;align-items:center;gap:11px;color:var(--texte);text-decoration:none}
.marque:hover{color:var(--texte)}
.orbe{width:15px;height:15px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#f1e8ff,var(--rune) 55%,#4b2a99);box-shadow:0 0 14px var(--rune)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:var(--doux);text-decoration:none;font-weight:500;padding:8px 11px;border-radius:6px}
.nav a:hover{color:var(--texte);background:rgba(255,255,255,.04)}
.nav a[aria-current="true"]{color:var(--texte)}
.barre .droite{display:flex;align-items:center;gap:12px}
.statut{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 var(--mono);color:var(--doux);padding:7px 11px;border:1px solid var(--trait);border-radius:999px;background:rgba(21,18,28,.6);text-decoration:none;white-space:nowrap}
.statut:hover{color:var(--texte)}
.point{width:8px;height:8px;border-radius:50%;background:var(--tres-doux);flex:none}
.point.vert{background:var(--ok);box-shadow:0 0 0 0 rgba(111,191,115,.6)}
.point.rouge{background:var(--rouge)}
@media (max-width:980px){.nav{display:none}}
@media (max-width:560px){.statut{display:none}.barre .bouton{padding:11px 14px;font-size:15px}}

/* Héros */
.heros{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--trait);min-height:clamp(520px,68vh,700px);display:flex;isolation:isolate;background:#16121e}
.heros>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.heros .voile{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(15,13,20,.94) 0%,rgba(15,13,20,.7) 38%,rgba(15,13,20,.08) 72%),
  linear-gradient(0deg,rgba(15,13,20,.85) 0%,rgba(15,13,20,0) 35%)}
.lueur-autel{position:absolute;left:50%;top:52.5%;width:clamp(90px,12vw,170px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-2;border-radius:50%;
  background:radial-gradient(circle,rgba(214,160,255,.55) 0%,rgba(164,122,255,.25) 35%,rgba(164,122,255,0) 70%);mix-blend-mode:screen;pointer-events:none}
.anneau-runes{position:absolute;inset:-35%;width:170%;height:170%;opacity:.8}
.particules{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.particules span{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--rune-clair);box-shadow:0 0 10px var(--rune);opacity:0}
.heros .texte{align-self:center;display:grid;gap:18px;padding:clamp(22px,5vw,60px);max-width:650px}
.heros h1{font-size:clamp(46px,8vw,92px);letter-spacing:.02em;line-height:.95;background:linear-gradient(180deg,#fff6e2,#e2c48a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 24px rgba(0,0,0,.5))}
.heros .accroche{color:#e2dac9;font-size:clamp(17px,1.9vw,20px);max-width:48ch}
.heros .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.heros .en-direct{display:flex;flex-wrap:wrap;gap:8px 18px;font:500 13px/1.3 var(--mono);color:var(--doux)}
.heros .en-direct span{display:inline-flex;align-items:center;gap:8px}
@media (max-width:700px){
  .heros{min-height:auto;flex-direction:column;justify-content:flex-end}
  .heros>img{position:relative;inset:auto;height:auto;aspect-ratio:4/3.2;z-index:-3}
  .heros .voile{background:linear-gradient(0deg,var(--fond2) 0%,rgba(21,18,28,.96) 38%,rgba(15,13,20,.2) 62%,rgba(15,13,20,0) 100%)}
  .heros .texte{margin-top:-90px;padding:22px 20px 26px}
  .lueur-autel{top:26%}
}

@media (prefers-reduced-motion:no-preference){
  .orbe{animation:pouls 3.2s ease-in-out infinite}
  @keyframes pouls{50%{box-shadow:0 0 24px var(--rune),0 0 4px #fff}}
  .point.vert{animation:ping 2.4s ease-out infinite}
  @keyframes ping{0%{box-shadow:0 0 0 0 rgba(111,191,115,.55)}70%,100%{box-shadow:0 0 0 7px rgba(111,191,115,0)}}
  .heros>img{animation:zoom 38s ease-in-out infinite alternate}
  @keyframes zoom{from{transform:scale(1)}to{transform:scale(1.07) translate(-1%,1%)}}
  .lueur-autel{animation:souffle 4.5s ease-in-out infinite}
  @keyframes souffle{50%{opacity:.6;transform:translate(-50%,-50%) scale(.88)}}
  .anneau-runes{animation:tourne 60s linear infinite}
  @keyframes tourne{to{transform:rotate(360deg)}}
  .particules span{animation:monte var(--duree,11s) linear infinite;animation-delay:var(--delai,0s)}
  @keyframes monte{0%{transform:translate(0,0);opacity:0}12%{opacity:.9}80%{opacity:.5}100%{transform:translate(var(--derive,20px),-560px);opacity:0}}
  .js .apparait{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .apparait.vu{opacity:1;transform:none}
}

/* Bandeau des chiffres en direct */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;border:1px solid var(--trait);border-radius:var(--rayon);background:linear-gradient(180deg,var(--fond2),rgba(21,18,28,.6));overflow:hidden}
.chiffre{padding:18px 20px;display:grid;gap:4px;border-left:1px solid var(--trait)}
.chiffre:first-child{border-left:0}
.chiffre b{font:700 30px/1 var(--titre);color:var(--texte);font-variant-numeric:tabular-nums}
.chiffre span{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
@media (max-width:760px){.chiffres{grid-template-columns:repeat(2,1fr)}.chiffre:nth-child(3){border-left:0}.chiffre:nth-child(n+3){border-top:1px solid var(--trait)}}

section{padding-block:72px 16px;display:grid;gap:30px}
.intro{display:grid;gap:12px;max-width:70ch}
.intro p{color:var(--doux);font-size:18px}
.intro.centre{justify-items:center;text-align:center;margin-inline:auto}

/* Principe */
.etapes-jeu{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;counter-reset:etape}
.etape-jeu{position:relative;padding:24px 22px 22px;border:1px solid var(--trait);border-radius:var(--rayon);background:linear-gradient(180deg,var(--fond2),rgba(21,18,28,.4));display:grid;gap:10px;align-content:start;overflow:hidden}
.etape-jeu::after{counter-increment:etape;content:counter(etape);position:absolute;right:14px;top:-6px;font:700 86px/1 var(--titre);color:rgba(214,168,78,.07)}
.etape-jeu .glyphe{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--or-fonce);color:var(--or);background:radial-gradient(circle,rgba(214,168,78,.14),transparent 70%)}
.etape-jeu .glyphe svg{width:24px;height:24px}
.etape-jeu h3{color:var(--or);font-size:23px}
.etape-jeu p{color:var(--doux)}
@media (max-width:820px){.etapes-jeu{grid-template-columns:1fr}}
.modes{display:flex;flex-wrap:wrap;gap:10px}
.puce{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--mono);padding:9px 13px;border-radius:999px;border:1px solid var(--trait);color:var(--texte);background:var(--fond2)}
.puce b{color:var(--or);font-weight:500}

/* Classes */
.classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:14px}
.classe{--accent:var(--or);position:relative;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;padding:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,var(--fond2)),var(--fond2) 55%);border:1px solid var(--trait);border-radius:var(--rayon);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.classe:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--trait));transform:translateY(-2px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--accent) 70%,transparent)}
.classe .icone{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#2a2140,#171320);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--rune-doux))}
.classe .icone::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);opacity:.55;transition:opacity .3s}
.classe .icone img{width:34px;height:34px}
.classe h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.classe .role{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.classe p{color:var(--doux);font-size:16px;margin-top:6px}
@media (prefers-reduced-motion:no-preference){.classe:hover .icone::before{opacity:1;animation:tourne 9s linear infinite}}
.classe[data-classe="chevalier"]{--accent:#d6a84e}
.classe[data-classe="mage"]{--accent:#7aa2ff}
.classe[data-classe="assassin"]{--accent:#5fc9a8}
.classe[data-classe="vampire"]{--accent:#e0627a}
.classe[data-classe="troll"]{--accent:#98c255}
.classe[data-classe="artilleur"]{--accent:#e8964a}

/* Carte */
.carte-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}
.plan{margin:0;position:relative;border:1px solid var(--trait);border-radius:var(--rayon);background:#120f18;padding:14px;display:grid;gap:10px}
.plan svg{width:100%;height:auto;max-height:640px;display:block}
.plan figcaption{position:static;background:none;padding:0;font:400 12.5px/1.4 var(--mono);color:var(--doux)}
.plan .zone-svg{transition:opacity .25s ease,filter .25s ease}
.plan.focalise .zone-svg{opacity:.35}
.plan.focalise .zone-svg.actif{opacity:1;filter:drop-shadow(0 0 10px rgba(233,193,115,.35))}
.plan text{font-family:var(--mono);font-size:34px;font-weight:500;fill:#efe7d6;paint-order:stroke;stroke:#0f0d14;stroke-width:7px;stroke-linejoin:round}
.plan text.grand{font-family:var(--titre);font-size:46px;font-weight:700;letter-spacing:.06em}
.zones{display:grid;gap:10px}
.zone{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--fond2);color:inherit;font:inherit;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.zone:hover,.zone[aria-pressed="true"]{border-color:var(--or-fonce);background:var(--surface)}
.zone .pastille{width:44px;height:44px;border-radius:8px;border:1px solid var(--trait-fort)}
.zone b{display:block;font-family:var(--titre);font-size:19px}
.zone span{color:var(--doux);font-size:16px}
.pastille.ville{background:linear-gradient(135deg,#7a4b33,#4e3325)}
.pastille.foret{background:linear-gradient(135deg,#2e5a34,#1c3a22)}
.pastille.riviere{background:linear-gradient(135deg,#3f7fb5,#244e74)}
.pastille.labyrinthe{background:repeating-linear-gradient(90deg,#8d8a80 0 5px,#3a3730 5px 10px)}
.pastille.place{background:radial-gradient(circle,#c9a6ff 0 18%,#5a4a73 20% 45%,#2a2238 47%)}
@media (max-width:900px){.carte-grille{grid-template-columns:1fr}.plan svg{max-height:520px}}

.vignette{position:relative;margin:0;border-radius:var(--rayon);overflow:hidden;border:1px solid var(--trait);background:var(--fond2);padding:0;cursor:zoom-in;display:block;color:inherit;font:inherit;text-align:left}
.vignette img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/9;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.vignette:hover img{transform:scale(1.04)}
.vignette .legende{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 11px;background:linear-gradient(0deg,rgba(10,8,14,.92),rgba(10,8,14,0));font-size:15px;line-height:1.35}

/* Visionneuse */
.visionneuse{width:min(1200px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:1px solid var(--trait-fort);border-radius:12px;background:#0b090f;color:var(--texte);overflow:hidden}
.visionneuse::backdrop{background:rgba(6,5,9,.86);backdrop-filter:blur(3px)}
.visionneuse figure{margin:0;display:grid}
.visionneuse img{width:100%;max-height:calc(100vh - 110px);object-fit:contain;display:block;background:#000}
.visionneuse figcaption{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.visionneuse .commandes{display:flex;gap:8px}

/* Serveurs */
.serveurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.serveur{padding:18px 20px;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--fond2);display:grid;gap:12px}
.serveur .tete{display:flex;justify-content:space-between;gap:10px;align-items:center}
.serveur h3{font-size:20px}
.serveur .details{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 13.5px/1.3 var(--mono);color:var(--doux)}
.jauge{height:6px;border-radius:99px;background:var(--trait);overflow:hidden}
.jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--rune),var(--or));border-radius:99px;transition:width .6s ease}
.mode{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:4px}
.mode.chill{background:rgba(111,191,115,.12);color:var(--ok)}
.mode.ranked{background:rgba(214,168,78,.14);color:var(--or)}
.vide{padding:22px;border:1px dashed var(--trait-fort);border-radius:var(--rayon);color:var(--doux);display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between}

/* Classement */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
.marche{position:relative;padding:20px 18px;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--fond2);display:grid;gap:6px;justify-items:center;text-align:center;overflow:hidden}
.marche .place{font:700 13px/1 var(--mono);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor}
.marche .pseudo{font:700 22px/1.1 var(--titre);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marche .pts{font:500 14px/1 var(--mono);color:var(--doux)}
.marche.p1{padding-block:30px;border-color:var(--or-fonce);background:linear-gradient(180deg,rgba(214,168,78,.12),var(--fond2) 70%)}
.marche.p1 .place{color:var(--or)}
.marche.p2 .place{color:#c9c6d6}
.marche.p3 .place{color:#c98a5a}
@media (min-width:641px){.podium .p1{order:2}.podium .p2{order:1}.podium .p3{order:3}}
@media (max-width:640px){.podium{grid-template-columns:1fr}.marche{grid-template-columns:auto 1fr auto;justify-items:start;text-align:left;align-items:center;padding:14px 16px}.marche.p1{padding-block:16px}}
.tableau{overflow-x:auto;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--fond2)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:12px 16px;text-align:left;white-space:nowrap}
th{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--doux);border-bottom:1px solid var(--trait);background:rgba(28,24,38,.5)}
td{border-bottom:1px solid rgba(44,38,56,.6)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(164,122,255,.04)}
td.num,th.num{text-align:right}
.rang{font:500 12.5px/1 var(--mono);padding:5px 9px;border-radius:4px;background:rgba(164,122,255,.12);color:var(--rune-clair)}
.serie-plus{color:var(--ok)}
.serie-moins{color:var(--alerte)}
.note{font:400 13px/1.45 var(--mono);color:var(--doux)}
.squelette{display:inline-block;height:1em;width:6em;border-radius:4px;background:linear-gradient(90deg,var(--trait) 0,#3a3348 50%,var(--trait) 100%);background-size:200% 100%;vertical-align:middle}
@media (prefers-reduced-motion:no-preference){.squelette{animation:lueur 1.4s linear infinite}@keyframes lueur{to{background-position:-200% 0}}}
@media (max-width:560px){.col-option{display:none}}

/* Appel testeurs */
.appel{position:relative;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:clamp(22px,4vw,40px);border-radius:14px;border:1px solid var(--rune-doux);background:radial-gradient(600px 300px at 90% 0%,rgba(164,122,255,.18),transparent 70%),linear-gradient(135deg,#1d1530,#141019);overflow:hidden}
.appel h2{margin-block:8px 10px}
.appel p{color:var(--doux);max-width:60ch}
@media (max-width:640px){.appel{grid-template-columns:1fr}}

.pied{margin-top:72px;padding-block:28px 40px;border-top:1px solid var(--trait);color:var(--doux);font-size:15px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.pied a{color:var(--doux)}

/* Porte (dialogue du code) */
.porte{width:min(460px,calc(100vw - 32px));padding:0;border:1px solid var(--rune-doux);border-radius:14px;background:var(--surface);color:var(--texte);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:visible}
.porte::backdrop{background:rgba(8,6,12,.8);backdrop-filter:blur(5px)}
.porte form{padding:30px 28px 26px;display:grid;gap:14px;position:relative}
.porte .sceau{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#2a2140,#171320);border:1px solid var(--rune-doux);box-shadow:0 0 30px rgba(164,122,255,.35)}
.porte .sceau .orbe{width:22px;height:22px}
.porte h2{text-align:center;margin-top:12px}
.porte .explication{color:var(--doux);text-align:center}
.porte label{font:500 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--doux)}
.champ-code{width:100%;font:500 21px/1 var(--mono);letter-spacing:.12em;padding:15px 14px;border-radius:8px;border:1px solid var(--trait-fort);background:var(--fond);color:var(--texte);text-align:center}
.champ-code::placeholder{color:#5b546a;letter-spacing:.12em}
.champ-code[aria-invalid="true"]{border-color:var(--rouge)}
.erreur{color:var(--alerte);font-size:15.5px;min-height:1.5em}
.porte .ligne{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.porte .ligne .bouton{flex:1 1 140px}
.porte .aide{font:400 13px/1.45 var(--mono);color:var(--doux);text-align:center}
@media (prefers-reduced-motion:no-preference){
  .porte[open]{animation:ouvre .28s cubic-bezier(.2,.8,.2,1)}
  @keyframes ouvre{from{opacity:0;transform:translateY(12px) scale(.98)}}
  .secoue{animation:secoue .35s ease}
  @keyframes secoue{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
}

/* ─── Espace testeurs ─── */
.accueil{position:relative;display:grid;gap:12px;padding:clamp(26px,5vw,48px);border-radius:14px;border:1px solid var(--trait);overflow:hidden;isolation:isolate;margin-top:8px}
.accueil::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/pierres.jpg) center 40%/cover}
.accueil::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,13,20,.95),rgba(15,13,20,.78) 55%,rgba(15,13,20,.45))}
.accueil h1{font-size:clamp(36px,6vw,60px)}
.accueil p{color:#d6cfc0;max-width:62ch}
.accueil .infos{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.builds{display:grid;gap:14px}
.build{display:grid;grid-template-columns:1fr auto;gap:18px 26px;padding:22px 24px;background:var(--fond2);border:1px solid var(--trait);border-radius:var(--rayon)}
.build.neuf{border-color:var(--or-fonce);background:linear-gradient(160deg,rgba(214,168,78,.07),var(--fond2) 45%)}
.build .gauche{display:grid;gap:12px;min-width:0}
.build .titre-ligne{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.build .meta{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 13.5px/1.35 var(--mono);color:var(--doux)}
.build .meta span{overflow-wrap:anywhere}
.build ul{margin:0;padding-left:20px;color:#d6cfc0;display:grid;gap:5px}
.build .droite{display:grid;gap:8px;justify-items:end;align-content:start}
.empreinte{font:400 12px/1.4 var(--mono);color:var(--tres-doux);overflow-wrap:anywhere;max-width:100%}
.empreinte summary{cursor:pointer;color:var(--doux)}
.badge{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:4px;white-space:nowrap}
.badge.test{background:rgba(214,168,78,.14);color:var(--or)}
.badge.public{background:rgba(111,191,115,.12);color:var(--ok)}
.badge.neuf{background:rgba(164,122,255,.16);color:var(--rune-clair)}
.badge.cache{background:rgba(255,255,255,.06);color:var(--doux)}
.badge.revoque,.badge.expire{background:rgba(200,85,61,.14);color:var(--alerte)}
.badge.actif{background:rgba(111,191,115,.12);color:var(--ok)}
.badge.admin,.badge.supreme{background:rgba(164,122,255,.16);color:var(--rune-clair)}
@media (max-width:640px){.build{grid-template-columns:1fr;padding:18px}.build .droite{justify-items:start}}
.concepts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.concepts .vignette img{aspect-ratio:3/2}
.etapes{display:grid;gap:14px;counter-reset:e;padding:0;margin:0;list-style:none;max-width:76ch}
.etapes li{counter-increment:e;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.etapes li::before{content:counter(e);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:500 14px/1 var(--mono);border:1px solid var(--or-fonce);color:var(--or);background:rgba(214,168,78,.06)}
kbd{font:500 13px/1 var(--mono);padding:3px 7px;border-radius:4px;border:1px solid var(--trait-fort);border-bottom-width:2px;background:var(--fond)}
.encart{padding:18px 20px;border:1px solid var(--trait);border-left:3px solid var(--rune);border-radius:8px;background:var(--fond2);display:grid;gap:8px;max-width:76ch}
.encart p,.encart li{color:var(--doux)}
.encart ul{margin:0;padding-left:20px}
.copie{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.copie pre{flex:1 1 280px;margin:0;padding:12px 14px;border-radius:6px;background:var(--fond);border:1px solid var(--trait);font:400 13.5px/1.5 var(--mono);white-space:pre-wrap;color:#d6cfc0}
.message-etat{padding:14px 16px;border-radius:8px;border:1px solid var(--trait);background:var(--fond2);color:var(--doux)}

/* ─── Administration ─── */
.onglets{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--trait);margin-top:28px}
.onglets button{font:500 15px/1 var(--corps);color:var(--doux);background:none;border:0;border-bottom:2px solid transparent;padding:12px 14px;cursor:pointer;margin-bottom:-1px}
.onglets button:hover{color:var(--texte)}
.onglets button[aria-selected="true"]{color:var(--texte);border-bottom-color:var(--or)}
.panneau-admin{padding-top:26px;display:grid;gap:22px}
.panneau-admin[hidden]{display:none}
.carte-admin{padding:20px 22px;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--fond2);display:grid;gap:16px}
.carte-admin h2{font-size:24px}
.formulaire{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px 16px;align-items:end}
.formulaire .large{grid-column:1/-1}
.champ{display:grid;gap:6px}
.champ label,.champ .libelle{font:500 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.champ input,.champ select,.champ textarea{width:100%;font:400 16px/1.4 var(--corps);padding:10px 12px;border-radius:6px;border:1px solid var(--trait-fort);background:var(--fond);color:var(--texte)}
.champ textarea{min-height:110px;resize:vertical}
.champ .aide{font-size:14px;color:var(--tres-doux)}
.case{display:flex;align-items:center;gap:10px;cursor:pointer}
.case input{width:18px;height:18px;accent-color:var(--or)}
.actions-ligne{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.confirmation{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center;padding:6px 8px;border-radius:6px;background:rgba(200,85,61,.08);border:1px solid rgba(200,85,61,.35)}
.confirmation span{font-size:14.5px}
.code-neuf{padding:20px;border:1px solid var(--or-fonce);border-radius:var(--rayon);background:linear-gradient(160deg,rgba(214,168,78,.10),var(--fond2));display:grid;gap:10px}
.code-neuf .valeur{font:500 clamp(22px,4vw,30px)/1.2 var(--mono);letter-spacing:.1em;color:var(--or-clair);overflow-wrap:anywhere}
.retour{font-size:15px;min-height:1.4em}
.retour.ok{color:var(--ok)}
.retour.ko{color:var(--alerte)}
.tableau td .sous{display:block;font:400 12.5px/1.3 var(--mono);color:var(--tres-doux)}
.journal td{white-space:normal;font-size:15px}
.journal td:first-child{white-space:nowrap;font:400 13px/1.3 var(--mono);color:var(--doux)}
.filtres{display:flex;gap:8px;flex-wrap:wrap}
.filtres button{font:500 13px/1 var(--mono);padding:8px 12px;border-radius:999px;border:1px solid var(--trait);background:var(--fond2);color:var(--doux);cursor:pointer}
.filtres button[aria-pressed="true"]{color:var(--texte);border-color:var(--or-fonce)}
.edition{grid-column:1/-1;padding-top:14px;border-top:1px dashed var(--trait)}

/* Page 404 */
.perdu{min-height:70vh;display:grid;place-items:center;text-align:center}
.perdu>div{display:grid;gap:16px;justify-items:center;max-width:52ch}
.perdu h1{font-size:clamp(40px,7vw,72px)}
.perdu p{color:var(--doux)}
.entete-carte{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.plan text.rouges{fill:#f08a74}
.plan text.bleus{fill:#8fb4f5}
[hidden]{display:none!important}
.badge.testeur{background:rgba(255,255,255,.06);color:var(--texte)}
main>.intro:first-child{padding-top:36px}
.copie{align-items:flex-start}
.intro p.note{font-size:13.5px}
.champ label.case{font:400 16px/1.3 var(--corps);text-transform:none;letter-spacing:0;color:var(--texte)}