/* ===========================================================================
   JETONS DE LIBRA : seule source des couleurs, tailles, espacements et durées
   ===========================================================================

   Les autres feuilles ne contiennent AUCUNE valeur en dur : elles ne font que
   consommer ces noms. Couleurs et piles typographiques COPIÉES de
   ~/Model/web/tokens.css (référentiel, non modifié). Les couleurs de l'identité
   MD ne sont pas encore mesurées (md.yaml) : la palette du référentiel s'applique.
   Pile système : aucune police téléchargée, aucune requête vers un tiers.

   RÈGLES D'ALIGNEMENT
   - Centrés : le titre de la page, les illustrations, le cadre d'aperçu.
   - Alignés à gauche : les noms et textes des tuiles, les réglages, l'aide.
   - Pleine largeur de la tuile ou du panneau : les boutons d'action.
   - Côte à côte dans une tuile : la pilule « Écouter » à gauche, « Ouvrir » à droite.
   =========================================================================== */

:root {
  /* --- Couleurs (copie de ~/Model/web/tokens.css) ----------------------- */
  --texte-principal: #1B2733;
  --texte-secondaire: #5A6B7F;
  --fond-page: #F7F9FC;
  --fond-bloc: #FFFFFF;
  --fond-survol: #EDF3FA;
  --bordure: #E3E9F0;
  --bleu-marque: #215387;
  --bleu-lien: #2B6CB0;
  --texte-sur-marque: #FFFFFF;
  --fond-desactive: #EDF2F7;
  --texte-desactive: #9AA7B5;
  --focus: #2B6CB0;
  --succes-fond: #EDF7F1;
  --succes-bordure: #BFE3CE;
  --succes-texte: #1B7A4B;
  --erreur-fond: #FBEDEE;
  --erreur-bordure: #E8B4B8;
  --erreur-texte: #A61B2B;
  --voile: rgba(19, 26, 34, 0.55);
  --damier-a: #FFFFFF;           /* fond en damier sous une image transparente */
  --damier-b: #E3E9F0;
  /* Teintes des illustrations des tuiles (outils/illustrations.py), déclarées en
     jetons pour le logo : reportées telles quelles dans img/logo-libra.svg et favicon.svg. */
  --illustration-ciel: #D6E6F7;
  --illustration-mont-loin: #7FA6D3;
  --ombre-tuile: 0 1px 2px rgba(27, 39, 51, 0.06);
  --ombre-tuile-survol: 0 4px 12px rgba(27, 39, 51, 0.12);

  /* --- Typographie (copie de ~/Model/web/tokens.css) -------------------- */
  --police-texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --police-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --taille-petite: 0.8125rem;
  --taille-texte: 1rem;
  --taille-intertitre: 1.125rem;
  --taille-titre: 1.75rem;
  --graisse-normale: 400;
  --graisse-semi: 600;
  --graisse-forte: 700;
  --interligne: 1.5;
  --interligne-serre: 1.3;

  /* --- Mesure et marges latérales --------------------------------------- */
  --mesure-lecture: 72rem;          /* largeur maximale de la grille        */
  --mesure-panneau: 44rem;          /* largeur maximale d'un outil ouvert   */
  --marge-laterale: 1rem;           /* téléphone (390 px)                   */
  --marge-laterale-large: 2rem;     /* grand écran (seuil : 48rem, @media)  */
  --tuile-largeur-min: 16rem;       /* la grille passe de 1 à 4 colonnes    */

  /* --- Espacements verticaux : QUATRE valeurs, pas une de plus ---------- */
  --espace-1: 0.5rem;               /* entre un élément et son aide         */
  --espace-2: 1rem;                 /* entre deux éléments d'un bloc        */
  --espace-3: 1.5rem;               /* entre deux blocs, entre les tuiles   */
  --espace-4: 2.75rem;              /* entre deux groupes de la page        */

  /* --- Tuiles, panneaux et boutons -------------------------------------- */
  --tuile-marge-interieure: 1rem;
  --panneau-marge-interieure: 1.25rem;
  --bouton-distance-cadre: var(--espace-2);
  --bouton-hauteur: 3rem;           /* gros boutons, atteignables au pouce  */
  --bouton-marge-interieure: 0 1.25rem;
  --logo-entete: 3.5rem;            /* balance de l'en-tête, carrée          */
  --pilule-hauteur: 2.75rem;
  --pilule-icone: 1rem;
  --pilule-progression: 3px;
  --plan-infobulle: 5;              /* tuile à l'infobulle ouverte, sous le panneau (10) */
  --rayon: 0.5rem;
  --rayon-grand: 0.875rem;
  --rayon-rond: 999px;
  --trait: 1px;
  --trait-epais: 2px;
  --trait-focus: 3px;
  --illustration-ratio: 16 / 9;
  --apercu-hauteur-max: 60vh;
  --curseur-hauteur: 2.75rem;
  --zone-depot-hauteur: 8rem;
  --pastille-couleur: 3rem;

  /* --- Mouvement --------------------------------------------------------- */
  --duree-courte: 0.18s;
  --duree: 0.28s;
  --levee-survol: -2px;             /* la tuile monte légèrement au survol  */
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
  --opacite-appui: 0.85;
  --opacite-desactive: 0.55;
}

/* Mouvement réduit : plus aucune animation, mêmes états visibles. */
/* En-tête collé qui se réduit au défilement (mission « LIBRA public 05 »). */
:root {
  --entete-hauteur: 3.125rem;          /* la barre en haut de page (50 px, inchangée) */
  --entete-hauteur-reduite: 2.5rem;    /* la barre collée, après défilement            */
  --entete-logo-reduit: 1.125rem;      /* le logo réduit : la hauteur du texte « LIBRA » */
  --duree-entete: 0.28s;               /* taille et fondu de la barre                  */
  --plan-entete: 9;                    /* au-dessus des tuiles, sous le panneau d'outil */
  --entete-icone: 1.5rem;              /* l'icône du compte (buste), mission 06          */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-courte: 0s;
    --duree: 0s;
    --duree-entete: 0s;
    --levee-survol: 0;
  }
}

/* --- Planche d'identité : repères en % de la hauteur du cadre de 45 mm --- */
:root {
  --cadre-identite-ratio: 35 / 45;
  --cadre-identite-largeur: 18rem;
  --repere-couleur: rgba(255, 255, 255, 0.85);
  --repere-ombre: rgba(27, 39, 51, 0.55);
  --repere-epaisseur: 1px;
  --repere-sommet: 8.889%;          /* sommet de la tête à 4 mm du haut      */
  --repere-menton-haut: 80%;        /* menton à 36 mm : tête de 32 mm        */
  --repere-menton-bas: 88.889%;     /* menton à 40 mm : tête de 36 mm        */
  --repere-axe: 50%;
  --voile-etendue: 100vmax;         /* voile autour du cadre de recadrage    */
}