/* ============================================================
   YELLOWPONIES — Mobile fixes (overrides)
   Ce fichier est chargé APRÈS yps.css dans Base.astro.
   Toutes les corrections mobile (@media max-width: 720px) ajoutées
   ici gagnent par cascade. Ne PAS modifier yps.css pour les fixes
   mobile tant que ce fichier existe — un seul endroit pour chercher.

   Convention : un bloc commenté par élément traité, dans l'ordre :
   1. Police Adelphi
   2. Header / burger / logo
   3. Hero accueil
   4. Qui ces gens (collage 2×2)
   5. Piliers
   6. Méthodo
   7. Slider cas
   8. CTA "ON SE BRIEFE"
   9. Footer
   ============================================================ */

/* ============================================================
   1. POLICE — Adelphi PE LOCALE en priorité, Adobe Fonts en fallback
   ------------------------------------------------------------
   IMPORTANT (changement v4) : on inverse l'ordre — la version locale
   (@font-face .ttf défini dans colors_and_type.css) PASSE EN PREMIER,
   et "adelphi-pe-variable" (Adobe Typekit kit flu7whk) devient le
   fallback. Raison : les metrics du kit Adobe Variable sont légèrement
   différentes (glyphs un peu plus larges) → générait un overlap visuel
   notable entre lettres sur les titres outline (.qui-outline,
   .fanzine h2 .outline, AGENCE intro, etc.). Le handoff statique
   (claude-code-handoff/Equipe.html) utilise UNIQUEMENT la version
   locale → rendu propre sans overlap, c'est la référence design.

   Compatibilité iOS (cf. CLAUDE.md piège #14) : si le navigateur
   ne supporte pas le .ttf local en axes variables, il tombe sur
   "adelphi-pe-variable" Adobe (déjà chargé via use.typekit.net) →
   fallback intact, axes wght/opsz/slnt préservés.

   Validation multi-platform attendue : Chromium + WebKit, Desktop
   + iPhone 13. Voir commit fix(font): privilégie Adelphi PE locale.
   ============================================================ */
:root {
  --yp-font-display: "Adelphi PE", "adelphi-pe-variable", "Impact", "Arial Black", sans-serif;
  --yp-font-body: "Adelphi PE", "adelphi-pe-variable", "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   2. HEADER — burger menu à droite (mobile)
   .yps-burger est codé dans .yps-topbar-left ; en mobile le cluster
   droit est masqué et le space-between de la topbar ne tire plus rien.
   On étire le cluster gauche à 100% et on pousse le burger en bout.
   ============================================================ */
@media (max-width: 720px) {
  .yps-topbar-left { width: 100%; }
  .yps-burger { margin-left: auto; }
}

/* ============================================================
   3. CAS SLIDER ACCUEIL — alignement maquette .m-case mobile
   Cible : tous les .case-slide dans .cases-rail (homepage section
   "ILS NOUS ONT FAIT CONFIANCE"). On surcharge 6 styles pour
   correspondre à claude-code-handoff/mobile.css :
   - image en haut sur TOUTES les cards (pas juste .flip)
   - numéro en texte rose (pas badge jaune)
   - sous-titre Adelphi normal (pas Georgia italic)
   - KPIs sans box-shadow, fond jaune solide sur .kpi-yellow
   - tags en pills ovales
   - CTA en texte underline rose (pas cadre)
   ============================================================ */
@media (max-width: 720px) {
  /* (a) Image toujours en haut */
  .case-slide .case-image { order: -1; }
  .case-slide .case-image .case-img,
  .case-slide .case-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 2px solid var(--yp-black);
  }

  /* (b) Body padding compact + gap réduit */
  .case-slide .case-info {
    padding: 16px 16px 18px;
    gap: 10px;
  }

  /* (c) Numéro "01" : texte rose simple, pas badge */
  .case-slide .case-meta .num {
    display: inline;
    width: auto;
    height: auto;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--yp-pink);
  }

  /* (d) Sous-titre : Adelphi normal, pas Georgia italic */
  .case-slide .case-sub {
    font-family: var(--yp-font-body);
    font-style: normal;
    font-size: 13.5px;
    line-height: 1.45;
    color: #222;
  }

  /* (e) KPIs : pas d'ombre, fond jaune solide sur .kpi-yellow */
  .case-slide .kpi-block,
  .case-slide .kpi-block.kpi-yellow,
  .case-slide .kpi-block.kpi-black {
    box-shadow: none;
    padding: 12px 16px;
  }
  .case-slide .kpi-block.kpi-yellow {
    background: var(--yp-yellow);
  }
  .case-slide .kpi-block .kpi-value {
    font-size: 26px;
    line-height: 1;
  }
  .case-slide .kpi-block .kpi-label {
    font-size: 10px;
    margin-top: 4px;
    letter-spacing: 0.15em;
  }

  /* (f) Tags : pills ovales */
  .case-slide .case-tags .tag {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
  }

  /* (g) CTA "LIRE LE CAS →" : texte avec underline rose, pas cadre */
  .case-slide .case-cta {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-top: 6px;
    color: var(--yp-black);
    text-decoration: underline;
    text-decoration-color: var(--yp-pink);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    align-self: flex-start;
  }
  .case-slide .case-cta:hover {
    box-shadow: none;
    transform: none;
    color: var(--yp-pink);
  }

  /* (h) Titre case : taille mobile alignée maquette (26px) */
  .case-slide .case-title {
    font-size: 26px;
    line-height: 0.95;
  }
}

