/* ============================================================
   ACCUEIL — sections
   ============================================================ */

/* ══ Bandeau d'annonce ═══════════════════════════════════════
   Il annonce une fermeture exceptionnelle, un horaire modifié : une
   information qui prime sur tout le reste. Il se place donc AU-DESSUS
   du carrousel, pleine largeur, avec sa propre couleur.

   Il porte son icône et un liseré plus sombre en bas, pour qu'on ne
   le confonde pas avec la frise arc-en-ciel de la barre juste
   au-dessus. */
.annonce {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: .85rem clamp(1rem, .6rem + 2vw, 2rem);
    font-family: var(--titre);
    font-size: var(--t-md);
    font-weight: 600;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / .18);
}
.annonce i { font-size: 1.25rem; flex: none; }
.annonce--vert  { background: linear-gradient(180deg, #24A866, var(--dragon-600)); }
.annonce--rouge { background: linear-gradient(180deg, #E85C5C, #C63A3A); }
.annonce::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgb(0 0 0 / .18);
}

/* ══ Accroche pleine largeur ═════════════════════════════════
   Le carrousel N'EST PLUS une vignette à côté du texte : il occupe
   toute la largeur et le texte se pose dessus. Les photos du parc
   sont saturées de couleur — c'est elles qui doivent accueillir le
   visiteur, pas un aplat de fond.

   Le titre a été nettement réduit : en très grand, il écrasait la
   page et repoussait l'essentiel sous la ligne de flottaison. */
.accroche {
    position: relative;
    isolation: isolate;
    background: var(--encre-900);
    overflow: hidden;
}

.accroche__piste {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    height: clamp(26rem, 60svh, 40rem);
}
.accroche__piste::-webkit-scrollbar { display: none; }

.accroche__vue { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; }
.accroche__vue img { width: 100%; height: 100%; object-fit: cover; }

/* Voile dégradé : il assombrit le bas de la photo pour que le texte
   reste lisible quelle que soit l'image affichée — certaines sont
   claires, d'autres sombres. */
.accroche__voile {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgb(8 20 28 / .50) 0%,
            rgb(8 20 28 / .15) 28%,
            rgb(8 20 28 / .55) 68%,
            rgb(8 20 28 / .88) 100%);
}

.accroche__contenu {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding-bottom: clamp(1.75rem, 1rem + 3vw, 3rem);
    color: #fff;
}

.accroche__titre {
    font-size: var(--t-3xl);
    color: #fff;
    margin: 0 0 .5rem;
    max-width: 18ch;
    text-shadow: 0 2px 20px rgb(0 0 0 / .45);
}
.accroche__titre em {
    font-style: normal;
    color: var(--dragon-300);
}
.accroche__sous {
    font-size: var(--t-lg);
    color: rgb(255 255 255 / .92);
    margin: 0 0 1.5rem;
    max-width: 46ch;
    text-shadow: 0 1px 12px rgb(0 0 0 / .5);
}
.accroche__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── Pastille de localisation ─────────────────────────────── */
.accroche .chapeau {
    background: rgb(255 255 255 / .18);
    color: #fff;
    backdrop-filter: blur(8px);
}

/* ── Points du carrousel ──────────────────────────────────── */
.accroche__points {
    position: absolute;
    right: var(--gouttiere);
    bottom: clamp(1.75rem, 1rem + 3vw, 3rem);
    z-index: 3;
    display: flex;
    gap: .4rem;
}
.accroche__point {
    width: 9px; height: 9px;
    padding: 0; border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .45);
    cursor: pointer;
    transition: background var(--transition), width var(--transition);
}
.accroche__point[aria-current='true'] { background: #fff; width: 26px; border-radius: var(--r-pill); }

@media (max-width: 40rem) {
    /* Sur mobile, les points passeraient sous les boutons : on les
       remonte en haut de la photo. */
    .accroche__points { top: 1rem; bottom: auto; right: var(--gouttiere); }
}

/* ══ Recherche de disponibilité ══════════════════════════════
   La grille précédente passait de deux à cinq colonnes d'un coup,
   avec le bouton en colonne « auto » : entre les deux, les champs
   se serraient jusqu'à se chevaucher.

   Elle progresse maintenant par paliers — une, deux, puis quatre
   colonnes, le bouton prenant toute la largeur tant qu'il n'y a pas
   la place de le mettre en bout de ligne. */
/* ── Bloc de recherche ────────────────────────────────────
   Il était plat et sans hiérarchie : un titre, quatre champs, un
   bouton, le tout au même niveau. Trois changements le remontent —
   un fond coloré plus affirmé, une ombre portée qui le détache du
   reste, et le titre placé à côté des champs plutôt qu'au-dessus
   sur grand écran, ce qui raccourcit le bloc d'un tiers. */
.dispo {
    padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
    background:
        radial-gradient(130% 120% at 8% 0%,
            color-mix(in oklab, var(--turquoise) 22%, white) 0%,
            color-mix(in oklab, var(--turquoise) 7%, white) 45%,
            white 85%);
    border: 0;
    border-top: 6px solid var(--turquoise);
    box-shadow:
        0 4px 14px rgb(18 32 43 / .07),
        0 20px 50px color-mix(in oklab, var(--turquoise) 18%, transparent);
}
/* Sur grand écran, titre à gauche et champs à droite. */


/* ── Le départ vers la réservation ────────────────────────
   Version précédente : un paragraphe en flex, où le <strong> devenait
   un élément de la grille au lieu de rester dans la phrase. Le texte
   se disloquait — « Réservez et / dès » d'un côté, « demain » de
   l'autre.

   Ici, chaque partie a son propre bloc : un blason, un texte, un
   bouton, une passerelle. Plus rien ne peut se détacher. */
.reserver-ici {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1.15rem;
    align-items: start;
    margin-top: 2rem;
    padding: 1.5rem 1.6rem;
    background:
        radial-gradient(150% 130% at 0% 0%,
            color-mix(in oklab, var(--dragon-300) 26%, white) 0%,
            color-mix(in oklab, var(--dragon-300) 9%, white) 48%,
            #fff 100%);
    border: 2px solid color-mix(in oklab, var(--dragon-400) 45%, white);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 32px color-mix(in oklab, var(--dragon-500) 14%, transparent);
}

/* Le blason, en écho à ceux du parc */
.reserver-ici__blason {
    grid-row: span 2;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    font-size: 1.6rem;
    color: #fff;
    background: linear-gradient(160deg, var(--dragon-400), var(--dragon-600));
    box-shadow: 0 3px 0 var(--dragon-700);
}

.reserver-ici__titre {
    margin: .1rem 0 .3rem;
    font-family: var(--titre);
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--dragon-900);
}
.reserver-ici__sous {
    margin: 0;
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--encre-700);
}
.reserver-ici__sous strong { color: var(--dragon-700); }

.reserver-ici__bouton { grid-column: 1 / -1; justify-self: start; margin-top: 1.15rem; }

.reserver-ici__autre {
    grid-column: 1 / -1;
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid color-mix(in oklab, var(--dragon-400) 28%, transparent);
    font-size: var(--t-sm);
    color: var(--encre-500);
}
.reserver-ici__autre a {
    font-family: var(--titre);
    font-weight: 600;
    color: var(--violet);
    text-decoration: none;
}
.reserver-ici__autre a:hover { text-decoration: underline; }

/* Sur écran étroit, le blason passe au-dessus du texte. */
@media (max-width: 30rem) {
    .reserver-ici { grid-template-columns: 1fr; }
    .reserver-ici__blason { grid-row: auto; }
}

/* ══ Horaires et calendrier ══════════════════════════════════ */
.horaires__grille {
    display: grid;
    gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
@media (min-width: 62rem) {
    .horaires__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: start; }
}

.etat {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--titre);
    font-weight: 500;
    padding: .5rem 1rem;
    border-radius: var(--r-pill);
    margin-bottom: 1rem;
}
.etat--ouvert { background: color-mix(in oklab, var(--dragon-300) 28%, transparent); color: var(--dragon-700); }
.etat--ferme  { background: color-mix(in oklab, var(--rouge) 15%, transparent); color: #9B2C2C; }
.etat__pastille {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: currentColor;
}
/* Le clignotement signale « en ce moment » ; il s'arrête si la
   personne a demandé à réduire les animations. */
@media (prefers-reduced-motion: no-preference) {
    .etat--ouvert .etat__pastille { animation: pulse 2s ease-in-out infinite; }
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 60%, transparent); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

/* ══ Les espaces de jeu ══════════════════════════════════════ */
.zones {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* Chaque carte porte une couleur des poteaux du parc. C'est ce qui
   fait passer la page de « sage » à « joyeuse » sans ajouter la
   moindre image : la teinte se propage au bandeau, à la pastille
   d'âge et à l'ombre au survol. */
.zone {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 5px solid var(--teinte);
    transition: transform var(--transition), box-shadow var(--transition);
}
.zone:hover {
    transform: translateY(-6px);
    box-shadow: var(--ombre-couleur), var(--ombre-nette);
}
.zone:nth-child(6n+1) { --teinte: var(--rose); }
.zone:nth-child(6n+2) { --teinte: var(--citron); }
.zone:nth-child(6n+3) { --teinte: var(--turquoise); }
.zone:nth-child(6n+4) { --teinte: var(--violet); }
.zone:nth-child(6n+5) { --teinte: var(--orange); }
.zone:nth-child(6n+6) { --teinte: var(--azur); }

.zone__image {
    aspect-ratio: 3 / 2;
    background: var(--nuage-100);
    object-fit: cover;
    width: 100%;
}
.zone__sansimage {
    aspect-ratio: 3 / 2;
    display: grid;
    place-items: center;
    font-size: 3rem;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--teinte) 26%, white),
        color-mix(in oklab, var(--teinte) 8%, white));
}
.zone__corps { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.zone__nom { font-size: var(--t-lg); margin-bottom: .4rem; }
.zone__texte { font-size: var(--t-sm); color: var(--encre-500); margin: 0 0 .9rem; flex: 1; }

.age {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--titre);
    font-size: var(--t-xs);
    font-weight: 600;
    padding: .3rem .85rem;
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--teinte, var(--dragon-500)) 18%, white);
    color: color-mix(in oklab, var(--teinte, var(--dragon-700)) 72%, black);
}

