/* Arrêts : le bleu du Palais, l'or, la cire. Une tenue change les jetons de couleur, jamais la structure. */

:root {
  /* Bento Palais : l'encre du Palais, des tuiles franches, l'or, la cire. */
  --encre: #0A0E22; --banc: #161B33; --banc-fort: #232A4D; --bleu: #3352E0; --bleu-texte: #FFFFFF;
  --or: #F2C55C; --verdict: #5EE6A8; --verdict-texte: #06231A; --robe: #B7A6FF; --robe-texte: #170C3A;
  --cire-vive: #FF7B5E; --cire-texte: #2A0A02; --sceau: #C8452B; --halo-force: 0;
  --fond-haut: var(--encre); --fond-bas: var(--encre); --fond-plat: var(--encre);
  --carte-haut: var(--banc); --carte-bas: var(--banc); --carte-bord: var(--banc-fort); --carte-reflet: transparent; --ombre: rgba(0, 0, 0, .45);
  --texte: #F4F5FA; --texte-2: #8F98C2; --titre-or: var(--or); --filet: var(--banc-fort);
  --or-1: #FFE08A; --or-2: #F2C55C; --or-3: #D9A63A; --or-ombre: #B98A25; --or-texte: #2B1D05;
  --feuille-1: #FFE08A; --feuille-2: #F2C55C; --feuille-3: #D9A63A;
  --cire-1: #E8705A; --cire-2: #C8452B; --cire-3: #8E2A17;
  --eteint-1: #2C3563; --eteint-2: #1C2347;
  --orange-1: #FFD99B; --orange-2: #F89B3A; --orange-3: #C75E17; --orange-halo: rgba(248, 155, 58, .5);
  --acier-1: #CBD3E2; --acier-2: #76849F; --cuivre: #E0A27E;
  --juste: #5EE6A8; --juste-fond: rgba(94, 230, 168, .14); --faux: #FF7B5E; --faux-fond: rgba(255, 123, 94, .14);
  --trait: #7FA6FF; --decor-opacite: .07; --decor: #fff;
  --papier-1: #F5EFE1; --papier-2: #F5EFE1; --papier-texte: #1E1810; --papier-bord: #E2D6B8;
  --mur-1: #161B33; --mur-2: #0A0E22; --banc-1: #4B2C26; --banc-2: #2A1712;
  --m-paires-1: #3352E0; --m-paires-2: #3352E0; --m-puzzle-1: #E05A3E; --m-puzzle-2: #E05A3E;
  --m-juge-1: #6F5BD8; --m-juge-2: #6F5BD8; --m-plan-1: #17936A; --m-plan-2: #17936A; --m-archi-1: #C98A1E; --m-archi-2: #C98A1E;
  --m-texte: #fff; --m-texte-2: rgba(255, 255, 255, .86);
  --jeton-image: url('../img/canette.svg');
  /* Apple et New York : New York pour lire, SF Pro pour agir (boutons, onglets, chiffres, étiquettes). */
  --corps: ui-serif, 'New York', 'Iowan Old Style', 'Charter', Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --haut-sur: env(safe-area-inset-top, 0px);
  --bas-sur: env(safe-area-inset-bottom, 0px);
  --rayon: 24px;
}
/* Verre lumineux : la nuit du Palais, des tuiles de verre et des halos qui dérivent. */
[data-theme='verre'] {
  --encre: #060A1C; --banc: rgba(255, 255, 255, .07); --banc-fort: rgba(255, 255, 255, .12); --bleu: #4363F0; --or: #F6D27A;
  --or-1: #FFF0C4; --or-2: #F6D27A; --or-3: #D9A845; --or-ombre: #A57A1E; --texte-2: #8E98BC; --sceau: #D25A3A; --halo-force: 1;
  --papier-1: #121A38; --papier-2: #121A38; --papier-texte: #EEF1FA; --papier-bord: rgba(246, 210, 122, .35); --decor: #F6D27A;
  --ombre: rgba(0, 0, 0, .6);
}
/* Pastel jour : le Palais en plein jour, des cartes douces. */
[data-theme='pastel'] {
  --encre: #F4F1FA; --banc: #FFFFFF; --banc-fort: #ECE7F6; --bleu: #8FA6FF; --bleu-texte: #0D1640;
  --or: #FFB547; --or-1: #FFD08A; --or-2: #FFB547; --or-3: #E5992A; --or-ombre: #D98A12; --or-texte: #2A1700;
  --verdict: #A8E6C2; --verdict-texte: #0B2A1A; --robe: #B8A9FF; --robe-texte: #1E1450; --cire-vive: #FF9B85; --cire-texte: #3A0D04; --sceau: #D9533A;
  --texte: #16131F; --texte-2: #6E6880; --titre-or: #B5651D; --ombre: rgba(60, 40, 110, .16); --carte-bord: #E3DDF0;
  --juste: #0E8A62; --juste-fond: rgba(14, 138, 98, .12); --faux: #C2264F; --faux-fond: rgba(194, 38, 79, .1);
  --papier-1: #FFFFFF; --papier-2: #FFFFFF; --papier-texte: #16131F; --papier-bord: #E3DDF0;
  --eteint-1: #DCD5EE; --eteint-2: #C9C0E2; --decor: #16131F; --decor-opacite: .05; --trait: #6A5BD8;
  --m-paires-1: #6F86F0; --m-paires-2: #6F86F0; --m-puzzle-1: #F07A5E; --m-puzzle-2: #F07A5E; --m-juge-1: #8E7CF0; --m-juge-2: #8E7CF0;
  --m-plan-1: #2FA77A; --m-plan-2: #2FA77A; --m-archi-1: #E3A13A; --m-archi-2: #E3A13A;
  --mur-1: #DCD6F2; --mur-2: #ECE8F8; --banc-1: #EFE6DA; --banc-2: #E4D6C4;
}
/* Rose : framboise, or rose et paillettes. */
[data-theme='rose'] {
  --encre: #FFE3EA; --banc: #FFF7F9; --banc-fort: #FFD2DD; --bleu: #E9557F; --bleu-texte: #FFFFFF;
  --or: #EDB49C; --or-1: #FFEAD9; --or-2: #EDB49C; --or-3: #C57F6E; --or-ombre: #8C4B47; --or-texte: #52102A;
  --verdict: #7FD8B2; --verdict-texte: #06321F; --robe: #CFA4F2; --robe-texte: #2E0A3F; --cire-vive: #F0668F; --cire-texte: #FFFFFF; --sceau: #AD2652;
  --texte: #4E0F2B; --texte-2: #9A4A6C; --titre-or: #9C2F55; --ombre: rgba(150, 50, 90, .22); --carte-bord: #F2B4C6; --halo-force: .7;
  --feuille-1: #E8A98C; --feuille-2: #C96F7C; --feuille-3: #9C3F63;
  --cire-1: #FFA9BC; --cire-2: #E9557F; --cire-3: #AD2652;
  --eteint-1: #F4BFD0; --eteint-2: #DA8EA9;
  --orange-1: #FFD2DD; --orange-2: #F0668F; --orange-3: #B72D5C; --orange-halo: rgba(240, 102, 143, .45);
  --acier-1: #FBE9EE; --acier-2: #D9A4B6; --cuivre: #B8566F;
  --juste: #0E8A62; --juste-fond: rgba(14, 138, 98, .13); --faux: #C2264F; --faux-fond: rgba(194, 38, 79, .1);
  --trait: #E9557F; --decor-opacite: .1; --decor: #B72D5C;
  --papier-1: #FFFBF8; --papier-2: #FFFBF8; --papier-texte: #4E0F2B; --papier-bord: #F2B4C6;
  --mur-1: #F7C3D2; --mur-2: #FBD4DF; --banc-1: #B24F71; --banc-2: #8A3556;
  --m-paires-1: #D9558A; --m-paires-2: #D9558A; --m-puzzle-1: #E26A5C; --m-puzzle-2: #E26A5C;
  --m-juge-1: #A061C4; --m-juge-2: #A061C4; --m-plan-1: #C25586; --m-plan-2: #C25586; --m-archi-1: #C07B5C; --m-archi-2: #C07B5C;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fond-bas); }
html::before { content: ''; position: fixed; inset: 0; z-index: -3; background: linear-gradient(180deg, var(--fond-haut), var(--fond-bas) 74%); }
body {
  margin: 0; min-height: 100dvh; color: var(--texte);
  font-family: var(--corps); font-size: 17px; line-height: 1.4; font-weight: 400;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; overscroll-behavior-y: none;
}
/* Trame du Palais : frontons et carrés tournés, à peine visibles derrière tous les écrans. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: var(--decor-opacite); background-color: var(--decor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.500'%3E%3Cpath d='M250 170l90-44 90 44zM262 170h156M274 182v84M304 182v84M334 182v84M364 182v84M394 182v84M258 274h164M250 286h180'/%3E%3Cpath d='M-30 470l80-80 80 80-80 80zM-2 470l52-52 52 52-52 52zM24 470l26-26 26 26-26 26z'/%3E%3Cpath d='M230 640l100-48 100 48zM244 640h172M258 652v94M292 652v94M326 652v94M360 652v94M396 652v94M238 756h184'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.500'%3E%3Cpath d='M250 170l90-44 90 44zM262 170h156M274 182v84M304 182v84M334 182v84M364 182v84M394 182v84M258 274h164M250 286h180'/%3E%3Cpath d='M-30 470l80-80 80 80-80 80zM-2 470l52-52 52 52-52 52zM24 470l26-26 26 26-26 26z'/%3E%3Cpath d='M230 640l100-48 100 48zM244 640h172M258 652v94M292 652v94M326 652v94M360 652v94M396 652v94M238 756h184'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
/* En rose, la barre d'état de l'iPhone reste blanche : un bandeau framboise la garde lisible. */
[data-theme='rose'] body::after { content: ''; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--haut-sur); background: linear-gradient(180deg, #B72D5C, #D05680); pointer-events: none; }

button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--or-2); outline-offset: 2px; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

#app { max-width: 560px; margin: 0 auto; overflow-x: clip; padding: var(--haut-sur) 0 calc(92px + var(--bas-sur)); min-height: 100dvh; }
body:has(#onglets[hidden]) #app { padding-bottom: 0; }

/* Barre du haut */
.haut { display: flex; align-items: flex-end; gap: 14px; padding: 8px 16px 4px; }
.haut-rang { flex: 1; min-width: 0; display: block; color: var(--texte-2); }
.haut-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.haut-nom { font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 3px; }
.haut-nom .ic { vertical-align: -3px; margin-right: 5px; color: var(--or-2); }
.haut .laurier { flex: none; margin-bottom: -2px; }
.jauge { display: block; height: 4px; border-radius: 2px; background: var(--filet); margin-top: 4px; overflow: hidden; }
.jauge i { display: block; height: 100%; transform-origin: left; border-radius: 2px; background: linear-gradient(90deg, var(--feuille-3), var(--feuille-1)); }
.haut-jetons { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 24px; line-height: 1; color: var(--titre-or); min-height: 44px; }
.jeton { flex: none; display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 36% 30%, var(--or-1), var(--or-2) 55%, var(--or-3)); box-shadow: inset 0 0 0 1.5px rgba(111, 81, 20, .55), 0 1px 3px rgba(0, 0, 0, .35); }
[data-theme='rose'] .jeton { width: 1.08em; height: 1.36em; border-radius: 0; box-shadow: none; background: var(--jeton-image) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(120, 30, 70, .4)); }
.haut-simple { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 0; color: var(--texte-2); font-size: 16px; }
.quitter { width: 44px; height: 44px; display: grid; place-items: center; color: var(--texte-2); flex: none; }

/* Accueil : le sceau de la série */
.tribune { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 16px 14px; }
.tribune[data-decor]:not([data-decor='aucun'])::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: -1; background-color: var(--decor); opacity: .1; -webkit-mask: var(--motif) bottom center / auto 118px repeat-x; mask: var(--motif) bottom center / auto 118px repeat-x; }
.tribune[data-decor='arcades'] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='92'%3E%3Cpath d='M4 92V40a28 28 0 0 1 56 0v52' fill='none' stroke='%23000' stroke-width='2.500'/%3E%3C/svg%3E"); }
.tribune[data-decor='jardin'] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='80'%3E%3Crect x='6' y='8' width='40' height='44' rx='18'/%3E%3Cpath d='M24 52h4v28h-4z'/%3E%3C/svg%3E"); }
.tribune[data-decor='buren'] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='70'%3E%3Cpath d='M8 30h6v40H8zM20 30h6v40h-6zM60 10h6v60h-6zM72 10h6v60h-6zM96 44h6v26h-6zM108 44h6v26h-6z'/%3E%3C/svg%3E"); }

.sceau { display: block; }
.etincelle { position: absolute; width: 15px; height: 15px; background: var(--or-1); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); opacity: 0; animation: etincelle 7s ease-in-out infinite; }
.etincelle.e1 { top: 12px; right: 18px; }
.etincelle.e2 { top: 62px; left: 4px; width: 10px; height: 10px; animation-delay: 2.4s; }
.etincelle.e3 { bottom: 26px; right: 2px; width: 11px; height: 11px; animation-delay: 4.6s; }
@keyframes etincelle { 0%, 86%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 92% { opacity: 1; transform: scale(1) rotate(35deg); } }

.mascotte-perso { position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 6px 8px var(--ombre)); }
.mini-sceau { position: absolute; left: 6px; bottom: 6px; filter: drop-shadow(0 3px 5px var(--ombre)); }

.serie-txt { font-weight: 700; font-size: 34px; line-height: 1.08; margin-top: 8px; letter-spacing: -.005em; }
.serie-sous { color: var(--texte-2); font-size: 17px; line-height: 1.24; margin-top: 5px; max-width: 28ch; }
.semaine { display: flex; gap: 7px; margin-top: 15px; }
.jour-sceau { position: relative; width: 38px; height: 38px; display: grid; place-items: center; font-size: 15px; color: var(--texte-2); border: 1px solid var(--filet); border-radius: 50%; background: var(--carte-bas); }
.jour-sceau.tamponne { background: radial-gradient(circle at 36% 30%, var(--cire-1), var(--cire-2) 60%, var(--cire-3)); border-color: transparent; color: #fff; font-weight: 700; }
.jour-sceau.sursis { background: var(--carte-haut); border-color: var(--trait); color: var(--texte); }
.jour-sceau.aujourdhui { border-color: var(--or-2); color: var(--titre-or); }
.jour-sceau.tamponne.aujourdhui { color: #fff; }
.jour-sceau.aujourdhui::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--cire-2); opacity: 0; animation: anneau 4.2s ease-out infinite; }
@keyframes anneau { 0% { transform: scale(.82); opacity: .75; } 45%, 100% { transform: scale(1.22); opacity: 0; } }

.installer { margin: 8px 16px 0; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); padding: 14px 16px; border-radius: var(--rayon); }
.installer h2 { font-weight: 700; font-size: 21px; line-height: 1.15; margin-bottom: 6px; }
.installer p { font-size: 17px; margin-bottom: 8px; }
.installer .guide { font-size: 17px; }
.rupture { width: 100%; margin-top: 14px; background: var(--faux-fond); border: 1px solid var(--faux); border-radius: var(--rayon); padding: 12px 14px; text-align: left; display: grid; gap: 10px; }

/* Boutons */
.actions { padding: 2px 16px 12px; display: flex; flex-direction: column; align-items: stretch; }
.actions.gauche { padding: 14px 0 18px; }
.cta {
  position: relative; overflow: hidden; display: block; width: 100%; min-height: 62px; padding: 12px 18px; text-align: center;
  font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--or-texte); border-radius: 14px;
  background: linear-gradient(180deg, var(--or-1) 0%, var(--or-2) 42%, var(--or-3) 100%);
  box-shadow: 0 4px 0 var(--or-ombre), 0 10px 18px var(--ombre), inset 0 1px 0 rgba(255, 255, 255, .75);
  transition: transform .08s, box-shadow .08s;
}
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--or-ombre), 0 4px 8px var(--ombre), inset 0 1px 0 rgba(255, 255, 255, .75); }
.cta.brille::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%); transform: translateX(-110%); animation: reflet 8s ease-in-out infinite; }
@keyframes reflet { 0%, 72% { transform: translateX(-110%); } 88%, 100% { transform: translateX(110%); } }
.cta-sous { text-align: center; color: var(--texte-2); font-size: 17px; margin-top: 11px; }
.bouton-lien { text-align: center; color: var(--titre-or); font-size: 17px; min-height: 44px; padding: 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bouton-or { background: linear-gradient(180deg, var(--or-1), var(--or-2) 60%, var(--or-3)); color: var(--or-texte); font-weight: 700; font-size: 17px; min-height: 50px; padding: 9px 16px; text-align: center; border-radius: 12px; box-shadow: 0 3px 0 var(--or-ombre); }
.bouton-or:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--or-ombre); }
.bouton-or:disabled { opacity: .45; }
.bouton-fantome { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 6px 14px; border: 1px solid var(--carte-bord); border-radius: 12px; color: var(--texte-2); font-size: 17px; background: var(--carte-bas); }
.bouton-fantome:active { background: var(--carte-haut); }
.bouton-fantome:disabled { opacity: .4; }

/* Rôle des épreuves : une carte de couleur par mode */
.role { padding: 8px 16px 10px; }
.role h2 { font-weight: 700; font-size: 26px; line-height: 1.1; margin-bottom: 12px; }
.role-ligne {
  position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; width: 100%; padding: 13px 14px; margin-bottom: 11px; min-height: 92px; border-radius: var(--rayon);
  color: var(--m-texte); background: linear-gradient(135deg, var(--m1), var(--m2)); box-shadow: 0 6px 14px var(--ombre), inset 0 1px 0 rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .1s;
}
.role-ligne:active { transform: scale(.98); }
.role-ligne[data-mode='paires'] { --m1: var(--m-paires-1); --m2: var(--m-paires-2); }
.role-ligne[data-mode='puzzle'] { --m1: var(--m-puzzle-1); --m2: var(--m-puzzle-2); }
.role-ligne[data-mode='juge'] { --m1: var(--m-juge-1); --m2: var(--m-juge-2); }
.role-ligne[data-mode='plan'] { --m1: var(--m-plan-1); --m2: var(--m-plan-2); }
.role-ligne[data-mode='architecte'] { --m1: var(--m-archi-1); --m2: var(--m-archi-2); }
.role-ligne[data-mode='vers-role'], .role-ligne[data-mode='express'], .role-ligne[data-mode='niveau-1'] { --m1: var(--m-paires-1); --m2: var(--m-paires-2); }
.role-ligne[data-mode='vers-examen'], .role-ligne[data-mode='niveau-2'] { --m1: var(--m-archi-1); --m2: var(--m-archi-2); }
.role-ligne[data-mode='niveau-3'] { --m1: var(--m-puzzle-1); --m2: var(--m-puzzle-2); }
.role h1 { font-weight: 700; font-size: 32px; line-height: 1.08; }
.role .page-sous { margin-bottom: 14px; }
/* Un fil de lumière fait le tour des cartes, chacune à son tour. */
.role-ligne::before, .role-ligne::after { content: ''; position: absolute; left: 0; width: 45%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent); opacity: 0; pointer-events: none; }
.role-ligne::before { top: 0; animation: fil 11s linear infinite; animation-delay: var(--d); }
.role-ligne::after { bottom: 0; animation: fil-retour 11s linear infinite; animation-delay: var(--d); }
@keyframes fil { 0% { transform: translateX(-100%); opacity: 0; } 2% { opacity: 1; } 11% { transform: translateX(225%); opacity: 1; } 12%, 100% { transform: translateX(225%); opacity: 0; } }
@keyframes fil-retour { 0%, 11% { transform: translateX(225%); opacity: 0; } 13% { opacity: 1; } 22% { transform: translateX(-100%); opacity: 1; } 23%, 100% { transform: translateX(-100%); opacity: 0; } }
.role-icone { flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.role-txt { min-width: 0; }
.role-ligne b { display: block; font-weight: 700; font-size: 22px; line-height: 1.12; }
.role-ligne small { display: block; font-size: 17px; color: var(--m-texte-2); line-height: 1.2; margin-top: 2px; }

/* Onglets */
#onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); border-top: 1px solid var(--carte-bord); padding-bottom: var(--bas-sur); }
.onglet { position: relative; flex: 1; max-width: 112px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px 7px; color: var(--texte-2); font-size: 15px; line-height: 1.15; min-height: 62px; }
.onglet.actif { color: var(--titre-or); }
.onglet.actif::before { content: ''; position: absolute; top: -2px; left: 50%; width: 76px; height: 54px; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--or-2), transparent 68%); opacity: .3; }