/* ============================================================
   4. MARQUEE CLIENTS — accélération mobile
   Desktop : 80s par boucle (yps.css l.2400). Trop lent en mobile.
   On passe à 26s — ~3× plus rapide, défilement perceptible
   sans devenir illisible.
   ============================================================ */
@media (max-width: 720px) {
  .yps-clients-track {
    animation-duration: 26s;
  }
}

/* ============================================================
   5. QUI CES GENS — collage 3 photos en ligne + stamp séparé
   Maquette : claude-code-handoff/mobile.css .m-founders-grid
   (3 colonnes 1fr) + .m-stable-badge (badge incliné -3deg sous
   les photos).
   Le HTML actuel garde la structure desktop (.qui-photo en
   position:absolute avec data-parallax inline transforms).
   On force le grid 3 colonnes et on neutralise tous les transforms
   parallax, position absolute, et écrasements desktop.
   ============================================================ */
@media (max-width: 720px) {
  /* Grid 3 colonnes pour les photos, stamp en row 2 prenant toute
     la largeur */
  .qui-collage {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 0 0 16px !important;
    position: relative !important;
    perspective: none !important;
  }

  /* Cache les icons décoratifs floats (étoiles, fer à cheval, etc.) */
  .qui-collage .qui-icon { display: none !important; }

  /* Reset complet des .qui-photo : position relative, neutralise
     les transforms du parallax JS, placement automatique grid
     (row 1, cells 1-2-3) */
  .qui-collage .qui-photo,
  .qui-collage .qui-photo.p1,
  .qui-collage .qui-photo.p2,
  .qui-collage .qui-photo.p3 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    transform: none !important;
    margin: 0 !important;
    grid-row: 1 !important;
    box-shadow: 4px 4px 0 var(--yp-black) !important;
    overflow: visible !important;
  }

  /* Tag MATHIAS·DIGITAL : déborde en bas centré */
  .qui-collage .qui-photo .qui-photo-tag {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    font-size: 9.5px;
    padding: 2px 8px;
    white-space: nowrap;
  }

  /* Stamp "11 poneys" : badge séparé incliné, prend toute la
     largeur en row 2, centré, fond blanc + ombre rose */
  .qui-collage .qui-stamp {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    margin-top: 24px !important;
    background: var(--yp-white) !important;
    border: 2px solid var(--yp-black) !important;
    padding: 14px 26px !important;
    transform: rotate(-3deg) !important;
    box-shadow: 8px 8px 0 var(--yp-pink) !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .qui-stamp-num {
    font-family: var(--yp-font-display);
    font-weight: 900;
    font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
    font-size: 56px;
    line-height: 0.85;
  }
  .qui-stamp-lbl {
    font-family: var(--yp-font-body);
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 4px;
  }

  /* ------- Ordre vertical attendu maquette : titre → lead → body
     → photos → stamp → CTA. Le CTA est dans .qui-content donc on
     applatit ce conteneur intermédiaire pour pouvoir le réordonner. */
  .qui-section .qui-inner > .qui-content { display: contents; }
  .qui-section .qui-cta { order: 99 !important; margin-top: 24px !important; }
  .qui-section .qui-collage { order: 50; }
  .qui-section .qui-title { order: 1; }
  .qui-section .qui-text { order: 2; }

  /* ------- Stamp : texte noir (override du color:white desktop).
     Aussi taille des spans intérieurs vérifiée. */
  .qui-collage .qui-stamp { color: var(--yp-black) !important; }
  .qui-collage .qui-stamp .qui-stamp-num { color: var(--yp-black) !important; }
  .qui-collage .qui-stamp .qui-stamp-lbl { color: var(--yp-black) !important; }
}

