/* ============================================================================
   LECTOR : jetons de mise en page, posés AVANT toute page.
   ----------------------------------------------------------------------------
   Ils ne créent aucune couleur ni aucune taille de texte : celles-ci viennent
   de socle/web/tokens.css (copie figée de ~/Model/web). Ils nomment seulement
   les quelques mesures de mise en page dont LECTOR a besoin. Aucune page ne
   contient de valeur en dur : tout passe par ces variables.

   Règles d'alignement :
     1. Un seul bord gauche par page : titres, champs, encadrés et texte
        transcrit commencent sur la même ligne, celle de --lector-marge.
     2. Les boutons d'une rangée d'actions s'alignent à DROITE du cadre sur
        grand écran, et prennent toute la largeur sur téléphone.
     3. Entre un bouton et le bord de son cadre : --lector-bouton-bord,
        identique à la marge intérieure de l'encadré.
     4. Espacement vertical : UNIQUEMENT les quatre paliers --lector-v-*.
   ========================================================================= */
:root {
  /* Largeur de la mesure de lecture : une ligne de texte transcrit reste lisible. */
  --lector-mesure: 46rem;

  /* Marges latérales de la page : grand écran, puis téléphone (voir @media). */
  --lector-marge: var(--iav-espace-large, 24px);

  /* Échelle verticale limitée à QUATRE valeurs. */
  --lector-v-1: var(--iav-espace-petit, 8px);     /* étiquette et son champ        */
  --lector-v-2: var(--iav-espace-grand, 16px);    /* entre deux champs             */
  --lector-v-3: var(--iav-espace-large, 24px);    /* entre deux encadrés           */
  --lector-v-4: var(--iav-espace-section, 32px);  /* haut de page, grandes ruptures */

  /* Marge intérieure des encadrés, et distance bouton / bord de cadre. */
  --lector-encadre-interieur: var(--iav-espace-grand, 16px);
  --lector-bouton-bord: var(--lector-encadre-interieur);

  /* Hauteur de la barre de progression et de la zone de dépôt. */
  --lector-barre-hauteur: 10px;
  --lector-depot-hauteur: 6rem;
  --lector-rayon: 8px;
  /* Hauteur maximale du texte transcrit avant défilement interne. */
  --lector-texte-hauteur: 60vh;
}

@media (max-width: 600px) {
  :root {
    --lector-marge: var(--iav-espace-grand, 16px);
    --lector-encadre-interieur: var(--iav-espace-moyen, 12px);
  }
}

/* v2 : quelques mesures de plus, toujours sans couleur ni taille de texte. */
:root {
  --lector-cible: 44px;                 /* zone tactile minimale (bouton, drapeau)     */
  --lector-icone: 20px;                 /* l'ampoule de la pastille                     */
  --lector-drapeau-largeur: 24px;
  --lector-z-entete: 30;                /* le bandeau fixe, sous les panneaux flottants */
  --lector-z-pastille: 40;
  /* Hauteur réservée au bandeau fixe quand on saute à une ancre. */
  --lector-entete-reserve: calc(var(--iav-entete-logo-hauteur, 48px) + 2 * var(--lector-v-2));
}

/* LECTOR : les mesures propres au lecteur, toujours sans couleur ni taille de texte. */
:root {
  --lector-zone-hauteur: 14rem;          /* la zone de texte à coller               */
  --lector-drapeau-grand: 32px;          /* les drapeaux de la langue de lecture    */
  --lector-lecteur-hauteur: 40px;        /* le lecteur audio de la page             */
}
@media (max-width: 600px) {
  :root { --lector-zone-hauteur: 10rem; }
}