/* Pages */
.page { padding: 8px 16px 26px; }
.page h1 { font-weight: 700; font-size: 36px; line-height: 1.06; letter-spacing: -.005em; }
.page h2 { font-weight: 700; font-size: 25px; line-height: 1.12; margin: 28px 0 12px; }
.page-sous { color: var(--texte-2); font-size: 17px; line-height: 1.24; margin-top: 5px; }
.aide-claire { color: var(--texte-2); font-size: 17px; line-height: 1.26; margin-bottom: 10px; }
.vide { color: var(--texte-2); grid-column: 1 / -1; padding: 16px 0; }

/* Chambres : le chemin du cours */
.page-chambres { text-align: center; padding-left: 0; padding-right: 0; }
.parcours { position: relative; margin-top: 8px; }
.voies { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.parcours > div { position: absolute; inset: 0; }
.voie, .voie-halo { fill: none; vector-effect: non-scaling-stroke; }
.voie-halo { stroke: var(--trait); stroke-width: 7; opacity: .24; }
.voie { stroke: var(--or-2); stroke-width: 2.500; }
.voie.loin { stroke: var(--trait); stroke-dasharray: 2 7; stroke-linecap: round; opacity: .75; }
.voie-halo.loin { opacity: .1; }
.comete { fill: var(--or-1); }
.salle { position: absolute; transform: translate(-50%, -50%); }
.salle button { position: relative; display: block; width: 92px; height: 92px; }
.salle-marque { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 41px; line-height: 1; transition: transform .12s; }
.salle button:active .salle-marque { transform: scale(.95); }
.salle.ouverte .salle-marque { color: var(--titre-or); background: radial-gradient(circle at 38% 30%, var(--eteint-1), var(--eteint-2) 62%); box-shadow: 0 6px 12px var(--ombre), inset 0 0 0 7px var(--fond-plat); }
.salle.ouverte .salle-marque > .laurier { position: absolute; inset: -9px; width: 110px; height: 110px; }
.salle.gagnee .salle-marque { color: #fff; background: radial-gradient(circle at 36% 30%, var(--cire-1), var(--cire-2) 60%, var(--cire-3)); box-shadow: 0 6px 12px var(--ombre), inset 0 0 0 7px rgba(0, 0, 0, .1); }
.salle.courante .salle-marque { color: #fff; width: 100px; height: 100px; inset: -4px; background: radial-gradient(circle at 38% 30%, var(--orange-1), var(--orange-2) 55%, var(--orange-3)); box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 0 30px 8px var(--orange-halo), 0 7px 14px var(--ombre); text-shadow: 0 1px 2px rgba(120, 50, 0, .45); animation: courante 3.8s ease-in-out infinite; }
@keyframes courante { 0%, 100% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 0 22px 5px var(--orange-halo), 0 7px 14px var(--ombre); } 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, .28), 0 0 36px 12px var(--orange-halo), 0 7px 14px var(--ombre); } }
.salle.fermee .salle-marque { color: var(--cuivre); background: radial-gradient(circle at 38% 28%, var(--acier-1), var(--acier-2) 72%); box-shadow: 0 6px 12px var(--ombre), inset 0 0 0 6px rgba(255, 255, 255, .22), inset 0 0 0 7px rgba(0, 0, 0, .12); }
.salle.fermee .salle-marque .ic { stroke: var(--cuivre); stroke-width: 2.600; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.salle-txt { position: absolute; top: 50%; transform: translateY(-50%); width: 46vw; max-width: 200px; display: block; }
.salle.gauche .salle-txt { right: calc(100% + 16px); text-align: right; }
.salle.droite .salle-txt { left: calc(100% + 16px); text-align: left; }
.salle.dessous .salle-txt { top: calc(100% + 16px); left: 50%; width: 62vw; max-width: 250px; transform: translateX(-50%); text-align: center; }
.salle-txt b { display: block; font-weight: 700; font-size: clamp(19px, 5.900vw, 26px); line-height: 1.1; }
.salle.fermee .salle-txt b { color: var(--texte-2); }
.salle-compte { display: inline-block; margin-top: 6px; padding: 1px 12px; border-radius: 999px; font-size: 16px; color: var(--texte-2); background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }

/* Arrêts */
.cherche { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 0 16px; min-height: 52px; border-radius: 999px; color: var(--texte-2); background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.recherche { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 17px; color: var(--texte); -webkit-appearance: none; appearance: none; padding: 8px 0; }
.recherche::placeholder { color: var(--texte-2); opacity: .85; }
.recherche::-webkit-search-cancel-button { display: none; }
.filtres { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 0; padding: 2px 16px 6px; scrollbar-width: none; }
.filtres::-webkit-scrollbar { display: none; }
.filtre { flex: none; min-width: 52px; min-height: 42px; padding: 4px 16px; text-align: center; border: 1px solid var(--carte-bord); color: var(--texte-2); font-size: 17px; border-radius: 999px; }
.filtre.actif { background: linear-gradient(180deg, var(--or-1), var(--or-2) 60%, var(--or-3)); color: var(--or-texte); border-color: transparent; font-weight: 700; box-shadow: 0 2px 0 var(--or-ombre); }
.grille-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.carte-arret { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; height: 100%; min-height: 176px; padding: 14px 10px 38px; border-radius: var(--rayon); background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord), 0 5px 12px var(--ombre); transition: transform .1s; }
.carte-arret:active { transform: scale(.97); }
.carte-an { font-weight: 600; font-size: 29px; line-height: 1; color: var(--texte-2); }
.losange { display: block; width: 62%; height: 9px; margin: 8px 0; background: linear-gradient(var(--cire-2), var(--cire-2)) center / 100% 1px no-repeat; position: relative; opacity: .8; }
.losange::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: var(--cire-2); transform: translate(-50%, -50%) rotate(45deg); }
.carte-arret b { font-weight: 400; font-size: 19px; line-height: 1.14; margin: auto 0; overflow-wrap: anywhere; hyphens: auto; }
.carte-bas { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding-right: 10px; color: var(--texte-2); }
.niveau { display: inline-block; font-size: 15px; line-height: 1.2; padding: 5px 12px; color: var(--texte-2); white-space: nowrap; background: rgba(255, 255, 255, .07); border-radius: 0 12px 0 var(--rayon); }
[data-theme='rose'] .niveau { background: rgba(190, 70, 110, .1); }
.haut-simple .niveau { border-radius: 999px; }
.carte-arret.n3 { box-shadow: inset 0 0 0 1px var(--trait), 0 5px 12px var(--ombre); }
.carte-arret.n4 { box-shadow: inset 0 0 0 1.5px var(--or-3), 0 5px 12px var(--ombre); }
.carte-arret.n4 .carte-an { color: var(--titre-or); }
.carte-arret.n5 { background: linear-gradient(160deg, var(--or-1), var(--or-2) 60%, var(--or-3)); color: var(--or-texte); box-shadow: 0 5px 14px var(--ombre); }
.carte-arret.n5 .carte-an, .carte-arret.n5 .carte-bas, .carte-arret.n5 .niveau { color: var(--or-texte); }
.carte-arret.n5 .niveau { background: rgba(255, 255, 255, .28); }

/* Fiche d'arrêt et révélation */
.fiche { margin: 8px 16px 16px; padding: 18px 16px 24px; border-radius: var(--rayon); background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord), 0 6px 14px var(--ombre); }
.fiche h1 { font-weight: 700; font-size: 28px; line-height: 1.08; }
.fiche h2 { font-weight: 700; font-size: 22px; margin: 22px 0 6px; color: var(--titre-or); }
.revelation-tete { display: flex; gap: 14px; align-items: center; }
.annee { font-weight: 700; font-size: 47px; line-height: 1; letter-spacing: -.01em; color: var(--titre-or); }
.ref { color: var(--texte-2); font-size: 16px; line-height: 1.2; margin-top: 3px; }
.apport { font-weight: 600; font-size: 20px; line-height: 1.24; margin-top: 12px; }
.histoire { line-height: 1.42; font-size: 19.5px; }
.rubrique { margin-top: 12px; }
.rubrique h3 { font-weight: 700; font-size: 17px; color: var(--texte-2); }
.note-nf { font-style: italic; color: var(--texte-2); font-size: 16px; margin-top: 8px; }
.jumeaux ul, .confusions ul { display: grid; gap: 7px; }
.jumeaux button, .confusions button { color: var(--titre-or); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.revelation { padding: 16px; border-radius: var(--rayon); background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord), 0 6px 14px var(--ombre); animation: arrive .28s ease-out; }
.revelation h3 { font-weight: 700; font-size: 24px; line-height: 1.08; }
.revelation .histoire { margin-top: 10px; }
.revelation .jumeaux { margin-top: 13px; border-top: 1px solid var(--carte-bord); padding-top: 10px; font-size: 17px; line-height: 1.28; }
.revelation .jumeaux h4 { font-weight: 700; font-size: 17px; color: var(--texte-2); margin-bottom: 4px; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }

/* Boutique */
.articles { display: grid; gap: 12px; margin-top: 14px; }
.article { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border-radius: var(--rayon); background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord), 0 5px 12px var(--ombre); }
.article > .ic { flex: none; color: var(--titre-or); }
.article > div { flex: 1; min-width: 0; }
.article b { display: block; font-weight: 700; font-size: 24px; line-height: 1.12; }
.article p { font-size: 17px; line-height: 1.2; margin-top: 2px; }
.article small { display: block; font-size: 16px; color: var(--texte-2); margin-top: 2px; }
.prix { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 88px; min-height: 54px; padding: 6px 12px; color: var(--titre-or); font-weight: 700; font-size: 22px; line-height: 1; border-radius: 13px; background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord), 0 3px 6px var(--ombre); }
.prix:active:not(:disabled) { transform: translateY(1px); }
.prix:disabled { opacity: .55; }
.prix.actif { background: linear-gradient(180deg, var(--or-1), var(--or-2) 60%, var(--or-3)); color: var(--or-texte); opacity: 1; font-size: 18px; }
.tenue .prix:not(:has(.jeton)) { font-size: 18px; }
.apercu { flex: none; width: 52px; height: 74px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 3px 7px var(--ombre); position: relative; overflow: hidden; }
.apercu::after { content: ''; position: absolute; left: 50%; top: 13px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; }
.apercu::before { content: ''; position: absolute; left: 9px; right: 9px; bottom: 11px; height: 10px; border-radius: 3px; background: linear-gradient(180deg, #FFEFC2, #BC8D32); }
.apercu-palais { background: linear-gradient(180deg, #0E1E50, #081234); }
.apercu-palais::after { background: radial-gradient(circle at 36% 30%, #FF9D82, #E8573F 60%, #A5251E); }
.apercu-rose { background: linear-gradient(180deg, #FFE3EA, #FFCFDC); }
.apercu-rose::after { background: radial-gradient(circle at 36% 30%, #FFA9BC, #E9557F 60%, #AD2652); }
.apercu-rose::before { background: linear-gradient(180deg, #FFEAD9, #C57F6E); }
.pastille { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.vide-p, .decor-aucun { border: 1px dashed var(--texte-2); }
.decor-arcades, .decor-jardin, .decor-buren { background: var(--carte-bas); box-shadow: inset 0 0 0 2px var(--or-2); }

/* Profil */
.page-profil { text-align: center; }
.page-profil > h1 { font-size: 32px; margin-top: 6px; }
.page-profil > h2, .page-profil > .aide-claire, .page-profil .rappel, .page-profil .cloud, .page-profil .images-perso { text-align: left; }
.profil-tete { display: grid; place-items: center; }
.xp { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 5px 7px 5px 14px; border-radius: 999px; background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); font-weight: 700; font-size: 17px; color: var(--titre-or); }
.xp-rail { flex: 1; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, .2); overflow: hidden; }
.xp-rail i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(180deg, var(--or-1), var(--or-2) 55%, var(--or-3)); }
.xp-txt { margin-top: 8px; }
.carriere { display: grid; gap: 0; margin-top: 20px; justify-items: center; }
.carriere li { position: relative; width: calc(66% + var(--i) * 4.4%); min-height: 46px; display: grid; place-items: center; padding: 6px 12px; font-size: 17px; line-height: 1.12; color: var(--texte-2); background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord); border-radius: 8px; margin-top: -1px; opacity: calc(1 - var(--i) * .075); }
.carriere li.atteint { color: var(--titre-or); opacity: 1; box-shadow: inset 2.500px 0 0 var(--or-2), inset -2.500px 0 0 var(--trait), inset 0 0 0 1px var(--carte-bord); }
.carriere li.actuel { font-weight: 700; box-shadow: inset 3px 0 0 var(--or-2), inset -3px 0 0 var(--trait), 0 0 16px var(--orange-halo); z-index: 1; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.stats div { padding: 12px 8px; border-radius: 14px; background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord), 0 5px 10px var(--ombre); }
.stats dt { font-size: 17px; color: var(--texte-2); line-height: 1.15; }
.stats dd { font-weight: 700; font-size: 39px; line-height: 1.1; }
.trophees { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 8px; }
.trophees button { display: grid; place-items: center; width: 100%; aspect-ratio: 1; }
.medaille { position: relative; display: grid; place-items: center; width: 100%; max-width: 62px; aspect-ratio: 1; border-radius: 50%; color: rgba(255, 255, 255, .92); background: radial-gradient(circle at 36% 28%, var(--m-c1), var(--m-c2) 62%, var(--m-c3)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .22), 0 3px 7px var(--ombre); opacity: .78; }
.medaille.gagnee { opacity: 1; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .4), 0 0 12px var(--orange-halo); }
.medaille .laurier { position: absolute; inset: 4%; width: 92%; height: 92%; opacity: .55; }
.medaille .laurier g { fill: currentColor; }
.medaille .ic { position: relative; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.medaille.argent { --m-c1: #E3E8F0; --m-c2: #99A5BA; --m-c3: #626F87; }
.medaille.or { --m-c1: #FFEFC2; --m-c2: #DDB055; --m-c3: #94691F; }
.medaille.cuivre { --m-c1: #F7CFB2; --m-c2: #C98658; --m-c3: #8A5230; }
.medaille.cire { --m-c1: #FF9D82; --m-c2: #D8493A; --m-c3: #93201C; }
.boite-trophee { text-align: center; display: grid; justify-items: center; gap: 6px; }
.boite-trophee .medaille { width: 84px; max-width: none; }
.boite-trophee h3 { font-weight: 700; font-size: 24px; line-height: 1.1; }
.reglages { display: grid; text-align: left; }
.reglage { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--filet); }
.reglage input { flex: none; -webkit-appearance: none; appearance: none; width: 50px; height: 30px; margin: 0; border-radius: 999px; background: var(--filet); position: relative; transition: background .15s; }
.reglage input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .15s; }
.reglage input:checked { background: var(--or-2); }
.reglage input:checked::after { transform: translateX(20px); }
.ecouter { margin-top: 14px; width: 100%; }
.page-profil > .bouton-or { width: 100%; }
.rappel { display: grid; gap: 10px; }
.cloud { display: grid; gap: 8px; margin-bottom: 14px; }
.code-recup { font-size: 17px; letter-spacing: .03em; overflow-wrap: anywhere; background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); padding: 10px 12px; border-radius: 10px; text-align: center; font-weight: 600; }
.code { width: 100%; background: var(--carte-bas); color: var(--texte); border: 0; box-shadow: inset 0 0 0 1px var(--carte-bord); border-radius: 10px; padding: 10px 12px; font-size: 16px; margin-top: 10px; display: block; }
.code::placeholder { color: var(--texte-2); }
.guide { list-style: decimal; padding-left: 22px; }
.guide li + li { margin-top: 6px; }
.guide-bloc { display: grid; gap: 10px; }
.guide-bloc > p { margin: 0; }
.installer .bouton-fantome { color: var(--papier-texte); border-color: var(--papier-bord); }
.installer-direct { width: 100%; }
.installer-connexion { margin: 4px 0 14px; text-align: left; width: 100%; }
.installer-connexion h2 { font-size: 19px; }
.version { color: var(--texte-2); font-size: 15px; margin-top: 18px; }
.images-perso { display: grid; gap: 10px; }
.ligne-image { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.ligne-image > div:first-of-type { flex: 1; min-width: 0; }
.ligne-image b { display: block; font-size: 18px; font-weight: 700; line-height: 1.15; }
.ligne-image small { display: block; font-size: 16.500px; color: var(--texte-2); line-height: 1.15; }
.image-apercu { flex: none; width: 52px; height: 56px; display: grid; place-items: center; }
.image-apercu img { max-width: 52px; max-height: 56px; object-fit: contain; }
.image-actions { flex: none; display: grid; justify-items: center; }
.image-actions .bouton-lien { min-height: 34px; padding: 4px; font-size: 16px; }
.cache-fichier { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Séance */
.decor-seance { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.entete-seance { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px; padding: calc(2px + var(--haut-sur)) 8px 4px; margin-top: calc(-1 * var(--haut-sur)); background: linear-gradient(180deg, var(--fond-haut) 72%, transparent); }
.pips { flex: 1; display: flex; gap: 5px; align-items: center; }
.pips i { flex: 1; max-width: 62px; height: 6px; border-radius: 3px; background: var(--filet); }
.pips i.fait { background: linear-gradient(90deg, var(--or-3), var(--or-2)); }
.pips i.en-cours { background: var(--or-1); box-shadow: 0 0 8px var(--or-2); }
.combo { min-width: 78px; text-align: right; font-size: 16px; color: var(--texte-2); padding-right: 6px; }
.combo.chaud { color: var(--titre-or); font-weight: 700; }
.vies { display: flex; gap: 3px; min-width: 66px; justify-content: flex-end; color: var(--cire-2); padding-right: 6px; }
.vie.perdue { color: var(--filet); }

.scene { padding: 2px 16px 0; min-height: calc(100dvh - 52px - var(--haut-sur)); display: flex; flex-direction: column; }
.ecran { flex: 1; display: flex; flex-direction: column; min-height: 0; animation: arrive .22s ease-out; }
.ecran-corps { display: block; }
.surtitre { color: var(--texte-2); font-size: 17px; margin: 2px 0 2px; }
.question { font-weight: 700; font-size: 24px; line-height: 1.16; margin: 2px 0 12px; }
.aide { color: var(--texte-2); font-size: 18.500px; line-height: 1.26; margin: -5px 0 12px; }
.indice { background: var(--carte-bas); border-radius: 12px; box-shadow: inset 3px 0 0 var(--trait); padding: 9px 13px; font-size: 17px; margin-bottom: 12px; }
.jokers { display: flex; gap: 8px; margin: auto 0 9px; padding-top: 8px; overflow-x: auto; scrollbar-width: none; }
.jokers::-webkit-scrollbar { display: none; }
.joker { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border-radius: 999px; font-size: 16px; color: var(--texte-2); background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.joker b { color: var(--titre-or); font-weight: 700; }
.joker:disabled { opacity: .4; }
.options { display: grid; gap: 10px; margin-top: auto; padding-bottom: 16px; }
.jokers + .options { margin-top: 0; }
.option {
  position: relative; scroll-margin: 70px 0 112px; display: grid; grid-template-columns: 26px 1fr; column-gap: 11px; align-items: start; width: 100%; padding: 13px 13px; min-height: 60px; border-radius: 14px;
  font-size: 18px; line-height: 1.24; background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord), 0 4px 9px var(--ombre), inset 0 1px 0 var(--carte-reflet); transition: transform .08s;
}
.option:active:not(:disabled) { transform: scale(.985); }
.option-marque { width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--carte-bord); color: #fff; }
.option-t { grid-column: 2; }
.option-w { grid-column: 2; display: block; margin-top: 7px; font-size: 17px; line-height: 1.28; font-weight: 400; color: var(--texte-2); }
.option-w.ferme { display: none; }
.option-voir { position: absolute; right: 10px; top: 16px; color: var(--texte-2); transition: transform .15s; }
.option.deplie .option-voir { transform: rotate(180deg); }
.option.juste { background: var(--juste-fond); box-shadow: inset 0 0 0 2px var(--juste); }
.option.juste .option-marque { background: var(--juste); box-shadow: none; }
[data-theme='palais'] .option.juste .option-marque { color: #052A1E; }
.option.faux { background: none; box-shadow: inset 0 0 0 1px var(--carte-bord); }
.option.faux .option-t { color: var(--texte-2); }
.option.faux .option-marque { color: var(--texte-2); }
.option.faux.choisi { background: var(--faux-fond); box-shadow: inset 0 0 0 2px var(--faux); animation: secoue .32s; }
.option.faux.choisi .option-t { color: var(--texte); }
.option.faux.choisi .option-marque { background: var(--faux); color: #fff; box-shadow: none; }
[data-theme='palais'] .option.faux.choisi .option-marque { color: #3A0A05; }
.option.juste.choisi { animation: reussite .34s ease-out; }
@keyframes reussite { 40% { transform: scale(1.015); } }
.option.retire { display: none; }
.pied { position: sticky; bottom: 0; z-index: 6; margin: auto -16px 0; padding: 14px 16px calc(12px + var(--bas-sur)); display: grid; gap: 8px; background: linear-gradient(180deg, transparent, var(--fond-bas) 34%); }
.options + .pied { margin-top: 0; }

/* Paires */
.temps { height: 8px; border-radius: 4px; background: var(--filet); margin-bottom: 12px; overflow: hidden; }
.temps i { display: block; height: 100%; width: 100%; transform-origin: left; border-radius: 4px; background: linear-gradient(90deg, var(--or-3), var(--or-1)); box-shadow: 0 0 8px var(--or-2); }
.temps.urgent i { background: linear-gradient(90deg, var(--cire-3), var(--cire-1)); box-shadow: 0 0 10px var(--cire-2); }
.paires .jokers { margin-top: 0; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: auto 0 14px; }
.chip { display: grid; place-items: center; text-align: center; padding: 7px 10px; min-height: 58px; font-weight: 700; font-size: 17px; line-height: 1.12; border-radius: 13px; background: linear-gradient(180deg, var(--m-paires-1), var(--m-paires-2)); color: var(--m-texte); box-shadow: 0 4px 9px var(--ombre), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .08s; overflow-wrap: anywhere; }
.chip.mot-long { font-size: min(19px, 4.6vw); padding-inline: 6px; }
.chip:active { transform: scale(.97); }
.chip.vise { background: linear-gradient(180deg, var(--or-1), var(--or-2) 60%, var(--or-3)); color: var(--or-texte); box-shadow: 0 0 16px var(--or-2); }
.chip.reussi { opacity: .3; box-shadow: none; }
.cartes-paires { display: grid; gap: 9px; padding-bottom: 14px; }
.grille-annees { grid-template-columns: 1fr 1fr; }
.carte-paire { display: block; width: 100%; padding: 12px 14px; min-height: 62px; font-size: 19.500px; line-height: 1.22; border-radius: 13px; background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord), 0 4px 9px var(--ombre); transition: transform .08s; }
.carte-paire:active { transform: scale(.985); }
.carte-paire.vise { box-shadow: inset 0 0 0 2px var(--or-2), 0 0 14px var(--or-3); }
.annee-carte { display: grid; place-items: center; font-weight: 700; font-size: 32px; text-align: center; min-height: 84px; }
.carte-paire.reussi { background: var(--juste-fond); box-shadow: inset 0 0 0 1.5px var(--juste); }
.carte-paire.manque { background: var(--faux-fond); box-shadow: inset 0 0 0 1.5px var(--faux); }
.carte-nom { display: block; font-weight: 700; font-size: 17.500px; color: var(--juste); margin-bottom: 1px; }
.manque .carte-nom { color: var(--faux); }
.annee-carte .carte-nom { font-size: 15px; line-height: 1.12; }
.piege { background: var(--carte-bas); border-radius: 12px; box-shadow: inset 3px 0 0 var(--or-2); padding: 9px 13px; margin-bottom: 8px; font-size: 18.500px; }
.secoue { animation: secoue .32s; }
@keyframes secoue { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.lien { position: fixed; z-index: 40; height: 3px; margin-top: -1.500px; transform-origin: left center; border-radius: 2px; pointer-events: none; background: linear-gradient(90deg, var(--or-1), var(--juste)); box-shadow: 0 0 10px var(--or-2); animation: lien .44s ease-out both; }
@keyframes lien { from { clip-path: inset(0 100% 0 0); opacity: 1; } 55% { clip-path: inset(0 0 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 0; } }

/* Puzzle : un paquet de pièces */
.fiche-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 2px 0 10px; }
.mini { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; min-height: 58px; font-size: 15px; line-height: 1.1; color: var(--texte-2); border-radius: 11px; background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.mini i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--carte-bord); color: var(--or-texte); }
.mini.pleine { color: var(--titre-or); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--or-3); }
.mini.pleine i { background: linear-gradient(180deg, var(--or-1), var(--or-3)); box-shadow: none; }
.paquet { flex: 1; display: flex; align-items: center; padding: 14px 0 22px; }
.pile { position: relative; width: 100%; }
.paquet.epais .pile::before, .paquet.epais .pile::after { content: ''; position: absolute; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--carte-bord), 0 4px 8px var(--ombre); }
.paquet.epais .pile::before { left: 16px; right: 16px; top: -12px; height: 100%; background: var(--carte-bas); }
.paquet.epais .pile::after { left: 8px; right: 8px; top: -6px; height: 100%; background: var(--carte-haut); }
.carte-piece { position: relative; z-index: 1; width: 100%; min-height: 200px; display: flex; align-items: center; padding: 22px 20px; font-size: 22.500px; line-height: 1.3; border-radius: 18px; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); box-shadow: inset 0 0 0 1px var(--papier-bord), 0 10px 22px var(--ombre); animation: piece .2s ease-out; transition: transform .17s ease-in, opacity .17s ease-in; }
@keyframes piece { from { transform: scale(.96); opacity: .5; } }
.carte-piece.vers-haut { transform: translateY(-120px) scale(.45); opacity: 0; }
.carte-piece.vers-bas { transform: translateY(60px) rotate(-5deg) scale(.86); opacity: 0; }
.carte-piece.vers-cote { transform: translateX(46%) rotate(5deg); opacity: 0; }
.dock { position: sticky; bottom: 0; z-index: 6; margin: 0 -16px; padding: 8px 16px calc(12px + var(--bas-sur)); background: linear-gradient(180deg, transparent, var(--fond-bas) 18%); }
.dock .pied { position: static; margin: 0 -16px; padding-bottom: 0; background: none; }
.dock-titre { text-align: center; font-size: 17px; color: var(--texte-2); margin-bottom: 8px; }
.vers-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.vers { position: relative; display: grid; place-items: center; min-height: 60px; font-weight: 700; font-size: 20px; line-height: 1; color: var(--or-texte); border-radius: 13px; background: linear-gradient(180deg, var(--or-1), var(--or-2) 58%, var(--or-3)); box-shadow: 0 3px 0 var(--or-ombre), 0 6px 10px var(--ombre), inset 0 1px 0 rgba(255, 255, 255, .7); }
.vers:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--or-ombre); }
.vers.occupe { opacity: .55; }
.dock-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.revue { display: grid; gap: 8px; padding-bottom: 8px; }
.revue-ligne { display: block; width: 100%; padding: 9px 13px; border-radius: 12px; font-size: 17px; line-height: 1.22; background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.revue-ligne b { display: block; font-size: 16px; color: var(--titre-or); }
.revue-ligne span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.verifs { display: grid; gap: 9px; padding-bottom: 8px; }
.verif { border-radius: 13px; padding: 2px 13px; background: var(--juste-fond); box-shadow: inset 0 0 0 1.5px var(--juste); }
.verif.faux { background: var(--faux-fond); box-shadow: inset 0 0 0 1.5px var(--faux); }
.verif summary { display: flex; align-items: center; gap: 9px; min-height: 48px; font-weight: 700; font-size: 18px; }
.verif summary > .ic { margin-left: auto; color: var(--texte-2); transition: transform .15s; }
.verif[open] summary > .ic { transform: rotate(180deg); }
.verif summary .option-marque { flex: none; margin: 0; color: #fff; background: var(--juste); box-shadow: none; }
.verif.faux summary .option-marque { background: var(--faux); }
[data-theme='palais'] .verif summary .option-marque { color: #052A1E; }
.verif p { font-size: 18.500px; line-height: 1.28; padding-bottom: 8px; }
.verif-pourquoi { font-style: italic; color: var(--faux); }
.verif-bon { color: var(--juste); font-weight: 600; }

/* Le juge : la salle d'audience */
.salle-audience { position: absolute; top: var(--haut-sur); left: 0; width: 100%; height: 300px; }
.decor-seance:has(.salle-audience)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--haut-sur); background: var(--mur-1); }
.decor-seance:has(.salle-audience)::after { content: ''; position: absolute; left: 0; right: 0; top: calc(190px + var(--haut-sur)); height: 130px; background: linear-gradient(180deg, transparent, var(--fond-bas)); }
.decor-seance:has(.salle-audience) { background: var(--fond-bas); }
.scene.en-audience .ecran { padding-top: 92px; }
.scene.en-audience .surtitre { color: var(--titre-or); text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
[data-theme='rose'] .scene.en-audience .surtitre { color: #FFF1F5; text-shadow: 0 1px 2px rgba(110, 12, 56, .45); }
.scene.en-audience .question { text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
[data-theme='rose'] .scene.en-audience .question { text-shadow: none; }
.entete-seance:has(+ .scene.en-audience) { background: none; }
.dossier-carte { position: relative; margin-bottom: 12px; padding: 14px 18px 18px; border-radius: 10px; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); box-shadow: inset 0 0 0 1px var(--papier-bord), 0 12px 24px rgba(0, 0, 0, .34); }
.dossier-titre { font-size: 17px; color: #8A6A2A; text-align: center; margin-bottom: 4px; }
[data-theme='rose'] .dossier-titre { color: #9C2F55; }
.dossier-texte { font-size: 20px; line-height: 1.3; }
.marteau { position: absolute; right: 8px; bottom: -34px; }
.marteau-tete { transform-box: view-box; transform-origin: 8px 67px; transform: rotate(-14deg); }
.marteau.frappe-marteau .marteau-tete { animation: marteau .3s cubic-bezier(.5, 0, .75, .4); }
@keyframes marteau { 0% { transform: rotate(-14deg); } 40% { transform: rotate(-42deg); } 80% { transform: rotate(14deg); } 100% { transform: rotate(4deg); } }
.en-audience .options { padding-top: 42px; }
.en-audience .jokers + .options { padding-top: 0; }
.en-audience .jokers { padding-top: 36px; }
.rappel-decision { text-align: center; font-size: 17px; padding: 8px 12px; margin: 6px 0 12px; border-radius: 10px; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); box-shadow: inset 0 0 0 1px var(--papier-bord); }
.fin-epreuve .surtitre { text-align: center; }

/* Plans */
.feuille-plan { display: block; width: 100%; padding: 13px 15px; border-radius: 15px; line-height: 1.24; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); box-shadow: inset 0 0 0 1px var(--papier-bord), 0 8px 16px var(--ombre); }
.feuille-plan p { display: grid; grid-template-columns: 22px 1fr; column-gap: 4px; }
.feuille-plan .p1 { font-weight: 700; font-size: 18px; margin-top: 11px; }
.feuille-plan .p1:first-child { margin-top: 0; }
.feuille-plan .p2 { font-size: 17px; margin-top: 3px; padding-left: 20px; }
.feuille-plan b { color: #8A6A2A; font-weight: 700; }
[data-theme='rose'] .feuille-plan b { color: #9C2F55; }
.plans-rail { display: flex; gap: 12px; overflow-x: auto; margin: 2px -16px 0; padding: 4px 7% 12px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.plans-rail::-webkit-scrollbar { display: none; }
.plan-carte { flex: 0 0 86%; scroll-snap-align: center; scroll-snap-stop: always; min-height: 282px; transition: transform .16s, opacity .16s; opacity: .62; transform: scale(.97); }
.plan-carte.centree { opacity: 1; transform: none; }
.plan-carte.juste { box-shadow: inset 0 0 0 2.500px var(--juste), 0 8px 16px var(--ombre); }
.plan-carte.faux.choisi { box-shadow: inset 0 0 0 2.500px var(--faux), 0 8px 16px var(--ombre); }
.points { display: flex; justify-content: center; gap: 2px; }
.points button { width: 34px; height: 30px; display: grid; place-items: center; }
.points i { width: 10px; height: 10px; border-radius: 50%; background: var(--filet); transition: background .15s; }
.points .actif i { background: var(--or-2); box-shadow: 0 0 8px var(--or-2); }
.verdict { padding: 10px 13px; font-size: 18.500px; line-height: 1.26; border-radius: 12px; background: var(--carte-bas); box-shadow: inset 3px 0 0 var(--juste), inset 0 0 0 1px var(--carte-bord); }
.verdict.faux { box-shadow: inset 3px 0 0 var(--faux), inset 0 0 0 1px var(--carte-bord); }
.plan-rappel { margin-bottom: 12px; padding: 10px 13px; }
.plan-rappel .p1 { font-size: 18.500px; margin-top: 7px; }
.plan-rappel .p2 { font-size: 17.500px; margin-top: 1px; }
.diagnostic .options { grid-template-columns: 1fr 1fr; }
.diagnostic .option { grid-template-columns: 1fr; min-height: 62px; align-content: center; text-align: center; font-weight: 700; font-size: 17px; line-height: 1.14; padding: 9px 8px; }
.diagnostic .option .option-marque { display: none; }
.diagnostic .option-t { grid-column: 1; }
.diagnostic .options.repondu { grid-template-columns: 1fr; }
.diagnostic .options.repondu .option { grid-template-columns: 26px 1fr; text-align: left; align-content: start; padding: 11px 13px; }
.diagnostic .options.repondu .option-marque { display: grid; }
.diagnostic .options.repondu .option-t { grid-column: 2; }
.pli { margin: 10px 0; }
.pli summary { display: flex; align-items: center; justify-content: space-between; min-height: 46px; font-weight: 700; font-size: 19px; }
.pli summary .ic { transition: transform .15s; }
.pli[open] summary .ic { transform: rotate(180deg); }

/* Architecte */
.squelette { display: grid; gap: 6px; margin-bottom: 8px; }
.case-plan { display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; align-items: start; width: 100%; padding: 8px 11px; min-height: 44px; font-size: 17px; line-height: 1.16; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--carte-bord); transition: box-shadow .12s; }
.case-plan b { color: var(--titre-or); font-weight: 700; }
.case-plan.partie { font-weight: 700; }
.case-plan.sous { margin-left: 20px; width: calc(100% - 20px); }
.case-plan.cible { box-shadow: inset 0 0 0 1.5px var(--or-3); background: rgba(231, 193, 104, .07); }
.case-plan.pleine { background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); }
.case-plan.juste { background: var(--juste-fond); box-shadow: inset 0 0 0 1.5px var(--juste); }
.case-plan.faux { background: var(--faux-fond); box-shadow: inset 0 0 0 1.5px var(--faux); }
.case-plan .vide { grid-column: 2; color: var(--texte-2); padding: 0; font-weight: 400; }
.tuile { display: grid; place-items: center; text-align: center; min-height: 72px; padding: 12px 14px; font-size: 19px; line-height: 1.2; font-weight: 600; border-radius: 15px; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); box-shadow: inset 0 0 0 1px var(--papier-bord), 0 8px 16px var(--ombre); animation: piece .2s ease-out; }
.architecte .question { font-size: 22px; }
.architecte > .dock { margin-top: auto; }

/* Résultats */
.resultats { padding: calc(14px + var(--haut-sur)) 16px 0; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tampon { min-height: 136px; display: grid; place-items: center; }
.tampon .sceau { filter: drop-shadow(0 8px 12px var(--ombre)); }
.frappe { animation: frappe .62s cubic-bezier(.3, 0, .2, 1) both .1s; }
@keyframes frappe {
  0%, 52% { transform: scale(3.2) rotate(-14deg); opacity: 0; }
  76% { transform: scale(.9) rotate(2deg); opacity: 1; }
  88% { transform: scale(1.05) rotate(0); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.resultats h1 { font-weight: 700; font-size: 39px; line-height: 1.08; margin-top: 8px; }
.res-texte { color: var(--texte-2); margin-top: 4px; }
.res-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; width: 100%; margin-top: 16px; }
.res-chiffres div { padding: 10px 4px; border-radius: 14px; background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.res-chiffres dt { font-size: 16px; color: var(--texte-2); }
.res-chiffres dd { font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--titre-or); }
.res-coffre { background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--or-3); border-radius: 12px; padding: 9px 13px; margin-top: 12px; width: 100%; }
.decret { width: 100%; padding: 13px; margin-top: 12px; border-radius: 14px; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); box-shadow: inset 0 0 0 1px var(--papier-bord); }
.decret strong { display: block; font-size: 24px; line-height: 1.12; }
.res-trophees { width: 100%; margin-top: 12px; text-align: left; display: grid; gap: 9px; }
.res-trophees li { display: flex; align-items: center; gap: 11px; }
.res-trophees .medaille { flex: none; width: 46px; }
.res-trophees b { display: block; font-weight: 700; line-height: 1.15; color: var(--titre-or); }
.res-trophees small { display: block; font-size: 16px; line-height: 1.15; color: var(--texte-2); }
.res-revoir { width: 100%; text-align: left; margin-top: 16px; }
.res-revoir h2 { font-weight: 700; font-size: 22px; margin-bottom: 4px; }
.res-revoir li button { min-height: 40px; color: var(--titre-or); text-decoration: underline; text-underline-offset: 2px; }
.res-revoir b { font-weight: 700; }
.resultats .pied { width: calc(100% + 32px); }

/* Fenêtres, messages */
.voile { position: fixed; inset: 0; z-index: 40; background: rgba(5, 10, 30, .62); display: flex; align-items: flex-end; }
.boite { width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 16px calc(16px + var(--bas-sur)); border-radius: 20px 20px 0 0; background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 1px 0 var(--carte-bord); animation: boite .2s ease-out; }
@keyframes boite { from { transform: translateY(24px); opacity: .4; } }
.boite-actions { display: grid; gap: 6px; margin-top: 12px; width: 100%; }
.toast { position: fixed; left: 16px; right: 16px; top: calc(10px + var(--haut-sur)); z-index: 50; max-width: 528px; margin: 0 auto; padding: 11px 15px; border-radius: 13px; font-size: 17px; line-height: 1.22; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); box-shadow: inset 0 0 0 1px var(--papier-bord), 0 8px 18px var(--ombre); animation: arrive .2s ease-out; }
.maj { position: fixed; left: 16px; right: 16px; bottom: calc(74px + var(--bas-sur)); z-index: 30; max-width: 528px; margin: 0 auto; text-align: center; padding: 12px; font-weight: 700; border-radius: 13px; color: var(--or-texte); background: linear-gradient(180deg, var(--or-1), var(--or-2) 60%, var(--or-3)); box-shadow: 0 3px 0 var(--or-ombre), 0 8px 16px var(--ombre); }
.confettis { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 47; }
.erreur { padding: 24px 16px; display: grid; gap: 14px; }
.bebew { position: fixed; left: 50%; top: calc(58px + var(--haut-sur)); z-index: 48; transform: translateX(-50%); padding: 8px 22px; border-radius: 999px; pointer-events: none; font-weight: 700; font-style: italic; font-size: 21px; line-height: 1.1; white-space: nowrap; color: #fff; background: linear-gradient(180deg, #E9557F, #AD2652); box-shadow: 0 6px 14px rgba(150, 30, 80, .4), inset 0 1px 0 rgba(255, 255, 255, .4); animation: bebew 1.25s ease-out both; }
@keyframes bebew { 0% { transform: translate(-50%, -14px) scale(.8) rotate(-3deg); opacity: 0; } 12% { transform: translate(-50%, 0) scale(1.06) rotate(1deg); opacity: 1; } 20% { transform: translate(-50%, 0) scale(1) rotate(0); } 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
.slay { position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .78), rgba(255, 214, 226, .4) 52%, transparent 74%); animation: slay-fond 1.2s ease-out both; }
.slay strong { font-weight: 700; font-style: italic; font-size: clamp(58px, 18vw, 86px); line-height: 1; letter-spacing: -.01em; color: #C2185B; text-shadow: 0 2px 0 #fff, 0 0 26px rgba(255, 255, 255, .95), 0 8px 18px rgba(170, 30, 90, .4); animation: slay 1.2s cubic-bezier(.2, 1.2, .3, 1) both; }
@keyframes slay { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 22% { transform: scale(1.1) rotate(1deg); opacity: 1; } 34% { transform: scale(1) rotate(-1deg); } 84% { opacity: 1; transform: scale(1.03) rotate(-1deg); } 100% { opacity: 0; transform: scale(1.1) rotate(-1deg); } }
@keyframes slay-fond { 0%, 86% { opacity: 1; } 100% { opacity: 0; } }

/* Effets : les ambiances s'arrêtent si l'iPhone peine, tout s'arrête si la personne le demande. */
[data-effets='leger'] .etincelle, [data-effets='leger'] .cta.brille::after,
[data-effets='leger'] .role-ligne::before, [data-effets='leger'] .role-ligne::after, [data-effets='leger'] .jour-sceau.aujourdhui::after,
[data-effets='leger'] .salle.courante .salle-marque, [data-effets='leger'] .legendaire .skin-carte::before { animation: none; }
[data-effets='non'] *, [data-effets='non'] *::before, [data-effets='non'] *::after { animation: none !important; transition: none !important; }
[data-effets='non'] .etincelle { display: none; }
[data-effets='non'] .role-ligne::before, [data-effets='non'] .role-ligne::after, [data-effets='non'] .cta.brille::after { display: none; }

/* Choix de la matière */
.choix { padding: 12px 16px calc(24px + var(--bas-sur)); text-align: center; }
.choix h1 { font-weight: 700; font-size: 32px; line-height: 1.1; margin: 8px 0 6px; }
.portes { display: grid; gap: 14px; margin-top: 20px; text-align: left; }
.porte { position: relative; display: flex; gap: 14px; align-items: center; width: 100%; padding: 18px 16px; border-radius: var(--rayon); color: var(--m-texte); background: linear-gradient(135deg, var(--m1), var(--m2)); box-shadow: 0 8px 18px var(--ombre), inset 0 1px 0 rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .16); transition: transform .1s; }
.porte:active { transform: scale(.98); }
.porte-admin { --m1: var(--m-paires-1); --m2: var(--m-paires-2); }
.porte-oblig, .porte-equipe { --m1: var(--m-juge-1); --m2: var(--m-juge-2); }
.porte-icone { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 15px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.porte-txt { flex: 1; min-width: 0; display: block; }
.porte-txt b { display: block; font-weight: 700; font-size: 24px; line-height: 1.1; }
.porte-txt small { display: block; font-size: 17.500px; line-height: 1.2; color: var(--m-texte-2); }
.porte-rang { display: block; margin-top: 9px; font-size: 17px; font-weight: 600; line-height: 1.15; }
.porte .jauge { background: rgba(255, 255, 255, .22); }
.porte .jauge i { background: rgba(255, 255, 255, .9); }
.porte-gain { margin-top: 6px; }
.bouton-matiere { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin: 2px 16px 0; padding: 3px 13px; border-radius: 999px; font-size: 17.500px; color: var(--texte-2); background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.bascule { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin: 10px 0 12px; border-radius: 13px; background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.bascule button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 3px 8px; border-radius: 10px; font-size: 17px; color: var(--texte-2); text-align: center; }
.bascule button.actif { font-weight: 700; color: var(--or-texte); background: linear-gradient(180deg, var(--or-1), var(--or-2)); }
.bascule button:disabled:not(.actif) { opacity: .55; }
.general { margin: 6px 0 16px; padding: 12px 14px; border-radius: var(--rayon); background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); text-align: left; }
.general p { font-size: 16px; color: var(--texte-2); }
.general strong { display: block; font-size: 21px; line-height: 1.15; }
.general small { display: block; margin-top: 6px; font-size: 16px; line-height: 1.2; color: var(--texte-2); }
.avis-travaux { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 17px; line-height: 1.25; background: var(--carte-bas); box-shadow: inset 3px 0 0 var(--or-2), inset 0 0 0 1px var(--carte-bord); }
.avis-travaux .ic { flex: none; margin-top: 2px; color: var(--titre-or); }
.salle-compte.travaux { color: var(--titre-or); }
.badge-travaux { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: 15.500px; color: var(--titre-or); background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.role-ligne[data-mode='cas'] { --m1: var(--m-juge-1); --m2: var(--m-juge-2); }
.role-ligne[data-mode='qualif'] { --m1: var(--m-paires-1); --m2: var(--m-paires-2); }
.role-ligne[data-mode='remede'] { --m1: var(--m-puzzle-1); --m2: var(--m-puzzle-2); }
.role-ligne[data-mode='frise'] { --m1: var(--m-archi-1); --m2: var(--m-archi-2); }
.role-ligne[data-mode='dunk'] { --m1: #E0702A; --m2: #A5430F; }
[data-theme='rose'] .role-ligne[data-mode='dunk'] { --m1: #D9744F; --m2: #A94A34; }
.role-ligne > .ic:last-child { flex: none; margin-left: auto; }
.dunk-choix { display: flex; gap: 8px; margin-top: 8px; }
.dunk-choix .bouton-fantome { flex: 1; min-height: 40px; padding: 3px 8px; color: var(--m-texte); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); }

/* Exercices des obligations */
.raisons { display: grid; gap: 7px; margin: 12px 0 14px; font-size: 17px; line-height: 1.25; }
.raisons li { padding: 8px 12px; border-radius: 11px; background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.raisons b { color: var(--titre-or); }
.question.sous-dossier { margin-top: 44px; }
.rappel-dossier { margin: 8px 0 12px; padding: 0 13px; border-radius: 10px; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); box-shadow: inset 0 0 0 1px var(--papier-bord); }
.rappel-dossier summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; font-size: 17px; list-style: none; }
.rappel-dossier summary::-webkit-details-marker { display: none; }
.rappel-dossier[open] summary .ic { transform: rotate(180deg); }
.rappel-dossier p { padding-bottom: 12px; font-size: 18.500px; line-height: 1.28; }
.situation { margin: 4px 0 12px; padding: 13px 16px; border-radius: 12px; font-size: 19px; line-height: 1.28; background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); color: var(--papier-texte); box-shadow: inset 0 0 0 1px var(--papier-bord), 0 8px 16px var(--ombre); }
.jugement .apport { font-size: 20.500px; line-height: 1.3; }
.frise-rail { display: grid; gap: 7px; margin-bottom: 8px; }
.case-frise { display: grid; grid-template-columns: 30px 1fr; column-gap: 9px; align-items: center; width: 100%; min-height: 52px; padding: 6px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--carte-bord); transition: box-shadow .12s; }
.case-frise.cible { box-shadow: inset 0 0 0 1.5px var(--or-3); background: rgba(231, 193, 104, .07); }
.case-frise.pleine { background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); }
.case-rang { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: 16px; color: var(--titre-or); box-shadow: inset 0 0 0 1.5px var(--or-3); }
.case-t b { display: block; font-size: 18.500px; line-height: 1.12; }
.case-t small { display: block; font-size: 15px; line-height: 1.15; color: var(--texte-2); }
.case-frise .vide { color: var(--texte-2); padding: 0; }
.tuile-frise { gap: 3px; font-size: 17px; font-weight: 400; }
.tuile-frise b { font-size: 18px; }
.dock-bas.seul { grid-template-columns: 1fr; }
.frise > .dock { margin-top: auto; }
.frise-vraie { display: grid; gap: 7px; margin-bottom: 14px; }
.frise-vraie li { display: grid; grid-template-columns: 60px 1fr; gap: 9px; align-items: start; padding: 9px 12px; border-radius: 12px; background: var(--juste-fond); box-shadow: inset 0 0 0 1.5px var(--juste); }
.frise-vraie li.faux { background: var(--faux-fond); box-shadow: inset 0 0 0 1.5px var(--faux); }
.frise-an { font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--titre-or); }
.frise-vraie b { display: block; font-size: 17px; line-height: 1.15; }
.frise-vraie small { display: block; font-size: 16px; line-height: 1.2; color: var(--texte-2); }

/* Dunk shot */
.dunk-entete { align-items: center; }
.dunk-compte { flex: 1; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; padding-right: 8px; }
.dunk-score { font-weight: 700; font-size: 32px; line-height: 1; color: var(--titre-or); }
.dunk-sous { font-size: 16px; color: var(--texte-2); }
.dunk { padding: 0 16px calc(12px + var(--bas-sur)); min-height: calc(100dvh - 56px - var(--haut-sur)); display: flex; flex-direction: column; }
.terrain { position: relative; flex: none; height: 214px; margin: 0 -16px; overflow: hidden; }
.monde { position: absolute; inset: 0; transition: transform .28s ease-out; }
.panier { position: absolute; }
.panier.gauche { left: calc(24% - 48px); }
.panier.droite { left: calc(76% - 48px); }
.arceau-fond { fill: none; stroke: var(--cire-3); stroke-width: 4; }
.arceau { fill: none; stroke: var(--cire-2); stroke-width: 5; stroke-linecap: round; }
.filet { fill: none; stroke: var(--texte-2); stroke-opacity: .55; stroke-width: 1.300; }
.ballon { position: absolute; top: 0; left: 0; will-change: transform; filter: drop-shadow(0 3px 4px var(--ombre)); }
.ballon.en-feu { filter: drop-shadow(0 0 10px #FF8A2E) drop-shadow(0 0 3px #FFD27A); }
.dunk-mot { position: absolute; left: 0; right: 0; top: 70px; text-align: center; font-weight: 700; font-size: 60px; line-height: 1; color: var(--titre-or); text-shadow: 0 2px 8px var(--ombre); animation: dunk-mot .8s ease-out both; pointer-events: none; }
@keyframes dunk-mot { from { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.08); } 75% { opacity: 1; transform: none; } to { opacity: 0; } }
.dunk .temps { flex: none; margin: 4px 0 10px; }
.dunk-question { display: grid; gap: 9px; align-content: start; }
.dunk-enonce { font-weight: 700; font-size: 20px; line-height: 1.18; }
.dunk-question .option { grid-template-columns: 1fr; min-height: 54px; padding: 10px 13px; font-size: 19.500px; align-items: center; }
.dunk-question .option-t { grid-column: 1; }
.dunk-question .option.efface { opacity: .45; }
.dunk-question .option.faux { background: var(--faux-fond); box-shadow: inset 0 0 0 2px var(--faux); }
.dunk-fin { text-align: center; }
.dunk-total { font-weight: 700; font-size: 86px; line-height: 1; color: var(--titre-or); margin-top: 26px; }

/* Petits écrans : tout reste jouable d'un seul coup d'œil. */
@media (max-height: 745px) {
  .architecte .surtitre, .bonplan .surtitre { display: none; }
  .architecte .question { font-size: 19px; margin-bottom: 8px; }
  .bonplan .question { font-size: 21px; margin-bottom: 8px; }
  .bonplan .aide { font-size: 16px; margin-bottom: 6px; }
  .squelette { gap: 4px; margin-bottom: 4px; }
  .case-plan { min-height: 34px; padding: 5px 9px; font-size: 16.500px; line-height: 1.12; border-radius: 9px; }
  .tuile { min-height: 54px; padding: 8px 12px; font-size: 18.500px; }
  .dock-bas { margin-top: 7px; }
  .dock .bouton-fantome { min-height: 40px; padding: 3px 12px; font-size: 16px; }
  .feuille-plan { padding: 10px 12px; }
  .feuille-plan .p1 { font-size: 17px; margin-top: 7px; line-height: 1.18; }
  .feuille-plan .p2 { font-size: 16px; margin-top: 2px; line-height: 1.18; }
  .plan-carte { min-height: 220px; }
  .plans-rail { padding-bottom: 6px; }
  .points button { height: 24px; }
}
@media (max-height: 620px) {
  .paquet { padding: 12px 0 10px; }
  .carte-piece { min-height: 130px; padding: 14px 16px; font-size: 19.500px; line-height: 1.24; }
  .dock-titre { display: none; }
  .vers { min-height: 48px; font-size: 18px; }
  .vers-grille { gap: 7px; }
  .fiche-mini { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* La chouette */
.chouette { position: relative; flex: none; width: var(--taille); height: var(--taille); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.chouette .calque { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chouette .calque.acc { inset: auto; height: auto; }
.chouette .paupieres { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.chouette.cligne .paupieres { opacity: 1; }
.chouette.acc-derriere .acc-laurier { z-index: 0; }
.aura { position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--aura) 0, transparent 66%); pointer-events: none; }
:root { --aura: rgba(255, 226, 164, .34); --livre: #3D4270; --battant-1: #1A3175; --battant-2: #0A1740; --plume: #E9D7C3; }
[data-theme='rose'] { --aura: rgba(255, 255, 255, .85); --livre: #C2466E; --battant-1: #D9648A; --battant-2: #A52C58; --plume: #FFF3F6; }

.figure-chouette { position: relative; width: 236px; height: 200px; margin-top: -8px; cursor: pointer; }
.figure-chouette .sur-accueil { position: absolute; left: 0; top: -26px; }
.figure-chouette .mini-sceau { left: 2px; bottom: 0; }
.figure-chouette .etincelle.e1 { top: 6px; right: 34px; }
.figure-chouette .etincelle.e2 { top: 66px; left: 26px; }
.figure-chouette .etincelle.e3 { bottom: 38px; right: 24px; }
.saute { animation: saute .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes saute { 0%, 100% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(0) scale(1.06, .92); } 50% { transform: translateY(-20px) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.03, .97); } }
.pirouette { animation: pirouette 1.3s cubic-bezier(.3, .8, .4, 1); }
@keyframes pirouette { 0% { transform: rotateY(0) translateY(0); } 40% { transform: rotateY(360deg) translateY(-22px); } 70%, 100% { transform: rotateY(720deg) translateY(0); } }
.reveil { transform-origin: 50% 86%; animation: etire 1.2s ease-in-out both .2s; }
.reveil .paupieres { animation: yeux-clos 1.2s steps(1) both; }
@keyframes etire { 0% { transform: scale(1, 1); } 35% { transform: scale(.96, 1.07); } 60% { transform: scale(1.03, .96); } 100% { transform: scale(1, 1); } }
@keyframes yeux-clos { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

.choix-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 2px; }
.choix-tete h1 { flex: 1; min-width: 0; }
.chouette-guide { margin: -24px -14px -10px 0; transform-origin: 50% 86%; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.chouette-guide[data-vers='admin'] { transform: rotate(-5deg) translateY(2px); }
.chouette-guide[data-vers='oblig'] { transform: rotate(7deg) translateY(6px); }

.bulle { position: relative; width: fit-content; max-width: 86vw; margin: 0 auto; padding: 7px 16px; border-radius: 16px; font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--papier-texte); background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); box-shadow: 0 6px 14px var(--ombre); }
.bulle::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: var(--papier-2); transform: rotate(45deg); }
.bulle-accueil { position: absolute; top: -14px; right: -26px; font-size: 16px; animation: bulle .4s cubic-bezier(.3, 1.5, .5, 1) both .3s; }
@keyframes bulle { from { opacity: 0; transform: scale(.7); } }

/* Les portes du Palais */
.palais-portes { position: fixed; inset: 0; z-index: 70; overflow: hidden; }
.palais-portes.ouvre { pointer-events: none; }
.battant { position: absolute; top: 0; bottom: 0; width: 50.4%; background: linear-gradient(180deg, var(--battant-1), var(--battant-2)); transition: transform .25s cubic-bezier(.55, 0, .8, .45); }
.battant.gauche { left: 0; transform: translateX(-101%); box-shadow: inset -2px 0 0 var(--or-3); }
.battant.droite { right: 0; transform: translateX(101%); box-shadow: inset 2px 0 0 var(--or-3); }
.battant::before, .battant::after { content: ''; position: absolute; left: 12%; right: 12%; border: 1.5px solid var(--or-2); border-radius: 5px; opacity: .55; }
.battant::before { top: calc(26px + var(--haut-sur)); height: 42%; }
.battant::after { bottom: calc(26px + var(--bas-sur)); top: calc(26px + var(--haut-sur) + 42% + 16px); }
.ferme .battant { transform: translateX(0); }
.ouvre .battant { transition: transform .32s cubic-bezier(.2, .7, .3, 1); }
.ouvre .battant.gauche { transform: translateX(-101%); }
.ouvre .battant.droite { transform: translateX(101%); }
.portes-centre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; opacity: 0; transform: scale(.72); }
.portes-centre::before { content: ''; position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; transform: translate(-50%, -52%); border-radius: 50%; background: radial-gradient(circle, var(--aura), transparent 68%); }
.portes-centre .chouette { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.portes-centre p { position: relative; margin-top: -6px; padding: 0 20px; text-align: center; font-weight: 700; font-size: 30px; line-height: 1.1; color: #FFF3D6; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.ferme .portes-centre { opacity: 1; transform: scale(1); transition: opacity .14s .14s, transform .3s cubic-bezier(.3, 1.5, .5, 1) .14s; }
.ouvre .portes-centre { opacity: 0; transform: scale(1.08); transition: opacity .15s, transform .15s; }

/* Réactions de fin d'épreuve */
.reaction { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; padding-bottom: calc(6px + var(--bas-sur)); background: linear-gradient(0deg, var(--fond-bas) 16%, transparent 58%); animation: reaction-fond .18s ease-out both; }
@keyframes reaction-fond { from { opacity: 0; } }
.reaction .chouette { margin-bottom: -18px; animation: saut-bas .5s cubic-bezier(.25, 1.35, .5, 1) both; }
.reaction .bulle { animation: bulle .3s cubic-bezier(.3, 1.5, .5, 1) both .22s; }
@keyframes saut-bas { from { transform: translateY(105%); } }
.slay { grid-auto-rows: min-content; align-content: center; gap: 0; }
.slay .chouette { animation: saut-bas .45s cubic-bezier(.25, 1.35, .5, 1) both; margin-bottom: -22px; }

/* Résultats */
.res-scene { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; }
.res-chouette { margin: -14px -12px -22px -24px; animation: saut-bas .5s cubic-bezier(.25, 1.35, .5, 1) both; }
.res-chouette.grande { animation: saut-bas .5s cubic-bezier(.25, 1.35, .5, 1) both, saute .7s .55s; }
.chiffre-livre { position: absolute; left: 38%; top: 54%; min-width: 30px; padding: 0 5px; border-radius: 15px; text-align: center; font-weight: 700; font-size: 20px; line-height: 30px; color: var(--or-texte); background: linear-gradient(180deg, var(--or-1), var(--or-2)); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); animation: bulle .4s cubic-bezier(.3, 1.5, .5, 1) both .7s; }
.code-envole { position: absolute; left: 38%; top: 40%; width: 34px; animation: envol 1.3s cubic-bezier(.2, .7, .4, 1) both .35s; pointer-events: none; }
@keyframes envol { 0% { opacity: 0; transform: translate(0, 30px) rotate(0); } 15% { opacity: 1; } 70% { opacity: 1; transform: translate(22px, -82px) rotate(320deg); } 100% { opacity: 0; transform: translate(30px, -120px) rotate(520deg); } }

/* Plumes */
.plumes { position: fixed; inset: 0; z-index: 66; overflow: hidden; pointer-events: none; }
.plumes i { position: absolute; top: -46px; width: 13px; height: 26px; background: var(--plume); transform: scale(var(--s)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40'%3E%3Cpath d='M10 40c-.4-5-.5-8-.5-12C3 25 1 16 7 3c1-2 3-3 4-3 6 9 8 20 0 28 0 4 0 7-.2 12z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40'%3E%3Cpath d='M10 40c-.4-5-.5-8-.5-12C3 25 1 16 7 3c1-2 3-3 4-3 6 9 8 20 0 28 0 4 0 7-.2 12z'/%3E%3C/svg%3E") center / contain no-repeat; animation: chute var(--t) cubic-bezier(.3, .3, .6, 1) var(--d) both; }
@keyframes chute { from { transform: translate(0, 0) rotate(var(--r)) scale(var(--s)); } 50% { transform: translate(var(--x), 55vh) rotate(calc(var(--r) + 150deg)) scale(var(--s)); } to { transform: translate(calc(var(--x) * -.4), 112vh) rotate(calc(var(--r) + 300deg)) scale(var(--s)); } }

/* Boutique */
.essayage { position: relative; display: grid; justify-items: center; height: 196px; margin: 2px 0 6px; overflow: visible; }
.essayage .chouette { position: relative; top: -14px; }
.adjuge { position: fixed; left: 50%; bottom: calc(92px + var(--bas-sur)); z-index: 66; width: 150px; height: 150px; margin-left: -75px; pointer-events: none; }
.adjuge .chouette { animation: saut-bas .28s cubic-bezier(.25, 1.35, .5, 1) both; }
.cachet { position: absolute; right: -36px; top: 42px; padding: 2px 10px; border: 3px solid var(--cire-2); border-radius: 8px; font-weight: 700; font-size: 20px; color: var(--cire-2); background: var(--papier-1); transform: rotate(-12deg); animation: cachet .34s cubic-bezier(.3, 0, .2, 1) both .3s; }
@keyframes cachet { from { opacity: 0; transform: rotate(-12deg) scale(2.6); } }

.attente { min-height: 100dvh; display: grid; place-content: center; justify-items: center; color: var(--texte-2); }
.vide { display: grid; justify-items: center; text-align: center; }
.profil-tete .chouette { margin: -16px auto 2px; }
.image-apercu .chouette { margin: -6px; }
[data-effets='leger'] .plumes, [data-effets='non'] .plumes, [data-effets='non'] .bulle-accueil { display: none; }

/* Les skins du hibou */
.chouette.skin .bras-gauche, .chouette.skin .bras-droit { opacity: 0; }
.chouette.skin.danse .bras-leves { opacity: 0; }
.chouette.skin.danse .bras-droit { animation: bras-six .66s steps(1) infinite, dandine .33s ease-in-out infinite alternate; }
.chouette.skin.danse .bras-gauche { animation: bras-sept .66s steps(1) infinite, dandine .33s ease-in-out infinite alternate; }
@keyframes bras-six { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bras-sept { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes dandine { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.skins { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.skins .legendaire { grid-column: 1 / -1; }
.skin-carte { position: relative; display: grid; justify-items: center; gap: 2px; width: 100%; height: 100%; padding: 2px 8px 13px; text-align: center; overflow: hidden; border-radius: var(--rayon); background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord), 0 5px 12px var(--ombre); }
.skin-carte:active { transform: scale(.98); }
.skin-carte b { display: block; font-weight: 700; font-size: 20px; line-height: 1.1; }
.skin-texte { display: grid; justify-items: center; gap: 3px; }
.skin-prix { display: inline-flex; align-items: center; gap: 6px; color: var(--titre-or); font-weight: 700; font-size: 19px; line-height: 1; }
.skin-etat { color: var(--texte-2); font-size: 16px; }
.skin-rarete { display: block; color: var(--titre-or); font-size: 16px; }
.legendaire .skin-carte { grid-template-columns: 148px 1fr; align-items: center; justify-items: start; gap: 10px; padding: 6px 14px 6px 6px; text-align: left; box-shadow: inset 0 0 0 2px var(--or-2), 0 5px 14px var(--ombre); }
.legendaire .skin-texte { justify-items: start; }
.legendaire .skin-carte::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, var(--aura) 50%, transparent 62%); background-size: 260% 100%; pointer-events: none; animation: reflet 6s ease-in-out infinite; }
.legendaire .skin-carte > * { position: relative; }
@keyframes reflet { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.boite-skin { text-align: center; }
.boite-skin h2 { font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--titre-or); }
.boite-skin p { margin-top: 6px; }
.skin-scene { position: relative; display: grid; justify-items: center; margin: -18px 0 -8px; }
@media (prefers-reduced-motion: reduce) {
  .legendaire .skin-carte::before { animation: none; }
}

/* Le commentaire : l'arrêt à portée de main */
.bandeau-arret { position: sticky; top: 0; z-index: 4; margin-bottom: 10px; border-radius: 14px; background: #fcf5e3; color: #2a1e0b; box-shadow: 0 4px 10px var(--ombre); }
.bandeau-arret summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 7px 14px; list-style: none; cursor: pointer; }
.bandeau-arret summary::-webkit-details-marker { display: none; }
.bandeau-arret summary b { display: block; font-size: 18px; line-height: 1.1; }
.bandeau-arret summary small { display: block; font-size: 15px; line-height: 1.15; }
.bandeau-arret[open] summary svg { transform: rotate(180deg); }
.bandeau-texte { max-height: 46vh; overflow-y: auto; padding: 0 14px 13px; font-size: 17px; line-height: 1.24; }
.ecran.commentaire .bandeau-texte { max-height: none; }
.bandeau-texte blockquote { margin: 10px 0 0; padding-left: 10px; border-left: 2px solid #b08a3e; font-style: italic; }
.bandeau-texte small { display: block; margin-top: 10px; font-size: 15px; line-height: 1.2; }
.bandeau-resume { margin: 0; }
.corrige-plan blockquote { margin: 3px 0 0; font-style: italic; font-size: 17px; line-height: 1.22; }
.boite-genre { text-align: center; }
.boite-genre h2 { font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--titre-or); }
.boite-genre p { margin-top: 4px; }
/* Connexion */
.connexion { min-height: 100dvh; max-width: 420px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 20px calc(24px + var(--bas-sur, 0px)); display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.connexion .chouette { align-self: center; margin-bottom: -6px; }
.connexion h1 { font-weight: 700; font-size: 41px; line-height: 1; color: var(--titre-or); }
.connexion-sous { margin: 8px 0 22px; font-size: 17px; color: var(--texte-2); }
.connexion-google { display: flex; align-items: center; justify-content: center; gap: 10px; }
.connexion-google svg { background: #fff; border-radius: 50%; padding: 3px; width: 28px; height: 28px; }
.connexion-ou { margin: 14px 0 0; color: var(--texte-2); }
.connexion .code { margin: 8px 0; text-align: center; }
.connexion .bouton-fantome { margin-top: 2px; }
.connexion-code { margin-top: 14px; }
.connexion-erreur { margin-bottom: 12px; color: var(--texte); background: rgba(200, 60, 60, .25); border-radius: 10px; padding: 8px 10px; }
.places-alerte { margin: 8px 0; }
.connexion-note { margin-top: auto; padding-top: 18px; }
.liens-legaux { display: flex; justify-content: center; gap: 20px; margin: 8px 0 0; font-size: 15px; }
.liens-legaux a { color: var(--texte-2); font-family: var(--ui); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
/* Administration */
.admin-comptes li { list-style: none; }
.admin-compte { width: 100%; text-align: left; color: inherit; font: inherit; }
.admin-compte b { font-size: 20px; overflow-wrap: anywhere; }
.admin-compte p { overflow-wrap: anywhere; color: var(--texte-2); }
.statut { flex: none; align-self: flex-start; font-size: 15px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.statut-admin { color: var(--or-texte); background: linear-gradient(180deg, var(--or-1), var(--or-2)); box-shadow: none; }
.statut-paye { color: #0E3B2A; background: #7FD8B0; box-shadow: none; }
.statut-aucun { color: var(--texte-2); }
.admin-signal b { font-size: 19px; }
.admin-signal.traite { opacity: .6; }
.admin-fiche { max-height: 88dvh; overflow-y: auto; }
.admin-fiche h2 { font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--titre-or); overflow-wrap: anywhere; }
.admin-fiche h3 { font-weight: 700; font-size: 19px; margin-top: 16px; }
.admin-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
/* Amis */
.haut-amis { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; color: var(--texte-2); }
.haut-amis .pastille { position: absolute; top: 3px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #E0564B; color: #fff; font-size: 13px; font-weight: 700; line-height: 19px; text-align: center; }
.code-ami { font-size: 28px; letter-spacing: .08em; margin: 4px 0 10px; }
.classement { list-style: none; display: grid; gap: 8px; margin: 10px 0 0; padding: 0; }
.classement button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--rayon); text-align: left; color: inherit; font: inherit; background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.classement button:disabled { opacity: 1; }
.classement .moi button { box-shadow: inset 0 0 0 2px var(--or-2); }
.classement .place { flex: none; width: 30px; font-weight: 700; font-size: 24px; color: var(--titre-or); text-align: center; }
.classement li:first-child .place { font-size: 28px; }
.classement .qui { flex: 1; min-width: 0; }
.classement .qui b { display: block; font-weight: 700; font-size: 19px; line-height: 1.15; overflow-wrap: anywhere; }
.classement .qui small { display: block; font-size: 15px; color: var(--texte-2); }
.classement .points { flex: none; font-weight: 700; font-size: 22px; color: var(--titre-or); }
.ami-ligne { width: 100%; text-align: left; color: inherit; font: inherit; }
.notifs .neuf { box-shadow: inset 3px 0 0 var(--or-2), inset 0 0 0 1px var(--carte-bord); }
.comparer { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 16px; }
.comparer th, .comparer td { padding: 7px 4px; text-align: left; border-bottom: 1px solid var(--carte-bord); vertical-align: top; }
.comparer thead th { font-weight: 700; color: var(--titre-or); }
.comparer tbody th { font-weight: 400; color: var(--texte-2); width: 34%; }
.amis .reglages { margin-top: 6px; }
.defis-attente { display: grid; gap: 8px; margin-bottom: 12px; }
.defi-attente { width: 100%; }

/* Frise : les années posées, les décisions à placer */
.frise-consigne { margin: -2px 0 10px; }
.jalons { list-style: none; margin: 0; padding: 0 0 4px 0; position: relative; display: grid; gap: 10px; }
.jalons::before { content: ''; position: absolute; left: 31px; top: 12px; bottom: 12px; width: 2px; background: var(--carte-bord); }
.jalon { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.jalon-an { position: relative; z-index: 1; justify-self: center; padding: 3px 6px; border-radius: 10px; font-weight: 700; font-size: 18px; line-height: 1.1; color: var(--titre-or); background: var(--fond-plat); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.jalon-corps { min-width: 0; }
.jalon-nom { display: block; font-weight: 700; font-size: 17px; line-height: 1.15; margin-bottom: 4px; }
.jalon-decision.fixe { font-size: 16px; line-height: 1.2; color: var(--texte-2); padding: 8px 11px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.jalon-case { display: block; width: 100%; min-height: 46px; padding: 8px 11px; border-radius: 12px; text-align: left; font: inherit; font-size: 16px; line-height: 1.2; color: var(--texte-2); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.jalon-case.pleine { font-style: normal; color: var(--texte); background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); }
.jalon-case.cible { box-shadow: inset 0 0 0 2px var(--or-2); background: rgba(231, 193, 104, .08); }
.jalon-case.choisie { box-shadow: inset 0 0 0 2px var(--or-2), 0 0 0 3px rgba(231, 193, 104, .25); }
.decisions { display: grid; gap: 7px; max-height: 42dvh; overflow-y: auto; padding: 2px; }
.decision { width: 100%; padding: 10px 13px; border-radius: 13px; text-align: left; font: inherit; font-size: 16px; line-height: 1.2; color: var(--papier-texte, #2A1E0B); background: linear-gradient(180deg, var(--papier-1, #FCF5E3), var(--papier-2, #F3E7C8)); box-shadow: inset 0 0 0 1px var(--papier-bord, #E2D2A6), 0 3px 8px var(--ombre); }
.frise-vraie p { font-size: 16px; line-height: 1.2; margin: 2px 0; }
.frise-mis { color: var(--texte) !important; text-decoration: line-through; opacity: .75; }
/* Testeurs */
.accueil-testeur, .demande-notifs { text-align: center; }
.accueil-testeur h2, .demande-notifs h2 { font-weight: 700; font-size: 26px; color: var(--titre-or); margin-top: -4px; }
.accueil-testeur p, .demande-notifs p { text-align: left; margin-top: 8px; }
.puces-retour { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.puce { padding: 8px 13px; border-radius: 999px; font: inherit; font-size: 15px; color: var(--texte); box-shadow: inset 0 0 0 1px var(--carte-bord); background: transparent; }
.puce[aria-checked="true"] { color: var(--or-texte); background: linear-gradient(180deg, var(--or-1), var(--or-2)); box-shadow: none; }
.retour-texte { width: 100%; min-height: 120px; text-align: left; resize: vertical; font-size: 16px; line-height: 1.3; }
.accueil-testeur .chouette { display: block; margin: 0 auto; }

/* Interface en SF Pro : boutons, onglets, chiffres, étiquettes. La lecture reste en New York. */
.cta, .cta-sous, .bouton-or, .bouton-fantome, .bouton-lien, .bouton-matiere, .onglet, .haut, .haut-jetons, .haut-rang, .haut-nom, .xp-txt,
.surtitre, .page-sous, .aide, .aide-claire, .toast, .pastille, .puce, .statut, .chip, .points, .place, .stats, .res-chiffres, .pips,
.frise-an, .jalon-an, .annee, .annee-carte, .carte-an, .case-rang, .prix, .skin-prix, .skin-rarete, .ref, .temps, .combo, .dunk-score,
.dunk-compte, .dunk-total, .code, .code-ami, .code-recup, .version, .salle-compte, .porte-rang, .badge-travaux, .reglage, .filtre, .bascule,
.serie-sous, .connexion-sous, .connexion-note, .connexion-ou, .comparer, .classement .points, .entete-seance, .quitter, .defi-attente, .role-txt small {
  font-family: var(--ui);
}
.res-chiffres dd, .haut-jetons, .frise-an, .jalon-an, .annee, .carte-an, .classement .points, .dunk-score, .prix, .combo { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.surtitre { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
h1, h2, .question { letter-spacing: -.01em; }
/* Maîtrise et progression */
.niveau { display: inline-flex; align-items: center; gap: 7px; }
.pips-maitrise { display: inline-flex; gap: 3px; }
.pips-maitrise i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.pips-maitrise i.p { background: var(--or-2); }
.progression h2 { margin-top: 22px; }
.progression .carriere small { margin-left: 8px; font-family: var(--ui); font-size: 14px; color: var(--texte-2); }
.paliers { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.paliers li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--ui); font-size: 15px; color: var(--texte-2); }
.paliers .niveau { border-radius: 999px; }
/* Carnet d'erreurs */
.entree-carnet { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin: 4px 0 12px; padding: 12px 15px; border-radius: var(--rayon); font-family: var(--ui); color: var(--texte); background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: inset 0 0 0 1px var(--carte-bord); text-align: left; }
.entree-carnet b { font-size: 17px; }
.entree-carnet span { font-size: 15px; color: var(--texte-2); }
.carnet .cta { margin: 6px 0 14px; }
.carnet-ligne { width: 100%; text-align: left; color: inherit; font: inherit; }
.carnet-ligne small { font-family: var(--ui); font-size: 14px; color: var(--texte-2); }
.carnet-ligne.corrige { opacity: .55; }
.carnet-ligne.corrige b { text-decoration: line-through; }
/* Épreuves à réponse libre */
.reponse-libre { width: 100%; min-height: 110px; text-align: left; resize: vertical; font-family: var(--corps); font-size: 17px; line-height: 1.35; margin-top: 10px; }
.corrige-libre { margin-top: 14px; padding: 12px 14px; border-radius: var(--rayon); color: var(--papier-texte); background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); box-shadow: inset 0 0 0 1px var(--papier-bord); }
.corrige-libre b { font-family: var(--ui); font-size: 14px; }
.corrige-libre p { margin: 4px 0 0; font-size: 18px; line-height: 1.3; }
.corrige-libre small { display: block; margin-top: 6px; font-size: 15px; opacity: .8; }
.auto-note { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; width: 100%; }
.auto-note .bouton-fantome { justify-content: center; }
.flash-arret { font-size: 34px; line-height: 1.05; margin: 4px 0 6px; }
.flash-arret b { font-weight: 700; color: var(--titre-or); }
.flash-arret small { display: block; font-family: var(--ui); font-size: 14px; color: var(--texte-2); margin-top: 4px; }
.article-trous { font-size: 19px; line-height: 1.7; }
.trou { display: inline-block; min-width: 64px; padding: 0 8px; margin: 0 2px; border-radius: 8px; font: inherit; color: var(--texte-2); box-shadow: inset 0 0 0 1px var(--carte-bord); background: transparent; }
.trou.cible { box-shadow: inset 0 0 0 2px var(--or-2); }
.trou.plein { color: var(--texte); background: rgba(231, 193, 104, .12); }
.article-trous mark { padding: 0 4px; border-radius: 6px; color: inherit; }
.article-trous mark.juste { background: var(--juste-fond); box-shadow: inset 0 0 0 1px var(--juste); }
.article-trous mark.faux { background: var(--faux-fond); box-shadow: inset 0 0 0 1px var(--faux); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.etiquette-mot { padding: 9px 14px; border-radius: 12px; font-family: var(--corps); font-size: 17px; color: var(--papier-texte); background: linear-gradient(180deg, var(--papier-1), var(--papier-2)); box-shadow: inset 0 0 0 1px var(--papier-bord); }
.etiquette-mot:disabled { opacity: .3; }
.rappel-heure { display: flex; align-items: center; gap: 10px; font-family: var(--ui); margin: 6px 0; }
.rappel-heure select { width: auto; min-width: 90px; }
.retour-lexou { text-align: center; }
.retour-lexou-figure .chouette { display: block; margin: 0 auto; }
.retour-lexou-figure.saute { animation: saute-lexou .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes saute-lexou { 0% { transform: translateY(0); } 40% { transform: translateY(-26px) rotate(-4deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .retour-lexou-figure.saute { animation: none; } }
/* Termes expliqués */
.terme { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--or-2); cursor: help; }
.bulle-terme { position: fixed; z-index: 90; padding: 10px 13px; border-radius: 12px; font-family: var(--ui); font-size: 15px; line-height: 1.35; color: var(--papier-texte); background: var(--papier-1); box-shadow: 0 8px 22px var(--ombre), inset 0 0 0 1px var(--papier-bord); }
.bulle-terme b { font-weight: 700; }
.entrees-arrets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.entrees-arrets .entree-carnet { margin: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.lexique { margin: 10px 0 0; display: grid; gap: 4px; }
.lexique div { padding: 9px 0; border-bottom: 1px solid var(--filet); }
.lexique dt { font-weight: 700; font-size: 18px; }
.lexique dd { margin: 2px 0 0; font-size: 16px; line-height: 1.35; color: var(--texte-2); }
/* Prise en main */
.prise-en-main { text-align: center; }
.prise-en-main .chouette { display: block; margin: 0 auto; }
.prise-en-main h2 { font-weight: 700; font-size: 26px; color: var(--titre-or); }
.prise-en-main p { margin-top: 6px; }
.pips-prise { display: flex; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.pips-prise i { width: 7px; height: 7px; border-radius: 50%; background: var(--carte-bord); }
.pips-prise i.actif { background: var(--or-2); }
.bulle-exercice { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(14px + var(--bas-sur)); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; font-family: var(--ui); font-size: 15px; line-height: 1.3; color: var(--papier-texte); background: var(--papier-1); box-shadow: 0 10px 26px var(--ombre), inset 0 0 0 1px var(--papier-bord); }
.bulle-exercice p { flex: 1; margin: 0; }
.bulle-exercice .bouton-lien { color: var(--papier-texte); }

/* Syllogisme et cas nu */
.cases-syllo { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.cases-syllo .etiquette { display: block; font-family: var(--ui); font-size: 14px; color: var(--texte-2); margin-bottom: 4px; }
.case-syllo { width: 100%; min-height: 64px; padding: 12px 14px; text-align: left; font-size: 17px; line-height: 1.3; border-radius: 12px; color: var(--texte-2); border: 1px dashed var(--carte-bord); background: transparent; }
.case-syllo.cible { border-color: var(--titre-or); }
.case-syllo.pleine { border-style: solid; color: var(--texte); background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); }
.pieces-syllo { display: grid; gap: 8px; max-height: 42vh; overflow-y: auto; padding: 2px; }
.piece-syllo { min-height: 48px; padding: 10px 14px; text-align: left; font-size: 16px; line-height: 1.28; border-radius: 12px; color: var(--texte); background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.piece-syllo:active { background: var(--carte-haut); }
.cases-syllo.corrige li { padding: 12px 14px; border-radius: 12px; background: var(--carte-bas); box-shadow: inset 0 0 0 1px var(--carte-bord); }
.cases-syllo.corrige li.juste { box-shadow: inset 3px 0 0 var(--juste), inset 0 0 0 1px var(--carte-bord); }
.cases-syllo.corrige li.faux { box-shadow: inset 3px 0 0 var(--faux), inset 0 0 0 1px var(--carte-bord); }
.cases-syllo.corrige p { margin: 0; font-size: 17px; line-height: 1.32; }
.cases-syllo.corrige small { display: block; margin-top: 6px; font-family: var(--ui); font-size: 14px; color: var(--texte-2); }

/* Partiel blanc */
.chrono-partiel { min-width: 78px; text-align: right; padding-right: 6px; font-family: var(--ui); font-size: 16px; font-variant-numeric: tabular-nums; color: var(--texte-2); }
.chrono-partiel.presse { color: var(--faux); font-weight: 600; }
.res-bilan { width: 100%; text-align: left; margin-top: 16px; }
.res-bilan h2 { font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.res-bilan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.res-bilan li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-family: var(--ui); font-size: 15px; }
.res-bilan li b { font-variant-numeric: tabular-nums; }
.res-bilan li i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--juste) var(--p), var(--carte-bord) var(--p)); }
.res-bilan li.fragile i { background: linear-gradient(90deg, var(--faux) var(--p), var(--carte-bord) var(--p)); }
.res-bilan .discret { font-size: 15px; color: var(--texte-2); }

/* Choix de l'année */
.porte.en-travaux { opacity: .5; }
.porte-annee-n { font-family: var(--ui); font-weight: 800; font-size: 22px; }
.bascule button[disabled] { opacity: .45; }

/* ============ Nouvelle interface : Bento Palais et ses tenues ============ */
html::before { background: var(--encre); }
/* Les halos de Verre lumineux et de Rose dérivent lentement derrière l'appli. */
html::after { content: ''; position: fixed; inset: -10%; z-index: -2; pointer-events: none; opacity: calc(var(--halo-force) * .5); filter: blur(40px);
  background: radial-gradient(240px 240px at 12% 22%, var(--bleu), transparent 70%), radial-gradient(220px 220px at 88% 55%, var(--or), transparent 70%), radial-gradient(200px 200px at 30% 92%, var(--verdict), transparent 70%);
  animation: deriver-fond 16s ease-in-out infinite alternate; }
@keyframes deriver-fond { to { transform: translate(30px, -40px) scale(1.08); } }
html[data-effets='non']::after { animation: none; }

/* Barre d'onglets : une pilule qui flotte, l'onglet actif en or. */
#onglets { left: 12px; right: 12px; bottom: calc(8px + var(--bas-sur)); max-width: 536px; margin: 0 auto; padding: 7px; gap: 4px; justify-content: space-between; border: 0; border-radius: 999px; background: var(--banc); box-shadow: 0 10px 28px var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.onglet { flex: none; max-width: none; flex-direction: row; gap: 7px; min-height: 48px; min-width: 48px; padding: 0 12px; justify-content: center; border-radius: 999px; font-family: var(--ui); font-size: 15px; font-weight: 700; color: var(--texte-2); }
.onglet span { display: none; }
.onglet.actif { background: var(--or); color: var(--or-texte); padding: 0 16px; }
.onglet.actif span { display: inline; }
.onglet.actif::before { display: none; }
#app { padding-bottom: calc(96px + var(--bas-sur)); }

/* Accueil : la série dans une tuile bleue, Lexou qui en sort, puis les tuiles d'action. */
.tribune { margin: 46px 14px 0; padding: 18px 20px; min-height: 200px; display: block; text-align: left; border-radius: 30px; background: var(--bleu); color: var(--bleu-texte); }
.tribune .serie-bloc { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; max-width: 58%; }
.serie-etiquette { font-family: var(--ui); font-size: 14px; opacity: .85; }
.tribune .serie-txt { margin: 0; font-family: var(--ui); font-size: 20px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.serie-nombre { font-family: var(--corps); font-size: 70px; line-height: 1; font-weight: 400; }
.tribune .serie-sous { color: inherit; opacity: .85; font-family: var(--ui); font-size: 14px; margin: 2px 0 0; }
.tribune .semaine { gap: 5px; margin-top: 14px; }
.tribune .jour-sceau { width: 26px; height: 26px; font-family: var(--ui); font-size: 11px; font-weight: 800; color: var(--bleu-texte); border: 2px dashed currentColor; background: transparent; opacity: .9; }
.tribune .jour-sceau.tamponne { border: 0; background: var(--or); color: var(--or-texte); opacity: 1; }
.tribune .jour-sceau.sursis { border: 2px solid var(--or); }
.tribune .figure-chouette { position: absolute; right: -12px; bottom: 0; width: 210px; height: 210px; margin: 0; z-index: 1; }
.tribune .figure-chouette .sur-accueil { top: auto; bottom: 0; left: 0; --taille: 210px !important; }
.tribune .figure-chouette .mini-sceau { left: auto; right: 150px; bottom: 6px; }
.tribune .aura { display: none; }
.actions { padding: 10px 14px 0; gap: 10px; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 92px; padding: 0 12px 0 22px; text-align: left; border-radius: 30px; background: var(--or); box-shadow: inset 0 -5px 0 var(--or-ombre); }
.cta:active { transform: scale(.98); box-shadow: inset 0 -3px 0 var(--or-ombre); }
.cta-txt { display: flex; flex-direction: column; gap: 3px; }
.cta-txt b { font-size: 27px; font-weight: 700; }
.cta .cta-sous { margin: 0; text-align: left; font-family: var(--ui); font-size: 14px; color: var(--or-texte); opacity: .75; }
.cta-jouer { flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--or); }
.role.role-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 14px 12px; }
.role-duo .role-ligne { margin: 0; min-height: 132px; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 16px; border-radius: 28px; }
.role-duo .role-ligne[data-mode='vers-examen'] { background: var(--verdict); color: var(--verdict-texte); }
.role-duo .role-ligne[data-mode='vers-role'] { background: var(--robe); color: var(--robe-texte); }
.role-duo .role-ligne b { font-size: 19px; }
.role-duo .role-ligne small { color: inherit; opacity: .75; }
.role-duo .role-icone { background: transparent; box-shadow: none; padding: 0; }
.role-duo .role-ligne::before, .role-duo .role-ligne::after { display: none; }

/* Tuiles et cartes : à plat, sans dégradé ni filet. */
.role-ligne { background: var(--m1, var(--banc)); box-shadow: none; border-radius: 26px; }
.bouton-or { border-radius: 999px; background: var(--or); box-shadow: inset 0 -4px 0 var(--or-ombre); min-height: 52px; }
.bouton-fantome { border-radius: 999px; border: 0; background: var(--banc); }
.bouton-matiere { border-radius: 999px; background: var(--banc); }

/* Chambres : le chemin épuré */
.page-chambres { text-align: left; padding: 6px 16px 0; }
.chambres-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chambres-tete h1 { font-size: 34px; font-weight: 400; }
.chambres-tete span { font-family: var(--ui); font-size: 14px; color: var(--texte-2); }
.page-chambres .page-sous { margin: 2px 0 14px; font-family: var(--ui); font-size: 14px; }
.parcours { position: relative; margin: 0; }
.voies { position: absolute; left: 0; top: 0; overflow: visible; }
.voie { fill: none; stroke-width: 5; stroke-linecap: round; vector-effect: none; }
.voie.loin { stroke: var(--banc-fort); stroke-dasharray: none; opacity: 1; }
.voie.faite { stroke: var(--or); stroke-dasharray: 1; stroke-dashoffset: 0; animation: tracer-voie 1.4s cubic-bezier(.4, 0, .2, 1) .2s both; }
@keyframes tracer-voie { from { stroke-dashoffset: 1; } }
.salle { position: absolute; left: 0; right: 0; transform: none; animation: salle-entree .45s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: var(--d); }
@keyframes salle-entree { from { opacity: 0; transform: translateY(10px); } }
.salle button { position: absolute; inset: 0; width: auto; height: auto; display: flex; align-items: center; gap: 0; text-align: left; }
.salle-marque { position: absolute; left: calc(var(--x) - 29px); top: 50%; right: auto; bottom: auto; width: 58px; height: 58px; margin-top: -29px; display: grid; place-items: center; border-radius: 50%; font-family: var(--corps); font-weight: 400; font-size: 24px; }
.salle.ouverte .salle-marque { color: var(--or); background: var(--banc); box-shadow: inset 0 0 0 2px var(--banc-fort); }
.salle.gagnee .salle-marque { color: #FFE7DC; background: var(--sceau); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .16), 0 4px 0 rgba(0, 0, 0, .22); }
.salle.fermee .salle-marque { color: var(--texte-2); background: var(--banc); box-shadow: inset 0 0 0 2px var(--banc-fort); }
.salle.fermee .salle-marque .ic { stroke: currentColor; filter: none; }
.salle.courante .salle-marque { left: calc(var(--x) - 52px); top: 50%; width: 104px; height: 104px; margin-top: -52px; right: auto; bottom: auto; font-size: 32px; color: var(--bleu-texte); animation: none;
  background: radial-gradient(circle, var(--bleu) 0 41px, var(--encre) 42px 45px, transparent 46px), conic-gradient(var(--or) calc(var(--part) * 360deg), var(--banc-fort) 0); box-shadow: none; }
.salle.courante .salle-marque::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; animation: pulser-salle 2.2s ease-out 1.4s infinite; }
@keyframes pulser-salle { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bleu) 55%, transparent); } to { box-shadow: 0 0 0 18px transparent; } }
.salle-txt { position: absolute; left: 150px; right: 0; top: 50%; transform: translateY(-50%); width: auto; max-width: none; display: flex; flex-direction: column; gap: 2px; }
.salle-txt b { font-family: var(--ui); font-weight: 600; font-size: 15px; line-height: 1.2; }
.salle-compte { display: block; margin: 0; padding: 0; background: none; box-shadow: none; font-family: var(--ui); font-size: 13px; color: var(--texte-2); }
.salle.fermee .salle-txt { opacity: .6; }
.salle.courante .salle-txt { left: calc(var(--x) + 64px); right: 0; }
.salle.courante .salle-txt b { font-size: 16px; }
.salle.courante .salle-compte { color: var(--texte); font-weight: 600; }
.salle-entrer { align-self: flex-start; margin-top: 6px; padding: 9px 14px; border-radius: 999px; background: var(--or); color: var(--or-texte); box-shadow: inset 0 -3px 0 var(--or-ombre); font-family: var(--ui); font-size: 13px; font-weight: 800; white-space: nowrap; }
.salle-lexou { position: absolute !important; left: calc(var(--x) - 132px); top: 50%; margin-top: -34px; pointer-events: none; }
.tribune .mini-sceau { display: none; }

/* Boutique : un sélecteur de rayons qui reste en haut */
.segments { position: sticky; top: calc(4px + var(--haut-sur)); z-index: 8; display: flex; gap: 2px; margin: 10px -4px 6px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: var(--banc); box-shadow: 0 6px 18px var(--ombre); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.segments::-webkit-scrollbar { display: none; }
.segments button { flex: none; padding: 9px 13px; border-radius: 999px; font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--texte-2); }
.segments button.actif { background: var(--texte); color: var(--encre); }
.rayon { scroll-margin-top: calc(70px + var(--haut-sur)); }
.page h1 { font-weight: 400; }
.page-sous { font-family: var(--ui); }

/* Décors du Palais : chacun change un détail de l'interface. */
html[data-decor='arcades'] .tribune { border-radius: 170px 170px 30px 30px; padding-top: 44px; }
html[data-decor='arcades'] .jour-sceau, html[data-decor='arcades'] .pips i { border-radius: 10px 10px 3px 3px; }
html[data-decor='jardin'] .haut .jauge::after { content: ''; position: absolute; right: -6px; top: -6px; width: 14px; height: 14px; border-radius: 0 60% 0 60%; background: var(--verdict); }
html[data-decor='jardin'] .haut .jauge { position: relative; overflow: visible; }
.feuille { position: absolute; top: -20px; width: 14px; height: 14px; border-radius: 0 70% 0 70%; background: var(--verdict); opacity: .7; pointer-events: none; z-index: 3; animation: chute-feuille 9s linear infinite; }
.feuille.f1 { left: 30%; } .feuille.f2 { left: 62%; animation-delay: 3s; animation-duration: 11s; } .feuille.f3 { left: 84%; animation-delay: 6s; }
@keyframes chute-feuille { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .7; } 100% { transform: translate(-30px, 240px) rotate(300deg); opacity: 0; } }
html[data-decor='buren'] .tribune { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 10px, transparent 10px 20px); }
html[data-decor='buren'] .pips i.fait { background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 6px); }
.colonnes-buren { position: absolute; left: 18px; bottom: 0; height: 52px; display: flex; align-items: flex-end; gap: 8px; opacity: .25; pointer-events: none; }
.colonnes-buren i { width: 12px; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px); transform-origin: bottom; animation: colonne-monte .9s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: calc(var(--i) * .08s); }
@keyframes colonne-monte { from { transform: scaleY(0); } }
.tribune[data-decor]:not([data-decor='aucun'])::before { display: none; }
html[data-effets='non'] .feuille { display: none; }

/* Verdict entre deux épreuves : une feuille de couleur remonte, Lexou saute dessus. */
:root, [data-theme] { --battant-1: var(--bleu); --battant-2: var(--bleu); }
.reaction { align-items: stretch; justify-content: flex-end; padding: 0 12px calc(12px + var(--bas-sur)); background: linear-gradient(0deg, color-mix(in srgb, var(--encre) 70%, transparent), transparent 55%); }
.feuille-verdict { position: relative; min-height: 120px; padding: 26px 22px 24px; border-radius: 32px; background: var(--verdict); color: var(--verdict-texte); box-shadow: 0 -10px 30px var(--ombre); animation: monte-feuille .38s cubic-bezier(.2, .8, .2, 1) both; }
.reaction.moyen .feuille-verdict { background: var(--or); color: var(--or-texte); }
.reaction.rate .feuille-verdict { background: var(--cire-vive); color: var(--cire-texte); }
@keyframes monte-feuille { from { transform: translateY(110%); } }
.feuille-verdict .chouette { position: absolute !important; right: 6px; top: -104px; margin: 0; animation: saut-verdict .55s cubic-bezier(.25, 1.4, .5, 1) .18s both; }
@keyframes saut-verdict { from { transform: translateY(80px) scale(.8); opacity: 0; } }
.feuille-verdict .bulle { margin: 0; padding: 0; max-width: 64%; background: none; box-shadow: none; color: inherit; font-family: var(--corps); font-weight: 400; font-size: 26px; line-height: 1.15; animation: none; }
.feuille-verdict .bulle::after { display: none; }

/* Séance : en-tête, options, papiers */
.option { border-radius: 20px; background: var(--banc); box-shadow: none; }
.entete-seance { background: linear-gradient(180deg, var(--encre) 72%, transparent); }
.quitter { border-radius: 50%; background: var(--banc); width: 40px; height: 40px; display: grid; place-items: center; }

/* Dunk : le panier lance, le ballon passe entre l'arceau du fond et le filet. */
.panier { width: 96px; height: 74px; transform-origin: 48px 14px; }
.panier svg { position: absolute; left: 0; top: 0; }
.panier-fond { z-index: 1; } .ballon { z-index: 2; } .panier-avant { z-index: 3; }
.panier .filet { transform-box: fill-box; transform-origin: 50% 0; stroke: #FFFFFF; stroke-opacity: .8; stroke-width: 1.5; fill: none; }
.arceau-fond { stroke: #B9470F; stroke-width: 4; }
.arceau { stroke: #FF7A2E; stroke-width: 5; }
.monde { transition: transform .5s cubic-bezier(.3, .8, .3, 1); }
.terrain { margin: 0; border-radius: 30px; background: var(--bleu); height: 230px; }
.dunk-score { font-family: var(--ui); }

/* Profil : avatar dans un rond, tuiles de chiffres, listes groupées. */
.page-profil .profil-tete { position: relative; width: 128px; height: 128px; margin: 6px auto 4px; border-radius: 50%; overflow: hidden; background: var(--bleu); }
.page-profil .profil-tete .chouette { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); }
.page-profil h1 { font-size: 30px; }
.carriere { padding: 0; border-radius: 22px; background: var(--banc); overflow: hidden; }
.carriere li { margin: 0; border-radius: 0; box-shadow: none; background: none; text-align: left; padding: 12px 16px; font-family: var(--ui); font-size: 15px; transform: none; width: auto; }
.carriere li + li { border-top: 1px solid var(--banc-fort); }
.carriere li.actuel { background: var(--or); color: var(--or-texte); font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats > div { padding: 12px; border-radius: 20px; background: var(--banc); box-shadow: none; }
.stats dt { font-family: var(--ui); font-size: 12px; color: var(--texte-2); }
.stats dd { font-family: var(--ui); font-size: 24px; font-weight: 700; }
.general { border-radius: 24px; background: var(--banc); box-shadow: none; }
.reglage { border-radius: 18px; background: var(--banc); box-shadow: none; }
.bascule { border-radius: 14px; background: var(--banc); padding: 3px; }
.bascule button { border-radius: 11px; font-family: var(--ui); font-weight: 600; }
.bascule button.actif { background: var(--banc-fort); color: var(--texte); box-shadow: 0 1px 3px var(--ombre); }

/* Arrêts : cartes à plat, nom en avant. */
.grille-arrets .carte-arret, .carte-arret { border-radius: 24px; background: var(--banc); box-shadow: none; }
.classement .insigne-ami { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--or); }
/* Profil : trois chiffres clés, la maîtrise, puis les records en liste. */
.page-profil .stats-cle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; text-align: left; }
.stats-cle > div { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; padding: 14px 14px 12px; border-radius: 22px; background: var(--banc); min-height: 92px; box-sizing: border-box; }
.stats-cle dd { margin: 0; font-family: var(--ui); font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stats-cle dt { font-family: var(--ui); font-size: 13px; color: var(--texte-2); line-height: 1.2; }
.stats-cle .cle-serie { background: var(--bleu); color: var(--bleu-texte, #fff); }
.stats-cle .cle-serie dt { color: inherit; opacity: .82; }
.page-profil .maitrise { display: grid; gap: 8px; margin-top: 8px; padding: 14px 16px; border-radius: 22px; background: var(--banc); text-align: left; }
.maitrise-ligne { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ui); font-size: 15px; }
.maitrise-ligne b { font-variant-numeric: tabular-nums; }
.maitrise-rail { position: relative; height: 10px; border-radius: 999px; background: var(--banc-fort); overflow: hidden; }
.maitrise-rail i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--or); transform-origin: left; animation: maitrise-pousse .9s cubic-bezier(.3, .8, .3, 1) both; }
.maitrise-rail i.vu { background: color-mix(in srgb, var(--or) 35%, transparent); }
@keyframes maitrise-pousse { from { transform: scaleX(0); } }
.maitrise small { font-family: var(--ui); font-size: 13px; color: var(--texte-2); }
.page-profil .stats { display: flex; flex-direction: column; gap: 0; margin-top: 8px; padding: 0 16px; border-radius: 22px; background: var(--banc); text-align: left; }
.page-profil .stats > div { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0; border-radius: 0; background: none; }
.page-profil .stats > div + div { border-top: 1px solid var(--banc-fort); }
.page-profil .stats dt { font-size: 15px; color: var(--texte); }
.page-profil .stats dd { margin: 0; font-size: 17px; font-weight: 700; color: var(--texte-2); font-variant-numeric: tabular-nums; }
/* Trophées repliés par défaut. */
.tiroir-trophees { margin-top: 16px; border-radius: 22px; background: var(--banc); text-align: left; }
.tiroir-trophees summary { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; list-style: none; cursor: pointer; font-family: var(--ui); font-size: 17px; font-weight: 600; }
.tiroir-trophees summary::-webkit-details-marker { display: none; }
.tiroir-trophees summary small { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--texte-2); }
.tiroir-trophees summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--texte-2); border-bottom: 2px solid var(--texte-2); transform: rotate(45deg) translateY(-3px); transition: transform .25s ease; }
.tiroir-trophees[open] summary::after { transform: rotate(-135deg) translateX(-2px); }
.tiroir-trophees .trophees { padding: 0 12px 14px; margin: 0; }
.tiroir-trophees[open] .trophees { animation: eclore-tiroir .3s ease both; }
@keyframes eclore-tiroir { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .maitrise-rail i, .tiroir-trophees[open] .trophees { animation: none; } }

/* ====================== L1 : les jeux de l'introduction au droit ====================== */
.role-ligne.en-travaux { opacity: .55; cursor: default; }

/* Le tri du greffe : la carte au centre, un bord par famille de règles. */
.ecran.tri { display: flex; flex-direction: column; gap: 10px; }
.tri .surtitre { display: flex; justify-content: space-between; }
.tri-compte { color: var(--texte-2); font-family: var(--ui); font-size: 13px; }
.tri-consigne { min-height: 44px; margin: 0; font-family: var(--ui); font-size: 14px; color: var(--texte-2); }
.tri-consigne.explique { color: var(--texte); }
.tri-terrain { position: relative; height: min(58vh, 460px); border-radius: 28px; background: var(--banc); overflow: hidden; touch-action: none; }
.tri-bord { position: absolute; z-index: 2; border: 0; font: 700 14px var(--ui); color: var(--texte); background: var(--banc-fort); border-radius: 999px; padding: 9px 14px; transition: transform .2s, background .2s, color .2s; }
.tri-haut { top: 10px; left: 50%; transform: translateX(-50%); }
.tri-bas { bottom: 10px; left: 50%; transform: translateX(-50%); }
.tri-gauche { left: 6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; margin-left: -24px; }
.tri-droite { right: 6px; top: 50%; transform: translateY(-50%) rotate(90deg); margin-right: -18px; }
.tri-bord.vise { background: var(--or); color: var(--or-texte); }
.tri-bord.indique { background: var(--verdict); color: var(--verdict-texte); animation: tri-pouls 1s ease-in-out infinite; }
@keyframes tri-pouls { 50% { filter: brightness(1.15); box-shadow: 0 0 0 6px color-mix(in srgb, var(--verdict) 30%, transparent); } }
.tri-pile { position: absolute; inset: 56px 52px; display: grid; place-items: center; }
.tri-carte { position: relative; width: 100%; max-width: 250px; min-height: 190px; display: grid; place-items: center; padding: 20px 18px; box-sizing: border-box; border-radius: 22px;
  background: var(--papier-1, #FFFDF6); color: var(--papier-texte, #1B1A16); box-shadow: 0 12px 30px var(--ombre); text-align: center; cursor: grab; user-select: none; -webkit-user-select: none;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1.2), opacity .35s; animation: tri-arrive .35s cubic-bezier(.2, .8, .3, 1.2) both; }
.tri-carte p { margin: 0; font-size: 19px; line-height: 1.3; }
.tri-carte.tenue { transition: none; cursor: grabbing; }
@keyframes tri-arrive { from { transform: translateY(24px) scale(.94); opacity: 0; } }
.tri-tampon { position: absolute; top: 14px; right: 12px; padding: 4px 10px; border: 3px solid var(--sceau); border-radius: 8px; color: var(--sceau); font: 900 18px var(--ui); letter-spacing: .04em; transform: rotate(-12deg) scale(2.4); opacity: 0; pointer-events: none; }
.tri-carte.tamponnee .tri-tampon { animation: tampon .32s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes tampon { to { transform: rotate(-12deg) scale(1); opacity: 1; } }
.tri-carte.vole-haut { transform: translateY(-140%) rotate(-6deg) !important; opacity: 0; }
.tri-carte.vole-bas { transform: translateY(140%) rotate(6deg) !important; opacity: 0; }
.tri-carte.vole-gauche { transform: translateX(-160%) rotate(-18deg) !important; opacity: 0; }
.tri-carte.vole-droite { transform: translateX(160%) rotate(18deg) !important; opacity: 0; }
.tri-carte.tremble { animation: tremble .45s ease both; }
@keyframes tremble { 20%, 60% { transform: translateX(-10px) rotate(-2deg); } 40%, 80% { transform: translateX(10px) rotate(2deg); } }

/* Le mot du juriste : la grille de Wordle, les tuiles qui se retournent, le clavier. */
.ecran.mot { display: flex; flex-direction: column; gap: 12px; }
.mot-def { font-size: 19px; }
.mot-aide { margin: 0; font: 13px var(--ui); color: var(--texte-2); }
.mot-grille { display: grid; gap: 6px; margin: 4px auto 0; width: min(100%, calc(var(--n) * 44px)); }
.mot-ligne { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 5px; }
.mot-ligne.secoue { animation: tremble .4s ease; }
.mot-ligne.danse .mot-tuile { animation: mot-saut .5s ease calc(var(--k, 0) * 60ms); }
@keyframes mot-saut { 40% { transform: translateY(-10px); } }
.mot-tuile { aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; background: var(--banc); box-shadow: inset 0 0 0 2px var(--banc-fort); font: 800 clamp(15px, 5vw, 22px) var(--ui); color: var(--texte); text-transform: uppercase; }
.mot-tuile.pleine { box-shadow: inset 0 0 0 2px var(--texte-2); animation: mot-pop .12s ease; }
@keyframes mot-pop { 50% { transform: scale(1.08); } }
.mot-tuile.retourne { animation: mot-flip .45s ease both; }
@keyframes mot-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.mot-tuile.place { background: var(--verdict); color: var(--verdict-texte); box-shadow: none; }
.mot-tuile.present { background: var(--or); color: var(--or-texte); box-shadow: none; }
.mot-tuile.absent { background: var(--banc-fort); color: var(--texte-2); box-shadow: none; }
.mot-clavier { display: grid; gap: 6px; margin-top: auto; padding-bottom: calc(8px + var(--bas-sur)); }
.mot-rangee { display: flex; justify-content: center; gap: 4px; }
.mot-touche { flex: 1 1 0; max-width: 38px; min-height: 48px; border: 0; border-radius: 8px; background: var(--banc-fort); color: var(--texte); font: 700 15px var(--ui); display: grid; place-items: center; padding: 0; }
.mot-touche.large { max-width: 66px; flex-grow: 1.7; font-size: 12px; }
.mot-touche.place { background: var(--verdict); color: var(--verdict-texte); }
.mot-touche.present { background: var(--or); color: var(--or-texte); }
.mot-touche.absent { opacity: .35; }

/* Le grand rangement : le puits, la pièce qui tombe, trois colonnes. */
.ecran.rangement { display: flex; flex-direction: column; gap: 10px; }
.rg-note { min-height: 40px; margin: 0; font: 14px var(--ui); color: var(--texte-2); }
.rg-note.explique { color: var(--texte); }
.rg-puits { position: relative; display: grid; grid-template-rows: 1fr auto; height: min(62vh, 520px); border-radius: 26px; background: var(--banc); overflow: hidden; }
.rg-ciel { position: relative; }
.rg-piece { position: absolute; left: 50%; top: 0; max-width: 70%; padding: 10px 14px; border-radius: 14px; background: var(--bleu); color: var(--bleu-texte); font: 700 15px var(--ui); text-align: center; box-shadow: 0 8px 18px var(--ombre); will-change: transform; transform: translate(-50%, 0); }
.rg-piece.rebondit { animation: rg-rebond .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rg-rebond { 30% { margin-top: -30px; } 60% { margin-top: 6px; } }
.rg-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; }
.rg-colonne { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 170px; padding: 6px; border: 0; border-radius: 16px; background: var(--banc-fort); color: var(--texte); font: inherit; }
.rg-colonne[data-col='x'] { background: color-mix(in srgb, var(--robe) 22%, var(--banc-fort)); }
.rg-tas { display: flex; flex-direction: column-reverse; gap: 4px; }
.rg-bloc { padding: 6px 4px; border-radius: 9px; background: var(--verdict); color: var(--verdict-texte); font: 700 11px/1.15 var(--ui); animation: rg-pose .3s cubic-bezier(.3, 1.4, .5, 1); }
.rg-bloc.corrige { background: var(--cire-vive); color: var(--cire-texte); }
@keyframes rg-pose { from { transform: translateY(-40px); opacity: 0; } }
.rg-nom { font: 800 12px var(--ui); color: var(--texte-2); padding-top: 4px; }
.rg-colonne.illumine { animation: rg-illumine .7s ease; }
@keyframes rg-illumine { 30% { box-shadow: 0 0 0 3px var(--or), 0 0 30px color-mix(in srgb, var(--or) 60%, transparent); transform: translateY(6px); } }

/* Qui a dit ? : la bulle, les médaillons. */
.qad-bulle { position: relative; margin: 6px 0 18px; padding: 18px 18px 16px; border-radius: 24px; background: var(--papier-1, #FFFDF6); color: var(--papier-texte, #1B1A16); box-shadow: 0 10px 24px var(--ombre); }
.qad-bulle::after { content: ''; position: absolute; left: 34px; bottom: -14px; border: 14px solid transparent; border-top-color: var(--papier-1, #FFFDF6); border-bottom: 0; }
.qad-bulle-txt { margin: 0; min-height: 3.6em; font-size: 20px; line-height: 1.32; }
.qad-ctx { display: block; margin-bottom: 6px; font: 12px var(--ui); opacity: .7; }
.qad-medaillons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.qad-medaillon { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border: 0; border-radius: 22px; background: var(--banc); color: var(--texte); font: inherit; animation: tri-arrive .4s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(var(--j) * 70ms); perspective: 400px; }
.qad-portrait { position: relative; width: 74px; height: 74px; transform-style: preserve-3d; transition: transform .5s ease; }
.qad-face, .qad-dos { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; }
.qad-face { background: radial-gradient(circle at 35% 30%, var(--or-1), var(--or-3)); color: var(--or-texte); font: 800 26px var(--corps); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 4px 0 var(--or-ombre); }
.qad-dos { background: var(--banc-fort); transform: rotateY(180deg); }
.qad-nom { font: 700 13px var(--ui); text-align: center; }
.qad-medaillon.retourne .qad-portrait { transform: rotateY(180deg); }
.qad-medaillon.retourne { opacity: .6; }
.qad-medaillon.hoche .qad-portrait { animation: hoche .7s ease 2; }
.qad-medaillon.hoche { box-shadow: inset 0 0 0 2px var(--verdict); opacity: 1; }
@keyframes hoche { 25% { transform: translateY(5px) rotate(-3deg); } 50% { transform: translateY(0); } 75% { transform: translateY(5px) rotate(3deg); } }
.qad-verdict { margin: 16px 0 0; font: 700 16px var(--ui); }
.qad-verdict.juste { color: var(--verdict); } .qad-verdict.faux { color: var(--cire-vive); }
.qad-recap, .mem-recap { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* Au scanner : la feuille, le rayon, les témoins. */
.sc-feuille { position: relative; overflow: hidden; margin: 6px 0 14px; padding: 16px 18px; border-radius: 20px; background: var(--papier-1, #FFFDF6); color: var(--papier-texte, #1B1A16); box-shadow: 0 10px 24px var(--ombre); }
.sc-feuille small { font: 12px var(--ui); opacity: .65; }
.sc-feuille p { margin: 6px 0 0; font-size: 19px; line-height: 1.32; }
.sc-rayon { position: absolute; left: 0; right: 0; top: -10%; height: 3px; background: var(--cire-vive); box-shadow: 0 0 14px 4px color-mix(in srgb, var(--cire-vive) 55%, transparent); opacity: 0; }
.sc-feuille.balaye .sc-rayon { animation: rayon .7s ease-in-out; }
@keyframes rayon { 0% { top: -5%; opacity: 1; } 100% { top: 105%; opacity: 1; } }
.sc-consigne { margin: 0 0 8px; font: 14px var(--ui); color: var(--texte-2); }
.sc-temoins { display: grid; gap: 8px; }
.sc-temoin { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--banc); color: var(--texte); font: 600 15px var(--ui); text-align: left; }
.sc-voyant { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--banc-fort); box-shadow: inset 0 0 0 2px var(--texte-2); transition: background .2s, box-shadow .2s; }
.sc-temoin.allume .sc-voyant { background: var(--or); box-shadow: 0 0 10px var(--or); }
.sc-temoin.bip-vert { box-shadow: inset 0 0 0 2px var(--verdict); }
.sc-temoin.bip-rouge { box-shadow: inset 0 0 0 2px var(--cire-vive); animation: tremble .35s ease; }
.sc-verdict { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: var(--banc); animation: tri-arrive .35s ease both; }
.sc-verdict b { font: 800 17px var(--ui); }
.sc-verdict.droit b { color: var(--verdict); } .sc-verdict.pas b { color: var(--or); }
.sc-verdict p { margin: 4px 0 0; }

/* Memory : douze cartes, une paire trouvée s'envole vers le dossier. */
.mem-tete { display: flex; align-items: center; justify-content: space-between; }
.mem-dossier { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--banc); color: var(--or); font: 800 15px var(--ui); }
.mem-dossier.recoit { animation: mot-pop .35s ease; }
.mem-consigne { margin: 4px 0 10px; font: 14px var(--ui); color: var(--texte-2); }
.mem-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mem-carte { position: relative; min-height: 104px; padding: 0; border: 0; border-radius: 16px; background: transparent; color: var(--texte); font: inherit; perspective: 600px; }
.mem-dos, .mem-face { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; border-radius: 16px; backface-visibility: hidden; transition: transform .4s ease; box-sizing: border-box; }
.mem-dos { background: var(--bleu) radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .18) 0 18%, transparent 19%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12); }
.mem-face { transform: rotateY(180deg); background: var(--banc); box-shadow: inset 0 0 0 2px var(--banc-fort); font: 600 12.5px/1.2 var(--ui); text-align: center; overflow: hidden; }
.mem-carte.cote-a .mem-face { font: 700 14px/1.15 var(--corps); color: var(--titre-or); }
.mem-carte.ouverte .mem-dos { transform: rotateY(-180deg); }
.mem-carte.ouverte .mem-face { transform: rotateY(0); }
.mem-carte.trouvee .mem-dos { transform: rotateY(-180deg); }
.mem-carte.trouvee .mem-face { transform: rotateY(0); box-shadow: inset 0 0 0 2px var(--verdict); }
.mem-carte.trouvee { animation: mem-envol .6s ease forwards .1s; pointer-events: none; }
@keyframes mem-envol { 60% { transform: scale(1.05); opacity: 1; } 100% { transform: translateY(-30px) scale(.5); opacity: .12; } }

/* La fiche d'une notion. */
.notion-ex, .notion-piege { margin: 12px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--banc); }
.notion-piege { box-shadow: inset 3px 0 0 var(--or); }

@media (prefers-reduced-motion: reduce) {
  .tri-carte, .mot-tuile, .rg-piece, .qad-portrait, .mem-dos, .mem-face { transition: none !important; animation: none !important; }
  .mem-carte.trouvee { animation: none; opacity: .4; }
}
.carte-an.carte-etiquette { font: 700 12px var(--ui); letter-spacing: 0; color: var(--texte-2); }
.jalon-an { white-space: nowrap; }
.tri-carte, .qad-bulle, .sc-feuille { box-shadow: 0 12px 30px var(--ombre), inset 0 0 0 1px var(--papier-bord); }
.qad-verdict.juste, .sc-verdict.droit b { color: color-mix(in srgb, var(--verdict) 55%, var(--texte)); }
.qad-verdict.faux { color: color-mix(in srgb, var(--cire-vive) 70%, var(--texte)); }
.sc-verdict.pas b { color: color-mix(in srgb, var(--or) 55%, var(--texte)); }
/* L1 : chaque jeu a sa couleur dans le rôle, comme les exercices de L2. */
.role-ligne[data-mode='tri'] { --m1: var(--m-juge-1); --m2: var(--m-juge-2); }
.role-ligne[data-mode='mot'] { --m1: var(--m-plan-1); --m2: var(--m-plan-2); }
.role-ligne[data-mode='rangement'] { --m1: var(--m-puzzle-1); --m2: var(--m-puzzle-2); }
.role-ligne[data-mode='quiadit'] { --m1: #A0662A; --m2: #A0662A; }
[data-theme='pastel'] .role-ligne[data-mode='quiadit'] { --m1: #C08442; --m2: #C08442; }
.role-ligne[data-mode='scanner'] { --m1: #1F8FA8; --m2: #1F8FA8; }
.role-ligne[data-mode='memory'] { --m1: #C2508A; --m2: #C2508A; }
[data-theme='pastel'] .role-ligne[data-mode='scanner'] { --m1: #2EA3BC; --m2: #2EA3BC; }
[data-theme='pastel'] .role-ligne[data-mode='memory'] { --m1: #D46A9E; --m2: #D46A9E; }
.role-ligne[data-mode='cas-l1'] { --m1: var(--banc-fort); --m2: var(--banc-fort); }
[data-theme='rose'] .role-ligne[data-mode='memory'] { --m1: #9E5BC9; --m2: #9E5BC9; }
/* Au scanner, deuxième version : deux questions, puis le scan qui explique. */
.sc-question { margin: 4px 0 10px; }
.sc-choix-liste { display: grid; gap: 8px; }
.sc-choix { min-height: 56px; padding: 12px 16px; border: 0; border-radius: 18px; background: var(--banc); color: var(--texte); font: 600 16px var(--ui); text-align: left; }
.sc-choix.oui { box-shadow: inset 4px 0 0 var(--verdict); }
.sc-choix.non { box-shadow: inset 4px 0 0 var(--cire-vive); }
.sc-choix:active { transform: scale(.98); }
.sc-temoin { cursor: default; }
.sc-temoin span { display: grid; gap: 2px; }
.sc-temoin b { font-weight: 700; }
.sc-temoin small { font-size: 12.5px; font-weight: 500; color: var(--texte-2); }
.sc-temoin { animation: tri-arrive .3s ease both; }
.sc-temoin.rempli { box-shadow: inset 0 0 0 2px var(--verdict); }
.sc-temoin.rempli .sc-voyant { background: var(--verdict); box-shadow: 0 0 10px var(--verdict); }
.sc-temoin.manque { box-shadow: inset 0 0 0 2px var(--cire-vive); }
.sc-temoin.manque .sc-voyant { background: var(--cire-vive); box-shadow: 0 0 10px var(--cire-vive); }
.sc-temoin.sans-objet { opacity: .45; }
.sc-bilan { display: block; margin-top: 6px; font: 600 13px var(--ui); color: var(--texte-2); }
/* Le bandeau de mise à jour attend la fin de la séance. */
body:has(#onglets[hidden]) .maj { display: none; }
.demande-notifs .boite-actions { display: grid; gap: 6px; }

/* DROIT CONSTITUTIONNEL : l'architecte des pouvoirs, le nuancier des États, la plume du constituant. */
.porte-constit { --m1: var(--m-plan-1); --m2: var(--m-plan-2); }
.role-ligne[data-mode='pouvoirs'] { --m1: #2F64D0; --m2: #2F64D0; }
.role-ligne[data-mode='nuancier'] { --m1: #8A4FC4; --m2: #8A4FC4; }
.role-ligne[data-mode='plume'] { --m1: #9A5B2E; --m2: #9A5B2E; }
[data-theme='pastel'] .role-ligne[data-mode='pouvoirs'] { --m1: #5C86E6; --m2: #5C86E6; }
[data-theme='pastel'] .role-ligne[data-mode='nuancier'] { --m1: #A57AD8; --m2: #A57AD8; }
[data-theme='pastel'] .role-ligne[data-mode='plume'] { --m1: #B9794A; --m2: #B9794A; }
[data-theme='rose'] .role-ligne[data-mode='nuancier'] { --m1: #B25CB8; --m2: #B25CB8; }

/* L'architecte : des pastilles en cercle, des flèches courbes qui se tracent. */
.ecran.pouvoirs { display: flex; flex-direction: column; }
.ar-verbes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ar-puce { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--banc-fort); color: var(--texte); font: 600 13px var(--ui); transition: opacity .3s; }
.ar-puce b { color: var(--titre-or); font-weight: 800; }
.ar-puce.faite { opacity: .32; text-decoration: line-through; }
.ar-scene { position: relative; width: min(100%, 380px, 44vh); aspect-ratio: 1; margin: 12px auto 0; border-radius: 30px;
  background: radial-gradient(circle at 50% 50%, var(--banc-fort), var(--banc) 72%); box-shadow: inset 0 0 0 1.5px var(--carte-bord); }
.ar-scene.secoue { animation: tremble .4s ease both; }
.ar-toile { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ar-fleche { fill: none; stroke-width: 1.15; stroke-linecap: round; }
.ar-fleche.juste { stroke: var(--or); }
.ar-fleche.pose { filter: drop-shadow(0 0 1.2px var(--or)); }
.ar-fleche.faux { stroke: var(--faux); }
.ar-fleche.revele { stroke: var(--texte-2); opacity: .8; }
.ar-fleche.brise { opacity: 0; transition: opacity .4s; }
.ar-pointe { fill: var(--or); }
.ar-pointe.faux { fill: var(--faux); }
.ar-scene.acheve .ar-fleche { animation: ar-allume 1.1s ease-in-out 2; }
@keyframes ar-allume { 50% { stroke-width: 1.9; filter: drop-shadow(0 0 2.4px var(--or)); } }
.ar-organe { position: absolute; z-index: 2; transform: translate(-50%, -50%); min-width: 70px; max-width: 108px; padding: 9px 10px; border: 0; border-radius: 16px;
  font: 700 13px/1.12 var(--ui); background: var(--papier-1); color: var(--papier-texte); box-shadow: 0 6px 16px var(--ombre), inset 0 0 0 1.5px var(--papier-bord);
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s, background .2s; animation: ar-entre .4s cubic-bezier(.3, 1.4, .5, 1) both; }
.ar-organe:nth-child(4) { animation-delay: .05s; } .ar-organe:nth-child(5) { animation-delay: .1s; } .ar-organe:nth-child(6) { animation-delay: .15s; } .ar-organe:nth-child(7) { animation-delay: .2s; }
@keyframes ar-entre { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.ar-organe.source { background: var(--or); color: var(--or-texte); transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 5px color-mix(in srgb, var(--or) 35%, transparent), 0 8px 20px var(--ombre); }
.ar-organe.cible-possible { animation: ar-pouls 1.4s ease-in-out infinite; }
.ar-organe.touche { box-shadow: 0 0 0 3px var(--trait), 0 8px 20px var(--ombre); }
@keyframes ar-pouls { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--trait) 35%, transparent), 0 6px 16px var(--ombre); } }
.ar-scene.fige .ar-organe { pointer-events: none; }
.ar-etiquettes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ar-verbe { position: absolute; transform: translate(-50%, -50%); padding: 3px 8px; border-radius: 999px; white-space: nowrap; font: 700 11px var(--ui);
  background: var(--encre); color: var(--or); box-shadow: inset 0 0 0 1px var(--or); animation: ar-apparait .3s .3s both; }
.ar-verbe.faux { color: var(--faux); box-shadow: inset 0 0 0 1px var(--faux); }
.ar-verbe.revele { color: var(--texte-2); box-shadow: inset 0 0 0 1px var(--texte-2); }
.ar-verbe.brise { opacity: 0; transition: opacity .4s; }
@keyframes ar-apparait { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.ar-note { min-height: 46px; margin: 12px 2px 0; font: 15px/1.35 var(--ui); color: var(--texte-2); }
.ar-note.juste { color: var(--texte); }
.ar-note.faux { color: var(--faux); }
.ar-menu { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + var(--bas-sur)); max-width: 460px; margin: 0 auto; padding: 14px;
  border-radius: 24px; background: var(--banc); box-shadow: 0 -10px 40px var(--ombre), inset 0 0 0 1.5px var(--carte-bord); animation: ar-monte .26s cubic-bezier(.3, 1.2, .5, 1); }
.ar-menu[hidden] { display: none; }
@keyframes ar-monte { from { transform: translateY(30px); opacity: 0; } }
.ar-menu-titre { margin: 0 0 10px; text-align: center; font: 700 14px var(--ui); color: var(--texte-2); }
.ar-menu-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ar-choix { min-height: 48px; padding: 10px 8px; border: 0; border-radius: 14px; font: 700 15px/1.15 var(--ui); background: var(--banc-fort); color: var(--texte); transition: transform .12s; }
.ar-choix:active { transform: scale(.96); background: var(--or); color: var(--or-texte); }
.ar-menu .bouton-lien { display: block; margin: 10px auto 0; }
.ar-recap { margin: 0; padding-left: 18px; }
.ar-recap li { margin-bottom: 8px; font-size: 16px; line-height: 1.3; }
.ar-recap b { display: block; }

/* Le nuancier : un jeton de papier, une bande en dégradé, des épingles qui s'y plantent. */
.ecran.nuancier { display: flex; flex-direction: column; }
.nu-axe { display: flex; justify-content: space-between; margin-top: 6px; font: 600 12px var(--ui); color: var(--texte-2); }
.nu-pile { min-height: 168px; display: grid; place-items: center; margin: 12px 0 6px; }
.nu-jeton { width: 100%; max-width: 300px; padding: 20px 18px; box-sizing: border-box; border-radius: 20px; text-align: center; cursor: grab; touch-action: none;
  background: var(--papier-1); color: var(--papier-texte); box-shadow: 0 12px 28px var(--ombre), inset 0 0 0 1.5px var(--papier-bord);
  transition: transform .25s cubic-bezier(.3, 1.3, .5, 1); animation: nu-arrive .38s cubic-bezier(.3, 1.3, .5, 1); }
.nu-jeton p { margin: 0; font: 19px/1.3 var(--corps); }
.nu-jeton.tenue { cursor: grabbing; transition: none; box-shadow: 0 20px 40px var(--ombre), inset 0 0 0 2px var(--or); }
@keyframes nu-arrive { from { transform: translateY(-24px) scale(.9); opacity: 0; } }
.nu-cadre { position: relative; padding-top: 48px; }
.nu-bande { display: grid; grid-template-columns: repeat(4, 1fr); height: 96px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(90deg, #2F4FD0 0%, #6A55D2 33%, #B24E9E 66%, #E8902E 100%); box-shadow: 0 10px 24px var(--ombre); }
[data-theme='pastel'] .nu-bande { background: linear-gradient(90deg, #6F86F0 0%, #9A82E8 33%, #D47AB4 66%, #F2AE5C 100%); }
[data-theme='rose'] .nu-bande { background: linear-gradient(90deg, #9C3F63 0%, #C2508A 33%, #E9557F 66%, #EDB49C 100%); }
.nu-zone { display: grid; place-items: end center; padding: 8px 4px 10px; border: 0; border-right: 1px solid rgba(255, 255, 255, .28); background: transparent;
  color: #fff; font: 700 13px/1.15 var(--ui); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: background .2s, box-shadow .2s; }
.nu-zone:last-child { border-right: 0; }
.nu-zone.vise { background: rgba(255, 255, 255, .24); }
.nu-zone.indique { background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 3px #fff; }
.nu-epingles { position: absolute; left: 0; right: 0; top: 0; height: 48px; pointer-events: none; }
.nu-epingle { position: absolute; left: calc(var(--x) + var(--r) * 18px - 18px); bottom: 4px; transform: translateX(-50%); animation: nu-plante .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.nu-epingle i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 3px var(--encre), 0 4px 8px var(--ombre); }
.nu-epingle i::after { content: ''; position: absolute; left: 7px; top: 16px; width: 2px; height: 12px; background: currentColor; color: var(--texte-2); }
.nu-epingle.proche i { background: var(--orange-2); }
.nu-epingle.faux i { background: var(--faux); }
@keyframes nu-plante { from { transform: translate(-50%, -40px); opacity: 0; } }
.nu-consigne { min-height: 64px; margin: 14px 2px 0; padding-left: 12px; border-left: 3px solid transparent; font: 15px/1.35 var(--ui); color: var(--texte-2); }
.nu-consigne.juste { border-color: var(--juste); color: var(--texte); }
.nu-consigne.proche { border-color: var(--orange-2); color: var(--texte); }
.nu-consigne.faux { border-color: var(--faux); color: var(--texte); }

/* La plume : un article sur papier, des mots qui s'écrivent à l'encre, un sceau de cire. */
.ecran.plume { display: flex; flex-direction: column; }
.pl-feuille { position: relative; margin-top: 10px; padding: 20px 20px 34px; border-radius: 8px 8px 22px 22px;
  background: var(--papier-1);
  color: var(--papier-texte); box-shadow: 0 14px 30px var(--ombre), inset 0 0 0 1.5px var(--papier-bord); animation: nu-arrive .4s cubic-bezier(.3, 1.3, .5, 1); }
.pl-ref { margin: 0 0 8px; font: 700 12px var(--ui); letter-spacing: .02em; opacity: .62; }
.pl-texte { margin: 0; font: 20px/1.55 var(--corps); }
.pl-trou { display: inline-block; min-width: 86px; height: 1.15em; margin: 0 2px; vertical-align: -.2em; border-bottom: 2px dashed currentColor; opacity: .4; }
.pl-trou.cible { opacity: 1; border-bottom-color: var(--or-3); animation: pl-cligne 1.2s ease-in-out infinite; }
@keyframes pl-cligne { 50% { border-bottom-color: transparent; } }
.pl-trou .pl-encre { display: none; }
.pl-trou.ecrit { min-width: 0; height: auto; opacity: 1; border-bottom: 2px solid var(--or-3); animation: none; }
.pl-trou.ecrit .pl-encre { display: inline; font-style: italic; font-weight: 600; animation: pl-ecrit .5s ease-out both; }
@keyframes pl-ecrit { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.pl-cachet { position: absolute; right: 14px; bottom: -26px; width: 82px; height: 82px; box-sizing: border-box; padding: 10px; border-radius: 50%; display: grid; place-items: center;
  text-align: center; font: 800 12px/1.1 var(--ui); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  background: radial-gradient(circle at 35% 30%, var(--cire-1), var(--cire-2) 55%, var(--cire-3)); box-shadow: 0 6px 14px var(--ombre), inset 0 -4px 8px rgba(0, 0, 0, .25);
  opacity: 0; transform: scale(2.4) rotate(-14deg); pointer-events: none; }
.pl-cachet.pose { animation: pl-scelle .45s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes pl-scelle { to { opacity: 1; transform: scale(1) rotate(-14deg); } }
.pl-consigne { min-height: 22px; margin: 36px 2px 0; text-align: center; font: 15px/1.35 var(--ui); color: var(--texte-2); }
.pl-tuiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 14px; padding-bottom: 16px; }
.pl-tuile { min-height: 48px; padding: 10px 18px; border: 0; border-radius: 14px; font: italic 600 18px var(--corps); background: var(--banc-fort); color: var(--texte);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .22); animation: pl-tombe .35s cubic-bezier(.3, 1.4, .5, 1) both; transition: transform .12s; }
.pl-tuile:nth-child(2) { animation-delay: .05s; } .pl-tuile:nth-child(3) { animation-delay: .1s; }
.pl-tuile:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); }
.pl-tuile.faux { background: var(--faux-fond); color: var(--faux); box-shadow: inset 0 0 0 1.5px var(--faux); animation: tremble .4s ease both; }
.pl-tuile.juste { background: var(--or); color: var(--or-texte); }
@keyframes pl-tombe { from { transform: translateY(-14px); opacity: 0; } }
.pl-sceaux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 340px; }
.pl-sceau { justify-self: center; width: 100%; max-width: 140px; aspect-ratio: 1; padding: 14px; border: 0; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px/1.15 var(--ui); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  background: radial-gradient(circle at 35% 30%, var(--cire-1), var(--cire-2) 55%, var(--cire-3));
  box-shadow: 0 6px 14px var(--ombre), inset 0 -5px 10px rgba(0, 0, 0, .25), inset 0 3px 6px rgba(255, 255, 255, .25);
  animation: pl-tombe .4s cubic-bezier(.3, 1.4, .5, 1) both; transition: transform .15s, filter .3s, opacity .3s; }
.pl-sceau:nth-child(2) { animation-delay: .06s; } .pl-sceau:nth-child(3) { animation-delay: .12s; } .pl-sceau:nth-child(4) { animation-delay: .18s; }
.pl-sceau:active:not(:disabled) { transform: scale(.94) rotate(-4deg); }
.pl-sceau.juste { box-shadow: 0 0 0 4px var(--juste), 0 6px 14px var(--ombre); }
.pl-sceau.faux { filter: grayscale(.7); opacity: .55; }
.pl-sceau:disabled:not(.juste):not(.faux) { opacity: .4; }
.pl-cite { margin: 0; font: 18px/1.5 var(--corps); }
.pl-cite b { color: var(--titre-or); }
.ar-scene.fige { width: min(100%, 340px, 36vh); }

/* L'ATELIER DU CAS PRATIQUE : un dossier, un rail d'étapes, des engrenages, une copie corrigée en rouge. */
.role-ligne[data-mode='atelier'] { --m1: #B5462E; --m2: #B5462E; }
[data-theme='pastel'] .role-ligne[data-mode='atelier'] { --m1: #D9674C; --m2: #D9674C; }
.at-niveau { display: grid; gap: 2px; text-align: left; }
.at-niveau small { font-weight: 500; opacity: .8; }
.ecran.atelier { display: flex; flex-direction: column; }
.at-rail { display: flex; gap: 4px; margin: 8px 0 4px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.at-rail li { flex: none; padding: 5px 10px; border-radius: 999px; font: 600 12px var(--ui); color: var(--texte-2); background: var(--banc); white-space: nowrap; }
.at-rail li.fait { color: var(--juste); background: var(--juste-fond); }
.at-rail li.courant { color: var(--or-texte); background: var(--or); }
.at-consigne { margin: 6px 0 10px; font: 15px/1.35 var(--ui); color: var(--texte-2); }
.at-dossier, .at-copie { padding: 18px; border-radius: 18px; background: var(--papier-1); color: var(--papier-texte); box-shadow: 0 10px 26px var(--ombre), inset 0 0 0 1.5px var(--papier-bord); }
.at-dossier p { margin: 0; font: 18px/1.6 var(--corps); }
.at-dossier .at-question, .at-question { margin-top: 12px; font: italic 600 17px/1.4 var(--corps); }
.at-seg { padding: 1px 0; border-radius: 3px; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .2s; }
.at-seg.surligne { background: linear-gradient(transparent 40%, color-mix(in srgb, var(--or) 70%, transparent) 40%, color-mix(in srgb, var(--or) 70%, transparent) 92%, transparent 92%); }
.at-seg.oublie { outline: 2px dashed var(--juste); outline-offset: 1px; }
.at-seg.bruit { text-decoration: line-through; text-decoration-color: var(--sceau); text-decoration-thickness: 2px; }
.at-note { margin: 10px 2px 0; padding-left: 12px; border-left: 3px solid var(--carte-bord); font: 15px/1.4 var(--ui); color: var(--texte); }
.at-note.juste { border-color: var(--juste); }
.at-note.faux { border-color: var(--faux); }
.at-note:empty { display: none; }
.at-fait { margin: 6px 0; padding: 14px 16px; border-radius: 14px; background: var(--papier-1); color: var(--papier-texte); font: 18px/1.45 var(--corps); box-shadow: inset 4px 0 0 var(--or); }
.at-options { margin-top: 6px; }
.at-ref { display: block; margin-top: 4px; font: 700 12px var(--ui); color: var(--texte-2); }
.at-plan { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.at-plan li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; min-height: 54px; padding: 8px 10px; border-radius: 14px; background: var(--banc); box-shadow: inset 0 0 0 1.5px var(--carte-bord); }
.at-plan li.cible { box-shadow: inset 0 0 0 2px var(--or); }
.at-plan li > b { font: 800 18px var(--corps); color: var(--titre-or); }
.at-plan li > span { font: 14px var(--ui); color: var(--texte-2); align-self: center; }
.at-plan li.juste { box-shadow: inset 0 0 0 2px var(--juste); background: var(--juste-fond); }
.at-plan li.faux { box-shadow: inset 0 0 0 2px var(--faux); background: var(--faux-fond); }
.at-plan li.juste > span, .at-plan li.faux > span { color: var(--texte); font: 16px/1.35 var(--corps); }
.at-plan li small { grid-column: 2; font: 13px/1.35 var(--ui); color: var(--texte-2); }
.at-pile { display: grid; gap: 8px; padding-bottom: 110px; }
.at-carte-p { width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; text-align: left; font: 16px/1.35 var(--corps); background: var(--banc-fort); color: var(--texte); animation: pl-tombe .3s both; }
.at-plan .at-carte-p { padding: 0; background: none; font: 16px/1.35 var(--corps); }
.at-rappel { margin: 4px 0 10px; border-radius: 12px; background: var(--banc); padding: 8px 12px; }
.at-rappel summary { font: 600 14px var(--ui); color: var(--texte-2); cursor: pointer; }
.at-rappel p { margin: 8px 0 0; font: 16px/1.45 var(--corps); }
.at-acquis { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--juste-fond); font: 15px/1.4 var(--ui); animation: nu-arrive .4s both; }
.at-regle { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--banc); font: 16px/1.45 var(--corps); box-shadow: inset 4px 0 0 var(--titre-or); }
.at-machine { padding: 12px; border-radius: 18px; background: var(--banc); box-shadow: inset 0 0 0 1.5px var(--carte-bord); }
.at-conds { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.at-cond { display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--banc-fort); transition: box-shadow .25s, background .25s; }
.at-cond-t { font: 600 15px/1.3 var(--ui); }
.at-prise { grid-column: 2; font: italic 15px/1.3 var(--corps); color: var(--texte-2); }
.at-cond.cible { box-shadow: inset 0 0 0 2px var(--or); }
.at-cond.remplie .at-prise, .at-cond.acquise .at-prise { color: var(--texte); }
.at-cond.faux { box-shadow: inset 0 0 0 2px var(--faux); }
.at-cond.juste { box-shadow: inset 0 0 0 2px var(--juste); }
.at-engrenage { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, var(--banc) 28%, transparent 30%), repeating-conic-gradient(var(--texte-2) 0 15deg, transparent 15deg 30deg); opacity: .5; }
.at-cond.remplie .at-engrenage, .at-cond.acquise .at-engrenage { background: radial-gradient(circle, var(--banc-fort) 28%, transparent 30%), repeating-conic-gradient(var(--or) 0 15deg, transparent 15deg 30deg); opacity: 1; animation: at-tourne 2.4s linear infinite; }
.at-cond.bloquee .at-engrenage { background: radial-gradient(circle, var(--banc-fort) 28%, transparent 30%), repeating-conic-gradient(var(--faux) 0 15deg, transparent 15deg 30deg); opacity: 1; }
.at-cond.doute .at-engrenage { background: radial-gradient(circle, var(--banc-fort) 28%, transparent 30%), repeating-conic-gradient(var(--orange-2) 0 15deg, transparent 15deg 30deg); opacity: 1; animation: at-tourne 2.4s linear infinite alternate; }
@keyframes at-tourne { to { transform: rotate(360deg); } }
.at-sortie { margin: 12px 2px 0; font: 700 15px/1.35 var(--ui); color: var(--texte-2); }
.at-machine.tourne .at-sortie { color: var(--juste); }
.at-machine.cale .at-sortie { color: var(--faux); }
.at-machine.hesite .at-sortie { color: var(--orange-2); }
.at-plateau { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-bottom: 16px; }
.at-jeton { padding: 10px 14px; border: 0; border-radius: 12px; font: 600 14px/1.25 var(--ui); text-align: left; background: var(--papier-1); color: var(--papier-texte); box-shadow: 0 3px 0 rgba(0, 0, 0, .2), inset 0 0 0 1.5px var(--papier-bord); animation: pl-tombe .3s both; }
.at-jeton.special { background: var(--banc-fort); color: var(--texte); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.at-jeton:active { transform: translateY(2px); }
.at-branches { display: grid; gap: 10px; }
.at-branche { padding: 12px 14px; border-radius: 14px; background: var(--banc); box-shadow: inset 4px 0 0 var(--orange-2); }
.at-branche b { font: 700 13px var(--ui); color: var(--texte-2); }
.at-branche p { margin: 4px 0 0; font: 16px/1.45 var(--corps); }
.at-bareme { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.at-bareme div { padding: 10px 12px; border-radius: 12px; background: var(--banc); }
.at-bareme div.plein { background: var(--juste-fond); }
.at-bareme dt { font: 600 12px var(--ui); color: var(--texte-2); }
.at-bareme dd { margin: 2px 0 0; font: 700 17px var(--ui); font-variant-numeric: tabular-nums; }
.at-copie { margin-bottom: 18px; font: 16px/1.5 var(--corps); }
.at-copie h3 { margin: 14px 0 6px; font: 700 15px/1.3 var(--ui); }
.at-copie h3:first-child { margin-top: 0; }
.at-copie ul, .at-copie ol { margin: 0; padding-left: 18px; }
.at-copie p { margin: 6px 0; }
.at-rouge { color: #C2264F; text-decoration-thickness: 2px; }
.at-correction { color: #C2264F; font-style: italic; }

/* Administration : le parcours des testeurs. */
.entonnoir { display: grid; gap: 8px; margin: 8px 0 14px; }
.entonnoir li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; font-size: 16px; }
.entonnoir li b { font-family: var(--ui); font-variant-numeric: tabular-nums; }
.entonnoir li small { color: var(--texte-2); font-weight: 400; }
.entonnoir li i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--banc-fort); position: relative; overflow: hidden; }
.entonnoir li i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--or); border-radius: 3px; }
.admin-suivi h3 { margin-top: 10px; }
.parcours-liste { display: grid; gap: 6px; font-size: 15px; max-height: 50vh; overflow: auto; padding-left: 18px; }
.parcours-liste small { color: var(--texte-2); }
.decouverte-suite { display: grid; gap: 10px; margin: 6px 0 4px; text-align: center; }
.decouverte-suite p { color: var(--texte-2); font-size: 17px; }

/* Le tri en L2 : des bords plus longs (chambres, familles), écrits à la verticale sur les côtés. */
.tri-l2 .tri-bord { font-size: 13px; padding: 8px 12px; max-width: calc(100% - 24px); line-height: 1.2; text-align: center; }
.tri-l2 .tri-gauche, .tri-l2 .tri-droite { writing-mode: vertical-rl; max-height: calc(100% - 120px); max-width: none; margin: 0; padding: 12px 8px; }
.tri-l2 .tri-gauche { left: 6px; transform: translateY(-50%) rotate(180deg); }
.tri-l2 .tri-droite { right: 6px; transform: translateY(-50%); }
.tri-l2 .tri-pile { inset: 60px 50px; }
.tri-sur { display: block; margin-bottom: 6px; color: var(--papier-texte); opacity: .7; font: 600 13px var(--ui); }
.tri-l2 .tri-carte p { font-size: 18px; }

/* Le grand rangement en L2 : articles et arrêts, colonnes aux noms du cours. */
.rg-l2 .rg-piece { max-width: 78%; font-size: 16px; line-height: 1.2; }
.rg-l2 .rg-piece small { display: block; margin-top: 3px; font: 600 11px var(--ui); opacity: .8; }
.rg-l2 .rg-nom { font-size: 11.5px; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
.rg-l2 .rg-bloc { font-size: 10.5px; }