/* ============================================================
   6. ALIGNEMENTS BLOCS TEXTE — cases-heading + fanzine
   Deux containers desktop restent en grid 2-colonnes en mobile :
   on les force en 1 colonne pleine largeur, et on cache la bande
   décorative .fanzine-page (col 1 du grid fanzine desktop).
   ============================================================ */
@media (max-width: 720px) {
  /* (a) .cases-heading : titre + lead + bouton empilés verticalement */
  .cases-heading {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 20px !important;
    margin: 0 0 28px !important;
  }
  .cases-heading-text {
    max-width: none !important;
  }
  .cases-heading h2 {
    font-size: 36px !important;
    line-height: 0.95 !important;
    max-width: none !important;
    margin: 0 0 12px !important;
  }
  .cases-h2-sub {
    font-size: 17px !important;
    margin-top: 4px !important;
  }
  .cases-lead {
    max-width: none !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
  }
  /* Bouton "TOUS LES CAS" justifié à gauche, taille réduite */
  .cases-heading .case-cta {
    justify-self: start !important;
    margin-top: 4px !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
  }

  /* (b) .fanzine-inner : 1 colonne, bande décorative cachée */
  .fanzine-inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .fanzine-page {
    display: none !important;
  }
  .fanzine-content {
    width: 100% !important;
  }
  .fanzine-cols {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .fanzine h2 {
    font-size: 36px !important;
    line-height: 0.92 !important;
    margin: 0 0 18px !important;
    max-width: none !important;
  }
  .fanzine-col p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    max-width: none !important;
  }
}

/* ============================================================
   7. PILIERS — alignement maquette .m-section.is-black
   Cible : section "3 EXPERTISES SENIORS" (.piliers + accordéon
   .pilier.is-acc).
   Écarts traités :
   1. titre .piliers-h2 surdimensionné (56px+ → 32px)
   2. eyebrow "3 EXPERTISES SENIORS" absent du HTML → ::before
   3. chevron simple glyphe → boîte 36×36 bordée
   4. sous-titre Georgia italic → body 800 alpha
   5. puces prestations rose → jaune (maquette)
   ============================================================ */
@media (max-width: 720px) {
  /* (1) Titre */
  .piliers-h2 {
    font-size: 32px;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
  }

  /* (2) Eyebrow pill injecté en ::before */
  .piliers-intro::before {
    content: "3 EXPERTISES SENIORS";
    display: inline-block;
    border: 1.5px solid var(--yp-yellow);
    color: var(--yp-yellow);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: var(--yp-font-body);
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
    /* .piliers-intro est display:grid → la pseudo devient grid item et
       s'étire (justify-self:stretch par défaut). On la sort du stretch
       et on la dimensionne sur son contenu = pilule compacte. */
    justify-self: start;
    width: max-content;
  }

  /* (3) Chevron boîte 36×36 bordée, fond jaune à l'ouverture */
  .pilier .pilier-chev {
    width: 36px;
    height: 36px;
    border: 2px solid var(--yp-white);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: var(--yp-white);
    background: transparent;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 220ms ease;
  }
  .pilier.is-acc[data-open="true"] .pilier-chev,
  .pilier.is-acc[aria-expanded="true"] .pilier-chev {
    background: var(--yp-yellow);
    border-color: var(--yp-yellow);
    color: var(--yp-black);
  }

  /* (4) Sous-titre : body 800, plus d'italique Georgia */
  .pilier .pilier-subhead {
    font-family: var(--yp-font-body);
    font-style: normal;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    margin: 6px 0 0;
    font-size: 13px;
  }

  /* (5) Puces prestations : jaunes (maquette) */
  .pilier .pilier-list li::before {
    background: var(--yp-yellow);
  }
}

/* ============================================================
   8. MÉTHODO — alignement maquette .m-step / .m-cases-rail
   Cible : section "QUATRE TEMPS DE GALOP" (.methodo .methodo-card
   dans steps-rail).
   ============================================================ */
@media (max-width: 720px) {
  /* (1) Heading : titre + lead empilés full-width */
  .methodo-heading {
    display: block;
    gap: 0;
    margin-bottom: 20px;
    /* Section passée en padding:40px 0 → on rend les 20px latéraux
       uniquement au heading (le rail a son propre padding 20px) :
       titre/lead alignés sur les cartes, conforme maquette .m-section. */
    padding: 0 20px;
  }
  .methodo-heading > div:last-child,
  .methodo-heading p {
    max-width: none;
    margin-top: 12px;
  }

  /* Padding section réduit (mineur) */
  .methodo {
    padding: 40px 0;
  }

  /* (2) Badge numéro : carré 40×40 (maquette .m-step-num) */
  .methodo-card .badge {
    width: 40px;
    height: 40px;
    border-radius: 0;
    font-size: 20px;
    border: 2px solid var(--yp-black);
  }

  /* (3) Icône décorative cachée (maquette stricte) */
  .methodo-card .methodo-card-icon { display: none; }

  /* (4) Titre h3 carte */
  .methodo-card h3 {
    font-size: 18px;
    line-height: 1.1;
    margin: 0 0 6px;
  }

  /* (5) Ombres colorées par slide (maquette nth-of-type) */
  .steps-rail .step-slide:nth-of-type(1) .methodo-card {
    box-shadow: 6px 6px 0 var(--yp-yellow);
  }
  .steps-rail .step-slide:nth-of-type(2) .methodo-card {
    box-shadow: 6px 6px 0 var(--yp-pink);
  }
  .steps-rail .step-slide:nth-of-type(3) .methodo-card {
    box-shadow: 6px 6px 0 var(--yp-blue, #00E1FF);
  }
  .steps-rail .step-slide:nth-of-type(4) .methodo-card {
    box-shadow: 6px 6px 0 var(--yp-yellow);
  }

  /* (Mineur) Peek 84% (maquette 16% de la suivante visible) */
  .methodo-grid.steps-rail .step-slide {
    flex: 0 0 84%;
  }

  /* (6) Dots carrés 7×7 + libellé "GLISSEZ · 4 TEMPS" */
  .steps-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 14px 0 2px;
  }
  .steps-dot {
    width: 7px;
    height: 7px;
    border-radius: 0;
  }
  .steps-dots::after {
    content: "GLISSEZ · 4 TEMPS";
    font-family: var(--yp-font-body);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: rgba(0, 0, 0, 0.55);
    margin-left: 6px;
  }
}

/* ============================================================
   9. CTA "ON SE BRIEFE" — aucun fix mobile nécessaire.
   .cta-black est déjà conforme à .m-cta-block après le surgical
   fix antérieur (.bolt-bg display:none mobile, yps.css l.5877).
   Sub italique Georgia conservé volontairement (cohérence pattern
   leads qui/fanzine/méthodo).
   ============================================================ */

/* ============================================================
   10. FOOTER — alignement maquette .m-footer
   Cible : .yps-footer (Base.astro global).
   Écarts traités :
   1. Grid 2-col → pile unique (maquette)
   2. Logo animé rocket réduit (clamp 150-190px)
   3. Tags 13px (vs 16px)
   4. Liens + h5 colonnes tailles maquette
   5. Bottom bar 10px + wrap propre
   6. Padding bottom 70px (safe area home indicator iOS)
   ============================================================ */
