/* ============================================================================
   Gradifon — responsive.css
   Correctifs mobile / tablette. Chargé APRÈS style.css et content.css.
   Points de rupture : 1180 (cas limite maquette) · 1024 · 860 · 600 · 480 · 380.
   Aucun !important : même sélecteur + media query suffit pour surpasser style.css.
   Les animations et prefers-reduced-motion de style.css ne sont pas touchés.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. Robustesse générale (toutes largeurs)
   - Les enfants de grilles/flex ne peuvent pas descendre sous leur contenu
     (min-width:auto) : on force min-width:0 pour éviter tout débordement.
   - Les chaînes insécables (IMEI, noms de fichiers, commandes, URL) peuvent
     couper plutôt que dépasser la carte.
   -------------------------------------------------------------------------- */
.hero__inner > *,
.grid > *,
.feature > *,
.contact-grid > *,
.dl > *,
.plans > *,
.tokens > *,
.steps > *,
.access > *,
.tests > *,
.footer__inner > *,
.mock__main > *,
.mock__head > *,
.kv > *,
.note > *,
.shots__caption > * { min-width: 0; }

.mono,
.kv b,
.dl__meta,
.release__body,
.release__history li,
.legal a,
.footer__copy { overflow-wrap: anywhere; }

/* La commande Terminal de la page Télécharger (xattr …) fait ~55 caractères :
   elle dépassait la carte sous 480 px. */
.note code, .card code, .feature code { white-space: normal; overflow-wrap: anywhere; }

/* Cibles tactiles : un doigt, pas un curseur. */
@media (hover: none) and (pointer: coarse) {
  .btn--sm { min-height: 44px; }
  .shots__tabs button { min-height: 44px; }
  .faq summary { min-height: 44px; align-items: center; }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .release__history a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ----------------------------------------------------------------------------
   1. ≤ 1180 px — maquette héros à 2 colonnes : la carte IMEI (mono, nowrap)
   mesure ~154 px et déborde de sa colonne (~143 px entre 1025 et 1180 px).
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .mcard__v.mono { font-size: 11px; letter-spacing: -0.01em; }
}

