/* Socle commun à tous les pays, habillé à l'identité visuelle Logimaths.

   Deux écarts assumés par rapport à css/style.css du site, tous deux imposés
   par le cyrillique :

   1. POLICES. Quicksand et Baloo 2 ne couvrent pas le cyrillique (subsets
      Google : latin, latin-ext, vietnamese, + devanagari pour Baloo). Une
      interface kirghize et russe rendue avec elles tomberait entièrement sur
      la police de secours du système. On les garde en tête de pile pour le
      latin (mot-symbole, exemples anglais) et on ajoute Nunito derrière, qui
      porte cyrillique et cyrillique-ext et reste une ronde humaniste proche.
   2. SURFACES. Le site pose des rgba blanc translucides et les surcharge en
      fin de fichier pour le mode clair. Ici tout passe par des variables qui
      s'inversent, pour qu'aucune surface ne devienne invisible en clair.

   Tout le reste vient du site : palette, --radius 20px, dégradé signature
   rose → bleu ciel, boutons en gélule, sombre par défaut et clair via
   html[data-theme="light"]. */

:root {
  --encre:      #0D0A25;   /* fond */
  --blanc:      #FFFFFF;   /* texte */
  --indigo:     #241B4F;
  --rose:       #E13280;
  --bleu-ciel:  #357ECF;
  --lavande:    #ADA7CC;

  --juste:      #3ED598;
  --faux:       #FF7A8A;

  --surface:      linear-gradient(135deg, rgba(224, 41, 123, .20) 0%, rgba(46, 116, 194, .16) 100%);
  --surface-bord: rgba(255, 255, 255, .12);
  --surface-plein: rgba(255, 255, 255, .05);

  --radius: 20px;
  --shadow: 0 12px 32px rgba(13, 10, 37, .35);
  --page-bg: radial-gradient(ellipse 1400px 1000px at 50% 30%, #2b2264 0%, #1a1442 45%, #0D0A25 100%);
}

html[data-theme="light"] {
  --encre:      #FFFFFF;
  --blanc:      #0D0A25;
  --indigo:     #DCD5F2;
  --rose:       #DF2076;
  --bleu-ciel:  #2E74C2;
  --lavande:    #6C6590;

  --juste:      #0E7A55;
  --faux:       #C8253B;

  --surface:      linear-gradient(135deg, rgba(224, 41, 123, .10) 0%, rgba(46, 116, 194, .09) 100%);
  --surface-bord: rgba(36, 27, 79, .14);
  --surface-plein: rgba(255, 255, 255, .72);

  --shadow: 0 14px 30px rgba(36, 27, 79, .16);
  --page-bg: radial-gradient(ellipse 1400px 1000px at 50% 30%, #F4F0FF 0%, #EAE3F8 45%, #FFFFFF 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--encre);
  background-image: var(--page-bg);
  background-attachment: fixed;
  color: var(--blanc);
  font-family: "Quicksand", "Nunito", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--blanc);
}

:focus-visible {
  outline: 3px solid var(--bleu-ciel);
  outline-offset: 3px;
}

/* ---------- bandeau d'avertissement traduction ---------- */

.bandeau {
  padding: .6rem 1rem;
  background: var(--rose);
  color: #FFFFFF;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
}

/* ---------- en-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1rem;
  /* Même dégradé signature que l'en-tête du site, très atténué. */
  background:
    linear-gradient(120deg, rgba(224, 41, 123, .10) 0%, rgba(46, 116, 194, .08) 100%),
    rgba(13, 10, 37, .85);
  border-bottom: 1px solid var(--surface-bord);
  /* Pas de backdrop-filter : sur un en-tête collant, le flou se recalcule à
     chaque image pendant le défilement et fait saccader les Android modestes,
     qui sont précisément la cible ici. Le fond à 85 % suffit. */
}

html[data-theme="light"] .entete {
  background:
    linear-gradient(120deg, rgba(224, 41, 123, .08) 0%, rgba(46, 116, 194, .06) 100%),
    rgba(255, 255, 255, .88);
}

.entete-titre { flex: 1; min-width: 0; }

/* Mot-symbole : même construction que .wordmark du site, le second mot en
   rose. Baloo 2 suffit ici, le nom de marque est en caractères latins. */
.marque {
  display: block;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wm-accent { color: var(--rose); }

html[data-theme="light"] .marque { -webkit-text-stroke: .5px currentColor; }

.sous-titre {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--lavande);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.retour, .theme {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--surface-bord);
  border-radius: 999px;
  background: var(--surface-plein);
  color: var(--blanc);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}

.retour:hover, .theme:hover { border-color: var(--rose); }
.retour:active, .theme:active { transform: scale(.94); }

/* Sélecteur de langue : liste déroulante. Des segments côte à côte
   tomberaient sous les 40 px de large dès la troisième langue, ce qui n'est
   plus tapable ; la liste garde la même taille quel que soit leur nombre. */
.langues {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
}

.langues select {
  height: 2.4rem;
  padding: 0 1.5rem 0 .7rem;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid var(--surface-bord);
  border-radius: 999px;
  background: var(--surface-plein);
  color: var(--blanc);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}

.langues select:hover { border-color: var(--rose); }

/* La flèche est décorative : elle ne doit jamais intercepter le tap. */
.langues::after {
  content: "▾";
  position: absolute;
  right: .6rem;
  color: var(--lavande);
  font-size: .7rem;
  pointer-events: none;
}

