/* ═══════════════════════════════════════════════════════════════════
   mobile.css — LA VERSION MOBILE, COMPOSÉE À PART
   ───────────────────────────────────────────────────────────────────
   Écrit le 29/08/2026. Ce fichier ne CORRIGE pas la version bureau :
   il la remplace en dessous de 640 px. Un seul contenu, une seule
   adresse, deux compositions — c'est le contrat.

   Les neuf décisions arbitrées par Yassine le 29/08 sont numérotées
   ci-dessous dans l'ordre de la page. Deux formes ont été choisies sur
   banc d'essai : piste E pour les questions, piste H pour le
   configurateur. Elles partagent le même objet — le champ de saisie —
   pour que la page raconte une seule chose : on pose sa situation,
   quelqu'un répond.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:640px){

/* ── 1 · LE HÉRO ────────────────────────────────────────────────
   Un seul appel à l'action : deux boutons de poids égal, c'est une
   hésitation offerte au moment du choix. Le second devient un lien.
   Et la pastille de références descend SOUS la bande de logos :
   collées, les deux preuves se neutralisaient. */
/* ⚠️ `width:100%` et `min-width:0` NE SONT PAS DÉCORATIFS — mesuré sur
   l'iPhone de Yassine le 30/08 (sonde `?diag`, écran 393 px) :
   sans eux, le titre, le sous-titre et la pastille du haut sortaient de
   18 px À DROITE (marge droite mesurée à −18).
   Pourquoi : `.proof3` est un enfant de ce conteneur, et la bande qu'il
   contient sort du cadre avec `margin-inline:calc(50% - 50vw)`. Ce `50%`
   est un POURCENTAGE ; pendant le calcul de la largeur intrinsèque d'un
   conteneur flex, les moteurs ne le résolvent pas tous pareil. Safari
   faisait alors gonfler le conteneur à 100vw, et tous ses enfants
   s'étiraient à cette largeur — décalés de 18 px, rognés à droite.
   `width:100%` rend la largeur DÉFINIE : plus rien ne peut la déduire du
   contenu. `min-width:0` interdit à un enfant de la repousser.
   ⚠️ Ne pas mettre `max-width:100%` sur les enfants : la bande DOIT
   pouvoir dépasser, c'est ce qui en fait une bande pleine largeur.
   ⚠️ Un navigateur de bureau ne reproduit PAS ce défaut : il n'a été vu
   que sur l'appareil réel. */
.hero .in{display:flex;flex-direction:column;width:100%;min-width:0}
.hero .in > *{min-width:0}
.hero .in > *{order:1}
.hero .in .proof3{order:2}
.hero .in .via{order:3;margin-top:1.4rem;align-self:center;
  padding:.6rem .85rem;gap:.4rem}
/* la pastille reste une signature : elle ne doit jamais peser autant
   que le titre. Deuxième resserrage, demandé le 29/08. */
.hero .via-av .av{width:26px;height:26px}
/* ⚠️ PAS de `padding-left` ici. Sous 560 px, `site.css` plie la pastille
   en colonne : le filet passe de vertical à horizontal et le texte est
   remis en `text-align:center` avec `padding:.6rem 0 0`. Un
   `padding-left` rajouté par-dessus rétrécit la boîte À GAUCHE
   seulement — le texte se recentre alors dans une boîte décalée et part
   de 5 px vers la droite. C'était LE défaut de centrage de l'écran 1,
   et il n'y était que là : cette pastille n'existe que dans le héro. */
.hero .via-tx{font-size:.7rem}
.hero .via-tx span{font-size:.64rem}
.hero .acts{flex-direction:column;align-items:center;gap:.55rem}
.hero .acts .btn{flex:0 0 auto;width:auto;max-width:100%}
.hero .acts .btn.ghost{background:none;box-shadow:none;padding:.4rem .2rem;
  color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--brand-50)}
.hero .acts .btn.ghost .ic{display:none}

/* ── 2 · LE CONSTAT ─────────────────────────────────────────────
   Trois objets chiffrés pour un seul message. Le graphe par taille
   d'entreprise reste — il parle directement à une PME. La frise
   6 → 10 → 18 sort : elle dit la même chose, en plus encombrant.
   ⚠️ ERREUR CORRIGÉE LE 29/08 : `.gap` avait été masqué en croyant
   viser la frise. `.gap` est en réalité le conteneur DES TROIS BARRES —
   c'est donc l'inverse de la décision de Yassine qui était appliqué.
   La frise, c'est `.prog`. Vérifier la cible avant de masquer. */
.prog{display:none}

