/* =====================================================================================================
   Pepe — tokens de design.
   FIXÉ : orange #E8531F (Antoine, 30/10) ; crème #F0E8D8, noir #111, gris #5E554C (site en ligne et refonte v1) ;
          #F7A242 et #DC530D mesurés sur le logo Instagram (03_DA-Maurice/instagram-2026-11-03/logo.jpg, 04/11).
   PROPOSÉ (06/11), EN ATTENTE DE LA CHARTE DE JUSTINE : tout le reste de ce fichier — échelle de texte, police système
          Apple (SF Pro par -apple-system), interlignes, espacements, rayons, ombres, bordures, neutres dérivés,
          états, thème sombre. Oui d'Antoine du 06/11 (« Oui, lance-le »). Aucun nouvel hex : chaque neutre est un
          mélange (color-mix) du crème, du noir, du blanc et de l'orange.
   Références d'Antoine : Linear, Things, Apple Calendar, Fantastical — densité, air, hiérarchie nette, peu de bordures.
   Règle d'usage : app.css n'écrit aucune valeur en dur ; il lit ces tokens.
   ===================================================================================================== */
:root {
  /* --- Couleurs fixées ou mesurées (charte provisoire de Maurice) --- */
  --creme: #F0E8D8; --encre: #111; --orange: #E8531F; --gris: #5E554C;
  --logo-fond: #F7A242; --logo-lettre: #DC530D;

  /* --- Police — proposé (06/11, refonte A « pro chaleureux » choisie par Antoine), en attente de la charte de Justine :
     Manrope (Google Fonts) pour l'interface, la police du système Apple en secours ; Caprasimo gardée pour la seule marque --- */
  --police: 'Manrope', -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --police-marque: 'Caprasimo', 'Cooper Black', Georgia, serif;
  --police-chiffres: ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Échelle de texte, 6 niveaux — proposé (06/11). En rem depuis le 10/11 : sur ordinateur (≥ 1200 px) la taille racine monte (voir plus bas), et textes, espacements, lignes et menu suivent d'un bloc. À 16 px de racine : 11, 12, 13, 15, 20 et 28 px. --- */
  --texte-1: 0.6875rem;   /* légende, capitales d'en-tête */
  --texte-2: 0.75rem;   /* méta, compteurs, badges */
  --texte-3: 0.8125rem;   /* interface dense : menu, listes, planning */
  --texte-4: 0.9375rem;   /* corps de lecture, champs */
  --texte-5: 1.25rem;   /* titre de partie */
  --texte-6: 1.75rem;   /* titre d'écran */
  --graisse-normale: 400; --graisse-moyenne: 500; --graisse-forte: 600; --graisse-titre: 800;
  --interligne-serre: 1.2; --interligne: 1.45; --interligne-large: 1.6;
  --espacement-capitales: .06em;

  /* --- Espacements de 4 en 4 — proposé (06/11) --- */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem;

  /* --- Rayons, bordures, cibles — proposé (06/11) --- */
  /* Refonte A (06/11, proposé, en attente de la charte de Justine) : rayons plus ronds, --r-5 pour les cartes. */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 20px; --r-rond: 999px;
  --trait: 1px; --cible: 44px; --cible-dense: 1.75rem;
  --largeur-barre: 15.5rem; --largeur-lecture: 46rem; --largeur-ecran: 80rem; --marge-contenu: var(--e-8);
  --duree: .12s; --courbe: cubic-bezier(.2, 0, 0, 1);

  /* --- Neutres dérivés du crème et du noir (clair) — proposé (06/11) --- */
  /* Refonte A « pro chaleureux » (06/11, proposé, en attente de la charte de Justine) : fond crème, cartes blanc chaud. */
  --fond: color-mix(in srgb, var(--creme) 80%, white);           /* zone de travail : crème */
  --fond-barre: color-mix(in srgb, var(--creme) 55%, white);     /* barre latérale et onglets du bas */
  --surface: color-mix(in srgb, var(--creme) 22%, white);        /* cartes, champs, menus : blanc chaud */
  --surface-creuse: var(--creme);                                 /* colonnes, puits, cases hors mois */
  --texte: var(--encre);
  --texte-second: var(--gris);                                   /* 6,9:1 sur --fond */
  --texte-tiers: color-mix(in srgb, var(--encre) 62%, var(--creme)); /* méta : ≥ 4,5:1 sur --fond et --surface */
  --ligne: color-mix(in srgb, var(--encre) 9%, transparent);
  --ligne-forte: color-mix(in srgb, var(--encre) 18%, transparent);
  --bord: var(--trait) solid var(--ligne);
  --champ-bord: color-mix(in srgb, var(--encre) 45%, var(--creme)); /* cadre des champs : ≥ 3:1 sur --surface (revue du 06/11) */

  /* --- Accent : l'orange fixé, et ses usages --- */
  --accent: var(--orange);                                        /* aplats, traits, pastilles */
  --accent-sur: var(--encre);                                     /* texte posé sur l'orange : 4,7:1 (le crème ferait 3,4:1) */
  --accent-texte: color-mix(in srgb, var(--orange) 74%, var(--encre)); /* orange lisible en petit texte : ≥ 4,5:1, crème compris (refonte A) */
  --accent-doux: color-mix(in srgb, var(--orange) 12%, transparent);
  /* --- Feuille imprimée (devis A4, D-129) — proposé (09/11), en attente de la charte de Justine :
     papier blanc et encre, identiques en thème sombre (la feuille sort de l'imprimante) ; jamais redéfinis plus bas --- */
  --papier: white;
  --papier-texte: var(--encre);
  --papier-second: color-mix(in srgb, var(--encre) 68%, var(--papier));
  --papier-pale: color-mix(in srgb, var(--encre) 42%, var(--papier));
  --papier-ligne: color-mix(in srgb, var(--encre) 10%, var(--papier));
  --papier-accent: var(--logo-lettre);

  /* --- Ombres, 3 niveaux — proposé (06/11) --- */
  --ombre-1: 0 1px 0 color-mix(in srgb, var(--gris) 18%, transparent);
  --ombre-2: 0 1px 2px color-mix(in srgb, var(--encre) 6%, transparent), 0 4px 12px color-mix(in srgb, var(--encre) 8%, transparent);
  --ombre-3: 0 2px 6px color-mix(in srgb, var(--encre) 8%, transparent), 0 16px 40px color-mix(in srgb, var(--encre) 18%, transparent);

  /* --- États — proposé (06/11) --- */
  --survol: color-mix(in srgb, var(--encre) 5%, transparent);
  --actif: color-mix(in srgb, var(--encre) 9%, transparent);
  --selection: var(--accent-doux);
  --selection-texte: var(--accent-texte);
  --focus: 0 0 0 2px var(--fond), 0 0 0 4px var(--orange);  /* orange plein : ≥ 3:1 (revue du 06/11) */
  --desactive: .45;
  --vide-texte: var(--texte-tiers);
  --erreur: var(--accent-texte);
  --erreur-fond: color-mix(in srgb, var(--orange) 10%, transparent);
  --chargement-a: color-mix(in srgb, var(--encre) 5%, transparent);
  --chargement-b: color-mix(in srgb, var(--encre) 10%, transparent);
  --voile: color-mix(in srgb, var(--encre) 40%, transparent);

  /* --- Grain papier (signature Maurice) : désormais sous le contenu, plus jamais par-dessus le texte --- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-force: .06;

  /* --- Anciens noms, gardés pour le code existant --- */
  --doux: var(--texte-tiers);
  --corps: var(--police);
  --display: var(--police);
  color-scheme: light;
}

