/* ═══════════════════════════════════════════════════════════════════════════
   _mobile.css — LES CORRECTIFS TRANSVERSAUX (S68, 05/08/2026)

   Pourquoi ce fichier existe : les retours mobiles de Yoni sont revenus trois
   fois de suite sur des défauts identiques répartis sur 139 pages (marges qui
   collent le bord, ligne pré-footer, sauts d'animation). Les corriger page par
   page, c'est trois cents éditions et autant d'occasions de casser quelque
   chose. Ils vivent donc ICI, à un seul endroit, chargé par toutes les pages.

   RÈGLE : on n'écrit ici que ce qui doit valoir PARTOUT. Un correctif propre à
   une page reste dans sa page. Ce fichier se charge APRÈS le style de la page,
   donc il gagne à spécificité égale — on évite quand même !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LE SECOND FOOTER, RETIRÉ (Yoni S68, signalé trois fois) ────────────
   « ilev campus · organisme certifié Qualiopi · Retour à l'accueil » n'est pas
   une ligne du footer : c'est un footer ENTIER (`<footer class="foot">`),
   hérité du gabarit d'origine, resté sur 88 pages qui portent déjà le vrai
   footer injecté par _footer.js. D'où le doublon en bas de page.
   Je l'avais cherché sous le nom `.footer-note` — une classe définie dans 7
   pages mais posée sur aucun élément, donc du style mort : masquer celle-là
   n'aurait rien fait, sinon donner l'illusion que c'était réglé.
   Masqué et non supprimé du HTML : réversible en une ligne. */
.foot{display:none}

/* ── 1 bis. LE PLEIN ÉCRAN (Yoni S68, captures du 05/08 11:22) ─────────────
   Le site s'arrêtait au bord des barres système de l'iPhone au lieu de passer
   dessous — d'où les bandes blanches en haut et en bas, et l'impression de ne
   pas être « full page » comme chez Nike.
   Il fallait TROIS pièces, pas une : `viewport-fit=cover` dans chaque page
   (la page a le droit de déborder), `theme-color` (les barres prennent une
   couleur au lieu du blanc — posé et suivi au scroll par _megamenu.js), et le
   fond porté par <html> (sinon le débord montre le blanc du navigateur : ma
   première tentative, ce matin, n'avait que la première pièce).
   Reste à protéger ce qui touche le bas de l'écran : le footer passerait sous
   la barre d'accueil. */
.s47{padding-bottom:env(safe-area-inset-bottom)}

