/* ================================================================
   HABITAMON — feuille de style globale
   Design system léger par-dessus les templates inline de app.js :
   tokens, états interactifs, accessibilité, layout téléphone.
   ================================================================ */

:root{
  --bg:#07080c;
  --bg-raise:#0c0f17;
  --surface:#10131b;
  --surface-2:#12151f;
  --surface-3:#1c2130;
  --border:#1d2230;
  --border-2:#232a3a;
  --text:#e8ebf2;
  --text-mid:#9aa4ba;
  /* Relevé de #707a94 (~4,3:1 sur --surface) à ~5,1:1 : les libellés
     secondaires sont en 10-11 px, le seuil AA de 4,5:1 n'était pas tenu. */
  --text-dim:#828da6;
  --accent:#e0243a;
  --accent-soft:#ff5a6e;
  --gold:#d98e2b;
  --green:#64b06a;
  /* Y2K cyber : vert acide phosphore (HUD, données, brackets) */
  --acid:#4dff58;
  --acid-mid:#37c948;
  --acid-dim:#2f9c3a;
  /* ---- TYPOGRAPHIE (revue 22/07/2026 soir 3) ----------------------
     Problème constaté à l'écran : les « É », « È » et « Œ » n'avaient pas
     la même taille que les autres lettres, partout dans l'app. Cause :
     `Press Start 2P` et `VT323` ne CONTIENNENT PAS les glyphes accentués.
     Le navigateur allait alors chercher chaque caractère manquant dans la
     police suivante de la pile — un « É » emprunté à une autre fonte, à
     une autre chasse, au milieu d'un mot. Ce n'était pas réglable par
     `font-size` : il fallait des polices à couverture complète.

     Nouvelle règle : plus AUCUN texte lisible n'est composé dans une
     police sans accents. `Press Start 2P` ne sert plus qu'au logotype
     « HABITAMON » (8 lettres, sans accent, jamais lu en continu).

     · --font-display : titres, onglets, boutons. Chakra Petch — techno,
       anguleuse, mais Latin Extended complet et bien plus lisible en
       petit corps que la pixel.
     · --font-term : chiffres et libellés « machine ». JetBrains Mono —
       chiffres tabulaires (les compteurs ne dansent plus) et accents
       complets, là où VT323 décrochait.                                */
  --font-logo:'Press Start 2P','Chakra Petch',monospace;
  --font-display:'Chakra Petch',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
  --font-term:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Ancien nom conservé pour ne pas casser les règles existantes : il
     pointe désormais sur la police lisible, pas sur la pixel sans accents. */
  --font-pixel:var(--font-display);
  --r-card:18px;
  --r-btn:12px;
  --shadow-card:0 10px 30px #0009;
}

/* ================================================================
   AMBIANCE GOTHIQUE (20/07/2026) — l'interface était « vide » :
   on pose une cathédrale en filigrane DERRIÈRE tout le contenu.
   Technique : uniquement des fonds multi-couches (gradients + SVG
   en data-URI) — AUCUN élément DOM ajouté, donc aucun conflit avec
   le patch incrémental ni les zones cliquables.
   Couches (du dessus vers le dessous) :
     1. vignette sombre (bords)          2. lueurs colorées (haut/bas)
     3. tracery d'arches gothiques       4. fond de base
   ================================================================ */
:root{
  /* Colonnade d'arches brisées + rosaces à meneaux, trait ~4-6 % d'opacité */
  --goth-arches:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='260' viewBox='0 0 220 260'%3E%3Cg fill='none' stroke='%23aab4d4' stroke-opacity='.045' stroke-width='1.2'%3E%3Cpath d='M10 260 V120 Q10 68 55 38 Q100 68 100 120 V260'/%3E%3Cpath d='M120 260 V120 Q120 68 165 38 Q210 68 210 120 V260'/%3E%3Cpath d='M22 260 V126 Q22 84 55 60 Q88 84 88 126 V260'/%3E%3Cpath d='M132 260 V126 Q132 84 165 60 Q198 84 198 126 V260'/%3E%3Ccircle cx='55' cy='100' r='13'/%3E%3Ccircle cx='165' cy='100' r='13'/%3E%3Cpath d='M55 87 v26 M42 100 h26 M165 87 v26 M152 100 h26'/%3E%3C/g%3E%3C/svg%3E");
  /* Rosace (une seule, non répétée) posée derrière la créature */
  --goth-rosace:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23c8b7e6' stroke-opacity='.055' stroke-width='1.4'%3E%3Ccircle cx='160' cy='160' r='150'/%3E%3Ccircle cx='160' cy='160' r='132'/%3E%3Ccircle cx='160' cy='160' r='60'/%3E%3Ccircle cx='160' cy='160' r='24'/%3E%3Cpath d='M220 160 L310 160 M211.96 190 L289.9 235 M190 211.96 L235 289.9 M160 220 L160 310 M130 211.96 L85 289.9 M108.04 190 L30.1 235 M100 160 L10 160 M108.04 130 L30.1 85 M130 108.04 L85 30.1 M160 100 L160 10 M190 108.04 L235 30.1 M211.96 130 L289.9 85'/%3E%3C/g%3E%3C/svg%3E");
}

