/* =====================================================================
   CapiQuiz — socle : polices, jetons de style, mise en page
   =====================================================================
   L'identité repose sur l'échelle d'altitude des cartes physiques : du
   bleu des océans au blanc des sommets. C'est aussi la progression du
   joueur — les titres empruntent leurs couleurs à cette même échelle.
   ===================================================================== */

/* ---------------------------------------------------------------- */
/* Polices — hébergées avec le projet, aucun appel extérieur         */
/* ---------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../../public/polices/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../../public/polices/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../public/polices/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../public/polices/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------------------------------------------------------------- */
/* Jetons                                                            */
/* ---------------------------------------------------------------- */
:root {
  /* --- Échelle d'altitude ------------------------------------------
     Les couleurs gardent leur nom de paysage (des abysses au sable) et
     chacune porte un sens dans le jeu : le bleu dit le monde, le vert la
     France, l'or les drapeaux, la terre cuite les villes. Chaque teinte
     a sa version pâle (fond d'un petit bloc) et sombre (texte lisible
     sur cette version pâle). */
  --abysse:        #0D2B45;   /* nuit, texte */
  --ocean:         #1C5D91;   /* bleu — capitales */
  --ocean-pale:    #E2EBF4;
  --ocean-sombre:  #144468;
  --lagon:         #087F7B;   /* turquoise — la marque, les actions */
  --lagon-fonce:   #066B67;
  --lagon-sombre:  #05534F;
  --lagon-pale:    #D9EBE9;
  --plaine:        #2F8B55;   /* vert — départements */
  --plaine-pale:   #E1EFE5;
  --plaine-sombre: #216B41;
  --sable:         #F5B51B;   /* or — drapeaux, série, points */
  /* L'or pur ne porte pas de texte (2:1 sur clair) : cette version
     sombre passe le seuil de lisibilité en restant un or. */
  --sable-sombre:  #8A6208;
  --sable-pale:    #FDF2D5;
  --terracotta:    #C2603A;   /* terre cuite — préfectures */
  --terracotta-pale: #F7E6DE;
  --terracotta-sombre: #93472A;
  --ardoise:       #4A6076;   /* bleu-gris — le mode mix */
  --ardoise-pale:  #E5EBF0;
  --ardoise-sombre: #33475A;

  /* États de réponse — fonds pleins, lisibles d'un coup d'œil */
  --juste:         #17753A;
  --juste-pale:    #E7F5EC;
  --faux:          #B3283A;
  --faux-pale:     #FBE9EB;

  /* --- Surfaces ----------------------------------------------------
     Trois niveaux franchement séparés, et c'est le point : la première
     version de cette palette déplaçait le fond de page de #F5F8F9 à
     #F3F7F6, soit un écart perceptuel de 1,2 — invisible. La surface qui
     occupe tout l'écran doit bouger pour de bon, sinon rien ne change.

       ossature (sombre)  →  page (papier de carte)  →  carte (blanche)

     L'ossature sombre est ce qui sort l'interface du registre « tableau de
     bord » : le contenu est encadré en haut et en bas, comme dans un jeu,
     au lieu de flotter dans du blanc. */
  --ossature:      #0D2B45;   /* en-tête et barre de navigation */
  /* Le bandeau d'accueil : un ciel de nuit, pas un dégradé turquoise.
     L'or du titre ne tenait qu'à 3,5:1 sur l'ancien bas de dégradé
     (vert-bleu) — il y paraissait sale autant qu'il y était peu lisible.
     Sur ce navy il monte à 5,8:1 en haut et 9,2:1 en bas, et l'accord
     or/bleu nuit est celui qui met le mieux l'or en valeur. */
  --nuit:          #16406B;
  --nuit-profond:  #0A1F33;
  --ossature-texte: #9FB6C0;  /* libellés au repos sur l'ossature */
  --neige:         #DFEAE4;   /* fond de page, teinte de papier de carte */
  --brume:         #E8F1EF;   /* creux discrets à l'intérieur des cartes */
  --blanc:         #FFFFFF;   /* cartes */
  --texte:         var(--abysse);
  --texte-doux:    #45607A;
  /* Assombri d'un cran par rapport au fond blanc d'origine : ce gris porte
     les libellés de la navigation, qui reposent maintenant sur l'ossature
     teintée — il y tombait à 4,3:1, sous le seuil de lisibilité. */
  --texte-faible:  #52677A;
  --bordure:       #D5E2DF;
  --bordure-forte: #BACFCA;

  /* Typographie */
  --titres: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --texte-police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs:  0.75rem;
  --t-sm:  0.8125rem;
  --t-md:  0.9375rem;
  --t-lg:  1.0625rem;
  --t-xl:  1.3125rem;
  --t-2xl: 1.625rem;
  --t-3xl: 2.125rem;
  --t-4xl: 2.875rem;

  /* Espacements */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e7: 32px; --e8: 44px;

  /* Rayons */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-rond: 999px;

  /* Ombres — teintées de bleu profond plutôt que de gris, et un cran plus
     franches qu'avant : sur un fond teinté, une carte blanche a besoin
     d'un peu d'ombre pour se détacher au lieu de flotter. */
  --ombre-1: 0 1px 2px rgba(13, 43, 69, 0.06), 0 2px 5px rgba(13, 43, 69, 0.05);
  --ombre-2: 0 2px 6px rgba(13, 43, 69, 0.07), 0 10px 22px rgba(13, 43, 69, 0.07);
  --ombre-3: 0 14px 38px rgba(13, 43, 69, 0.16);

  /* Accent par défaut d'une carte de mode : la couleur de la marque. Les
     classes .carte-mode--<teinte> le remplacent (composants.css, chargé
     après ce fichier, donc à spécificité égale ce sont elles qui gagnent). */
  --accent:        var(--lagon);
  --accent-pale:   var(--lagon-pale);
  --accent-sombre: var(--lagon-sombre);

  --largeur-max: 620px;
  --hauteur-nav: 66px;
  /* Marge intérieure de la zone de contenu. Nommée parce qu'un élément
     collant a besoin de la connaître pour la déborder proprement (voir
     .reviser__barre). */
  --marge-ecran: var(--e4);
}


