/*
 * Navigation responsive.
 *
 * La barre est écrite en styles en ligne, avec « nowrap » sur chaque lien : elle
 * exige 771 px et se chevauche en dessous. Sur un compagnon de jeu, une large part
 * des visites vient du téléphone.
 *
 * Les styles en ligne l'emportent sur une feuille externe, d'où les !important :
 * ils ne signalent pas une surcharge hasardeuse mais l'unique moyen de reprendre
 * la main sans réécrire l'attribut style des onze pages.
 *
 * Parti pris : pas de menu déroulant. Un site à trois liens n'a pas besoin d'un
 * menu à ouvrir — les liens restent visibles dans une bande défilable, et la
 * marque reste épinglée à gauche pour ne jamais perdre le retour à l'accueil.
 */

/* Tablette et petits portables : la barre se resserre, les liens défilent. */
@media (max-width: 860px) {
  .wl-nav {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .wl-nav-links {
    overflow-x: auto !important;
    min-width: 0 !important;
    gap: 16px !important;
    /* Barre de défilement masquée : le geste tactile suffit, et une barre
       visible sous trois liens fait désordre. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
  }
  .wl-nav-links::-webkit-scrollbar { display: none; }

  /* La marque reste en place pendant que les liens défilent sous elle. */
  .wl-nav-links > a:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    padding-right: 12px;
    background: linear-gradient(90deg,
      oklch(0.16 0.02 240) 0%,
      oklch(0.16 0.02 240) 72%,
      oklch(0.16 0.02 240 / 0) 100%);
  }

  .wl-nav-actions {
    gap: 8px !important;
  }
  .wl-nav-actions > a {
    padding: 8px 13px !important;
    font-size: 12.5px !important;
  }
}

/* Téléphone : on garde la rangée unique et on resserre.
 *
 * Un empilement sur deux rangées serait plus aéré, mais la marque est enfant du
 * bloc des liens : « order » ne réordonne qu'entre frères d'un même conteneur,
 * elle resterait donc en bas, ce qui est pire qu'une rangée serrée. Déplacer la
 * marque demanderait de modifier le balisage des onze pages — à faire un jour,
 * pas au prix d'une régression. */
@media (max-width: 620px) {
  .wl-nav {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .wl-nav-links {
    gap: 15px !important;
  }
  .wl-nav-links > a:not(:first-child) {
    font-size: 13.5px !important;
  }
  .wl-nav-actions > a {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}

/* Très petits écrans : on gagne les derniers pixels sur les boutons. */
@media (max-width: 400px) {
  .wl-nav-actions > a {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }
  .wl-nav-links > a:not(:first-child) {
    font-size: 13px !important;
  }
}

/* ------------------------------------------------------------------ *
 * Typographie et espacements
 *
 * Les pages fixent les tailles en pixels, dont un titre d'accueil à 80 px.
 * Sur 375 px de large, le seul mot « STATISTIQUES, » réclame 560 px : le
 * conteneur flex refuse de rétrécir (min-width vaut auto par défaut sur un
 * élément flex) et le titre déborde des deux côtés, rogné par overflow-x.
 *
 * Deux corrections complémentaires : autoriser le rétrécissement, et ramener
 * les grands titres à une taille proportionnelle à l'écran.
 * ------------------------------------------------------------------ */

@media (max-width: 860px) {
  /* Sans ceci, un enfant flex reste large comme son mot le plus long. */
  section > *,
  section > * > * {
    min-width: 0;
  }

  h1 { font-size: clamp(30px, 8vw, 56px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(20px, 5.2vw, 30px) !important; }

  /* 64 px de marge de chaque côté ne laissent presque rien au texte. */
  section { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 620px) {
  h1 { font-size: clamp(26px, 7.6vw, 40px) !important; }
  h2 { font-size: clamp(18px, 5vw, 24px) !important; }
  section { padding-left: 14px !important; padding-right: 14px !important; }

  /* Les cartes et panneaux respirent moins, mais restent lisibles. */
  section > div[style*="border-radius"] { padding: 20px !important; }
}

/* Bandeau de chiffres clés : trois colonnes qui deviennent illisibles sur
 * téléphone — « 8 400+ » se coupait entre le 8 et le 400. Les valeurs ne
 * doivent jamais se scinder, et les colonnes s'élargissent en s'empilant. */
@media (max-width: 620px) {
  .wl-chiffres {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px 0 !important;
  }
  /* Uniquement les blocs porteurs de texte : les traits de séparation sont
   * eux aussi des div, et les élargir les transformait en pavés gris. */
  .wl-chiffres > div:not(:empty) {
    flex: 1 1 40% !important;
    min-width: 110px;
  }
  /* Les séparateurs verticaux n'ont plus de sens une fois les blocs empilés. */
  .wl-chiffres > div:empty {
    display: none !important;
  }
  /* La valeur elle-même reste d'un seul tenant. */
  .wl-chiffres > div > :first-child {
    white-space: nowrap !important;
  }
}