@media (max-width: 720px) {
  /* (1) Pile unique */
  .yps-footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .yps-footer-col {
    margin-top: 22px;
  }

  /* (2) Logo réduit */
  .yps-footer-logo .yps-logo-anim {
    width: clamp(150px, 42vw, 190px);
    height: auto;
  }

  /* (3) Tags */
  .yps-footer-tag {
    font-size: 13px;
    margin: 8px 0;
  }

  /* (4) Liens + titres */
  .yps-footer-col a,
  .yps-footer-col span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  .yps-footer-col h5 {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  /* (5) Bottom bar */
  .yps-footer-bottom {
    font-size: 10px;
    color: #888;
    margin-top: 22px;
    border-top-color: rgba(255, 255, 255, 0.15);
    gap: 12px;
    flex-wrap: wrap;
  }

  /* (6) Padding bottom safe area */
  .yps-footer {
    padding-bottom: 70px;
  }
}

/* ============================================================
   11. APPROCHE — aucun fix mobile nécessaire.
   Le refactor HTML (refactor contour mai 2026) a aligné la page
   sur la maquette MobileApproche : jumpnav supprimé, bolts hero
   supprimés, épreuve simplifiée (cartes formats retirées). Le
   contenu riche des 3 piliers est conservé (décision business).
   Les classes .ap-pilier-* gardent leur CSS desktop+mobile
   existant dans yps.css — rien à surcharger ici.
   ============================================================ */

/* ============================================================
   12. PROJETS — bloc mobile (maquette MobileProjets)
   Cible : .mobile-projets-block (double-DOM, voir yps.css). Le
   scroll-stack desktop .desktop-projets-stack reste INCHANGÉ.
   3 featured .mobile-strate + card CTA pos.04 + mini-carousel.
   ============================================================ */
@media (max-width: 720px) {
  /* ----- Featured strate (réf .m-strate, bg via classes .bg-*) ----- */
  .mobile-strate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 20px 32px;
    border-bottom: 2px solid var(--yp-black);
    background: #FAFAF7;
  }
  .mobile-strate.bg-paper  { background: #FAFAF7; }
  .mobile-strate.bg-yellow { background: var(--yp-yellow); }
  .mobile-strate.bg-gray   { background: #E6E3DA; }

  .mobile-strate .strate-eyebrow {
    font-family: var(--yp-font-body); font-weight: 800;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #777; margin-bottom: 6px;
  }
  .mobile-strate .strate-title {
    font-family: var(--yp-font-display); font-weight: 900;
    font-size: 34px; line-height: 0.95; text-transform: uppercase;
    letter-spacing: -0.02em; margin: 0 0 8px;
    font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
  }
  .mobile-strate .strate-summary {
    font-family: var(--yp-font-body); font-size: 14px; line-height: 1.5;
    margin: 0 0 12px; color: #222;
  }
  /* (P3) Image 4:3 vignette entre summary et KPI (réf maquette l.589) */
  .mobile-strate-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border: 2px solid var(--yp-black);
    margin: 0 0 14px;
  }
  /* (P2/B1) KPI maquette-strict : tuiles claires uniquement, jamais noir */
  .mobile-strate .strate-kpi {
    display: inline-flex; flex-direction: column;
    border: 2px solid var(--yp-black);
    background: var(--yp-yellow); color: var(--yp-black);
    padding: 12px 16px; margin: 0 0 12px;
  }
  .mobile-strate.bg-paper  .strate-kpi { background: var(--yp-yellow); color: var(--yp-black); }
  .mobile-strate.bg-yellow .strate-kpi { background: var(--yp-pink);   color: var(--yp-black); }
  .mobile-strate.bg-gray   .strate-kpi { background: var(--yp-white);  color: var(--yp-black); }
  .mobile-strate .strate-kpi .v {
    font-family: var(--yp-font-display); font-weight: 900;
    font-size: 26px; line-height: 1;
  }
  .mobile-strate .strate-kpi .l {
    font-family: var(--yp-font-body); font-weight: 700;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    margin-top: 4px;
  }
  .mobile-strate .strate-tags {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px;
  }
  .mobile-strate .strate-tag {
    font-family: var(--yp-font-body); font-weight: 700;
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 10px; border: 1.5px solid currentColor;
    border-radius: 999px;
  }
  .mobile-strate .strate-link {
    font-family: var(--yp-font-body); font-weight: 800;
    font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--yp-black); text-decoration: none;
    /* reset du cadre bordé hérité du .strate-link desktop */
    border: 0;
    padding: 0 0 2px;
    margin-top: 0;
    border-bottom: 2px solid var(--yp-pink);
  }
  .mobile-strate .strate-link:hover { transform: none; }

  /* ----- Card CTA position 04 (compacte : num + titre + bouton) ----- */
  .mobile-strate--cta {
    background: var(--yp-black); color: var(--yp-white);
    gap: 14px;
  }
  .mobile-strate-cta-num {
    font-family: var(--yp-font-display); font-weight: 900;
    font-size: 40px; line-height: 0.85; color: var(--yp-yellow);
  }
  .mobile-strate--cta h2 {
    font-family: var(--yp-font-display); font-weight: 900;
    font-size: 32px; line-height: 0.95; text-transform: uppercase;
    margin: 0; font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
  }
  .mobile-strate--cta .hl-yellow {
    background: var(--yp-yellow); color: var(--yp-black); padding: 0 0.1em;
  }
  .mobile-strate--cta .btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--yp-yellow); color: var(--yp-black);
    border: 2px solid var(--yp-yellow); border-radius: 999px;
    padding: 14px 26px; font-family: var(--yp-font-body);
    font-weight: 800; font-size: 12px; letter-spacing: 0.1em;
    text-transform: uppercase; text-decoration: none;
    box-shadow: 5px 5px 0 var(--yp-pink); margin-top: 4px;
  }

  /* ----- Mini-carousel "Toute l'écurie" (réf .m-cases-rail) ----- */
  .mobile-projets-rail {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 20px 20px 24px;
    background: #FAFAF7;
    border-bottom: 2px solid var(--yp-black);
  }
  .mobile-projets-rail::-webkit-scrollbar { display: none; }
  .mobile-projets-mini-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    background: var(--yp-white);
    border: 2px solid var(--yp-black);
    text-decoration: none; color: var(--yp-black);
  }
  /* (P5) zone image 4:3 */
  .mobile-mini-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 2px solid var(--yp-black);
    background: #FAFAF7;
    display: flex; align-items: center; justify-content: center;
  }
  .mobile-mini-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .mobile-mini-initial {
    font-family: var(--yp-font-display); font-weight: 900; font-size: 48px;
  }
  .mobile-mini-body {
    padding: 14px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .mobile-mini-meta {
    font-family: var(--yp-font-body); font-weight: 800;
    font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #777;
  }
  .mobile-mini-title {
    font-family: var(--yp-font-display); font-weight: 900;
    font-size: 20px; line-height: 1; text-transform: uppercase;
    margin: 0;
    font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
  }
  /* Tuile KPI mini-card = rectangle bordé maquette .m-kpi, couleur
     cyclée par position (1→jaune, 2→rose, 3→bleu). */
  .mobile-mini-kpi {
    display: block;
    align-self: flex-start;
    background: var(--yp-white);
    border: 2px solid var(--yp-black);
    padding: 8px 12px;
    margin: 2px 0 6px;
  }
  .mobile-projets-mini-card:nth-of-type(3n+1) .mobile-mini-kpi { background: var(--yp-yellow); }
  .mobile-projets-mini-card:nth-of-type(3n+2) .mobile-mini-kpi { background: var(--yp-pink); }
  .mobile-projets-mini-card:nth-of-type(3n)   .mobile-mini-kpi { background: var(--yp-blue, #00E1FF); }
  .mobile-mini-kpi .value {
    display: block;
    font-family: var(--yp-font-display); font-weight: 900;
    font-size: 24px; line-height: 0.9; color: var(--yp-black);
    font-variation-settings: "wght" 900, "opsz" 18, "slnt" 0;
  }
  .mobile-mini-kpi .label {
    display: block;
    font-family: var(--yp-font-body); font-weight: 800;
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--yp-black); margin-top: 5px;
  }
  .mobile-mini-link {
    font-family: var(--yp-font-body); font-weight: 800;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--yp-black);
    border-bottom: 2px solid var(--yp-pink);
    align-self: flex-start; padding-bottom: 2px;
  }

  /* (P6) CTA final dupliqué avec la card pos.04 → caché en mobile */
  .cta-black--projets-final { display: none; }
}

