/* ══════════════════════════════════════════════════════════
   MOBILE — une version à part entière, pas une réduction.
   Tout est composé sur l'axe du téléphone : centré, symétrique,
   plein écran, au pouce. Chargée en dernier, elle a le dernier
   mot sur les autres feuilles en dessous de 860 px.
   ══════════════════════════════════════════════════════════ */
.pour-doigt { display: none; }

@media (max-width: 860px) {
  :root { --g: 22px; }
  .pour-souris { display: none; }
  .pour-doigt { display: inline; }

  /* ─────────── la barre : sommaire à gauche, signature au centre, son à droite ─────────── */
  .nav {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: env(safe-area-inset-top) 12px 0;
  }
  .nav__outils { display: contents; }
  .nav__menu { grid-column: 1; grid-row: 1; justify-self: start; width: 44px; height: 44px; }
  .nav__sig { grid-column: 2; grid-row: 1; width: 54px; height: 32px; }
  .nav__son { grid-column: 3; grid-row: 1; justify-self: end; width: 44px; height: 44px; }
  .nav__jouer { display: none; }
  html.parcours-fini .nav__jouer { display: none; }

  /* le sommaire, centré */
  .menu { justify-content: center; align-items: center; text-align: center; gap: 30px; }
  .menu ol { align-items: center; gap: 6px; }
  .menu button { flex-direction: column; align-items: center; gap: 0; font-size: clamp(27px, 7.8vw, 38px); line-height: 1.08; text-align: center; }
  .menu button small { min-width: 0; font-size: 10.5px; margin-bottom: 1px; }
  .menu__note { text-align: center; max-width: 18em; }

  /* ─────────── l'ouverture : la signature, le nom, sur l'axe ─────────── */
  .ouverture { justify-items: center; text-align: center; padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .ouverture__nom { justify-self: center; }
  .ouverture h1 { margin-left: 0; font-size: clamp(58px, 18.6vw, 112px); }
  .ouverture__sig { top: calc(var(--nav-h) + 5svh); width: min(90vw, 50svh); }
  .ouverture__fil {
    left: 0; right: 0; margin-inline: auto; width: max-content;
    bottom: calc(28px + env(safe-area-inset-bottom)); gap: 10px;
  }
  .ouverture__fil span { writing-mode: horizontal-tb; transform: none; }
  .ouverture__fil i { height: 44px; }

  /* ─────────── la définition ─────────── */
  .definition__scene { text-align: center; }
  .definition__entree { flex-direction: column; align-items: center; gap: 10px; }
  .definition__mot { margin-left: 0; }
  .definition__gram { justify-content: center; }
  .definition__sens { justify-items: center; gap: 12px; }
  .definition__def { max-width: 21em; }
  .definition__voir { justify-self: center; text-align: center; }

  /* ─────────── les chiffres : une grille en croix ─────────── */
  .chiffres { padding: 72px var(--g) 92px; }
  .chiffres__liste { border-top: 0; }
  .chiffre, .chiffre:first-child, .chiffre:nth-child(2n) {
    padding: 30px 10px; border: 0; text-align: center;
  }
  .chiffre:nth-child(odd) { border-right: 1px solid var(--filet-nuit); }
  .chiffre:nth-child(-n + 2) { border-bottom: 1px solid var(--filet-nuit); }
  .chiffre__n { align-items: center; }
  .chiffre__n b { font-size: clamp(58px, 17vw, 90px); }
  .chiffre__t { margin: 12px auto 0; max-width: 12.5em; font-size: 14.5px; }

  /* ─────────── la courbe : le graphique en haut, le récit centré dessous ─────────── */
  .courbe__jour::before, .mille__scene::before { display: none; }
  .courbe__jour, .mille__scene { background-position: 0 var(--phase-b, 0px), 50% var(--phase, 0px); }
  .courbe-anim .courbe__svg { left: var(--g); width: calc(100% - var(--g) * 2); top: calc(var(--nav-h) + 20px); height: 36svh; }
  .courbe-anim .courbe__etapes {
    left: var(--g); right: var(--g); width: auto;
    top: calc(var(--nav-h) + 20px + 36svh + 34px); bottom: calc(20px + env(safe-area-inset-bottom) + var(--bas));
    text-align: center;
  }
  .courbe-anim .etape { top: 50%; transform: translateY(-50%); }
  .etape p:not(.etape__an) { margin-inline: auto; }
  .etape__an { margin-bottom: 8px; }
  .courbe-anim .etape--decision { align-items: center; text-align: center; }

  /* ─────────── 1 sur 1 000 : le texte au centre, les points dessous ─────────── */
  .mille__textes { left: var(--g); right: var(--g); align-items: center; text-align: center; top: calc(var(--nav-h) + 2svh); }
  .mille__rare { transform-origin: center; }
  .mille__compte { margin-left: 0; }
  .mille__titre { margin-inline: auto; max-width: 17em; }

  /* ─────────── le voyage : le décor en haut, la passion centrée dessous ─────────── */
  .vp__intro { text-align: center; padding: 0 var(--g); }
  .vp__intro-titre { font-size: clamp(46px, 13.6vw, 74px); }
  .vp__intro-texte { margin-inline: auto; max-width: 21em; }
  .vp--intro .vp__consigne { justify-content: center; margin-top: 36px; }
  .vp__texte {
    left: var(--g); right: var(--g); top: auto;
    bottom: calc(92px + env(safe-area-inset-bottom) + var(--bas));
    align-items: center; text-align: center;
  }
  .vp__accroche { font-size: 16px; margin-top: 8px; }
  .vp__titre { margin: 4px 0 10px; width: 100%; text-align: center; }
  .vp__lien { font-size: 15.5px; line-height: 1.5; max-width: 24em; }
  .vp__action { justify-content: center; margin-top: 18px; }
  .vp__jouer { height: 56px; padding: 0 30px 0 24px; }
  .vp__records {
    width: 100%; max-width: 330px; margin: 18px auto 0; padding-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    border-top: 0;
  }
  .vp__records > div { padding: 12px 4px 0; border-top: 1px solid var(--filet-nuit); }
  .vp__records > div + div { border-left: 1px solid var(--filet-nuit); }
  .vp__records dt { font-size: 11px; }
  .vp__records dd { font-size: 14px; }
  .vp__pips { justify-content: center; }
  .voyage__guide { bottom: calc(22px + env(safe-area-inset-bottom) + var(--bas)); }
  .voyage__etapes { justify-content: center; gap: 14px; }

  /* ─────────── le classement ─────────── */
  .tableau { padding: 96px var(--g) 96px; }
  .tableau__tete { justify-items: center; text-align: center; }
  .tableau__titre { font-size: clamp(48px, 14.5vw, 76px); }
  .tableau__intro { font-size: 16.5px; }
  .classement__moi { justify-content: center; }
  .collection__tete { justify-content: center; flex-direction: column; align-items: center; gap: 2px; }
  /* pas de cadre qui défile sous le doigt : la liste suit la page */
  .classement__corps { height: auto; overflow: visible; }
  .cls__l.cls__vous { position: static; }
  .cls__tout {
    display: flex; align-items: center; justify-content: center; width: 100%;
    height: 48px; margin-top: 14px; border-radius: 999px;
    border: 1px solid var(--filet-nuit);
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--lumiere);
  }
  .classement__onglets { mask-image: linear-gradient(90deg, #000 90%, transparent); }

  /* ─────────── les jeux : deux colonnes, la dernière carte seule au centre ─────────── */
  .acces { padding: 40px 14px 88px; }
  .acces__tete { flex-direction: column; align-items: center; text-align: center; }
  .acces__titre { font-size: clamp(48px, 14.5vw, 76px); }
  .acces__intro { padding-bottom: 0; font-size: 17px; }
  .acces__grille { gap: 10px; }
  .aj { flex: 0 0 calc(50% - 5px); max-width: none; min-height: 210px; padding: 22px 10px 16px; }
  .aj:hover { transform: none; }

  /* ─────────── les annexes ─────────── */
  .annexes { padding: 96px 14px 96px; }
  .annexes__tete { flex-direction: column; align-items: center; text-align: center; }
  .annexes__titre { font-size: clamp(48px, 14.5vw, 76px); }
  .annexes__intro { padding-bottom: 0; font-size: 18px; }
  .feuille__onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 8px 6px 0; }
  .feuille__onglets button { padding: 13px 2px 14px; font-size: 13.5px; text-align: center; }

  /* ─────────── la fin ─────────── */
  .fin { text-align: center; padding-top: 112px; }
  .fin__merci { margin-inline: auto; font-size: clamp(44px, 12.6vw, 66px); }
  .fin__sous { font-size: 18px; }
  .contacts { margin-top: 56px; }
  .contacts a, .contacts li:last-child { justify-items: center; text-align: center; }
  .contacts a:hover .contacts__v { transform: none; }
  .contacts__v { font-size: 22px; }
  .fin__sig { width: min(78vw, 44svh); }
  .fin__pied { flex-direction: column; align-items: center; text-align: center; gap: 6px; }

  /* ══════════ LA BORNE ══════════ */
  /* la partie : les vies à gauche, le score au centre, la croix à droite */
  .hud {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start; row-gap: 0;
    padding: 12px 14px 4px;
  }
  .hud__id { display: none; }
  .hud__outils { display: contents; }
  .hud__vies { grid-column: 1; grid-row: 1; justify-self: start; height: 42px; padding: 0 13px; }
  .hud__centre { grid-column: 2; grid-row: 1; gap: 8px; }
  .hud__fermer { grid-column: 3; grid-row: 1; justify-self: end; width: 42px; height: 42px; }
  .hud__score { flex-direction: column; align-items: center; gap: 2px; }
  .hud__score b { font-size: 46px; }
  .hud__score span { font-size: 11.5px; }
  .jauge { flex-direction: column; gap: 6px; }
  .jauge__piste { width: 150px; }
  .jauge__cible { font-size: 11.5px; }
  .borne__scene { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* l'accueil : une affiche centrée, le bouton sous le pouce */
  .ecran { padding: calc(env(safe-area-inset-top) + 68px) var(--g) calc(env(safe-area-inset-bottom) + 18px); }
  .acc, .res { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 24px; align-self: start; }
  .acc__tete { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .acc__sur, .res__mot { justify-content: center; }
  .acc__sur::after, .res__mot::after { content: ''; width: 24px; height: 1.5px; background: currentColor; }
  .acc__titre { margin-top: 14px; width: 100%; text-align: center; }
  .acc__but { margin-inline: auto; font-size: 19.5px; max-width: 17em; }
  .acc__stats { width: 100%; max-width: none; margin-top: 24px; }
  .acc__stats > div + div { margin-left: 0; padding-left: 0; }
  .acc__stats > div { padding: 0 6px; }
  .acc__corps { width: 100%; }
  .acc__bloc { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding: 18px 0; }
  .acc__regles { justify-items: center; gap: 12px; }
  .acc__regles li { display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 21em; font-size: 15.5px; }
  .acc__regles li::before { padding-top: 0; }
  .acc__touches { justify-items: center; }
  .acc__touches li { flex-direction: column; justify-content: center; gap: 8px; }
  /* le bouton reste sous le pouce ; la fiche s'efface derrière lui au lieu d'être coupée */
  .acc__pied {
    position: sticky; bottom: 0; z-index: 2;
    margin: 0 calc(var(--g) * -1) calc((18px + env(safe-area-inset-bottom)) * -1);
    padding: 34px var(--g) calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(8, 10, 18, 0), rgba(8, 10, 18, .94) 40%);
  }
  .acc__jouer { margin-top: 0; height: 60px; }

  /* le résultat : tout sur l'axe, les chiffres en trois colonnes égales */
  .res__g, .res__d { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .res__score { justify-content: center; margin-top: 12px; }
  .res__score b { font-size: clamp(84px, 26vw, 128px); }
  .res__detail { margin-top: 14px; }
  .res__medailles { width: 100%; max-width: 300px; margin: 26px auto 0; justify-items: center; }
  .res__medailles li { align-items: center; }
  .res__stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--filet-nuit); }
  .res__stats > div { flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 14px 4px; border-bottom: 0; }
  .res__stats > div + div { border-left: 1px solid var(--filet-nuit); }
  .res__stats dt { font-size: 11.5px; line-height: 1.3; }
  .res__stats dd { font-size: 16px; flex-direction: column; gap: 6px; }
  .res__rang { margin: 20px auto 0; font-size: 19px; max-width: 18em; }
  .res__actions { width: 100%; margin-top: 22px; }
  .res__connexion { justify-content: center; }

  /* les jeux, recentrés et à la taille du téléphone */
  .clap { width: 100%; max-width: 440px; gap: 20px; padding: 0 16px; }
  .clap__plateau { aspect-ratio: 16 / 12.5; }
  .clap__bras { height: 17%; }
  .clap__ardoise { top: 27%; }
  .clap__ardoise b { font-size: clamp(24px, 8vw, 36px); }
  .clap__ardoise em { font-size: 11px; }
  .clap__piste { height: 30px; }
  .clap__pellicule { height: 32px; }
  .bulle__tete { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .bulle__proj { text-align: center; }
  .bulle__histo { justify-content: center; }
  .atlas__question { font-size: 23px; }
  .atlas__zoom { right: 10px; }
}

@media (max-width: 860px) and (max-height: 720px) {
  /* le texte de Samuel reste entier : c'est le décor qui cède de la place */
  .vp__lien { font-size: 14.5px; display: block; -webkit-line-clamp: unset; overflow: visible; }
  .vp__records { display: none; }
  .acc__bloc { padding: 14px 0; }
}

/* ─────────── un téléphone à l'horizontale ─────────── */
.pivot { display: none; }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .pivot {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-content: center; justify-items: center; gap: 12px;
    text-align: center;
    background: var(--nuit); color: var(--lumiere);
  }
  .pivot svg { width: 58px; height: 58px; margin-bottom: 8px; fill: none; stroke: var(--bleu-nuit); stroke-width: 1.6; stroke-linecap: round; animation: pivot 2.6s var(--ease) infinite; }
  .pivot__t { font-family: var(--serif); font-weight: 300; font-size: 30px; letter-spacing: -.01em; }
  .pivot__s { font-family: var(--sans); font-size: 14px; color: var(--lumiere-2); }
}
@keyframes pivot { 0%, 22% { transform: rotate(-90deg); } 55%, 78% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } }