/* =====================================================================
   CapiQuiz — styles propres à chaque écran
   ===================================================================== */

/* ================================================================== */
/* Accueil                                                            */
/* ================================================================== */

/* --- Bandeau d'accroche : le seul endroit de l'appli qui sort du fond
   clair habituel — c'est la vitrine, elle doit accrocher l'œil avant
   même de lire le premier mot. --------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--e5);
  text-align: center;
  color: #fff;
  /* Deux tons du même bleu, plus un voile clair très léger en haut à
     gauche pour le relief : l'ancien dégradé traversait trois teintes et
     passait par un vert-bleu trouble au milieu. */
  background:
    radial-gradient(110% 130% at 20% -15%, rgba(255, 255, 255, 0.10), transparent 60%),
    linear-gradient(165deg, var(--nuit) 0%, var(--nuit-profond) 100%);
  box-shadow: var(--ombre-3);
}
.hero__lignes {
  position: absolute;
  inset: -10%;
  background: url('../../public/fond-courbes.svg') center / cover no-repeat;
  opacity: 0.16;
  filter: invert(1);
  pointer-events: none;
}
.hero__logo {
  position: relative;
  margin: 0 auto var(--e3);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-rond);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.hero__logo svg { width: 18px; height: 18px; }
/* Rapport de 1,75 au sous-titre, contre 1,37 à l'origine : en dessous, les
   deux lignes se lisaient comme deux paragraphes de même poids plutôt que
   comme un titre suivi de sa précision. Cette taille n'était pas tenable
   tant que le bandeau portait aussi une mascotte et quatre pastilles de
   comptage — les six modes de jeu passaient sous la ligne de flottaison. */
.hero h1 {
  position: relative;
  font-size: clamp(1.6rem, 7.2vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Pas de white-space: nowrap ici. La règle venait d'un titre précédent où
   l'accent portait sur « 10 questions », un bloc qu'on ne voulait pas voir
   coupé. Sur cette phrase, rendre « vrai niveau » insécable formait un
   pavé de 136 px que le navigateur ne pouvait plus placer : il cassait le
   titre en quatre lignes courtes, dont une de 37 px, d'où les grands vides
   à gauche et à droite. Laissé libre, le titre tient en deux lignes qui
   remplissent la largeur. */
.hero h1 em {
  font-style: normal;
  color: var(--sable);
}
.hero p {
  position: relative;
  margin-top: var(--e1);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--t-md);
}

/* Appel à créer un compte, pour les visiteurs. Le message était du texte
   gris avec un bouton fantôme, au moment précis où le joueur a quelque
   chose à perdre en restant invité. */
.appel-compte {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  border-color: color-mix(in srgb, var(--lagon) 30%, transparent);
}
.appel-compte__texte { display: flex; flex-direction: column; gap: 2px; }
.appel-compte__texte strong { font-family: var(--titres); font-size: var(--t-lg); line-height: 1.25; }

.bandeau-serie {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4);
  border-radius: var(--r-lg);
  background: var(--sable-pale);
  border: 1px solid color-mix(in srgb, var(--sable) 38%, transparent);
}
.bandeau-serie__flamme {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-rond);
  background: color-mix(in srgb, var(--sable) 26%, transparent);
  color: var(--sable-sombre);
}
.bandeau-serie__flamme svg { width: 25px; height: 25px; }
.bandeau-serie strong { font-family: var(--titres); font-size: var(--t-lg); }

.stats-rapides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e2);
}
.stat {
  padding: var(--e4) var(--e2);
  text-align: center;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stat:hover { box-shadow: var(--ombre-1); transform: translateY(-1px); }
.stat__icone {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin: 0 auto var(--e2);
  border-radius: var(--r-rond);
  background: var(--stat-teinte-pale, var(--lagon-pale));
  color: var(--stat-teinte, var(--lagon-sombre));
}
.stat:nth-child(2) { --stat-teinte: var(--plaine-sombre); --stat-teinte-pale: var(--plaine-pale); }
.stat:nth-child(3) { --stat-teinte: var(--sable-sombre); --stat-teinte-pale: var(--sable-pale); }
.stat__valeur {
  display: block;
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat__libelle {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--texte-faible);
}


/* ================================================================== */
/* Quiz                                                               */
/* ================================================================== */
.quiz {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + var(--e3)) var(--e4)
           calc(env(safe-area-inset-bottom) + var(--e4));
}