/* ══ Tarifs ══════════════════════════════════════════════════ */
.tarifs {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.tarif {
    padding: 1.1rem 1.25rem;
    text-align: center;
    background: var(--blanc);
    border: 1px solid var(--nuage-200);
    border-radius: var(--r-md);
}
.tarif__prix {
    font-family: var(--titre);
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--dragon-600);
    line-height: 1;
}
.tarif__nom { font-size: var(--t-sm); color: var(--encre-500); margin-top: .35rem; }

/* ══ Formules anniversaire ═══════════════════════════════════ */
.formules {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.formule {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
}
.formule:hover { transform: translateY(-4px); box-shadow: var(--ombre-nette); }
.formule__image { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--nuage-100); }
.formule__corps { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.formule__nom { font-size: var(--t-lg); margin-bottom: .15rem; }
.formule__creneau {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--encre-300);
    margin-bottom: .75rem;
}
.formule__texte {
    font-size: var(--t-sm);
    color: var(--encre-500);
    margin: 0 0 1rem;
    flex: 1;
    /* Trois lignes maximum : les descriptions du gérant sont
       longues et inégales ; sans cela les cartes se décalent. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.formule__pied {
    /* margin-top:auto pousse le prix et le bouton tout en bas :
       quelle que soit la longueur de la description ou du menu,
       deux cartes côte à côte alignent leur pied. Le grand vide de
       l'image venait de l'absence de ce calage. */
    margin-top: auto;
    padding-top: 1.15rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .9rem;
    border-top: 1px solid var(--nuage-200);
}
.formule__prix { font-family: var(--titre); font-size: var(--t-lg); font-weight: 600; color: var(--dragon-600); }
.formule__prix small { font-size: var(--t-xs); font-weight: 400; color: var(--encre-300); }

