/*
 * Coquille et composants de Viticole du monde.
 *
 * Sommaire
 *   1. Coquille : en-tete, contenu, barre d'onglets
 *   2. Icones et boutons
 *   3. Cartes, listes, puces, etiquettes
 *   4. Fiches : en-tete colore, paires cle/valeur, jauges, encadres
 *   5. Formulaires : recherche, segments, selecteurs
 *   6. Accueil : tuiles, barres de progression
 *   7. Lecons : article Markdown, etapes, schemas
 *   8. Quiz : question, reponses, correction, flashcards, resultat
 *   9. Carte : conteneur Leaflet, bandeau, legende
 *  10. Volet bas, toasts, etats vides, squelettes
 */

/* ---------- 1. Coquille ---------- */

.app {
  display: flex;
  flex-direction: column;
  min-height: var(--app-height);
}

.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  height: calc(var(--entete-h) + var(--safe-top));
  padding: var(--safe-top) var(--e-3) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}

.entete__titre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-lg);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.entete__actions {
  display: flex;
  gap: var(--e-1);
}

.principal {
  flex: 1;
  /* Reserve la place de la barre d'onglets, encoche du bas comprise. */
  padding-bottom: var(--above-tabbar);
  outline: none;
}

.ecran {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: 760px;
  padding: var(--e-4);
  margin: 0 auto;
}

.ecran--plein {
  max-width: none;
  padding: 0;
  gap: 0;
}

.ecran__titre {
  font-size: var(--fs-titre);
}

.ecran__intro {
  color: var(--encre-2);
}

.tabbar {
  position: fixed;
  right: 0;
  /* Descend la barre jusqu'au bord reel de l'ecran (voir --viewport-drift). */
  bottom: var(--viewport-drift);
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--surface);
  border-top: 1px solid var(--bordure);
}

/* Prolonge la couleur de la barre sous elle : filet de securite si un appareil annonce une
   hauteur fausse de quelques pixels. Invisible quand l'ajustement est exact. */
.tabbar::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 120px;
  background: var(--surface);
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  color: var(--encre-2);
  text-decoration: none;
  transition: color var(--duree) var(--courbe);
}

.tabbar__item--actif {
  color: var(--primaire);
}

.tabbar__icone {
  width: 24px;
  height: 24px;
}

.tabbar__label {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 340px) {
  .tabbar__label {
    display: none;
  }
}

/* ---------- 2. Icones et boutons ---------- */

/* Les <use> du sprite n'heritent pas des attributs du <svg> cache : le trait Lucide (2 px,
   sans remplissage, couleur du texte) est donc pose ici, sur chaque instance. */
.ic,
.tabbar__icone {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}

.ic--s { width: 1em; height: 1em; }
.ic--l { width: 1.75em; height: 1.75em; }
.ic--xl { width: 2.5em; height: 2.5em; }

.bouton-icone {
  display: grid;
  place-items: center;
  width: var(--controle);
  height: var(--controle);
  color: var(--encre);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  transition: background var(--duree) var(--courbe);
}

.bouton-icone:hover { background: var(--surface-2); }
.bouton-icone:active { background: var(--surface-3); }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--controle);
  padding: 0 var(--e-4);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--bordure-2);
  border-radius: var(--r-m);
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}

.bouton:hover { background: var(--surface-2); }
.bouton:active { background: var(--surface-3); }
.bouton:disabled { opacity: 0.5; cursor: default; }

.bouton--primaire {
  color: var(--sur-primaire);
  background: var(--primaire);
  border-color: var(--primaire);
}
.bouton--primaire:hover, .bouton--primaire:active { background: var(--primaire-2); border-color: var(--primaire-2); }

.bouton--fantome {
  background: transparent;
  border-color: transparent;
  color: var(--primaire);
}

.bouton--danger { color: var(--erreur); border-color: var(--erreur); }
.bouton--bloc { width: 100%; }
.bouton--petit { min-height: var(--controle-s); padding: 0 var(--e-3); font-size: var(--fs-sm); }

