/* =====================================================================
   FV Maths — l'appli (prototype) : look « Arène nuit-or » du site
   (mêmes teintes que css/express-mages.css), Georgia pour les titres.
   Le THÈME choisi par l'élève fournit le fond (body[data-allow-theme] :
   décor seulement, jamais la couleur du texte — css/themes.css).
   ===================================================================== */
:root{
  color-scheme: dark;
  --nuit:#140f24; --nuit-2:#1d1633; --nuit-3:#2a2147;
  --or:#d9a521; --or-vif:#ffd552; --or-clair:#ffe08a; --titre-c:#ffd970;
  --encre:#f6ecd6; --encre-douce:#cdbb98;
  --carte:rgba(23,17,33,.88); --carte-2:rgba(36,27,56,.9);
  --trait:rgba(255,214,120,.24);
  --ok:#5fd38a; --ko:#ff9a8a; --bleu:#7fb4ff;
  --parchemin:#f6ead0; --parchemin-encre:#3b2708;
  --titre:Georgia,"Times New Roman",serif;
  --texte:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --barre-h:64px;
  --gouttiere:max(16px, env(safe-area-inset-left, 0px));
}
*{ box-sizing:border-box; }
html, body{ margin:0; height:100%; }
body.ap-body{
  background:radial-gradient(120% 70% at 50% -10%, #2b1f52 0%, var(--nuit) 62%) fixed, var(--nuit);
  color:var(--encre); font:15px/1.5 var(--texte); overflow:hidden;
  -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%;
}
/* le thème de l'élève : son calque reste DERRIÈRE l'appli */
body.ap-body[class*="theme-"]::before, body.ap-body[class*="theme-"]::after, body.ap-body > #fv-theme-svg{ z-index:0 !important; }
html.fv-dys body.ap-body{ font-family:inherit; }
button, input, select{ font:inherit; color:inherit; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--or-vif); outline-offset:2px; }
.ap-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; }
[hidden]{ display:none !important; }

/* ── coquille ── */
.ap{ position:fixed; inset:0; z-index:1; }
.ap-vues{ position:absolute; inset:0 0 calc(var(--barre-h) + env(safe-area-inset-bottom)) 0; overflow:hidden; }
.ap-vue{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:calc(10px + env(safe-area-inset-top)) var(--gouttiere) 28px;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .28s; scrollbar-width:thin; }
.ap-vue[data-pos="g"]{ transform:translateX(-28%); opacity:0; pointer-events:none; visibility:hidden; transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .28s, visibility 0s .32s; }
.ap-vue[data-pos="d"]{ transform:translateX(28%); opacity:0; pointer-events:none; visibility:hidden; transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .28s, visibility 0s .32s; }
.ap-vue[data-pos="c"]{ transform:none; opacity:1; }
.ap-vue.sans-anim{ transition:none !important; }
.ap-col{ max-width:1100px; margin:0 auto; }
@media (prefers-reduced-motion:reduce){ .ap-vue, .ap-feuille, .ap-voile{ transition:none !important; } }

