/* ==========================================================
   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 / mobile : infos pratiques deux par deux --- */
@media (max-width: 960px) {
    .facts__grid {
        grid-template-columns: repeat(2, 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 {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .journey__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .bc-facts__grid {
        grid-template-columns: 1fr;
    }

    /* Les photos d'étape ne sont pas dans cette liste : elles gardent leurs deux
       colonnes même sur un petit téléphone, une par une elles feraient quatre
       écrans de défilement pour une seule étape. */
    .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,
    .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,
    .gc-howto,
    /* 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;
    }
    /* Entre les bannières « box / lange » et « Trois étapes », les deux
       retraits s'additionnaient encore trop sur téléphone. */
    .gc-formules {
        padding-bottom: 8px;
    }
    .gc-howto {
        padding-top: 10px;
    }
    /* Après « En pratique », l'ancre calendrier est vide : on coupe le bas
       de la grille pour coller au pied de page sans bande crème inutile. */
    .facts:has(+ .resa-section > .resa > #resaCalendrier:only-child) {
        padding-bottom: 8px;
    }
    .resa-section:has(> .resa > #resaCalendrier:only-child) {
        padding-top: 0;
        padding-bottom: 0;
    }
    /* À propos : le bandeau se termine par le cœur, puis le récit doit
       reprendre sans le vide du grand écran. */
    .why {
        padding-top: 14px;
        padding-bottom: 8px;
    }
    .vision {
        padding-top: 8px;
    }
    .atelier-hero__text {
        padding-bottom: 16px;
    }
    .atelier-hero__heart {
        margin-top: 12px;
    }
    /* « 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;
    }
    /* Un dernier paragraphe n'a plus rien à séparer : sa marge du bas s'ajoute
       au retrait de son bloc, et l'intervalle est compté deux fois. C'est ce qui
       ajoutait 14 px sous le portrait d'« À propos », avant « Ma vision ». */
    p:last-child {
        margin-bottom: 0;
    }
    /* Bloc contact : la pastille de 46 px et son écart mangeaient 62 px des
       350 px disponibles, et rien ne distinguait un numéro appelable d'un
       simple texte. */
    .contact__row {
        gap: 12px;
        padding: 13px 0;
        align-items: flex-start;
    }
    .contact__row > i {
        width: 36px;
        height: 36px;
        font-size: .85rem;
        margin-top: 3px;
        box-shadow: 0 4px 10px rgba(156, 175, 143, .32);
    }
    .contact__rlabel {
        letter-spacing: 1.4px;
        margin-bottom: 2px;
    }
    .contact__rval {
        font-size: .98rem;
        line-height: 1.4;
    }
    .contact__rval a {
        color: var(--sage-dark);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    /* Au doigt, une invitation à cliquer doit se toucher : le lien en italique
       n'offrait que la hauteur de sa ligne. */
    .contact__rval a.contact__maps {
        display: inline-flex;
        align-items: center;
        margin-top: 10px;
        padding: 10px 18px;
        border: 1px solid var(--sage);
        border-radius: 999px;
        font-size: 1rem;
        text-decoration: none;
    }
    /* Les preuves et les témoignages additionnaient leurs retraits, 52 px de
       crème entre la dernière carte et « Témoignages ». */
    .preuves {
        padding-bottom: 14px;
    }
    .reviews {
        padding-top: 10px;
    }
    /* L'intertitre en italique n'a pas d'interligne propre : il héritait du 1,75
       du corps de texte, ce qui creusait au-dessus et en dessous. */
    .eyebrow {
        line-height: 1.25;
    }
    /* Sur « Ateliers », la brindille qui ferme le bandeau de haut de page et
       celle qui ouvre « Deux formules » sont éloignées par la mise en page en
       deux colonnes du grand écran. Empilées, elles se suivent à 32 px : le même
       motif deux fois. On garde celle qui accompagne le titre. */
    body:has(.ateliers-deco) .atelier-hero__heart {
        display: none;
    }

    /* Les grands titres héritaient du line-height 1.75 du corps : sur deux ou
       trois lignes, l'interligne devenait un trou. On le ramène au rythme d'un
       titre, partout. */
    .section-title,
    .section-head h2,
    .atelier-hero__title,
    .hero__title,
    .offre__nom,
    .formule__nom,
    .aparte__nom,
    .reserve-cta__title,
    .after__text h3,
    .step__aside h3,
    .contact__info h2,
    .legal h1,
    .thanks__title,
    .bc-elegant__title,
    .gc-formules__title,
    .vision__title,
    .resa__title {
        line-height: 1.2;
        /* Le retour à la ligne par défaut remplit la première ligne au maximum
           et laisse le dernier mot seul en dessous. */
        text-wrap: balance;
    }
}

/* --- 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;
    }
}

/* --- Les photos d'atelier : montrées, pas à faire glisser ---
   Au téléphone, les photos de chaque étape formaient un ruban horizontal à
   défilement, barre de défilement masquée. Rien ne disait qu'il fallait glisser :
   on voyait une photo entière et un morceau de la suivante, coupé net au bord de
   l'écran, ce qui se lit comme un défaut d'affichage plutôt que comme une
   invitation. Les vignettes n'avaient même pas toutes la même largeur : la base
   flex de 78 % portait sur l'image et non sur le <picture>, qui est en
   display:contents, et la taille minimale automatique de l'image l'emportait sur
   les deux premières — 322 px, 322 px, puis 251 px dans un même ruban.

   Le ruban a été retiré des trois pages d'atelier : chacune retrouve ainsi la
   grille qu'elle décrit déjà, trois colonnes sur tablette et deux au téléphone,
   pour à peu près la hauteur qu'occupait une seule photo du ruban. Ne restent
   ici que les deux cas où deux colonnes tombent mal. */
@media (max-width: 560px) {
    /* Trois photos et rien d'autre : la première prend la ligne entière et les
       deux suivantes se partagent celle du dessous, sinon une case reste vide.
       Elle passe en cadrage paysage pour ne pas occuper un écran à elle seule. */
    .step__media:has(> picture:nth-child(3):last-child) > picture:first-child > img,
    .step__media--trio:has(> picture:nth-child(3):last-child) > picture:first-child > img {
        grid-column: 1 / -1;
        aspect-ratio: 3 / 2;
    }
    /* Une phrase en italique dans une colonne de 150 px se lit à trois mots par
       ligne : la citation garde toute la largeur. */
    .step__quote {
        grid-column: 1 / -1;
    }
}

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