/* ══ Restauration ════════════════════════════════════════════ */
.resto__grille { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: center; }
@media (min-width: 60rem) { .resto__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Mosaïque de restauration ─────────────────────────────
   La version précédente laissait la première photo occuper quatre
   cases, ce qui décalait toutes les suivantes et laissait des trous
   dès que le nombre de photos changeait.

   Grille régulière désormais : quatre cases égales, toutes de même
   format. Les photos du gérant ont des cadrages très différents —
   « cover » les recadre au centre plutôt que de les déformer, et la
   hauteur de la rangée ne dépend plus de leur taille d'origine. */
.mosaique {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
}
@media (min-width: 40rem) {
    .mosaique { grid-template-columns: repeat(2, 1fr); }
}
.mosaique img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--r-md);
    background: var(--nuage-100);
    box-shadow: var(--ombre-douce);
}

/* ══ Avis ════════════════════════════════════════════════════ */
.note-globale {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.note-globale__chiffre { font-family: var(--titre); font-size: var(--t-2xl); font-weight: 600; color: var(--encre-900); }
.note-globale__etoiles { color: #E0AC00; font-size: var(--t-lg); letter-spacing: .05em; }

.avis {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.avis__carte { padding: 1.25rem 1.35rem; }
.avis__tete { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; }
.avis__initiale {
    width: 36px; height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dragon-500);
    color: #fff;
    font-family: var(--titre);
    font-weight: 600;
}
.avis__nom { font-family: var(--titre); font-weight: 500; color: var(--encre-900); }
.avis__etoiles { color: #E0AC00; font-size: var(--t-sm); }
.avis__texte { font-size: var(--t-sm); margin: 0; }

/* ══ Infos pratiques ═════════════════════════════════════════ */
.pratique {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.pratique__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--blanc);
    border: 1px solid var(--nuage-200);
    border-radius: var(--r-md);
    font-size: var(--t-md);
}
.pratique__item img { width: 34px; height: 34px; flex: none; object-fit: contain; }

/* ══ Accès ═══════════════════════════════════════════════════ */
.acces__grille { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 2rem); }
@media (min-width: 60rem) { .acces__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.carte-zone {
    aspect-ratio: 16 / 10;
    border-radius: var(--r-md);
    overflow: hidden;
    background: linear-gradient(135deg, var(--nuage-100), var(--nuage-200));
    display: grid;
    place-items: center;
    text-align: center;
    cursor: pointer;
}
.carte-zone iframe { width: 100%; height: 100%; border: 0; display: block; }

.coord { list-style: none; margin: 0; padding: 0; }
/* Les coordonnées sont une information qu'on recopie ou qu'on
   compose : elle doit être confortable à lire, pas discrète. */
.coord li { display: flex; align-items: center; gap: .9rem; padding: .95rem 0;
            border-bottom: 1px solid var(--nuage-200); font-size: var(--t-lg); }
.coord li:last-child { border-bottom: 0; }
.coord i { color: var(--dragon-500); font-size: 1.5rem; flex: none; }
.coord a { color: var(--encre-700); text-decoration: none; }
.coord a:hover { color: var(--dragon-700); text-decoration: underline; }


/* ══ Chapeaux colorés ════════════════════════════════════════
   Chaque section porte sa couleur : l'œil comprend qu'il change de
   sujet sans qu'on ait besoin d'un fond différent. */
.chapeau--rose      { --teinte: var(--rose); }
.chapeau--citron    { --teinte: var(--citron); }
.chapeau--turquoise { --teinte: var(--turquoise); }
.chapeau--violet    { --teinte: var(--violet); }
.chapeau--orange    { --teinte: var(--orange); }
.chapeau--azur      { --teinte: var(--azur); }
.chapeau[class*='chapeau--'] {
    background: color-mix(in oklab, var(--teinte) 20%, white);
    color: color-mix(in oklab, var(--teinte) 78%, black);
}

/* ══ Cartes de tarif et de formule colorées ══════════════════ */
.tarif { border-top: 4px solid var(--teinte, var(--dragon-500)); }
.tarif:nth-child(5n+1) { --teinte: var(--turquoise); }
.tarif:nth-child(5n+2) { --teinte: var(--citron); }
.tarif:nth-child(5n+3) { --teinte: var(--rose); }
.tarif:nth-child(5n+4) { --teinte: var(--violet); }
.tarif:nth-child(5n+5) { --teinte: var(--orange); }
.tarif__prix { color: color-mix(in oklab, var(--teinte) 72%, black); }

.formule { border-top: 5px solid var(--teinte, var(--dragon-500)); }
.formule:nth-child(4n+1) { --teinte: var(--turquoise); }
.formule:nth-child(4n+2) { --teinte: var(--rose); }
.formule:nth-child(4n+3) { --teinte: var(--citron); }
.formule:nth-child(4n+4) { --teinte: var(--violet); }
.formule:hover { box-shadow: var(--ombre-couleur), var(--ombre-nette); }
.formule__prix { color: color-mix(in oklab, var(--teinte) 72%, black); }

/* ══ Bande de couleur entre les sections ═════════════════════
   Un rappel des poteaux, dessiné en dégradé : aucune image, et il
   sépare les blocs bien mieux qu'un simple trait gris. */
.arc-en-ciel {
    height: 6px;
    background: linear-gradient(90deg,
        var(--rose) 0%, var(--orange) 18%, var(--citron) 36%,
        var(--dragon-400) 54%, var(--turquoise) 72%, var(--azur) 86%, var(--violet) 100%);
}


/* ══ Repères, à côté du calendrier ═══════════════════════════ */
.reperes { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.reperes li {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--nuage-200);
}
.reperes li:last-child { border-bottom: 0; }
.reperes i {
    flex: none;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 13px;
    font-size: 1.25rem;
    background: color-mix(in oklab, var(--teinte) 16%, white);
    color: color-mix(in oklab, var(--teinte) 76%, black);
}
.reperes li:nth-child(1) { --teinte: var(--rose); }
.reperes li:nth-child(2) { --teinte: var(--citron); }
.reperes li:nth-child(3) { --teinte: var(--turquoise); }
.reperes li:nth-child(4) { --teinte: var(--violet); }
.reperes strong { display: block; font-family: var(--titre); font-weight: 600; color: var(--encre-900); }
.reperes span   { font-size: var(--t-sm); color: var(--encre-500); }


/* ══ Les sept prochains jours ════════════════════════════════
   Un tableau d'horaires classique demande de repérer le jour, puis
   de suivre la ligne. Ici chaque jour est une ligne autonome avec sa
   date, et celui d'aujourd'hui se détache. */
.semaine { list-style: none; margin: 0; padding: 0; }
.semaine__jour {
    display: grid;
    grid-template-columns: minmax(6rem, auto) minmax(4rem, auto) 1fr;
    gap: .75rem 1rem;
    align-items: baseline;
    padding: .8rem .9rem;
    border-radius: var(--r-sm);
    font-size: var(--t-md);
}
.semaine__jour + .semaine__jour { margin-top: .2rem; }
.semaine__jour:nth-child(odd) { background: var(--nuage-050); }

.semaine__nom { font-family: var(--titre); font-weight: 600; color: var(--encre-900); }
.semaine__date { font-size: var(--t-sm); color: var(--encre-300); }
.semaine__heures {
    justify-self: end;
    font-family: var(--titre);
    font-weight: 600;
    color: var(--dragon-700);
}

.semaine__jour--ferme .semaine__nom,
.semaine__jour--ferme .semaine__heures { color: var(--encre-300); font-weight: 500; }

/* Aujourd'hui : un liseré vert et un fond teinté. La couleur seule
   ne suffirait pas à qui la distingue mal — le libellé dit « Aujourd'hui ». */
.semaine__jour--auj {
    background: color-mix(in oklab, var(--dragon-300) 18%, white) !important;
    box-shadow: inset 3px 0 0 var(--dragon-500);
}


/* ══ Moment de la journée ════════════════════════════════════
   Les quatre formules mélangées obligeaient à déchiffrer quatre
   créneaux pour retrouver les siens. Groupées sous « Le matin » et
   « L'après-midi », le parent va droit à ce qui le concerne. */
.moment {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: var(--t-xl);
    color: var(--encre-900);
    margin: 0 0 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 3px solid var(--nuage-200);
}
.moment i { color: var(--citron); font-size: 1.5rem; }
#moment-apresmidi i { color: var(--orange); }

/* ══ Cartes de menu ══════════════════════════════════════════ */
.menus {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.menu-carte {
    padding: 1.35rem 1.5rem;
    border-top: 5px solid var(--teinte);
    transition: transform var(--transition), box-shadow var(--transition);
}
.menu-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-couleur), var(--ombre-nette); }
.menu-carte--rose      { --teinte: var(--rose); }
.menu-carte--citron    { --teinte: var(--citron); }
.menu-carte--violet    { --teinte: var(--violet); }
.menu-carte--turquoise { --teinte: var(--turquoise); }

.menu-carte__titre {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--t-lg);
    margin-bottom: .85rem;
    color: color-mix(in oklab, var(--teinte) 72%, black);
}
.menu-carte__titre i { font-size: 1.25rem; }

