/* =============================================================
   MNEMO — 00 — BASE
   Variables CSS, imports de fonts, reset.
   ============================================================= */

/* =============================================================
   MNEMO — Feuille de style
   Esthétique : neon-nightlife / festival electro
   ============================================================= */

/* Pile typographique « Pellicule » : Archivo en display (jusqu'au 900 des
   blocs d'annonce), Figtree en texte courant, Space Mono en utilitaire
   (horodatages, compteurs, tampons), Caveat pour les légendes manuscrites
   du polaroid. Unbounded et Permanent Marker sont retirés : 5 familles → 4.
   Les graisses 800 et 900 de Figtree sont désormais chargées — le CSS les
   utilisait déjà, mais l'import s'arrêtait à 700 (fausse graisse synthétique). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Figtree:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&family=Caveat:wght@600;700&display=swap');

/* ---------------------------------------------------------------
   Deux thèmes cohabitent. Tout ce qui distingue l'un de l'autre passe par
   les tokens ci-dessous : les 10 feuilles ne contiennent plus un seul
   littéral de couleur. Le thème « Pellicule » (papier / encre) est le
   défaut et vit ici ; le thème « Sommaire » (Direction B) redéfinit le même
   jeu de tokens dans 10-theme-sommaire.css, sous [data-theme="sommaire"].

   Les couleurs qui servent en aplat ET en voile sont déclinées en deux
   tokens : la forme solide (--encre) et les composantes RVB (--encre-rgb),
   parce que rgba() n'accepte pas une couleur déjà composée.
   --------------------------------------------------------------- */
