/* LECTOR : ce qui vaut sur TOUTES les pages (en-tête fixe, langues, pastille de
   retours, fiche, administration). Ne consomme que des jetons : lector-jetons.css
   et socle/web/tokens.css, avec leurs valeurs de repli. */

/* ── En-tête fixe (retour de David, étape 9a) ────────────────────────────────
   `sticky` et non `fixed` : le bandeau garde sa place dans le flux, il ne passe
   donc jamais par-dessus un titre, et le pied de page n'est pas touché. */
.iav-entete {
  position: sticky;
  top: 0;
  z-index: var(--lector-z-entete);
}
/* Une ancre (#vocabulaire, #donnees…) ne finit pas cachée sous le bandeau. */
:target, h1, h2, h3 { scroll-margin-top: var(--lector-entete-reserve); }

/* ── Sélecteur de langue (dans le menu, ou sous la carte de connexion) ───── */
.lector-langues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lector-v-1);
  margin: var(--lector-v-1) 0 0;
  padding: var(--lector-v-1) var(--iav-espace-moyen, 12px);
  border-top: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
}
.iav-connexion-panneau .lector-langues { justify-content: center; border-top: 0; margin-top: var(--lector-v-2); }
.lector-drapeau {
  display: inline-flex;
  align-items: center;
  gap: var(--lector-v-1);
  min-height: var(--lector-cible);
  padding: 0 var(--lector-v-1);
  border: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  border-radius: var(--iav-rayon-petit, 4px);
  background: var(--iav-fond-bloc, #FFFFFF);
  color: var(--iav-texte-principal, #1A202C);
  font: inherit;
  font-size: var(--iav-taille-petite, 12px);
  cursor: pointer;
}
.lector-drapeau img { display: block; width: var(--lector-drapeau-largeur); height: auto; border-radius: 2px;
                      box-shadow: 0 0 0 var(--iav-trait, 1px) var(--iav-bordure, #E3E9F0); }
.lector-drapeau.actif { border-color: var(--iav-focus, #2B6CB0); font-weight: var(--iav-graisse-semi, 600); }
.lector-drapeau:focus-visible { outline: 2px solid var(--iav-focus, #2B6CB0); outline-offset: 2px; }

/* ── Pastille de retours : copie de TABULA (idees.css), en jetons du socle ─── */
.retours-bouton {
  position: fixed; z-index: var(--lector-z-pastille);
  right: var(--lector-marge); bottom: var(--lector-marge);
  display: inline-flex; align-items: center; gap: var(--lector-v-1);
  min-height: var(--lector-cible);
  padding-inline: var(--iav-espace-grand, 16px);
  border-radius: var(--iav-rayon-rond, 999px);
  border: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  background: var(--iav-fond-bloc, #FFFFFF);
  color: var(--iav-texte-principal, #1A202C);
  font: inherit; font-size: var(--iav-taille-petite, 12px); font-weight: var(--iav-graisse-semi, 600);
  box-shadow: var(--iav-ombre-flottante, 0 4px 12px rgba(0, 0, 0, 0.12));
  cursor: pointer;
}
.retours-bouton img { width: var(--lector-icone); height: var(--lector-icone); }
.retours-bouton:hover, .retours-bouton:focus-visible { border-color: var(--iav-focus, #2B6CB0); }
.retours-panneau {
  position: fixed; z-index: var(--lector-z-pastille);
  right: var(--lector-marge);
  bottom: calc(var(--lector-marge) + var(--lector-cible) + var(--lector-v-1));
  width: min(22rem, calc(100vw - 2 * var(--lector-marge)));
  box-sizing: border-box;
  padding: var(--iav-espace-grand, 16px);
  border-radius: var(--iav-rayon-grand, 12px);
  border: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  background: var(--iav-fond-bloc, #FFFFFF);
  color: var(--iav-texte-principal, #1A202C);
  box-shadow: var(--iav-ombre-flottante, 0 4px 12px rgba(0, 0, 0, 0.12));
}
.retours-panneau-titre { margin: 0 0 var(--lector-v-1); font-weight: var(--iav-graisse-forte, 700); }
.retours-types { display: flex; flex-wrap: wrap; gap: var(--lector-v-2); margin-block-end: var(--lector-v-1);
                 font-size: var(--iav-taille-petite, 12px); }
.retours-panneau textarea { width: 100%; box-sizing: border-box; min-height: 6rem; resize: vertical; }
.retours-reponse { margin: var(--lector-v-1) 0 0; min-height: 1.2em; font-size: var(--iav-taille-petite, 12px); }
.retours-reponse-erreur { color: var(--iav-erreur-texte, #9B2C2C); }
.retours-actions { display: flex; gap: var(--lector-v-1); margin-block-start: var(--lector-v-1); }
/* Le pied ne doit pas passer sous la pastille : c'est le PIED qui lui laisse la
   place, par la classe `avec-barre-actions` du socle posée sur <body> (voir
   _base.html). Jamais de marge basse sur <body> : piège nº 6 du socle.
   La réserve vaut la hauteur RÉELLE de la pastille (jeton du socle
   `--iav-pied-reserve-barre`), et seulement là où elle recouvre le texte du
   pied : mesuré le 22/10/2026, jusqu'à 520 px de large, plus du tout dès 540.
   Au-dessus, aucune réserve : le pied garde son remplissage ordinaire. Le
   défaut de 24 + 66 px du socle (barre pleine largeur) laissait 90 px vides. */
.avec-barre-actions { --iav-pied-reserve-barre: 0px; }
@media (max-width: 600px) {
  .avec-barre-actions { --iav-pied-reserve-barre: calc(var(--lector-marge) + var(--lector-cible) + var(--lector-v-1)); }
}

/* ── Fiche « Mon compte », administration, mentions ─────────────────────── */
.lector-fiche { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr;
                gap: var(--lector-v-1) var(--lector-v-2); margin: 0; }
.lector-fiche dt { color: var(--iav-texte-secondaire, #5A6B7F); }
.lector-fiche dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .lector-fiche { grid-template-columns: 1fr; } .lector-fiche dd { margin-bottom: var(--lector-v-1); } }
.lector-vocabulaire { width: 100%; box-sizing: border-box; resize: vertical; }
.lector-sous-titre { margin: var(--lector-v-3) 0 var(--lector-v-1); }
.lector-admin-nav { display: flex; flex-wrap: wrap; gap: var(--lector-v-1); margin-bottom: var(--lector-v-3); }
.lector-note { color: var(--iav-texte-secondaire, #5A6B7F); font-size: var(--iav-taille-petite, 12px); margin: var(--lector-v-1) 0 0; overflow-wrap: anywhere; }
.lector-legal { margin-top: var(--lector-v-4); font-size: var(--iav-taille-petite, 12px); }
.lector-legal a, .lector-meta a, .lector-liste-date a { color: var(--iav-bleu-lien, #2B6CB0); }
.lector-brouillon {
  padding: var(--lector-v-1) var(--lector-v-2);
  border-radius: var(--iav-rayon-petit, 4px);
  background: var(--iav-avertissement-fond, #FFF8E6);
  color: var(--iav-avertissement-texte, #7B5A00);
  border: var(--iav-trait, 1px) solid var(--iav-avertissement-bordure, #F2D8A0);
  font-weight: var(--iav-graisse-semi, 600);
}
.lector-jeton { display: block; overflow-wrap: anywhere; font-family: var(--iav-police-mono, monospace); user-select: all; }
.lector-retour-texte { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 12rem; }
.lector-supprimer { display: inline-block; }
.lector-supprimer > summary { list-style: none; }
.lector-supprimer > summary::-webkit-details-marker { display: none; }
.lector-supprimer[open] form { margin-top: var(--lector-v-1); }
.page .iav-tableau td { overflow-wrap: anywhere; }
/* Page Utilisateurs : une ligne d'informations, puis une ligne d'actions pleine largeur. */
.lector-ligne-compte td { border-bottom: 0; vertical-align: top; }
.lector-ligne-compte .iav-auth-pastille { margin-top: var(--iav-espace-minuscule, 2px); }
.lector-ligne-actions td { padding-top: 0; }
.lector-boutons-compte { display: flex; flex-wrap: wrap; gap: var(--lector-v-1); align-items: flex-start; }
.lector-plan-formulaire { flex-wrap: nowrap; }
.lector-plan-formulaire .iav-controle { min-width: 9rem; }
@media (max-width: 600px) { .lector-plan-formulaire { flex-wrap: wrap; } }
.lector-plan-formulaire .iav-bouton, .lector-boutons-compte .iav-bouton { white-space: nowrap; }
/* Les intitulés de colonnes peuvent passer à la ligne : un tableau large ne défile pas dès la tablette. */
.page .iav-tableau th { white-space: normal; }
/* Dans le menu ⚙ : une langue par ligne, boutons de même largeur (cinq langues). */
.iav-menu-liste .lector-langues { flex-direction: column; }
.iav-menu-liste .lector-drapeau { width: 100%; }

/* Mission 2.0 : la marque LECTOR dans le bandeau (icône + nom), et « Se connecter » sans compte. */
.lector-entete-icone { display: block; height: var(--iav-entete-logo-hauteur, 32px); width: auto; }
.lector-entete-nom {
  font-family: var(--iav-police-titre, Inter, -apple-system, sans-serif);
  font-size: var(--iav-entete-taille-module, 19px);
  font-weight: var(--iav-graisse-forte, 700);
  color: var(--iav-texte-inverse, #FFFFFF);
  white-space: nowrap;
}
.lector-entete-connexion { white-space: nowrap; }