/* ==========================================================================
   BASE.CSS — Fondations du design system
   --------------------------------------------------------------------------
   C'est LE fichier à ouvrir pour changer l'identite visuelle de toute l'appli.
   Tout est en variables CSS (custom properties) : tu changes une valeur ici,
   ca se repercute sur TOUS les ecrans et TOUS les jeux automatiquement.

   Ne mets JAMAIS une couleur en dur ailleurs dans le projet.
   Toujours : color: var(--rose);  et jamais : color: #FF2E88;
   ========================================================================== */

/* --- La police. Chargee depuis Google Fonts, avec un fallback systeme au cas
       ou il n'y a pas de connexion (l'appli reste lisible hors-ligne). ------ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap');

:root {
  /* ====== PALETTE ======================================================= */
  /* Les 3 couleurs de marque demandees : rose / violet / noir. */
  --rose:        #FF2E88;   /* rose principal, sert aux accents forts */
  --rose-clair:  #FF7AB8;   /* rose adouci, pour les textes sur fond sombre */
  --violet:      #9B3FFF;   /* violet principal */
  --violet-clair:#C88DFF;   /* violet adouci */

  /* Les noirs. On n'utilise jamais du #000 pur : un noir legerement violace
     est beaucoup plus riche a l'oeil et evite l'effet "trou noir". */
  --noir:        #08050F;   /* fond de l'appli */
  --noir-2:      #120B1F;   /* fond des surfaces surelevees (cartes) */
  --noir-3:      #1C1030;   /* bordures / separateurs */

  /* Les textes. */
  --texte:       #FFFFFF;
  --texte-doux:  rgba(255,255,255,.62);  /* sous-titres, aides */
  --texte-faible:rgba(255,255,255,.34);  /* placeholders, mentions */

  /* ====== DEGRADES ======================================================= */
  /* Le degrade signature de l'appli : on le reutilise partout (boutons,
     titres, bordures lumineuses). C'est lui qui donne l'identite. */
  --grad: linear-gradient(135deg, var(--rose) 0%, var(--violet) 100%);
  /* Variante inversee, utile pour creer du contraste entre deux elements
     cote a cote sans changer de palette. */
  --grad-inv: linear-gradient(135deg, var(--violet) 0%, var(--rose) 100%);
  /* Degrade tres sombre pour les fonds de carte (presque noir, teinte). */
  --grad-carte: linear-gradient(160deg, rgba(155,63,255,.14) 0%, rgba(255,46,136,.06) 100%);

  /* ====== HALOS (glow) ==================================================== */
  /* Les ombres colorees qui font le style "neon". Elles remplacent les ombres
     grises classiques, qui rendraient l'appli terne. */
  --halo-rose:   0 0 40px rgba(255,46,136,.45);
  --halo-violet: 0 0 40px rgba(155,63,255,.45);
  --halo-doux:   0 8px 32px rgba(0,0,0,.55);

  /* ====== GEOMETRIE ====================================================== */
  --r-s:  12px;   /* rayon petit  : petits boutons, tags */
  --r-m:  20px;   /* rayon moyen  : boutons principaux, inputs */
  --r-l:  28px;   /* rayon grand  : cartes */
  --r-xl: 40px;   /* rayon tres grand : panneaux plein ecran */

  /* Espacements. Une echelle unique evite les "13px" et "17px" au hasard. */
  --e-1: 6px;  --e-2: 12px; --e-3: 18px;
  --e-4: 26px; --e-5: 38px; --e-6: 56px;

  /* ====== ANIMATION ====================================================== */
  /* Une courbe d'acceleration unique = toute l'appli bouge "pareil". */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   RESET — on repart d'une base propre et identique sur tous les navigateurs
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  /* On empeche le "rubber band" (rebond elastique) iOS : l'appli doit se
     comporter comme une app native, pas comme une page web qu'on scrolle. */
  overscroll-behavior: none;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--noir);
  color: var(--texte);
  /* -webkit-font-smoothing : rend la typo plus fine sur ecran Mac/Retina. */
  -webkit-font-smoothing: antialiased;
  /* On bloque la selection de texte : sur un jeu tactile, selectionner du
     texte par erreur en tapant est tres desagreable.
     ATTENTION : voir la regle juste en dessous, qui RE-AUTORISE la selection
     dans les champs de saisie. Sans elle, il devient impossible d'ecrire sur
     iPhone : WebKit propage user-select:none aux <input> et bloque le clavier.
     C'est un piege classique, ne supprime pas cette exception. */
  -webkit-user-select: none; user-select: none;
  /* Supprime le flash gris d'iOS quand on tape sur un element. */
  -webkit-tap-highlight-color: transparent;
  /* manipulation = on garde le scroll et le pincement, mais on supprime le
     delai de 300ms que le navigateur attend pour voir si c'est un double-tap.
     Applique globalement, toute l'appli repond instantanement au doigt. */
  touch-action: manipulation;
  overflow: hidden;  /* le scroll est gere ecran par ecran, pas globalement */
}

/* ==========================================================================
   EXCEPTION TACTILE : les champs de saisie doivent rester selectionnables
   --------------------------------------------------------------------------
   Sur iOS, un user-select:none herite du <body> empeche le champ de prendre
   le focus : le clavier ne s'ouvre pas et on ne peut rien taper. On re-autorise
   donc explicitement la selection sur tout ce qui se saisit.
   ========================================================================== */
input, textarea, select, [contenteditable] {
  -webkit-user-select: text !important;
  user-select: text !important;
  /* auto (et pas manipulation) : on laisse iOS gerer le curseur, la loupe et
     le placement du point d'insertion dans le texte. */
  touch-action: auto;
  cursor: text;
}

button, input { font-family: inherit; color: inherit; border: none; background: none; }
button {
  cursor: pointer;
  /* 44px = la taille minimale d'une cible tactile recommandee par Apple.
     En dessous, on rate le bouton une fois sur trois avec le pouce. */
  min-height: 44px;
  touch-action: manipulation;
}

/* ==========================================================================
   FOND ANIME — les "blobs" lumineux derriere l'appli
   --------------------------------------------------------------------------
   Deux taches de couleur floutees qui derivent lentement. C'est ce qui
   empeche le fond noir d'etre plat et mort. Cout quasi nul en performance
   (aucune image, juste des degrades radiaux animes en transform).
   ========================================================================== */
.fond {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;  /* le fond ne doit jamais intercepter les clics */
}
.fond::before, .fond::after {
  content: ''; position: absolute;
  width: 65vmax; height: 65vmax; border-radius: 50%;
  filter: blur(90px);          /* le flou qui cree l'effet "halo" */
  opacity: .5;
  will-change: transform;      /* previent le navigateur : anime en GPU */
}
.fond::before {
  background: radial-gradient(circle, var(--violet) 0%, transparent 65%);
  top: -25%; left: -20%;
  animation: derive-a 22s var(--ease) infinite alternate;
}
.fond::after {
  background: radial-gradient(circle, var(--rose) 0%, transparent 65%);
  bottom: -30%; right: -25%;
  animation: derive-b 26s var(--ease) infinite alternate;
}
@keyframes derive-a { to { transform: translate(22vw, 16vh) scale(1.25); } }
@keyframes derive-b { to { transform: translate(-18vw,-14vh) scale(1.15); } }

/* Grain leger par dessus le fond : casse les "bandes" visibles dans les
   degrades sur les grands aplats (banding), et donne un rendu plus premium. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   ACCESSIBILITE — respect du reglage systeme "reduire les animations"
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}