/* =========================================================
   Réservation sur téléphone et navigation sur ordinateur.
   Chargé après les styles de chaque page : il ne modifie que
   les éléments listés ici.
   ========================================================= */

/* Focus visible au clavier (accessibilité) */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brass-600);outline-offset:3px;}

/* ----- Ordinateur : liens de navigation visibles dans l'en-tête ----- */
@media(min-width:980px){
  .site-header .menu-toggle{display:none;}
  .site-header .site-menu{
    position:static;display:flex;flex-direction:row;align-items:center;gap:28px;
    width:auto;padding:0;background:none;border:0;box-shadow:none;
    grid-column:1;grid-row:1;justify-self:start;align-self:start;
    margin-top:calc(var(--logo-h)*0.69 - 12px);
  }
  .site-header .site-menu a{padding:0;background:none;font-size:.95rem;line-height:1.6;}
  .site-header .site-menu a:hover{background:none;color:var(--brass-600);}
}

/* ----- Accueil : preuves rapides sous le bouton principal ----- */
.hero-proof{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:.9rem;color:var(--walnut-700);}
.hero-proof li + li::before{content:'·';margin:0 10px;color:var(--brass-600);font-weight:700;}
.hero-proof .hero-stars{color:var(--brass-500);letter-spacing:1px;}
@media(min-width:641px){.hero-photo img{height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%;}}
/* Ordinateur : la photo des amis déborde un peu vers la gauche, pour gagner en taille sans réduire le texte */
@media(min-width:861px){.hero-photo-wrap{max-width:none;width:calc(100% + 24px);margin-left:-24px;}}

/* ----- Formules : la formule recommandée se distingue par son bouton ----- */
.price-card.featured .tier-cta{background:var(--walnut-950);color:var(--paper);border-color:var(--walnut-950);}
.price-card.featured .tier-cta:hover{background:var(--brass-600);border-color:var(--brass-600);}

/* ----- Réservation : les 3 étapes ----- */
.booking-steps{list-style:none;counter-reset:etape;margin:22px 0 0;padding:0;display:grid;gap:14px;}
.booking-steps li{counter-increment:etape;position:relative;padding-left:46px;font-size:.95rem;line-height:1.5;color:rgba(251,248,242,.8);}
.booking-steps li::before{
  content:counter(etape);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  background:var(--brass-500);color:var(--walnut-950);font-family:'Bitter',serif;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.booking-steps strong{display:block;color:var(--paper);font-weight:600;}

/* ----- Formulaire : code promo replié par défaut ----- */
.promo-details{margin:0 0 18px;}
.promo-details > summary{display:inline-block;padding:6px 0;cursor:pointer;list-style:none;font-size:.9rem;font-weight:500;color:var(--walnut-700);text-decoration:underline;text-underline-offset:3px;}
.promo-details > summary::-webkit-details-marker{display:none;}
.promo-details[open] > summary{margin-bottom:10px;}
.form-card .promo-details .promo-code-field{margin-bottom:0;}

/* ----- Formulaire : rassurance sous le bouton d'envoi ----- */
.form-reassure{margin:10px 0 0;text-align:center;font-size:.8rem;line-height:1.45;color:var(--walnut-500);}

/* ----- Téléphone ----- */
@media(max-width:640px){
  /* Preuves : sans séparateur, pour qu'aucune ligne ne commence par « · » */
  .hero-proof{gap:6px 16px;}
  .hero-proof li + li::before{content:none;}

  /* Accueil : pas de second bouton « Réserver » sur téléphone, la barre du bas s'en charge */
  .hero-mini-link{display:none;}

  /* Pourquoi : icône à gauche, texte à droite, pour gagner de la hauteur */
  .why-grid .why-item{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px;}
  .why-grid .why-item > .why-icon{grid-column:1;grid-row:1 / span 2;width:28px;height:28px;margin:2px 0 0;}
  .why-grid .why-item > h3{grid-column:2;grid-row:1;margin:0 0 4px;}
  .why-grid .why-item > p{grid-column:2;grid-row:2;}
}

/* Barre d'actions fixe en bas de l'écran : appeler ou réserver en un geste */
.mobile-action-bar{display:none;}
@media(max-width:640px){
  body.has-action-bar{padding-bottom:84px;}
  .mobile-action-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    display:grid;grid-template-columns:1fr 1.7fr;gap:10px;
    padding:10px 14px 12px;
    background:rgba(251,248,242,.97);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1px solid rgba(74,46,26,.14);
    box-shadow:0 -8px 22px rgba(36,22,13,.08);
    transition:transform .25s ease;
  }
  .mobile-action-bar.is-hidden{transform:translateY(110%);}
  .mobile-action-bar a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:50px;border-radius:12px;text-decoration:none;
    font-family:'Work Sans',sans-serif;font-size:.95rem;font-weight:600;
  }
  .mobile-action-bar svg{width:18px;height:18px;flex-shrink:0;}
  .mab-call{border:1.5px solid var(--walnut-950);color:var(--walnut-950);background:transparent;}
  .mab-book{background:var(--walnut-950);color:var(--paper);}
  .mobile-action-bar a:active{transform:scale(.98);}
}