.rangee-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* ---------- 3. Cartes, listes, puces, etiquettes ---------- */

.carte-bloc {
  padding: var(--e-4);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-s);
}

.carte-bloc__titre {
  margin-bottom: var(--e-2);
  font-size: var(--fs-lg);
}

.carte-bloc--lien {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.carte-bloc--lien:hover { background: var(--surface-2); }
.carte-bloc--lien:active { border-color: var(--primaire); }

.etiquette-section {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-2);
  font-family: var(--font-texte);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--primaire);
  text-transform: uppercase;
}

.etiquette-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bordure);
}

.texte-2 { color: var(--encre-2); }
.texte-3 { color: var(--encre-3); }
.petit { font-size: var(--fs-sm); }
.tabulaire { font-variant-numeric: tabular-nums; }

.liste {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
  overflow: hidden;
}

.liste__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 56px;
  padding: var(--e-3) var(--e-4);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--bordure);
  transition: background var(--duree) var(--courbe);
}

.liste__item:last-child { border-bottom: 0; }
a.liste__item:hover, button.liste__item:hover { background: var(--surface-2); }

button.liste__item {
  width: 100%;
  text-align: left;
  background: transparent;
  border-right: 0;
  border-left: 0;
  border-top: 0;
}

.liste__pastille {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--couleur, var(--encre-3));
}

.liste__pastille--grande {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: var(--r-l);
}

.liste__corps { flex: 1; min-width: 0; }
.liste__titre { display: block; font-weight: 600; }
.liste__meta { display: block; font-size: var(--fs-sm); color: var(--encre-2); }
.liste__chevron { color: var(--encre-3); }

.puces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.puce {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 28px;
  padding: 2px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
}

a.puce:hover, button.puce:hover { border-color: var(--bordure-2); }
.puce--primaire { color: var(--primaire); background: var(--primaire-pale); }
.puce--or { color: var(--or); background: var(--or-pale); }
.puce--succes { color: var(--succes); background: var(--succes-pale); }
.puce--avert { color: var(--avert); background: var(--avert-pale); }
.puce--contour { background: transparent; border-color: var(--bordure-2); }
.puce--active { color: var(--sur-primaire); background: var(--primaire); border-color: var(--primaire); }

.puce__point {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--couleur, currentColor);
}

/* Codes couleur des vins */
.code-rouge { --couleur: var(--vin-rouge); }
.code-blanc { --couleur: var(--vin-blanc); }
.code-rose { --couleur: var(--vin-rose); }
.code-effervescent { --couleur: var(--vin-effervescent); }
.code-doux { --couleur: var(--vin-doux); }
.code-jaune { --couleur: var(--vin-jaune); }
.code-noir { --couleur: var(--vin-rouge); }

.badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-s);
  color: var(--avert);
  background: var(--avert-pale);
}

/* ---------- 4. Fiches ---------- */

.entete-fiche {
  --couleur-fiche: var(--primaire);
  padding: var(--e-5) var(--e-4);
  color: #fff;
  background: var(--couleur-fiche);
  border-radius: var(--r-l);
}

