/* ============================================================
   JetGuessr : l'apparence du site
   ============================================================ */

/* --- Les couleurs (modifiables ici, elles s'appliquent partout) --- */
:root {
  --fond: oklch(17% .03 255);                 /* bleu nuit */
  --texte: oklch(96% .01 90);                 /* blanc cassé */
  --texte-attenue: oklch(70% .03 250);        /* gris bleuté */
  --principal: oklch(82% .16 75);             /* jaune ambré des panneaux d'aéroport */
  --texte-sur-principal: oklch(18% .03 255);
  --accent: oklch(72% .13 210);               /* bleu ciel */
  --succes: oklch(78% .16 150);               /* vert */
  --erreur: oklch(65% .2 25);                 /* rouge */
  --attenue: oklch(26% .03 255);
  --panneau: oklch(13% .02 255);              /* fond des grands blocs */
  --tuile: oklch(20% .02 255);                /* fond des petites cases */
  --bordure: oklch(100% 0 0 / .1);
  --bordure-champ: oklch(100% 0 0 / .14);
  --lueur: 0 0 40px -6px color-mix(in oklab, var(--principal) 60%, transparent);
}

/* --- Les bases --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, color-mix(in oklab, var(--principal) 14%, transparent), transparent 60%),
    var(--fond);
  background-attachment: fixed;
  color: var(--texte);
  font-family: "Manrope", sans-serif;
}

button,
input {
  font: inherit;
  color: inherit;
}

button:focus-visible {
  outline: 2px solid var(--principal);
  outline-offset: 2px;
}

svg {
  display: block;
}

/* --- Les éléments réutilisés partout --- */
.texte-attenue {
  color: var(--texte-attenue);
}

.petit {
  font-size: .875rem;
}

.logo {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
}

.logo span {
  color: var(--principal);
}

.mention {
  margin-top: 1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .75rem;
  color: var(--texte-attenue);
}

.icone {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Les grands blocs sombres */
.panneau {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: 1rem;
  box-shadow: inset 0 1px oklch(100% 0 0 / .06), 0 30px 60px -30px oklch(0% 0 0 / .7);
}

/* Les lettres façon panneau d'affichage d'aéroport */
.lettre {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  text-align: center;
  color: var(--principal);
  background: linear-gradient(180deg, var(--tuile) 49%, oklch(15% .02 255) 51%);
  border-radius: 6px;
  box-shadow: inset 0 -1px oklch(0% 0 0 / .5);
}

.groupe-lettres {
  display: flex;
  gap: 2px;
}

.lettre-petite {
  width: 1.5rem;
  padding: .25rem 0;
  font-size: .875rem;
}

.lettre-grande {
  width: 1.75rem;
  padding: .25rem 0;
  font-size: 1.25rem;
}

/* Les boutons jaunes */
.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  border: none;
  border-radius: .75rem;
  background: var(--principal);
  color: var(--texte-sur-principal);
  font-family: "Syne", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, filter .15s, opacity .15s;
}

.bouton:hover {
  filter: brightness(1.1);
}

.bouton:disabled {
  opacity: .4;
  box-shadow: none;
  cursor: default;
  filter: none;
}

.bouton .icone {
  width: 1.25rem;
  height: 1.25rem;
}

.bouton-rond {
  display: inline-flex;
  margin-top: 2rem;
  padding: 1rem 2rem;
  border-radius: 999px;
}

.bouton-rond:hover {
  transform: scale(1.05);
}

.lueur {
  box-shadow: var(--lueur);
}

/* Les boutons moins importants : transparents avec un contour */
.bouton-secondaire {
  border: 1px solid var(--bordure-champ);
  background: transparent;
  color: var(--texte);
}

.bouton-secondaire:hover {
  filter: none;
  background: color-mix(in oklab, var(--texte) 8%, transparent);
}

/* ============================================================
   Écran 1 : accueil
   ============================================================ */
.accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  max-width: 64rem;
  min-height: 100vh;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}

.accueil-texte {
  max-width: 36rem;
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding: .25rem .75rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--texte-attenue);
}

.point-vert {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--succes);
  animation: pulser 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* La taille suit la largeur de l'écran, pour que le titre ne soit jamais coupé */
.logo-grand {
  font-size: clamp(1.75rem, 8.5vw, 3.5rem);
}

.sous-titre {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--texte-attenue);
}