/* ============================================================
   13. ÉQUIPE — scrapbook cadre + stable-feu carousel
   - .sb-board : compactage cadre mobile (équivalent .fv-board maquette)
   - .stable-grid : grille → rail scroll-snap horizontal (feu préservé)
   - .stable-hint : dots + texte "GLISSEZ · 8 TALENTS" (mobile only)
   ============================================================ */
/* Hint masqué hors mobile (le scrapbook/stable desktop n'a pas de
   carousel → pas de hint). Affiché uniquement @media ≤720px. */
.stable-hint { display: none; }

@media (max-width: 720px) {
  /* (0) Fond section freelances = JAUNE (maquette .m-section.is-yellow ;
     .stable-section n'a aucun background déclaré → était paper #FAFAF7).
     Contraste : "PONIES" surligné .hl jaune deviendrait invisible sur
     jaune → fond noir / texte jaune (façon maquette is-yellow). */
  .stable-section {
    background: var(--yp-yellow);
  }
  .stable-section .stable-heading .hl,
  .stable-section h2 .hl {
    background: var(--yp-black);
    color: var(--yp-yellow);
  }

  /* (0bis) Heading : grid 2-col desktop (texte | pill "8+ PONIES")
     n'avait AUCUN override mobile → texte écrasé dans une colonne de
     ~207px (perçu "centré"). On repasse en 1 colonne pleine largeur,
     texte aligné gauche, pill en flux dessous. */
  .stable-section .stable-heading {
    display: block;
  }
  .stable-section,
  .stable-section .stable-heading,
  .stable-section .stable-heading-text,
  .stable-section h2,
  .stable-section .stable-lead,
  .stable-section .stable-heading-text p {
    text-align: left;
  }
  .stable-section .stable-heading-text { max-width: none; }
  .stable-section .stable-heading .count {
    display: inline-block;
    margin-top: 16px;
  }

  /* (A) Cadre englobant scrapbook (équivalent .fv-board maquette) */
  #founders-scrapbook .sb-board,
  .sb-board {
    padding: 28px 16px 32px;
    margin: 24px auto 40px;
    background: #FAFAF7;
    border: 2px solid var(--yp-black);
    box-shadow: 6px 6px 0 var(--yp-black);
  }

  /* (B) Stable feu → rail horizontal (animations feu inchangées : on
     ne touche QUE le conteneur grid → flex scroll-snap) */
  .stable-section .stable-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    padding: 4px 20px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stable-section .stable-grid::-webkit-scrollbar { display: none; }
  .stable-section .stable-card {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  /* (C) Hint dots + texte (réf maquette .m-cases-hint) */
  .stable-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px 4px;
  }
  .stable-dots { display: inline-flex; gap: 6px; }
  .stable-dot {
    width: 7px;
    height: 7px;
    background: transparent;
    border: 1.5px solid var(--yp-black);
    border-radius: 0;
  }
  .stable-dot.is-on { background: var(--yp-black); }
  .stable-hint-text {
    font-family: var(--yp-font-body);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--yp-black);
  }
}