:root {
  /* ---------------------------------------------------------------
     Palette « Pellicule » — papier / encre, lisible en plein soleil.
     Remplace l'ancienne palette néon sombre.
     --------------------------------------------------------------- */

  /* Papier */
  --papier:    #F6F1E7;
  --papier-2:  #ECE5D6;
  --papier-3:  #E7DFCF;
  --papier-4:  #DDD3BD;

  /* Encres */
  --encre:     #201B16;   /* 13.9:1 sur papier */
  --tampon:    #E0421B;   /* accent principal, 4.1:1 */
  --bleue:     #2547C9;   /* accent secondaire, 6:1 */

  --bg:        #F6F1E7;
  --bg-2:      #ECE5D6;
  --bg-3:      #E7DFCF;
  --surface:   rgba(246, 241, 231, 0.9);
  --border:    rgba(32, 27, 22, 0.16);
  --text:      #201B16;
  --text-dim:  #7A7060;
  --text-mute: #8B7F6C;

  /* Surface haute : cartes, modales, cadre du polaroid, pastilles posées
     sur un média. C'est le « blanc » de l'app — plus clair que le fond. */
  --carte:     #FFFDF7;

  /* Encres secondaires : atténuée sur carte, très atténuée, et l'encre
     posée sur un aplat d'accent (badge, onglet actif, bouton plein). */
  --encre-2:   #A79C88;
  --encre-3:   #554C3F;
  --sur-accent: #201B16;

  /* Ce qui se pose sur le dégradé signature (bouton primaire, avatar,
     pastille de compteur) : sur papier c'est du blanc, pas de l'encre. */
  --sur-grad:  white;

  /* Blanc vif — obturateur de l'appareil, pastille d'interrupteur, chips
     actives du viseur. Distinct de --carte, qui est un blanc cassé. */
  --papier-vif: white;

  /* Tête de lecture de l'histogramme (trait + pastille). */
  --curseur:   white;

  /* Composantes RVB, pour les filets, voiles et ombres en alpha.
     --ombre-rgb est distinct de --encre-rgb : une ombre portée reste
     sombre dans les deux thèmes, alors qu'un filet d'encre s'inverse. */
  --encre-rgb:  32, 27, 22;
  --ombre-rgb:  32, 27, 22;
  --carte-rgb:  255, 253, 247;
  --tampon-rgb: 224, 66, 27;
  --jaune-rgb:  168, 118, 27;
  --bleue-rgb:  37, 71, 201;
  --papier-rgb: 246, 241, 231;
  --papier4-rgb: 221, 211, 189;
  --encre2-rgb: 167, 156, 136;

  /* Alias hérités : les anciens noms néon pointent vers les encres papier,
     ce qui évite de réécrire ~40 usages répartis dans les 10 feuilles.
     Les noms sont conservés volontairement — seule la valeur change. */
  --pink:      #E0421B;
  --cyan:      #2547C9;
  --purple:    #7A3EA1;
  --yellow:    #A8761B;
  --green:     #2F6A3A;

  --danger:    #B3202F;

  /* Effets — sur papier une lueur ne lit pas : on passe en ombre d'encre. */
  --glow-pink:   0 1px 6px rgba(32, 27, 22, 0.22);
  --glow-cyan:   0 1px 6px rgba(32, 27, 22, 0.22);
  --glow-purple: 0 1px 6px rgba(32, 27, 22, 0.22);

  /* Gradient signature — réservé au bouton de capture (parti pris de 1b).
     Décliné sur le tampon plutôt que rose→violet→cyan, qui jure sur papier. */
  --grad-primary: linear-gradient(135deg, #E0421B 0%, #C2331A 100%);
  --grad-hot:     linear-gradient(135deg, #E0421B 0%, #A8761B 100%);

  /* Rayons */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Coefficient d'arrondi. Les 167 rayons littéraux des feuilles sont écrits
     `calc(Npx * var(--r-k))` : le mettre à 0 met toute l'interface d'équerre
     sans toucher aux cercles vrais (border-radius: 50%), qui restent ronds. */
  --r-k: 1;
}

/* ------ Reset ------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }
body, #root { height: 100dvh; overflow: hidden; }

#root {
  display: flex;
  flex-direction: column;
  /* Garde-fou : empêche tout débordement horizontal causé par un enfant.
     Sans ça, un élément un poil trop large fait apparaître une scrollbar
     horizontale parasite sur tout le body — surtout visible avec les
     paramètres "Taille d'affichage" agrandis d'Android. */
  max-width: 100vw;
  overflow-x: hidden;
}

html, body {
  /* Empêche le scroll horizontal au niveau racine, même si un enfant
     casse les contraintes. C'est une double sécurité. */
  overflow-x: hidden;
  /* width: 100% au lieu de auto pour qu'iOS / Android respectent strictement
     la largeur du viewport, même quand un visualViewport zoom se produit. */
  width: 100%;
}

body {
  margin: 0;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Fond : papier uni. L'ancien mesh néon animé (rose / cyan / violet) est
   retiré — sur papier ces halos lisent comme des taches de couleur, et
   l'animation de dérive faisait respirer le fond sous les photos. Un très
   léger dégradé de bord suffit à éviter l'aplat parfaitement plat. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--carte-rgb), 0.9), transparent 70%),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(var(--papier4-rgb), 0.35), transparent 70%),
    var(--bg);
}

/* Grain du papier : en multiply il assombrit très légèrement la fibre, ce qui
   lit comme du grain d'impression. En overlay (thème néon) il éclaircissait. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }


/* ------ Mouvement réduit ------------------------------------ */
/* Respecte le réglage système « réduire les animations ». L'app en compte
   plusieurs qui tournent en continu (dégradés animés, pulsations, cascade
   d'apparition de la grille), ce qui peut gêner les personnes sensibles au
   mouvement — et vider la batterie pendant un événement.

   On neutralise animations et transitions plutôt que de les raccourcir : une
   transition très courte reste un mouvement. Les états finaux sont préservés,
   puisque forcer la fin de l'animation (`animation-play-state`) laisserait
   certains éléments dans leur état initial invisible. `scroll-behavior: auto`
   coupe aussi les défilements animés déclenchés par la jauge. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto !important; }
}