.menu-carte__liste { list-style: none; margin: 0; padding: 0; }
.menu-carte__liste li {
    position: relative;
    padding: .4rem 0 .4rem 1.35rem;
    font-size: var(--t-md);
    color: var(--encre-700);
}
.menu-carte__liste li + li { border-top: 1px solid var(--nuage-100); }
/* Une puce ronde teintée plutôt qu'un tiret : elle relie visuellement
   chaque ligne à la couleur de sa carte. */
.menu-carte__liste li::before {
    content: '';
    position: absolute;
    left: 0; top: .95em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--teinte);
}

/* Sur cette page, la description d'une formule n'est plus tronquée :
   c'est l'information qu'on vient y chercher. */
.formule__texte--complet {
    /* flex: none — sur la page des anniversaires, la description ne doit
       pas s'étirer. Héritée des cartes de l'accueil (où elle pousse le
       prix vers le bas), la règle « flex: 1 » ouvrait un grand vide
       entre la description et le menu de la formule. L'espace libre se
       place désormais au-dessus du prix. */
    flex: none;
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}
.formule__creneau { display: flex; align-items: center; gap: .4rem; }


/* Sur la page restauration, le second bloc inverse l'ordre : les
   photos à gauche, le texte à droite. L'alternance évite la
   monotonie de deux blocs identiques l'un sous l'autre. */
