/* ============================================================
   Application EF — Design system du cabinet (Dr Haus Christophe)
   Tokens, formes "comic key-line", animations.
   ============================================================ */

/* ------------------------------------------------------------
   Toutes les couleurs de l'interface sont déclarées ici, et nulle
   part ailleurs. Une couleur écrite en dur dans un fichier .js ne
   suivrait pas le thème du cabinet : la personnalisation ne serait
   appliquée qu'à une partie de l'écran.
   Seules exceptions admises : js/svg.js, où les teintes décrivent
   les personnages illustrés (carnations comprises) et ne doivent
   surtout pas changer d'un cabinet à l'autre.

   Les blocs « couleurs du cabinet » sont ceux que js/theme.js
   recalcule quand un cabinet fournit ses propres couleurs. Les
   neutres, eux, sont structurels et ne bougent jamais.
   ------------------------------------------------------------ */
:root {
  /* --- Neutres structurels : encre / papier --- */
  --ink-950: #16161A;     /* titres d'alerte */
  --ink-900: #0E0E12;
  --ink-800: #2B2B34;     /* liseré intérieur du cadre téléphone */
  --ink-700: #2A2A33;
  --ink-600: #4A4A52;
  --ink-500: #6E6E7A;
  --ink-400: #9a9aa4;
  --ink-350: #CFCFD6;     /* bordures et boutons inactifs */
  --ink-300: #C2C2CC;
  --ink-250: #E3E6EA;     /* filets fins */
  --ink-220: #EAEAF0;     /* séparateur d'en-tête */
  --ink-200: #E2E2E8;
  --ink-150: #F0F0F4;     /* séparateur de ligne de tableau */
  --ink-100: #F1F1F4;
  --paper: #FFFFFF;
  --paper-50: #F7F7FA;
  --txt: #2A2A33;
  --txt-mid: #6E6E7A;
  --txt-low: #9a9aa4;

  /* --- Neutres structurels : état verrouillé (phases ado) --- */
  --verrou-fond: #D5DBE0;
  --verrou-bord: #9AA3AB;
  --verrou-ombre: #B3BBC2;

  /* --- Couleurs du cabinet : teintes de base --- */
  --blue: #2E9BD7;        --blue-d: #1E6F9E;
  --orange: #F26B21;      --orange-d: #C9501A;
  --magenta: #D81F77;     --magenta-d: #A8155A;
  --turq: #18B6C4;        --turq-d: #0E7C87;
  --violet: #6C3FC5;      --violet-d: #4F2C92;

  /* --- Couleurs du cabinet : variantes thème ado --- */
  --lime: #7FB800;        --lime-d: #5E8A00;
  --yellow: #FFC400;      --yellow-d: #D9A300;

  /* --- Couleurs du cabinet : variantes thème enfant (aplats plus vifs) --- */
  --pop-blue: #2E9BD7;
  --pop-orange: #F26B21;  --pop-orange-ink: #C4520F;
  --pop-magenta: #D81F77;
  --pop-turquoise: #18B6C4;
  --pop-lime: #9BC83B;    --pop-lime-ink: #5E8A00;  --pop-lime-tint: #E0EFBE;
  --pop-violet: #6C3FC5;  --pop-violet-mute: #7A5BB0;   /* série verrouillée */
  --pop-yellow: #FFD400;  --pop-yellow-tint: #FFF3BF;
  --pop-turquoise-tint: #CDEFF2;
  --pop-red: #E92D2D;     --pop-red-ink: #C0392B;   --pop-red-d: #AA0011;
  --or: #C9A227;          /* encadré d'avertissement à l'installation */

  /* --- Couleurs du cabinet : fonds très clairs (écrans et cartes) --- */
  --bleu-fond: #EAF6FC;         --bleu-fond-carte: #EAF1FB;    --bleu-puce: #BFD9F5;
  --violet-fond: #F3ECFB;       --violet-fond-carte: #F2EFF8;
  --orange-fond: #FFF6E9;       --orange-fond-carte: #FFF3DD;
  --turq-fond: #E3F5F7;
  --magenta-fond: #FCEEF5;
  --jaune-fond: #FFF6DC;
  --lime-fond: #F1FAE0;         --lime-fond-carte: #EFF8E2;
  --rouge-fond: #FDECEA;

  /* --- Formes et typographie (personnalisables par cabinet) --- */
  --radius-md: 16px;
  --radius-lg: 24px;
  --police-titre: Fredoka, system-ui, sans-serif;
  --police-texte: Nunito, system-ui, sans-serif;
  --police-affiche: Bangers, system-ui, sans-serif;   /* grands titres illustrés */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family:var(--police-texte);
  background: var(--ink-900);
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; }
.efp *::-webkit-scrollbar { width: 0; height: 0; }
.efp * { scrollbar-width: none; }

/* ---------- Cadre téléphone ---------- */
#stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 12px;
}
.phone {
  width: 390px;
  height: 844px;
  max-height: calc(100vh - 32px);
  background: var(--ink-900);
  border-radius: 48px;
  padding: 11px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 0 0 2px var(--ink-800);
  flex: none;
}
.screen-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notch {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 118px; height: 26px;
  background: var(--ink-900);
  border-radius: 16px;
  z-index: 40;
}

/* Plein écran sur mobile réel (PWA installée) */
@media (max-width: 440px) {
  #stage { padding: 0; }
  .phone {
    width: 100vw; height: 100vh; max-height: none;
    border-radius: 0; padding: 0; box-shadow: none;
  }
  .screen-wrap { border-radius: 0; }
  .notch { display: none; }
}

/* ---------- Boutons key-line génériques ---------- */
.kl-press { transition: transform .08s, box-shadow .08s; }
.kl-press:active { transform: translateY(3px); }

/* ---------- Animations ---------- */
@keyframes efBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes efPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 5px 0 var(--pulse-d, var(--blue-d)), 0 0 0 0 rgba(46,155,215,.45); }
  50% { transform: scale(1.03); box-shadow: 0 5px 0 var(--pulse-d, var(--blue-d)), 0 0 0 12px rgba(46,155,215,0); }
}
@keyframes efScreenIn { 0% { transform: translateX(18px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes efPop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes efTilePop { 0% { transform: scale(.85) translateY(10px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes efConf { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(700px) rotate(540deg); opacity: 0; } }

.screen-in { animation: efScreenIn .32s var(--ease-pop) both; }
.pop-in { animation: efPop .4s var(--ease-pop) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Roue ---------- */
.wheel-rotor { transition: transform 3.7s cubic-bezier(0.13, 0.79, 0.17, 1); }

/* ---------- Toast / confetti / modale ---------- */
.toast {
  position: absolute; left: 50%; bottom: 92px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: 88%;
  background: var(--ink-900); color: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0,0,0,.25);
  padding: 11px 18px;
  animation: efPop .3s var(--ease-pop) both;
}
.toast span { font-family:var(--police-titre); font-weight: 600; font-size: 14px; line-height: 1.3; text-align: center; display: block; }
.confetti-layer { position: absolute; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti-layer span { position: absolute; top: -20px; }
.modal-bg {
  position: absolute; inset: 0; z-index: 70;
  background: rgba(14,14,18,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
}
/* Fondu d'entrée du fond de modale, appliqué seulement à l'ouverture (pas à chaque re-rendu). */
.modal-anim-in { animation: efScreenIn .2s ease both; }
.no-fonts { font-synthesis: none; }