/* =========================================================================
   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 ===== */
/* Ces trois elements n existent que pour le menu mobile. Hors media query :
   laissee a l interieur, la regle ne s appliquait pas au-dessus de 1024 px
   et le logo apparaissait deux fois sur ordinateur. */
.nav__burger,
.navm,
.nav__logo-fixe { 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 {
    display: block;
    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. */
  .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) {
  .features__intro,
  .sce__card,
  .cta,
  .px-hero,
  .px-cta,
  .step {
    text-align: left;
  }
  .features__intro .eyebrow,
  .px-hero .eyebrow,
  .cta .eyebrow {
    justify-content: flex-start;
  }
  .features__intro .h2,
  .px-lede {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  .hero__ctas,
  .px-cta__btns,
  .cta__btns {
    align-items: stretch;
    flex-direction: column;
  }
  .hero__ctas .btn,
  .px-cta__btns .btn,
  .cta__btns .btn { justify-content: center; }

  /* Le hero fait exception : le titre est sous le logo, il reste centre. */
  .hero { text-align: center; }
  .hero .eyebrow, .hero__badges { justify-content: center; }
  .hero__ctas { justify-content: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
}

/* ============================================================== 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: center; }
  .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) {
  /* .rdv__borne n est pas un decor : c est le conteneur meme de la fenetre de
     prise de rendez-vous. Le masquer rendait le bouton « Demander une demo »
     sans effet visible sur telephone. */
  .features__visual,
  .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 fenetre de rendez-vous est un panneau lateral concu pour 620 px :
     sur telephone elle occupe tout l ecran, sans le cadre facon borne. */
  .rdv__borne {
    width: 100%;
    padding: 0;
  }
  .rdv__bezel { border-radius: 0; padding: 0; border: none; }
  .rdv__cam { display: none; }
  .rdv__screen { border-radius: 0; border: none; }
  .rdv__body { padding: 20px; }
  .rdv-step__title { font-size: 22px; line-height: 1.15; }
  .rdv-options { grid-template-columns: 1fr 1fr; }
  .rdv__grid { grid-template-columns: 1fr; }
  .rdv__prog-steps li span { font-size: 11px; }
}


/* ============================================== PAGE PRIX SUR TELEPHONE == */
@media (max-width: 720px) {
  .px-wrap { padding: 0 18px; }
  .px-hero { padding: calc(var(--nav-h) + 44px) 0 30px; }
  .px-h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .px-h2 { font-size: clamp(24px, 6.6vw, 32px); }

  .px-card { padding: 24px 20px; }
  .px-card__for { min-height: 0; }
  .px-card__price { font-size: 30px; }
  .px-card__cta { width: 100%; justify-content: center; padding: 12px 16px; }

  /* Le comparatif fait 780 px : on le laisse glisser, mais on le dit, et la
     premiere colonne reste visible pour savoir de quelle ligne il s agit. */
  .px-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -18px;
    padding: 0 18px;
  }
  .px-table { min-width: 660px; font-size: 12.5px; }
  .px-table thead th { padding: 12px 8px; font-size: 13px; }
  .px-table thead th span { font-size: 10.5px; }
  .px-table tbody tr:not(.px-grp__h) th,
  .px-table tbody td { padding: 10px 8px; }
  .px-table tbody tr:not(.px-grp__h) th,
  .px-table thead th:first-child {
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 1;
    /* Sans borne, l intitule prenait 272 px des 375 disponibles : il ne
       restait plus la place d afficher une seule colonne de formule. */
    white-space: normal;
    line-height: 1.3;
  }
  .px-table thead th:first-child { z-index: 3; }
  /* En largeur automatique le navigateur donnait 187 px a l intitule : avec
     une table a largeur fixe, chaque colonne recoit ce qu on lui alloue. */
  .px-table { table-layout: fixed; min-width: 622px; }
  .px-table tbody tr:not(.px-grp__h) th,
  .px-table thead th:first-child { width: 150px; }
  .px-table tbody td,
  .px-table thead th:not(:first-child) { width: 118px; }
  .px-grp__h th { padding: 20px 8px 6px; }
  .px-val { font-size: 11.5px; }

  .px-mods li { padding: 14px 16px; }
  .px-note { padding: 16px 18px; font-size: 12.5px; }
  .px-compare, .px-modules, .px-faq { padding-top: 54px; }
  .px-cta { padding: 60px 0 70px; }
}


/* ================================== FENETRE DE RENDEZ-VOUS : INTERRUPTEUR = */
/* Repondre « pas de borne » etait impossible : il fallait choisir une
   quantite. Un interrupteur permet le non. */
.rdv-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--bg-soft);
  cursor: pointer;
}
.rdv-switch__txt strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.rdv-switch__txt small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--mute);
}
.rdv-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.rdv-switch__ui {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 27px;
  border-radius: var(--r-pill);
  background: var(--line-2);
  transition: background 0.18s ease;
}
.rdv-switch__ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-s);
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rdv-switch input:checked + .rdv-switch__ui { background: var(--accent); }
.rdv-switch input:checked + .rdv-switch__ui::after { transform: translateX(19px); }
.rdv-switch input:focus-visible + .rdv-switch__ui {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ================================= FENETRE DE RENDEZ-VOUS : TELEPHONE ==== */
@media (max-width: 720px) {
  /* Telephone et code postal cote a cote tenaient sur 620 px, pas sur 375. */
  .rdv-row { grid-template-columns: 1fr; }
  /* Sous 16 px, iOS zoome la page des qu on touche un champ et on ne revient
     jamais en arriere. */
  .rdv-field input,
  .rdv-field select,
  .rdv-field textarea { font-size: 16px; }
  .rdv-check { align-items: flex-start; }
  .rdv-check span { font-size: 13px; line-height: 1.5; }
  .rdv-switch { padding: 12px 14px; }
  .rdv-switch__txt strong { font-size: 13.5px; }
  .rdv-options { grid-template-columns: 1fr 1fr; }
  .rdv-cal__grid button { font-size: 13px; }
  .rdv-slots { grid-template-columns: repeat(3, 1fr); }
}