/* =====================================================================
   CapiQuiz — composants réutilisables
   ===================================================================== */

/* ---------------------------------------------------------------- */
/* En-tête                                                           */
/* ---------------------------------------------------------------- */
/* Hors de la zone défilante (voir #app dans base.css) : ni sticky ni
   fixed, l'en-tête est simplement le premier enfant de la coquille. */
.entete {
  flex: none;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  padding-top: calc(var(--e3) + env(safe-area-inset-top));
  background: var(--ossature);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.entete__inner {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}

.logo svg { width: 26px; height: 26px; flex: none; }

.compteur-points {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px var(--e3);
  border-radius: var(--r-rond);
  background: var(--lagon-pale);
  color: var(--lagon-sombre);
  font-size: var(--t-sm);
  font-weight: 650;
  white-space: nowrap;
}
.compteur-points svg { width: 19px; height: 19px; }


/* ---------------------------------------------------------------- */
/* Navigation                                                        */
/* ---------------------------------------------------------------- */
/* Ancrée par la mise en page, pas par `position: fixed` : elle est le
   dernier enfant de la coquille (voir #app dans base.css), le contenu
   défile au-dessus d'elle sans jamais la traverser. Plus de fond
   translucide non plus — il n'y a plus rien à laisser deviner derrière,
   et backdrop-filter sur un élément fixe était précisément ce qui la
   faisait disparaître par intermittence sur Safari iOS. */
.nav {
  flex: none;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  gap: 2px;
  padding: 6px var(--e2) calc(6px + env(safe-area-inset-bottom));
  background: var(--ossature);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav__lien {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 54px;
  padding: 4px 2px;
  border-radius: var(--r-md);
  color: var(--ossature-texte);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav__lien svg { width: 22px; height: 22px; }

/* Onglet actif : du blanc franc sur un lavis clair. Une pastille teintée
   comme sur fond clair n'aurait pas assez de contraste ici, et l'or est
   réservé aux récompenses. */
.nav__lien[aria-current='page'] {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
}

.nav__pastille {
  position: absolute;
  transform: translate(13px, -11px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-rond);
  background: var(--faux);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

@media (min-width: 900px) {
  /* Sur ordinateur la navigation passe en haut : c'est l'ordre des enfants
     de la coquille qui la déplace (order), plus un positionnement collant
     qui n'aurait de toute façon rien eu à quoi se coller. */
  .entete { order: -2; }
  .nav {
    order: -1;
    justify-content: center;
    gap: var(--e2);
    padding: var(--e2) var(--e4);
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav__lien {
    flex: none;
    flex-direction: row;
    gap: var(--e2);
    min-height: 42px;
    padding: 0 var(--e4);
    font-size: var(--t-md);
  }
  .nav__lien svg { width: 19px; height: 19px; }
}


/* ---------------------------------------------------------------- */
/* Boutons                                                           */
/* ---------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 50px;
  padding: 0 var(--e5);
  border-radius: var(--r-lg);
  font-weight: 650;
  font-size: var(--t-md);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.bouton:active:not(:disabled) { transform: scale(0.975); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton--pleine-largeur { width: 100%; }

.bouton--principal {
  background: var(--lagon-fonce);
  color: #fff;
  box-shadow: var(--ombre-2);
}
.bouton--principal:hover:not(:disabled) { background: var(--lagon-sombre); }

.bouton--secondaire {
  background: var(--blanc);
  color: var(--abysse);
  border: 1.5px solid var(--bordure-forte);
}
.bouton--secondaire:hover:not(:disabled) { border-color: var(--lagon); color: var(--lagon-sombre); }

.bouton--discret {
  background: transparent;
  color: var(--texte-doux);
  min-height: 44px;
}
.bouton--discret:hover:not(:disabled) { color: var(--abysse); background: rgba(13, 43, 69, 0.045); }

.bouton--danger { background: transparent; color: var(--faux); border: 1.5px solid var(--faux-pale); }
.bouton--danger:hover:not(:disabled) { background: var(--faux-pale); }

.bouton--grand {
  min-height: 60px;
  font-size: var(--t-lg);
  border-radius: var(--r-xl);
}


/* ---------------------------------------------------------------- */
/* Cartes                                                            */
/* ---------------------------------------------------------------- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  padding: var(--e4);
  box-shadow: var(--ombre-1);
}

.carte--serree { padding: var(--e3); }
.carte--nue { padding: 0; overflow: hidden; }

.carte-mode {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e4);
  width: 100%;
  text-align: left;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-xl);
  padding: var(--e5) var(--e4);
  box-shadow: var(--ombre-1);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s ease, border-color 0.16s ease;
}
.carte-mode:hover {
  border-color: var(--accent);
  box-shadow: var(--ombre-2);
  transform: translateY(-3px);
}
.carte-mode:hover .carte-mode__icone { transform: scale(1.08) rotate(-4deg); }
.carte-mode:hover .carte-mode__jouer { background: var(--accent-sombre); }
.carte-mode:active { transform: scale(0.985); }

/* Une teinte par mode, et la teinte veut dire quelque chose : bleu pour le
   monde et ses capitales, or pour les drapeaux, vert pour les
   départements, terre cuite pour les villes, bleu-gris pour le mix. Elle
   ne colore que le petit bloc du picto, jamais la carte entière — six
   cartes teintées côte à côte feraient un sapin de Noël. */
.carte-mode--ocean {
  --accent: var(--ocean);
  --accent-pale: var(--ocean-pale);
  --accent-sombre: var(--ocean-sombre);
}

.carte-mode--sable {
  --accent: var(--sable);
  --accent-pale: var(--sable-pale);
  --accent-sombre: var(--sable-sombre);
}

.carte-mode--terracotta {
  --accent: var(--terracotta);
  --accent-pale: var(--terracotta-pale);
  --accent-sombre: var(--terracotta-sombre);
}

.carte-mode--plaine {
  --accent: var(--plaine);
  --accent-pale: var(--plaine-pale);
  --accent-sombre: var(--plaine-sombre);
}

.carte-mode--ardoise {
  --accent: var(--ardoise);
  --accent-pale: var(--ardoise-pale);
  --accent-sombre: var(--ardoise-sombre);
}

/* Grille compacte : tous les modes doivent se voir sans défiler,
   contrairement à la carte-mode détaillée ci-dessous (conservée pour son
   CSS d'accent, --accent/--accent-pale/--accent-sombre, réutilisé ici via
   les mêmes classes carte-mode--<couleur>). */
.grille-modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e2);
}
.tuile-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) var(--e2);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow: var(--ombre-1);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s ease, border-color 0.16s ease;
}
.tuile-mode:hover { border-color: var(--accent); box-shadow: var(--ombre-2); transform: translateY(-2px); }
.tuile-mode:hover .tuile-mode__icone { transform: scale(1.08) rotate(-4deg); }
.tuile-mode:active { transform: scale(0.96); }
/* Cadre allongé, pas carré : le picto est un schéma « donné → cherché »
   (voir pictoMode dans src/ui/icones.js), il a besoin de largeur. Un
   cadre carré lui imposerait deux tiers de vide vertical. */
.tuile-mode__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 68px; height: 40px;
  border-radius: var(--r-md);
  background: var(--accent-pale);
  color: var(--accent-sombre);
  transition: transform 0.2s cubic-bezier(0.22, 1.4, 0.4, 1);
}
.tuile-mode__icone svg { width: 55px; height: 30px; }
.tuile-mode__titre {
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-sm);
  line-height: 1.15;
}

