/* ═══════════════════════════════════════════════════════════════════
   BÉNÉVOLES D'ÉCOLES — Feuille mobile
   ───────────────────────────────────────────────────────────────────
   Chargée UNIQUEMENT sous 900 px via l'attribut media du <link>.
   Le rendu bureau n'est donc jamais affecté par ce fichier : on peut
   le modifier librement sans aucun risque pour la version PC.

   Le contenu, les fonctionnalités et les animations sont identiques
   à la version bureau. Seules la mise en page et les proportions
   sont adaptées à l'écran tactile.

   Sommaire
     1.  Réglages de base et sécurité
     2.  En-tête et navigation
     3.  Section d'accueil (hero)
     4.  Scène du slogan
     5.  Chiffres clés et carte
     6.  Parcours bénévole / enseignant
     7.  Frise chronologique
     8.  Équipe
     9.  Témoignages
     10. Bloc final, jauge et formulaire
     11. Don et pied de page
     12. Confort tactile
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. RÉGLAGES DE BASE ET SÉCURITÉ ─────────────────────────────── */

/* NE PAS ajouter overflow-x:hidden/clip sur html ou body : cela peut
   transformer body en conteneur de défilement et casser
   « position: sticky » (en-tête et scène du slogan). Les seuls éléments
   qui dépassent en largeur (mot géant du pied de page, carrousels)
   sont déjà découpés par leur propre conteneur. */
body { max-width: 100%; }

/* Empêche iOS d'agrandir seul le texte en rotation paysage. */
html { -webkit-text-size-adjust: 100%; }

/* Supprime le rectangle gris au toucher sur iOS/Android. */
a, button, input, textarea, label, summary {
  -webkit-tap-highlight-color: rgba(51, 99, 148, 0.15);
}

/* Marges latérales plus serrées : on gagne de la largeur utile. */
:root { --pad-x: 20px; }

/* Sections un peu moins hautes : le défilement reste raisonnable. */
.section-pad { padding-block: clamp(44px, 11vw, 72px); }

/* Les mots longs ne débordent jamais de leur conteneur. */
h1, h2, h3, h4, h5, p, li, cite, figcaption { overflow-wrap: break-word; }


/* ─── 2. EN-TÊTE ET NAVIGATION ────────────────────────────────────── */

.nav { padding: 10px var(--pad-x); gap: 12px; }
.nav-logo img { width: 36px; height: 36px; }
.nav-brand { font-size: 15px; letter-spacing: 0.01em; }

/* Le bouton d'ouverture du menu : cible tactile confortable. */
.nav-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
}

/* Menu déroulant : la mise en forme vient déjà de la feuille principale
   (règle 960 px). On se contente de le rendre défilable si l'écran est
   court, sans toucher aux marges ni aux bordures existantes. */
.nav-links.open {
  max-height: calc(100svh - 62px);
  overflow-y: auto;
}


/* ─── 3. SECTION D'ACCUEIL ────────────────────────────────────────── */

.hero-inner { padding-block: 34px 30px; }