.tableau-departs {
  width: 100%;
  max-width: 24rem;
  padding: 1.25rem;
}

.tableau-entete {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--texte-attenue);
}

.ligne-depart {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ligne-depart + .ligne-depart {
  margin-top: .5rem;
}

.heure {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: .75rem;
  color: var(--texte-attenue);
}

.prix-cache {
  padding: .25rem .5rem;
  font-size: .875rem;
}

/* ============================================================
   Écran 2 : le jeu
   ============================================================ */
.jeu {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.jeu-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.logo-petit {
  font-size: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
}

.jeu-compteurs {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .875rem;
}

.jeu-compteurs b {
  color: var(--texte);
}

.score-en-cours {
  padding: .25rem .75rem;
}

.progression {
  display: flex;
  gap: 6px;
  margin-bottom: 1.5rem;
}

.progression span {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--attenue);
}

.progression .fait {
  background: var(--principal);
}

.progression .en-cours {
  background: color-mix(in oklab, var(--principal) 40%, transparent);
}

.jeu-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

/* --- La fiche du vol --- */
.fiche {
  overflow: hidden;
}

.carte {
  height: 13rem;
  padding: .5rem;
  border-bottom: 1px solid var(--bordure);
}

.carte svg {
  width: 100%;
  height: 100%;
}

.carte-globe {
  fill: var(--tuile);
  stroke: var(--bordure);
}

.carte-grille {
  fill: none;
  stroke: color-mix(in oklab, var(--texte-attenue) 10%, transparent);
  stroke-width: .5;
}

.carte-terres {
  fill: color-mix(in oklab, var(--texte-attenue) 30%, transparent);
  stroke: color-mix(in oklab, var(--texte-attenue) 40%, transparent);
  stroke-width: .5;
}

.carte-route {
  fill: none;
  stroke: var(--principal);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tracer 1.4s ease-out forwards;
}

.carte-halo {
  fill: color-mix(in oklab, var(--principal) 25%, transparent);
  animation: pulser 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

.carte-point {
  fill: var(--principal);
  stroke: var(--panneau);
  stroke-width: 1.5;
}

.carte-escale {
  fill: var(--texte);
  stroke: var(--panneau);
  stroke-width: 1.5;
}

.carte-etiquette rect {
  fill: var(--panneau);
  stroke: color-mix(in oklab, var(--principal) 50%, transparent);
}

.carte-etiquette text {
  fill: var(--principal);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
}

.fiche-contenu {
  padding: 1.25rem;
}

.trajet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.ville {
  margin-top: .25rem;
  font-size: .875rem;
  color: var(--texte-attenue);
}

.a-droite {
  text-align: right;
}

.a-droite .groupe-lettres {
  justify-content: flex-end;
}

.trajet-milieu {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 0 .5rem;
  color: var(--texte-attenue);
}

.trajet-ligne {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
}

.trajet-ligne span:first-child,
.trajet-ligne span:last-child {
  flex: 1;
  border-top: 1px dashed var(--bordure-champ);
}

.trajet-ligne .icone {
  color: var(--principal);
}

.trajet-escales {
  margin-top: .25rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-align: center;
}

.infos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: 1.5rem;
  font-size: .875rem;
}

.info,
.tuile {
  padding: .75rem;
  border-radius: .5rem;
  background: color-mix(in oklab, var(--attenue) 60%, transparent);
}

.info-titre {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texte-attenue);
}

.info-valeur {
  margin-top: .25rem;
  font-weight: 600;
}

.bagage {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
  padding: .75rem;
  border: 1px solid;
  border-radius: .5rem;
}

.bagage-main {
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.bagage-cabine {
  border-color: color-mix(in oklab, var(--principal) 40%, transparent);
  background: color-mix(in oklab, var(--principal) 10%, transparent);
}

.bagage-icone {
  padding: .5rem;
  border-radius: .5rem;
  color: var(--texte-sur-principal);
}

.bagage-main .bagage-icone {
  background: var(--accent);
}

.bagage-cabine .bagage-icone {
  background: var(--principal);
}

.bagage-icone .icone {
  width: 1.25rem;
  height: 1.25rem;
}

.bagage-titre {
  font-weight: 600;
}

.bagage-detail {
  font-size: .75rem;
  color: var(--texte-attenue);
}

/* --- La question et le résultat --- */
.reponse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
}

