/* Téléphone (700 px et moins) — corrections P1 et P2 de la revue UX/UI du 26 octobre 2026,
   validées sur la maquette mobile. Chargé après les autres styles. Au-delà de 700 px,
   seuls le masquage des liens ajoutés au menu et du voile s’appliquent. */
.menu-scrim{display:none}
@media(min-width:701px){.site-header nav .nav-extra{display:none}}

@media(max-width:700px){
 /* P1 — Lisibilité : corps 15–16 px, mentions 12–13 px, petits titres 11 px. */
 .hero .eyebrow,.section-top .eyebrow,.problem-copy .eyebrow,.pricing-heading .eyebrow,.extras-heading .eyebrow,
 .start-heading .eyebrow,.faq-heading .eyebrow,.final-cta .eyebrow{font-size:11px;letter-spacing:1.3px}
 .hero-lead{font-size:17px;line-height:1.5}
 .hero-description,.problem-copy>p:not(.eyebrow),.visibility-copy>p,.conversion-copy>p,.integration-heading>p,
 .pricing-heading>p:last-child,.extras-heading>p:last-child,.faq-heading>p:not(.eyebrow),
 .final-cta>.wrap>p:not(.eyebrow){font-size:16px;line-height:1.6}
 .plan-description,.extra-copy>p,.team-copy>p,.start-step p,.faq-list details p,.integration-footer{font-size:15px;line-height:1.6}
 .price-card li{font-size:15px;line-height:1.5}
 .price-card li:before{font-size:13px;line-height:22px}
 .plan-tag{font-size:11px}
 .start-step>span{font-size:12px}
 .plan-condition,.extra-copy .extra-terms,.pricing-footer p,.options-conditions,.team-expertise>p,.booking-steps,
 .extra-title-row>span,.team-price>span{font-size:13px;line-height:1.55}
 .small-note{font-size:14px!important;line-height:1.55}
 .price span{font-size:14px}
 .team-price{font-size:14px!important}
 .team-availability{font-size:12px}
 .expertise-label{font-size:14px}
 /* Colonnes à la largeur du contenu : les libellés 13 px tiennent dès 360 px. */
 .team-offer{padding-left:22px;padding-right:22px}
 .expertise-grid{grid-template-columns:auto auto}
 .expertise-grid>span{font-size:13px;padding:12px 8px;gap:7px;white-space:nowrap}
 .expertise-grid i{width:18px;font-size:17px}
 .expertise-grid>span:first-child i{font-size:11px}
 .hero-art figcaption,.conversation-art figcaption,.map-art figcaption,.booking-figure figcaption{font-size:12px;line-height:1.5}
 .faq-list summary{font-size:16px;line-height:1.5}
 .site-footer>div>p{font-size:13px}
 .footer-links{font-size:14px;gap:4px 24px;flex-wrap:wrap}
 .footer-note{font-size:12px;line-height:1.55}

 /* P1 — Boutons et liens : texte 13–15 px, zone tactile de 44 px minimum. */
 .button,.hero-actions .button,.price-card .button,.start-heading .button,.final-actions .button,.team-copy .button{font-size:15px}
 .header-actions{gap:4px}
 .button.small{font-size:13px;min-height:44px;padding:8px 14px;gap:10px}
 .menu-toggle{width:44px;height:44px;margin-right:-12px}
 .wordmark{min-height:44px}
 .text-link,.hero-actions .text-link,.price-card .text-link,.pricing-footer .text-link,.extra-copy .text-link,
 .team-expertise .text-link{font-size:15px;min-height:44px;padding:9px 0}
 .hero-actions{flex-direction:column;align-items:flex-start;gap:10px}
 .compatibility-note{font-size:14px;line-height:1.45;min-height:44px}
 .hero-bottom{font-size:14px;gap:0 22px}
 .hero-bottom>span{font-size:14px;margin-bottom:4px}
 .hero-bottom>a{min-height:44px}
 .footer-links a{display:inline-flex;align-items:center;min-height:44px}

 /* P1 — Carte application : le texte garde sa colonne, le téléphone dépasse à droite. */
 .app-preview{height:250px}
 .app-continuity{left:24px;top:24px;gap:14px;max-width:46%}
 .app-icon{width:48px;height:48px;font-size:21px;border-radius:13px}
 .app-continuity>span:last-child{font-size:20px}
 .phone-frame{width:150px;right:-16px;top:30px}
 .continuity-badge{left:24px;bottom:18px;max-width:44%;align-items:flex-start;font-size:12px;line-height:1.35;padding:9px 11px}
 .continuity-badge .mini-check{flex-shrink:0}

 /* P2 — Apparitions : fondu plus court ; le déclenchement anticipé est dans site.js et motion.js. */
 .reveal-ready [data-reveal]{transition-duration:.3s}

 /* P2 — Longueur : aperçu du site plus court. */
 .website-preview{height:220px;padding-top:22px}

 /* P2 — Schéma : la hauteur suit l’ouverture de la branche « logiciel ». */
 .flow-canvas{height:calc(170px + var(--flow-expanded,1) * 180px)}
 .flow-toggle{width:100%}
 .flow-toggle button{flex:1 1 0;white-space:normal;font-size:13px;padding:10px 8px}
 .flow-hub h3,.flow-software h3{font-size:13px}
 .flow-players h3,.flow-club h3{font-size:12px}
 .unified-flow>figcaption,.flow-caption-main{font-size:14px;line-height:1.6}

 /* P2 — Flèches : ↓ pour un passage plus bas dans la page, ↗ pour une autre page. */
 .hero-bottom>a>span,.compatibility-note>span:last-child{font-size:0}
 .hero-bottom>a>span::after,.compatibility-note>span:last-child::after{content:"↓";font-size:14px}

 /* P2 — Menu : fond opaque, voile sur la page, accès à l’espace club et au contact. */
 .site-header nav.is-open{background:#fff;padding:6px 24px 16px;gap:0;box-shadow:0 18px 30px -24px #25252566}
 .site-header nav a{font-size:17px;padding:12px 0;color:var(--ink)}
 .site-header nav .nav-extra{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
 .site-header nav .nav-extra-first{margin-top:6px;border-top:1px solid var(--line);padding-top:18px}
 .menu-scrim{display:block;position:fixed;inset:0;z-index:29;background:#141a1652;opacity:0;pointer-events:none;transition:opacity .2s}
 .menu-open .menu-scrim{opacity:1;pointer-events:auto}
}
/* Très petits écrans : le téléphone recule et les compétences passent sur une colonne. */
@media(max-width:370px){
 .phone-frame{width:132px;right:-26px}
 .app-continuity>span:last-child{font-size:18px}
}
@media(max-width:340px){.expertise-grid{grid-template-columns:1fr}}