/* --- Bandeau supérieur : progression du quiz --------------------- */
.quiz__haut { display: flex; flex-direction: column; gap: var(--e2); }

.quiz__ligne-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

.quiz__compteur {
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.quiz__score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  color: var(--abysse);
}
.quiz__score span { font-size: var(--t-xs); font-weight: 600; color: var(--texte-faible); }

.quiz__quitter {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  margin-right: -8px;
  border-radius: var(--r-rond);
  color: var(--texte-faible);
}
.quiz__quitter:hover { background: rgba(13, 43, 69, 0.06); color: var(--abysse); }
.quiz__quitter svg { width: 20px; height: 20px; }

/* Progression du quiz : segments, un par question. Volontairement
   différente du chrono — on ne doit jamais confondre « où j'en suis »
   et « combien de temps il me reste ». */
.progression-quiz {
  display: flex;
  gap: 3px;
  height: 5px;
}
.progression-quiz__segment {
  flex: 1;
  border-radius: var(--r-rond);
  background: rgba(13, 43, 69, 0.11);
  transition: background 0.3s ease;
}
.progression-quiz__segment--juste  { background: var(--plaine); }
.progression-quiz__segment--faux   { background: var(--faux); }
.progression-quiz__segment--actuel { background: var(--abysse); }

/* --- Chrono ------------------------------------------------------ */
.chrono {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e4);
}

.chrono__piste {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: var(--r-rond);
  background: rgba(13, 43, 69, 0.08);
  overflow: hidden;
}

.chrono__barre {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  border-radius: var(--r-rond);
  background: var(--lagon);
  animation: chrono-vidange var(--duree-chrono, 10000ms) linear forwards,
             chrono-couleur var(--duree-chrono, 10000ms) linear forwards;
}
.chrono--fige .chrono__barre { animation-play-state: paused; }

@keyframes chrono-vidange {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes chrono-couleur {
  0%,  55% { background-color: var(--lagon); }
  75%      { background-color: var(--sable); }
  100%     { background-color: var(--faux); }
}

.chrono__secondes {
  flex: none;
  min-width: 30px;
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--texte-doux);
}
.chrono__secondes--urgence { color: var(--faux); animation: pulsation 0.9s ease infinite; }

@keyframes pulsation {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* --- Question ---------------------------------------------------- */
/* Volontairement PAS de flex:1 + justify-content:center ici : sur un
   écran large mais pas très haut (fenêtre d'ordinateur typique), ça
   créait un vide artificiel au milieu et repoussait les réponses hors
   champ. Une taille naturelle, ancrée en haut, s'adapte à toutes les
   proportions d'écran sans jamais faire déborder les propositions. */
.question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e6) var(--e2);
  text-align: center;
}