@media (min-width: 60rem) {
    .resto__grille--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}


/* ══ Formulaires ═════════════════════════════════════════════
   Ils étaient ternes : une boîte blanche, des étiquettes grises, des
   champs rectangulaires alignés. Trois choses les rendent plus
   engageants —

   · un bandeau coloré en tête, qui dit à quoi sert le formulaire ;
   · une icône dans chaque champ, qui dit ce qu'on attend avant même
     de lire l'étiquette ;
   · des champs plus généreux, arrondis, qui s'éclairent quand on les
     remplit. */
.formulaire {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0;
    max-width: 46rem;
    margin-inline: auto;
    overflow: hidden;
    border-top: 0;
}
.formulaire__bandeau {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.15rem clamp(1.35rem, 1rem + 2vw, 2.25rem);
    background: linear-gradient(120deg,
        color-mix(in oklab, var(--teinte, var(--turquoise)) 90%, white),
        var(--teinte, var(--turquoise)));
    color: #fff;
}
.formulaire__bandeau i {
    flex: none;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    font-size: 1.35rem;
    background: rgb(255 255 255 / .22);
    border-radius: 14px;
}
.formulaire__bandeau p { margin: 0; font-size: var(--t-md); line-height: 1.45; }
.formulaire__bandeau strong { display: block; font-family: var(--titre); font-size: var(--t-lg); }

.formulaire__corps {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: clamp(1.35rem, 1rem + 2vw, 2.25rem);
    padding-top: 1.1rem;
}

