/* ============================================================
   louelafête — Ergonomie mobile « 3a »
   Ce que la maquette 3a a validé, écrit dans le vrai site :
     1. un seul verbe d'action partout : « Vérifier ma date »,
        l'appel devient un rond de 48 px ;
     2. les garanties passent en ruban de pastilles nuit
        (la bande parchemin de 4 cartes libère un écran entier) ;
     3. les packs deviennent un carrousel de cartes 264 × 330
        avec « Réserver » dans la carte ;
     4. la barre du bas affiche la sélection en cours (date · pack · prix).
   À charger APRÈS style.css, apple-theme.css et mobile-p1 → p3.
   Tout est sous 640 px : l'ordinateur n'est pas touché.
   ============================================================ */

/* Le rond d'appel du hero et l'icône de la barre du bas n'existent
   que sur mobile : sur ordinateur ils restent hors écran. */
.hero__appel { display: none; }
.cta-mobile__ico { display: none; }
/* L'onglet de réouverture n'existe que sur mobile, une fois la barre réduite. */
.cta-mobile__rouvrir { display: none; }

@media (max-width: 640px) {

  /* ── 3a.1 — Hero : une seule action dominante + le rond d'appel ──
     « Voir les packs » disparaît : le client les voit en défilant,
     et deux boutons de même poids ne décident de rien. */
  .hero__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .hero__actions .btn--primary {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  .hero__actions .btn--ghost { display: none; }

  .hero__appel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    text-decoration: none;
  }
  .hero__appel svg { width: 22px; height: 22px; }

  /* Les trois coches du hero sont redites juste dessous en pastilles :
     on ne les affiche qu'une fois. */
  .hero__trust { display: none; }

  /* ── 3a.2 — Les garanties en ruban de pastilles sur fond nuit ──
     Même promesse, une ligne au lieu de quatre cartes empilées.
     Le fond sombre enchaîne le hero sans séparateur, comme le veut
     le principe « la couleur de fond est le séparateur ». */
  .confiance {
    background: #232135;
    padding: 0;
  }
  .confiance__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 14px 20px;
    margin: 0;
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .confiance__inner::-webkit-scrollbar { display: none; }

  .confiance__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 9999px;
    box-shadow: none;
  }
  .confiance__ico { display: none; }
  .confiance__txt {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
  }
  /* La pastille ne garde que la promesse ; le détail (secteur, conditions)
     est déjà dit ailleurs — FAQ et carte caution. */
  .confiance__txt span { display: none; }
  .confiance__txt strong {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.1px;
    color: #fff;
  }
  .confiance__txt strong::before { content: "✓ "; }

  /* ── 3a.3 — Packs : carrousel de cartes 264 × 330 ──
     Au doigt, une carte et demie visible dit « ça continue à droite »
     mieux que n'importe quelle flèche. */
  .packs__grid {
    display: flex;
    grid-template-columns: none;
    /* style.css met `flex-wrap: wrap` pour centrer la dernière ligne en
       ordinateur. Sans cette annulation, les cartes de 264 px ne tiennent
       pas à deux sur 342 px : elles s'empilent au lieu de défiler. */
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    padding: 6px 20px 14px;
    margin: 0 -20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .packs__grid::-webkit-scrollbar { display: none; }

  .packs__grid .pack--photo {
    flex: 0 0 264px;
    width: 264px;
    height: 330px;
    min-height: 0;
    scroll-snap-align: center;
    border-radius: 18px;
    overflow: hidden;
  }
  .packs__grid .pack--photo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pack--photo__legende {
    padding: 56px 16px 16px;
    background: linear-gradient(to top, rgba(35,33,53,.95) 0%, rgba(35,33,53,.7) 45%, rgba(35,33,53,0) 100%);
  }
  .pack--photo__legende .pack__name { font-size: 23px; line-height: 1.1; margin: 0 0 4px; }
  /* Sur 264 px de large, la baseline en plus fait déborder la légende :
     la capacité suffit à situer le pack. */
  .pack--photo__tag { display: none; }
  .pack--photo__capacite { font-size: 13px; margin: 0 0 10px; }

  /* Le prix et « Réserver » sur la même ligne : le geste est dans la carte,
     plus besoin de remonter au formulaire pour comprendre quoi faire. */
  .pack--photo__legende .pack--photo__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 24px;
    line-height: 1;
    margin: 0;
  }
  .pack--photo__legende .pack--photo__price::after {
    content: "Réserver";
    flex: 0 0 auto;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    padding: 11px 17px;
    border-radius: 9999px;
  }
  .pack--featured .pack--photo__legende .pack--photo__price::after {
    background: #5b54c9;
    border-color: #5b54c9;
  }

  /* ── 3a.3 bis — Réserver : packs et appareils en lignes qui défilent ──
     Sur mobile, la grille empilait les cartes sur de nombreuses rangées et
     rendait le tunnel interminable. Chaque groupe (Nos packs / À la pièce)
     passe en UNE ligne horizontale qui défile ; une carte et demie visible
     indique qu'il y en a d'autres à droite. */
  .reserver__cartes-grille {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 2px 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .reserver__cartes-grille::-webkit-scrollbar { display: none; }
  /* Cartes plus étroites : deux tiennent en entier + une 3e qui déborde
     franchement du bord → l'œil comprend tout de suite « ça défile ». */
  .reserver__cartes-grille > .resa-carte-slot {
    flex: 0 0 132px;
    width: 132px;
    scroll-snap-align: start;
  }
  /* Sans min-width:0, la colonne s'élargit à la somme des cartes (nowrap)
     et déborde l'écran au lieu de laisser le rail défiler. */
  .reserver__droite,
  .reserver__cartes,
  .reserver__cartes-groupe { min-width: 0; }

  /* ── 3a.4 — Barre du bas : sélection en cours + une action + le rond ──
     Le libellé reprend celui du hero : un seul verbe sur toute la page. */
  .cta-mobile {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border: 1px solid #e5e2db;
    border-radius: 24px;
    box-shadow: 0 6px 24px rgba(35,33,53,.16);
    padding: 10px 12px;
  }
  /* Le résumé est un bouton : un tap déplie le détail de la sélection. */
  .cta-mobile__resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 2px 6px 8px;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
  }
  .cta-mobile__resume-txtwrap { min-width: 0; }
  .cta-mobile__resume-chev {
    flex: 0 0 auto;
    display: inline-flex;
    color: #6a6880;
    transition: transform .2s ease;
  }
  .cta-mobile__resume-chev svg { width: 18px; height: 18px; }
  .cta-mobile__resume[aria-expanded="true"] .cta-mobile__resume-chev {
    transform: rotate(180deg);
  }

  /* Panneau dépliable : les lignes date / pack / prix, avec « Modifier ». */
  .cta-mobile__panneau {
    display: block;
    padding: 4px 6px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid #ece9e2;
  }
  .cta-mobile__panneau[hidden] { display: none; }
  .cta-mobile__ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-top: 1px solid #f1eee8;
  }
  .cta-mobile__ligne:first-child { border-top: 0; }
  .cta-mobile__ligne-lbl {
    flex: 0 0 40px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6a6880;
  }
  .cta-mobile__ligne-val {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #232135;
  }
  .cta-mobile__ligne-lien {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #5b54c9;
    text-decoration: none;
  }
  .cta-mobile__ligne--prix .cta-mobile__ligne-val { color: #5b54c9; font-weight: 700; }
  .cta-mobile__resume-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6a6880;
    margin: 0 0 2px;
  }
  .cta-mobile__resume-txt {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #232135;
  }
  .cta-mobile__resume-prix {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: #5b54c9;
    margin: 0;
  }
  .cta-mobile__actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cta-mobile__actions .cta-mobile__btn--primary { flex: 1; }
  /* La croix « ranger » remplace l'ancien rond d'appel : même gabarit,
     ton plus discret car ce n'est pas l'action principale. */
  .cta-mobile__fermer {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    min-width: 0;
    padding: 0;
    border-radius: 9999px;
    background: #f6f4f0;
    border: 1px solid #e0e0e0;
    color: #6a6880;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Barre réduite : elle disparaît et se range en onglet sur le bord droit. */
  .cta-mobile.cta-mobile--reduit { display: none; }
  .cta-mobile__rouvrir:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 0;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 400;
    padding: 11px 15px 11px 13px;
    background: #5b54c9;
    color: #fff;
    border: none;
    border-radius: 0 9999px 9999px 0;
    box-shadow: 0 6px 20px rgba(35,33,53,.24);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.2px;
  }
  .cta-mobile__rouvrir svg { width: 20px; height: 20px; flex: none; }
  .cta-mobile__rouvrir:active { transform: scale(.96); }
  /* Le mot « Appeler » reste dans le HTML pour les lecteurs d'écran,
     l'icône seule parle assez sur 48 px. */
  .cta-mobile__btn--call .cta-mobile__lbl {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cta-mobile__ico { display: block; width: 21px; height: 21px; }

  /* La barre porte maintenant une ligne de rappel : elle est plus haute,
     donc on rend au bas de page la place qu'elle prend. */
  body { padding-bottom: calc(122px + env(safe-area-inset-bottom, 0px)); }
}