.question__consigne {
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

/* Nom du pays et drapeau, côte à côte. La taille commune vit ici (en
   `em`, le drapeau et le nom en héritent tous les deux à l'identique) et
   l'espacement est en `em` pour rester proportionné à cette taille plutôt
   que de retomber sur la taille du texte ambiant. flex-wrap : sur les
   noms longs (Papouasie-Nouvelle-Guinée…), le drapeau reste sur la
   première ligne plutôt que d'être écrasé par le retour à la ligne. */
.question__ligne {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3em;
  font-size: clamp(1.9rem, 8.5vw, 2.9rem);
}

.question__enonce {
  font-family: var(--titres);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.question__drapeau {
  font-size: 1em;
  line-height: 1;
  transform: translateY(-0.04em);
}

/* Mode Drapeau → Pays : le drapeau remplace l'énoncé texte, donc il en
   tient toute la place — largement plus grand que la version « bonus »
   ci-dessus, qui ne fait qu'accompagner un nom de pays déjà affiché. */
.question__drapeau-grand {
  font-size: clamp(4.5rem, 26vw, 7.5rem);
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(13, 43, 69, 0.16));
}

/* --- Propositions ------------------------------------------------ */
.options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e2);
}
@media (min-width: 600px) {
  .options { grid-template-columns: 1fr 1fr; }
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 62px;
  padding: var(--e3) var(--e4);
  text-align: left;
  background: var(--blanc);
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--r-lg);
  font-size: var(--t-lg);
  font-weight: 600;
  box-shadow: var(--ombre-1);
  transition: transform 0.1s ease, border-color 0.15s ease,
              background 0.18s ease, color 0.18s ease;
  -webkit-user-select: none;
  user-select: none;
}
.option:active:not(:disabled) { transform: scale(0.985); }
.option:hover:not(:disabled):not(.option--juste):not(.option--faux) { border-color: var(--lagon); }
.option:disabled { cursor: default; }

.option__lettre {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(13, 43, 69, 0.06);
  color: var(--texte-faible);
  font-family: var(--titres);
  font-size: var(--t-sm);
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease;
}

.option__texte { flex: 1; min-width: 0; }

.option__marque {
  flex: none;
  width: 22px; height: 22px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1.6, 0.5, 1);
}

/* Bonne réponse : fond plein, impossible à rater */
.option--juste {
  background: var(--juste);
  border-color: var(--juste);
  color: #fff;
  animation: option-juste 0.4s cubic-bezier(0.22, 1.4, 0.4, 1);
}
.option--juste .option__lettre { background: rgba(255, 255, 255, 0.22); color: #fff; }
.option--juste .option__marque { opacity: 1; transform: none; }

/* Réponse choisie mais fausse */
.option--faux {
  background: var(--faux);
  border-color: var(--faux);
  color: #fff;
  animation: option-faux 0.36s ease;
}
.option--faux .option__lettre { background: rgba(255, 255, 255, 0.22); color: #fff; }
.option--faux .option__marque { opacity: 1; transform: none; }

/* Les propositions non concernées s'effacent pendant la révélation */
.option--eteinte { opacity: 0.4; }

@keyframes option-juste {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes option-faux {
  0%, 100% { transform: translateX(0); }
  22%      { transform: translateX(-6px); }
  55%      { transform: translateX(5px); }
  80%      { transform: translateX(-2px); }
}

/* --- Saisie libre : pas de propositions, un champ texte ----------- */
/* Le champ est la seule chose à regarder pendant les dix secondes : il est
   centré, seul sur sa ligne, et sa réponse s'écrit au milieu — pas alignée
   à gauche comme un formulaire d'inscription. */
.saisie-libre {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e3);
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.saisie-libre__champ {
  width: 100%;
  min-height: 62px;
  padding: 0 var(--e3);
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--r-lg);
  font-family: var(--titres);
  font-size: var(--t-xl);
  font-weight: 700;
  text-align: center;
  background: var(--blanc);
  transition: border-color 0.15s ease;
}
.saisie-libre__champ:focus { outline: none; border-color: var(--lagon); }
.saisie-libre__champ::placeholder { font-family: var(--texte-police); font-weight: 500; font-size: var(--t-md); }

/* Un input désactivé est repeint par le navigateur via
   -webkit-text-fill-color, qui l'emporte sur `color` : sans ces deux
   lignes, la réponse du joueur s'affiche en gris illisible sur le rouge
   au moment même où il doit la relire. On désactive le champ dès la
   validation (voir repondre() dans quiz.js), donc les deux états
   colorés sont toujours concernés. */
.saisie-libre__champ:disabled { opacity: 1; }
.saisie-libre__champ--juste,
.saisie-libre__champ--faux {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.saisie-libre__champ--juste {
  background: var(--juste); border-color: var(--juste);
  animation: option-juste 0.4s cubic-bezier(0.22, 1.4, 0.4, 1);
}
.saisie-libre__champ--faux {
  background: var(--faux); border-color: var(--faux);
  animation: option-faux 0.36s ease;
}

.saisie-libre__correction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--e3);
  border-radius: var(--r-lg);
  background: var(--juste-pale);
  color: var(--juste);
  text-align: center;
  animation: apparition 0.24s ease both;
}
.saisie-libre__correction-libelle {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.saisie-libre__correction strong {
  font-family: var(--titres);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.15;
}

/* --- Points gagnés qui s'envolent -------------------------------- */
.gain {
  position: absolute;
  right: var(--e4);
  top: 50%;
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-lg);
  color: #fff;
  pointer-events: none;
  animation: gain-envol 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes gain-envol {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  25%  { opacity: 1; transform: translateY(-14px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-46px) scale(1); }
}

.combo {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: var(--r-rond);
  background: var(--sable);
  color: var(--abysse);
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
  animation: apparition 0.3s ease both;
}


/* ================================================================== */
/* Résultat de partie                                                 */
/* ================================================================== */
.resultat { text-align: center; padding-top: var(--e6); }

.resultat__score {
  font-family: var(--titres);
  font-weight: 800;
  font-size: clamp(3.6rem, 19vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--abysse);
}
.resultat__unite {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

.resultat__mention {
  display: inline-block;
  margin-top: var(--e4);
  padding: 6px var(--e4);
  border-radius: var(--r-rond);
  background: var(--lagon-pale);
  color: var(--lagon-sombre);
  font-weight: 650;
}

.detail-reponses {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}
.detail-reponses__case {
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--faux);
  opacity: 0.85;
}
.detail-reponses__case--juste { background: var(--plaine); }

.recompense {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--r-lg);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  text-align: left;
}
.recompense__icone {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--lagon-pale);
  color: var(--lagon-sombre);
}
.recompense__icone svg { width: 23px; height: 23px; }