/* ----------------------------------------------------------------------------
   2. ≤ 1024 px — tablette paysage
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Navigation : entre 861 et ~935 px la barre complète (marque + 4 liens +
     2 boutons) dépasse le conteneur. Le bouton fantôme « Télécharger »
     duplique le lien du menu : on le masque, et on resserre les liens. */
  .nav__cta .btn--ghost { display: none; }
  .nav__links a { padding: 8px 10px; font-size: 14px; }

  /* Héros : à 1024 px la colonne visuelle ne fait que ~500 px, la maquette
     3 colonnes et le téléphone se compriment. On passe en 1 colonne dès 1024
     (style.css ne le faisait qu'à 960). */
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 720px; }
  .phone { right: 8px; }

  /* Cartes de téléchargement en 3 colonnes de ~268 px : « Télécharger pour
     Mac (Intel) » (~300 px, nowrap) débordait. On autorise le retour à la ligne. */
  .dl__card .btn { white-space: normal; text-align: center; padding-inline: 16px; }

  /* Formulaire : sous 16 px, iOS zoome sur le champ au focus. */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* ----------------------------------------------------------------------------
   3. ≤ 860 px — tablette portrait / grands mobiles (le burger est actif)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Barre : le CTA restant s'aligne sur la hauteur du burger (44 px). */
  .nav__cta { gap: 8px; }
  .nav__cta .btn--sm { min-height: 44px; padding-block: 0; }

  /* Menu ouvert : défilable si l'écran est bas (mobile en paysage),
     ombre portée pour le détacher du contenu, liens de 44 px minimum. */
  .nav__links {
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    box-shadow: 0 28px 48px -24px rgb(0 0 0 / 0.6);
  }
  .nav__links li { margin: 0; }
  .nav__links a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; font-size: 16px; border-radius: 12px; }

  /* Sections texte + image : l'image passe en pleine largeur, on lui donne
     un cadrage 16/10 (moins haut que 4/3 à 728 px de large). */
  .feature { gap: 24px; }
  .shot--crop { aspect-ratio: 16 / 10; }

  /* Contact : sur mobile, le formulaire est la raison de la page ;
     il passe avant la colonne « ce qui se passe ensuite ». */
  .contact-grid > aside { order: 2; }

  /* Galerie : la légende prend toute la largeur disponible. */
  .shots__caption { max-width: none; }

  /* Tarifs (page hors navigation, mais servie) */
  .tokens__packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------------------
   4. ≤ 600 px — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root { --gutter: 16px; --radius: 16px; }

  /* Rythme vertical : les sections respiraient 64 px minimum, trop pour un
     écran de 375 px. */
  .section { padding: 48px 0; }
  .section--tight { padding: 32px 0; }
  .shots, .faq, .tests, .release, .dl, .steps, .access, .contact-grid { margin-top: 28px; }
  .feature { padding: 32px 0; }

  /* Typo */
  .h2 { font-size: clamp(26px, 7.2vw, 30px); line-height: 1.15; margin-top: 12px; }
  .lead { font-size: 16.5px; margin-top: 12px; }
  .eyebrow { font-size: 11.5px; }
  .card p, .step p, .access__step p, .faq details p, .release__body, .feature p { font-size: 15px; }
  .feature h3 { font-size: clamp(22px, 6.4vw, 26px); }
  .feature li { font-size: 14.5px; }

  /* Boutons : sur un écran étroit, un libellé peut passer sur 2 lignes
     plutôt que de dépasser. */
  .btn { white-space: normal; text-align: center; }

  /* --- Héros --- */
  .hero { padding: 40px 0 52px; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 38px); margin-top: 18px; line-height: 1.08; }
  .hero__lead { font-size: 16.5px; margin-top: 16px; }
  .hero__actions { margin-top: 24px; }
  /* Les 4 chiffres se rangent en 2 × 2 au lieu d'un flux irrégulier. */
  .hero__meta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px; margin-top: 24px; padding-top: 20px; font-size: 13px;
  }
  .hero__meta b { font-size: 21px; }

  /* --- Maquette du logiciel --- */
  /* Le téléphone compagnon (168 px, incliné) mange la moitié d'une maquette
     de 340 px : on le retire dès 600 px (style.css : 560) et on rend l'espace
     réservé à droite de la liste de tests. */
  .phone { display: none; }
  .mock__tests { padding-right: 12px; }
  .mock { border-radius: 16px; min-height: 0; }
  .mock__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mcard--wide { grid-column: span 2; }
  .mcard--ring { grid-row: auto; grid-column: span 2; }
  /* IMEI : 18 caractères mono dans une colonne de ~125-145 px → on laisse
     couper aux espaces (« 35 178836 / 573955 1 »). */
  .mcard__v.mono { white-space: normal; font-size: 11px; }
  .mock__head { flex-wrap: wrap; }

  /* --- Galerie de captures : onglets défilables horizontalement --- */
  .shots__tabs {
    display: flex; flex-wrap: nowrap; width: 100%; max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding-inline: 6px;
    scrollbar-width: none;
  }
  .shots__tabs::-webkit-scrollbar { display: none; }
  .shots__tabs button { flex: none; white-space: nowrap; scroll-snap-align: start; min-height: 44px; padding: 0 14px; font-size: 13.5px; }
  /* Le contour de focus ne doit pas être rogné par l'overflow du conteneur
     (padding 6 px) : on le ramène à l'intérieur du bouton. */
  .shots__tabs button:focus-visible { outline-offset: -3px; }
  .shots__frame { margin-top: 14px; border-radius: 14px; }
  .shots__caption { margin-top: 12px; font-size: 14.5px; }

  /* --- Grilles --- */
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .grid { gap: 14px; }
  .access { gap: 12px; }
  .tests { gap: 8px; }
  .test { padding: 12px; gap: 10px; }
  .legend { gap: 8px 14px; font-size: 13px; }
  .plans { grid-template-columns: 1fr; }
  .dl { gap: 14px; }

  /* --- Blocs --- */
  .card { padding: 22px 20px; }
  .step { padding: 20px 18px 18px; }
  .access__step { padding: 22px 18px 20px; }
  .panel { padding: 16px; }
  .kv { gap: 6px 12px; padding: 8px 0; font-size: 13px; }
  .note { padding: 14px 16px; gap: 12px; font-size: 14px; }
  .faq details { padding: 2px 16px; border-radius: 14px; }
  .faq summary { padding: 12px 0; }
  .release__head b { font-size: 18px; }
  .release__history ul { gap: 6px 18px; }

  /* --- Formulaire (contact) --- */
  .field--row { grid-template-columns: 1fr; gap: 0; }
  .form { padding: 20px 18px; }
  .form h2 { font-size: 22px; }
  .field { margin-top: 14px; }
  .field textarea { min-height: 96px; }

  /* --- CTA final --- */
  .cta { border-radius: 20px; padding: 36px 22px; }
  .cta h2 { font-size: clamp(24px, 6.8vw, 28px); }
  .cta p { font-size: 15.5px; }

  /* --- Pied de page --- */
  .footer { padding: 32px 0 28px; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer__links { gap: 2px 16px; }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }

  /* --- Mentions légales (styles inline dans la page : on ne touche que
     l'espacement) --- */
  .legal h2 { font-size: 20px; margin-top: 32px; }

  /* --- 404 --- */
  .cta__actions { gap: 10px; }
}