.formulaire__grille {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 36rem) {
    .formulaire__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Champ avec icône ─────────────────────────────────────── */
.champ__boite { position: relative; }
.champ__boite > i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.15rem;
    color: var(--encre-300);
    pointer-events: none;
    transition: color var(--transition);
}
.champ__boite--haut > i { top: 1.05rem; transform: none; }

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire input[type="number"],
.formulaire textarea {
    width: 100%;
    padding: .95rem 1rem .95rem 2.9rem;
    font-family: var(--texte);
    font-size: var(--t-md);
    line-height: 1.5;
    color: var(--encre-900);
    background: var(--nuage-050);
    border: 2px solid transparent;
    border-radius: var(--r-md);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.formulaire textarea { resize: vertical; min-height: 8rem; }
.formulaire .compteur input { padding: .7rem .4rem; background: #fff; border-color: var(--nuage-200); }

.formulaire input::placeholder,
.formulaire textarea::placeholder { color: var(--encre-300); }

.formulaire input:hover,
.formulaire textarea:hover { background: var(--nuage-100); }

.formulaire input:focus,
.formulaire textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--teinte, var(--turquoise));
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--teinte, var(--turquoise)) 20%, transparent);
}
/* L'icône s'allume quand on remplit son champ. */
.champ__boite:focus-within > i { color: var(--teinte, var(--turquoise)); }

.champ__aide { margin: .4rem 0 0; font-size: var(--t-sm); color: var(--encre-500); }
.champ__opt { font-weight: 400; color: var(--encre-300); }

.formulaire__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .5rem;
}
.formulaire__securite {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: var(--t-sm);
    color: var(--encre-500);
}

/* Champ piège : hors de l'écran plutôt que « display:none ».
   Certains automates ignorent les champs masqués par display ; en
   revanche ils remplissent ceux qui existent vraiment. Les lecteurs
   d'écran l'ignorent grâce à aria-hidden sur son conteneur. */
.piege {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}


/* ══ Bons cadeaux ════════════════════════════════════════════ */
.cadeau__grille {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    align-items: start;
}
@media (min-width: 62rem) {
    .cadeau__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.cadeau__grille .reperes li:nth-child(4) { --teinte: var(--azur); }

/* ── Case à cocher ────────────────────────────────────────
   La case native est petite et difficile à viser. On l'agrandit
   plutôt que de la remplacer par un dessin : elle garde ainsi son
   comportement au clavier et pour les lecteurs d'écran. */
.case {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: var(--t-sm);
    color: var(--encre-700);
    cursor: pointer;
}
.case input {
    flex: none;
    width: 22px; height: 22px;
    margin: 0;
    accent-color: var(--dragon-500);
    cursor: pointer;
}
.case a { color: var(--dragon-700); font-weight: 600; }

/* ── Message d'erreur ─────────────────────────────────────
   « hidden » plutôt qu'une classe : l'attribut est compris par les
   lecteurs d'écran, qui cessent d'annoncer le message. */
.erreur {
    margin: 0;
    padding: .8rem 1rem;
    font-size: var(--t-sm);
    color: #8C1D1D;
    background: color-mix(in oklab, var(--rouge) 12%, white);
    border: 2px solid color-mix(in oklab, var(--rouge) 40%, white);
    border-radius: var(--r-sm);
}
.erreur[hidden] { display: none; }


/* ── Repères en rangée ────────────────────────────────────
   Trois repères côte à côte, centrés, sur grand écran ; empilés sur
   mobile. Empilés et alignés à droite, ils décentraient la section. */
.reperes--rangee {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin: 0 auto;
    max-width: 64rem;
}
.reperes--rangee li {
    border: 1px solid var(--nuage-200);
    border-radius: var(--r-md);
    background: var(--blanc);
    padding: 1rem 1.15rem;
    box-shadow: var(--ombre-douce);
}
.reperes--rangee li:last-child { border-bottom: 1px solid var(--nuage-200); }


/* ══ Ce qu'inclut une formule ════════════════════════════════
   Rubrique à gauche, contenu à droite : on lit la colonne des
   rubriques d'un coup d'œil pour comparer deux formules. */
.formules--detail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-bottom: 2.75rem; }

.inclus {
    /* flex:none : le menu garde sa hauteur naturelle au lieu de
       s'étirer pour combler la carte. */
    flex: none;
    margin: 0 0 1.15rem;
    padding: .9rem 1rem;
    background: var(--nuage-050);
    border-radius: var(--r-sm);
}
.inclus__ligne {
    display: grid;
    grid-template-columns: 6.8rem 1fr;
    gap: .6rem;
    padding: .38rem 0;
    font-size: var(--t-sm);
}
.inclus__ligne + .inclus__ligne { border-top: 1px solid var(--nuage-200); }
.inclus dt {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--titre);
    font-weight: 600;
    color: color-mix(in oklab, var(--teinte, var(--violet)) 75%, black);
}
.inclus dt i { font-size: 1rem; }
.inclus dd { margin: 0; color: var(--encre-700); }

