/* Déclic — atelier d'horloger-électricien : émail sarcelle, laiton, bakélite, orange de signalisation.
   Plaques émaillées rivetées (CSS, porteur 25 oct. 2026 : « des boutons en CSS, tant qu'ils sont bien faits »),
   titres au pochoir (Big Shoulders Stencil), texte en Barlow Semi Condensed. Tailles en px planchers pour le téléphone. */
@font-face { font-family: 'Stencil'; src: url(polices/stencil-800.woff2) format('woff2'); font-weight: 800; font-display: block; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+2000-206F, U+2212; }
@font-face { font-family: 'Stencil'; src: url(polices/stencil-800-ext.woff2) format('woff2'); font-weight: 800; font-display: block; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Barlow'; src: url(polices/barlow-500.woff2) format('woff2'); font-weight: 500; font-display: block; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212; }
@font-face { font-family: 'Barlow'; src: url(polices/barlow-700.woff2) format('woff2'); font-weight: 700; font-display: block; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212; }
@font-face { font-family: 'Barlow'; src: url(polices/barlow-500-ext.woff2) format('woff2'); font-weight: 500; font-display: block; unicode-range: U+0100-024F; }
@font-face { font-family: 'Barlow'; src: url(polices/barlow-700-ext.woff2) format('woff2'); font-weight: 700; font-display: block; unicode-range: U+0100-024F; }

:root {
  --email: #1f5f63; --email-fonce: #123a3e; --laiton: #c9a24a; --laiton-clair: #f3d27c; --laiton-fonce: #6e521a;
  --orange: #ff6a1f; --orange-fonce: #b8420c; --creme: #efe4c8; --encre: #10181b; --vert: #33b56c;
  font-synthesis: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; font-family: 'Barlow', system-ui, sans-serif; font-weight: 500; color: var(--creme); }
img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }

/* Le fond commun hors partie : l'atelier la nuit (net au menu, assombri ailleurs) ; en partie, l'atelier de la machine. */
.decor { position: fixed; inset: 0; background: #0d1d20 url(img/fond.webp) center / cover no-repeat; transition: filter .4s ease; }
.decor.voile-fond { filter: brightness(.55) saturate(.85); }
.decor.en-partie { filter: brightness(.35) blur(3px); }
#machine { position: fixed; inset: 0; z-index: 2; touch-action: none; }
#app { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#app > * { pointer-events: auto; }
#app > #hud { pointer-events: none; }
.ecran { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* ---------- Plaques émaillées (boutons) ---------- */
.plaque {
  position: relative; min-height: 50px; padding: 0 26px; border-radius: 9px;
  font: 700 19px/1 'Barlow', sans-serif; letter-spacing: .02em; color: var(--creme);
  background:
    radial-gradient(circle at 9px 9px, var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 3.5px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 3.5px),
    linear-gradient(#2b7a7e, var(--email-fonce));
  box-shadow: inset 0 0 0 2px var(--laiton), inset 0 3px 0 rgba(255, 255, 255, .18), 0 5px 0 #071618, 0 8px 18px rgba(0, 0, 0, .45);
  transition: transform .06s, box-shadow .06s;
}
.plaque.orange { color: #fff8ee; background:
    radial-gradient(circle at 9px 9px, var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 3.5px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--laiton-clair) 0 2px, var(--laiton-fonce) 3px, transparent 3.5px),
    linear-gradient(#ff8a3c, var(--orange-fonce));
  box-shadow: inset 0 0 0 2px var(--laiton), inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 #5a1f04, 0 8px 18px rgba(0, 0, 0, .45); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.plaque.grande { min-height: 60px; padding: 0 48px; font: 800 30px/1 'Stencil', sans-serif; letter-spacing: .06em; }
.plaque.petite { min-height: 44px; padding: 0 18px; font-size: 16px; }
.plaque.whatsapp { background: linear-gradient(#2fc463, #148a3e); }
.plaque.telegram { background: linear-gradient(#36a3e4, #1a6ea8); }
.plaque:disabled { filter: grayscale(.7) brightness(.7); cursor: default; }
.plaque.appuye, .plaque:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 0 0 2px var(--laiton), 0 1px 0 #071618, 0 3px 8px rgba(0, 0, 0, .4); }
.lien { font: 500 15px/1.2 'Barlow', sans-serif; color: rgba(239, 228, 200, .75); text-decoration: underline; text-underline-offset: 3px; padding: 8px; }
.rond { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #2b3236, #0c1012); box-shadow: inset 0 0 0 2px var(--laiton), 0 4px 10px rgba(0, 0, 0, .5); flex: none; }
.rond img { width: 24px; height: 24px; }
.rond:active { transform: scale(.93); }
.coin-haut-droit { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.panneau { background: linear-gradient(rgba(25, 58, 62, .96), rgba(12, 32, 35, .97)); border-radius: 14px; box-shadow: inset 0 0 0 2px var(--laiton), 0 18px 40px rgba(0, 0, 0, .55); }
.note { font-size: 15px; line-height: 1.3; color: rgba(239, 228, 200, .8); margin: 6px 0; text-align: center; }
.ligne { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Titre ---------- */
#titre { justify-content: center; gap: 2.4vh; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .6)); opacity: 0; transition: opacity .5s; }
#titre.ouvert { opacity: 1; }
#titre.sortie { opacity: 0; transition: opacity .25s; }
.titre-img { width: min(76vw, 560px, 62vh * 2.5); height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.sous-titre { margin: 0; font: 700 clamp(15px, 2.6vmin, 22px)/1.25 'Barlow', sans-serif; text-align: center; color: var(--creme); text-shadow: 0 2px 6px #000; max-width: 90vw; }

/* ---------- Menu ---------- */
#menu { justify-content: center; gap: 3vh; }
.menu-titre { width: min(46vw, 400px, 30vh * 2.5); height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
/* Le pupitre : une plaque d'acier émaillé rivetée, trois rangées séparées par des rails de laiton. */
.pupitre { width: min(94vw, 640px); padding: 10px 14px; border-radius: 16px; display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 12px 12px, var(--laiton-clair) 0 2.5px, var(--laiton-fonce) 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, var(--laiton-clair) 0 2.5px, var(--laiton-fonce) 3.5px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), var(--laiton-clair) 0 2.5px, var(--laiton-fonce) 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--laiton-clair) 0 2.5px, var(--laiton-fonce) 3.5px, transparent 4px),
    linear-gradient(#24666a, #102f33);
  box-shadow: inset 0 0 0 3px var(--laiton), inset 0 4px 0 rgba(255, 255, 255, .14), 0 8px 0 #071618, 0 16px 34px rgba(0, 0, 0, .6); }
.commande { display: flex; align-items: center; gap: 16px; padding: 8px 10px; text-align: left; border-radius: 10px; }
.commande + .commande { border-top: 2px solid rgba(201, 162, 74, .55); border-radius: 0; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .35); }
.poussoir { width: 62px; height: 62px; flex: none; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); transition: transform .06s, filter .06s; }
.commande.appuye .poussoir, .commande:active .poussoir { transform: scale(.9) translateY(2px); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.commande-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.commande-txt b { font: 800 30px/1 'Stencil', sans-serif; letter-spacing: .06em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.commande-txt small { font-size: 15px; line-height: 1.2; color: rgba(239, 228, 200, .85); }
#m-campagne .commande-txt b { color: #ffb347; }
.vitre { min-width: 78px; padding: 6px 10px; border-radius: 7px; text-align: center; font: 800 20px/1 'Stencil', sans-serif; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: #ff8a2a; text-shadow: 0 0 8px rgba(255, 106, 31, .7); background: #0d0a08; box-shadow: inset 0 0 0 2px var(--laiton-fonce), inset 0 2px 6px rgba(0, 0, 0, .8); }
.vitre:empty { visibility: hidden; }
#liens-plateforme { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; }
.lien-plateforme { font: 500 14px/1 'Barlow', sans-serif; color: rgba(239, 228, 200, .8); padding: 10px 8px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Barre des écrans ---------- */
.barre { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 52px; }
.barre h2 { margin: 0; font: 800 30px/1 'Stencil', sans-serif; letter-spacing: .05em; color: #fff; text-shadow: 0 2px 6px #000; flex: 1; }
.compteur { display: flex; align-items: center; gap: 6px; font: 700 22px/1 'Barlow', sans-serif; font-variant-numeric: tabular-nums; padding: 6px 14px; border-radius: 30px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px var(--laiton); margin-right: 70px; }
.compteur img { width: 22px; height: 22px; filter: drop-shadow(0 0 4px #ffcf6a) sepia(1) saturate(4) hue-rotate(-10deg); }

/* ---------- Campagne ---------- */
.ateliers { display: flex; gap: 8px; margin: 8px 0 10px; flex-wrap: wrap; justify-content: center; }
.atelier { min-height: 44px; padding: 0 16px; border-radius: 22px; font: 700 16px/1 'Barlow', sans-serif; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 2px rgba(201, 162, 74, .5); display: flex; align-items: center; gap: 8px; }
.atelier i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--laiton); }
.atelier.actif { background: linear-gradient(#ff8a3c, var(--orange-fonce)); box-shadow: inset 0 0 0 2px var(--laiton); color: #fff; }
.atelier.ferme { opacity: .55; }
.atelier.ferme::after { content: ''; width: 16px; height: 16px; background: url(img/ic/ic-cadenas.webp) center / contain no-repeat; }
.niveaux { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; width: min(100%, 980px); margin: auto 0; }
.niveau { aspect-ratio: 1 / 1.08; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; max-height: 96px;
  background: linear-gradient(var(--zone-a, #2b7a7e), var(--zone-b, #123a3e)); box-shadow: inset 0 0 0 2px var(--laiton), 0 4px 0 #071618; }
.niveau b { font: 800 clamp(20px, 3.4vmin, 30px)/1 'Stencil', sans-serif; color: #fff; }
.niveau .mini-etoiles { display: flex; gap: 1px; }
.niveau .mini-etoiles img { width: 13px; height: 13px; opacity: .3; }
.niveau .mini-etoiles img.oui { opacity: 1; filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1); }
.niveau.ferme { filter: grayscale(.6) brightness(.55); }
.niveau.ferme b { opacity: .6; }
.niveau.actuel { box-shadow: inset 0 0 0 3px var(--orange), 0 4px 0 #071618, 0 0 16px rgba(255, 106, 31, .6); }
.niveau.tuto b::after { content: ''; }
.niveau:active { transform: translateY(3px); }

/* ---------- Multijoueur ---------- */
.salon { display: flex; gap: 18px; width: min(100%, 980px); flex: 1; min-height: 0; align-items: stretch; margin-top: 8px; }
.salon-gauche { flex: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.salon-droite { flex: 1; display: flex; flex-direction: column; min-height: 0; background: rgba(0, 0, 0, .45); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .5); padding: 10px; }
.salon-droite h3 { margin: 0 0 8px; font: 800 20px/1 'Stencil', sans-serif; letter-spacing: .05em; }
.places { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.place { min-height: 64px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; background: linear-gradient(#2b7a7e, #123a3e); box-shadow: inset 0 0 0 2px var(--laiton); }
.place.libre { background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px rgba(201, 162, 74, .35); color: rgba(239, 228, 200, .5); }
.place b { font: 700 15px/1.1 'Barlow', sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place small { font-size: 12px; color: var(--laiton-clair); }
.ami-av { width: 28px; height: 28px; border-radius: 50%; background: #0c1012 center / cover; box-shadow: inset 0 0 0 1.5px var(--laiton); flex: none; }
.choix-niveau { display: flex; gap: 6px; }
.choix-niveau button { min-height: 44px; padding: 0 16px; border-radius: 8px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 2px rgba(201, 162, 74, .5); font-weight: 700; }
.choix-niveau button.actif { background: linear-gradient(#ff8a3c, var(--orange-fonce)); box-shadow: inset 0 0 0 2px var(--laiton); color: #fff; }
.liste-amis { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.ami { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); text-align: left; width: 100%; }
.ami .ami-nom { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ami .ami-nom b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ami .ami-nom small { font-size: 12px; color: rgba(239, 228, 200, .65); }
.ami .ami-inviter { font: 700 14px/1 'Barlow', sans-serif; color: var(--orange); }
.ami.invite .ami-inviter { color: var(--vert); }
.ami.hors-ligne { opacity: .55; }
.sans-compte { max-width: 520px; padding: 22px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.sans-compte p { margin: 0; font-size: 17px; line-height: 1.35; }

/* ---------- Réglages ---------- */
.panneau.reglages { width: min(100%, 520px); margin: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.reglage { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 18px; font-weight: 700; }
.interrupteur { width: 62px; height: 34px; border-radius: 17px; background: #0b1214; box-shadow: inset 0 0 0 2px var(--laiton); position: relative; }
.interrupteur i { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a6f72, #2a2e30); transition: left .15s, background .15s; }
.interrupteur[aria-checked="true"] i { left: 32px; background: radial-gradient(circle at 40% 35%, #9dffc0, #1f8a4c); box-shadow: 0 0 10px #33b56c; }
.choix { display: flex; gap: 6px; }
.choix button { min-height: 40px; padding: 0 12px; border-radius: 8px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .5); font-weight: 700; }
.choix button.actif { background: linear-gradient(#ff8a3c, var(--orange-fonce)); color: #fff; }
.version { margin: 0; text-align: center; font-size: 13px; color: rgba(239, 228, 200, .6); }

/* ---------- En partie ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.hud > * { pointer-events: auto; }
.icone-partie { position: absolute; top: max(2px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .18); }
.icone-partie img { width: 26px; height: 26px; opacity: .92; }
.icone-partie:active { transform: scale(.92); }
.adversaires { position: absolute; top: 10px; right: max(12px, env(safe-area-inset-right)); display: flex; gap: 6px; pointer-events: none; }
.adv { min-width: 96px; max-width: 140px; padding: 5px 8px; border-radius: 8px; background: rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .6); font-size: 13px; }
.adv b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.adv .barre-adv { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 4px; }
.adv .barre-adv i { display: block; height: 100%; background: var(--vert); transition: width .25s; }
.adv.saute { opacity: .5; }
.adv.saute .barre-adv i { background: #d23c2a; }
.adv .points { float: right; color: var(--laiton-clair); font-variant-numeric: tabular-nums; }
.bulle { position: absolute; left: 50%; bottom: max(6px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 760px); padding: 8px 14px; min-height: 46px; border-radius: 12px; display: flex; align-items: center; gap: 10px;
  background: rgba(239, 228, 200, .97); color: var(--encre); box-shadow: inset 0 0 0 2px var(--laiton), 0 10px 24px rgba(0, 0, 0, .55); }
.bulle.haut { bottom: auto; top: max(10px, env(safe-area-inset-top)); left: 50%; }
.bulle p { margin: 0; flex: 1; font: 700 17px/1.3 'Barlow', sans-serif; }
.bulle.rate p { color: #a12a17; }
.bulle .lien { color: #5a4a2a; flex: none; }

/* ---------- Voiles : pause, fin, partage ---------- */
.voile { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(4, 10, 12, .62); padding: 12px; }
.boite { padding: 20px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: min(92vw, 360px); max-width: 92vw; max-height: 96vh; overflow: auto; }
.boite h3 { margin: 0; font: 800 34px/1 'Stencil', sans-serif; letter-spacing: .05em; color: #fff; text-align: center; }
.boite > .plaque { min-width: 240px; }
.fin h3.gagne { color: #9dffc0; text-shadow: 0 0 16px rgba(51, 181, 108, .7); }
.fin h3.perdu { color: #ffb48a; }
.etoiles { display: flex; gap: 10px; }
.etoiles img { width: 46px; height: 46px; opacity: .25; transform: scale(.7); transition: transform .35s cubic-bezier(.3, 1.8, .5, 1), opacity .2s; }
.etoiles img.oui { opacity: 1; transform: scale(1); filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1) drop-shadow(0 0 8px #ffcf6a); }
.chiffres { display: flex; gap: 22px; }
.chiffres div { display: flex; flex-direction: column; align-items: center; }
.chiffres b { font: 800 30px/1 'Stencil', sans-serif; font-variant-numeric: tabular-nums; color: var(--orange); }
.chiffres small { font-size: 13px; color: rgba(239, 228, 200, .75); }
.classement { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.classement li { display: flex; justify-content: space-between; gap: 18px; padding: 6px 12px; border-radius: 8px; background: rgba(0, 0, 0, .35); font-weight: 700; }
.classement li.premier { background: linear-gradient(#ff8a3c, var(--orange-fonce)); color: #fff; }

/* ---------- Téléphone dans le mauvais sens ---------- */
#tourner { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: #0d1d20 url(img/fond.webp) center / cover; }
#tourner::before { content: ''; position: absolute; inset: 0; background: rgba(4, 10, 12, .7); }
#tourner .centre { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center; }
#tourner p { margin: 0; font: 800 28px/1.1 'Stencil', sans-serif; letter-spacing: .04em; }
#tourner .aide { font: 500 16px/1.3 'Barlow', sans-serif; letter-spacing: 0; color: rgba(239, 228, 200, .8); }

/* ---------- Toasts (en bas à gauche, au-dessus des liens) ---------- */
#toasts { position: fixed; left: 50%; top: max(70px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 10px; font: 700 15px/1.25 'Barlow', sans-serif; color: var(--creme); background: rgba(10, 22, 24, .94); box-shadow: inset 0 0 0 1.5px var(--laiton), 0 8px 18px rgba(0, 0, 0, .5); animation: entre .2s ease; max-width: 88vw; }
.toast::before { content: ''; width: 18px; height: 18px; flex: none; background: center / contain no-repeat; }
.toast.info::before { background-image: url(img/ic/ic-engrenage.webp); }
.toast.reussite::before { background-image: url(img/ic/ic-ok.webp); }
.toast.erreur::before { background-image: url(img/ic/ic-etincelle.webp); }
.toast.erreur { box-shadow: inset 0 0 0 1.5px #d2503a, 0 8px 18px rgba(0, 0, 0, .5); }
.toast.sort { opacity: 0; transform: translateY(-6px); transition: .3s; }
@keyframes entre { from { opacity: 0; transform: translateY(-8px); } }

/* Téléphone en paysage (≈ 740 × 360) : tout se resserre. */
@media (max-height: 430px) {
  #menu { gap: 10px; }
  .menu-titre { width: min(40vw, 300px); }
  .pupitre { padding: 4px 12px; }
  .commande { padding: 4px 8px; gap: 12px; }
  .poussoir { width: 44px; height: 44px; }
  .commande-txt b { font-size: 22px; }
  .commande-txt small { font-size: 12.5px; }
  .vitre { font-size: 16px; min-width: 64px; padding: 4px 8px; }
  .barre h2 { font-size: 24px; }
  .niveaux { gap: 6px; }
  .niveau { max-height: 70px; }
  .ateliers { margin: 4px 0 6px; }
  .atelier { min-height: 40px; font-size: 14px; padding: 0 12px; }
  .boite { padding: 12px 18px; gap: 8px; }
  .boite h3 { font-size: 27px; }
  .etoiles img { width: 36px; height: 36px; }
  .places { gap: 6px; }
  .place { min-height: 52px; }
  .bulle p { font-size: 15px; }
}