/* ---------------------------------------------------------------- */
/* Remise à zéro                                                     */
/* ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--texte-police);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--texte);
  background: var(--neige);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Le relief en fond : présent partout, mais assez pâle pour ne jamais
   gêner la lecture. Fixé pour qu'il ne défile pas avec le contenu. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('../../public/fond-courbes.svg') center / cover no-repeat;
  opacity: 0.085;
  pointer-events: none;
  z-index: 0;
}

img, svg { display: block; max-width: 100%; }

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

button {
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

a { color: var(--lagon-fonce); text-decoration-thickness: 1px; text-underline-offset: 2px; }

ul, ol { list-style: none; }

:focus-visible {
  outline: 3px solid var(--lagon);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}


/* ---------------------------------------------------------------- */
/* Typographie                                                       */
/* ---------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--titres);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

.chiffre {
  font-family: var(--titres);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
}

.doux   { color: var(--texte-doux); }
.faible { color: var(--texte-faible); }
.petit  { font-size: var(--t-sm); }
.minus  { font-size: var(--t-xs); }

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


/* ---------------------------------------------------------------- */
/* Ossature                                                          */
/* ---------------------------------------------------------------- */
/* Coquille d'application : la fenêtre ne défile jamais, c'est la zone de
   contenu qui défile à l'intérieur. C'est ce qui verrouille réellement
   l'en-tête et la barre de navigation — tant qu'ils étaient `fixed` /
   `sticky` sur un document qui défile, ils dépendaient du bon vouloir du
   navigateur pour se repeindre, et disparaissaient sur les pages longues
   (Réviser et ses 130 pays, notamment). En sortant de la zone défilante,
   ils n'ont plus rien à repeindre. */
#app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ecran {
  /* min-height:0 est indispensable : sans lui, un enfant flex refuse de
     devenir plus petit que son contenu et le débordement repart sur la
     fenêtre au lieu de rester dans la zone défilante. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bordure-forte) transparent;
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--marge-ecran) var(--marge-ecran) var(--e6);
  animation: apparition 0.24s ease both;
}

.ecran::-webkit-scrollbar { width: 8px; }
.ecran::-webkit-scrollbar-track { background: transparent; }
.ecran::-webkit-scrollbar-thumb {
  background: var(--bordure-forte);
  border-radius: var(--r-rond);
  /* Une bordure de la couleur du fond amincit visuellement le curseur
     sans le rendre difficile à attraper. */
  border: 2px solid var(--neige);
}
.ecran::-webkit-scrollbar-thumb:hover { background: var(--texte-faible); }

/* Le quiz occupe tout l'écran : pas de barre de navigation, pas de
   marge basse. On ne quitte pas une partie par distraction. */
.ecran--plein {
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--e4));
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.pile     { display: flex; flex-direction: column; gap: var(--e4); }
.pile-sm  { display: flex; flex-direction: column; gap: var(--e2); }
.pile-lg  { display: flex; flex-direction: column; gap: var(--e6); }
.rang     { display: flex; align-items: center; gap: var(--e3); }
.rang-esp { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.pousse   { margin-left: auto; }
.centre   { text-align: center; }


/* ---------------------------------------------------------------- */
/* Accessibilité et confort                                          */
/* ---------------------------------------------------------------- */
.invisible {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------- */
/* Ordinateur — la navigation passe en haut, le contenu respire      */
/* ---------------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --hauteur-nav: 0px; --marge-ecran: var(--e6); }

  .ecran {
    max-width: 760px;
    padding: var(--marge-ecran) var(--marge-ecran) var(--e8);
  }

  body::before { opacity: 0.11; }
}