/* ==========================================================
   site-responsive.css
   Correctifs tablette / mobile UNIQUEMENT (media queries).
   Ne modifie pas le rendu desktop (≥961px).
   Chargé en dernier pour pouvoir affiner les styles inline des pages.
   ========================================================== */

/* --- Images WebP ---
   Chaque photo est enveloppée dans un <picture> pour proposer le WebP aux
   navigateurs qui le lisent. Cette enveloppe ajoute une boîte dans l'arbre :
   dans une grille ou un flex, c'est elle qui deviendrait l'élément mis en
   page, et l'image à l'intérieur perdrait son dimensionnement.
   « display: contents » efface la boîte sans toucher au contenu : l'image
   redevient l'élément que la grille positionne, exactement comme avant.
   Mais le <picture> ne contient pas que l'image : il contient aussi la
   <source> qui annonce le WebP. Sans boîte parente pour la masquer, cette
   <source> devient à son tour un élément de la grille et occupe une case
   entière, vide, devant chaque photo. On la masque explicitement.
   Hors média queries : la règle vaut à toutes les largeurs. --- */
picture {
    display: contents;
}
picture > source {
    display: none;
}

/* --- Cibles tactiles ---
   Les commandes du site sont dessinées à la taille du trait (le burger fait
   26 × 16 px, les pastilles sociales 42 px). Au doigt il faut viser ~44 px.
   On agrandit la zone cliquable sans toucher au dessin : le trait garde sa
   taille, c'est la boîte autour qui s'étend. --- */
@media (max-width: 960px) {
    .burger {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        /* Compense la boîte élargie pour garder l'alignement au bord. */
        margin-right: -9px;
    }
    .footer__social a {
        width: 44px;
        height: 44px;
    }
    .footer__legal a,
    .footer__bottom a,
    .legal__back,
    .contact__maps,
    .compris__photos,
    .contact__rval a,
    .filtre,
    .logo,
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
    /* Un lien court comme « CGV » doit aussi être assez large pour le pouce. */
    .footer__legal a,
    .footer__bottom a {
        min-width: 44px;
        padding: 0 6px;
    }
    /* Téléphone et e-mail : le libellé reste aligné à gauche du bloc. */
    .contact__rval a {
        justify-content: flex-start;
    }
}

/* --- Anti-débordement horizontal --- */
@media (max-width: 960px) {
    html {
        overflow-x: clip;
    }
    body {
        overflow-x: clip;
        max-width: 100%;
    }
    img,
    video,
    iframe,
    svg,
    embed,
    object {
        max-width: 100%;
        height: auto;
    }
    table {
        max-width: 100%;
    }
    pre,
    code {
        max-width: 100%;
        overflow-x: auto;
        word-break: break-word;
    }
    .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        box-sizing: border-box;
    }
}

/* --- Tablette : grilles denses --- */
@media (max-width: 960px) {
    .facts__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }
    .journey__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }
    .bc-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Mobile large / petit téléphone --- */
@media (max-width: 560px) {
    .facts__grid,
    .journey__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .bc-facts__grid {
        grid-template-columns: 1fr;
    }

    .step__media,
    .steps__media,
    .creations__grid,
    .valeur__grid,
    .formules,
    .aparte__grid {
        grid-template-columns: 1fr !important;
    }

    /* Textes longs : éviter les débordements */
    h1, h2, h3, .title, .hero__title, .section__title {
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }

    /* Boutons pleine largeur dans les piles d'actions hero */
    .atelier-hero__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .atelier-hero__actions .btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* --- Rythme vertical des petits écrans ---
   Les sections sont dessinées pour un grand écran : 42 px de retrait en bas,
   42 px en haut de la suivante, soit 84 px de vide entre deux blocs. Sur un
   téléphone, où tout est empilé et où l'on avance par petits coups de pouce,
   ces intervalles se lisent comme des pages blanches — les blocs paraissent
   sans lien entre eux. Le même rythme réduit de moitié, 42 px, les rapproche
   sans les coller. La liste est nommée bloc par bloc : les bandeaux de haut de
   page et les cartes gardent leurs propres retraits. --- */
@media (max-width: 767px) {
    .quatre,
    .process,
    .after,
    .facts,
    .other-ateliers,
    .why,
    .flow,
    .home,
    .reviews,
    .faq,
    .reserve-band,
    .wa-band,
    /* Les sections de « Offrir un souvenir » gardaient les 48 px du grand
       écran : le titre de chaque bloc arrivait 80 à 115 px après le texte
       précédent, soit un tiers d'écran de vide entre deux idées. */
    .bc-why,
    .bc-elegant,
    .gc-personas,
    .gc-formules,
    /* Ces quatre-là gardaient aussi leurs valeurs de grand écran, entre 36 et
       42 px : 60 à 80 px de blanc autour d'elles sur « À propos », « Ateliers »
       et le calendrier de réservation. */
    .vision,
    .valeur,
    .resa-section {
        padding-top: 22px;
        padding-bottom: 20px;
    }
    /* « Nos formules » commence collée au bandeau de haut de page sur la page
       Ateliers, et 56 px plus bas sur l'accueil : on ne touche qu'au bas, sinon
       la première creuserait un vide qu'elle n'a pas. */
    .choice {
        padding-bottom: 20px;
    }
    .passerelle {
        padding-bottom: 24px;
    }
    /* L'intertitre et son titre forment un seul bloc : 32 px les séparaient du
       contenu qu'ils annoncent, presque autant que du bloc précédent. Les
       en-têtes déjà marqués « tight » gardent leur propre valeur, plus serrée. */
    .section-head:not(.section-head--tight) {
        margin-bottom: 20px;
    }
}

/* --- Très petit mobile --- */
@media (max-width: 380px) {
    .ed-cta-bar {
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .ed-cta-bar__btn {
        font-size: .68rem;
        letter-spacing: .5px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .ed-cta-bar__btn--icon {
        min-width: 46px;
    }
}

/* --- Landscape mobile / tablette courte --- */
@media (max-height: 480px) and (orientation: landscape) {
    .ed-cta-bar {
        padding-top: 6px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
    .ed-cta-bar__btn {
        min-height: 40px;
    }
    .resa-modal__box,
    .resa-agenda__box,
    .gc-modal__box {
        max-height: 100dvh;
        overflow-y: auto;
    }
}

/* --- Consentement au-dessus de la barre CTA mobile --- */
@media (max-width: 767px) {
    body:has(.ed-cta-bar) .ed-consent {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

/* --- Modale bon cadeau : confort tactile --- */
@media (max-width: 600px) {
    .gc-modal__box {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        max-height: 100dvh;
    }
    .gc-amounts {
        grid-template-columns: 1fr;
    }
    #payment-element,
    .StripeElement {
        max-width: 100%;
        overflow: hidden;
    }
}

/* --- Galeries horizontales (swipe) : aligner le bleed sur le padding container --- */
@media (max-width: 767px) {
    .step__media,
    .step__media--trio {
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: none;
        width: auto;
        box-sizing: border-box;
    }
    .after__media--quatre {
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: none;
        width: auto;
        box-sizing: border-box;
    }
}

/* --- Galerie / filtres : pas de débordement du viewport --- */
@media (max-width: 960px) {
    .filters,
    .gallery__filters,
    .en-images__filters {
        max-width: 100%;
    }
}