.debloque {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--r-lg);
  background: var(--sable-pale);
  border: 1px solid color-mix(in srgb, var(--sable) 38%, transparent);
  text-align: left;
  animation: surgissement 0.5s cubic-bezier(0.22, 1.3, 0.4, 1) both;
}
@keyframes surgissement {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}


/* ================================================================== */
/* Collection : titres et succès                                      */
/* ================================================================== */
.echelle {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.palier {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) 0 var(--e3) var(--e5);
}
/* Le trait vertical qui relie les paliers évoque une coupe de terrain */
.palier::before {
  content: '';
  position: absolute;
  left: 7px; top: 0; bottom: 0;
  width: 2px;
  background: var(--bordure);
}
.palier:first-child::before { top: 50%; }
.palier:last-child::before  { bottom: 50%; }
.palier::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: 4px;
  transform: rotate(45deg);
  background: var(--blanc);
  border: 2px solid var(--bordure-forte);
}
.palier--acquis::after {
  background: var(--c-titre, var(--lagon));
  border-color: var(--c-titre, var(--lagon));
}
.palier--actuel::after {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-titre, var(--lagon)) 22%, transparent);
}
.palier__nom {
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-lg);
}
.palier--verrouille .palier__nom { color: var(--texte-faible); }

.grille-succes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e2);
}

.succes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--e3);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
}
.succes__haut { display: flex; align-items: center; gap: var(--e2); }
.succes__icone {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--sable-pale);
  color: var(--sable-sombre);
}
.succes__icone svg { width: 19px; height: 19px; }
.succes__nom { font-weight: 650; font-size: var(--t-sm); line-height: 1.25; }
.succes__desc { font-size: var(--t-xs); color: var(--texte-faible); line-height: 1.4; }

.succes--verrouille { background: transparent; border-style: dashed; }
.succes--verrouille .succes__icone {
  background: rgba(13, 43, 69, 0.05);
  color: var(--texte-faible);
}
.succes--verrouille .succes__nom { color: var(--texte-doux); }