/* Le menu déroulant est dessiné par le système : sans couleur explicite, il
   sort en texte sombre sur fond sombre sur certains Android. */
.langues option {
  background: #1a1442;
  color: #FFFFFF;
}

html[data-theme="light"] .langues option {
  background: #FFFFFF;
  color: #0D0A25;
}

/* ---------- vue ---------- */

.vue {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.2rem 1rem 3rem;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; margin: 1.8rem 0 .7rem; }

.chapeau {
  margin: 0 0 1.3rem;
  color: var(--lavande);
  font-size: .95rem;
}

/* ---------- cartes cliquables ---------- */

.liste { display: grid; gap: .8rem; }

.carte {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: 1rem 1.1rem;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--surface-bord);
  border-radius: var(--radius);
  color: var(--blanc);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}

.carte:hover { transform: translateY(-4px); border-color: var(--rose); }
.carte:active { transform: translateY(-1px); }

.carte-corps { flex: 1; min-width: 0; }

.carte-titre {
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}

.carte-note { font-size: .84rem; color: var(--lavande); }

.pastille {
  flex: none;
  min-width: 2.7rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--rose);
  color: #FFFFFF;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}

.chevron { flex: none; color: var(--lavande); font-size: 1.2rem; }

/* ---------- contenu d'une leçon ---------- */

.bloc {
  padding: 1.1rem 1.2rem;
  margin: 0 0 .9rem;
  background: var(--surface);
  border: 2px solid var(--surface-bord);
  border-radius: var(--radius);
}

.bloc p:first-child { margin-top: 0; }
.bloc p:last-child  { margin-bottom: 0; }

.bloc-piege {
  background: linear-gradient(160deg, rgba(255, 0, 0, .16) 0%, rgba(224, 41, 123, .16) 100%);
  border-color: var(--rose);
}

.bloc-etiquette {
  display: block;
  margin-bottom: .55rem;
  font-family: "Quicksand", "Nunito", system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bleu-ciel);
}

.bloc-piege .bloc-etiquette { color: var(--rose); }

ul.puces { margin: .4rem 0; padding-left: 1.2rem; }
ul.puces li { margin: .35rem 0; }
ul.puces li::marker { color: var(--rose); }

.mot-en { font-weight: 700; }
.mot-tr { color: var(--lavande); }

table.vocab {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

table.vocab th,
table.vocab td {
  padding: .5rem .5rem;
  text-align: left;
  border-bottom: 1px solid var(--surface-bord);
}

table.vocab th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lavande);
}

table.vocab tr:last-child td { border-bottom: 0; }

/* ---------- QCM ---------- */

.progression {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.1rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--lavande);
}

.jauge {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-bord);
  overflow: hidden;
}

.jauge span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--rose) 0%, var(--bleu-ciel) 100%);
  transition: width .25s ease;
}

.enonce {
  margin: 0 0 1.1rem;
  padding: 1.2rem;
  background: var(--surface);
  border: 2px solid var(--surface-bord);
  border-radius: var(--radius);
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
}

.consigne {
  margin: 0 0 .8rem;
  color: var(--lavande);
  font-size: .92rem;
}

.choix { display: grid; gap: .6rem; }

.choix button {
  padding: .9rem 1.1rem;
  text-align: left;
  background: var(--surface-plein);
  border: 2px solid var(--surface-bord);
  border-radius: var(--radius);
  color: var(--blanc);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}

.choix button:hover:not(:disabled) { border-color: var(--rose); transform: translateY(-2px); }
.choix button:disabled { cursor: default; }

.choix button.juste {
  border-color: var(--juste);
  color: var(--juste);
  font-weight: 700;
}

.choix button.faux {
  border-color: var(--faux);
  color: var(--faux);
}

.retour-reponse {
  margin: 1.1rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 2px solid var(--surface-bord);
  font-size: .95rem;
}

.retour-reponse b { color: var(--bleu-ciel); }

/* ---------- boutons ---------- */

.bouton {
  display: block;
  width: 100%;
  margin-top: 1.1rem;
  padding: .95rem 1.75rem;
  background: var(--rose);
  border: 2px solid var(--rose);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: "Quicksand", "Nunito", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(224, 41, 123, .4);
  transition: transform .15s ease, box-shadow .15s ease;
}

.bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(224, 41, 123, .48); }
.bouton:active { transform: translateY(0); }

.bouton-doux {
  background: transparent;
  border-color: var(--bleu-ciel);
  color: var(--bleu-ciel);
  box-shadow: none;
}

.bouton-doux:hover { box-shadow: 0 8px 20px rgba(46, 116, 194, .3); }

/* ---------- résultat ---------- */

.score {
  padding: 1.8rem 1rem;
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--rose);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(224, 41, 123, .18);
}

.score-chiffre {
  display: block;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: var(--rose);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: .4rem;
}

/* ---------- pied ---------- */

.pied {
  padding: 1rem;
  text-align: center;
  font-size: .78rem;
  color: var(--lavande);
  border-top: 1px solid var(--surface-bord);
}

/* ---------- apparition au premier passage à l'écran ---------- */

.entre {
  opacity: 0;
  transform: translateY(8px);
  animation: entre .32s ease forwards;
}

@keyframes entre {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entre { animation: none; opacity: 1; transform: none; }
  * { transition: none !important; }
}