/* ----------------------------------------------------------------------------
   5. ≤ 480 px — petits mobiles (iPhone SE/8/12 mini, Android compacts)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Barre : à 375 px, marque (≈133 px) + CTA (≈152 px) + burger (44) + gaps
     dépassaient le conteneur de ~18 px. On resserre tout de 8-10 px. */
  .nav__inner { gap: 10px; }
  .brand { gap: 8px; font-size: 18px; }
  .brand img { width: 32px; height: 32px; }
  .nav__cta { gap: 6px; }
  .nav__cta .btn { padding: 0 11px; font-size: 13px; min-height: 44px; }

  /* Héros : boutons pleine largeur, pastille « Nouveau » qui peut passer
     sur deux lignes sans casser la forme. */
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__actions .btn { width: 100%; }
  .hero__pill {
    max-width: 100%; white-space: normal; font-size: 12px; line-height: 1.3;
    padding: 6px 12px 6px 8px; border-radius: 16px; align-items: flex-start;
  }
  .hero__pill b { flex: none; margin-top: 1px; }
  .hero h1 { margin-top: 16px; }

  /* Maquette : marges internes réduites, titre un cran plus petit. */
  .mock { grid-template-columns: 44px 1fr; font-size: 11px; }
  .mock__main { padding: 12px; gap: 10px; }
  .mock__title { font-size: 17px; }
  .mcard { padding: 9px 10px; }
  .mock__grade { display: none; }

  /* Typo */
  .h2 { font-size: clamp(25px, 7vw, 28px); }
  .lead { font-size: 16px; }
  .card h3 { font-size: 18px; margin-top: 12px; }
  .card { padding: 20px 18px; }
  .dl__card { padding: 20px 18px; }
  .dl__card h3 { font-size: 19px; }

  /* CTA : boutons empilés pleine largeur. */
  .cta { padding: 32px 18px; }
  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; }

  /* Formulaire */
  .form { padding: 18px 16px; }
  .form .btn[type='submit'] { width: 100%; }

  /* Tarifs */
  .plan { padding: 22px 18px; }
  .plan__price b { font-size: 34px; }
  .tokens { padding: 22px 18px; }
  .tokens h3 { font-size: 22px; }

  /* Galerie : légende sous l'icône si nécessaire (reste lisible). */
  .shots__caption .icon { width: 32px; height: 32px; }
}

/* ----------------------------------------------------------------------------
   6. ≤ 380 px — très petits écrans (iPhone SE 1re gén., Galaxy S compact 360)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .brand { font-size: 17px; }
  .nav__cta .btn { padding: 0 9px; font-size: 12.5px; }

  .hero h1 { font-size: 30px; }
  .hero__lead { font-size: 16px; }
  .hero__meta { gap: 12px 14px; }
  .hero__meta b { font-size: 20px; }

  .mock__title { font-size: 16px; }
  .mock__sub { font-size: 10.5px; }
  .chip { font-size: 10px; padding: 2px 7px; }

  .shots__tabs button { padding: 0 12px; font-size: 13px; }

  .h2 { font-size: 24px; }
  .test { font-size: 13.5px; }
  .test small { font-size: 11.5px; }
  .tokens__packs { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
}

/* Sous 340 px (rare) le CTA de la barre ne tient plus à côté de la marque et
   du burger : le lien « Contact » du menu reste accessible. */
@media (max-width: 340px) {
  .nav__cta .btn--primary { display: none; }
}

/* [orchestration] CTA de la nav sur une seule ligne aux petites largeurs */
@media (max-width: 480px) {
  .nav__cta .btn--primary { white-space: nowrap; font-size: 13px; padding-inline: 12px; }
}
@media (max-width: 360px) {
  .nav__cta .btn--primary { font-size: 12.5px; padding-inline: 10px; }
}

/* ----------------------------------------------------------------------------
   Menu mobile embelli (≤ 860 px) : panneau sous la barre, voile sur la page,
   grands liens avec flèche, page active marquée, boutons d'action en bas.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: ''; position: fixed; inset: var(--nav-h) 0 0; z-index: 40;
    background: rgb(6 10 20 / 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: navFade 0.25s ease both;
  }
  .nav { z-index: 50; }
  .nav__links {
    display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
    gap: 6px; padding: 14px var(--gutter) calc(20px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #0f1729 0%, var(--ink) 100%);
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7);
  }
  .nav.is-open .nav__links {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .nav__links a:not(.btn) {
    justify-content: space-between; min-height: 54px; padding: 12px 16px;
    font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #dfe4ee;
    border-radius: 14px; background: rgb(255 255 255 / 0.035); border: 1px solid rgb(255 255 255 / 0.06);
  }
  .nav__links a:not(.btn)::after {
    content: ''; width: 8px; height: 8px; flex: none; margin-left: 12px;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
    opacity: 0.45; transition: opacity 0.15s, transform 0.15s;
  }
  .nav__links a:not(.btn):hover { background: rgb(255 255 255 / 0.07); color: #fff; }
  .nav__links a:not(.btn):hover::after { opacity: 0.9; transform: translateX(2px) rotate(45deg); }
  .nav__links a[aria-current='page'] {
    color: #fff; background: rgb(79 70 229 / 0.2); border-color: rgb(129 140 248 / 0.45); box-shadow: none;
  }
  .nav__links a[aria-current='page']::after { opacity: 0.9; color: #a5b4fc; }
  /* Entrée en cascade des liens */
  .nav__links > li { opacity: 0; transform: translateY(-4px); transition: opacity 0.25s ease, transform 0.3s ease; }
  .nav.is-open .nav__links > li { opacity: 1; transform: none; }
  .nav.is-open .nav__links > li:nth-child(2) { transition-delay: 40ms; }
  .nav.is-open .nav__links > li:nth-child(3) { transition-delay: 80ms; }
  .nav.is-open .nav__links > li:nth-child(4) { transition-delay: 120ms; }
  .nav.is-open .nav__links > li:nth-child(5) { transition-delay: 160ms; }
  /* Boutons d'action en bas du panneau */
  .nav__menu-cta {
    display: grid; gap: 10px; margin-top: 10px; padding-top: 16px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
  }
  .nav__menu-cta .btn { width: 100%; }
}
@keyframes navFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .nav__links, .nav__links > li, .burger > span { transition: none !important; }
  body.nav-open::after { animation: none; }
}
@media (max-width: 860px) {
  .nav__menu-cta .btn--primary, .nav__menu-cta .btn--primary:hover { color: #fff; }
  .nav__menu-cta .btn--ghost { color: #eef1f7; }
  /* Menu ouvert : le CTA de la barre ferait doublon avec celui du panneau. */
  .nav.is-open .nav__cta > .btn { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
}

/* ============================================================================
   Maquette du héros — mise en page finale (chargée en dernier)
   - le téléphone ne recouvre plus que la liste des tests ;
   - carte batterie en colonne, centrée ; textes des cartes centrés verticalement ;
   - mobile : le téléphone animé s'affiche sous l'écran du logiciel.
   ========================================================================== */
.mcard { display: flex; flex-direction: column; justify-content: center; }
.mcard--ring {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 12px 10px;
}
.mcard--ring .ring { flex: none; }
.mcard--ring .mcard__v { font-size: 13.5px; white-space: normal; }
.mcard--ring .mcard__s { white-space: normal; overflow: visible; text-overflow: clip; }
.mcard__v, .mcard__s, .mcard__k { overflow-wrap: anywhere; }

.phone { width: 132px; right: -24px; bottom: -112px; border-radius: 22px; padding: 7px; z-index: 2; }
.phone::before { top: 12px; width: 38px; margin-left: -19px; }
.phone__screen { border-radius: 16px; }
.mock__tests { padding-right: 112px; }
.mock__tlist li { white-space: nowrap; min-width: 0; }
.mock__tlist li > * { flex: none; }
.mock__tlist li.run strong, .mock__tlist li.fail strong { max-width: 100%; }
.mock { overflow: visible; }
.mock__rail { border-radius: 18px 0 0 18px; }
.mock__main { border-radius: 0 18px 18px 0; min-width: 0; }

@media (max-width: 1260px) and (min-width: 1025px) {
  .phone { right: -2px; }
}
@media (max-width: 1024px) {
  .phone { right: -12px; }
  .hero__visual { margin-bottom: 96px; }
}
@media (min-width: 1025px) {
  .hero { padding-bottom: clamp(120px, 11vw, 150px); }
}

@media (max-width: 600px) {
  .mock { overflow: hidden; }
  .mock__rail { grid-row: 1 / span 2; border-radius: 0; }
  .mock__main { border-radius: 0; }
  .mock__tests { padding-right: 12px; }
  .mock__tlist li { white-space: normal; }
  .phone {
    display: block; position: relative; right: auto; bottom: auto;
    grid-column: 2; grid-row: 2; justify-self: center;
    width: 176px; margin: 4px 0 18px; transform: rotate(-3deg);
  }
  .phone__bar { font-size: 11px; }
  .phone__title { font-size: 13px; }
  .phone__hint { font-size: 10px; }
}

/* Écran « Test réussi » opaque : rien du test en cours ne transparaît. */
.phone__ok { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.phone__ok.show ~ * .finger, .phone__body:has(.phone__ok.show) .finger { animation: none; }