/* OrbSiege : page d'accueil (visite 3D de Terres mêlées + coucher de soleil). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(/polices/archivo-variable.woff2) format("woff2")}

:root{
  --nuit:#16232b;      /* ardoise du crépuscule : texte, fonds sombres */
  --lichen:#e3e8de;    /* pierre couverte de lichen : fond des sections */
  --mousse:#5d6b5f;    /* texte secondaire */
  --orbe:#7048e8;      /* seul accent interactif */
  --or:#e2a93b;        /* zones de score, nouveautés */
  --rouge:#c8413a;--bleu:#2f6cc9;
  --large:"Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{margin:0;background:var(--lichen);color:var(--nuit);font:400 1.0625rem/1.6 var(--large);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--orbe);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:800;line-height:.95;font-variation-settings:"wdth" 62;letter-spacing:-.005em}
p{margin:0}
.btn{display:inline-block;padding:.8em 1.3em;border-radius:6px;font-weight:700;text-decoration:none;background:var(--orbe);color:#fff;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:#5d34d6}
.btn.clair{background:#fff;color:var(--nuit)}

/* ── barre ── */
.barre{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;gap:28px;padding:14px 24px;color:#fff;pointer-events:none}
.barre>*{pointer-events:auto}
.barre img{height:30px}
.barre nav{display:flex;gap:20px;margin-left:auto;font-weight:600;font-size:.95rem}
.barre nav a{text-decoration:none;opacity:.85}.barre nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.barre .btn{padding:.55em 1em;font-size:.95rem}
.barre.claire{color:var(--nuit);background:rgba(227,232,222,.94);box-shadow:0 1px 0 rgba(22,35,43,.1)}

/* ── visite de la carte ── */
.visite{position:relative;background:var(--nuit)}
.scene{position:sticky;top:0;height:100vh;overflow:hidden}
#carte{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#carte.prise{cursor:grabbing}
.chargement{position:absolute;left:50%;top:50%;translate:-50% -50%;color:#fff;font-weight:600;opacity:.8}
.etiquettes{position:absolute;inset:0;pointer-events:none}
.etq{position:absolute;translate:-50% -100%;pointer-events:auto;cursor:pointer;border:0;font:700 .9rem var(--large);color:#fff;background:var(--nuit);padding:5px 10px 6px;border-radius:4px;white-space:nowrap;transition:opacity .25s}
.etq::after{content:"";position:absolute;left:50%;top:100%;border:6px solid transparent;border-top-color:var(--nuit);translate:-50% 0}
.etq.on{background:var(--orbe)}.etq.on::after{border-top-color:var(--orbe)}

/* carnet : colonne fixe à gauche, une étape à la fois */
.carnet{position:absolute;left:0;top:0;bottom:0;width:min(420px,40vw);padding:110px 36px 36px;color:#fff;
  background:linear-gradient(90deg,rgba(22,35,43,.92) 60%,rgba(22,35,43,0));display:flex;flex-direction:column;pointer-events:none}
.carnet>*{pointer-events:auto}
.etape{display:none}.etape.on{display:block;animation:entre .45s ease-out}
@keyframes entre{from{opacity:0;transform:translateY(12px)}}
.etape h1{margin-left:-6px}
.etape h1 svg{display:block;width:min(340px,100%);height:auto}
.marque{display:flex;align-items:center;gap:14px}
.marque img{width:clamp(96px,11vw,140px);height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.marque span{font-size:clamp(3rem,5.6vw,5rem);font-variation-settings:"wdth" 62;letter-spacing:.02em;color:#f1ead9;text-shadow:0 2px 18px rgba(0,0,0,.35)}
/* écran d'ouverture */
#ouverture{position:fixed;inset:0;z-index:100;background:linear-gradient(#191b20,#0f0f15);transition:opacity .9s ease;cursor:pointer}
#ouverture.part{opacity:0;pointer-events:none}
#ouverture p{position:absolute;z-index:1;left:0;right:0;bottom:22px;text-align:center;margin:0;color:#8f8aa3;font-size:.9rem}
.etape h2{font-size:clamp(2.6rem,4.6vw,4rem)}
.etape p{margin-top:16px;color:#d2dad3;max-width:32ch;font-size:1.1rem}
.etape .btn{margin-top:26px}
.parcours{margin-top:auto;list-style:none;padding:0;display:flex;flex-direction:column;gap:2px;border-left:2px solid rgba(255,255,255,.18)}
.parcours button{all:unset;cursor:pointer;display:block;padding:4px 0 4px 14px;margin-left:-2px;border-left:2px solid transparent;color:#9fb0a6;font-weight:600}
.parcours button:hover{color:#fff}
.parcours button[aria-current=true]{color:#fff;border-left-color:var(--orbe)}
.parcours button:focus-visible{outline:2px solid var(--orbe)}
.aide{position:absolute;right:24px;bottom:22px;color:#fff;font-size:.9rem;opacity:.75}
.pas{height:100vh;scroll-snap-align:start}
.pas:first-child{margin-top:-100vh}

@media (max-width:900px){
  .barre nav{display:none}.barre .btn{margin-left:auto}
  .carnet{width:100%;top:auto;height:auto;padding:28px 16px 26px;background:linear-gradient(0deg,rgba(22,35,43,.95) 70%,rgba(22,35,43,0))}
  .parcours,.aide{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ── Piste C : coucher de soleil (la lumière de la carte, de l'heure dorée à la nuit) ── */
:root{--fond:#f2c494;--texte:#2a1913;--doux:rgba(42,25,19,.68);--voile:rgba(255,255,255,.28);--trait:rgba(42,25,19,.22);--accent:#6a3fd8}
body{background:var(--fond);color:var(--texte)}
.barre.claire{background:color-mix(in srgb,var(--fond) 88%,transparent);color:var(--texte);backdrop-filter:blur(10px)}
.suite{position:relative;color:var(--texte);transition:color .4s}
.ciel{position:fixed;inset:0;z-index:-1;background:var(--fond);pointer-events:none}
.soleil{position:fixed;z-index:-1;right:9vw;width:min(24vw,300px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff1cf,#ffc36b 42%,#ff8a4c 70%,rgba(255,120,70,0) 72%);filter:blur(.5px);pointer-events:none;opacity:var(--soleil-op,1)}
.etoiles{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--nuit,0);background-image:radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 42%,#fff,transparent),radial-gradient(1.6px 1.6px at 47% 12%,#fff,transparent),radial-gradient(1px 1px at 63% 33%,#fff,transparent),radial-gradient(1.3px 1.3px at 79% 22%,#fff,transparent),radial-gradient(1px 1px at 88% 58%,#fff,transparent),radial-gradient(1.2px 1.2px at 8% 70%,#fff,transparent),radial-gradient(1px 1px at 36% 80%,#fff,transparent),radial-gradient(1.5px 1.5px at 57% 66%,#fff,transparent),radial-gradient(1px 1px at 93% 86%,#fff,transparent)}
.soleil.lune{background:radial-gradient(circle at 42% 40%,#fbf7ec,#e4ddcc 55%,#c9c0b0 70%,rgba(200,190,175,0) 72%);box-shadow:none;filter:drop-shadow(0 0 40px rgba(240,235,220,.35))}
.modes-ciel{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.barre.claire .modes-ciel{background:color-mix(in srgb,var(--texte) 12%,transparent)}
.modes-ciel button{all:unset;cursor:pointer;display:grid;place-items:center;width:32px;height:28px;border-radius:999px;color:inherit;opacity:.75}
.modes-ciel button:hover{opacity:1}
.modes-ciel button[aria-pressed=true]{background:#fff;color:#2a1913;opacity:1}
.modes-ciel button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modes-ciel svg{width:16px;height:16px}
.cadre{max-width:1180px;margin:0 auto;padding:0 32px}
.bloc{padding:150px 0 0}
.bloc h2,.fin-c h2{font-weight:800;font-variation-settings:"wdth" 125;font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:.98;letter-spacing:-.02em;max-width:14ch}
.chapo{margin-top:16px;color:var(--doux);max-width:54ch;font-size:1.15rem}
.c-btn{display:inline-block;padding:.85em 1.4em;border-radius:999px;background:var(--texte);color:var(--fond);font-weight:700;text-decoration:none;border:0;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s}
.c-btn:hover{transform:translateY(-2px)}

/* principe : la ligne d'horizon, trois temps */
.horizon{position:relative;margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:44px;border-top:2px solid var(--texte)}
.horizon div{position:relative}
.horizon div::before{content:"";position:absolute;top:-53px;left:0;width:16px;height:16px;border-radius:50%;background:var(--fond);border:2px solid var(--texte)}
.horizon div:nth-child(2)::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 18px var(--accent)}
.horizon h3{font-weight:800;font-variation-settings:"wdth" 125;font-size:1.7rem}
.horizon p{color:var(--doux);margin-top:6px;max-width:30ch}

/* modes : liste typographique */
.modes-c{margin-top:56px}
.mode-c{display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1.4fr);gap:30px;align-items:baseline;padding:24px 0;border-top:1px solid var(--trait)}
.mode-c:last-child{border-bottom:1px solid var(--trait)}
.mode-c h3{font-weight:800;font-variation-settings:"wdth" 125;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.02em}
.mode-c .pips{display:flex;gap:5px;align-items:center;color:var(--doux);font-size:.9rem;font-weight:600}
.mode-c .pips i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.mode-c p{color:var(--doux)}

/* classes : cercle de sept pierres qui tourne (repris de la piste A) */
.equipe{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:30px}
.cercle{position:relative;aspect-ratio:1;max-width:560px;width:100%;justify-self:center}
.cercle::before{content:"";position:absolute;inset:14%;border-radius:50%;border:2px dashed var(--trait)}
.cercle::after{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,var(--glow,rgba(161,132,255,.35)),transparent 70%);transition:background .5s}
.roue{position:absolute;inset:0;transition:transform .8s cubic-bezier(.3,.1,.2,1)}
.pierre{all:unset;position:absolute;left:50%;top:50%;width:19%;height:25%;margin:-12.5% 0 0 -9.5%;cursor:pointer;border-radius:40% 40% 10% 10%/30% 30% 8% 8%;background:var(--voile);backdrop-filter:blur(6px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.12),0 0 0 1px var(--trait);display:grid;place-items:center;transition:transform .8s cubic-bezier(.3,.1,.2,1),box-shadow .3s}
.pierre .p-in{display:grid;place-items:center;gap:4px}
.pierre i{width:46px;height:46px;background:var(--doux);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:background .3s,filter .3s}
.pierre small{font-size:.72rem;font-weight:700;color:var(--doux)}
.pierre:hover i{background:var(--c)}
.pierre[aria-selected=true]{box-shadow:inset 0 -6px 0 rgba(0,0,0,.12),0 0 0 2px var(--c),0 0 34px 4px color-mix(in srgb,var(--c) 45%,transparent)}
.pierre[aria-selected=true] i{background:var(--c);filter:drop-shadow(0 0 8px var(--c))}
.pierre[aria-selected=true] small{color:var(--texte)}
.pierre:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.fiche-c h3{font-weight:800;font-variation-settings:"wdth" 125;font-size:clamp(2.8rem,6vw,5rem);letter-spacing:-.03em;line-height:.95;color:var(--c);transition:color .4s}
.fiche-c .role{margin-top:12px;font-weight:700;font-size:1.15rem}
.fiche-c p{margin-top:10px;color:var(--doux);max-width:42ch}
.fiche-c ul{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.fiche-c li{display:flex;align-items:center;gap:12px;font-weight:600}
.fiche-c li::before{content:"";width:8px;height:8px;rotate:45deg;background:var(--c);box-shadow:0 0 10px var(--c)}
.fleches{display:flex;gap:10px;margin-top:28px}
.fleches button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--voile);color:var(--texte);font-size:1.2rem;box-shadow:0 0 0 1px var(--trait)}
.fleches button:hover{box-shadow:0 0 0 1px var(--accent)}
.fleches button:focus-visible{outline:3px solid var(--accent)}
.fleches span{align-self:center;color:var(--doux);font-size:.9rem;margin-left:6px}
@media (max-width:560px){.pierre small{display:none}}

/* duel */
.duel-c{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:40px}
.duel-c svg{width:100%;max-width:460px;justify-self:center}
.faits-c{margin-top:30px;display:grid;gap:18px}
.faits-c h3{font-weight:800;font-variation-settings:"wdth" 125;font-size:1.4rem}.faits-c p{color:var(--doux)}
.compteur-c{margin-top:22px;color:var(--doux);font-weight:600}
.compteur-c button{all:unset;cursor:pointer;margin-left:10px;text-decoration:underline;text-underline-offset:4px;color:var(--texte)}

/* journal */
.journal-c{margin:50px 0 0;padding:0;list-style:none}
.journal-c li{display:grid;grid-template-columns:140px 1fr;gap:28px;padding:20px 0;border-top:1px solid var(--trait)}
.journal-c time{font-weight:700;color:var(--doux)}
.journal-c b{font-weight:800;font-variation-settings:"wdth" 125;font-size:1.35rem}
.journal-c p{color:var(--doux);margin-top:4px}

/* en ligne */
.direct-c{display:grid;grid-template-columns:1fr 1.5fr;gap:56px;margin-top:46px}
.srv-c{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--trait);font-weight:600}
.srv-c span{display:flex;align-items:center;gap:8px;color:var(--doux)}
.srv-c span::before{content:"";width:9px;height:9px;border-radius:50%;background:#6fe39b;box-shadow:0 0 10px #6fe39b}
.direct-c table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.direct-c th{text-align:left;color:var(--doux);font-weight:600;font-size:.9rem;padding-bottom:10px}
.direct-c td{padding:13px 0;border-top:1px solid var(--trait)}
.direct-c td:first-child{font-weight:800;width:40px}
.direct-c caption{caption-side:bottom;text-align:left;color:var(--doux);padding-top:12px;font-size:.92rem}

/* fin : la nuit, le logo s'allume */
.fin-c{padding:180px 0 60px}
.fin-c .grille{display:grid;grid-template-columns:1fr 1.2fr;gap:64px}
.fin-c img{width:170px;margin-bottom:16px}
form{display:grid;gap:14px;margin-top:26px}
label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
input,textarea{font:inherit;color:var(--texte);background:var(--voile);border:1px solid var(--trait);border-radius:12px;padding:12px 14px}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
textarea{min-height:140px;resize:vertical}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.envoye{color:var(--doux);min-height:1.6em}
footer{margin-top:100px;color:var(--doux);font-size:.92rem;padding-bottom:50px}
@media (max-width:900px){
  .modes-ciel{margin-left:auto}.barre .btn{margin-left:8px}
  .cadre{padding:0 16px}.bloc{padding-top:110px}
  .horizon,.equipe,.duel-c,.direct-c,.fin-c .grille{grid-template-columns:1fr}
  .horizon{gap:46px}.mode-c{grid-template-columns:1fr;gap:8px}.journal-c li{grid-template-columns:1fr;gap:4px}
  .duo{grid-template-columns:1fr}
}
.muret{cursor:pointer;transition:opacity .35s,transform .35s;transform-box:fill-box;transform-origin:center}
.muret.casse{opacity:0;transform:scale(.3) rotate(25deg);pointer-events:none}
.muret:focus-visible{outline:none;stroke:#9b7bff;stroke-width:3}

/* ── fonctions réelles (même rôle que dans site.css) ── */
[hidden]{display:none!important}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lien-evitement{position:absolute;left:12px;top:-60px;z-index:200;padding:.6em 1em;border-radius:8px;background:#fff;color:#16232b;font-weight:700}
.lien-evitement:focus{top:12px}
.mt-bouton{margin-top:28px}
.barre .statut{display:flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;text-decoration:none;opacity:.85;white-space:nowrap}
.point{width:8px;height:8px;border-radius:50%;background:#9a96a8}
.point.vert{background:#5fd38a;box-shadow:0 0 8px #5fd38a}.point.rouge{background:#e05a5a}
.barre nav a.a-nouveau::after{content:"";display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:#ff7a59;vertical-align:super}
.btn[data-ouvrir-porte]{font:inherit;font-weight:700}

.chiffres{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px;padding:22px 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.chiffres b{display:block;font-weight:800;font-variation-settings:"wdth" 125;font-size:clamp(1.6rem,2.9vw,2.3rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chiffres span{color:var(--doux);font-size:.92rem}
.serveurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:28px}
.serveur{padding:18px 20px;border-radius:16px;background:var(--voile);border:1px solid var(--trait);display:grid;gap:10px}
.serveur .tete{display:flex;justify-content:space-between;align-items:center;gap:10px}
.serveur h3{margin:0;font-weight:800;font-variation-settings:"wdth" 110;font-size:1.25rem}
.serveur .mode{padding:.2em .7em;border-radius:999px;font-size:.82rem;font-weight:700;border:1px solid var(--trait)}
.serveur .mode.ranked{border-color:#e0a83a;color:#e0a83a}.serveur .mode.duel{border-color:#d93c4f;color:#d93c4f}
.serveur .details{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--doux);font-size:.92rem}
.jauge{height:6px;border-radius:999px;background:var(--trait);overflow:hidden}
.jauge i{display:block;height:100%;background:var(--accent)}
.vide{padding:18px 0;color:var(--doux)}
.squelette{display:block;height:14px;border-radius:6px;background:var(--trait);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
#classement table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:20px}
#classement th{text-align:left;color:var(--doux);font-weight:600;font-size:.9rem;padding-bottom:10px}
#classement td{padding:12px 0;border-top:1px solid var(--trait)}
#classement .num{text-align:right}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.marche{padding:16px;border-radius:14px;background:var(--voile);display:grid;gap:4px}
.marche .place{font-weight:800;font-size:1.6rem}.marche .pts{color:var(--doux);font-size:.9rem}
.note{color:var(--doux);font-size:.92rem;margin-top:12px}

/* messagerie */
.contact-chat{margin-top:24px;border-radius:20px;background:var(--voile);border:1px solid var(--trait);overflow:hidden}
.contact-barre{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--trait)}
.contact-avatar img{display:block;width:34px;height:34px}
.contact-barre b{display:block}.contact-barre span{color:var(--doux);font-size:.88rem}
.contact-fil{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;padding:16px}
.contact-bulle{align-self:flex-start;max-width:82%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:color-mix(in srgb,var(--texte) 9%,transparent);display:grid;gap:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.contact-bulle.moi{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--accent);color:#fff}
.contact-bulle img{max-width:100%;border-radius:10px}
.contact-heure{font-size:.75rem;opacity:.7}
.contact-compo{display:grid;gap:10px;padding:14px 16px;border-top:1px solid var(--trait);margin:0}
.contact-compo.survol{outline:2px dashed var(--accent);outline-offset:-6px}
.contact-ids{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-texte{min-height:96px}
.contact-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-outils{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.contact-joindre{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;color:var(--doux);font-size:.92rem}
.contact-joindre svg{width:18px;height:18px}
.contact-joindre input{position:absolute;width:1px;height:1px;opacity:0}
.contact-joindre:focus-within{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.contact-puce{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--doux)}
.contact-puce img{width:28px;height:28px;object-fit:cover;border-radius:6px}
.contact-puce button{all:unset;cursor:pointer;padding:0 4px}
.contact-compteur{margin-left:auto;color:var(--doux);font-size:.85rem;font-variant-numeric:tabular-nums}
.contact-compteur.plein{color:#e05a5a}
.contact-envoyer{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:0;cursor:pointer;background:var(--texte);color:var(--fond)}
.contact-envoyer svg{width:20px;height:20px}
.contact-envoyer:disabled{opacity:.5;cursor:wait}
.contact-retour{min-height:1.5em;margin:0;padding:0 16px 12px;color:var(--doux)}
.contact-retour.ok{color:#5fd38a}
[aria-invalid=true]{border-color:#e05a5a!important}

/* porte à code */
dialog.porte{border:0;border-radius:22px;padding:30px;width:min(420px,92vw);background:#1b1830;color:#f3eefb;box-shadow:0 30px 80px rgba(0,0,0,.5)}
dialog.porte::backdrop{background:rgba(10,8,18,.72);backdrop-filter:blur(4px)}
.porte form{display:grid;gap:12px}
.porte .sceau{width:72px;height:72px;justify-self:center}
.porte h2{margin:0;text-align:center;font-weight:800;font-variation-settings:"wdth" 110;font-size:1.8rem}
.porte .explication,.porte .aide{text-align:center;color:#b9b2cc;margin:0}
.porte .aide{margin-top:4px;font-size:.9rem}
.porte label{font-weight:600;font-size:.92rem}
.champ-code{font:600 1.1rem/1.2 "Archivo",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f3eefb}
.champ-code:focus{outline:none;border-color:#a184ff;box-shadow:0 0 0 3px rgba(161,132,255,.3)}
.porte .erreur{min-height:1.3em;color:#ff8a8a;font-size:.92rem}
.porte .ligne{display:flex;justify-content:flex-end;gap:10px}
.bouton{font:inherit;font-weight:700;padding:.75em 1.3em;border-radius:999px;border:0;cursor:pointer;background:#f3eefb;color:#1b1830}
.bouton.discret{background:transparent;color:#b9b2cc}
.bouton:disabled{opacity:.6;cursor:wait}
.porte a{color:#c9b6ff}
.secoue{animation:secoue .35s}
@keyframes secoue{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (max-width:900px){.chiffres{grid-template-columns:1fr 1fr}.contact-ids{grid-template-columns:1fr}.barre .statut{display:none}}

/* choix de la langue (FR / EN), même style que le sélecteur d'ambiance */
.choix-langue{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);margin-left:6px}
.barre.claire .choix-langue{background:color-mix(in srgb,var(--texte) 12%,transparent)}
.choix-langue button{all:unset;cursor:pointer;display:grid;place-items:center;min-width:30px;height:28px;padding:0 4px;border-radius:999px;color:inherit;opacity:.75;font-size:.75rem;font-weight:800;letter-spacing:.04em}
.choix-langue button:hover{opacity:1}
.choix-langue button[aria-pressed=true]{background:#fff;color:#2a1913;opacity:1}
.choix-langue button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}