.entete-fiche__type {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.entete-fiche__nom {
  margin-top: var(--e-1);
  font-size: var(--fs-titre);
  color: #fff;
}

.entete-fiche__sous {
  margin-top: var(--e-2);
  opacity: 0.9;
}

.entete-fiche .puce {
  color: #fff;
  background: rgb(255 255 255 / 18%);
}

.entete-fiche__ligne {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.entete-fiche__ligne .entete-fiche__nom { flex: 1; margin-top: 0; }

/* Bouton haut-parleur (prononciation) */
.bouton-prononcer {
  width: var(--controle-s);
  height: var(--controle-s);
  color: var(--primaire);
  background: var(--primaire-pale);
}
.bouton-prononcer:hover { background: var(--surface-3); }
.bouton-prononcer--clair {
  color: #fff;
  background: rgb(255 255 255 / 18%);
}
.bouton-prononcer--clair:hover { background: rgb(255 255 255 / 30%); }
.bouton-prononcer--petit {
  display: inline-grid;
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

.kv {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: var(--e-2) var(--e-4);
  margin: 0;
}

.kv dt { color: var(--encre-2); }
.kv dd { margin: 0; }

.jauges {
  display: grid;
  gap: var(--e-2);
}

.jauge {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--e-3);
  align-items: center;
}

.jauge__label { font-size: var(--fs-sm); color: var(--encre-2); }

.jauge__segments {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.jauge__seg {
  height: 10px;
  border-radius: 3px;
  background: var(--surface-3);
}

.jauge__seg--plein { background: var(--couleur, var(--primaire)); }

.jauge__bornes {
  display: flex;
  justify-content: space-between;
  grid-column: 2;
  font-size: var(--fs-xs);
  color: var(--encre-3);
}

.encadre {
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--bordure-2);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.encadre__titre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-1);
  font-family: var(--font-texte);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.encadre--retenir { border-color: var(--or); background: var(--or-pale); }
.encadre--info { border-color: var(--info); background: var(--info-pale); }
.encadre--avert { border-color: var(--avert); background: var(--avert-pale); }
.encadre--succes { border-color: var(--succes); background: var(--succes-pale); }
.encadre--erreur { border-color: var(--erreur); background: var(--erreur-pale); }

.encadre ul { margin: var(--e-1) 0 0; padding-left: 20px; }

.section-fiche + .section-fiche { margin-top: var(--e-2); }

details.sous-region, details.terme {
  border-top: 1px solid var(--bordure);
  padding: var(--e-2) 0;
}
details.sous-region:first-of-type, details.terme:first-of-type { border-top: 0; }
details summary {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 36px;
  cursor: pointer;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--encre-3);
  border-bottom: 2px solid var(--encre-3);
  transform: rotate(45deg);
  transition: transform var(--duree) var(--courbe);
}
details[open] summary::after { transform: rotate(-135deg); }

.hierarchie { margin: 0; padding-left: 22px; }
.hierarchie li + li { margin-top: var(--e-2); }

.appellation--cible { border-color: var(--primaire); background: var(--primaire-pale); }

.lien-fiche--inconnu { border-bottom-style: dashed; color: var(--encre-2); }

figure { margin: var(--e-4) 0; }
figcaption { margin-top: var(--e-1); }

.appellations { display: grid; gap: var(--e-2); }

.appellation {
  display: grid;
  gap: 2px;
  padding: var(--e-3);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
}

.appellation__nom { font-weight: 600; }
.appellation__meta { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); font-size: var(--fs-sm); color: var(--encre-2); }

/* ---------- 5. Formulaires ---------- */

.recherche {
  position: relative;
  display: flex;
  align-items: center;
}

.recherche .ic {
  position: absolute;
  left: 12px;
  color: var(--encre-3);
  pointer-events: none;
}

.recherche__champ {
  width: 100%;
  height: var(--controle);
  padding: 0 40px 0 40px;
  background: var(--surface);
  border: 1px solid var(--bordure-2);
  border-radius: var(--r-pill);
}

.recherche__champ:focus { outline: none; border-color: var(--primaire); }

.recherche__effacer {
  position: absolute;
  right: 4px;
  width: 36px;
  height: 36px;
  color: var(--encre-3);
}

.segments {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--r-l);
}

.segments__item {
  min-height: 38px;
  padding: 0 var(--e-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--encre-2);
  text-decoration: none;
  text-align: center;
  line-height: 38px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}

.segments__item--actif {
  color: var(--encre);
  background: var(--surface);
  box-shadow: var(--ombre-s);
}

.champ {
  display: grid;
  gap: var(--e-1);
}

.champ__label { font-size: var(--fs-sm); font-weight: 600; color: var(--encre-2); }