#bloc-question,
#bloc-resultat {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reponse .mention {
  margin-top: 0;
  font-size: 11px;
  text-align: center;
}

.titre-question {
  font-family: "Syne", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.champ {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  border: 1px solid var(--bordure-champ);
  border-radius: .75rem;
  background: var(--tuile);
}

.champ:focus-within {
  outline: 2px solid var(--principal);
}

.champ input {
  width: 100%;
  min-width: 0;
  padding: 1rem 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: "JetBrains Mono", monospace;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--principal);
}

.champ input::placeholder {
  color: color-mix(in oklab, var(--texte-attenue) 40%, transparent);
}

.champ span {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.875rem;
  color: var(--texte-attenue);
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.tuile {
  padding: 1rem;
  border-radius: .75rem;
}

.montant {
  margin-top: .25rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.5rem;
  font-weight: 700;
}

.en-avant {
  color: var(--principal);
}

.points-gagnes {
  padding: 1.25rem;
  border: 1px solid var(--bordure);
  border-radius: .75rem;
  background: var(--tuile);
  text-align: center;
}

.reponse .points-gagnes .mention {
  letter-spacing: .1em;
}

.points {
  font-family: "Syne", sans-serif;
  font-size: 3.75rem;
  font-weight: 800;
}

.points-bien {
  color: var(--succes);
}

.points-moyen {
  color: var(--principal);
}

.points-rate {
  color: var(--erreur);
}

/* ============================================================
   Écran 3 : fin de partie
   ============================================================ */
.fin {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}

.fin-contenu {
  padding: 1.5rem;
  text-align: center;
}

.fin-contenu > .icone {
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  color: var(--principal);
}

.titre-fin {
  margin-top: .75rem;
  font-family: "Syne", sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
}

.fin-contenu .mention {
  margin-top: 1.5rem;
  letter-spacing: .1em;
}

.score-total {
  font-family: "Syne", sans-serif;
  font-size: clamp(2rem, 9vw, 3.75rem);
  white-space: nowrap;
  font-weight: 800;
  color: var(--principal);
}

.score-max {
  font-size: 1.5rem;
  color: var(--texte-attenue);
}

.fin-boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
}

.fin-boutons .bouton-rond {
  margin-top: 0;
}

.recap {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 2rem;
  text-align: left;
}

.recap-ligne {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border-radius: .75rem;
  background: color-mix(in oklab, var(--attenue) 60%, transparent);
}

.recap-numero {
  font-family: "JetBrains Mono", monospace;
  font-size: .75rem;
  color: var(--texte-attenue);
}

.recap-trajet {
  flex: 1;
  min-width: 0;
}

.recap-codes {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}

.recap-details {
  overflow: hidden;
  font-size: .75rem;
  color: var(--texte-attenue);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recap-score {
  font-family: "JetBrains Mono", monospace;
  font-size: .75rem;
  text-align: right;
}

.recap-score b {
  color: var(--principal);
}

.recap-points {
  font-weight: 700;
}

/* ============================================================
   Les animations
   ============================================================ */
.bascule {
  transform-origin: top;
  animation: bascule .45s cubic-bezier(.2, .8, .2, 1) both;
}

.flotte {
  animation: flotter 5s ease-in-out infinite;
}

@keyframes bascule {
  from { opacity: 0; transform: rotateX(-90deg); }
  to   { opacity: 1; transform: rotateX(0); }
}

@keyframes flotter {
  50% { transform: translateY(-8px) rotate(-2deg); }
}

@keyframes pulser {
  50% { opacity: .5; }
}

@keyframes tracer {
  to { stroke-dashoffset: 0; }
}

/* Pour les personnes qui ont désactivé les animations dans leurs réglages */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   Sur grand écran (ordinateur, tablette à l'horizontale)
   ============================================================ */
@media (min-width: 768px) {
  .accueil {
    flex-direction: row;
    justify-content: space-between;
  }

  .accueil-texte {
    text-align: left;
  }

  .jeu {
    padding: 2.5rem 1rem;
  }

  .jeu-grille {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .carte {
    height: 18rem;
  }

  .fiche-contenu {
    padding: 1.5rem;
  }

  .lettre-grande {
    width: 2.25rem;
    font-size: 1.5rem;
  }

  .fin-contenu {
    padding: 2.5rem;
  }

  .score-total {
    font-size: 4.5rem;
  }
}