/* La carte vedette — le mode Mix. Les cinq autres cartes sont blanches
   avec un bloc de picto teinté ; celle-ci inverse le rapport : la carte
   entière est dorée et le bloc de picto est en or plein. C'est le seul
   endroit où une carte de mode sort du blanc, donc le seul endroit où
   l'œil s'arrête d'abord — ce qui est bien le but pour le mode qui
   contient tous les autres. */
.tuile-mode--vedette {
  background: var(--sable-pale);
  border-color: color-mix(in srgb, var(--sable) 55%, transparent);
  box-shadow: 0 2px 6px rgba(13, 43, 69, 0.07),
              0 10px 22px color-mix(in srgb, var(--sable) 22%, transparent);
}
.tuile-mode--vedette .tuile-mode__icone {
  background: var(--sable);
  color: var(--abysse);
}
.tuile-mode--vedette .tuile-mode__titre { color: var(--sable-sombre); }
.tuile-mode--vedette:hover {
  border-color: var(--sable);
  box-shadow: 0 2px 6px rgba(13, 43, 69, 0.08),
              0 14px 28px color-mix(in srgb, var(--sable) 34%, transparent);
}

.carte-mode__icone {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--accent-pale), color-mix(in srgb, var(--accent-pale) 55%, white));
  color: var(--accent-sombre);
  transition: transform 0.2s cubic-bezier(0.22, 1.4, 0.4, 1);
}
.carte-mode__icone svg { width: 30px; height: 30px; }

/* Mini pictogramme « de ceci vers cela », en médaillon sur l'icône
   principale : montre le sens du mode (pays → capitale ou l'inverse)
   avec les mêmes glyphes que l'icône elle-même, plutôt qu'une décoration
   qui n'expliquerait rien. */
