/* design-system.css — socle « Foyer Modern ». Lot 0 de la refonte UI/UX.
 *
 * Ce fichier ne restyle RIEN. Il déclare le vocabulaire, et les vues viennent s'y brancher lot par
 * lot. C'est délibéré : repointer les 2 292 lignes de styles.css d'un seul coup rendrait chaque
 * régression impossible à attribuer, alors qu'une migration écran par écran laisse à tout moment
 * une application qui fonctionne.
 *
 * Les anciens tokens (--accent, --bg, --radius…) restent en place et intacts tant que le dernier
 * écran n'est pas migré. Les deux vocabulaires cohabitent volontairement ; le nettoyage est le
 * dernier lot, pas le premier.
 *
 * Préfixe `--fm-` (Foyer Modern) : sans lui, --accent aurait deux significations selon l'écran,
 * et personne ne saurait laquelle s'applique.
 */

:root {
  /* ---- Marque -------------------------------------------------------------------------------
     Le violet passe de #6c5ce7 à #6038A8 : plus sombre, plus dense. Il devient marque et action,
     pas décoration — la règle du design system qui a le plus d'effet sur l'écran fini. */
  --fm-violet:        #6038A8;
  --fm-violet-clair:  #7C53C5;
  --fm-lilas:         #EEE8F8;

  /* ---- Neutres ------------------------------------------------------------------------------
     L'ivoire remplace le gris bleuté #f6f7fb comme fond : plus chaud, il laisse le violet porter
     seul l'accent au lieu de le concurrencer. */
  --fm-encre:         #211A2C;
  --fm-ivoire:        #F7F5F2;
  --fm-blanc:         #FFFFFF;
  --fm-ligne:         #E9E4EC;
  /* Assombri par rapport a la valeur de la spec (#81798C). Mesure : sur les fonds TEINTES —
     bande de la semaine, pastilles — ce gris donnait 3,7 a 4,4 pour un seuil de 4,5. Il passait
     sur blanc pur, d ou l illusion de conformite. Le token porte la correction pour que tout
     ce qui l utilise en profite, plutot que de rattraper cas par cas. */
  --fm-texte-2:       #6B6276;

  /* ---- Sémantique ---------------------------------------------------------------------------
     Jamais porteuses d'information à elles seules (WCAG) : toujours doublées d'un mot ou d'une
     icône. Distinctes de la couleur de marque, qui ne signifie ni succès ni danger. */
  --fm-rose:          #DF6C91;
  --fm-bleu:          #3478A9;
  --fm-vert:          #3D946F;
  --fm-ambre:         #E5A23D;

  /* ---- Typographie --------------------------------------------------------------------------
     Échelle fermée 10/11/13/19/28/38. Fermée veut dire : aucune taille hors de cette liste. C'est
     ce qui produit la hiérarchie que l'audit trouve absente aujourd'hui.
     16px reste la taille des CHAMPS DE SAISIE, indépendamment de l'échelle : en dessous, iOS zoome
     à la mise au point. Corrigé une fois, à ne pas réintroduire. */
  --fm-police: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Police d'AFFICHAGE, pour les titres d'écran et la salutation uniquement. Les maquettes opposent
     une serif à fort contraste au texte linéal ; c'est ce contraste qui leur donne leur caractère.
     Réservée aux titres : en texte courant, une didone de ce contraste devient pénible à lire sur
     téléphone. */
  --fm-police-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fm-t-10: 10px;
  --fm-t-11: 11px;
  --fm-t-13: 13px;
  --fm-t-19: 19px;
  --fm-t-28: 28px;
  --fm-t-38: 38px;
  --fm-saisie: 16px;
  --fm-gras-titre: 700;
  --fm-gras-fort:  800;
  --fm-gras-corps: 400;
  --fm-gras-moyen: 500;

  /* ---- Espacement — base 4 ------------------------------------------------------------------ */
  --fm-e-8:  8px;
  --fm-e-12: 12px;
  --fm-e-16: 16px;
  --fm-e-18: 18px;
  --fm-e-24: 24px;
  --fm-e-32: 32px;
  --fm-e-42: 42px;

  /* ---- Rayons -------------------------------------------------------------------------------
     Trois niveaux, du contrôle à la surface. Le rayon dit la nature de l'objet, pas son style. */
  --fm-r-controle:  9px;
  --fm-r-composant: 13px;
  --fm-r-surface:   20px;

  /* ---- Élévation ----------------------------------------------------------------------------
     Par défaut une bordure fine, pas une ombre. L'ombre est réservée à ce qui flotte réellement
     au-dessus du contenu — bouton Créer, panneau de filtres, dialogue. Une ombre sur une carte
     posée à plat ment sur sa position. */
  --fm-bord: 1px solid var(--fm-ligne);
  --fm-ombre-flottant: 0 10px 30px rgba(33, 26, 44, .14);
  --fm-ombre-focus:    0 0 0 3px rgba(96, 56, 168, .28);

  /* ---- Mouvement ---------------------------------------------------------------------------- */
  --fm-duree-courte: 160ms;
  --fm-duree-longue: 240ms;
  --fm-courbe: cubic-bezier(.2, .7, .3, 1);

  /* ---- Cible tactile ------------------------------------------------------------------------
     44px : le minimum de la spec, et le seuil au-dessous duquel une cible devient difficile à
     atteindre pour une main qui tient un enfant de l'autre. */
  --fm-cible: 44px;

  /* ---- Avatars — trois tailles, pas davantage ----------------------------------------------- */
  --fm-avatar-s: 28px;
  --fm-avatar-m: 38px;
  --fm-avatar-l: 60px;
}

/* Thème sombre : seuls les rôles changent, jamais les noms. Une valeur définie uniquement ici
   n'existerait pas en clair — chaque token ci-dessous a donc déjà sa définition plus haut. */
:root[data-theme="dark"] {
  --fm-encre:   #F2EFF6;
  --fm-ivoire:  #17131E;
  --fm-blanc:   #211A2C;
  --fm-ligne:   #332A40;
  --fm-texte-2: #A79DB3;
  --fm-lilas:   #2A2138;
  --fm-ombre-flottant: 0 10px 30px rgba(0, 0, 0, .5);
}

/* La spec impose que les animations disparaissent sous préférence de réduction de mouvement.
   Porté par les tokens plutôt que par chaque règle : une animation ajoutée plus tard sans y penser
   respecte quand même la préférence. */
@media (prefers-reduced-motion: reduce) {
  :root { --fm-duree-courte: 0ms; --fm-duree-longue: 0ms; }
}

/* Geist, auto-hébergée (SIL Open Font License, licence dans assets/fonts/). Un seul fichier
   variable de 69 Ko couvre les graisses 400 à 800 : neuf fichiers statiques auraient pesé plus
   lourd et forcé un choix de graisses figé.
   `format('woff2')` et non `woff2-variations` : cette seconde forme est une syntaxe héritée que
   certains navigateurs rejettent, ce qui ferait retomber silencieusement sur la police système —
   exactement la panne qu'on ne verrait pas. La plage de graisses est portée par font-weight.
   `swap` : aucun texte ne reste invisible pendant le chargement. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/playfair-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/geist-variable.woff2') format('woff2');
}