.selecteur, .champ__saisie {
  min-height: var(--controle);
  padding: 0 var(--e-3);
  background: var(--surface);
  border: 1px solid var(--bordure-2);
  border-radius: var(--r-m);
}

.bascule {
  display: flex;
  gap: var(--e-1);
}

.bascule__option {
  flex: 1;
  min-height: var(--controle);
  border: 1px solid var(--bordure-2);
  border-radius: var(--r-m);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.bascule__option--active {
  color: var(--primaire);
  border-color: var(--primaire);
  background: var(--primaire-pale);
}

.champ__saisie { width: 100%; }
textarea.champ__saisie { min-height: 96px; padding: var(--e-2) var(--e-3); resize: vertical; }
button.puce { cursor: pointer; }

/* Etoiles de notation (carnet) */
.etoiles { display: inline-flex; gap: 2px; }
.etoile { color: var(--bordure-2); background: transparent; border: 0; padding: 2px; line-height: 1; }
button.etoile { width: 36px; height: 36px; display: grid; place-items: center; }
.etoile--pleine { color: var(--or); }
.etoile--pleine .ic { fill: currentColor; }

/* ---------- 6. Accueil ---------- */

.grille-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
}

.grille-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-3);
}

.tuile {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-4);
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
}

a.tuile:hover { background: var(--surface-2); }

.tuile__valeur {
  font-family: var(--font-titre);
  font-size: var(--fs-titre);
  font-weight: 700;
  line-height: 1;
  color: var(--primaire);
}

.tuile__label { font-size: var(--fs-sm); color: var(--encre-2); }

.tuile--accent {
  color: var(--sur-primaire);
  background: var(--primaire);
  border-color: var(--primaire);
}
.tuile--accent .tuile__valeur, .tuile--accent .tuile__label { color: inherit; }
a.tuile--accent:hover { background: var(--primaire-2); }

.barre-progression {
  height: 8px;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: var(--r-pill);
}

.barre-progression__jauge {
  height: 100%;
  background: var(--succes);
  border-radius: var(--r-pill);
  transition: width var(--duree-lente) var(--courbe);
}

.progression-ligne {
  display: grid;
  gap: var(--e-1);
}

.progression-ligne__tete {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
}

/* ---------- 7. Lecons ---------- */

.lecon {
  max-width: 68ch;
}

.lecon > * + * { margin-top: var(--e-3); }
.lecon h2 { margin-top: var(--e-5); font-size: var(--fs-xl); }
.lecon h3 { margin-top: var(--e-4); font-size: var(--fs-lg); }
.lecon ul, .lecon ol { padding-left: 22px; }
.lecon li + li { margin-top: var(--e-1); }
.lecon img, .lecon svg.schema { display: block; width: 100%; height: auto; margin: var(--e-4) 0; }
.lecon blockquote {
  margin: var(--e-3) 0;
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--or);
  border-radius: var(--r-m);
  background: var(--or-pale);
}
.lecon blockquote p + p { margin-top: var(--e-2); }
.lecon code {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  border-radius: var(--r-s);
}
.lecon hr { border: 0; border-top: 1px solid var(--bordure); margin: var(--e-5) 0; }
.lecon table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.lecon th, .lecon td { padding: var(--e-2); text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.lecon th { color: var(--encre-2); font-weight: 600; }
.lecon .tableau-defilant { overflow-x: auto; }

.lien-fiche {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--primaire);
}

.etapes { counter-reset: etape; display: grid; gap: var(--e-3); margin-top: var(--e-4); }

.etape {
  position: relative;
  padding: var(--e-3) var(--e-4) var(--e-3) 52px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
}

.etape::before {
  counter-increment: etape;
  content: counter(etape);
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--sur-primaire);
  background: var(--primaire);
  border-radius: var(--r-pill);
}

.etape__titre { font-family: var(--font-texte); font-size: var(--fs-md); font-weight: 700; }
.etape > p + p { margin-top: var(--e-2); }

.lecon-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--encre-2);
}