/* Le titre reste imposant sans jamais déborder. */
.hero h1 {
  font-size: clamp(34px, 11vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
/* Sur mobile, tout le titre est aligné à gauche : la ligne décalée
   vers la droite créait un effet d'escalier illisible en petite largeur. */
.hero h1 .line:nth-child(2) { text-align: left; }

.hero-slogan { font-size: 14px; margin-bottom: 12px; }

.hero-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 22px; }
.hero-copy { gap: 16px; padding-top: 0; }
.hero-copy .lead { font-size: 17px; }
.hero-copy p { font-size: 15.5px; }

/* Photo moins haute : elle ne mange pas tout le premier écran. */
.hero-figure { height: clamp(220px, 52vw, 320px); }

/* Les deux boutons d'appel occupent toute la largeur, l'un sous l'autre. */
.hero-cta { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
.hero-cta .btn { width: 100%; justify-content: center; }

.scroll-hint { display: none; } /* évident au doigt : on libère l'espace */


/* ─── 3 bis. LE GRAND VOL ─────────────────────────────────────────── */

/* L'avion garde le même plan que sur bureau : DERRIÈRE le contenu.
   Les conteneurs n'ayant pas de fond, il reste visible dans tous les
   espaces libres et ne masque jamais un texte ni une carte.
   (Une version précédente le plaçait au premier plan : il recouvrait
   alors tout. C'était une erreur de diagnostic — s'il semblait absent,
   c'était à cause du réglage « Réduire les animations ».) */

/* Fluidité : l'avion est promu sur sa propre couche graphique, ce qui
   évite au navigateur de repeindre la page entière à chaque image. */
#vg-plane { will-change: transform; }
.vol-global svg, .vol-plane-layer svg { contain: paint; }


/* ─── 4. SCÈNE DU SLOGAN ──────────────────────────────────────────── */

/* Le site joue les animations pour tous : la mise en page animée
   s'applique donc sans condition. (Si le respect du réglage système
   était rétabli, il faudrait réencadrer ces trois règles par
   @media (prefers-reduced-motion: no-preference).) */

/* 240vh sur mobile imposait trois écrans de défilement pour une seule
   phrase. On raccourcit : l'animation mot à mot est conservée, mais
   elle se joue sur une distance adaptée au pouce. */
.slogan-wrap { height: 165vh; }

/* svh = hauteur d'écran « petite », valeur FIXE qui tient compte de la
   barre d'adresse. On n'utilise pas dvh : dvh change pendant le
   défilement, et comme le fond et le texte se superposent par une marge
   négative, la moindre variation les décalerait l'un par rapport à l'autre. */
.slogan-bg, .slogan-sticky { height: 100svh; }
.slogan-sticky { margin-top: -100svh; }

.slogan-sticky h2 {
  font-size: clamp(28px, 9vw, 44px);
  line-height: 1.08;
  max-width: 14ch;
}


/* ─── 5. CHIFFRES CLÉS ET CARTE ───────────────────────────────────── */

.impact .container { padding-block: 44px; }
.impact-layout { gap: 34px; }
.impact-zone { font-size: 15.5px; text-align: left; }

/* Deux colonnes : quatre chiffres côte à côte seraient illisibles. */
.impact-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.impact-item { min-height: 108px; padding: 14px; }
.impact-num { font-size: clamp(30px, 9vw, 40px); }
.impact-label { font-size: 12px; }

/* La carte occupe toute la largeur disponible. */
.map-wrap { max-width: 100%; }

/* L'infobulle suit le curseur : sans souris, elle resterait figée à
   l'écran après un appui. On la masque, le panneau d'information
   sous la carte joue déjà ce rôle au toucher. */
.map-tip-float { display: none !important; }

/* Zones cliquables plus lisibles au doigt. */
#fr-active path { stroke-width: 2.4; }
#fr-pins .dot { r: 6; stroke-width: 3.5; }

.map-info { min-height: 0; padding: 14px 16px; }
.map-info h4 { font-size: 15px; }
.map-info p { font-size: 13.5px; }


/* ─── 6. PARCOURS BÉNÉVOLE / ENSEIGNANT ───────────────────────────── */

/* Une carte par ligne. La grille partagée (subgrid) est déjà
   désactivée sous 741 px dans la feuille principale : les deux cartes
   s'empilent donc naturellement, sans alignement forcé. */
.duo-grid { grid-template-columns: 1fr; gap: 18px; }
.duo-card { padding: 22px 18px; }
.duo-card h3 { font-size: 20px; }
.h3-note { display: block; margin-top: 2px; } /* la durée passe dessous */
.duo-steps li { font-size: 14.5px; gap: 11px; }
.duo-steps .n { width: 25px; height: 25px; font-size: 12px; }
.duo-note { font-size: 13.5px; }
.tag-row { gap: 7px; }
.tag { font-size: 11.5px; padding: 5px 10px; }


/* ─── 7. FRISE CHRONOLOGIQUE ──────────────────────────────────────── */

/* La frise défile horizontalement au doigt, avec accroche sur chaque
   date pour éviter de s'arrêter entre deux jalons. */
.frise-rail {
  scroll-snap-type: x mandatory;
  padding-inline: 4px;
  gap: 26px;
  -webkit-overflow-scrolling: touch;
}
.frise-dot { scroll-snap-align: center; }
.frise-dot .fw { font-size: 11px; }
.frise-panel { padding: 26px 20px 22px; }
.frise-panel h4 { font-size: 18px; }
.frise-panel p { font-size: 14.5px; }


/* ─── 8. ÉQUIPE ───────────────────────────────────────────────────── */

/* Un profil par ligne (déjà prévu à 900 px), avec des photos qui ne
   dévorent pas l'écran. */
/* La photo reste centrée, mais le nom et la description partagent le même
   alignement à gauche : centrer le nom au-dessus d'un texte aligné à gauche
   donnait deux axes différents dans un même bloc. */
.person { align-items: stretch; text-align: left; }
.person figure { max-width: 240px; margin-inline: auto; }
.person h5 { font-size: 16px; line-height: 1.3; }
.person .bio { font-size: 13.5px; }

/* La citation reste en pleine largeur, sous les profils. */
.people-grid .quote-panel { padding: 26px 20px; }
.people-grid .quote-panel p { font-size: clamp(19px, 6vw, 24px); max-width: none; }


/* ─── 9. TÉMOIGNAGES ──────────────────────────────────────────────── */

/* Le carrousel se manipule au doigt ; les flèches restent utilisables. */
.quotes { gap: 14px; padding-inline: 2px; }
.quotes .quote { flex: 0 0 86%; padding: 24px 20px; }
.quotes .quote p { font-size: 15px; }
.quotes-nav { justify-content: center; gap: 14px; margin-top: 10px; }
.quotes-arrow { width: 46px; height: 46px; }


/* ─── 10. BLOC FINAL, JAUGE ET FORMULAIRE ─────────────────────────── */

.turn .container { padding-block: 52px; }
/* « Prêt·e à nous rejoindre ? » doit tenir sur une seule ligne.
   La règle « nowrap » de la feuille principale ne s'applique qu'au-delà
   de 620 px : en dessous, le titre repassait sur deux lignes. On la
   remet ici, avec une taille calculée pour que les 25 signes tiennent
   toujours dans la largeur — vérifié de 320 à 899 px. */
.turn h2 { font-size: clamp(17px, 5.9vw, 40px); }
.turn-head h2 { white-space: nowrap; }
.turn .turn-lead { font-size: 17px; }
.turn .turn-intro { font-size: 15px; }

.turn-sim { max-width: 100%; }
.simulator { padding: 20px 16px 18px; }
.simulator > label { font-size: 11.5px; letter-spacing: 0.03em; }

/* Curseur plus gros : indispensable pour être saisi au pouce. */
.simulator input[type="range"] { height: 6px; }
.simulator input[type="range"]::-webkit-slider-thumb { width: 34px; height: 34px; }
.simulator input[type="range"]::-moz-range-thumb { width: 34px; height: 34px; }
.simulator { --tw: 34px; } /* la course des graduations suit le curseur */

.sim-scale { font-size: 11px; height: 32px; }
.sim-scale i { font-size: 8.5px; }
.sim-out { font-size: 14.5px; }
.sim-out strong { font-size: 21px; }

/* Les deux grands appels à l'action, empilés et bien séparés. */
.turn-ctas { border-radius: var(--r-md); }
.turn-cta { padding: 22px 18px; }
.turn-cta .t { font-size: 18px; }
.turn-cta .q { font-size: 11.5px; }

.turn-join-head { padding-inline: 2px; }
.tj-title { font-size: 22px; }
.tj-intro { font-size: 14.5px; }

.join-form { padding: 20px 16px; gap: 16px; }
.seg { grid-template-columns: 1fr; gap: 8px; }
.form-row { grid-template-columns: 1fr; gap: 16px; }

/* Taille de police d'au moins 16 px sur les champs : en dessous,
   iOS zoome automatiquement à la saisie et casse la mise en page. */
.input, .input::placeholder, textarea.input { font-size: 16px; }
.field > label { font-size: 11.5px; }
.radio-row { gap: 8px; }
.radio { padding: 9px 13px; font-size: 13.5px; }
.checkbox { font-size: 12.5px; gap: 10px; }
.btn-submit { width: 100%; justify-content: center; }


/* ─── 11. DON ET PIED DE PAGE ─────────────────────────────────────── */

.don .container { padding-block: 30px; gap: 16px; }
.don h3 { font-size: clamp(22px, 7vw, 30px); }
.don p { font-size: 14.5px; }
.don .btn { width: 100%; max-width: 320px; justify-content: center; }

/* [retiré] bandeau géant du pied de page */

.footer-grid { grid-template-columns: 1fr; gap: 26px; padding-block: 34px; }
.footer-baseline { font-size: 13px; max-width: none; }
.footer-col a { padding-block: 4px; } /* liens plus faciles à viser */

/* Les colonnes sont empilées : la trame d'alignement de 38 px prévue pour
   le bureau n'a plus d'objet et ne ferait qu'ajouter du vide. */
.footer-col h6 { height: auto; display: block; margin-bottom: 4px; }
.footer-legal .container { flex-direction: column; gap: 8px; padding-block: 16px; }


/* ─── 12. CONFORT TACTILE ─────────────────────────────────────────── */

/* Toute cible interactive atteint la taille minimale recommandée
   (44 px) pour être touchée sans erreur. */
.btn { padding: 15px 22px; min-height: 46px; }
.frise-dot { min-height: 44px; }
.quotes-arrow, .nav-toggle { min-width: 44px; min-height: 44px; }

/* Les boutons magnétiques et l'effet de relief au survol sont déjà
   réservés aux appareils dotés d'une souris dans la feuille
   principale : rien à neutraliser ici. */

/* Sur écran tactile, l'état de survol reste « collé » après un appui.
   On neutralise donc les déplacements au survol, qui donneraient
   l'impression que la carte reste soulevée. */
@media (hover: none) {
  .duo-card:hover,
  .quote:hover,
  .impact-item:hover,
  .pillar:hover { transform: none; }
}


/* ─── 13. FLUIDITÉ (mobile uniquement) ────────────────────────────── */
/* MOBILE — allègements de rendu.
   Les processeurs graphiques de téléphone peinent sur les grandes
   surfaces repeintes et sur les ombres floues. On retire les effets
   les plus coûteux, invisibles ou presque à cette taille d'écran. */

/* Ombres portées : très coûteuses car recalculées à chaque repeint. */
.frise-plane, #fr-pins .dot { filter: none; }

/* Le halo animé de la carte tourne en permanence, même hors écran. */
#fr-pins .halo { animation-duration: 4s; }

/* Le flou d'arrière-plan de l'en-tête est recalculé à chaque défilement :
   c'est l'un des effets les plus lourds sur mobile. Fond opaque à la place. */
.site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg);
}

/* Le cercle flouté qui flotte dans la scène du slogan : animation continue
   sur une grande surface, invisible derrière le texte. */
.slogan-bg::before { animation: none; }

/* Les transitions de relief au survol n'ont pas d'usage au doigt. */
.impact-item, .pillar, .duo-card, .quote { transition: none; }