/* ================================================================== */
/* Réviser                                                            */
/* ================================================================== */
/* Collante à 0 : elle se colle désormais au haut de la zone défilante,
   qui commence sous l'en-tête — il n'y a plus de hauteur d'en-tête à
   compenser à la main. Les marges négatives la font déborder jusqu'aux
   bords de cette zone : sans elles, la liste continue de défiler dans la
   bande de marge autour de la barre, et on voit passer des pays derrière. */
.reviser__barre {
  position: sticky;
  /* Un élément collant se cale sur la boîte de remplissage du conteneur
     défilant, pas sur son bord visible : à top:0 il resterait 16 px plus
     bas, laissant défiler la liste au-dessus de lui. */
  top: calc(var(--marge-ecran) * -1);
  z-index: 10;
  margin: calc(var(--marge-ecran) * -1) calc(var(--marge-ecran) * -1) 0;
  padding: var(--marge-ecran) var(--marge-ecran) var(--e2);
  background: var(--neige);
}

.pays-ligne {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e2);
}
.pays-ligne__drapeau {
  flex: none;
  width: 38px;
  font-size: 1.65rem;
  line-height: 1;
  text-align: center;
}
.pays-ligne__nom { font-weight: 650; }
.pays-ligne__capitale { font-size: var(--t-sm); color: var(--texte-doux); }
.pays-ligne__note {
  margin-top: 3px;
  font-size: var(--t-xs);
  color: var(--texte-faible);
  font-style: italic;
}
.pays-ligne mark {
  background: color-mix(in srgb, var(--sable) 38%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.groupe-continent {
  position: sticky;
  top: calc(env(safe-area-inset-top) + 110px);
  z-index: 5;
  padding: var(--e2) var(--e2);
  background: var(--neige);
  border-bottom: 1px solid var(--bordure);
}
@media (min-width: 900px) { .groupe-continent { top: 118px; } }


/* ================================================================== */
/* Profil                                                             */
/* ================================================================== */
.profil-entete {
  display: flex;
  align-items: center;
  gap: var(--e4);
}
.profil-entete__nom {
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: 1.1;
  word-break: break-word;
}

.grille-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e2);
}
@media (min-width: 520px) { .grille-stats { grid-template-columns: repeat(4, 1fr); } }

.choix-titre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
.choix-titre button {
  padding: var(--e2) var(--e3);
  border-radius: var(--r-rond);
  border: 1.5px solid var(--bordure);
  background: var(--blanc);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: border-color 0.15s ease;
}
.choix-titre button[aria-pressed='true'] {
  border-color: var(--c-titre, var(--lagon));
  background: color-mix(in srgb, var(--c-titre, var(--lagon)) 12%, transparent);
  color: color-mix(in srgb, var(--c-titre, var(--lagon)) 78%, var(--abysse));
}
.choix-titre button:disabled { opacity: 0.45; cursor: not-allowed; }


/* ================================================================== */
/* Connexion                                                          */
/* ================================================================== */
.connexion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72dvh;
  gap: var(--e5);
}
.connexion__marque { text-align: center; }
.connexion__marque svg { width: 58px; height: 58px; margin: 0 auto var(--e3); }

.enveloppe {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  margin: 0 auto;
  border-radius: var(--r-rond);
  background: var(--lagon-pale);
  color: var(--lagon-sombre);
}
.enveloppe svg { width: 36px; height: 36px; }


/* ================================================================== */
/* Texte long (confidentialité)                                       */
/* ================================================================== */
.prose { max-width: 62ch; }
.prose h2 { margin: var(--e6) 0 var(--e2); }
.prose h3 { margin: var(--e5) 0 var(--e1); }
.prose p  { margin-bottom: var(--e3); color: var(--texte-doux); }
.prose ul { margin: 0 0 var(--e3) var(--e5); list-style: disc; color: var(--texte-doux); }
.prose li { margin-bottom: var(--e1); }
.prose strong { color: var(--texte); }