/* ══ Bon à savoir ════════════════════════════════════════════ */
.savoir {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    max-width: 64rem;
    margin-inline: auto;
}
@media (min-width: 58rem) {
    .savoir { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.savoir__options { padding: 1.35rem 1.5rem; border-top: 5px solid var(--azur); }
.savoir__titre {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    font-family: var(--titre);
    font-size: var(--t-lg);
    font-weight: 600;
    color: #10456E;
}
.savoir__liste { list-style: none; margin: 0; padding: 0; }
.savoir__liste li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .6rem 0;
    font-size: var(--t-md);
}
.savoir__liste li + li { border-top: 1px solid var(--nuage-200); }
.savoir__liste strong { font-family: var(--titre); color: var(--dragon-700); white-space: nowrap; }
.savoir__liste small { font-weight: 400; color: var(--encre-300); }
.savoir__note { margin: .85rem 0 0; font-size: var(--t-sm); color: var(--encre-500); }
.savoir__cta { display: flex; justify-content: center; margin-top: 2.25rem; }


/* ── Quantité et total, côte à côte ───────────────────────── */
.cadeau__qte { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.cadeau__total { margin: 0; font-size: var(--t-md); color: var(--encre-500); }
.cadeau__total strong {
    display: block;
    font-family: var(--titre);
    font-size: var(--t-xl);
    color: var(--dragon-700);
}

/* ══ Page de réservation — étapes ════════════════════════════
   Trois étapes numérotées, empilées : le jour, le créneau, le nombre
   d'enfants. Chaque étape ne propose que ce qui est possible compte
   tenu des précédentes. */
.etapes { display: flex; flex-direction: column; gap: 1.6rem; max-width: 50rem; margin-inline: auto; }
.etape { display: flex; gap: 1rem; align-items: flex-start; }
.etape__num {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-family: var(--titre); font-weight: 700; font-size: var(--t-md);
    color: #fff;
    background: var(--teinte, var(--turquoise));
    box-shadow: 0 2px 0 color-mix(in oklab, var(--teinte, var(--turquoise)) 70%, black);
}
.etape--inactive .etape__num { background: var(--nuage-300); box-shadow: none; }
.etape--inactive .etape__corps { opacity: .55; }
.etape__corps { flex: 1; min-width: 0; }
.etape__titre {
    font-family: var(--titre); font-size: var(--t-lg); font-weight: 600;
    color: var(--encre-900); margin: .3rem 0 .8rem;
}
.etape__aide { margin: .6rem 0 0; font-size: var(--t-sm); color: var(--encre-500); }

/* La date choisie */
.date-choisie {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: .85rem 1.1rem;
    background: color-mix(in oklab, var(--dragon-300) 16%, white);
    border: 2px solid var(--dragon-400);
    border-radius: var(--r-md);
}
.date-choisie strong { font-family: var(--titre); font-size: var(--t-lg); color: var(--dragon-900); }
.date-choisie button {
    margin-left: auto; font: inherit; font-size: var(--t-sm); font-weight: 600;
    color: var(--dragon-700); background: none; border: 0; cursor: pointer; text-decoration: underline;
}
.raccourcis {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
    margin-bottom: 1rem;
}
.raccourcis__intro { font-size: var(--t-sm); color: var(--encre-500); }
/* Le raccourci ressemble à un jour ouvert du calendrier : même vert,
   même relief. On comprend qu'il s'agit d'une date à choisir. */
.raccourci {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1rem;
    font: 600 var(--t-md) var(--titre);
    color: #fff;
    background: linear-gradient(170deg, #1EBE68, #14A257);
    border: 0; border-radius: var(--r-sm);
    box-shadow: 0 2px 0 #0D8746;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
.raccourci:hover { transform: translateY(-2px); box-shadow: 0 4px 0 #0D8746; }
.raccourci i { color: var(--citron); }

/* Le calendrier dans le formulaire de réservation : encadré et posé
   sur un fond clair, pour qu'il se distingue du reste du formulaire
   plutôt que de flotter au milieu des étapes. */
#resCalendrier {
    /* Compact : dans le formulaire, le calendrier sert à choisir un
       jour, pas à être lu de loin. Pleine largeur, ses cases
       devenaient énormes. */
    max-width: 30rem;
    background: var(--nuage-050);
    border: 1px solid var(--nuage-200);
    border-radius: var(--r-md);
    padding: .5rem;
    margin-bottom: .3rem;
}

/* ── Créneaux ─────────────────────────────────────────────── */
/* Créneaux horaires (Matin / Après-midi) de la réservation.
   Renommés : « .creneaux » entrait en collision avec les merlons
   décoratifs de château de base.css, dont le fond gris rayé et la
   hauteur de 18px s'appliquaient par erreur ici — les cartes
   s'écrasaient et débordaient sur l'étape suivante. */
.cr-horaire { display: flex; flex-wrap: wrap; gap: .75rem; }
.cr-horaire__choix {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    min-width: 10rem; padding: .85rem 1.2rem;
    font-family: var(--titre); text-align: left;
    background: #fff; border: 2px solid var(--nuage-200); border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.cr-horaire__choix i { font-size: 1.2rem; color: var(--violet); }
.cr-horaire__choix span { font-size: var(--t-md); font-weight: 600; color: var(--encre-900); }
.cr-horaire__choix small { font-size: var(--t-sm); color: var(--encre-500); font-family: var(--texte); }
.cr-horaire__choix:hover { border-color: var(--violet); transform: translateY(-2px); }
.cr-horaire__choix[aria-pressed="true"] { background: var(--violet); border-color: #6B3BB0; box-shadow: 0 3px 0 #6B3BB0; }
.cr-horaire__choix[aria-pressed="true"] i,
.cr-horaire__choix[aria-pressed="true"] span { color: #fff; }
.cr-horaire__choix[aria-pressed="true"] small { color: rgb(255 255 255 / .85); }

/* ── Compteur (réservation ET bons cadeaux) ───────────────────
   Il avait disparu avec l'ancien formulaire de l'accueil, laissant
   sans style le compteur des bons cadeaux. */
.compteur { display: inline-flex; align-items: center; gap: .5rem; }
.compteur__bouton {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    font-size: 1.15rem; color: var(--rose);
    background: #fff; border: 2px solid var(--nuage-200); border-radius: 14px;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
}
.compteur__bouton:hover:not(:disabled) { border-color: var(--rose); transform: translateY(-2px); }
.compteur__bouton:disabled { opacity: .35; cursor: not-allowed; }
.compteur input {
    width: 4.4rem; padding: .7rem .4rem;
    font-family: var(--titre); font-size: var(--t-xl); font-weight: 600;
    text-align: center; color: var(--encre-900);
    background: #fff; border: 2px solid var(--nuage-200); border-radius: 14px;
    -moz-appearance: textfield;
}
.compteur input::-webkit-outer-spin-button,
.compteur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compteur input:focus { outline: none; border-color: var(--rose); }

.reserver__total { margin: .8rem 0 0; font-family: var(--titre); font-size: var(--t-xl); font-weight: 600; color: var(--dragon-700); }
.reserver__total small { display: block; font-family: var(--texte); font-size: var(--t-sm); font-weight: 400; color: var(--encre-500); }
.reserver__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }
.reserver__autre { text-align: center; margin: 1.75rem 0 0; color: var(--encre-500); }
.reserver__autre a { font-family: var(--titre); font-weight: 600; color: var(--violet); }
.reserver__formule {
    display: flex; align-items: center; gap: .7rem;
    max-width: 50rem; margin: 0 auto 1.5rem; padding: .9rem 1.15rem;
    background: color-mix(in oklab, var(--violet) 10%, white);
    border: 2px solid color-mix(in oklab, var(--violet) 35%, white);
    border-radius: var(--r-md);
}
.reserver__formule strong { font-family: var(--titre); color: #4E2A85; }


/* ── Compteur : boutons et champ exactement de même hauteur ──
   Mesuré : les boutons faisaient 48 px, le champ 53 px (cadeaux) ou
   73 px (réservation) — le « 2 » dépassait de sa rangée. Et sur la
   page cadeaux, le conteneur flexible comprimait les boutons à 34 px
   de large. Tout est désormais fixé à 48 × 48. */
.compteur { align-items: center; }
.compteur__bouton { flex: none; width: 48px; height: 48px; padding: 0; }
.compteur input,
.formulaire .compteur input {
    flex: none;
    width: 4.2rem;
    height: 48px;
    padding: 0 .3rem;
    font-size: var(--t-lg);
    line-height: 1;
}

/* Les liens dans les aides d'étape prennent la couleur du site, pas
   le bleu par défaut du navigateur. */
.etape__aide a { color: var(--violet); font-weight: 600; }


/* ── Étapes sur téléphone ─────────────────────────────────
   Le numéro garde sa place à côté du titre, mais le CONTENU de
   l'étape passe en pleine largeur dessous. Sans cela, la colonne du
   numéro amputait la largeur disponible, et les cases du calendrier
   tombaient sous la taille d'un doigt. */
@media (max-width: 36rem) {
    .etape {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: .65rem;
        align-items: center;
    }
    .etape__num { width: 30px; height: 30px; font-size: var(--t-sm); }
    .etape__corps { display: contents; }
    .etape__titre { margin: 0; }
    .etape__corps > *:not(.etape__titre) { grid-column: 1 / -1; margin-top: .75rem; }
    #resCalendrier { max-width: none; }
    #resForm { padding: 1.1rem !important; }
    /* « display: contents » retire la boîte du corps d'étape : son
       estompage ne s'appliquait plus. On estompe ses enfants. */
    .etape--inactive .etape__corps > * { opacity: .55; }
}