.parcours-carte {
  display: grid;
  gap: var(--e-2);
}

.parcours-carte__tete {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

/* ---------- 8. Quiz ---------- */

.quiz-barre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--fs-sm);
  color: var(--encre-2);
}

.quiz-barre .barre-progression { flex: 1; }

.quiz-question {
  font-family: var(--font-titre);
  font-size: var(--fs-xl);
  line-height: 1.3;
}

.quiz-type {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--primaire);
  text-transform: uppercase;
}

.reponses {
  display: grid;
  gap: var(--e-2);
}

.reponse {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--controle);
  padding: var(--e-3) var(--e-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--bordure-2);
  border-radius: var(--r-l);
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.reponse:hover:not(:disabled) { background: var(--surface-2); }
.reponse:disabled { cursor: default; }
.reponse--choisie { border-color: var(--primaire); }
.reponse--juste { color: var(--succes); border-color: var(--succes); background: var(--succes-pale); }
.reponse--fausse { color: var(--erreur); border-color: var(--erreur); background: var(--erreur-pale); }
.reponse__lettre {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.reponse--juste .reponse__lettre { color: #fff; background: var(--succes); }
.reponse--fausse .reponse__lettre { color: #fff; background: var(--erreur); }

.association {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
}

.association__colonne { display: grid; gap: var(--e-2); align-content: start; }
.association .reponse { justify-content: center; text-align: center; min-height: 52px; }
.association .reponse--liee { opacity: 0.6; }

.action-flottante {
  position: fixed;
  right: 0;
  bottom: var(--above-tabbar);
  left: 0;
  z-index: 15;
  padding: var(--e-3) var(--e-4);
  background: linear-gradient(to top, var(--fond) 70%, transparent);
}

.action-flottante > * { max-width: 760px; margin: 0 auto; }

.espace-flottant { height: 80px; }

.flashcard {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: var(--e-5);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-m);
  cursor: pointer;
}

.flashcard__recto { font-family: var(--font-titre); font-size: var(--fs-xl); }
.flashcard__verso { color: var(--encre-2); }

.resultat-score {
  font-family: var(--font-titre);
  font-size: 3rem;
  line-height: 1;
  color: var(--primaire);
}

.boites {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--e-2);
}

.boite {
  display: grid;
  gap: 2px;
  padding: var(--e-2);
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--r-m);
}

.boite__n { font-family: var(--font-titre); font-size: var(--fs-lg); font-weight: 700; }
.boite__label { font-size: var(--fs-xs); color: var(--encre-2); }

/* ---------- 9. Carte ---------- */

.carte-conteneur {
  position: relative;
  /* Leaflet empile ses calques avec des z-index de 400 a 1000 : le conteneur cree son propre
     contexte d'empilement pour qu'ils restent sous le volet bas, les toasts et l'en-tete. */
  z-index: 0;
  isolation: isolate;
  height: calc(var(--app-height) - var(--entete-h) - var(--safe-top) - var(--above-tabbar));
  min-height: 320px;
  background: var(--surface-2);
}

.carte-conteneur .leaflet-container {
  width: 100%;
  height: 100%;
  font-family: var(--font-texte);
  background: var(--surface-2);
}

.carte-outils {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  left: var(--e-3);
  z-index: 500;
  display: flex;
  gap: var(--e-2);
  pointer-events: none;
}

.carte-outils > * { pointer-events: auto; }

.carte-outils .selecteur {
  flex: 1;
  max-width: 320px;
  box-shadow: var(--ombre-m);
}

.carte-zoom {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-5);
  z-index: 500;
  display: grid;
  gap: var(--e-1);
}

.carte-zoom .bouton-icone { background: var(--surface); box-shadow: var(--ombre-m); }

.bandeau {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-5);
  left: var(--e-3);
  z-index: 600;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  font-size: var(--fs-sm);
  color: var(--avert);
  background: var(--avert-pale);
  border: 1px solid var(--avert);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-m);
}

.bandeau__texte { flex: 1; }