/* ── 2. iOS n'agrandit plus le texte tout seul ─────────────────────────────
   Safari mobile grossit le texte des blocs très larges, et deux pistes de
   longueurs différentes ne sortent pas à la même taille. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media(max-width:700px){

  /* ── 3. LA MARGE MOBILE, UNIFORMISÉE À 14 PX (arbitrage Yoni S68) ────────
     « Marge pas trop large non plus, j'aime le côté moderne, 10 px c'est plus
     proche. » Le site mélangeait 22 px et 44 px selon les gabarits, et
     certains blocs n'avaient rien du tout — d'où le texte qui collait le bord.
     Une seule valeur pour tout le site en mobile : 14 px.
     Pourquoi 14 et pas 10 : sous 14 px, une ligne de texte qui va au bout
     touche visuellement le bord de l'écran sur iPhone, et le côté « proche »
     bascule en « mal cadré ». 14 garde le serré que tu veux. C'est UNE valeur
     à changer ici si tu préfères 10 pile. */
  :root{--pad:10px}
  .wrap{padding-left:10px;padding-right:10px}

  /* ── 4. Le manifeste des fourmis, plus grand (demande Yoni S68) ────────── */
  .ants .hl{font-size:clamp(42px,12vw,74px)}

  /* ── 5. LES CARTES D'EXPERTS, UNE PAR LIGNE (Yoni S68) ───────────────────
     Sur les pages parcours, la carte gardait sa grille de BUREAU en mobile
     (5 colonnes : photo · numéro · nom · rôle · lien), donc le descriptif se
     retrouvait écrasé dans une colonne de quelques caractères. La page
     d'accueil, elle, portait la bonne règle. On la généralise : elle vaut
     désormais pour toutes les pages, y compris celles à naître. */
  .exp__head{grid-template-columns:1fr;gap:30px}
  .exp__grid{grid-template-columns:1fr}
  .exp__card{grid-template-columns:96px 1fr;gap:6px 16px;padding:18px 2px}
  .exp2__grid{grid-template-columns:1fr}

  /* ── 6. LES TROIS TRAJECTOIRES : on doit VOIR qu'il y en a d'autres ──────
     Le carrousel existait déjà (scroll horizontal + calage), mais les cartes
     occupaient toute la largeur : rien ne laissait deviner la suite, donc
     personne ne fait le geste. La carte suivante dépasse maintenant de 18 % —
     c'est l'indice de défilement le plus efficace, et il ne coûte aucun
     JavaScript. */
  .assoc__card{flex:0 0 82%}
  .assoc__grid{scroll-padding-left:10px}

  /* ── 18. LES TROIS TRAJECTOIRES DES PAGES OBJECTIFS (Yoni, 3 fois) ───────
     Ce n'était PAS un carrousel bloqué : il n'y avait aucun défilement. Le
     rail `.trj__rail` est un simple flex, posé dans `.assoc{overflow:hidden}`
     — les cartes qui dépassent sont donc coupées net, sans moyen d'aller les
     chercher. En bureau ça passe (le rail déborde volontairement, c'est le
     parti pris de la référence) ; en mobile ça enferme deux cartes sur trois.
     J'avais corrigé un homonyme : `.assoc__grid`, le composant des pages
     formations. Le vrai coupable est ici.
     On rend le rail défilable au doigt, avec calage carte par carte. */
  .trj__rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-right:10px;scroll-padding-left:10px;overscroll-behavior-x:contain}
  .trj__rail::-webkit-scrollbar{display:none}
  .trj__card{scroll-snap-align:start}

  /* ── 13. LA BARRE DE DÉFILEMENT DU MENU NE MORD PLUS LES FLÈCHES ─────────
     Le volet défile verticalement et iOS pose sa barre au-dessus du contenu :
     elle tombait pile sur les « → » des rubriques (Yoni S68). Le rail garde
     sa place, la barre est simplement retirée — l'accordéon et la longueur du
     volet suffisent à dire qu'il y a du contenu plus bas. */
  .mm__mobscroll{scrollbar-width:none;-ms-overflow-style:none;padding-right:4px}
  .mm__mobscroll::-webkit-scrollbar{display:none}

  /* ── 14. LE VOLET NE GLISSE PLUS LATÉRALEMENT (Yoni S68) ─────────────────
     « Avec mon doigt le menu se décale à droite ou à gauche quand je scrolle,
     il n'est pas fixe. » Un geste vertical jamais parfaitement droit part en
     défilement horizontal dès qu'un enfant dépasse d'un pixel. On ferme la
     porte : plus de course latérale possible, et le geste ne se propage pas
     à la page derrière. */
  .mm__mob{overflow-x:hidden;overscroll-behavior:contain}
  .mm__mobscroll{overflow-x:hidden;overscroll-behavior-y:contain}
  .mm__mobscroll > *{max-width:100%}

  /* ── 15. LE BOUTON BLEU EN VERRE (demande Yoni S68, précisée) ────────────
     C'est LE BOUTON qui doit être translucide, pas un bandeau derrière lui :
     on doit voir le contenu du menu défiler à travers, et comprendre qu'il en
     reste en dessous. Le conteneur, lui, ne porte aucun fond — ma première
     version posait un bloc en verre sur toute la largeur, ce qui n'était pas
     la demande. */
     ↻ Précisé par Yoni : « les boutons en bleu et blanc et effet blur, c'est
     tout ». Donc les COULEURS restent franches — pas de délavage — et le flou
     ne fait que travailler sur ce qui passe dessous. Un fond parfaitement
     opaque annulerait l'effet : on reste à 94 %, l'œil lit du bleu plein et
     du blanc plein, et le verre existe quand même. */
     ⚠ POURQUOI LE FLOU NE SE VOYAIT PAS : un backdrop-filter floute ce qui est
     PEINT DERRIÈRE l'élément. Les boutons étaient posés SOUS la zone qui
     défile — le contenu s'arrêtait juste au-dessus d'eux, et derrière il n'y
     avait que le fond uni du volet. Le filtre s'appliquait, il n'avait rien à
     flouter. On superpose donc le bloc de boutons à la liste, et on rend à
     celle-ci de quoi passer dessous : les rubriques glissent maintenant
     derrière le verre, ce qui dit aussi qu'il reste du contenu en bas. */
  .mm__mobscroll{padding-bottom:132px}
  .mm__mobcta{position:absolute;left:22px;right:22px;z-index:2;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    bottom:calc(8px + env(safe-area-inset-bottom))}
  .mm__mobbtn:not(.mm__mobbtn--ghost){background:rgba(43,60,243,.94);
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
  .mm__mobbtn--ghost{background:rgba(255,255,255,.94);color:#0d0d0c;border-color:transparent;
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}

  /* ── 16. LES PAGES OBJECTIFS : LA SECTION À POINTS RESPIRE ───────────────
     « Trop collé au texte au-dessus. » Le bandeau noir démarrait à 58 px du
     bloc précédent, ce qui suffit en bureau mais pas sur une colonne étroite
     où tout s'enchaîne. On écarte, en haut comme en bas, et la grille de
     cartes s'aligne sur la marge du site. */
  .fmt55{margin-top:96px;padding-top:72px;padding-bottom:64px}
  .fmt55__cards{margin:0 10px}

  /* ── 19. LA MÉTHODE ILEV SUR UNE SEULE LIGNE (Yoni S68) ──────────────────
     « Vu qu'il n'y a pas de texte sous les titres 01 Observer, mets tout le
     design sur 1 ligne et les textes à la verticale. » Les cinq étapes ne
     portent qu'un numéro et un verbe : les empiler en colonne (le régime
     mobile d'origine) étirait la section sur cinq écrans pour cinq mots.
     Elles tiennent maintenant côte à côte, le verbe écrit verticalement —
     le dessin d'origine est conservé, simplement resserré. */
  .meth__steps{grid-template-columns:repeat(5,1fr);gap:6px}
  .mstep{text-align:center}
  .mstep__n{margin-bottom:14px}
  .mstep__t{writing-mode:vertical-rl;text-orientation:mixed;
    margin:0 auto;font-size:14px;letter-spacing:.01em}

  /* ── 20. LA SECTION À POINTS : LE CUBE RETROUVE SA COURSE ────────────────
     Le carré noir qui descend devant la trame EXISTE déjà (moteur amorti,
     S65) — mais en mobile sa colonne passait à min-height:0, donc la course
     disponible tombait à zéro : le cube ne bougeait plus. On lui rend de la
     hauteur, et la trame cesse de mordre sur le texte du dessus. */
     ⚠ La course se donne par un PADDING, pas par une hauteur fixe : le moteur
     calcule `côté − carte`, et une hauteur fixe se fait rattraper dès que la
     carte grandit (écran plus étroit = texte plus haut = course qui retombe à
     zéro, mesuré à la sonde). Un padding bas garantit toujours 150 px. */
  .s46{padding-top:92px;padding-bottom:100px}
  .s46__side{min-height:0;padding-bottom:150px}
  .s46__dots{top:-18px;bottom:-30px}

  /* ── 21. « UNE IA SANS CONTEXTE RÉPOND. » — TROIS PHRASES, TROIS LIGNES ──
     Chaque phrase occupe sa ligne par construction, mais à 28 px la plus
     longue se coupait en deux sur un écran de téléphone : on lisait six
     morceaux au lieu de trois affirmations. La taille est calée pour que la
     plus longue tienne d'un trait. */
  .intro__kick{font-size:clamp(21px,5.7vw,26px);line-height:1.2}

  /* ── 17. LE HERO DES PAGES APPROCHE, STABLE (Yoni S68, 3 fois signalé) ───
     « Des personnes / qui connaissent le métier. / Une équipe / qui tient la
     promesse. » Le titre est une rangée FLEX avec justify-content:space-between
     et retour à la ligne autorisé : les deux segments sont poussés aux deux
     extrémités, et dès que l'animation modifie leur largeur d'un pixel, ils se
     réorganisent — d'où le chevauchement et l'instabilité.
     En colonne étroite, la mise en page en rangée n'apporte rien : chaque
     segment prend sa ligne, et plus rien ne bouge pendant l'animation. */
  .hero h1 .r{display:block}
  .hero h1 .r i{display:block}

  /* ── 7. LES FORMULAIRES NE PASSENT PLUS SOUS LE MENU (Yoni S68) ──────────
     La barre flottante fait 58 px de haut (14 px du bord + 44 px de pastille),
     or les pages à formulaire démarraient à 44 px : le titre et le premier
     champ passaient DESSOUS. Mesuré, pas estimé.
     ⚠ `main.tk` et non `.tk` : la classe `tk` sert aussi de composant interne
     sur 71 autres pages, où un padding haut n'aurait aucun sens. Le sélecteur
     ne vise que les 4 pages dont `tk` est le conteneur principal (Parler à un
     conseiller, Je suis client, Audit IA, Partenaire). */
  main.tk{padding-top:118px}
  .ct{padding-top:118px}

  /* ── 9. LA FLÈCHE « PARLONS-EN » NE TOUCHE PLUS LE BORD (Yoni S68) ───────
     Le bloc géant déborde volontairement en pleine largeur (marges négatives
     de la valeur de --pad). Comme --pad est passé à 14 px, la flèche arrivait
     au ras du bord droit. On lui rend une respiration propre. */
  .giant__row{padding-right:14px}

  /* ── 10. LE BLOC DE CONSTATS, TAILLE ÉDITO (Yoni S68) ────────────────────
     « On perd le côté édito, c'est trop petit sur mobile. » Les phrases de
     contexte (page Publicité, IA & workflows) sont le moment éditorial de la
     page : elles se lisent en grand, comme le manifeste des fourmis. */
     ↻ S68, second retour : « trop gros » — on redescend. Le but est de
     retrouver le souffle édito, pas de crier. */
  .constat__grid .hl{font-size:clamp(30px,7.6vw,48px);line-height:1.14}

  /* ── 11. LE FOOTER RESPIRE PLUS QUE LE CORPS DE PAGE (retour Yoni S68) ───
     L'uniformisation à 14 px avait aussi resserré le footer, qui portait des
     marges plus larges — et « c'était beaucoup mieux ». Il reprend les
     siennes : le corps de page reste serré et moderne, le pied respire. */
     ⚠ CORRECTION S68 : j'avais lu « le footer doit respirer PLUS » là où Yoni
     demandait « ajuste les marges du footer COMME sur le site » — donc un
     ALIGNEMENT, pas un écart. Le footer prend la marge du corps de page, ni
     plus ni moins. Il porte son padding sur LUI-MÊME : on le vise seul,
     surtout pas ses enfants, les paddings se cumuleraient. */
     ⚠ ET SURTOUT : le style du footer est INJECTÉ PAR _footer.js au
     chargement. Une feuille créée en JavaScript est ajoutée en fin de <head>,
     donc APRÈS celle-ci — elle gagne l'arbitrage à spécificité égale, et ma
     règle ne s'appliquait pas (« pourquoi ça bloque », Yoni). La marge du
     footer se corrige donc à la source, dans _footer.js. La ligne ci-dessous
     ne sert plus que de filet si ce fichier changeait. */
  .s47{padding-left:10px;padding-right:10px}

  /* ── 12. LA CARTE ÉVEILLÉE AU PREMIER TAP (Yoni S68) ─────────────────────
     Pendant du geste posé dans _megamenu.js : le premier contact met le
     visage en couleur et fait ressortir le lien, le second ouvre le profil.
     Sur écran tactile il n'y a pas de survol — sans ça, on partait sur
     LinkedIn sans avoir vu la photo. */
     ⚠ Le lien LinkedIn apparaît en réalité par le survol COLLÉ d'iOS (un tap
     laisse l'état :hover actif), pas par ma classe. La couleur ne suivait donc
     pas : deux déclencheurs différents pour un seul geste. On accroche la
     couleur AUX DEUX — et sur toute image de la carte, la structure n'étant
     pas la même d'un gabarit à l'autre. */
  .exp__card img,.team__card img,.exp2__card img{transition:filter .45s ease}
  .exp__card.is-eveille img,
  .team__card.is-eveille img,
  .exp2__card.is-eveille img,
  .exp__card:hover img,
  .team__card:hover img,
  .exp2__card:hover img{filter:none}
  .exp__card.is-eveille,.team__card.is-eveille{background:#f4f3ee}
  .exp__card.is-eveille .exp__lk,.team__card.is-eveille .team__lk{opacity:1;text-decoration:underline}

  /* ── 8. LE HERO DES PAGES IA & SYSTÈMES, PLUS HAUT (Yoni S68) ────────────
     La console rédigée pour chaque page (les onglets et leur grille de
     lecture) est posée DANS la photo du hero. En mobile la photo tombait à
     420 px : la console s'y retrouvait à l'étroit, illisible. On lui rend de
     la place. Le fait qu'elle réagisse ou non au doigt est un autre sujet —
     il se teste au tactile, pas au CSS. */
  .dhero__vis{min-height:560px}
}

/* Sans theme-color (retirée S68), Safari échantillonne la page et rend ses
   barres translucides au scroll — l'effet bord-à-bord voulu. Le fond de html
   est le filet : c'est lui qu'on voit au rebond élastique et derrière les
   zones système ; sans lui, iOS peint du blanc pur. */
html{background:#f6f4ee}

/* Arrivee sur une ancre : on s'arrete un peu avant le titre plutot que de le
   coller au bord haut de l'ecran. scroll-margin-top agit sur la CIBLE, pas sur
   le defilement — donc aucun effet sur le reste de la page. (S68) */
#final,#diagnostic,#parcours,#livrables{scroll-margin-top:96px}

/* « Activer le point d'impact » passait sur deux lignes : a 375px, le clamp
   plancher de 30px ne laisse pas la place. On descend le plancher pour que ces
   titres tiennent sur une ligne. (S68) */
@media(max-width:680px){
  .form__t{font-size:clamp(22px,6.2vw,30px)}
}