.carte-mode__sticker {
  position: absolute;
  right: -8px; bottom: -8px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 5px;
  border-radius: var(--r-rond);
  background: var(--blanc);
  box-shadow: var(--ombre-1);
  color: var(--accent-sombre);
}
.carte-mode__sticker svg:nth-child(2) { color: var(--texte-faible); }

.carte-mode__titre { font-family: var(--titres); font-weight: 700; font-size: var(--t-lg); }

.carte-mode__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: var(--t-xs);
  font-weight: 650;
  color: var(--accent-sombre);
}

/* CTA visuel : la carte entière reste cliquable (plus simple sur mobile
   qu'une petite cible de précision), ce bouton n'est qu'un repère visuel
   pour qu'on comprenne d'un regard qu'il y a une action à faire ici. */
.carte-mode__jouer {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 14px;
  border-radius: var(--r-rond);
  background: var(--accent);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 650;
  white-space: nowrap;
  transition: background 0.16s ease;
}
.carte-mode__jouer svg { width: 14px; height: 14px; }


/* ---------------------------------------------------------------- */
/* Cartouche de titre — le seul ornement de profil de la V1          */
/* ---------------------------------------------------------------- */
.cartouche {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-rond);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--c-titre, var(--lagon-sombre));
  background: color-mix(in srgb, var(--c-titre, var(--lagon)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-titre, var(--lagon)) 32%, transparent);
  white-space: nowrap;
}
.cartouche::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--c-titre, var(--lagon));
  transform: rotate(45deg);
}


/* ---------------------------------------------------------------- */
/* Pastille d'initiales                                              */
/* ---------------------------------------------------------------- */
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-rond);
  background: color-mix(in srgb, var(--c-titre, var(--lagon)) 16%, var(--blanc));
  border: 1.5px solid color-mix(in srgb, var(--c-titre, var(--lagon)) 38%, transparent);
  color: color-mix(in srgb, var(--c-titre, var(--lagon)) 82%, var(--abysse));
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-md);
  text-transform: uppercase;
}
.avatar--grand { width: 68px; height: 68px; font-size: var(--t-2xl); }


/* ---------------------------------------------------------------- */
/* Champs de saisie                                                  */
/* ---------------------------------------------------------------- */
.champ {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--e4);
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--r-md);
  background: var(--blanc);
  font-size: var(--t-lg); /* 16px minimum : en dessous, iOS zoome au focus */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.champ:focus {
  outline: none;
  border-color: var(--lagon);
  box-shadow: 0 0 0 3px var(--lagon-pale);
}
.champ::placeholder { color: var(--texte-faible); }
.champ--recherche { padding-left: 44px; }

.champ-groupe { display: flex; flex-direction: column; gap: 6px; }
.champ-groupe > label { font-size: var(--t-sm); font-weight: 600; color: var(--texte-doux); }
.champ-aide { font-size: var(--t-xs); color: var(--texte-faible); }
.champ-erreur { font-size: var(--t-sm); color: var(--faux); font-weight: 500; }

.recherche { position: relative; }
.recherche > svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  color: var(--texte-faible);
  pointer-events: none;
}
.recherche__effacer {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-rond);
  color: var(--texte-faible);
}
.recherche__effacer:hover { background: var(--neige); color: var(--abysse); }


/* ---------------------------------------------------------------- */
/* Onglets                                                           */
/* ---------------------------------------------------------------- */
.segments {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--brume);
  border-radius: var(--r-md);
}
.segments__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 9px;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--texte-doux);
  transition: background 0.15s ease, color 0.15s ease;
}
/* Les variables de teinte sont posées par les variantes ci-dessous ; les
   réglages sans teinte (mode de réponse, choix du mode de jeu) n'en
   définissent aucune et retombent sur la pastille blanche neutre. */
.segments__item[aria-selected='true'] {
  background: var(--t-pale, var(--blanc));
  color: var(--t-fort, var(--abysse));
  box-shadow: var(--ombre-1);
}

/* Difficulté : trois pastilles au même endroit, dans le même gris — seule
   la position les distinguait. Chacune prend sa couleur une fois choisie,
   du vert au rouge, et la jauge à barres dit la même chose sans couleur. */
.segments__item--facile    { --t-fort: var(--juste);        --t-pale: var(--juste-pale); }
.segments__item--moyen     { --t-fort: var(--sable-sombre); --t-pale: var(--sable-pale); }
.segments__item--difficile { --t-fort: var(--faux);         --t-pale: var(--faux-pale); }