/* --- Échelle sur ordinateur (10/11, Antoine : « fais + zoomé »). Une seule variable : la taille racine.
   Texte courant 15 → 16 px, secondaire 13 → 14 px, méta 12 → 12,8 px. Sous 1200 px (dont le téléphone) rien ne change. --- */
@media (min-width: 1200px) { html { font-size: 106.7%; } }

/* --- Sombre — proposé (06/11) : le noir pour fond, le crème pour texte --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: color-mix(in srgb, var(--encre) 94%, var(--creme));
    --fond-barre: var(--encre);
    --surface: color-mix(in srgb, var(--encre) 88%, var(--creme));
    --surface-creuse: color-mix(in srgb, var(--encre) 97%, var(--creme));
    --texte: var(--creme);
    --texte-second: color-mix(in srgb, var(--creme) 76%, var(--encre));
    --texte-tiers: color-mix(in srgb, var(--creme) 62%, var(--encre));
    --ligne: color-mix(in srgb, var(--creme) 10%, transparent);
    --ligne-forte: color-mix(in srgb, var(--creme) 20%, transparent);
    --accent-texte: color-mix(in srgb, var(--orange) 65%, var(--creme));
    --champ-bord: color-mix(in srgb, var(--creme) 50%, var(--encre));
    --accent-doux: color-mix(in srgb, var(--orange) 20%, transparent);
    --ombre-1: 0 1px 2px color-mix(in srgb, black 40%, transparent);
    --ombre-2: 0 1px 2px color-mix(in srgb, black 40%, transparent), 0 4px 12px color-mix(in srgb, black 35%, transparent);
    --ombre-3: 0 2px 6px color-mix(in srgb, black 45%, transparent), 0 16px 40px color-mix(in srgb, black 55%, transparent);
    --survol: color-mix(in srgb, var(--creme) 6%, transparent);
    --actif: color-mix(in srgb, var(--creme) 11%, transparent);
    --chargement-a: color-mix(in srgb, var(--creme) 5%, transparent);
    --chargement-b: color-mix(in srgb, var(--creme) 11%, transparent);
    --voile: color-mix(in srgb, black 60%, transparent);
    --grain-force: .08;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: color-mix(in srgb, var(--encre) 94%, var(--creme));
  --fond-barre: var(--encre);
  --surface: color-mix(in srgb, var(--encre) 88%, var(--creme));
  --surface-creuse: color-mix(in srgb, var(--encre) 97%, var(--creme));
  --texte: var(--creme);
  --texte-second: color-mix(in srgb, var(--creme) 76%, var(--encre));
  --texte-tiers: color-mix(in srgb, var(--creme) 62%, var(--encre));
  --ligne: color-mix(in srgb, var(--creme) 10%, transparent);
  --ligne-forte: color-mix(in srgb, var(--creme) 20%, transparent);
  --accent-texte: color-mix(in srgb, var(--orange) 65%, var(--creme));
  --champ-bord: color-mix(in srgb, var(--creme) 50%, var(--encre));
  --accent-doux: color-mix(in srgb, var(--orange) 20%, transparent);
  --ombre-1: 0 1px 2px color-mix(in srgb, black 40%, transparent);
  --ombre-2: 0 1px 2px color-mix(in srgb, black 40%, transparent), 0 4px 12px color-mix(in srgb, black 35%, transparent);
  --ombre-3: 0 2px 6px color-mix(in srgb, black 45%, transparent), 0 16px 40px color-mix(in srgb, black 55%, transparent);
  --survol: color-mix(in srgb, var(--creme) 6%, transparent);
  --actif: color-mix(in srgb, var(--creme) 11%, transparent);
  --chargement-a: color-mix(in srgb, var(--creme) 5%, transparent);
  --chargement-b: color-mix(in srgb, var(--creme) 11%, transparent);
  --voile: color-mix(in srgb, black 60%, transparent);
  --grain-force: .08;
  color-scheme: dark;
}