.ap-barre{ position:absolute; left:0; right:0; bottom:0; z-index:50; height:calc(var(--barre-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  display:grid; grid-template-columns:repeat(5,1fr); background:rgba(20,15,36,.95); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--trait); box-shadow:0 -6px 20px rgba(0,0,0,.3); }
.ap-barre button{ all:unset; cursor:pointer; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font:700 .68rem/1.1 var(--texte); color:#b9aed3; text-align:center; touch-action:manipulation; }
.ap-barre img{ width:30px; height:30px; object-fit:contain; filter:grayscale(.55) brightness(.85); transition:transform .15s, filter .15s; }
.ap-barre button.on{ color:var(--or-clair); }
/* (31/10/2026) couleur d'accent = palette « prestige » choisie (js : accentPalette) ; sans palette, l'or de l'Arène */
html[style*="--acc1"] .ap-btn-or, html[style*="--acc1"] .ap-btn-mini, html[style*="--acc1"] .ap-action .go, html[style*="--acc1"] .fv-event-banner .eb-btn{ background:linear-gradient(180deg, var(--acc2), var(--acc1)) !important; color:var(--acc-txt) !important; text-shadow:none; box-shadow:0 3px 0 color-mix(in srgb, var(--acc1) 60%, #000) !important; }
html[style*="--acc1"] .ap-barre button.on{ color:color-mix(in srgb, var(--acc2) 70%, #fff); }
html[style*="--acc1"] .ap-barre button.on::after{ content:""; position:absolute; left:28%; right:28%; bottom:4px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--acc1), var(--acc2)); }
html[style*="--acc1"] .ap-jauge i{ background:linear-gradient(90deg, var(--acc1), var(--acc2)); }
html[style*="--acc1"] .ap-heros{ border-color:color-mix(in srgb, var(--acc1) 70%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--acc2) 25%, transparent), 0 10px 30px color-mix(in srgb, var(--acc1) 18%, transparent); }
.ap-barre button.on img{ filter:none; transform:translateY(-2px) scale(1.08); }
.ap-barre button:focus-visible{ outline:2px solid var(--or-vif); outline-offset:-4px; border-radius:12px; }
.ap-pastille{ position:absolute; top:5px; left:calc(50% + 7px); min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#e8493f; color:#fff; font:800 .64rem/18px var(--texte); text-align:center; box-shadow:0 0 0 2px var(--nuit); }
.ap-pastille-in{ display:inline-block; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#e8493f; color:#fff; font:800 .62rem/17px var(--texte); text-align:center; vertical-align:1px; }

/* ── typographie, briques ── */
.ap-t-vue{ font:700 1.4rem/1.2 var(--titre); color:var(--titre-c); margin:4px 0 12px; }
.ap-h3{ font:700 1.02rem/1.2 var(--titre); color:var(--or-clair); margin:16px 0 6px; display:flex; align-items:baseline; gap:8px; }
.ap-etiq{ font:700 .7rem/1.2 var(--texte); letter-spacing:.08em; text-transform:uppercase; color:var(--encre-douce); }
.ap-sous-t{ display:block; font:700 .72rem/1.2 var(--texte); letter-spacing:.06em; text-transform:uppercase; color:var(--encre-douce); margin:12px 0 6px; }
.ap-petit{ font-size:.8rem; color:var(--encre-douce); }
.ap-lien{ all:unset; cursor:pointer; color:var(--or-clair); font-weight:800; font-size:.84rem; white-space:nowrap; }
.ap-bloc{ display:block; text-align:center; margin-top:12px; }
.ap-ok{ color:var(--ok); font-weight:800; font-size:.8rem; white-space:nowrap; }
.ap-jebloque{ display:flex; gap:10px; align-items:center; margin:0 0 10px; padding:10px 12px; border-radius:14px; text-decoration:none; color:var(--encre, #f3ecff); background:var(--carte-2); border:1px solid var(--or); line-height:1.35; font-size:.9rem; }
.ap-jebloque b{ color:var(--or-clair); }
.ap-jebloque small{ display:block; opacity:.75; font-size:.78rem; margin-top:2px; }
.ap-jebloque-i{ font-size:1.5rem; }
.ap-attente, .ap-vide{ text-align:center; color:var(--encre-douce); padding:26px 8px; margin:0; }
.ap-btn-or{ display:inline-block; cursor:pointer; text-align:center; text-decoration:none; border:0; background:linear-gradient(180deg,#ffd96a,#f0b93a); color:#2b1b08 !important;
  font-weight:800; border-radius:14px; padding:11px 18px; box-shadow:0 3px 0 #9a6a12; }
.ap-btn-or:active{ transform:translateY(2px); box-shadow:0 1px 0 #9a6a12; }
.ap-btn-or.ap-bloc{ display:block; }
.ap-btn-or[disabled]{ opacity:.5; cursor:not-allowed; }
.ap-btn-mini{ display:inline-block; cursor:pointer; text-decoration:none; border:0; background:linear-gradient(180deg,#ffd96a,#f0b93a); color:#2b1b08 !important;
  font:800 .76rem/1.1 var(--texte); border-radius:10px; padding:8px 11px; white-space:nowrap; box-shadow:0 2px 0 #9a6a12; }
.ap-btn-mini[disabled]{ opacity:.5; }
.ap-jauge{ display:block; height:6px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:5px; }
.ap-jauge i{ display:block; height:100%; background:linear-gradient(90deg,var(--or),#ff9f43); border-radius:3px; }
.ap-x{ position:absolute; top:8px; right:8px; all:unset; cursor:pointer; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:var(--encre-douce); }
.ap-x{ position:absolute; top:6px; right:6px; }
.ap-x:hover{ background:rgba(255,255,255,.08); }
.ap-pile{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.ap-carte{ position:relative; display:block; text-decoration:none; background:var(--carte); border:1px solid var(--trait); border-radius:18px; padding:14px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.ap-ligne-t{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.ap-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ap-duo:not(:has(> :not([hidden]):not(.ap-masque))){ display:none; }
/* 🏠 Mon accueil : bloc masqué par l'élève (Réglages) ; dans un duo, l'autre bloc prend toute la largeur */
.ap-masque{ display:none !important; }
/* moins de 2 blocs visibles dans le duo (cachés par le code ou masqués par l'élève) : le bloc restant prend toute la largeur */
.ap-duo:not(:has(> .ap-petite:not([hidden]):not(.ap-masque) ~ .ap-petite:not([hidden]):not(.ap-masque))) > .ap-petite{ grid-column:1/-1; }
.ap-petite{ position:relative; display:grid; align-content:start; gap:3px; text-decoration:none; padding:12px; border-radius:18px; background:var(--carte); border:1px solid var(--trait); min-width:0; }
.ap-petite b{ font:700 1rem/1.2 var(--titre); color:var(--encre); }
.ap-petite .ap-lien{ margin-top:4px; }
.ap-petite.ap-a-faire{ border-color:rgba(255,213,82,.7); box-shadow:0 0 0 1px rgba(255,213,82,.35), 0 6px 18px rgba(0,0,0,.25); }
.ap-petite.ap-fait{ border-color:rgba(95,211,138,.55); }
.ap-petite.ap-a-reviser{ border-color:rgba(255,196,77,.85); box-shadow:0 0 0 2px rgba(255,196,77,.35); }   /* 02/11/2026 : révisions du jour */
.ap-duo > .ap-petite:only-child{ grid-column:1/-1; }

/* ── barre du haut ── */
.ap-haut{ display:flex; justify-content:space-between; align-items:center; margin:0 0 10px; }
.ap-logo{ font:700 1.1rem/1 var(--titre); color:var(--encre-douce); letter-spacing:.04em; }
.ap-logo b{ color:var(--or-clair); }
.ap-logo small, .ap-logo .ap-version{ margin-left:8px; font:700 .66rem/1 var(--texte); color:var(--encre-douce); opacity:.8; letter-spacing:0; text-decoration:none; }
/* (01/11/2026) le numéro de version mène aux nouveautés (maj.html) */
.ap-logo .ap-version{ display:inline-block; padding:4px 7px; margin-left:4px; border-radius:8px; border:1px solid transparent; cursor:pointer; }
.ap-logo .ap-version:hover, .ap-logo .ap-version:focus-visible{ opacity:1; color:var(--or-clair); border-color:var(--trait); }
.ap-cloche{ all:unset; cursor:pointer; position:relative; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(0,0,0,.32); border:1px solid var(--trait); font-size:1.05rem; }
.ap-cloche .ap-pastille{ left:auto; right:-5px; top:-5px; }
.ap-haut-btns{ display:flex; gap:8px; }
.ap-format-pc .ap-reglages-mob{ display:none; }   /* sur ordinateur, ⚙️ est dans le coin haut-droit */

/* ── héros ── */
.ap-heros{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px 12px; align-items:center; padding:14px 12px 12px; border-radius:22px; margin-bottom:12px;
  --r1:#c08a4e; --r2:#7a4a22;
  background:linear-gradient(180deg, rgba(255,214,120,.10), rgba(18,13,26,.82)); border:1px solid color-mix(in srgb, var(--r1) 70%, transparent);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--r2) 40%, transparent); }
.ap-heros[data-rang="argent"]{ --r1:#cfd8e3; --r2:#7d8a99; }
.ap-heros[data-rang="or"]{ --r1:#f4cd78; --r2:#96621f; }
.ap-heros[data-rang="diamant"]{ --r1:#8fe3ff; --r2:#2a7fb0; }
.ap-heros.ap-mode-palette{ border-color:var(--pal1); background:linear-gradient(160deg, color-mix(in srgb, var(--pal1) 26%, rgba(18,13,26,.85)), color-mix(in srgb, var(--pal2) 18%, rgba(18,13,26,.9))); }
.ap-av{ all:unset; cursor:pointer; position:relative; width:78px; height:78px; border-radius:24%; background:radial-gradient(circle at 50% 40%, rgba(255,230,170,.25), rgba(10,6,16,.7) 70%); }
.ap-av-in{ display:block; width:100%; height:100%; border-radius:22%; overflow:hidden; }
.ap-av .ap-ico, .ap-av .ap-ico[class*="avatar-"]{ --sz:78px !important; width:78px; height:78px; display:block; margin:0 !important; border-radius:22%; }
.ap-ico-vide{ width:100%; height:100%; object-fit:contain; padding:10px; opacity:.85; }
.ap-cadre-simple{ position:absolute; inset:-4px; border-radius:26%; border:3px solid #e0b457; box-shadow:0 0 10px rgba(246,226,122,.45); pointer-events:none; }
.ap-fam{ position:absolute; left:70px; top:66px; width:42px; height:42px; z-index:4; cursor:pointer; filter:drop-shadow(0 3px 3px rgba(0,0,0,.7)); animation:ap-flotte 2.6s ease-in-out infinite; }
.ap-fam picture, .ap-fam img, .ap-fam [data-fam-sprite]{ width:100%; height:100%; object-fit:contain; display:block; }
.ap-fam .fv-fam-sprite-fallback{ font-size:28px; line-height:42px; }
@keyframes ap-flotte{ 50%{ transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce){ .ap-fam{ animation:none; } }
.ap-bulle-fam{ position:absolute; left:96px; top:78px; z-index:6; max-width:calc(100% - 110px); background:var(--parchemin); color:var(--parchemin-encre); font:700 .76rem/1.3 var(--texte);
  padding:7px 10px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.45); cursor:pointer; }
.ap-id{ min-width:0; }
.ap-pseudo-l{ font:700 clamp(1.02rem, 5vw, 1.3rem)/1.15 var(--titre); color:var(--encre); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; padding:2px 0; }
.ap-pseudo-l .pseudo{ display:inline; }
.ap-titre{ margin-top:4px; max-width:220px; }
.ap-titre:empty{ display:none; }
.ap-titre .tb, .ap-titre .tbb, .ap-titre .tbm{ width:100% !important; max-width:220px; margin:0 !important; font-size:12px; }
.ap-blason{ all:unset; cursor:pointer; display:grid; justify-items:center; gap:2px; width:62px; text-align:center; }
.ap-blason .chip{ display:inline-flex; position:relative; overflow:visible; }
.ap-blason-l{ font:800 .66rem/1.15 var(--texte); color:var(--or-clair); letter-spacing:.02em; }
.ap-blason-vide{ font-size:2rem; line-height:54px; }
.ap-blason-choisir{ display:block; margin-top:-4px; padding:4px 6px; border-radius:10px; background:linear-gradient(180deg,#ffd96a,#f0b93a); color:#2b1b08; font:800 .68rem/1.15 var(--texte); box-shadow:0 2px 0 #9a6b12; animation:ap-choisir-pulse 1.6s ease-in-out infinite alternate; }
@keyframes ap-choisir-pulse{ from{ opacity:.8; } to{ opacity:1; } }
html.fv-anim-legeres .ap-blason-choisir{ animation:none; }
#ap-installer{ order:60; }   /* (03/11/2026) bandeau Installer en bas de l'accueil, après les blocs */
.ap-blason[data-vide="1"]{ width:76px; }
.ap-chiffres{ grid-column:1/-1; display:grid; grid-template-columns:1.35fr 1fr 1.15fr 1fr; gap:5px; margin-top:2px; }
.ap-chiffres > *{ all:unset; cursor:pointer; box-sizing:border-box; text-align:center; padding:6px 2px; border-radius:12px; background:rgba(0,0,0,.3); font-size:.74rem;   /* (03/11/2026) .64 → .74 : lisibilité (élèves dys) */ color:var(--encre-douce); min-width:0; }
.ap-chiffres b{ display:block; font:700 .86rem/1.2 var(--titre); color:var(--or-clair); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-ere{ grid-column:1/-1; display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center; text-decoration:none; padding:6px 8px; border-radius:12px; background:rgba(0,0,0,.22); }
.ap-ere:empty{ display:none; }
.ap-ere .badge-ico img{ width:40px; height:40px; object-fit:contain; }
.ap-ere-t{ display:grid; min-width:0; }
.ap-ere-t b{ font:700 .86rem/1.2 var(--titre); color:var(--encre); }

/* ── bandeaux ── */
.ap-bandeau{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:6px 10px; align-items:start; font-size:.84rem; border-radius:14px; padding:10px 34px 10px 12px; }
.ap-bandeau .ic{ font-size:1.25rem; line-height:1.2; }
.ap-bandeau .tx b{ color:#fff; }
.ap-bandeau-btns{ grid-column:2; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ap-invite{ background:linear-gradient(rgba(255,154,138,.12),rgba(255,154,138,.12)), var(--carte); border:1px solid rgba(255,154,138,.45); }
.ap-installer{ background:linear-gradient(rgba(255,213,82,.08),rgba(255,213,82,.08)), var(--carte); border:1px dashed var(--trait); }
/* bandeau « Tu es en quelle classe ? » (quotidien.js, recopié d'index.html : 3e visite, pause de 3 jours) */
.ap-niveau{ background:linear-gradient(rgba(122,184,255,.12),rgba(122,184,255,.12)), var(--carte); border:1px solid rgba(122,184,255,.45); }

/* ── cartes d'accueil ── */
.ap-bleue{ background:linear-gradient(135deg,rgba(40,70,120,.62),rgba(29,22,51,.9)); border-color:rgba(127,180,255,.5); display:grid; gap:2px; padding-right:40px; }
.ap-bleue b{ font:700 1rem/1.25 var(--titre); }
.ap-action{ all:unset; cursor:pointer; box-sizing:border-box; width:100%; display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid rgba(255,255,255,.07); text-decoration:none; }
.ap-action .ic{ font-size:1.2rem; text-align:center; }
.ap-action .tx{ font-weight:700; font-size:.88rem; min-width:0; }
.ap-action .tx small{ display:block; font-weight:500; font-size:.74rem; color:var(--encre-douce); margin-top:1px; }
.ap-action .go{ font:800 .76rem/1 var(--texte); color:#2b1b08; background:linear-gradient(180deg,#ffd96a,#f0b93a); padding:7px 9px; border-radius:10px; white-space:nowrap; }
.ap-action.urgent .go{ background:linear-gradient(180deg,#ff8a7a,#e8493f); color:#fff; }
.ap-reprendre{ display:grid; grid-template-columns:60px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border-radius:18px; text-decoration:none;
  border:1px solid rgba(255,213,82,.5); background:linear-gradient(135deg,#3a2a12,#2a1d3f); box-shadow:0 8px 22px rgba(0,0,0,.3); }
.ap-reprendre b{ display:block; font:700 1.02rem/1.2 var(--titre); }
.ap-ico-jeu{ width:44px; height:44px; flex:none; object-fit:contain; border-radius:12px; background:rgba(255,255,255,.05); display:grid; place-items:center; font-size:1.4rem; }
.ap-reprendre .ap-ico-jeu{ width:60px; height:60px; }
.ap-r-tx{ min-width:0; display:grid; gap:1px; }
.ap-reprendre .ap-btn-or{ padding:10px 14px; }
.ap-m-onglets{ display:flex; gap:6px; margin:4px 0 6px; overflow-x:auto; scrollbar-width:none; }
.ap-m-onglets::-webkit-scrollbar{ display:none; }
.ap-m-onglets button{ all:unset; cursor:pointer; flex:none; padding:5px 10px; border-radius:999px; font:700 .76rem/1.3 var(--texte); border:1px solid var(--trait); color:var(--encre-douce); white-space:nowrap; }
.ap-m-onglets button.on{ background:rgba(255,213,82,.18); border-color:var(--or-vif); color:var(--or-clair); }
.ap-mission{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:9px 0; border-top:1px solid rgba(255,255,255,.06); }
.ap-m-ic{ font-size:1.1rem; text-align:center; }
.ap-m-txt{ display:grid; min-width:0; }
.ap-m-txt b{ font-size:.86rem; line-height:1.25; }
.ap-m-droite{ text-align:right; font:700 .74rem/1.3 var(--texte); color:var(--or-clair); }
.ap-mission.fini b{ color:var(--ok); }
.ap-mission.pret{ background:linear-gradient(90deg, rgba(255,213,82,.08), transparent); }
.ap-rangee{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid rgba(255,255,255,.06); text-decoration:none; font-size:.86rem; }
.ap-r-ic{ font-size:1.2rem; text-align:center; }
.ap-guerre{ background:linear-gradient(135deg,rgba(16,32,61,.92),rgba(22,26,38,.92) 50%,rgba(51,18,31,.92)); border-color:#3a4566; }
.ap-g-tete{ display:flex; justify-content:space-between; align-items:center; gap:8px; text-decoration:none; }
.ap-g-barre{ display:flex; height:14px; border-radius:8px; overflow:hidden; border:1px solid #2a3142; background:#0c0e16; margin-top:10px; }
.ap-g-barre i:first-child{ background:linear-gradient(90deg,#2f6fff,#4c97ff); }
.ap-g-barre i:last-child{ background:linear-gradient(90deg,#e0457b,#ff6a98); margin-left:auto; }
.ap-g-camps{ display:flex; justify-content:space-between; font-size:.78rem; font-weight:700; margin-top:5px; }
.ap-g-camps span{ display:inline-flex; align-items:center; gap:5px; }
.ap-g-camps span:first-child{ color:#bcd8ff; } .ap-g-camps span:last-child{ color:#ffc0d6; }
.ap-g-camps img{ width:18px; height:18px; object-fit:contain; }
.ap-g-alerte{ display:grid; gap:2px; margin-top:10px; text-decoration:none; color:#ffd0db; background:linear-gradient(135deg,#2a1620,#1a1016); border:1px solid #7a3a4a; border-radius:12px; padding:10px 12px; font-size:.84rem; }
.ap-g-objs{ margin-top:10px; }
.ap-raid{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:12px; align-items:center; }
.ap-raid-img{ width:56px; height:56px; object-fit:contain; border-radius:12px; background:rgba(255,255,255,.05); display:grid; place-items:center; font-size:1.8rem; }
.ap-raid b{ font:700 1rem/1.2 var(--titre); }
.ap-jauge-boss i{ background:linear-gradient(90deg,#e8493f,#ff9f43); }
.ap-raid-annonce{ color:#ffd0a0; }
.ap-carrousel{ display:flex; gap:8px; overflow-x:auto; margin:0 calc(-1 * var(--gouttiere)); padding:2px var(--gouttiere) 6px; scrollbar-width:none; scroll-snap-type:x proximity; }
.ap-carrousel::-webkit-scrollbar{ display:none; }
.ap-rc{ all:unset; cursor:pointer; flex:0 0 116px; scroll-snap-align:start; display:grid; gap:4px; justify-items:start; align-content:start; padding:10px; border-radius:16px; background:var(--carte); border:1px solid var(--trait); font-size:.78rem; font-weight:700; line-height:1.25; }
.ap-rc span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ap-rc b{ color:var(--or-clair); font-size:.78rem; }
.ap-rc .ap-ico-jeu{ width:40px; height:40px; }
#ap-recents .ap-ligne-t{ margin:4px 0 6px; }

/* bannière de l'event (js/event-banniere.js, insérée après le <h1> caché) */
.ap-pile .fv-event-banner{ margin:0 !important; border-radius:18px !important; width:auto !important; max-width:none !important; }
.ap-pile .fv-event-banner .eb-in{ gap:8px 6px; padding:11px 12px; }
.ap-pile .fv-event-banner .eb-txt{ flex-basis:100%; }
.ap-pile .fv-event-banner h2{ font-size:1rem; }
.ap-pile .fv-event-banner .eb-btn{ padding:7px 10px; font-size:.8rem; }

/* ── exercices ── */
.ap-recherche-av{ display:block; text-align:right; margin:-4px 2px 10px; }
.ap-cherche{ display:flex; align-items:center; gap:8px; background:var(--nuit-3); border:1px solid var(--trait); border-radius:14px; padding:10px 12px; margin-bottom:10px; }
.ap-cherche input{ all:unset; flex:1; min-width:0; font-size:16px; }
.ap-cherche button{ all:unset; cursor:pointer; padding:0 4px; color:var(--encre-douce); }
.ap-seg{ display:grid; grid-template-columns:repeat(5,1fr); background:var(--carte); border:1px solid var(--trait); border-radius:12px; padding:3px; margin-bottom:10px; }
.ap-seg button{ all:unset; cursor:pointer; text-align:center; padding:7px 0; border-radius:9px; font-weight:800; font-size:.82rem; color:var(--encre-douce); }
.ap-seg button.on{ background:var(--or-vif); color:#2b1b08; }
.ap-seg-grand{ grid-template-columns:repeat(4,1fr); margin:12px 0; }
.ap-seg-grand button{ padding:14px 0; font-size:1.1rem; }
.ap-pastilles{ display:flex; gap:8px; overflow-x:auto; margin:0 calc(-1 * var(--gouttiere)) 10px; padding:0 var(--gouttiere) 4px; scrollbar-width:none; }
.ap-pastilles::-webkit-scrollbar{ display:none; }
.ap-pastilles button{ all:unset; cursor:pointer; flex:none; white-space:nowrap; padding:7px 12px; border-radius:999px; border:1px solid var(--trait); background:rgba(0,0,0,.25); font-size:.82rem; font-weight:700; }
.ap-pastilles button.on{ background:rgba(255,213,82,.18); border-color:var(--or-vif); color:var(--or-clair); }
.ap-compte-exos{ margin:0 0 4px; min-height:1.2em; }
.ap-exos{ display:grid; grid-template-columns:minmax(0,1fr); background:var(--carte); border:1px solid var(--trait); border-radius:16px; padding:2px 12px; }
.ap-exo{ all:unset; cursor:pointer; box-sizing:border-box; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.ap-exo:last-child{ border-bottom:0; }
.ap-exo-t{ display:grid; min-width:0; }
.ap-exo-nom{ font-weight:700; line-height:1.25; }
.ap-rec{ text-align:right; font-size:.72rem; color:var(--encre-douce); font-variant-numeric:tabular-nums; line-height:1.2; }
.ap-rec b{ display:block; color:var(--or-clair); font-size:.9rem; }
.ap-decouvrir{ font-style:italic; opacity:.8; }
details.ap-fam-exos{ margin:0 0 6px; }
details.ap-fam-exos > summary{ list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:8px; padding:10px 12px; border-radius:14px; background:var(--carte); border:1px solid var(--trait); margin:0 0 6px; }
details.ap-fam-exos > summary::-webkit-details-marker{ display:none; }
.ap-fam-chev{ margin-left:auto; transition:transform .2s; color:var(--or-clair); }
details.ap-fam-exos[open] .ap-fam-chev{ transform:rotate(180deg); }
/* « Par chapitre » : balisage de la Bibliothèque de l'accueil */
.ap-chapitres .aventure-subtitle, .ap-armes .aventure-subtitle{ font:700 .72rem/1.2 var(--texte); letter-spacing:.07em; text-transform:uppercase; color:var(--encre-douce); margin:14px 0 6px; border:0; padding:0; text-align:left; opacity:1; }
.ap-chapitres .button-container, .ap-armes .button-container{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ap-chapitres a.bouton-jeu, .ap-armes a.bouton-jeu{ position:relative; display:grid; justify-items:center; align-content:center; gap:5px; min-height:88px; padding:10px 6px; text-align:center; text-decoration:none;
  background:var(--carte); border:1px solid var(--trait); border-radius:16px; font:700 .76rem/1.2 var(--texte); color:var(--encre); box-shadow:0 4px 12px rgba(0,0,0,.2); }
.ap-chapitres a.bouton-jeu picture, .ap-armes a.bouton-jeu picture{ display:block; }
.ap-chapitres a.bouton-jeu img, .ap-armes a.bouton-jeu img{ width:38px; height:38px; object-fit:contain; margin:0; }
.ap-arme-emo{ display:block; font-size:30px; line-height:38px; height:38px; }
/* (03/11/2026) Icônes dont le dessin est petit dans son halo : agrandies (mesure du dessin opaque, icone/mini) */
.ap-armes a.bouton-jeu img[src$="/carnet_erreurs.webp"]{ transform:scale(1.37); }
.ap-armes a.bouton-jeu img[src$="/brevet.webp"]{ transform:scale(1.31); }
.ap-armes a.bouton-jeu img[src$="/hauts_faits.webp"]{ transform:scale(1.28); }
.ap-armes a.bouton-jeu img[src$="/collection.webp"]{ transform:scale(1.35); }
.ap-armes a.bouton-jeu img[src$="/missions.webp"]{ transform:scale(1.4); }
.ap-armes a.bouton-jeu img[src$="/classes_arbre.webp"]{ transform:scale(1.39); }
.ap-armes a.bouton-jeu img[src$="/guildes.webp"]{ transform:scale(1.4); }
.ap-armes a.bouton-jeu img[src$="/la_forge.webp"]{ transform:scale(1.23); }
.ap-armes a.bouton-jeu img[src$="/livret.webp"]{ transform:scale(1.23); }
.ap-chapitres #section-simulations-prof{ margin-top:6px; }

/* ── Aventure (balisage de l'accueil + js/aventure-rangement.js) ── */
.ap-aventure details.av-vignettes > summary{ display:none !important; }
.ap-aventure details.av-vignettes{ display:block; border:0; background:transparent; padding:0; margin:0; }
.ap-aventure .content-wrap{ height:auto !important; opacity:1 !important; overflow:visible !important; }
.ap-aventure #av-recherche{ display:flex; align-items:center; gap:8px; background:var(--nuit-3); border:1px solid var(--trait); border-radius:14px; padding:10px 12px; margin:0 0 10px; }
.ap-aventure #av-recherche input{ all:unset; flex:1; min-width:0; font-size:16px; }
.ap-aventure #av-recherche button{ all:unset; cursor:pointer; color:var(--encre-douce); }
.ap-aventure #av-msg{ font-size:.82rem; color:var(--encre-douce); margin:0 0 8px; }
.ap-aventure .aventure-subtitle{ font:700 1rem/1.25 var(--titre); color:var(--or-clair); margin:16px 0 8px; text-align:left; border:0; padding:0; opacity:1; }
.ap-aventure .av-v2 .av-rangee, .ap-aventure .av-rangee{ width:auto; max-width:none; margin:0 0 12px; padding:4px 12px 12px; background:var(--carte); border:1px solid rgba(255,213,82,.45); border-radius:18px; }
.ap-aventure .av-v2 .av-rangee .aventure-subtitle{ text-align:left; color:var(--or-clair) !important; margin:8px 0; }
.ap-aventure .av-v2 .av-source{ margin:0 0 8px; }
.ap-aventure #av-favoris{ background:var(--carte); border:1px solid var(--trait); border-radius:18px; padding:4px 12px 12px; margin-bottom:12px; }
.ap-aventure #av-favoris .aventure-subtitle{ margin:8px 0; }
/* rangées « Continuer », « Pour ta classe », « Mes favoris » : défilent de côté */
.ap-aventure :is(.av-rangee, #av-favoris) .button-container{ display:flex !important; gap:8px; overflow-x:auto; margin:0 -12px; padding:0 12px 4px; scroll-snap-type:x proximity; scrollbar-width:none; }
.ap-aventure :is(.av-rangee, #av-favoris) .button-container::-webkit-scrollbar{ display:none; }
.ap-aventure :is(.av-rangee, #av-favoris) a.bouton-jeu.vg{ flex:0 0 150px; scroll-snap-align:start; flex-direction:column !important; align-items:flex-start !important; min-height:0; padding:10px !important; }
.ap-aventure :is(.av-rangee, #av-favoris) a.bouton-jeu.vg .vg-pitch{ display:none; }
/* familles (lignes dépliables du rangement) */
.ap-aventure .av-v2 .av-tete{ width:auto; max-width:none; margin:14px 0 8px; padding:0; }
.ap-aventure .av-v2 .av-tete-t{ font:700 .95rem/1.2 var(--titre); color:var(--encre) !important; }
.ap-aventure .av-v2 .av-vues button{ background:rgba(0,0,0,.3); color:var(--encre-douce) !important; border-color:var(--trait); }
.ap-aventure .av-v2 .av-vues button.on{ background:rgba(255,213,82,.2); color:var(--or-clair) !important; border-color:var(--or-vif); }
.ap-aventure .av-v2 .aventure-subtitle.av-fam{ width:auto; max-width:none; margin:8px 0; font:700 .98rem/1.25 var(--titre);
  background:linear-gradient(135deg,rgba(90,26,42,.92),rgba(42,16,40,.92)); border-color:rgba(232,196,106,.5); border-radius:16px; }
.ap-aventure .button-container{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:0 0 6px; }
.ap-aventure a.bouton-jeu.vg{ position:relative; text-decoration:none; color:var(--encre); background:var(--carte); border:1px solid var(--trait); border-radius:16px; box-shadow:0 4px 12px rgba(0,0,0,.22); }
.ap-aventure .vignettes .vg-puce, .ap-aventure .vg-puce{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
.ap-aventure .av-v2 .av-carte{ border-radius:18px; }
.ap-aventure .av-v2 .av-carte-titre{ background:rgba(20,15,36,.9); }
.ap-aventure .av-multi-t ~ .button-container a.bouton-jeu:not(.vg), .ap-aventure .button-container a.bouton-jeu:not(.vg){ display:flex; align-items:center; gap:10px; padding:10px 12px; text-decoration:none; color:var(--encre); background:var(--carte); border:1px solid var(--trait); border-radius:14px; font-weight:700; }
.ap-aventure .button-container a.bouton-jeu:not(.vg) img{ width:36px; height:36px; object-fit:contain; }

/* pastilles « nouveau » / « à jouer » du site, dans les tuiles */
#ap .fv-new-badge{ top:6px !important; right:6px !important; }

/* ── garde-robe v2 : aperçu fixe, tenues, une ligne par catégorie, sélecteur en feuille du bas ── */
.ap-garde{ display:block; }
.ap-apercu-gr{ position:sticky; top:0; z-index:6; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center;
  margin:0 calc(-1 * var(--gouttiere)) 6px; padding:12px var(--gouttiere); min-height:96px;
  background:linear-gradient(180deg, rgba(20,15,36,.97), rgba(20,15,36,.92)); border-bottom:1px solid var(--trait); box-shadow:0 8px 18px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); overflow:hidden; }
.ap-ag-av{ display:block; }
.ap-ag-id{ min-width:0; display:grid; gap:4px; }
.ap-ag-nom{ font:700 clamp(1rem, 4.6vw, 1.22rem)/1.15 var(--titre); color:var(--encre); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 0; }
.ap-ag-nom .pseudo{ display:inline; }
.ap-ag-titre{ max-width:230px; }
.ap-ag-titre:empty{ display:none; }
.ap-ag-titre .tb, .ap-ag-titre .tbb, .ap-ag-titre .tbm{ width:100% !important; max-width:230px; margin:0 !important; font-size:11px; }
.ap-ag-bulle{ display:block; font-size:.7rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-ag-droite{ display:grid; justify-items:center; gap:4px; min-width:46px; }
.ap-ag-fam{ display:block; width:44px; height:44px; filter:drop-shadow(0 3px 3px rgba(0,0,0,.7)); }
.ap-ag-fam picture, .ap-ag-fam img, .ap-ag-fam [data-fam-sprite]{ width:100%; height:100%; object-fit:contain; display:block; }
.ap-ag-fam .fv-fam-sprite-fallback{ font-size:28px; line-height:44px; }
.ap-ag-bl .chip{ display:inline-flex; position:relative; overflow:visible; }
.ap-ag-ex{ display:block; width:84px; }
.ap-ag-pal{ position:absolute; left:0; right:0; bottom:0; height:4px; }
/* scène d'avatar : boîte de 200 px réduite (mêmes tailles que l'aperçu de perso.html, pour les effets .aura.*) */
.ap-sc-boite{ position:relative; display:block; flex:none; }
.ap-sc{ position:absolute; left:0; top:0; width:200px; height:200px; transform:scale(var(--k)); transform-origin:0 0; border-radius:18px;
  background:radial-gradient(circle at 50% 40%, rgba(255,230,170,.22), rgba(10,6,16,.7) 70%); }
.ap-sc > .ap-ico, .ap-sc > .ap-ico[class*="avatar-"]{ --sz:200px !important; width:200px; height:200px; display:block; margin:0 !important; border-radius:18px; overflow:hidden; }
.ap-sc > .ap-ico-vide{ width:200px; height:200px; padding:30px; }
.ap-sc > .aura{ clip-path:inset(22px round 18px); }      /* perso.html : .avatar.avec-ca > .aura */
.ap-tenues{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px 6px; }
.ap-tenues button{ all:unset; cursor:pointer; display:grid; justify-items:center; gap:3px; font:700 .63rem/1.15 var(--texte); color:var(--encre-douce); text-align:center; padding:2px 0; border-radius:12px; }
.ap-tenues button:hover{ color:var(--or-clair); }
.ap-tenues button:active{ background:rgba(255,255,255,.06); }
.ap-tenues .ap-sc-boite{ margin-top:3px; }
.ap-tenues .ap-ico{ animation-play-state:paused !important; }
.ap-gr-groupes{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; }
.ap-gr-groupe{ min-width:0; }
/* (v3, 31/10) une TUILE par catégorie : miniature du choix porté, nom, choix, possédés/total */
.ap-t-ligne{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ap-t-ligne .ap-t-vue{ margin-bottom:8px; }
.ap-t-ligne .ap-cloche{ width:36px; height:36px; flex:none; margin-bottom:4px; }
.ap-tuiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ap-tuile{ all:unset; cursor:pointer; position:relative; box-sizing:border-box; min-width:0; display:grid; grid-template-columns:52px minmax(0,1fr); gap:9px; align-items:center;
  padding:8px 9px; border-radius:14px; background:var(--carte); border:1px solid var(--trait); box-shadow:0 3px 10px rgba(0,0,0,.22); }
.ap-tuile:hover{ border-color:rgba(255,213,82,.6); }
.ap-tuile:active{ transform:scale(.98); }
.ap-tuile:focus-visible{ outline:2px solid var(--or-vif); outline-offset:2px; }
.ap-tu-v{ display:block; width:52px; height:52px; }
.ap-tu-v > .ap-pc{ width:52px !important; height:52px !important; border-radius:12px !important; border-width:1px; border-color:rgba(255,255,255,.08); }
.ap-tu-v > .ap-pc-sc{ border-color:transparent; }
.ap-tu-v > .ap-pc-sc .ap-sc-boite{ transform:scale(.93); transform-origin:50% 50%; }
.ap-tu-t{ min-width:0; display:grid; gap:1px; padding-right:18px; }
.ap-tu-t b{ font-size:.8rem; line-height:1.15; color:var(--encre); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-tu-t .ap-petit{ font-size:.74rem; color:var(--or-clair); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-tu-n{ position:absolute; top:6px; right:8px; font:700 .6rem/1 var(--texte); color:var(--encre-douce); opacity:.85; }
.ap-tu-aa{ font-size:1.35rem; }
.ap-tu-vide{ font-size:1.4rem; filter:grayscale(1); opacity:.55; }
.ap-pc-bl{ overflow:hidden; }   /* l'aura du blason reste dans sa vignette */
.ap-pc-bl .chip{ display:inline-flex; position:relative; overflow:visible; }
/* entrées « liens » : puces à deux lignes, dans le groupe */
.ap-puces{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:6px; }
.ap-puce{ all:unset; cursor:pointer; box-sizing:border-box; min-width:0; display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:6px; align-items:center;
  padding:6px 8px; border-radius:12px; background:rgba(23,17,33,.72); border:1px solid rgba(255,214,120,.16); }
.ap-puce:hover{ border-color:rgba(255,213,82,.55); }
.ap-puce:focus-visible{ outline:2px solid var(--or-vif); outline-offset:2px; }
.ap-puce-e{ font-size:1rem; text-align:center; }
.ap-puce-t{ min-width:0; display:grid; }
.ap-puce-t b{ font-size:.74rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-puce-t .ap-petit{ font-size:.66rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-puce .chev{ font-size:.9rem; }
@media (max-width:599px){ .ap-puces > .ap-puce:last-child:nth-child(odd){ grid-column:1/-1; } }
/* « Ma classe » se range avec les tuiles du blason : même hauteur qu'une tuile */
.ap-tuiles > .ap-puce{ padding:8px 9px; border-radius:14px; }
.ap-note{ margin:5px 2px 0; font-size:.7rem; }
/* aperçu : légendes et bouton « fiche » réservés à la colonne de l'ordinateur */
.ap-ag-rg{ display:block; }
.ap-ag-leg, .ap-ag-pc-seul{ display:none !important; }
.chev{ color:var(--encre-douce); font-size:1.2rem; }
.ap-reglages{ display:grid; border-radius:14px; overflow:hidden; background:var(--carte); border:1px solid var(--trait); margin:0 0 8px; }
.ap-reglages > button, .ap-reglages > a, .ap-reglages > label{ all:unset; cursor:pointer; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px; border-bottom:1px solid rgba(255,255,255,.06); font-size:.88rem; font-weight:700; text-decoration:none; }
.ap-reglages > :last-child{ border-bottom:0; }
.ap-reglages > *:hover{ background:rgba(255,255,255,.04); }
.ap-ordre{ display:grid; border-radius:14px; overflow:hidden; background:var(--carte); border:1px solid var(--trait); margin:0 0 8px; }
.ap-ordre-l{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.06); font-size:.86rem; font-weight:700; }
.ap-ordre-b{ display:flex; gap:6px; flex:none; }
.ap-ordre-b button{ all:unset; cursor:pointer; width:34px; height:30px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--trait); color:var(--or-clair); font-weight:900; }
.ap-ordre-b button:disabled{ opacity:.25; cursor:default; }
.ap-ordre-b button:focus-visible{ outline:2px solid var(--or-vif); }
.ap-ordre-raz{ all:unset; cursor:pointer; padding:10px 12px; font-size:.84rem; font-weight:800; color:var(--or-clair); text-align:center; }
.ap-reglages-t{ padding:10px 12px 8px; font-weight:800; font-size:.86rem; color:var(--or-clair); border-bottom:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.ap-reglages input[type="checkbox"]{ width:22px; height:22px; accent-color:var(--or-vif); }
.ap-danger{ color:var(--ko) !important; }
/* vignettes */
.ap-pc{ position:relative; width:56px; height:56px; border-radius:14px; border:2px solid transparent; display:grid; place-items:center; overflow:hidden; background:rgba(0,0,0,.3); }
.ap-pc img{ width:100%; height:100%; object-fit:contain; }
.ap-pc .ap-ico, .ap-pc .ap-ico[class*="avatar-"]{ --sz:52px !important; width:52px; height:52px; display:block; margin:0 !important; animation-play-state:paused !important; }
.ap-pc .blason-ico img{ width:40px !important; height:40px !important; }
.ap-pc-sc{ overflow:visible; background:transparent; }
.ap-pc-sc .ap-sc-boite{ margin:auto; }
.ap-pc-sc .ap-sc > .ap-ico{ --sz:200px !important; width:200px; height:200px; animation-play-state:paused !important; }
.ap-pc-ps{ font:700 1rem/1 var(--titre); }
.ap-pc .ap-pc-fam, .ap-pc .ap-pc-fam img{ width:48px; height:48px; object-fit:contain; display:block; }
.ap-pc-hab{ padding:0; background:transparent; }
.ap-pc-hab .hab-ap{ width:100%; height:100%; aspect-ratio:auto; max-width:none; border-radius:10px; }
.ap-ag-ex.ap-pc-hab .hab-ap{ aspect-ratio:4/3; height:auto; }
.ap-pc-titre{ align-content:center; gap:1px; padding:3px; text-align:center; background:linear-gradient(160deg, color-mix(in srgb, var(--r) 45%, #1a1428), #120d1a); border-color:color-mix(in srgb, var(--r) 60%, transparent); }
.ap-pc-titre span{ font:700 .5rem/1.15 var(--titre); color:#fff; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ap-pc-titre small{ font:800 .42rem/1 var(--texte); text-transform:uppercase; letter-spacing:.04em; color:var(--r); }
.r-commun{ --r:#94a3b8; } .r-pecommun{ --r:#4ade80; } .r-rare{ --r:#60a5fa; } .r-epique{ --r:#c084fc; } .r-legendaire{ --r:#fbbf24; } .r-mythique{ --r:#f5d0fe; }   /* recopié de perso.html */
.ap-pc.th-tuile{ padding:0; background:transparent; }
.ap-pc.th-tuile .th-pastille{ width:100%; height:100%; border:0; border-radius:12px; }
.ap-th-arene{ background:radial-gradient(120% 70% at 50% 0%, #2b1f52, #140f24 70%) !important; }
.ap-pc.prestige-swatch{ width:56px !important; height:56px !important; border-radius:14px !important; }
/* sélecteur */
.ap-feuille.ap-sel{ display:flex; flex-direction:column; height:64vh; max-height:64vh; overflow:hidden; padding-bottom:0; }
@supports (height:1dvh){ .ap-feuille.ap-sel{ height:64dvh; max-height:64dvh; } }
.ap-feuille.ap-sel #ap-feuille-contenu{ display:flex; flex-direction:column; flex:1; min-height:0; }
.ap-voile.leger.on{ background:rgba(5,3,12,.22); }
.ap-sel-tete{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-right:40px; }
.ap-sel-tete .ap-f-t{ margin:2px 0 6px; }
.ap-sel-corps{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:6px 2px 10px; }
.ap-sel-corps > .ap-etiq{ display:block; margin:4px 0 8px; }
.ap-sel-corps > .ap-btn-mini{ margin:6px 0 10px; }
.ap-grille-gr{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 6px; padding:2px 0 8px; }
.ap-grille-gr > p{ grid-column:1/-1; margin:4px 0; }
.ap-case-gr{ all:unset; cursor:pointer; position:relative; box-sizing:border-box; display:grid; justify-items:center; align-content:start; gap:4px; min-width:0; font:700 .64rem/1.2 var(--texte); color:var(--encre-douce); text-align:center; }
.ap-case-n{ max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.ap-case-gr small{ font-size:.58rem; opacity:.8; }
.ap-case-gr.on .ap-pc{ border-color:var(--ok); }
.ap-case-gr.choisi .ap-pc{ border-color:var(--or-vif); box-shadow:0 0 12px rgba(255,213,82,.6); }
.ap-case-gr.choisi{ color:var(--or-clair); }
.ap-case-gr.verrou .ap-pc{ filter:grayscale(.6) brightness(.75); }
.ap-cadenas{ position:absolute; top:-4px; right:calc(50% - 34px); font-size:.72rem; filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.ap-grp-gr{ border-top:1px solid rgba(255,255,255,.08); padding-top:6px; margin-top:4px; }
.ap-grp-gr summary{ cursor:pointer; font:700 .84rem/1.9 var(--texte); color:var(--encre); list-style:none; }
.ap-grp-gr summary::-webkit-details-marker{ display:none; }
.ap-grp-gr summary::before{ content:"▸ "; color:var(--or); }
.ap-grp-gr[open] summary::before{ content:"▾ "; }
.ap-sel-action{ flex:none; display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 calc(-1 * var(--gouttiere)); padding:12px var(--gouttiere) calc(14px + env(safe-area-inset-bottom));
  background:var(--nuit-2); border-top:1px solid var(--trait); min-height:64px; }
.ap-sel-txt{ display:grid; min-width:0; }
.ap-sel-txt b{ font:700 .95rem/1.2 var(--titre); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-sel-action .ap-btn-or{ padding:10px 18px; white-space:nowrap; }

/* ── feuille du bas ── */
/* (03/11/2026) Visite de l'appli : anneau doré autour de la partie présentée (js/appli/appli-style.js, visite) ; pulsation en opacité seule */
.ap-visite-anneau{ position:fixed; z-index:90; pointer-events:none; border-radius:16px; border:3px solid #ffd552; box-shadow:0 0 16px 4px rgba(255,213,82,.55), inset 0 0 12px rgba(255,213,82,.25); animation:ap-visite-pulse 1.2s ease-in-out infinite alternate; }
@keyframes ap-visite-pulse{ from{ opacity:.55; } to{ opacity:1; } }
html.fv-anim-legeres .ap-visite-anneau{ animation:none; }
/* téléphone/tablette : la feuille de la visite s'arrête au-dessus de la barre (les onglets présentés restent visibles) ;
   marge en bas de page le temps de la visite, pour pouvoir remonter une carte du bas au-dessus de la feuille */
html:not(.ap-format-pc) .ap-feuille.ap-visite{ bottom:calc(var(--barre-h) + env(safe-area-inset-bottom)); max-height:52vh; }
html.ap-en-visite .ap-vue{ padding-bottom:60vh !important; }
/* ordinateur : la visite en carte flottante en bas à droite (le panneau pleine hauteur cachait le ⚙️ du coin haut-droit) */
html.ap-format-pc .ap-feuille.ap-visite{ left:auto; right:18px; top:auto; bottom:18px; width:420px; height:auto; max-height:60vh; border-radius:18px; border:1px solid var(--trait); transform:translateY(120%); }
html.ap-format-pc .ap-feuille.ap-visite.on{ transform:none; }
@media (prefers-reduced-motion: reduce){ .ap-visite-anneau{ animation:none; } }
.ap-voile{ position:fixed; inset:0; z-index:90; background:rgba(5,3,12,.58); opacity:0; pointer-events:none; transition:opacity .25s; }
.ap-voile.on{ opacity:1; pointer-events:auto; }
.ap-feuille{ position:fixed; left:0; right:0; bottom:0; z-index:91; max-height:86dvh; max-height:86vh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--nuit-2); border-top:1px solid var(--trait); border-radius:24px 24px 0 0; padding:10px var(--gouttiere) calc(22px + env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .32s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 40px rgba(0,0,0,.5); }
.ap-feuille.on{ transform:none; }
@media (min-width:700px){ .ap-feuille{ left:50%; right:auto; width:min(640px, 92vw); transform:translate(-50%,105%); } .ap-feuille.on{ transform:translateX(-50%); } }
.ap-poignee{ width:42px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); margin:0 auto 10px; }
.ap-feuille-x{ position:absolute; top:10px; right:12px; all:unset; cursor:pointer; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.06); color:var(--encre-douce); }
.ap-feuille-x{ position:absolute; top:10px; right:12px; }
.ap-f-t{ font:700 1.15rem/1.25 var(--titre); color:var(--titre-c); margin:2px 40px 8px 0; }
.ap-f-tete{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:center; margin:4px 40px 12px 0; }
.ap-f-tete .ap-ico-jeu{ width:72px; height:72px; }
.ap-f-tete .ap-f-t{ margin:0 0 2px; }
.ap-f-chiffres{ display:flex; gap:8px; flex-wrap:wrap; }
.ap-f-chiffres > div{ flex:1 1 90px; display:grid; padding:8px 10px; border-radius:12px; background:rgba(0,0,0,.25); }
.ap-f-chiffres b{ font:700 1.05rem/1.2 var(--titre); color:var(--or-clair); }
.ap-f-badges{ margin:12px 0 4px; }
.ap-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ap-badges img{ width:42px; height:42px; object-fit:contain; }
.ap-badges img.ap-pas-eu{ filter:grayscale(1) brightness(.45); opacity:.7; }
.ap-notif{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.88rem; text-decoration:none; }
.ap-notif .ic{ text-align:center; font-size:1.1rem; }
/* (01/11/2026) cloche : « Tout effacer » */
.ap-notif-tout{ display:block; margin:-4px 0 4px auto; padding:6px 11px; border-radius:10px; border:1px solid var(--trait); background:rgba(36,27,56,.85); color:var(--encre-douce); font:700 .78rem/1 var(--texte); cursor:pointer; }
.ap-notif-tout:hover{ color:var(--or-clair); border-color:rgba(255,214,120,.55); }
.ap-av-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(86px,1fr)); gap:8px; margin-top:8px; }
.ap-av-choix{ all:unset; cursor:pointer; display:grid; justify-items:center; gap:3px; padding:8px 4px; border-radius:14px; background:rgba(0,0,0,.25); border:2px solid transparent; text-align:center; font:700 .7rem/1.2 var(--texte); }
.ap-av-choix small{ font-weight:600; font-size:.6rem; color:var(--encre-douce); }
.ap-av-choix.on{ border-color:var(--or-vif); background:rgba(255,213,82,.12); }
.ap-av-choix.verrou{ opacity:.55; cursor:not-allowed; }
.ap-av-choix.verrou .ap-av-mini{ filter:grayscale(1) brightness(.6); }
.ap-av-mini{ display:block; width:56px; height:56px; border-radius:14px; overflow:hidden; font-size:2rem; line-height:56px; }
.ap-av-mini .ap-ico{ --sz:56px !important; width:56px; height:56px; display:block; margin:0 !important; animation-play-state:paused !important; }
.ap-bd-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:8px; }
.ap-bd-choix{ all:unset; cursor:pointer; display:grid; justify-items:center; gap:3px; padding:8px 4px; border-radius:14px; background:rgba(0,0,0,.25); border:2px solid transparent; text-align:center; font:700 .7rem/1.2 var(--texte); }
.ap-bd-choix img{ width:48px; height:48px; object-fit:contain; }
.ap-bd-choix small{ font-size:.6rem; color:var(--encre-douce); }
.ap-bd-choix.on{ border-color:var(--or-vif); background:rgba(255,213,82,.12); }
.ap-erreur{ color:var(--ko); }

/* fiche d'identité (js/fiche-identite.js) au-dessus de tout */
.fi-modale{ z-index:200 !important; }
/* outil de signalement de bug : rangé dans la fenêtre ⚙️ Réglages (sa fenêtre reste) */
#_fvbug-bar{ display:none !important; }
#fvtoast{ bottom:calc(var(--barre-h) + 16px + env(safe-area-inset-bottom)) !important; z-index:300 !important; }

/* ── tablette : deux colonnes quand il y a la place ── */
@media (min-width:760px){
  :root{ --gouttiere:max(24px, env(safe-area-inset-left, 0px)); }
  .ap-pile{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  /* « masonry » : chaque carte occupe autant de rangs de 4 px que sa hauteur (+ l'espace), appli.js les calcule ;
     dense = une carte plus bas vient boucher le trou laissé à côté d'une carte plus courte (31/10 : vides de 500 px) */
  .ap-pile.ap-masonry{ grid-auto-rows:4px; row-gap:0; grid-auto-flow:row dense; }
  .ap-pile > :is(#ap-compte, #ap-installer, #fv-niveau-banner, .fv-event-banner, #ap-classe-notif, #ap-recents, #ap-guerre){ grid-column:1/-1; }
  /* en masonry, seuls les bandeaux du HAUT prennent toute la largeur : une carte pleine largeur plus bas doit
     attendre la plus longue des deux colonnes et laisserait un trou sous l'autre */
  .ap-pile.ap-masonry > :is(#ap-recents, #ap-guerre){ grid-column:auto; }
  .ap-heros{ grid-template-columns:auto minmax(0,1fr) auto minmax(0,1.1fr); padding:16px 18px; }
  .ap-heros .ap-chiffres{ grid-column:4; grid-row:1; grid-template-columns:repeat(2,1fr); }
  .ap-heros .ap-ere{ grid-column:1/-1; }
  .ap-av{ width:96px; height:96px; }
  .ap-av .ap-ico, .ap-av .ap-ico[class*="avatar-"]{ --sz:96px !important; width:96px; height:96px; }
  .ap-fam{ left:84px; top:80px; width:48px; height:48px; }
  .ap-bulle-fam{ left:120px; top:92px; }
  .ap-exos{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; }
  .ap-exo:nth-last-child(2):nth-child(odd){ border-bottom:0; }
  .ap-chapitres .button-container, .ap-armes .button-container{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
  .ap-aventure .button-container:not(.av-ferme){ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ap-tenues{ grid-template-columns:repeat(7,minmax(0,1fr)); }
  .ap-grille-gr{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .ap-apercu-gr{ min-height:110px; }
  .ap-barre button{ font-size:.74rem; }
}
@media (min-width:1000px){
  .ap-aventure .button-container:not(.av-ferme){ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ap-exos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:360px){
  .ap-chiffres b{ font-size:.78rem; }
  .ap-chapitres .button-container, .ap-armes .button-container{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Style (v3) : tuiles en 3 colonnes dès 600 px, 4 sur grande tablette */
@media (min-width:600px){
  .ap-tuiles{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ap-puces{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:900px){
  .ap-tuiles{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ap-puces{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* raccourcis du coin haut-droit : seulement en format ordinateur (voir plus bas) */
.ap-coin{ display:none; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   FORMAT ORDINATEUR (modèle validé : maquette_appli.src.html, bloc « format ordinateur »)
   Seuil : 1100 px de large ET souris (hover + pointeur fin). Une tablette tactile, même large
   (iPad Pro paysage 1366 px, Surface en mode tablette), a un pointeur « coarse » : elle garde le format
   tablette ci-dessus. 1100 px = la plus petite fenêtre de portable courante (1280 px moins la barre des tâches
   ou une fenêtre pas tout à fait plein écran) : avec la colonne de 210 px, il reste ~850 px de contenu, assez
   pour 2 colonnes de cartes ; 3 colonnes à partir de 1300 px. Même requête dans appli.js (PC_MQ).
   Seul le PLACEMENT change : mêmes éléments, mêmes fonctions.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  :root{ --barre-h:0px; --nav-l:210px; --gouttiere:28px; }
  /* barre du bas → colonne de navigation à gauche, toujours visible */
  .ap-vues{ inset:0 0 0 var(--nav-l); }
  .ap-barre{ top:0; bottom:0; left:0; right:auto; width:var(--nav-l); height:auto; padding:68px 12px 12px; display:flex; flex-direction:column; gap:4px;
    border-top:0; border-right:1px solid var(--trait); background:rgba(14,10,26,.92); box-shadow:none; }
  .ap-barre::before{ content:"FV Maths"; position:absolute; top:22px; left:24px; font:700 1.25rem/1 var(--titre); color:var(--or-clair); letter-spacing:.03em; }
  .ap-barre button{ flex:none; flex-direction:row; justify-content:flex-start; gap:12px; padding:10px 12px; border-radius:12px; font-size:.95rem; }
  .ap-barre button:hover{ background:rgba(255,255,255,.05); color:var(--encre); }
  .ap-barre button.on{ background:rgba(255,213,82,.14); }
  .ap-barre button.on img{ transform:none; }
  .ap-barre .ap-pastille{ position:static; margin-left:auto; box-shadow:none; }
  /* vues : simple fondu (pas de glissement), contenu plus large */
  .ap-vue{ padding:22px var(--gouttiere) 36px; transition:opacity .2s; }
  .ap-vue[data-pos="g"], .ap-vue[data-pos="d"]{ transform:none; transition:opacity .2s, visibility 0s .2s; }
  .ap-col{ max-width:1360px; }
  /* coin haut-droit : cloche (déplacée ici par appli.js), fiche, réglages et compte */
  /* aligné sur le bord droit du contenu (colonne de 1360 px centrée) */
  .ap-coin{ display:flex; gap:8px; position:absolute; top:16px; right:max(24px, calc((100vw - var(--nav-l) - 1360px) / 2 + var(--gouttiere) - 4px)); z-index:60; padding:4px; border-radius:16px;
    background:rgba(20,15,36,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .ap-coin > button{ all:unset; cursor:pointer; position:relative; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(0,0,0,.32); border:1px solid var(--trait); font-size:1.05rem; }
  .ap-coin > button:hover{ border-color:var(--or-vif); }
  .ap-coin > button:focus-visible{ outline:2px solid var(--or-vif); outline-offset:2px; }
  .ap-t-vue{ margin-right:170px; min-height:40px; display:flex; align-items:center; margin-top:0; }
  .ap-haut{ min-height:40px; margin-right:170px; }
  .ap-logo{ font-size:0; }                 /* le logo est dans la colonne ; il reste le numéro de version */
  .ap-logo b{ display:none; }
  .ap-logo small, .ap-logo .ap-version{ margin-left:0; font-size:.66rem; }
  /* accueil : héros en bandeau, chiffres alignés à droite */
  .ap-heros{ grid-template-columns:auto minmax(0,1fr) auto auto; padding:16px 20px; }
  .ap-heros .ap-chiffres{ grid-column:4; grid-row:1; grid-template-columns:repeat(4,minmax(96px,auto)); gap:8px; margin:0; }
  .ap-heros .ap-chiffres > *{ padding:9px 12px; font-size:.72rem; }
  .ap-heros .ap-chiffres b{ font-size:1.08rem; }
  .ap-chiffres > *:hover{ background:rgba(255,213,82,.12); }
  .ap-carrousel{ flex-wrap:wrap; overflow:visible; margin:0; padding:2px 0 6px; }
  .ap-m-onglets{ flex-wrap:wrap; overflow:visible; }
  /* exercices : recherche et filtres de largeur contenue, liste en 3 colonnes (≥ 1000 px, plus haut) */
  .ap-cherche, .ap-seg, .ap-recherche-av{ max-width:640px; }
  .ap-pastilles{ flex-wrap:wrap; overflow:visible; margin:0 0 10px; padding:0; }
  .ap-exo:hover .ap-exo-nom{ color:var(--or-clair); }
  /* aventure : rangées en grilles (plus de défilement de côté) */
  .ap-aventure #av-recherche{ max-width:640px; }
  .ap-aventure :is(.av-rangee, #av-favoris) .button-container{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); overflow:visible; margin:0; padding:0 0 4px; }
  .ap-aventure :is(.av-rangee, #av-favoris) a.bouton-jeu.vg{ flex:none; width:auto; }
  /* salle d'armes : tuiles en 6 colonnes */
  .ap-armes .button-container{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  /* garde-robe : aperçu en grand dans une colonne gauche fixe, catégories à droite */
  .ap-garde{ display:grid; grid-template-columns:300px minmax(0,1fr); column-gap:24px; align-items:start; }
  .ap-garde > :not(.ap-apercu-gr){ grid-column:2; }
  .ap-garde > .ap-sous-t:first-of-type{ margin-top:0; }
  .ap-apercu-gr{ grid-column:1; grid-row:1 / span 3; position:sticky; top:12px; margin:0; padding:22px 16px 20px; min-height:0;
    grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; gap:12px;
    border:1px solid var(--trait); border-radius:20px; background:linear-gradient(180deg, rgba(36,27,56,.95), rgba(20,15,36,.95)); }
  .ap-ag-av{ padding:8px; }               /* le cadre animé déborde un peu de la scène */
  .ap-ag-id{ justify-items:center; width:100%; }
  .ap-ag-nom{ white-space:normal; font-size:1.3rem; }
  .ap-ag-titre{ max-width:260px; width:100%; }
  .ap-ag-titre .tb, .ap-ag-titre .tbb, .ap-ag-titre .tbm{ max-width:260px; margin:0 auto !important; font-size:12px; }
  .ap-ag-bulle{ white-space:normal; }
  /* (v3) la colonne se remplit : familier + sa bulle, blason + rang/aura/liseré, bouton « Ma fiche d'identité » */
  .ap-ag-id .ap-ag-bulle{ display:none; }
  .ap-ag-droite{ display:grid; gap:8px; width:100%; justify-items:stretch; }
  .ap-ag-rg{ display:grid; grid-template-columns:60px minmax(0,1fr); gap:10px; align-items:center; justify-items:center; text-align:left; padding:8px 10px;
    border-radius:14px; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.07); overflow:hidden; }
  .ap-ag-leg{ display:grid !important; gap:2px; justify-self:stretch; min-width:0; font-size:.74rem; line-height:1.3; color:var(--encre-douce); }
  .ap-ag-leg b{ font-size:.82rem; color:var(--encre); }
  .ap-ag-pc-seul.ap-ag-rg{ display:grid !important; }
  .ap-ag-fiche.ap-ag-pc-seul{ display:block !important; width:100%; padding:10px 12px; font-size:.84rem; }
  .ap-ag-fam{ width:56px; height:56px; }
  .ap-ag-fam-vide{ display:grid; place-items:center; font-size:1.6rem; filter:grayscale(1); opacity:.5; }
  .ap-ag-ex{ width:180px; justify-self:center; }
  .ap-tuiles{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ap-puces{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
  .ap-puces > [data-voir-fiche]{ display:none; }   /* le bouton « Ma fiche d'identité » est sous le personnage, à gauche */
  .ap-tuile{ grid-template-columns:56px minmax(0,1fr); padding:9px 10px; }
  .ap-tu-v, .ap-tu-v > .ap-pc{ width:56px !important; height:56px !important; }
  /* feuille du bas → panneau latéral droit, hauteur pleine (sélecteurs, fiche d'un jeu, cloche, série, visite…) */
  .ap-feuille, .ap-feuille.ap-sel{ --gouttiere:22px; left:auto; right:0; top:0; bottom:0; width:430px; height:auto; max-height:none;
    border-radius:0; border-top:0; border-left:1px solid var(--trait); padding:18px var(--gouttiere) 22px;
    transform:translateX(105%); box-shadow:-12px 0 40px rgba(0,0,0,.5); }
  .ap-feuille.ap-sel{ padding-bottom:0; }
  .ap-feuille.on{ transform:none; }
  .ap-poignee{ display:none; }
  .ap-grille-gr{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ap-case-gr:hover .ap-pc{ border-color:rgba(255,213,82,.55); }
}
@media (min-width:1300px) and (hover:hover) and (pointer:fine){
  .ap-pile{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1500px) and (hover:hover) and (pointer:fine){
  .ap-aventure .button-container:not(.av-ferme){ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* série de 30 jours (même grille que la fenêtre de l'accueil) */
.ap-serie-grille{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin:10px 0; }
.ap-serie-grille div{ display:grid; justify-items:center; gap:1px; padding:6px 2px; border-radius:10px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); font-size:.62rem; color:var(--encre-douce); }
.ap-serie-grille div b{ font:700 .72rem/1 var(--texte); color:var(--encre); }
.ap-serie-grille div i{ font-style:normal; font-size:1rem; line-height:1.2; }
.ap-serie-grille .fait{ background:linear-gradient(180deg,rgba(255,213,82,.28),rgba(150,98,31,.25)); border-color:rgba(255,213,82,.6); }
.ap-serie-grille .auj{ box-shadow:0 0 0 2px var(--ok); }
.ap-serie-grille .demain{ border-style:dashed; border-color:var(--or-vif); }
/* (31/10/2026) série du jour : boucliers, prochain palier, paliers après J30 (balisage de /js/serie.js, comme index.html) */
.serie-bandeau{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:4px 0 8px; }
.serie-boucliers, .serie-prochain{ font:800 .78rem/1.2 var(--texte); padding:4px 10px; border-radius:999px; background:rgba(0,0,0,.28); border:1px solid rgba(255,213,82,.35); color:var(--or-clair); }
.serie-echelle{ list-style:none; margin:6px 0 8px; padding:0; display:grid; gap:5px; }
.serie-palier{ display:grid; grid-template-columns:42px 22px 1fr auto; align-items:center; gap:6px; padding:6px 9px; border-radius:10px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); }
.serie-palier .sp-jour{ font:800 .74rem/1 var(--texte); color:var(--or-vif); }
.serie-palier .sp-ico{ font-size:1rem; text-align:center; }
.serie-palier .sp-nom{ font:800 .78rem/1.2 var(--texte); color:var(--encre); }
.serie-palier .sp-nom small{ display:block; font-weight:600; font-size:.66rem; color:var(--encre-douce); }
.serie-palier .sp-etat{ font:800 .7rem/1 var(--texte); color:var(--encre-douce); white-space:nowrap; }
.serie-palier.atteint{ background:linear-gradient(180deg,rgba(255,213,82,.28),rgba(150,98,31,.25)); border-color:rgba(255,213,82,.6); }
.serie-palier.passe{ opacity:.45; }

/* modal de bienvenue / pseudo invité (balisage : accueil-quotidien.js ; styles de base repris de l'accueil classique)
   (01/11/2026) au look de l'appli : carte nuit-or, titre Georgia, choix en cartes sombres, boutons or */
#pseudo-modal{ background:rgba(8,5,18,.72); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); padding:16px; }
#pseudo-modal .niveau-card{ width:min(94vw,480px); max-height:92dvh; overflow-y:auto; box-sizing:border-box; padding:22px 20px 18px; text-align:left;
  color:var(--encre); font-family:var(--texte); border-radius:22px; border:1px solid rgba(255,213,82,.45);
  background:radial-gradient(120% 60% at 50% 0%, #33255e 0%, #1a1330 70%); backdrop-filter:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,230,160,.18); }
#pseudo-modal .niveau-card h2{ margin:0 0 4px; font:700 1.4rem/1.2 var(--titre); color:var(--titre-c); text-align:center; text-shadow:0 2px 0 rgba(0,0,0,.35); }
#pseudo-modal .niveau-card p.hint{ margin:.2rem 0 .9rem; color:var(--encre-douce); text-align:center; font-size:.92rem; }
#pseudo-modal .niveau-card p.hint a{ color:var(--or-clair) !important; }
#pseudo-modal .pm-option{ background:var(--carte-2); border:1px solid var(--trait); color:var(--encre); border-radius:16px; }
#pseudo-modal .pm-option:hover{ background:rgba(52,40,82,.95); border-color:rgba(255,213,82,.55); }
#pseudo-modal .pm-option .pm-titre{ color:var(--encre); font-family:var(--titre); font-size:1.08em; }
#pseudo-modal .pm-option .pm-desc{ color:var(--encre-douce); }
#pseudo-modal .pm-option.pm-recommande{ background:linear-gradient(180deg,rgba(255,213,82,.2),rgba(150,98,31,.22)), var(--carte-2); border-color:rgba(255,213,82,.7); box-shadow:0 0 18px rgba(255,200,80,.15); }
#pseudo-modal .pm-option.pm-recommande .pm-titre{ color:var(--or-clair); }
#pseudo-modal .pm-connexion{ grid-column:1 / -1; justify-self:center; padding:8px 12px; color:var(--encre-douce); text-decoration:none; font-size:.95rem; border-radius:12px; }
#pseudo-modal .pm-connexion b{ color:var(--or-clair); text-decoration:underline; text-underline-offset:3px; }
#pseudo-modal .pm-connexion:hover{ background:rgba(255,213,82,.08); }
#pseudo-modal label{ display:block; margin:6px 0 6px; font-weight:700; color:var(--encre); }
#pseudo-modal input.niveau-select{ box-sizing:border-box; color:var(--encre); background:rgba(10,7,20,.6); border:1px solid var(--trait); border-radius:12px; }
#pseudo-modal input.niveau-select:focus{ outline:2px solid var(--or-vif); outline-offset:1px; }
#pseudo-modal .niveau-btn{ background:linear-gradient(180deg,#ffd96a,#f0b93a); color:#2b1b08; border-radius:14px; padding:11px 18px; font-weight:800; box-shadow:0 3px 0 #9a6a12; }
#pseudo-modal .niveau-btn:hover{ transform:none; box-shadow:0 3px 0 #9a6a12; filter:brightness(1.05); }
#pseudo-modal .niveau-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #9a6a12; }
#pseudo-modal #pseudo-close.niveau-btn, #pseudo-modal .niveau-btn.pm-btn-doux{ background:transparent; color:var(--encre-douce); border:1px solid var(--trait); box-shadow:none; }
#pseudo-modal #pseudo-close.niveau-btn:hover, #pseudo-modal .niveau-btn.pm-btn-doux:hover{ background:rgba(255,255,255,.06); color:var(--encre); }
#pseudo-modal .niveau-err{ color:var(--ko); }
/* ═══ (01/11/2026) Animations des palettes « prestige », reprises de l'accueil classique (générées par
   tmp/palettes_fx.py) : calque .ap-pal-fx dans la carte du personnage et la barre. Bronze exclue. ═══ */
.ap-pal-fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; z-index:0; }
/* calque placé en PREMIER enfant : il passe sous les éléments positionnés (familier, bulles…), comme les effets sur les barres de l'accueil classique */
body.palette-silver .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);animation:pal-shimmer-x 5s ease-in-out infinite; }
body.palette-gold .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(255,250,200,.55) 50%,transparent 80%);animation:pal-shimmer-x 4s ease-in-out infinite; }
body.palette-diamond .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.70) 50%,transparent 82%);animation:pal-shimmer-x 3.5s ease-in-out infinite; }
body.palette-ruby .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(255,200,200,.45) 50%,transparent 80%);animation:pal-shimmer-x 4.5s ease-in-out infinite; }
body.palette-emerald .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(200,255,220,.45) 50%,transparent 80%);animation:pal-shimmer-x 5s ease-in-out infinite; }
body.palette-sapphire .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(200,220,255,.50) 50%,transparent 80%);animation:pal-shimmer-x 5s ease-in-out infinite; }
body.palette-violet .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(255,180,255,.45) 50%,transparent 80%);animation:pal-shimmer-x 3.5s ease-in-out infinite; }
body.palette-galaxie .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(200,170,255,.40) 50%,transparent 80%);animation:pal-shimmer-x 6s ease-in-out infinite; }
body.palette-rainbow .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(255,220,150,.45) 50%,transparent 80%);animation:pal-shimmer-x 4s ease-in-out infinite; }
body.palette-eclipse .ap-pal-fx::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(200,200,200,.18) 50%,transparent 80%);animation:pal-shimmer-x 6s ease-in-out infinite; }
body.palette-silver .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 8px rgba(80,90,100,.2),0 5px 16px rgba(154,163,173,.4) }
body.palette-silver .ap-pal-fx{ animation:pal-silver-glow 5s ease-in-out infinite }
body.palette-gold .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(100,70,5,.2),0 5px 16px rgba(201,162,39,.45) }
body.palette-gold .ap-pal-fx{ animation:pal-gold-glow 4s ease-in-out infinite }
body.palette-diamond .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 8px rgba(2,132,199,.2),0 5px 16px rgba(90,210,255,.4) }
body.palette-diamond .ap-pal-fx{ animation:pal-diamond-glow 3.5s ease-in-out infinite }
body.palette-ruby .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 8px rgba(100,0,0,.25),0 5px 16px rgba(220,38,38,.45) }
body.palette-ruby .ap-pal-fx{ animation:pal-ruby-glow 2.8s ease-in-out infinite }
body.palette-emerald .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 8px rgba(0,80,50,.25),0 5px 16px rgba(16,185,129,.4) }
body.palette-emerald .ap-pal-fx{ animation:pal-emerald-glow 4s ease-in-out infinite }
body.palette-sapphire .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 8px rgba(10,20,80,.3),0 5px 16px rgba(59,130,246,.45) }
body.palette-sapphire .ap-pal-fx{ animation:pal-sapphire-glow 4s ease-in-out infinite }
body.palette-violet .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 8px rgba(50,0,100,.3),0 5px 16px rgba(123,47,247,.45) }
body.palette-violet .ap-pal-fx{ animation:pal-violet-glow 2.5s ease-in-out infinite }
body.palette-galaxie .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 8px rgba(10,0,50,.35),0 5px 16px rgba(138,43,226,.45) }
body.palette-galaxie .ap-pal-fx{ animation:pal-galaxie-glow 5s ease-in-out infinite }
body.palette-rainbow .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 8px rgba(100,20,0,.3),0 5px 16px rgba(255,100,0,.45) }
body.palette-rainbow .ap-pal-fx{ animation:pal-lava-glow 1.8s ease-in-out infinite }
body.palette-eclipse .ap-pal-fx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -3px 8px rgba(0,0,0,.4),0 5px 16px rgba(17,24,39,.55) }
body.palette-eclipse .ap-pal-fx{ animation:pal-eclipse-glow 6s ease-in-out infinite }
body.palette-orage .ap-pal-fx::before{ content:""; position:absolute; inset:0; opacity:.35;
  background:repeating-linear-gradient(112deg, rgba(255,255,255,.16) 0 1px, transparent 1px 9px);
  animation: pal-orage-rain 1s linear infinite; pointer-events:none; }
body.palette-orage .ap-pal-fx::after{ content:""; position:absolute; inset:0; mix-blend-mode:screen; opacity:0; pointer-events:none;
  background:radial-gradient(45% 90% at 12% 50%, rgba(255,255,255,.85), rgba(255,244,180,.3) 45%, transparent 70%);
  animation: pal-orage-flash 3.4s steps(1,end) infinite; }
body.palette-foret .ap-pal-fx::after{ content:""; position:absolute; right:14px; top:50%; width:16px; height:22px; margin-top:-11px;
  background:linear-gradient(160deg,#bfe3a0,#6f9c47); border-radius:0% 100% 0% 100%;
  box-shadow:inset 0 0 4px rgba(0,0,0,.3); transform-origin:50% 90%; pointer-events:none;
  animation: pal-foret-sway 4s ease-in-out infinite; }
body.palette-nacre .ap-pal-fx::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; mix-blend-mode:soft-light;
  background:conic-gradient(from 0deg at 85% 50%, #ffd1f0, #d1e8ff, #d1fff0, #fff6d1, #ffd1f0);
  animation: pal-nacre-hue 7s linear infinite; }
body.palette-lune .ap-pal-fx::before{ content:""; position:absolute; right:18px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%;
  background:#e9efff; box-shadow:0 0 10px 2px rgba(220,232,255,.6); pointer-events:none;
  animation: pal-lune-pulse 5s ease-in-out infinite; }
body.palette-lune .ap-pal-fx::after{ content:""; position:absolute; right:11px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%;
  background:var(--accent); pointer-events:none; }
body.palette-paon .ap-pal-fx::after{ content:""; position:absolute; right:10px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, #04140f 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, #d4af37 0 20%, transparent 21%),
    radial-gradient(circle at 50% 50%, #0a6e5c 0 33%, transparent 34%),
    radial-gradient(circle at 50% 50%, #123a6b 0 50%, transparent 51%);
  animation: pal-paon-glow 3.6s ease-in-out infinite; }
body.palette-comete .ap-pal-fx::after{ content:""; position:absolute; left:-10%; top:20%; width:7px; height:7px; border-radius:50%; pointer-events:none;
  background:#eafffe; box-shadow:0 0 7px 3px #9fe9ff, -14px -1px 10px 1px rgba(159,233,255,.55);
  animation: pal-comete-fly 3.4s ease-in infinite; }
body.palette-glace .ap-pal-fx::after{ content:"";
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.6) 50%, transparent 85%);
  animation: pal-glace-sweep 3s ease-in-out infinite; }
body.palette-glace .ap-pal-fx{ animation: pal-glace-pulse-section 2.5s ease-in-out infinite }
body.palette-minuit .ap-pal-fx{ animation: pal-minuit-section 1.8s ease-in-out infinite }
body.palette-inferno .ap-pal-fx::before{ content:"";
  position:absolute; left:-5%; bottom:0; width:110%; height:55%;
  background: linear-gradient(0deg, rgba(255,200,0,.8) 0%, rgba(255,80,0,.5) 45%, transparent 100%);
  border-radius: 70% 70% 0 0 / 50% 50% 0 0;
  filter: blur(4px);
  pointer-events:none;
  animation: pal-inferno-flame1 0.65s ease-in-out infinite; }
body.palette-inferno .ap-pal-fx::after{ content:"";
  position:absolute; left:20%; bottom:0; width:60%; height:40%;
  background: linear-gradient(0deg, rgba(255,255,100,.9) 0%, rgba(255,140,0,.6) 40%, transparent 100%);
  border-radius: 50% 50% 0 0;
  filter: blur(2px);
  pointer-events:none;
  animation: pal-inferno-flame2 0.45s ease-in-out infinite alternate; }
body.palette-inferno .ap-pal-fx{ animation: pal-inferno-glow 0.6s ease-in-out infinite }
body.palette-prisme .ap-pal-fx{ animation: pal-prisme-hue 3s linear infinite }
body.palette-aurum .ap-pal-fx{ box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 8px 24px rgba(0,0,0,.25) }
body.palette-obsidienne .ap-pal-fx{ box-shadow:
    inset 0 1px 0 rgba(200,220,255,.10),
    inset 0 -2px 6px rgba(0,0,0,.65),
    0 8px 24px rgba(0,0,0,.55),
    0 2px 8px rgba(60,50,120,.10) }
body.palette-obsidienne .ap-pal-fx::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(118deg,
    transparent 0% 28%,
    rgba(140,180,255,.05) 36%,
    rgba(210,235,255,.22) 48%,
    rgba(130,170,255,.06) 60%,
    transparent 68% 100%);
  animation: obsidienne-sweep 10s ease-in-out infinite; }
body.palette-obsidienne .ap-pal-fx{ animation: obsidienne-iris 9s ease-in-out infinite }
body.palette-solstice .ap-pal-fx{ box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 10px 28px rgba(0,0,0,.35) }
body.palette-solstice .ap-pal-fx::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,.12), transparent 50%),
    radial-gradient(1px 1px at 70% 65%, rgba(255, 0, 0, 0.16), transparent 50%);
  mix-blend-mode: overlay; opacity:.28; }
body.palette-mythril .ap-pal-fx{ box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 8px 24px rgba(38,66,109,.25) }
body.palette-obsidienne .ap-pal-fx{ box-shadow:
    inset 0 1px 0 rgba(200,220,255,.10),
    inset 0 -2px 6px rgba(0,0,0,.65),
    0 8px 24px rgba(0,0,0,.55) !important }
@keyframes obsidienne-iris {
  0%,100% {
    box-shadow: inset 0 1px 0 rgba(200,220,255,.09),
                0 8px 24px rgba(0,0,0,.55),
                0 2px 8px rgba(60,50,120,.10);
  }
  33% {
    box-shadow: inset 0 1px 0 rgba(170,200,255,.18),
                0 10px 30px rgba(0,0,0,.60),
                0 3px 16px rgba(60,40,120,.24);
  }
  67% {
    box-shadow: inset 0 1px 0 rgba(140,200,255,.13),
                0 9px 26px rgba(0,0,0,.58),
                0 2px 12px rgba(0,50,100,.18);
  }
}
@keyframes obsidienne-sweep {
  0%,  55% { transform: translateX(-130%); opacity:0; }
  65%       { opacity:1; }
  88%, 100% { transform: translateX(230%); opacity:0; }
}
@keyframes pal-comete-fly{
  0%{ transform:translate(0,0); opacity:0; }
  10%{ opacity:1; }
  55%{ transform:translate(160px,26px); opacity:1; }
  68%{ opacity:0; }
  100%{ transform:translate(160px,26px); opacity:0; }
}
@keyframes pal-diamond-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 5px 14px rgba(90,210,255,.35);}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 8px 24px rgba(200,242,255,.75);}
}
@keyframes pal-eclipse-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 14px rgba(17,24,39,.5);}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px rgba(107,114,128,.45);}
}
@keyframes pal-emerald-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 14px rgba(16,185,129,.38);}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 24px rgba(110,231,183,.65);}
}
@keyframes pal-foret-sway{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } }
@keyframes pal-galaxie-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(200,150,255,.3),0 5px 14px rgba(138,43,226,.4);}
  50%    {box-shadow:inset 0 1px 0 rgba(220,200,255,.5),0 8px 24px rgba(107,105,214,.65);}
}
@keyframes pal-glace-pulse-section {
  0%,100% { box-shadow: 0 0 10px rgba(168,230,255,.5), 0 4px 12px rgba(168,230,255,.2); }
  50%     { box-shadow: 0 0 22px rgba(168,230,255,.9), 0 4px 20px rgba(168,230,255,.5); }
}
@keyframes pal-glace-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
@keyframes pal-gold-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 5px 14px rgba(201,162,39,.4);}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 24px rgba(255,235,100,.65);}
}
@keyframes pal-inferno-flame1 {
  0%,100% { transform: scaleX(1)    scaleY(1)    skewX(0deg);   opacity: .9; }
  40%     { transform: scaleX(1.1)  scaleY(1.08) skewX(3deg);   opacity: 1; }
  70%     { transform: scaleX(.92)  scaleY(.95)  skewX(-3deg);  opacity: .75; }
}
@keyframes pal-inferno-flame2 {
  0%     { transform: scaleX(1)    scaleY(1)    skewX(0deg);  opacity: 1; }
  50%    { transform: scaleX(1.15) scaleY(1.12) skewX(-4deg); opacity: .85; }
  100%   { transform: scaleX(.88) scaleY(.9)   skewX(4deg);  opacity: 1; }
}
@keyframes pal-inferno-glow {
  0%,100% { box-shadow: 0 0 8px rgba(255,100,0,.8), 0 0 16px rgba(255,50,0,.4); }
  50%     { box-shadow: 0 0 14px rgba(255,160,0,1),  0 0 28px rgba(255,80,0,.7); }
}
@keyframes pal-lava-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,180,100,.35),0 5px 14px rgba(255,100,0,.42);}
  50%    {box-shadow:inset 0 1px 0 rgba(255,220,150,.55),0 8px 24px rgba(255,153,0,.68);}
}
@keyframes pal-lune-pulse{ 0%,100%{ box-shadow:0 0 8px 1px rgba(220,232,255,.45); } 50%{ box-shadow:0 0 16px 4px rgba(220,232,255,.85); } }
@keyframes pal-minuit-section {
  0%,100% { box-shadow: 0 0 12px rgba(109,40,217,.7), 0 4px 12px rgba(109,40,217,.3); filter:brightness(1); }
  50%     { box-shadow: 0 0 28px rgba(167,139,250,.9), 0 4px 20px rgba(109,40,217,.6); filter:brightness(1.1); }
}
@keyframes pal-nacre-hue{ to{ filter:hue-rotate(360deg); } }
@keyframes pal-orage-flash{ 0%,37%,45%,100%{opacity:0;} 39%,42%{opacity:.85;} }
@keyframes pal-orage-rain{ from{ background-position:0 0; } to{ background-position:-22px 30px; } }
@keyframes pal-paon-glow{ 0%,100%{ filter:brightness(1) saturate(1); } 50%{ filter:brightness(1.2) saturate(1.3); } }
@keyframes pal-prisme-hue   { to { filter: hue-rotate(360deg); } }
@keyframes pal-ruby-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,150,150,.4),0 5px 14px rgba(220,38,38,.4);}
  50%    {box-shadow:inset 0 1px 0 rgba(255,200,200,.6),0 8px 24px rgba(248,113,113,.65);}
}
@keyframes pal-sapphire-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 14px rgba(59,130,246,.4);}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 24px rgba(147,197,253,.65);}
}
@keyframes pal-shimmer-x {
  0%, 55%  { transform: translateX(-160%); }
  80%, 100% { transform: translateX(260%); }
}
@keyframes pal-silver-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 5px 14px rgba(154,163,173,.35);}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 24px rgba(255,255,255,.55);}
}
@keyframes pal-violet-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,150,255,.3),0 5px 14px rgba(123,47,247,.4);}
  50%    {box-shadow:inset 0 1px 0 rgba(255,180,255,.5),0 8px 24px rgba(192,132,252,.7);}
}
/* ═══ (03/11/2026, revue UX, perf téléphone) Les lueurs des palettes animaient box-shadow / filter : repeint de la carte
   à chaque image. Même effet, mais seule l'OPACITÉ d'un calque déjà peint bouge (composité par la carte graphique) :
   base = lueur douce fixe autour, ::before = lueur intérieure qui apparaît et disparaît (le calque coupe ce qui dépasse). ═══ */
body.palette-silver .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 5px 14px rgba(154,163,173,.35); }
body.palette-silver .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 18px rgba(255,255,255,.55); opacity:0; animation:ap-pal-lueur 5s ease-in-out infinite; }
body.palette-gold .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 5px 14px rgba(201,162,39,.4); }
body.palette-gold .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 18px rgba(255,235,100,.65); opacity:0; animation:ap-pal-lueur 4s ease-in-out infinite; }
body.palette-diamond .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 5px 14px rgba(90,210,255,.35); }
body.palette-diamond .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 18px rgba(200,242,255,.75); opacity:0; animation:ap-pal-lueur 3.5s ease-in-out infinite; }
body.palette-ruby .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(255,150,150,.4),0 5px 14px rgba(220,38,38,.4); }
body.palette-ruby .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,200,200,.6), inset 0 0 18px rgba(248,113,113,.65); opacity:0; animation:ap-pal-lueur 2.8s ease-in-out infinite; }
body.palette-emerald .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 14px rgba(16,185,129,.38); }
body.palette-emerald .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 18px rgba(110,231,183,.65); opacity:0; animation:ap-pal-lueur 4s ease-in-out infinite; }
body.palette-sapphire .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 14px rgba(59,130,246,.4); }
body.palette-sapphire .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 18px rgba(147,197,253,.65); opacity:0; animation:ap-pal-lueur 4s ease-in-out infinite; }
body.palette-violet .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(255,150,255,.3),0 5px 14px rgba(123,47,247,.4); }
body.palette-violet .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,180,255,.5), inset 0 0 18px rgba(192,132,252,.7); opacity:0; animation:ap-pal-lueur 2.5s ease-in-out infinite; }
body.palette-galaxie .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(200,150,255,.3),0 5px 14px rgba(138,43,226,.4); }
body.palette-galaxie .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(220,200,255,.5), inset 0 0 18px rgba(107,105,214,.65); opacity:0; animation:ap-pal-lueur 5s ease-in-out infinite; }
body.palette-rainbow .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(255,180,100,.35),0 5px 14px rgba(255,100,0,.42); }
body.palette-rainbow .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,220,150,.55), inset 0 0 18px rgba(255,153,0,.68); opacity:0; animation:ap-pal-lueur 1.8s ease-in-out infinite; }
body.palette-eclipse .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 14px rgba(17,24,39,.5); }
body.palette-eclipse .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 18px rgba(107,114,128,.45); opacity:0; animation:ap-pal-lueur 6s ease-in-out infinite; }
body.palette-glace .ap-pal-fx{ animation:none; box-shadow:0 0 10px rgba(168,230,255,.5), 0 4px 12px rgba(168,230,255,.2); }
body.palette-glace .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 18px rgba(168,230,255,.9), inset 0 0 18px rgba(168,230,255,.5); opacity:0; animation:ap-pal-lueur 2.5s ease-in-out infinite; }
body.palette-minuit .ap-pal-fx{ animation:none; box-shadow:0 0 12px rgba(109,40,217,.7), 0 4px 12px rgba(109,40,217,.3); }
body.palette-minuit .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 18px rgba(167,139,250,.9), inset 0 0 18px rgba(109,40,217,.6); opacity:0; animation:ap-pal-lueur 1.8s ease-in-out infinite; }
body.palette-inferno .ap-pal-fx{ animation:none; box-shadow:0 0 8px rgba(255,100,0,.8), 0 0 16px rgba(255,50,0,.4); }
body.palette-obsidienne .ap-pal-fx{ animation:none; box-shadow:inset 0 1px 0 rgba(200,220,255,.09), 0 8px 24px rgba(0,0,0,.55), 0 2px 8px rgba(60,50,120,.10); }
body.palette-obsidienne .ap-pal-fx::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(170,200,255,.18), inset 0 0 18px rgba(0,0,0,.60), inset 0 0 18px rgba(60,40,120,.24); opacity:0; animation:ap-pal-lueur 9s ease-in-out infinite; }
@keyframes ap-pal-lueur{ 50%{ opacity:1; } }
/* lune et paon : pulsent en opacité ; nacre et prisme : plus de filtre animé (reflets fixes) */
body.palette-lune .ap-pal-fx::before{ box-shadow:0 0 14px 3px rgba(220,232,255,.75); animation:ap-pal-souffle 5s ease-in-out infinite; }
@keyframes ap-pal-souffle{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
body.palette-nacre .ap-pal-fx::after{ animation:none; }
body.palette-paon .ap-pal-fx::after{ animation:ap-pal-souffle 3.6s ease-in-out infinite; }
body.palette-prisme .ap-pal-fx{ animation:none; }
/* orage : la pluie glisse en transform (avant : background-position, repeinte à chaque image) */
body.palette-orage .ap-pal-fx::before{ inset:-40px; animation:ap-pal-pluie 1s linear infinite; }
@keyframes ap-pal-pluie{ to{ transform:translate(-22px,30px); } }
@media (prefers-reduced-motion:reduce){ .ap-pal-fx, .ap-pal-fx::before, .ap-pal-fx::after{ animation:none !important; } }
/* ═══ (01/11/2026) Liseré du blason : la formule --fv-lis est définie sur :root dans l'accueil classique (que l'appli
   ne relit pas). Recopiée à l'identique : les métaux (html[data-lis=…]) et .blason-ico img, eux, sont déjà relus. ═══ */
:root{
  --lis-f:#2a1c04; --lis-c:#fff6d8;
  /* (01/11/2026, mesuré sur un vrai téléphone) 4 contours de couleur, sans contour sombre ni halo flou : les 9 « drop-shadow »
     d'avant faisaient ramer le défilement de l'accueil (22 images > 50 ms → 0) et de Style. */
  --fv-lis: drop-shadow(1.6px 0 0 var(--lis-cd, var(--lis-c))) drop-shadow(-1.6px 0 0 var(--lis-cg, var(--lis-c)))
    drop-shadow(0 1.6px 0 var(--lis-cb, var(--lis-c))) drop-shadow(0 -1.6px 0 var(--lis-ch, var(--lis-c)));
}
html[data-lis="aucun"]{ --fv-lis:none; }   /* (03/11/2026) Style → Liseré → Aucun */

/* (01/11/2026) Réglages → Apparence (Sombre / Clair / Perso) */
.ap-apparence{ margin:0 0 10px; padding:10px 12px 8px; border-radius:14px; background:var(--carte); border:1px solid var(--trait); }
.ap-apparence-t{ display:block; font:700 .72rem/1.2 var(--texte); letter-spacing:.07em; text-transform:uppercase; color:var(--encre-douce); margin-bottom:8px; }
.ap-seg.ap-seg-app{ grid-template-columns:repeat(3,1fr); margin-bottom:6px; }
.ap-apparence-aide{ margin:0; }
/* ═══ (01/11/2026) FLUIDITÉ du haut de l'accueil et de l'aperçu de Style (mesuré : 6 à 7 effets animés à la fois saturent un téléphone)
   a) pseudo doré : plus de halo qui palpite (trois grands flous redessinés à chaque image) ni de reflet en « mix-blend-mode »
      (recomposition de tout l'écran) ; le dégradé qui coule reste. Même rendu à l'œil.
   b) cadres animés et blason qui tournent (angle animé = recalcul + repeinte à chaque image) : rotation par petits pas, invisible
      sur des tours de 6 à 9 s.
   c) Réglages → « Animations légères » (html.fv-anim-legeres) : tout le personnage et ses décors restent figés. ═══ */
body.ap-body .pseudo.gold{ animation:goldFlow 6s linear infinite !important; text-shadow:0 0 6px rgba(255,200,0,.8), 0 0 18px rgba(255,170,0,.45); }
body.ap-body .pseudo.gold::after{ mix-blend-mode:normal; opacity:.55; }
body.ap-body :is(.ca, .ca::before, .ca::after, .blason-ico, .blason-ico::before, .blason-ico::after){ animation-timing-function:steps(120) !important; }
html.fv-anim-legeres body.ap-body :is(#ap-heros, .ap-apercu-gr, .ap-tenues, .fi-modale, #ap-barre) *,
html.fv-anim-legeres body.ap-body :is(#ap-heros, .ap-apercu-gr, .ap-tenues, .fi-modale, #ap-barre) *::before,
html.fv-anim-legeres body.ap-body :is(#ap-heros, .ap-apercu-gr, .ap-tenues, .fi-modale, #ap-barre) *::after,
html.fv-anim-legeres body.ap-body .ap-pal-fx, html.fv-anim-legeres body.ap-body .ap-pal-fx::before, html.fv-anim-legeres body.ap-body .ap-pal-fx::after{ animation-play-state:paused !important; }
/* proposition « animations légères » (appli-style.js : appareil mesuré lent) */
.ap-anim-propose{ position:fixed; left:12px; right:12px; bottom:calc(var(--barre-h) + 12px + env(safe-area-inset-bottom)); z-index:95; display:grid; gap:8px;
  padding:12px 14px; border-radius:16px; background:var(--carte-2); border:1px solid var(--or-vif); color:var(--encre); box-shadow:0 10px 30px rgba(0,0,0,.45); font-size:.9rem; }
.ap-anim-btns{ display:flex; gap:14px; align-items:center; }
@media (min-width:700px){ .ap-anim-propose{ left:auto; width:min(420px, 90vw); } }
/* ═══ (01/11/2026) GLISSEMENT ENTRE ONGLETS (téléphone) : chaque vue est isolée (un changement dans l'une ne fait plus recalculer
   les autres), les deux vues qui glissent passent en calque le temps du mouvement (classe posée par appli.js), et sur téléphone
   plus de flou derrière les barres (recalculé à chaque image du défilement : coûteux sur un petit processeur). ═══ */
.ap-vue{ contain:layout paint style; }
@media (max-width:699px) and (pointer:coarse){
  /* glissement SANS fondu : faire fondre une vue pleine d'éléments animés oblige le téléphone à la redessiner hors écran
     à chaque image. La vue qui part disparaît aussitôt ; seule la nouvelle glisse (déplacement pur, géré par la carte graphique). */
  /* (01/11/2026, mesuré) les vues ne changent plus NI visibility NI pointer-events (deux propriétés héritées : les basculer
     faisait recalculer les ~2 700 éléments de la vue à chaque changement d'onglet) : elles restent dessinées, côte à côte
     hors de l'écran, et glissent en entier, comme une appli native. */
  .ap-vue, .ap-vue[data-pos="g"], .ap-vue[data-pos="d"]{ opacity:1; visibility:visible; pointer-events:auto; transition:transform .26s cubic-bezier(.2,.8,.2,1); will-change:transform; }
  .ap-vue[data-pos="g"]{ transform:translateX(-100%); }
  .ap-vue[data-pos="d"]{ transform:translateX(100%); }
  .ap-barre{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(20,15,36,.985); }
  body.ap-body.theme-clair .ap-barre{ background:rgba(255,250,238,.99); }
  .ap-apercu-gr, #pseudo-modal{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}
/* (01/11/2026, mesuré sur un vrai téléphone) tenues prêtes à porter : sur écran tactile, sans l'aura (7 auras miniatures
   redessinées au défilement de Style : 22 images > 50 ms → 9) ; le cadre et le nom distinguent toujours les tenues */
@media (pointer:coarse){ .ap-tenues .ap-sc > .aura{ display:none !important; } }
/* ═══ (01/11/2026) ÉCONOMIES pour les téléphones : l'onglet Style ramait (sélecteur d'Effets : 35 auras animées en même
   temps, ~26 images/s sur un processeur de téléphone ; Avatars : 71 animations).
   1) un onglet caché ne fait plus tourner ses animations ;
   2) dans les sélecteurs, les vignettes sont figées — seule celle qu'on essaie bouge (et le personnage en haut) ;
   3) dans la Garde-robe, les petites vignettes (tenues prêtes, Mon personnage) sont figées ; sur ordinateur, elles s'animent au survol. ═══ */
@media not ((max-width:699px) and (pointer:coarse)){ .ap-vue[data-pos="g"] *, .ap-vue[data-pos="g"] *::before, .ap-vue[data-pos="g"] *::after, .ap-vue[data-pos="d"] *, .ap-vue[data-pos="d"] *::before, .ap-vue[data-pos="d"] *::after{ animation-play-state:paused !important; } }   /* téléphone : pas de règle qui dépende de la position des vues (recalcul de toute la vue) */
.ap-feuille.ap-sel .ap-case-gr:not(.choisi) *, .ap-feuille.ap-sel .ap-case-gr:not(.choisi) *::before, .ap-feuille.ap-sel .ap-case-gr:not(.choisi) *::after{ animation-play-state:paused !important; }
.ap-tenues button:not(:hover) *, .ap-tenues button:not(:hover) *::before, .ap-tenues button:not(:hover) *::after, .ap-puce:not(:hover) .ap-pc *, .ap-puce:not(:hover) .ap-pc *::before, .ap-puce:not(:hover) .ap-pc *::after{ animation-play-state:paused !important; }
/* ═══ (01/11/2026) THÈME « CLAIR » (js/theme.js, débloqué pour tous) : l'appli passe en couleurs claires.
   Mêmes variables que le look nuit-or, redéfinies ; puis les quelques fonds sombres écrits en dur. ═══ */
body.ap-body.theme-clair{
  color-scheme: light;
  --nuit:#f6eedc; --nuit-2:#efe3c8; --nuit-3:#e5d5b2;
  --or:#b07d12; --or-vif:#c98a0c; --or-clair:#8a5a00; --titre-c:#7a4a00;
  --encre:#2e2213; --encre-douce:#6b5a40;
  --carte:rgba(255,252,244,.94); --carte-2:rgba(250,244,230,.96);
  --trait:rgba(140,100,30,.26);
  --ok:#1f8a4c; --ko:#c0392b; --bleu:#2563c9;
  --parchemin:#fffaf0; --parchemin-encre:#3b2708;
  background:#f6eedc; color:var(--encre);
}
body.ap-body.theme-clair .ap-heros{ background:linear-gradient(180deg, rgba(255,232,178,.7), rgba(255,251,242,.96));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 22px rgba(120,80,20,.16), 0 0 0 1px color-mix(in srgb, var(--r2) 30%, transparent); }
body.ap-body.theme-clair .ap-heros.ap-mode-palette{ background:linear-gradient(160deg, color-mix(in srgb, var(--pal1) 22%, #fffaf0), color-mix(in srgb, var(--pal2) 14%, #fffaf0)); }
body.ap-body.theme-clair .ap-av{ background:radial-gradient(circle at 50% 40%, #fff4d8, #e8d3a6 72%); }
body.ap-body.theme-clair .ap-chiffres > *{ background:rgba(140,100,30,.10); }
body.ap-body.theme-clair .ap-ere{ background:rgba(140,100,30,.08); }
body.ap-body.theme-clair .ap-bandeau .tx b{ color:var(--encre); }
body.ap-body.theme-clair .ap-cloche, body.ap-body.theme-clair .ap-coin > button{ background:rgba(255,252,244,.9); }
body.ap-body.theme-clair .ap-coin{ background:rgba(255,248,232,.8); box-shadow:0 2px 10px rgba(120,80,20,.12); }
body.ap-body.theme-clair .ap-barre{ background:rgba(255,250,238,.96); box-shadow:0 -4px 16px rgba(120,80,20,.12); }
body.ap-body.theme-clair .ap-barre button:hover{ background:rgba(140,100,30,.08); }
body.ap-body.theme-clair .ap-barre button.on{ background:rgba(201,138,12,.14); }
body.ap-body.theme-clair .ap-apercu-gr{ background:linear-gradient(180deg, rgba(252,246,232,.98), rgba(248,240,222,.95)); box-shadow:0 6px 14px rgba(120,80,20,.12); }
body.ap-body.theme-clair .ap-puce{ background:rgba(255,252,244,.92); border-color:var(--trait); }
body.ap-body.theme-clair .ap-pc{ background:rgba(140,100,30,.10); }
body.ap-body.theme-clair .ap-reglages > button, body.ap-body.theme-clair .ap-reglages > a, body.ap-body.theme-clair .ap-reglages > label{ border-bottom-color:rgba(140,100,30,.14); }
body.ap-body.theme-clair .ap-voile{ background:rgba(60,40,10,.35); }
body.ap-body.theme-clair .ap-feuille{ box-shadow:0 -10px 34px rgba(80,50,10,.25); }
body.ap-body.theme-clair .ap-aventure .av-v2 .aventure-subtitle.av-fam{ background:linear-gradient(135deg,#f8e9c8,#efd8a6); border-color:rgba(176,125,18,.45); }
body.ap-body.theme-clair .ap-aventure .av-v2 .aventure-subtitle.av-fam, body.ap-body.theme-clair .ap-aventure .av-v2 .aventure-subtitle.av-fam *{ color:var(--titre-c) !important; -webkit-text-fill-color:var(--titre-c) !important; }
body.ap-body.theme-clair .ap-barre button{ color:#7d6a4c; }
body.ap-body.theme-clair .ap-barre button.on{ color:var(--or-clair); }
html[style*="--acc1"] body.ap-body.theme-clair .ap-barre button.on{ color:color-mix(in srgb, var(--acc1) 70%, #000); }
/* fonds semi-noirs (cases, pastilles, chiffres) : version claire */
body.ap-body.theme-clair .ap-pastilles button, body.ap-body.theme-clair .ap-aventure .av-v2 .av-vues button, body.ap-body.theme-clair .ap-f-chiffres > div, body.ap-body.theme-clair .ap-av-choix, body.ap-body.theme-clair .ap-bd-choix, body.ap-body.theme-clair .ap-ag-rg, body.ap-body.theme-clair .ap-serie-grille div{ background:rgba(140,100,30,.10); }