/* Shared phone composition for B and C. Desktop keeps the original story.
   Typographie : les tokens (assets/tokens.css) sont fluides, ce fichier ne
   redéfinit donc aucune taille, sauf changement de rôle explicite. */
.mobile-copy { display: none; }
.nav-actions { display: contents; }

@media (max-width: 760px) {
  html { scroll-padding-top: 92px; }
  .present .review { min-height: 36px; padding: 0 20px; gap: 10px; }
  .review a { display: flex; align-items: center; min-height: 36px; }
  .present .nav { min-height: 76px; padding: 12px 20px; }
  .nav-actions { display: flex; align-items: center; gap: 8px; }
  .present .menu { min-width: 75px; min-height: 44px; padding: 9px 13px; border-radius: 24px; }
  .present .motion-control {
    position: static; width: 44px; height: 44px; flex-shrink: 0;
    min-height: 44px; padding: 0; justify-content: center;
    border-radius: 50%; box-shadow: none; background: transparent;
  }
  .motion-control .motion-icon { font: var(--fs-texte-m)/1 Arial, sans-serif; }
  .motion-control .motion-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .present .nav nav { padding: 16px 20px 24px; gap: 4px; }
  .nav nav > a { display: flex; align-items: center; min-height: 48px; font-size: var(--fs-texte-m); }
  .nav nav .button { margin-top: 10px; }
  .present .present-hero {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--deep); color: var(--paper);
  }
  .present .present-hero::before { display: none; }
  .present .present-hero-copy { order: 0; padding: 30px 24px 28px; max-width: none; }
  .present .audience { margin-bottom: 19px; }
  .present .present-hero h1 > .titre-suite { display: block; }
  .present .present-hero h1 > .titre-suite > span { display: inline; animation: none; }
  .present .present-hero-copy > .hero-promise { margin: 22px 0 0; max-width: none; }
  .hero-promise .saut-large { display: none; }
  .present-hero-copy > .button, .present-hero .scroll-cue { display: none; }
  .present .cinema { order: 1; position: relative; inset: auto; z-index: 0; height: clamp(260px, 72vw, 390px); width: 100%; }
  .present .cinema img { object-position: 100% 48%; transform-origin: 80% center; }
  .cinema::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(transparent 50%, #0c182d9e);
  }
  .present .scene-caption { left: 24px; right: 24px; bottom: 20px; z-index: 1; }
  .scene-caption small { margin-top: 3px; }
  .present .trust-line { grid-template-columns: 1fr 1fr; padding: 30px 24px; gap: 22px 20px; }
  .trust-line p:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 19px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
  /* Sur téléphone, le chiffre clé (+250) prend le rôle de titre de section. */
  .trust-line p:first-child strong { font-size: var(--fs-titre-2); margin: 0; }
  .trust-line p:first-child span { max-width: 190px; }
  .trust-line strong { margin-bottom: 7px; }
  .trust-line span { max-width: none; }
  .present .present-intro, .present .outcomes, .present .how,
  .present .present-faq { padding: 62px 24px; }
  .present .section-label { margin-bottom: 22px; }
  .present .intro-bottom { margin-top: 30px; gap: 20px; }
  .present .outcomes { gap: 30px; }
  .outcome-heading > p:last-child { margin-top: 20px; }
  .present .choices button { min-height: 68px; padding-block: 19px; }
  .present .choices button[aria-pressed=true] { padding-inline: 17px; }
  .present .choice-response { min-height: 345px; padding-top: 30px; }
  .present .choice-response p { margin: 18px 0; }
  .present .text-link { min-height: 44px; align-items: center; gap: 12px; }
  .present .vanessa-picture { min-height: 0; aspect-ratio: 1.1; }
  .present .vanessa-picture > img { object-position: center 19%; }
  .present .vanessa-picture > span { left: 24px; bottom: 26px; padding: 15px 21px; }
  .present .vanessa-intro { min-width: 0; padding: 42px 24px 54px; }
  .present .vanessa-intro .intro-lead { margin: 26px 0 22px; }
  .present .button { min-height: 56px; padding: 16px 19px; gap: 14px; }
  .vanessa-intro .button, .present-contact .button { width: 100%; }
  .present .how .section-top { margin-bottom: 40px; }
  .present .how-steps { gap: 26px; }
  .present .how-steps article { border-top: 0; padding: 0 0 26px 42px; border-bottom: 1px solid var(--line); }
  .present .how-steps article::before { display: none; }
  /* Le numéro d'étape devient un repère en titre condensé. */
  .present .how-steps article > span { position: absolute; left: 0; top: 3px; font: var(--fw-titre) var(--fs-texte-l)/1 var(--display); color: var(--ink); }
  .present .how-steps h3 { margin: 0 0 13px; }
  .present .present-proof { padding: 54px 24px; }
  .present .present-faq { gap: 24px; }
  .present-faq summary { min-height: 68px; padding: 20px 0; }
  .present details > p { padding-right: 12px; }
  .present .present-contact { padding: 60px 24px; }
  .present .present-contact > p:not(.section-label):not(.contact-note) { margin: 25px auto; }
  .present .phone { min-height: 48px; display: flex; justify-content: center; align-items: center; margin-top: 13px; }
  .present footer { padding: 40px 24px 120px; gap: 26px; }
  footer > div { gap: 0; }
  footer > div > a { display: flex; align-items: center; min-height: 44px; }
  .present .mobile-contact {
    left: 14px; right: 14px; bottom: max(12px, env(safe-area-inset-bottom));
    padding: 17px 20px; min-height: 56px; align-items: center;
    border: 0; border-radius: 5px; line-height: 1.4;
    box-shadow: 0 4px 24px #10204329;
  }
  .present .mobile-contact > span { font-size: var(--fs-texte-l); line-height: 1; }
}

@media (max-width: 350px) {
  .present .nav { padding-inline: 16px; }
  .present .present-hero-copy { padding-inline: 20px; }
  .present .mobile-contact { padding-inline: 17px; }
  .present .choice-response { min-height: 405px; }
}