/* ============================================================
   14. CONTACT — alignement maquette MobileContact
   - (Bug) .contact-aside-bolt 807px → overflow viewport masqué
   - (C1a) aside fond paper #FAFAF7 (remplace jaune mobile, maquette is-paper)
   - (C2a) stepper → rangée scroll-snap horizontale (4 pills compactes)
   - (C3b) styling section noire "ÉCRIVEZ-NOUS DIRECT." (coords remontées)
   ============================================================ */
@media (max-width: 720px) {
  /* (Bug) bolt décoratif hors-viewport masqué (cf. pattern .approche-bolt) */
  .contact-aside-bolt,
  .contact-aside .contact-aside-bolt {
    display: none;
  }

  /* (C1a) Aside fond paper — alignement strict maquette is-paper */
  .contact-aside {
    background: #FAFAF7;
  }

  /* (C2a) Stepper en rangée scroll horizontal (pattern rail) */
  .contact-aside .stepper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline: 0;
    padding: 4px 0 10px;
  }
  .contact-aside .stepper::-webkit-scrollbar { display: none; }
  .contact-aside .stepper-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* (C3b) Section noire coords directes — compactage mobile */
  .contact-direct-section {
    padding: 40px 20px 44px;
  }
  .contact-direct-coords {
    margin-top: 28px;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .contact-direct-coords .btn {
    width: 100%;
    justify-content: center;
  }

  /* (Bug 2 — vraie cause "page dézoomée") .form-footer : 3 boutons
     en flex space-between non-wrap → largeur min > 390 → viewport
     élargi à 463. Pré-existant (markup form inchangé). Empilement
     vertical pleine largeur (cohérent maquette MobileContact m-cta). */
  .form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .form-footer .left {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .form-footer .btn-secondary,
  .form-footer .btn-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}