.jauge-niveau {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.jauge-niveau i {
  width: 3px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.25;
}
.jauge-niveau i:nth-child(1) { height: 5px; }
.jauge-niveau i:nth-child(2) { height: 8.5px; }
.jauge-niveau i:nth-child(3) { height: 12px; }
.jauge-niveau i.jauge-niveau__pleine { opacity: 1; }

/* Case à cocher « mode survie » dans la modale de lancement d'une partie.
   Compacte : deux lignes courtes alignées sur la case, pas un paragraphe. */
.case-survie {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border-radius: var(--r-md);
  border: 1px solid var(--bordure);
  cursor: pointer;
}
.case-survie input {
  width: 19px; height: 19px;
  accent-color: var(--lagon);
  flex: none;
}
.case-survie__titre { font-weight: 650; line-height: 1.3; }
.case-survie__note { font-size: var(--t-xs); color: var(--texte-doux); line-height: 1.3; }


/* ---------------------------------------------------------------- */
/* Listes                                                            */
/* ---------------------------------------------------------------- */
.liste { display: flex; flex-direction: column; }
.liste > li + li { border-top: 1px solid var(--bordure); }

.ligne {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  padding: var(--e3) var(--e4);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.ligne:hover { background: rgba(13, 43, 69, 0.028); }
.ligne__corps { min-width: 0; flex: 1; }
.ligne__nom {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ligne__valeur { font-family: var(--titres); font-weight: 700; font-variant-numeric: tabular-nums; }

.rang-place {
  flex: none;
  width: 30px;
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
  color: var(--texte-faible);
  text-align: center;
}
.rang-place--1 { color: var(--sable); font-size: var(--t-lg); }
.rang-place--2 { color: #8896A3; font-size: var(--t-lg); }
.rang-place--3 { color: var(--terracotta-sombre); font-size: var(--t-lg); }

.ligne--moi { background: var(--lagon-pale); }
.ligne--moi:hover { background: color-mix(in srgb, var(--lagon-pale) 80%, var(--lagon)); }


/* ---------------------------------------------------------------- */
/* Barres de progression                                             */
/* ---------------------------------------------------------------- */
.jauge {
  height: 8px;
  border-radius: var(--r-rond);
  background: rgba(13, 43, 69, 0.09);
  overflow: hidden;
}
.jauge__remplissage {
  height: 100%;
  border-radius: var(--r-rond);
  background: var(--lagon);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.jauge--fine { height: 5px; }


/* ---------------------------------------------------------------- */
/* États vides et chargement                                         */
/* ---------------------------------------------------------------- */
.vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e8) var(--e4);
  text-align: center;
  color: var(--texte-doux);
}
.vide svg { width: 46px; height: 46px; color: var(--bordure-forte); }
.vide h3 { font-size: var(--t-lg); color: var(--abysse); }

.squelette {
  border-radius: var(--r-md);
  background: linear-gradient(90deg,
    rgba(13, 43, 69, 0.055) 25%,
    rgba(13, 43, 69, 0.09) 37%,
    rgba(13, 43, 69, 0.055) 63%);
  background-size: 400% 100%;
  animation: miroitement 1.3s ease infinite;
}
@keyframes miroitement {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}


/* ---------------------------------------------------------------- */
/* Messages passagers                                                */
/* ---------------------------------------------------------------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--hauteur-nav) + env(safe-area-inset-bottom) + var(--e3));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  width: min(92vw, 460px);
  pointer-events: none;
}
@media (min-width: 900px) {
  .toasts { bottom: auto; top: var(--e6); }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-md);
  background: var(--abysse);
  color: #fff;
  font-size: var(--t-md);
  font-weight: 550;
  box-shadow: var(--ombre-3);
  animation: toast-entree 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.toast--succes { background: var(--juste); }
.toast--erreur { background: var(--faux); }
.toast svg { width: 20px; height: 20px; flex: none; }

@keyframes toast-entree {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------- */
/* Fenêtre modale                                                    */
/* ---------------------------------------------------------------- */
.voile {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(13, 43, 69, 0.42);
  backdrop-filter: blur(3px);
  animation: apparition 0.18s ease both;
}
@media (min-width: 900px) { .voile { align-items: center; } }

.modale {
  width: min(100%, 460px);
  max-height: 88dvh;
  overflow-y: auto;
  padding: var(--e5) var(--e4) calc(var(--e5) + env(safe-area-inset-bottom));
  background: var(--blanc);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--ombre-3);
  animation: modale-entree 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (min-width: 900px) { .modale { border-radius: var(--r-xl); } }

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