/* =========================================================================
   PASSE MOBILE
   Chargee apres styles.css et prix.css : elle corrige, elle ne redefinit pas.
   Le site etait concu pour le bureau — sous 1024 px la navigation etait
   simplement masquee, et plusieurs blocs debordaient hors de l ecran sans
   possibilite de les atteindre (body est en overflow-x: hidden).
   ========================================================================= */

/* ====================================================== MENU MOBILE ===== */
.nav__burger { display: none; }

@media (max-width: 1024px) {
  /* Dans la barre : le logo, le theme, le burger. Le reste descend dedans. */
  .nav__cta .nav__plain,
  .nav__cta .btn--primary { display: none; }

  /* .nav__links portait le margin auto qui poussait les actions a droite ;
     masque, il laissait le burger au milieu de la barre. */
  .nav__inner { justify-content: space-between; }
  .nav__cta { margin-left: auto; }

  .nav__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--bg-card);
    cursor: pointer;
  }
  .nav__burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.15s ease;
  }
  .nav.is-menu-mobile .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.is-menu-mobile .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-menu-mobile .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .navm {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    height: calc(100dvh - var(--nav-h));
    z-index: 60;
    background: var(--bg);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  /* Le logo anime est en position fixed a z-index 45 alors que la nav forme
     un contexte d empilement a 40 : sans cela il se dessine par-dessus le
     menu. On remonte la nav, et on retire le logo tant que le menu est
     ouvert — il n a rien a y faire. */
  .nav.is-menu-mobile { background: var(--bg); z-index: 70; }
  .menu-mobile-ouvert .brand-anim { display: none; }
  /* Le logo de l accueil est un element anime, pas une image dans la barre :
     en le masquant, la nav se retrouvait sans logo. On lui substitue une image
     fixe, a sa place habituelle en haut a gauche. */
  .nav__logo-fixe { display: none; }
  .menu-mobile-ouvert .nav__logo-placeholder { display: none; }
  .menu-mobile-ouvert .nav__logo-fixe {
    display: block;
    width: 88px;
    height: auto;
  }
  .menu-mobile-ouvert .progress { display: none; }
  .nav.is-menu-mobile .navm {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
  .navm__inner { padding: 8px 20px 40px; }

  .navm__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    border: none;
    border-bottom: 1px solid var(--line);
    background: none;
    font: inherit;
    font-family: var(--f-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .navm__head svg { flex: 0 0 auto; transition: transform 0.2s ease; color: var(--mute); }
  .navm__grp.is-open .navm__head svg { transform: rotate(180deg); }

  .navm__body {
    display: none;
    padding: 6px 0 14px;
  }
  .navm__grp.is-open .navm__body { display: block; }

  .navm__link {
    display: block;
    padding: 11px 0;
    font-size: 15.5px;
    color: var(--ink-2);
    text-decoration: none;
  }
  .navm__link .nav__soon { margin-left: 8px; }

  .navm__pied { padding-top: 20px; }
  .navm__link--seul {
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
    font-size: 16px;
  }
  .navm__cta {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    width: 100%;
    padding: 15px 20px;
    font-size: 15px;
  }
}

/* ================================================ ALIGNEMENT A GAUCHE === */
/* Le centrage marche sur une colonne large ; sur 375 px il hache la lecture
   et fait sauter l oeil d une ligne a l autre. Tout passe a gauche. */
@media (max-width: 720px) {
  .hero,
  .features__intro,
  .sce__card,
  .cta,
  .px-hero,
  .px-cta,
  .step {
    text-align: left;
  }
  .hero .eyebrow,
  .features__intro .eyebrow,
  .px-hero .eyebrow,
  .cta .eyebrow {
    justify-content: flex-start;
  }
  .features__intro .h2,
  .px-lede,
  .hero__sub {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  .hero__ctas,
  .px-cta__btns,
  .cta__btns {
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
  }
  .hero__ctas .btn,
  .px-cta__btns .btn,
  .cta__btns .btn { justify-content: center; }
  .hero__badges { justify-content: flex-start; }
}

/* ============================================================== HERO ==== */
@media (max-width: 720px) {
  /* Le titre etait en nowrap a 41 px : la fin de ligne sortait de l ecran. */
  .hero__title,
  .hero__title-line,
  .hero__title-cycle-wrap { white-space: normal; }
  .hero__title {
    font-size: clamp(30px, 8.6vw, 40px);
    line-height: 1.06;
  }
  /* La ligne est une grille a deux colonnes : « pour votre » et le mot qui
     defile etaient soudes sur une meme ligne, sans possibilite de passer a la
     suivante. On les delie, et on reduit le mot pour que le plus long
     (« sandwicherie ») tienne toujours, meme sur un ecran de 320 px. */
  .hero__title-line--cycle { display: block; }
  .hero__title-static {
    justify-self: auto;
    display: inline;
    padding-right: 0.2em;
  }
  .hero__title-cycle-wrap {
    justify-self: auto;
    display: inline;
    white-space: nowrap;
  }
  .hero__cycle { font-size: 0.82em; }
  .hero__brand-slot { justify-content: flex-start; }
  .hero__sub { font-size: 15px; }
  .hero { padding-bottom: 40px; }
  .scroll-hint { display: none; }
}

/* ======================================= MAQUETTES : RIEN SUR TELEPHONE = */
/* Elles sont concues pour une colonne de 560 px et ne se manipulent pas au
   doigt. Reduites, elles ne montrent plus rien : autant les retirer. */
@media (max-width: 720px) {
  .features__visual,
  .rdv__borne,
  .kiosk-3d,
  .sumup3d { display: none; }
  .features__layout { grid-template-columns: 1fr; }
  .demo-note { display: none; }
}

/* ========================================================= CARTE SCE ==== */
@media (max-width: 720px) {
  .sce { padding: 50px 20px; }
  .sce__card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 20px 30px;
    border-radius: 20px;
    text-align: left;
  }
  /* Le sceau est purement decoratif et coutait 154 px de hauteur. La carte
     depassait l ecran, il finissait donc toujours tranche par le bas : plus
     brouillon qu absent. */
  .sce__left { display: none; }
  .sce__card .h2 {
    font-size: clamp(24px, 6.8vw, 30px);
    line-height: 1.12;
  }
  .sce__card > .sce__right > p { font-size: 14.5px; line-height: 1.6; }
  .sce__points { gap: 16px; }
  .sce__points li { text-align: left; }
  .sce__points strong { font-size: 14.5px; }
  .sce__points span,
  .sce__points p { font-size: 13px; line-height: 1.5; }
  /* La barre fixe recouvrait le haut de la carte a l arrivee sur l ancre. */
  .sce__card { scroll-margin-top: calc(var(--nav-h) + 14px); }
}

/* ================================================ AVIS ET FAQ LISIBLES == */
/* Les deux colonnes gardaient leur largeur intrinseque (min-width: auto sur
   un element de grille) : 674 px dans un conteneur de 335, donc coupes. */
@media (max-width: 1024px) {
  .social__layout > *,
  .features__layout > *,
  .footer__top > * { min-width: 0; }
  .social__testi,
  .social__faq { max-width: 100%; }
}
/* Le carrousel etait en overflow hidden : pilotable au clic sur les pastilles,
   mais impossible a faire glisser au doigt. */
@media (max-width: 1024px) {
  .testi__track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .testi__track::-webkit-scrollbar { display: none; }
}
@media (max-width: 720px) {
  .tcard { padding: 22px 20px; }
  .tcard blockquote { font-size: 15.5px; line-height: 1.55; }
  .faq-item__q { font-size: 15px; padding: 16px 0; }
  .faq-item__a p { font-size: 14.5px; line-height: 1.6; }
  .testi__dots { justify-content: flex-start; }
}

/* ============================================================ DIVERS ==== */
@media (max-width: 720px) {
  .cta__glow { display: none; }
  .footer__cols { grid-template-columns: 1fr; gap: 22px; }
  /* La modale de rendez-vous debordait de 394 px : plein ecran. */
  .rdv__box {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }
  .rdv__grid { grid-template-columns: 1fr; }
}