.etiquette-region {
  font-size: 12px;
  font-weight: 700;
  color: var(--encre);
  text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.leaflet-container .leaflet-control-attribution {
  font-size: 10px;
  background: rgb(255 255 255 / 70%);
}

.leaflet-tooltip.etiquette-region::before { display: none; }

/* Noms d'appellations a cote des reperes (visibles a partir d'un certain zoom) */
.leaflet-tooltip.etiquette-appellation {
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--encre);
  background: rgb(255 253 250 / 85%);
  border: 1px solid var(--bordure-2);
  border-radius: var(--r-s);
  box-shadow: none;
  pointer-events: none;
}
.leaflet-tooltip.etiquette-appellation::before { display: none; }
.leaflet-tooltip.etiquette-appellation--legere { font-weight: 500; font-size: 10px; color: var(--encre-2); border-style: dashed; }
:root[data-theme="dark"] .leaflet-tooltip.etiquette-appellation { background: rgb(34 26 36 / 85%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tooltip.etiquette-appellation { background: rgb(34 26 36 / 85%); }
}

/* Reperes lettres des questions "ou est cette appellation ?" */
.repere-quiz {
  display: grid;
  place-items: center;
  width: 30px !important;
  height: 30px !important;
  color: #fff;
  background: var(--primaire);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: var(--ombre-m);
  cursor: pointer;
  font: 700 14px/1 var(--font-texte);
}
.repere-quiz--juste { background: var(--succes); }
.repere-quiz--fausse { background: var(--erreur); }
.repere-quiz--neutre { background: var(--encre-3); }
.repere-quiz__nom {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--encre);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--bordure-2);
  border-radius: var(--r-s);
  transform: translateX(-50%);
}

/* ---------- 10. Volet bas, toasts, etats vides, squelettes ---------- */

.feuille {
  position: fixed;
  inset: 0;
  z-index: 1100; /* au-dessus de la carte (contexte isole) et de la barre d'onglets */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.feuille__voile {
  position: absolute;
  inset: 0;
  background: var(--voile);
  border: 0;
  padding: 0;
  cursor: default;
}

.feuille__panneau {
  position: relative;
  max-height: 80vh;
  padding: var(--e-2) var(--e-4) calc(var(--e-4) + var(--safe-bottom));
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--ombre-l);
  animation: feuille-monte var(--duree-lente) var(--courbe);
}

@media (min-width: 768px) {
  .feuille__panneau {
    max-width: 640px;
    margin: 0 auto var(--e-5);
    border-radius: var(--r-xl);
  }
}

@keyframes feuille-monte {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.feuille__poignee {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--e-3);
  background: var(--bordure-2);
  border-radius: var(--r-pill);
}

.feuille__contenu { display: grid; gap: var(--e-3); }

.toasts {
  position: fixed;
  right: var(--e-4);
  bottom: calc(var(--above-tabbar) + var(--e-3));
  left: var(--e-4);
  z-index: 1200;
  display: grid;
  gap: var(--e-2);
  justify-items: center;
  pointer-events: none;
}

.toast {
  padding: var(--e-2) var(--e-4);
  font-size: var(--fs-sm);
  color: var(--fond);
  background: var(--encre);
  border-radius: var(--r-pill);
  box-shadow: var(--ombre-m);
  animation: feuille-monte var(--duree-lente) var(--courbe);
}

.vide {
  padding: var(--e-6) var(--e-4);
  color: var(--encre-2);
  text-align: center;
}

.vide .ic { color: var(--encre-3); }

.squelette {
  height: 1em;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  border-radius: var(--r-s);
  animation: squelette 1.2s linear infinite;
}

@keyframes squelette {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.separateur { height: 1px; background: var(--bordure); }

.aligne-droite { text-align: right; }
.centre { text-align: center; }
.masque-mobile { display: none; }

@media (min-width: 768px) {
  .masque-mobile { display: initial; }
}

.a-propos p + p { margin-top: var(--e-2); }