html,body{margin:0;padding:0;background:var(--bg);color:#c9d1e0;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* Fond du simulateur desktop (index.html) */
body{background:
  radial-gradient(ellipse at 50% 118%, #e0243a12 0%, transparent 52%),
  radial-gradient(1200px 760px at 50% -12%, #1a1426 0%, transparent 62%),
  radial-gradient(820px 560px at 88% 108%, #200d14 0%, transparent 55%),
  var(--goth-arches) top center / 220px 260px repeat,
  linear-gradient(180deg, #090a10 0%, var(--bg) 45%, #05060a 100%);
  background-attachment: fixed;}
a{color:var(--accent-soft);text-decoration:none}
a:hover{color:#ff8a97}
img{-webkit-user-drag:none;user-select:none}

/* ---- Interactivité universelle : tout élément cliquable réagit ---- */
[data-action]{cursor:pointer;transition:filter .13s ease,transform .09s ease,border-color .13s ease;}
[data-action]:hover{filter:brightness(1.16)}
[data-action]:active{transform:scale(.965)}
[data-action]:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px;border-radius:10px}
input[data-bind],select[data-bind]{transition:border-color .13s ease, box-shadow .13s ease}
input[data-bind]:focus,select[data-bind]:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px #e0243a2b}
input[type=range]{cursor:pointer}

/* ---- Liens de version (header) ---- */
.page-links{display:flex;gap:8px;flex-wrap:wrap}
.page-links a{font-size:11px;font-weight:600;color:var(--text-mid);background:var(--surface);
  border:1px solid var(--border);border-radius:20px;padding:7px 13px;transition:border-color .13s,color .13s}
.page-links a:hover{border-color:var(--accent);color:var(--text)}

/* ================= Animations ================= */
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03) translateY(-2px)}}
@keyframes hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-12px)}60%{transform:translateY(0)}80%{transform:translateY(-5px)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes slowsway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes droop{0%,100%{transform:translateY(2px) scaleY(.97)}50%{transform:translateY(5px) scaleY(.94)}}
@keyframes zfloat{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(16px,-34px) scale(1.2)}}
@keyframes pulseglow{0%,100%{opacity:.3}50%{opacity:.75}}
@keyframes popin{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes toastin{0%{transform:translateY(-26px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes risefade{0%{transform:translateY(8px);opacity:0}25%{opacity:1;transform:translateY(0)}100%{opacity:1}}
@keyframes evoflash{0%{opacity:0}20%{opacity:.95}60%{opacity:.4}100%{opacity:0}}
@keyframes sheetup{0%{transform:translateY(40px);opacity:0}100%{transform:translateY(0);opacity:1}}

/* --- FX créatures (feu-follet, ailes, braises) --- */
@keyframes ghostflame{0%{transform:translateY(8px) scale(.7,.6);opacity:0}22%{opacity:.85}55%{transform:translateY(-14px) scale(.9,1.12);opacity:.6}100%{transform:translateY(-32px) scale(.55,1.3);opacity:0}}
@keyframes wingbob{0%,100%{transform:translateY(0) scale(1,1)}42%{transform:translateY(-8px) scale(.995,1.02)}68%{transform:translateY(-3px) scale(1.005,.995)}}
@keyframes emberrise{0%{opacity:0;transform:translate(0,0) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translate(var(--dx,10px),-72px) scale(1.15)}}
@keyframes evoburst{0%{transform:translateY(0) scale(.4);opacity:0}30%{opacity:.95}100%{transform:translateY(-56px) scale(1.25,1.6);opacity:0}}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#232a3a;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#2e3750}
::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
}

/* ================================================================
   MODE TÉLÉPHONE  —  html[data-mode="phone"]
   REFONTE 20/07/2026 : ARCADE / DARK PIXEL-RPG / Y2K CYBER.
   Base gothique braise conservée + vert acide phosphore (HUD).
   Grammaire : angles vifs, cadres RPG double-bordure + brackets HUD,
   barres HP segmentées, polices pixel/terminal, scanlines CRT.
   Tout est scopé .ph-* / [data-mode="phone"] → zéro impact desktop.
   ================================================================ */
html[data-mode="phone"], html[data-mode="phone"] body{height:100%;}
html[data-mode="phone"] body{overflow:hidden;overscroll-behavior:none;}

/* --- Couche CRT : scanlines + vignette (au-dessus de tout, jamais cliquable) --- */
html[data-mode="phone"] body::after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, #00000030 2px 3px),
    radial-gradient(ellipse at 50% 46%, transparent 55%, #000000a6 128%);}
/* Teinte phosphore en haut / braise en bas, façon tube cathodique */
html[data-mode="phone"] body::before{content:"";position:fixed;inset:0;z-index:98;pointer-events:none;
  background:linear-gradient(180deg,#4dff5807 0%,transparent 20%,transparent 80%,#e0243a0a 100%);
  mix-blend-mode:screen;}

.ph{height:100dvh;display:flex;flex-direction:column;
  font-family:'Pixelify Sans',monospace;
  background:
    radial-gradient(ellipse at 50% 112%, #e0243a16 0%, transparent 50%),
    radial-gradient(900px 620px at 50% -8%, #101a12 0%, transparent 62%),
    var(--goth-arches) top center / 220px 260px repeat,
    linear-gradient(180deg, #0a0b12 0%, var(--bg) 46%, #04050a 100%);
  max-width:560px;margin:0 auto;position:relative;}

/* --- Header : borne d'arcade / terminal --- */
.ph-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top, 10px) + 8px) 18px 10px 18px;}
/* Seul rescapé de la police pixel : le logotype. 8 lettres, sans accent,
   jamais lu en continu — c'est exactement le cas où elle fonctionne. */
.ph-logo{font-family:var(--font-logo);font-size:15px;font-weight:400;color:#f2f4fa;letter-spacing:1px;
  text-shadow:2px 0 0 #e0243a80, -2px 0 0 #4dff5850, 0 0 14px #e0243a55;}
.ph-sync{display:flex;align-items:center;gap:6px;background:#0a0d13;border:1px solid #2c3347;
  border-radius:0;padding:4px 10px;font-family:var(--font-term);font-size:11.5px;letter-spacing:.5px;
  color:var(--acid-mid);text-transform:uppercase;
  box-shadow:0 0 0 1px #05060a, inset 0 0 8px #00000080;}

.ph-main{flex:1;overflow-y:auto;padding:2px 16px calc(env(safe-area-inset-bottom, 8px) + 16px) 16px;
  -webkit-overflow-scrolling:touch;
  /* Balayage latéral entre onglets (22/07 soir 6) : on réserve le geste
     HORIZONTAL au JS (changement d'onglet) et on laisse le geste vertical au
     défilement natif. Sans `pan-y`, iOS traite le glissement horizontal comme
     un « retour arrière » de page ou l'avale dans l'inertie du scroll. */
  touch-action:pan-y;}
/* Les défileurs horizontaux imbriqués (carrousel d'œufs) REPRENNENT la main :
   feuilleter les œufs ne doit pas changer d'onglet. Le JS les ignore aussi
   (`data-rail`), mais il faut le dire au navigateur ici. */
.ph-main [data-rail]{touch-action:pan-x;}
/* Écran Créature (20/07) : colonne flex plein écran — la SCÈNE est l'élément
   extensible (flex:1 inline dans phHome) : elle absorbe la hauteur libre, la
   créature a un maximum de place et les sections descendent remplir l'écran.
   Sur petit écran la scène se replie à son min-height et le scroll reprend. */
.ph-main.is-home{display:flex;flex-direction:column;
  /* Le bloc du bas descend jusqu'au bord de l'écran (20/07 soir 3) : plus de
     bande morte au-dessus de l'indicateur d'accueil, tout l'espace gagné va
     à la créature. */
  padding-bottom:calc(env(safe-area-inset-bottom, 6px) + 6px);}
.ph-main.is-home>*{flex:none;}
/* Bloc du bas compacté SUR CET ÉCRAN UNIQUEMENT (les autres écrans gardent
   leur respiration) : cartes, jauges et dalles de soins resserrées. */
.ph-main.is-home .ph-card{padding:10px 12px;margin-top:8px;}
.ph-main.is-home .ph-bar{height:11px;}
.ph-main.is-home .ph-bar-label{font-size:13px;margin-top:6px;}
.ph-main.is-home .ph-care{margin-top:8px;}
.ph-main.is-home .ph-care>div{min-height:56px;gap:1px;}
.ph-main.is-home .ph-care .cl{font-size:12px;}
.ph-main.is-home .ph-care .cs{font-size:11px;line-height:1.25;}
.ph-main.is-home .ph-chip{font-size:13.5px;}

/* --- Tab bar : console arcade — EN HAUT, sous le header (20/07) --- */
.ph-tabs{flex:none;display:flex;background:#06080df2;border-bottom:2px solid #1d2230;
  box-shadow:0 1px 0 #4dff5822, 0 14px 32px #000c;
  padding:4px 8px 6px 8px;backdrop-filter:blur(14px);}
.ph-tab{flex:1;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border-radius:0;color:var(--text-dim);}
.ph-tab .tl{font-family:var(--font-pixel);font-size:10.5px;letter-spacing:1px;font-weight:400;text-transform:uppercase}
.ph-tab .td{width:5px;height:5px;border-radius:0;background:transparent}
.ph-tab.on{color:#f2f4fa;text-shadow:0 0 10px #e0243a99}
.ph-tab.on .td{background:var(--accent);box-shadow:0 0 8px var(--accent), 0 0 2px #fff8}

/* --- Carte = fenêtre de dialogue RPG : double bordure + brackets HUD acide --- */
.ph-card{
  background:
    linear-gradient(var(--acid) 0 0) top 4px left 4px / 12px 2px no-repeat,
    linear-gradient(var(--acid) 0 0) top 4px left 4px / 2px 12px no-repeat,
    linear-gradient(var(--acid) 0 0) top 4px right 4px / 12px 2px no-repeat,
    linear-gradient(var(--acid) 0 0) top 4px right 4px / 2px 12px no-repeat,
    linear-gradient(var(--acid) 0 0) bottom 4px left 4px / 12px 2px no-repeat,
    linear-gradient(var(--acid) 0 0) bottom 4px left 4px / 2px 12px no-repeat,
    linear-gradient(var(--acid) 0 0) bottom 4px right 4px / 12px 2px no-repeat,
    linear-gradient(var(--acid) 0 0) bottom 4px right 4px / 2px 12px no-repeat,
    linear-gradient(180deg,#0e1119 0%,#0a0d13 100%);
  border:1px solid #2c3347;border-radius:0;padding:16px;margin-top:14px;
  box-shadow:0 0 0 3px #04050a, 0 0 0 4px #1d2230, 0 12px 28px #000c, inset 0 0 26px #00000073;}
.ph-card h3{margin:0 0 10px 0;font-family:var(--font-pixel);font-size:13.5px;font-weight:400;
  letter-spacing:1px;text-transform:uppercase;color:var(--text)}
.ph-card h3::before{content:"▸ ";color:var(--acid)}
.ph-sec{font-family:var(--font-pixel);font-size:12px;letter-spacing:1.5px;color:var(--acid-dim);
  text-transform:uppercase;margin:20px 4px 6px 4px;display:flex;align-items:center;justify-content:space-between;
  text-shadow:0 0 8px #4dff5833}
.ph-sec::after{content:"";flex:1;height:1px;margin-left:10px;
  background:linear-gradient(90deg,#4dff5840,transparent)}

/* --- En-tête de groupe REPLIABLE (onglet Tâches) ---------------------
   Le chevron porte `order:2` : sans lui il se placerait AVANT le trait
   décoratif (::after, ordre 0) et viendrait se coller au titre au lieu
   de tenir le bord droit. Zone de tap ≥ 44 px de haut comme partout. */
.ph-sec-tog{cursor:pointer;min-height:44px;margin-top:14px;user-select:none;
  -webkit-tap-highlight-color:transparent}
.ph-sec-tog:hover{color:var(--acid)}
.ph-sec-tog:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.ph-sec-chev{order:2;flex:none;margin-left:10px;font-family:var(--font-term);
  font-size:13px;letter-spacing:0;color:var(--acid-mid);transition:color .15s}
.ph-sec-tog.is-collapsed{color:#707a94;text-shadow:none}
.ph-sec-tog.is-collapsed .ph-sec-chev{color:#d98e2b}

/* --- Barre d'action de l'onglet Tâches : titre + bouton « ＋ » ------- */
.ph-tasks-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:14px 4px 4px 4px}
.ph-tasks-title{font-family:var(--font-pixel);font-size:13px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text);text-shadow:0 0 8px #4dff5833}
.ph-add{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,#ff3b52 0%,#c1152b 100%);
  box-shadow:0 0 0 2px #04050a, 0 0 0 3px #6e1020, inset 0 2px 0 #ff8493,
    inset 0 -4px 0 #8f1626, 0 0 18px #e0243a44;
  transition:transform .12s ease, filter .12s ease}
.ph-add:hover{filter:brightness(1.12)}
.ph-add:active{transform:translateY(2px)}
.ph-add:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.ph-add.on{background:linear-gradient(180deg,#141a26,#0d1119);color:var(--acid-mid);
  box-shadow:0 0 0 2px #04050a, 0 0 0 3px #2c3347, inset 0 2px 0 #ffffff0d, inset 0 -4px 0 #05070c;
  font-size:17px}

/* --- Ligne d'état de l'évolution (remplace l'ancien bouton « Évoluer ») --- */
.evo-auto{margin-top:16px;padding:12px 14px;text-align:center;font-size:12.5px;
  line-height:1.5;color:#828da6;background:#0b0e15;border:1px solid #242b3d;
  box-shadow:0 0 0 1px #04050a}
.evo-auto.is-ready{color:#ff8a97;border-color:#5c1f2b;background:#1a0f14;
  box-shadow:0 0 0 1px #04050a, 0 0 18px #e0243a33}

/* ================================================================
   BLOC RETOURNABLE « Avancement » ⇄ « Conditions » (22/07 soir 6)
   ----------------------------------------------------------------
   Un tap fait pivoter le bloc autour de son axe vertical. La face
   VISIBLE reste en flux (`position:relative`) et donne donc sa hauteur
   au conteneur : les deux faces n'ont pas du tout la même taille (une
   barre d'un côté, quatre conditions détaillées de l'autre) et une
   hauteur figée aurait soit tronqué le verso, soit laissé un grand
   vide sous le recto.

   `backface-visibility:hidden` fait tout le travail de masquage : on
   n'a pas à basculer `display`, ce qui casserait la transition.
   ================================================================ */
/* La perspective est portée par la TRANSFORMATION elle-même (`perspective()`)
   et non par le parent : `.ph-main` sert à une dizaine d'écrans, lui poser une
   perspective globale ferait subtilement fuir toutes les autres transformations
   de l'app (animations de la créature comprises). */
.evo-flip{position:relative;margin-top:2px;cursor:pointer;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.1,.2,1);
  transform:perspective(1400px) rotateY(0deg);}
.evo-flip.is-flipped{transform:perspective(1400px) rotateY(180deg);}
.evo-flip:focus-visible{outline:2px solid var(--acid);outline-offset:4px;}
.evo-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;margin-top:0;}
/* Recto visible → en flux ; verso rabattu derrière, calé sur la même boîte. */
.evo-front{position:relative;}
.evo-back{position:absolute;inset:0;transform:rotateY(180deg);overflow:hidden;}
/* Retourné : les rôles s'échangent, c'est le verso qui porte la hauteur. */
.evo-flip.is-flipped .evo-front{position:absolute;inset:0;overflow:hidden;}
.evo-flip.is-flipped .evo-back{position:relative;inset:auto;}
/* Invitation à retourner — discrète, en bas de chaque face. */
.evo-turn{margin-top:12px;text-align:center;font-family:var(--font-term);
  font-size:11.5px;letter-spacing:.5px;color:#4a5468;}
.evo-flip:hover .evo-turn{color:var(--acid-dim);}

/* ---- « Il y a quelque chose derrière » (22/07 soir 7) ----------------
   Un bloc qui se retourne ne se devine pas : rien à l'écran ne dit qu'une
   carte a deux faces. Deux signaux, l'un permanent, l'autre temporaire.
   1) `.evo-badge` : pastille de coin, toujours visible, dit le fait.
   2) `.is-teasing` : le bloc FRÉMIT toutes les ~6 s tant que le joueur ne
      l'a jamais retourné (`evoFlipSeen`), en amorçant le pivot sur quelques
      degrés — on aperçoit l'épaisseur, donc l'existence d'un verso.
   L'animation porte sur `.evo-flip` lui-même : c'est lui qui possède la
   transformation de retournement, animer une face séparément créerait un
   second contexte 3D et ferait clignoter le `backface-visibility`. */
.evo-badge{position:absolute;top:8px;right:10px;font-family:var(--font-term);
  font-size:10px;letter-spacing:.5px;color:var(--acid-dim);
  border:1px solid #242b3d;border-radius:999px;padding:2px 8px;
  background:#0b0e15;opacity:.85;pointer-events:none;}
@keyframes evoPeek{
  0%,82%,100%{transform:perspective(1400px) rotateY(0deg);}
  87%{transform:perspective(1400px) rotateY(-11deg);}
  92%{transform:perspective(1400px) rotateY(5deg);}
  96%{transform:perspective(1400px) rotateY(-2deg);}
}
.evo-flip.is-teasing:not(.is-flipped){animation:evoPeek 6.5s ease-in-out infinite;}
.evo-turn.is-calling{color:var(--acid-dim);}
@media (prefers-reduced-motion:reduce){
  .evo-flip.is-teasing:not(.is-flipped){animation:none;}
}
/* Titre de section à l'intérieur du verso (le `.ph-sec` global a une marge
   haute faite pour séparer deux blocs, pas pour ouvrir une carte). */
.evo-sec-back{font-family:var(--font-pixel);font-size:12px;letter-spacing:1.5px;
  color:var(--acid-dim);margin:2px 0 4px 0;}
.evo-cond{background:#0b0e15;border:1px solid #242b3d;border-left:3px solid #8f1626;
  padding:10px 13px;margin-top:8px;box-shadow:0 0 0 1px #04050a;}
/* Condition encore scellée : rayée en diagonale, sans aucun contenu lisible. */
.evo-cond.is-sealed{border-left-color:#242b3d;opacity:.75;
  background:repeating-linear-gradient(135deg,#0b0e15 0 7px,#0e121b 7px 14px);}
.evo-reveal{margin-top:10px;padding:9px 12px;text-align:center;font-size:11.5px;
  line-height:1.5;color:#d98e2b;background:#160f08;border:1px solid #3a2a12;}
/* Phrase d'explication sous un titre de section (ex. « Style de jeu »). */
.evo-note{margin:-2px 0 8px 0;font-size:11.5px;line-height:1.5;color:#828da6;}

/* --- Bouton : gros bouton d'arcade (bevel pixel, pas d'arrondi) --- */
.ph-btn{min-height:48px;border-radius:0;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-pixel);font-size:15px;font-weight:400;letter-spacing:1px;text-transform:uppercase;
  color:#fff;background:linear-gradient(180deg,#ff3b52 0%,#c1152b 100%);
  text-shadow:0 2px 0 #7c0f1f;
  box-shadow:0 0 0 2px #04050a, 0 0 0 3px #6e1020, inset 0 2px 0 #ff8493, inset 0 -4px 0 #8f1626, 0 0 18px #e0243a44;}
.ph-btn.ghost{background:linear-gradient(180deg,#141a26,#0d1119);color:var(--acid-mid);text-shadow:none;
  box-shadow:0 0 0 2px #04050a, 0 0 0 3px #2c3347, inset 0 2px 0 #ffffff0d, inset 0 -4px 0 #05070c;}
.ph-btn.dis{opacity:.45;filter:saturate(.4)}

/* --- Rangée de tâche : entrée de quête --- */
/* `align-items:flex-start` : les détails sont désormais empilés, la rangée est
   haute — case et étoile doivent rester en HAUT, alignées sur le titre, pas
   flotter au milieu d'une pile de lignes. */
.ph-task{display:flex;align-items:flex-start;gap:12px;background:#0b0e15;border:1px solid #242b3d;
  border-left:3px solid var(--accent);border-radius:0;padding:11px 13px;margin-top:8px;min-height:52px;
  box-sizing:border-box;box-shadow:0 0 0 1px #04050a, inset 0 1px 0 #ffffff06;}
.ph-task:hover{border-left-color:var(--acid)}
.ph-task .tt{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-task .ts{font-family:var(--font-term);font-size:10.7px;color:var(--acid-dim);margin-top:2px;letter-spacing:.5px}
/* --- UNE LIGNE PAR DÉTAIL (22/07 soir 6) ---
   Grille à deux colonnes : la clé (largeur fixe, donc toutes les valeurs
   s'alignent d'une tâche à l'autre) puis la valeur, qui peut revenir à la
   ligne — c'est le cas d'une note un peu longue. */
.ph-task-det{margin-top:5px;display:grid;grid-template-columns:auto 1fr;
  gap:2px 8px;align-items:baseline;font-family:var(--font-term);font-size:11px;}
.ph-task-det .dl{display:contents;}
.ph-task-det .dk{color:#4a5468;letter-spacing:.5px;white-space:nowrap;}
.ph-task-det .dv{font-weight:700;letter-spacing:.3px;min-width:0;overflow-wrap:anywhere;}
.ph-check{width:30px;height:30px;flex:none;border-radius:0;border:2px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;
  box-shadow:inset 0 0 6px #0009}
/* Tâche épinglée : liseré doré + fond légèrement relevé */
.ph-task.fav{border-left-color:var(--gold);background:#0e1017;
  box-shadow:0 0 0 1px #04050a, inset 0 1px 0 #ffffff06, inset 3px 0 12px #d98e2b1f}
/* Étoile de favori : cible tactile propre, distincte de la case et de la rangée */
.ph-fav{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;border:1px solid transparent;
  text-shadow:0 0 8px #00000099;transition:color .13s, text-shadow .13s}
/* Étoile de la feuille de détail (22/07 soir 6) : remplace le bouton pleine
   largeur « ☆ Ajouter aux favoris ». Même cible que sur la rangée (34 px). */
.ph-sheet-star{flex:none;width:34px;height:34px;border-radius:17px;background:#171b26;
  border:1px solid #2c3347;color:#3f4757;display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;cursor:pointer;transition:color .13s, border-color .13s}
.ph-sheet-star.on{color:var(--gold);border-color:#5a4415;
  box-shadow:0 0 12px #d98e2b33}
.ph-sheet-star:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.ph-fav:hover{border-color:#2c3347;color:var(--gold)!important;text-shadow:0 0 10px #d98e2b88}

/* ================================================================
   COMPTEUR « GRIFFURES » (écran Série)
   Marques gravées façon décompte de cellule : chaque groupe = 5 jours
   (4 griffures + 1 transversale). Le SVG est produit par app.js ;
   ici on ne fait que la mise en page du mur.
   ================================================================ */
.ph-tally{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;margin-top:10px;padding:18px 14px;
  background:
    radial-gradient(ellipse at 30% 20%, #ffffff06 0%, transparent 60%),
    linear-gradient(180deg,#0d0f16 0%,#080a10 100%);
  border:1px solid #2c3347;box-shadow:0 0 0 3px #04050a, inset 0 0 30px #000000a6;}
.ph-tally .tally-g{opacity:.55;transition:opacity .2s}
.ph-tally .tally-g.full{opacity:1}
.ph-tally .tally-more{font-family:var(--font-term);font-size:13.9px;color:var(--text-dim);
  align-self:center;letter-spacing:1px}

/* --- Barres HP/MP segmentées --- */
.ph-bar{height:13px;background:#080b10;border:1px solid #2c3347;border-radius:0;overflow:hidden;
  position:relative;box-shadow:inset 0 2px 5px #000b, 0 0 0 1px #04050a}
.ph-bar>div{height:100%;border-radius:0;transition:width .5s;filter:saturate(1.15) brightness(1.06)}
.ph-bar::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 8px,#04050a 8px 10px)}
.ph-bar-label{display:flex;justify-content:space-between;font-family:var(--font-term);font-size:12.3px;
  color:var(--text-dim);margin:9px 0 4px 0;letter-spacing:1px;text-transform:uppercase}
.ph-bar-label b{color:var(--acid);font-weight:400;font-variant-numeric:tabular-nums;text-shadow:0 0 8px #4dff5844}

/* Scène créature : rosace gothique + grille-sol Y2K en perspective.
   ::before = grille (peinte sous les enfants positionnés), fonds inchangés. */
/* Hauteur par défaut = fallback : phHome pose une hauteur inline PAR STADE
   (CFG.phoneScene) — un œuf n'occupe plus 38dvh, fin du vide au-dessus. */
.ph-scene{position:relative;display:flex;align-items:flex-end;justify-content:center;
  height:min(38dvh, 320px);min-height:160px;cursor:pointer;overflow:hidden;
  background:
    radial-gradient(ellipse 240px 46px at 50% 99%, #00000066 0%, transparent 70%),
    var(--goth-rosace) center 12% / min(66vw, 300px) auto no-repeat,
    radial-gradient(ellipse at 50% 40%, #e0243a0b 0%, transparent 60%);}
.ph-scene::before{content:"";position:absolute;left:-30%;right:-30%;bottom:-2px;height:42%;
  background:
    repeating-linear-gradient(90deg,#4dff581f 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,#4dff5824 0 1px,transparent 1px 26px);
  transform:perspective(230px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 55%);
  pointer-events:none;}

/* --- Chips : tags terminal [ … ] --- */
.ph-chips{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.ph-chip{font-family:var(--font-term);font-size:12.3px;font-weight:400;background:#0a0d13;
  border:1px solid #2c3347;border-radius:0;padding:2px 8px;color:var(--text-mid);letter-spacing:.5px;
  box-shadow:0 0 0 1px #04050a}
.ph-chip::before{content:"[";color:#4dff5890;margin-right:4px}
.ph-chip::after{content:"]";color:#4dff5890;margin-left:4px}

/* --- Soins : slots d'inventaire --- */
.ph-care{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:0}
.ph-care>div{background:#0b0e15;border:1px solid #242b3d;border-radius:0;min-height:72px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 0 0 1px #04050a, inset 0 -3px 0 #05070c}
.ph-care>div:hover{border-color:var(--acid-dim)}
.ph-care .cl{font-size:12.5px;font-weight:700;color:var(--text)}
.ph-care .cs{font-family:var(--font-term);font-size:10px;color:var(--acid-dim);text-align:center;padding:0 3px}

/* --- Formulaires : champs terminal (surclasse les styles inline des templates) --- */
html[data-mode="phone"] input[data-bind], html[data-mode="phone"] select[data-bind]{
  border-radius:0 !important;background:#080b10 !important;border:1px solid #2c3347 !important;
  font-family:var(--font-term) !important;font-size:13.1px !important;color:#c9ffd2 !important;
  letter-spacing:.5px !important;}
html[data-mode="phone"] input[data-bind]::placeholder{color:#3f5a45;font-family:var(--font-term)}
/* Champ heure : sans color-scheme:dark, l'horloge native s'affiche en clair
   (fond blanc) et l'icône disparaît sur notre fond noir. */
input[type=time]{color-scheme:dark}
input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6);cursor:pointer}

.ph-overlay{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;max-width:560px;margin:0 auto}
.ph-toast{position:fixed;top:calc(env(safe-area-inset-top, 10px) + 8px);left:16px;right:16px;z-index:70;
  background:#0a0e16f8;border:1px solid #2c3347;border-left:3px solid var(--acid);border-radius:0;
  padding:12px 15px;display:flex;align-items:center;gap:9px;font-family:var(--font-term);font-size:13.1px;
  letter-spacing:.5px;box-shadow:0 0 0 1px #04050a, 0 10px 30px #000c, 0 0 18px #4dff5822;
  animation:toastin .3s ease-out;max-width:528px;margin:0 auto}

/* Scrollbar phosphore en mode téléphone */
html[data-mode="phone"] ::-webkit-scrollbar-thumb{background:#1e3a24}
html[data-mode="phone"] ::-webkit-scrollbar-thumb:hover{background:var(--acid-dim)}

/* Rouage des Réglages dans l'en-tête (22/07/2026 soir 2).
   44 px de zone tactile réelle pour une icône de 19 px : la cible reste
   conforme même si le dessin est petit. */
.ph-gear{
  flex:none;width:34px;height:34px;margin:-5px -4px -5px 2px;
  display:flex;align-items:center;justify-content:center;
  color:#9aa4ba;cursor:pointer;border-radius:17px;
  transition:color .14s ease,background .14s ease,transform .3s ease}
.ph-gear:hover{color:#e8ebf2;background:#ffffff0f}
.ph-gear.on{color:#ff5a6e;background:#e0243a1f;transform:rotate(60deg)}
.ph-gear:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ==================================================================
   CARROUSEL D'ŒUFS (22/07/2026)
   ------------------------------------------------------------------
   L'ancienne grille tassait 8 vignettes : sur téléphone chaque œuf
   faisait 40 % de largeur, le lore était illisible et le choix de
   départ — le premier écran du jeu — donnait une impression de liste
   administrative. Ici : un rail horizontal, une carte lisible à la
   fois, recalée par scroll-snap.

   `scroll-snap-type` + `overflow-x:auto` plutôt qu'un carrousel JS :
   l'inertie tactile native d'iOS est conservée, et le rail survit au
   patch DOM incrémental sans état à restaurer.
   ================================================================== */
/* ---- Écran de choix : 3 rangées, le carrousel absorbe le reste ----
   L'ancienne mise en page centrait un bloc de hauteur fixe : sur un grand
   écran, la moitié basse restait vide. Ici le rail est la rangée `1fr`,
   donc l'œuf grandit avec la fenêtre. */
.egg-screen{
  min-height:100vh;min-height:100dvh;box-sizing:border-box;
  display:grid;grid-template-rows:auto 1fr auto;gap:10px;
  padding:22px 16px 16px 16px;
  background:radial-gradient(1100px 800px at 50% -5%, #171420 0%, #050609 62%)}
.egg-screen-head{display:flex;flex-direction:column;align-items:center;gap:6px}
.egg-screen-sub{
  font-size:13px;color:#8a93a6;text-align:center;max-width:560px;
  margin:0 auto;line-height:1.6}
.egg-screen-foot{font-size:10.5px;color:#707a94;text-align:center;line-height:1.5}
/* Onboarding téléphone : même principe dans la coquille de l'app. */
.ph-main.egg-main{display:flex;flex-direction:column;gap:8px;min-height:0}
.ph-main.egg-main .egg-carousel{flex:1 1 auto;min-height:0}

.egg-carousel{position:relative;width:100%;max-width:1100px;margin:0 auto}
/* Mode plein cadre : le carrousel EST l'écran. */
.egg-carousel.is-plein{display:flex;flex-direction:column;min-height:0}
.egg-carousel.is-plein .egg-rail{flex:1 1 auto;min-height:0;align-items:stretch}
/* `padding-inline` à moitié de la largeur restante : avec scroll-snap-align
   center, la première et la dernière carte peuvent atteindre le centre de
   l'écran comme les autres. Sans ça elles restent collées aux bords. */
.egg-rail{
  display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:6px 0 16px 0;scrollbar-width:none}
.egg-rail::-webkit-scrollbar{display:none}
/* ---- La carte n'est plus une carte (22/07 soir 3) ----
   Ni fond, ni bordure, ni coin arrondi : l'œuf FLOTTE sur le fond de
   l'écran, comme la créature sur l'accueil. Le cadre le réduisait à une
   vignette de catalogue alors qu'il est le sujet de l'écran. Reste juste
   la colonne de texte sous lui. */
.egg-card{
  flex:0 0 auto;width:clamp(280px,42vw,460px);scroll-snap-align:center;box-sizing:border-box;
  background:none;border:0;border-radius:0;
  padding:0 10px 4px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;
  transition:opacity .18s ease}
/* Les œufs voisins s'effacent : l'œil va droit à celui du centre, et le rail
   se lit comme « il y en a d'autres » sans les détailler. La classe
   `.is-center` est posée en JS pendant le défilement (aucune règle CSS ne
   sait dire « l'élément le plus proche du centre du conteneur »). */
.egg-card{opacity:.3;transform:scale(.9);transition:opacity .22s ease,transform .22s ease}
.egg-card.is-center{opacity:1;transform:scale(1)}
.egg-card.is-center.is-locked{opacity:.62}

/* ---- L'œuf : grand, détouré, posé sur une lueur qui respire ----
   L'œuf est un PNG déjà détouré au pixel : on ne le retouche pas, on le
   pose sur un halo (`.egg-glow`) teinté de la flamme de sa lignée, et on
   lui ajoute une ombre portée de la même couleur. L'ensemble donne
   l'impression que la lueur vient de l'intérieur de la coquille. */
/* L'œuf prend TOUTE la hauteur libre de la carte (`flex:1`) au lieu d'une
   boîte figée : sur un grand écran il monte jusqu'à ~460 px, sur un iPhone
   il occupe encore la moitié haute. C'est lui le sujet. */
.egg-art{
  flex:1 1 auto;min-height:clamp(190px,30vh,460px);width:100%;
  display:flex;align-items:center;justify-content:center;position:relative}
.egg-glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  /* 52 % et non 78 % : la lueur suit l'œuf, qui a été réduit d'un tiers
     (22/07 soir 4). Un halo resté large aurait rendu l'œuf encore plus petit
     par comparaison. */
  width:52%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 55%,
    color-mix(in srgb, var(--g) 55%, transparent) 0%,
    color-mix(in srgb, var(--g) 22%, transparent) 38%,
    transparent 68%);
  filter:blur(6px);
  animation:eggpulse 3.6s ease-in-out infinite}
/* La hauteur est posée EN LIGNE, en pourcentage (facteur de normalisation
   `k` de rules.js) : comme `.egg-art` est maintenant haute, ce pourcentage
   donne un grand œuf tout en gardant les 8 lignées à la même masse visuelle.
   `max-height` n'est là que comme garde-fou si le pourcentage déborde. */
/* Taille RÉDUITE D'UN TIERS (22/07 soir 4) — retour joueur : l'œuf mangeait
   l'écran. On ne touche PAS à `.egg-art` (qui garde `flex:1` et absorbe la
   hauteur libre : c'est lui qui tient l'équilibre de la page, cf. soir 3), on
   plafonne l'IMAGE. Le cadre respire donc comme avant, l'œuf y est simplement
   dessiné plus petit, et reste centré dans sa boîte. */
.egg-img{
  position:relative;max-width:62%;max-height:min(100%, clamp(130px,21vh,305px));
  object-fit:contain;object-position:50% 50%;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 22px color-mix(in srgb, var(--g, #e0243a) 50%, transparent));
  animation:eggfloat 5.2s ease-in-out infinite}
/* L'œuf FLOTTE (comme la créature sur l'accueil) : léger va-et-vient
   vertical plutôt que la respiration verticale de `breathe`. */
@keyframes eggfloat{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%    {transform:translateY(-10px) scaleY(1.02)}
}
.egg-art:has(.egg-img.is-locked) .egg-glow{display:none}
.egg-img.is-locked{filter:grayscale(1) brightness(.3);opacity:.85;animation:none}
/* Repli sans color-mix (navigateurs anciens) : la lueur reste visible. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .egg-glow{background:radial-gradient(circle at 50% 55%, var(--g) 0%, transparent 66%);opacity:.42}
  .egg-img{filter:drop-shadow(0 0 12px var(--g))}
}
@keyframes eggpulse{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.06)}
}
.egg-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;opacity:.75}

.egg-name{font-family:'Pixelify Sans',monospace;font-size:20px;font-weight:700;color:#f2f4fa;letter-spacing:.6px;text-align:center}
.egg-card.is-locked .egg-name{color:#6b7690}
.egg-traits{font-size:10.5px;font-weight:700;color:#e0243a;letter-spacing:.6px;text-align:center}
.egg-card.is-locked .egg-traits{color:#707a94}
.egg-lore{font-size:11px;color:#6b7690;line-height:1.55;text-align:center;min-height:68px}
.egg-cta{
  margin-top:auto;width:100%;min-height:44px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  background:#e0243a;border-radius:11px;
  font-size:13px;font-weight:700;color:#fff;cursor:pointer}
.egg-cta:hover{filter:brightness(1.12)}
.egg-cta.is-locked{background:#1b2030;color:#828da6;cursor:not-allowed}
.egg-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Flèches : posées SUR les bords du rail, présentes aussi au doigt —
   la boucle étant infinie, elles servent aussi d'indice « ça tourne ». */
.egg-nav{
  position:absolute;top:38%;z-index:3;width:40px;height:40px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  background:#12151fe8;border:1px solid #2c3347;color:#e8ebf2;
  font-size:24px;line-height:1;cursor:pointer;user-select:none;
  backdrop-filter:blur(4px)}
.egg-nav:hover{background:#1c2130;border-color:#e0243a}
.egg-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.egg-nav.prev{left:2px}
.egg-nav.next{right:2px}
.egg-hint{font-size:10px;color:#707a94;text-align:center;margin-top:2px;letter-spacing:.3px}

@media (prefers-reduced-motion:reduce){
  .egg-glow,.egg-img{animation:none}
  .egg-rail{scroll-behavior:auto}
}

/* ---- Roster : cartes des créatures possédées ---- */
.roster-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.roster-eggs{font-size:12px;font-weight:700;color:#d98e2b;background:#12151f;border:1px solid #232a3a;border-radius:10px;padding:7px 11px}
.roster-buy{font-size:12px;font-weight:700;color:#fff;background:#7a2030;border:1px solid #a33146;border-radius:10px;padding:8px 12px;cursor:pointer}
.roster-buy:hover{filter:brightness(1.15)}
.roster-buy.is-off{background:#151925;border-color:#242b3d;color:#6b7690;cursor:not-allowed}
.roster-hint{font-size:10.5px;color:#707a94;line-height:1.5;margin-bottom:10px}
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.roster-grid.is-phone{grid-template-columns:repeat(2,1fr)}
.roster-card{
  background:#0b0e15;border:1.5px solid #242b3d;border-radius:14px;
  padding:9px 6px 8px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;transition:border-color .14s ease,transform .14s ease}
.roster-card:hover{transform:translateY(-2px);border-color:#3a4358}
.roster-card.is-active{border-color:#e0243a;background:#12101a}
.roster-card:focus-visible{outline:2px solid #fff;outline-offset:2px}
.roster-badge{font-size:8.5px;font-weight:700;letter-spacing:.6px;color:#6b7690;text-transform:uppercase}
.roster-badge.on{color:#ff5a6e}
.roster-art{height:64px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.roster-name{font-size:11.5px;font-weight:700;color:#e8ebf2;text-align:center}
.roster-meta{font-size:9.5px;color:#707a94;text-align:center}

@media (max-width:640px){
  /* Une carte plein cadre, centrée : sur téléphone le carrousel montre UN œuf
     à la fois, en grand, avec un aperçu des voisins sur les côtés. */
  .egg-card{width:min(80vw,340px);padding:18px 14px 14px 14px}
  .egg-rail{gap:14px}
  /* Idem sur téléphone : boîte réduite d'un tiers (140→94, 34→23vw, 180→120). */
  .egg-art{height:clamp(94px,23vw,120px)}
  .egg-name{font-size:18px}
  .egg-nav{width:34px;height:34px;font-size:20px;top:34%}
  .egg-nav.prev{left:-2px}
  .egg-nav.next{right:-2px}
}