/* ═══════════════════════════════════════════════════════════════════
   Corrections responsive communes à toutes les pages.

   Les blocs de contenu viennent du WordPress : chacun porte son propre
   <style> dans le <head>, avec des tailles et des largeurs fixes. Cette
   feuille est chargée APRÈS ces styles pour pouvoir les corriger sans
   toucher aux blocs un par un — un seul endroit à maintenir.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Titres de page ───────────────────────────────────────────────────
   Les blocs fixent 38 à 42px. « TÉLÉCHARGEMENTS » à 42px mesure 323px :
   sur un écran de 320px le mot, insécable, poussait le document à 339px
   et créait un défilement horizontal. Une taille fluide règle le cas à
   la source plutôt que de masquer le débordement. */
.title,
.downloads-title,
.history-title,
.ws-contact-info h1,
.wss-prose h1 {
  font-size: clamp(1.75rem, 7vw, 2.625rem);
}

/* Un mot plus long que l'écran doit céder, quel que soit le titre. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
}

/* Une URL ou une adresse e-mail collée ne doit pas élargir la page. */
a, p, li, td, dd {
  overflow-wrap: break-word;
}

/* ── Images ───────────────────────────────────────────────────────────
   Garde-fou général : aucune image ne dépasse son conteneur. */
img {
  max-width: 100%;
  height: auto;
}

/* Le graphique de la page Education déborde volontairement vers la droite
   (width: 120% + décalage de 40px). La marge du navigateur l'absorbe au
   delà de ~1384px ; en dessous il sortait de l'écran (+57px à 1024px,
   +23px à 1280px). On ne garde le débordement que là où il tient. */
@media (max-width: 1400px) {
  .visual img {
    width: 100%;
    max-width: 100%;
    transform: none;
  }
  .visual img:hover {
    transform: scale(1.02);
  }
}

/* ── Cibles tactiles ──────────────────────────────────────────────────
   Les liens du pied de page et des blocs de contenu faisaient 16 à 26px
   de haut : impossible à viser au doigt. On les épaissit sur écran étroit
   et sur pointeur grossier — la seule condition « pointer: coarse » laissait
   le cas invérifiable au navigateur de test, et rate les petits écrans
   tactiles mal détectés. */
@media (max-width: 720px), (pointer: coarse) {
  .wss-footer a,
  .ws-contact-details a,
  .wss-prose-body a,
  .history-text a,
  .history-note a,
  .downloads-text a {
    display: inline-block;
    min-height: 44px;
    padding: 11px 2px;
    line-height: 22px;
  }

  /* Le pied de page empile trois blocs de liens : sans cet ajustement les
     zones tactiles se toucheraient. */
  .wss-footer p {
    line-height: 1.4;
  }

  /* Le logo est le lien de retour à l'accueil, et le plus visé du site : son
     image fait 40px de haut, la zone cliquable aussi. Relevée à 44px sans
     agrandir l'image. Repéré seulement en émulant un vrai appareil tactile —
     à la souris la règle « pointer: coarse » ne s'applique pas. */
  .wss-logo {
    min-height: 44px;
    padding: 2px 0;
  }
}

/* ── Zoom automatique d'iOS ───────────────────────────────────────────
   Safari sur iPhone zoome la page quand un champ sous 16px reçoit le
   focus, et n'en revient pas. Le formulaire de contact est à 15px. */
@media (max-width: 720px), (pointer: coarse) {
  .ws-input,
  .ws-textarea,
  input,
  textarea,
  select {
    font-size: 1rem;
  }
}

/* ── Écrans courts (téléphone en paysage) ─────────────────────────────
   À 320px de haut, le hero réservait tout l'écran pour un logo de 180px
   et son titre : plus rien d'autre n'était visible sans défiler. */
@media (max-height: 480px) and (orientation: landscape) {
  .wss-hero {
    min-height: auto;
    padding: 40px 20px;
  }

  .wss-hero-logo {
    width: 96px;
    margin-bottom: 12px;
  }

  /* La flèche de défilement chevauchait le titre sur un hero raccourci. */
  .wss-hero-scroll {
    display: none;
  }

  /* Le panneau de menu doit défiler : il ne tient pas en hauteur. */
  .wss-nav {
    max-height: calc(100dvh - var(--wss-header-h));
    overflow-y: auto;
  }
}