/* ----- Photos du photobooth, intégrées aux sections ----- */
.photo-frame{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(36,22,13,.10);background:#fffdf9;}
.photo-frame img{display:block;width:100%;height:auto;}

/* Accueil : photo du photobooth seul, centrée sous « 5,0 sur Google » */
.hero-booth{width:400px;margin:24px auto 0;}
.hero-booth img{aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;}
@media(max-width:640px){.hero-booth{width:260px;margin:16px auto 0;}}
@media(min-width:861px){.hero-pb-mobile{display:none;}}

/* Pourquoi à gauche, photo du PB seul à droite : sur ordinateur */
.why-pb{display:none;}
@media(min-width:861px){
  .why-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;}
  .why-main .why-grid{grid-template-columns:1fr;gap:16px;margin-top:26px;}
  .why-main .why-item{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:18px;align-items:start;padding:20px 22px;}
  .why-main .why-item > .why-icon{grid-column:1;grid-row:1 / span 2;margin:2px 0 0;}
  .why-main .why-item > h3{grid-column:2;grid-row:1;margin:0 0 6px;}
  .why-main .why-item > p{grid-column:2;grid-row:2;margin:0;}
  .why-pb{display:block;}
  .why-pb-fig img{aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;}
}

/* Accueil : lien « Voir plus de photos » sous la photo, qui ouvre la galerie */
.photos-more{display:block;width:max-content;max-width:100%;margin:12px auto 0;font-size:.95rem;font-weight:600;color:var(--walnut-950);text-decoration:underline;text-decoration-color:var(--brass-500);text-decoration-thickness:2px;text-underline-offset:4px;}
.photos-more:hover{color:var(--brass-600);}

/* Galerie : fenêtre qui s’ouvre par-dessus la page */
.photo-dialog{width:min(920px,calc(100% - 32px));max-height:calc(100vh - 32px);overflow:auto;margin:auto;padding:0;border:0;border-radius:16px;background:#fffdf9;color:var(--walnut-950);box-shadow:0 24px 60px rgba(36,22,13,.35);}
.photo-dialog::backdrop{background:rgba(36,22,13,.6);}
.pd-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px 12px 24px;background:#fffdf9;border-bottom:1px solid rgba(74,46,26,.1);}
.pd-close{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(74,46,26,.25);background:transparent;color:var(--walnut-950);font-size:1.5rem;line-height:1;cursor:pointer;}
.pd-close:hover{background:#f1e6d6;}
.pd-grid{columns:220px;column-gap:12px;padding:16px 20px 20px;}
.pd-grid figure{margin:0 0 12px;break-inside:avoid;border-radius:12px;overflow:hidden;background:#f7f2e9;}
.pd-grid img{display:block;width:100%;height:auto;}
@media(max-width:640px){
  .pd-grid{columns:2;column-gap:8px;padding:12px 14px 16px;}
  .pd-grid figure{margin-bottom:8px;border-radius:10px;}
}

/* Conseils : photo à côté du titre, sur ordinateur */
.advice-split .advice-photo{display:none;}
@media(min-width:861px){
  .advice-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;margin-bottom:30px;}
  .advice-split .advice-heading{max-width:none;margin:0;text-align:left;}
  .advice-split .advice-photo{display:block;}
  .advice-split .advice-photo img{aspect-ratio:4/3;object-fit:cover;object-position:50% 35%;}
}