/* ── 3 · LES QUESTIONS — piste E ────────────────────────────────
   La composition de bureau est radiale : un personnage, trois bulles
   de chaque côté. À plat elle n'a plus de sens, on la remplace.
   Chaque question devient un CHAMP DE SAISIE, loupe et curseur
   compris. L'objet dit sans un mot ce que la phrase de bascule
   affirme : aucune de ces questions ne se tape dans un outil.
   `display:contents` fait tomber les deux colonnes : les six
   questions redeviennent six enfants directs, dans l'ordre. */
.qav{display:none}
.qfig{display:grid;gap:.65rem}
.qcol{display:contents}
.qb{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-pill);box-shadow:var(--sh-1);
  padding:.95rem 1.15rem .95rem 2.9rem;margin:0;
  font-size:1rem;line-height:1.4;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.qb::before{content:"";position:absolute;left:1.15rem;top:1.15rem;width:17px;height:17px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C818A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
.qb::after{content:none}
/* le curseur clignotant, sur la première seulement : il suffit à dire
   « champ de saisie », le répéter six fois ferait sapin de Noël. */
.qcol.l .qb:first-child::after{content:"";display:inline-block;width:2px;height:1.05em;
  background:var(--brand);vertical-align:-.16em;margin-left:.2em;
  animation:qcur 1.1s steps(1) infinite;position:static;border:0}
@keyframes qcur{50%{opacity:0}}

/* ── 4 · LA MÉTHODE ─────────────────────────────────────────────
   Les paragraphes sont raccourcis dans le HTML (donc aussi sur grand
   écran : huit lignes sur mobile en font quatre sur bureau, c'était
   trop long des deux côtés). Ici on resserre seulement l'espacement. */
.o2-st{margin-bottom:.4rem}
.o2-st h3{margin-top:.85rem}

/* ── 5 · LE CONFIGURATEUR — piste H ─────────────────────────────
   On choisit sa situation, elle S'ÉCRIT dans un champ de recherche —
   le même objet qu'au bloc 3 — et la réponse revient en dessous,
   marquée d'un filet lime : le verdict, les leviers retenus cochés,
   les écartés barrés. Les huit cartes détaillées disparaissent. */
.o2-cfg{border:0;box-shadow:none;background:none;overflow:visible;margin-top:1.2rem}
.o2-q{flex-direction:row;flex-wrap:nowrap;gap:.4rem;padding:0;background:none;border:0}
.o2-q .o2-lab{display:none}
.o2-chip{flex:1;width:auto;text-align:center;border-radius:var(--r-sm);
  padding:.7rem .35rem;font-size:.74rem;line-height:1.25}
/* le champ qui reprend la situation choisie — créé par site.js */
.o2-saisie{display:flex;gap:.7rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.95rem 1.15rem;
  box-shadow:var(--sh-1);margin-top:.8rem;font-size:1rem;line-height:1.4;
  font-weight:500;letter-spacing:-.015em}
.o2-saisie::before{content:"";flex:none;width:17px;height:17px;margin-top:.2rem;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C818A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
.o2-saisie i{display:inline-block;width:2px;height:1.05em;background:var(--brand);
  vertical-align:-.16em;margin-left:.15em;animation:qcur 1.1s steps(1) infinite}
.o2-out{display:block;margin-top:1rem;border-left:3px solid var(--accent);padding-left:1rem}
.o2-lft{background:none;border:0;padding:0}
.o2-lft h3{margin-top:.35rem;font-size:1.3rem}
.o2-mini{display:none}
.o2-lv{padding:0;margin-top:1rem;display:flex;flex-direction:column;gap:.45rem}
/* les retenus : une ligne cochée. Les écartés : une étiquette barrée,
   reléguée en fin de liste par `order`. Aucun n'est masqué : voir ce
   qu'on refuse fait partie de l'argument. */
.o2-l{order:1;border:0;background:none;box-shadow:none;padding:0;opacity:1}
/* ⚠️ `.o2-l.on` (deux classes) l'emporte sur `.o2-l` (une seule) quelle que
   soit la feuille : sans cette ligne, l'ombre de carte du grand écran
   restait posée derrière chaque levier retenu — un halo blanc qui
   redessinait une carte là où on ne voulait qu'une ligne cochée. */
.o2-l.on{box-shadow:none;border:0}
.o2-l span{display:none}
.o2-lv{align-items:flex-start}
/* ⚠️ la règle de base pose `justify-content:space-between` sur ce `b`
   (elle sert à écarter le titre de l'étiquette « RETENU » sur grand
   écran). Sans la neutraliser, la coche part à gauche et le texte se
   colle au bord droit, jusqu'à déborder. */
.o2-l b{display:flex;justify-content:flex-start;gap:.6rem;align-items:flex-start;
  font-size:.98rem;font-weight:600;text-align:left}
.o2-l b::before{content:"";flex:none;width:15px;height:15px;margin-top:.2rem;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2D6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E")}
.o2-l b i{display:none}
.o2-l:not(.on){order:2;margin-top:0}
.o2-l:not(.on) b{display:inline-flex;font-size:.8rem;font-weight:400;color:#8A8578;
  background:var(--tint);border-radius:var(--r-pill);padding:.3rem .65rem;
  text-decoration:line-through;text-decoration-color:#C9CBD6}
.o2-l:not(.on) b::before{display:none}
/* le filet qui sépare les retenus des écartés */
.o2-lv::after{content:"";order:1;height:1px;background:var(--line);margin:.55rem 0 .1rem}

/* ── 6 · LE DÉPLOIEMENT ─────────────────────────────────────────
   Les huit leviers étaient listés une seconde fois, un écran après le
   configurateur. Sur grand écran les deux blocs sont visuellement très
   différents et la redite passe ; en colonne, on relit la même chose.
   Il reste le titre, le paragraphe et le bouton. */
.o2-tiles{display:none}

/* ── 7 · LES FORMATIONS ─────────────────────────────────────────
   Sur grand écran, la photo tient la colonne de droite et équilibre le
   texte : la composition est latérale, elle fonctionne. En colonne, cet
   équilibre n'existe plus — et la photo devient la TROISIÈME image
   d'affilée : l'atelier (déploiement), la conférence (ici), le portrait
   (qui je suis), sur trois écrans qui se suivent. Sur bureau ces trois-là
   ne se croisent jamais du regard. C'est exactement le motif des
   décisions 2 et 6 : ce qui cohabite très bien à l'horizontale redit à
   la verticale.
   Et c'est CELLE-CI qui saute, pas une autre : le bloc promet du
   sur-mesure — « vos documents, vos tâches, vos outils » — et la photo
   montre une salle de conférence, l'image la plus éloignée de ce que la
   phrase promet. Il reste l'argument, et le Qualiopi qui le prouve :
   la certification devient le point final du bloc au lieu d'être
   écrasée par une image.
   Pas de bouton ajouté ici, volontairement : la barre d'appel fixe
   (décision 9) est à l'écran à ce moment-là. En poser un second serait
   l'hésitation que la décision 1 vient justement de retirer du héro. */
.fphoto{display:none}
/* le paragraphe se met à la mesure du reste de la page mobile, comme la
   biographie en décision 8 — c'est le plus long de la page. */
#formations .lede{font-size:1rem;line-height:1.6}

/* ── 8 · QUI JE SUIS ────────────────────────────────────────────
   1,8 écran de biographie juste avant le formulaire, au moment où le
   visiteur décide d'écrire ou de partir. On resserre. */
.me .portrait{max-width:200px}
#moi .txt p{font-size:1rem;line-height:1.6}
/* ⚠️ PAS de `gap` sur `.figs` : la grille se sépare par un fond gris que
   le `gap:1px` laisse voir en filet. Le passer à .6rem ne desserrait pas
   trois cartes, il ouvrait une bande grise de 10 px entre elles. */

/* ── 10 · TOUT LE PREMIER ÉCRAN TIENT DANS LE PREMIER ÉCRAN ─────
   Demande du 30/08 : la bande de logos clients ET la pastille « ils me
   confient leurs missions » doivent être vues sans défiler.
   ⚠️ Le piège : sur un ordinateur, la fenêtre fait toute la hauteur de
   l'écran, donc le héro tient. Sur un téléphone, Safari mange une
   centaine de points en haut (barre d'adresse) et une cinquantaine en
   bas (barre d'outils) — c'est ce que vaut `100svh`, et le banc d'essai
   ne le reproduit pas. Le héro tenait sur le banc et débordait sur le
   vrai appareil.
   On ne touche NI au titre NI aux boutons : la place se reprend dans les
   respirations, pas dans le message. Le poste principal est l'écart
   avant la bande de logos — 80 px hérités du grand écran, où le héro
   dispose de bien plus de hauteur. */
.hero{padding-top:1.25rem}
.hero .eyebrow{margin-bottom:1rem}
.hero h1{margin-bottom:1rem}
.hero .acts{margin-top:1.3rem}
.proof3{margin-top:1.5rem;padding-bottom:.6rem}
.hero .in .via{margin-top:.7rem}

/* ── 9 · LE CONTACT TOUJOURS ATTEIGNABLE ────────────────────────
   Sur une page longue, un visiteur convaincu à l'écran 4 ne doit pas
   en parcourir six pour agir. Barre d'appel fixe, discrète, qui
   apparaît après le héro et s'efface sur le bloc contact lui-même. */
.cta-fixe{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.7rem var(--gut)
  calc(.7rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .28s ease;pointer-events:none}
.cta-fixe.on{transform:none;pointer-events:auto}
.cta-fixe .btn{width:100%;justify-content:center}
@media(prefers-reduced-motion:reduce){.cta-fixe{transition:none}}
}