/* ==========================================================================
   ILYOS FAMILY CENTER — feuille de style publique

   Identité : nuit profonde, soleil orange, couleurs vives du logo ILYOS et
   cyan électrique. Titres condensés en capitales, boutons taillés en biais.
   Tout est pensé mobile d'abord : les règles à partir de 720 px n'ajoutent
   que de la mise en page, jamais du contenu.
   ========================================================================== */

/* --- 1. Jetons de conception ---------------------------------------------- */
:root {
    /* Fonds */
    --nuit:        #08081a;
    --nuit-2:      #0e0e26;
    --surface:     #16163a;
    --surface-2:   #1e1e4a;
    --bordure:     #2a2a5c;
    --bordure-vive: #3a3a78;

    /* Textes */
    --texte:       #f4f5fb;
    --texte-doux:  #a3abcc;
    --texte-faible: #7079a3;

    /* Accents */
    --soleil:      #ff8a00;
    --braise:      #ff2d78;
    --cyan:        #22d3ee;
    --vert:        #34d399;
    --rouge:       #fb7185;

    --degrade-soleil: linear-gradient(118deg, #ff8a00 0%, #ff2d78 100%);
    --degrade-cyan:   linear-gradient(118deg, #22d3ee 0%, #6366f1 100%);

    /* Formes */
    --rayon:       16px;
    --rayon-s:     10px;
    --rayon-xl:    26px;
    --largeur:     1200px;
    --gouttiere:   clamp(1.15rem, 4vw, 2.5rem);

    /* Ombres */
    --ombre:       0 18px 50px -22px rgba(0, 0, 0, .9);
    --lueur:       0 0 0 1px rgba(255, 255, 255, .05);

    color-scheme: dark;
}

/* --- 2. Remise à zéro ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--nuit);
    color: var(--texte);
    font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

/* Le lien d'évitement, invisible tant qu'on ne tabule pas dessus. */
.evitement {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--soleil); color: #12060a; padding: .8rem 1.4rem;
    font-weight: 700; border-radius: 0 0 var(--rayon-s) 0;
}
.evitement:focus { left: 0; }

:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- 3. Typographie -------------------------------------------------------- */
.titre-affiche,
h1, h2.section__titre, .carte-choix__titre, .tarif__nom, .formule__nom {
    font-family: "Anton", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .005em;
    line-height: .92;
    margin: 0;
}

h1, .titre-affiche {
    font-size: clamp(2.6rem, 1.4rem + 6.2vw, 6rem);
}

.section__titre {
    font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem);
    color: var(--cyan);
}
.section__titre--soleil {
    background: var(--degrade-soleil);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

/* Un texte peint par un dégradé n'existe que là où l'élément a un fond.
   Les accents des capitales dépassent au-dessus de la boîte : sans cette
   marge, ÉTÉ s'afficherait ETE. On agrandit donc la zone peinte, puis on
   annule le décalage pour ne rien bouger dans la page. */
.texte-degrade,
.section__titre--soleil,
.heros h1 .accent,
.chiffre__valeur,
.tarif__prix,
.recap__total strong {
    padding-block: .16em;
    margin-block: -.16em;
}

h3 { font-size: 1.15rem; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; }

.surtitre {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 0 0 .9rem;
}

.chapeau {
    color: var(--texte-doux);
    font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
    max-width: 60ch;
    margin: 1rem 0 0;
}

.texte-doux { color: var(--texte-doux); }
.petit { font-size: .875rem; }

/* --- 4. Mise en page ------------------------------------------------------- */
.conteneur {
    width: min(100% - var(--gouttiere) * 2, var(--largeur));
    margin-inline: auto;
}

.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section--serree { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--nuit2 { background: var(--nuit-2); }

.section__entete { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section__entete .chapeau { margin-top: .85rem; }

.grille { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* --- 5. Boutons ------------------------------------------------------------ */
/* Le bouton principal est taillé en parallélogramme : le fond est incliné,
   le texte reste droit grâce au contre-biais appliqué au libellé. */
.btn {
    --biais: -12deg;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 2.1rem;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transform: skewX(var(--biais));
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn > * { display: inline-block; transform: skewX(calc(var(--biais) * -1)); }
.btn:hover { transform: skewX(var(--biais)) translateY(-2px); }
.btn:active { transform: skewX(var(--biais)) translateY(0); }

.btn--primaire {
    background: #fff;
    color: #10102a;
    box-shadow: -6px 0 0 0 var(--cyan), 0 14px 34px -14px rgba(34, 211, 238, .8);
}
.btn--primaire:hover { box-shadow: -6px 0 0 0 var(--cyan), 0 20px 40px -14px rgba(34, 211, 238, .95); }

.btn--soleil {
    background: var(--degrade-soleil);
    color: #fff;
    box-shadow: 0 14px 34px -14px rgba(255, 77, 120, .95);
}

.btn--fantome {
    background: transparent;
    color: var(--texte);
    box-shadow: inset 0 0 0 2px var(--bordure-vive);
}
.btn--fantome:hover { box-shadow: inset 0 0 0 2px var(--cyan); color: var(--cyan); }

.btn--plein { width: 100%; }
.btn--petit { padding: .7rem 1.4rem; font-size: .82rem; }

.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .45; cursor: not-allowed; filter: grayscale(.5);
    box-shadow: none; transform: skewX(var(--biais));
}

/* Bouton sans biais, pour les zones denses (administration, formulaires). */
.btn--droit { --biais: 0deg; border-radius: var(--rayon-s); }

.lien-fleche {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--cyan); font-weight: 700; text-decoration: none;
    letter-spacing: .02em;
}
.lien-fleche::after { content: "→"; transition: transform .18s ease; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* --- 6. En-tête ------------------------------------------------------------ */
.entete {
    position: sticky; top: 0; z-index: 60;
    background: rgba(8, 8, 26, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.entete__interieur {
    display: flex; align-items: center; gap: 1rem;
    min-height: 76px;
}
.entete__logo { flex: 0 0 auto; margin-right: auto; }
/* Le logo ILYOS est large : 52 px de haut suffisent à garder les
   personnages lisibles sans écraser la barre de navigation. */
.entete__logo img { height: 52px; width: auto; }

.nav { display: none; }

.entete__actions { display: flex; align-items: center; gap: .65rem; }

/* Le bouton de réservation de l'en-tête laisse la place au burger sur mobile. */
.entete__reserver { display: none; }

.etat {
    display: none; flex-direction: column; line-height: 1.25; text-align: right;
    font-size: .78rem;
}
.etat__lieu { font-weight: 700; letter-spacing: .02em; }
.etat__info { color: var(--rouge); font-weight: 600; }
.etat__info--ouvert { color: var(--vert); }

.langues {
    display: inline-flex; align-items: center; gap: .15rem;
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: 999px; padding: .2rem;
}
.langues a {
    padding: .3rem .7rem; border-radius: 999px; font-size: .78rem;
    font-weight: 700; text-decoration: none; color: var(--texte-doux);
    text-transform: uppercase; letter-spacing: .06em;
}
.langues a[aria-current="true"] { background: var(--degrade-cyan); color: #06061c; }

.burger {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: 12px; color: var(--texte); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }

/* Tiroir de navigation mobile */
.tiroir {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(4, 4, 14, .72);
    backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.tiroir[data-ouvert="1"] { opacity: 1; pointer-events: auto; }
.tiroir__panneau {
    position: absolute; inset: 0 0 0 auto; width: min(23rem, 88vw);
    background: var(--nuit-2); border-left: 1px solid var(--bordure);
    padding: 1.1rem var(--gouttiere) 2rem;
    display: flex; flex-direction: column; gap: .2rem;
    transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
}
.tiroir[data-ouvert="1"] .tiroir__panneau { transform: none; }
.tiroir__haut { display: flex; justify-content: flex-end; margin-bottom: .8rem; }
.tiroir__fermer {
    width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--bordure); color: var(--texte); font-size: 1.3rem;
}
.tiroir a.tiroir__lien {
    padding: .95rem .2rem; text-decoration: none; font-weight: 700;
    font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.tiroir a.tiroir__lien[aria-current="page"] { color: var(--cyan); }
.tiroir__groupe { margin-top: 1.2rem; }
.tiroir__groupe > p { margin: 0 0 .3rem; font-size: .72rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--texte-faible); }
.tiroir .btn { margin-top: 1.4rem; }

/* --- 7. Bannière d'accueil ------------------------------------------------- */
.heros {
    position: relative;
    display: grid; align-items: end;
    min-height: min(88vh, 46rem);
    padding: clamp(4rem, 12vw, 8rem) 0 clamp(3rem, 8vw, 6rem);
    overflow: hidden;
    isolation: isolate;
}
.heros--court { min-height: min(58vh, 30rem); }

.heros__fond {
    position: absolute; inset: 0; z-index: -2;
    background: var(--degrade-cyan);
    background-size: cover; background-position: center;
    overflow: hidden;
}

/* La vidéo remplit la bannière sans se déformer ; le voile ::after passe
   par-dessus, ce qui garde le titre lisible quelle que soit l'image. */
.heros__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.heros__fond::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(115% 80% at 15% 100%, rgba(8, 8, 26, .95) 20%, rgba(8, 8, 26, .1) 75%),
        linear-gradient(to top, var(--nuit) 2%, rgba(8, 8, 26, .35) 55%, rgba(8, 8, 26, .7) 100%);
}
.heros__contenu { max-width: 46rem; position: relative; }
.heros h1 span { display: block; }
.heros h1 .accent {
    background: var(--degrade-soleil);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.heros .chapeau { margin-top: 1.5rem; }
.heros__boutons {
    display: flex; flex-wrap: wrap; gap: .9rem;
    margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

/* Chiffres clés sous la bannière */
.chiffres {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1px; background: var(--bordure);
    border-block: 1px solid var(--bordure);
}
.chiffre { background: var(--nuit); padding: 1.5rem var(--gouttiere); }
.chiffre__valeur {
    font-family: "Anton", "Barlow Condensed", sans-serif;
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height: 1;
    background: var(--degrade-soleil);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chiffre__legende { color: var(--texte-doux); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-top: .4rem; }

/* --- 8. Cartes ------------------------------------------------------------- */
.carte {
    background: linear-gradient(180deg, var(--surface) 0%, var(--nuit-2) 100%);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .2s ease, transform .2s ease;
}
.carte:hover { border-color: var(--bordure-vive); }
.carte__corps { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.carte__corps > p { margin: 0; color: var(--texte-doux); font-size: .95rem; }
.carte__corps .btn { margin-top: auto; align-self: flex-start; }

.carte__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--degrade-cyan);
    background-size: cover; background-position: center;
}
.carte__media img { width: 100%; height: 100%; object-fit: cover; }
.carte__media video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Vignette d'attraction : image, titre en surimpression, détails dessous. */
.attraction { text-decoration: none; }
.attraction .carte__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8, 8, 26, .92) 6%, transparent 62%);
}
.attraction__titre {
    position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem; z-index: 1;
    font-family: "Anton", "Barlow Condensed", sans-serif;
    text-transform: uppercase; font-size: 1.35rem; line-height: 1.05;
}
.etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; }
.etiquette {
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(34, 211, 238, .12); color: var(--cyan);
    border: 1px solid rgba(34, 211, 238, .3);
    border-radius: 999px; padding: .22rem .7rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .04em;
}
.etiquette--soleil { background: rgba(255, 138, 0, .14); color: var(--soleil); border-color: rgba(255, 138, 0, .35); }
.etiquette--vert   { background: rgba(52, 211, 153, .14); color: var(--vert);  border-color: rgba(52, 211, 153, .35); }
.etiquette--rouge  { background: rgba(251, 113, 133, .14); color: var(--rouge); border-color: rgba(251, 113, 133, .35); }

/* Grande carte de choix (accueil) */
.carte-choix .carte__media { aspect-ratio: 4 / 3; }
.carte-choix__titre { font-size: 1.5rem; }

/* --- 9. Tarifs ------------------------------------------------------------- */
.tarif {
    position: relative;
    background: linear-gradient(180deg, var(--surface) 0%, var(--nuit-2) 100%);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.7rem 1.5rem;
    display: flex; flex-direction: column; gap: .35rem;
}
.tarif--populaire {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--soleil), 0 24px 60px -30px rgba(255, 138, 0, .9);
}
.tarif__ruban {
    position: absolute; top: -.75rem; left: 1.4rem;
    background: var(--degrade-soleil); color: #fff;
    font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: .3rem .8rem; border-radius: 999px;
}
.tarif__nom { font-size: 1.35rem; }
.tarif__prix {
    font-family: "Anton", "Barlow Condensed", sans-serif;
    font-size: clamp(2rem, 1.4rem + 2vw, 2.7rem); line-height: 1;
    margin-top: .5rem;
    background: var(--degrade-soleil);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tarif__barre { color: var(--texte-faible); text-decoration: line-through; font-size: .9rem; }
.tarif__desc { color: var(--texte-doux); font-size: .92rem; margin: .4rem 0 0; }
.tarif .btn { margin-top: 1.2rem; }

.inclus { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.inclus li { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: var(--texte-doux); }
.inclus li::before {
    content: "✓"; flex: 0 0 auto; margin-top: .05rem;
    width: 1.25rem; height: 1.25rem; display: grid; place-items: center;
    border-radius: 50%; background: rgba(52, 211, 153, .16); color: var(--vert);
    font-size: .72rem; font-weight: 900;
}

/* Bandeau « tout est compris », très large et coloré */
.bandeau-inclus {
    background: linear-gradient(112deg, #22d3ee 0%, #6366f1 42%, #ff8a00 100%);
    border-radius: var(--rayon-xl);
    padding: clamp(1.8rem, 4vw, 3rem);
    color: #08081a;
}
.bandeau-inclus .surtitre { color: rgba(8, 8, 26, .65); }
.bandeau-inclus h2 { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.bandeau-inclus p { color: rgba(8, 8, 26, .8); }
.bandeau-inclus .inclus li { color: #0d0d24; font-weight: 600; }
.bandeau-inclus .inclus li::before { background: rgba(255, 255, 255, .8); color: #0d0d24; }

/* Tableau comparatif des formules */
.comparatif-enveloppe { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparatif {
    width: 100%; min-width: 40rem;
    border-collapse: separate; border-spacing: 0;
    font-size: .92rem;
}
.comparatif th, .comparatif td {
    padding: .85rem 1rem; text-align: center;
    border-bottom: 1px solid var(--bordure);
}
.comparatif th:first-child, .comparatif td:first-child {
    text-align: left; color: var(--texte-doux); font-weight: 600;
    position: sticky; left: 0; background: var(--nuit); z-index: 1;
}
.comparatif thead th { vertical-align: bottom; }
.comparatif__nom {
    font-family: "Anton", "Barlow Condensed", sans-serif;
    text-transform: uppercase; font-size: 1.2rem; letter-spacing: .02em;
}
.comparatif__colonne-phare { background: rgba(255, 138, 0, .07); }
.comparatif__colonne-phare .comparatif__nom { color: var(--soleil); }
.comparatif .oui { color: var(--vert); font-weight: 800; }
.comparatif .non { color: var(--texte-faible); }
.comparatif__prix { font-family: "Anton", sans-serif; font-size: 1.4rem; color: var(--cyan); }

/* --- 10. Accordéon (FAQ) --------------------------------------------------- */
.accordeon { display: grid; gap: .6rem; }
.accordeon details {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--rayon-s); overflow: hidden;
}
.accordeon details[open] { border-color: var(--bordure-vive); }
.accordeon summary {
    padding: 1.05rem 1.25rem; cursor: pointer; font-weight: 700;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    list-style: none;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after {
    content: "+"; flex: 0 0 auto; color: var(--cyan);
    font-size: 1.35rem; line-height: 1; transition: transform .2s ease;
}
.accordeon details[open] summary::after { transform: rotate(45deg); }
.accordeon__reponse { padding: 0 1.25rem 1.25rem; color: var(--texte-doux); }
.accordeon__reponse p { margin: 0; }

/* --- 11. Galerie ----------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.filtre {
    background: var(--surface); border: 1px solid var(--bordure); color: var(--texte-doux);
    border-radius: 999px; padding: .48rem 1.05rem; font-size: .85rem; font-weight: 700;
    cursor: pointer; text-transform: none;
}
.filtre[aria-pressed="true"] { background: var(--degrade-cyan); color: #06061c; border-color: transparent; }

.galerie-grille {
    display: grid; gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.galerie-vignette {
    position: relative; margin: 0; padding: 0; border: 0; cursor: zoom-in;
    aspect-ratio: 4 / 3; border-radius: var(--rayon-s); overflow: hidden;
    background: var(--surface);
}
.galerie-vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.galerie-vignette:hover img { transform: scale(1.06); }
.galerie-vignette figcaption {
    position: absolute; inset: auto 0 0 0; padding: 2.2rem .8rem .7rem;
    background: linear-gradient(to top, rgba(8, 8, 26, .95), transparent);
    font-size: .82rem; text-align: left;
}

.visionneuse {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
    background: rgba(4, 4, 14, .95); padding: var(--gouttiere);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.visionneuse[data-ouvert="1"] { opacity: 1; pointer-events: auto; }
.visionneuse img { max-height: 82vh; width: auto; border-radius: var(--rayon-s); }
.visionneuse figcaption { text-align: center; margin-top: 1rem; color: var(--texte-doux); }
.visionneuse__fermer, .visionneuse__nav {
    position: absolute; background: var(--surface); border: 1px solid var(--bordure);
    color: var(--texte); width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    font-size: 1.3rem; display: grid; place-items: center;
}
.visionneuse__fermer { top: 1rem; right: 1rem; }
.visionneuse__nav--prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse__nav--suiv { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Vignettes vidéo : l'affiche et un bouton lecture par-dessus. */
.galerie-vignette--video { cursor: pointer; }
.galerie-vignette--video::after {
    content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 3.4rem; height: 3.4rem; border-radius: 50%;
    background: rgba(8, 8, 26, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
    border: 2px solid rgba(255, 255, 255, .85);
    transition: transform .2s ease;
}
.galerie-vignette--video:hover::after { transform: scale(1.08); }
.visionneuse video { max-height: 82vh; max-width: 100%; border-radius: var(--rayon-s); background: #000; }
.visionneuse video[hidden], .visionneuse img[hidden] { display: none; }

/* Médias d'une attraction */
.medias-attraction { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.medias-attraction video, .medias-attraction img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
    border-radius: var(--rayon-s); border: 1px solid var(--bordure); background: #000;
}
.medias-attraction video { object-fit: contain; }

/* --- 12. Formulaires ------------------------------------------------------- */
.champ { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.champ > label { font-weight: 700; font-size: .9rem; }
.champ__aide { color: var(--texte-faible); font-size: .82rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="url"], input[type="number"], input[type="password"],
input[type="search"], input[type="file"], select, textarea {
    width: 100%;
    padding: .85rem 1rem;
    font: inherit;
    color: var(--texte);
    background: var(--nuit-2);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-s);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
    outline: none;
}
textarea { min-height: 8rem; resize: vertical; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a3abcc' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px;
    padding-right: 2.6rem;
}
::placeholder { color: var(--texte-faible); }

.case { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--texte-doux); }
.case input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--cyan); flex: 0 0 auto; }

.message {
    border-radius: var(--rayon-s); padding: 1rem 1.15rem; margin-bottom: 1.4rem;
    border: 1px solid; font-size: .95rem;
}
.message--succes { background: rgba(52, 211, 153, .1);  border-color: rgba(52, 211, 153, .4);  color: #a7f3d0; }
.message--erreur { background: rgba(251, 113, 133, .1); border-color: rgba(251, 113, 133, .4); color: #fecdd3; }
.message--info   { background: rgba(34, 211, 238, .1);  border-color: rgba(34, 211, 238, .4);  color: #a5f3fc; }
.message ul { margin: .5rem 0 0; padding-left: 1.1rem; }

/* --- 13. Parcours de réservation ------------------------------------------ */
.etapes { display: flex; gap: .5rem; margin-bottom: 2.2rem; flex-wrap: wrap; }
.etape {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem 1rem; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--bordure);
    font-size: .85rem; font-weight: 700; color: var(--texte-faible);
}
.etape__num {
    width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--bordure); color: var(--texte-doux); font-size: .78rem;
}
.etape[data-etat="active"] { border-color: var(--cyan); color: var(--texte); }
.etape[data-etat="active"] .etape__num { background: var(--degrade-cyan); color: #06061c; }
.etape[data-etat="faite"] { color: var(--vert); border-color: rgba(52, 211, 153, .4); }
.etape[data-etat="faite"] .etape__num { background: rgba(52, 211, 153, .2); color: var(--vert); }

.reservation-mise-en-page { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.panneau {
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: clamp(1.3rem, 3vw, 2rem);
}
.panneau + .panneau { margin-top: 1.25rem; }
.panneau__titre { font-size: 1.1rem; font-weight: 800; margin: 0 0 1.1rem; }

/* Choix des créneaux */
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .55rem; }
.creneau { position: relative; }
.creneau input { position: absolute; opacity: 0; pointer-events: none; }
.creneau span {
    display: grid; gap: .1rem; text-align: center; cursor: pointer;
    padding: .7rem .5rem; border-radius: var(--rayon-s);
    background: var(--nuit-2); border: 1px solid var(--bordure);
    font-weight: 700; transition: all .15s ease;
}
.creneau small { font-weight: 500; font-size: .72rem; color: var(--texte-faible); }
.creneau input:checked + span {
    border-color: transparent; background: var(--degrade-cyan); color: #06061c;
}
.creneau input:checked + span small { color: rgba(6, 6, 28, .7); }
.creneau input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.creneau input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* Compteurs de billets */
.ligne-billet {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 0; border-bottom: 1px solid var(--bordure);
}
.ligne-billet:last-child { border-bottom: 0; }
.ligne-billet__infos { flex: 1 1 12rem; min-width: 0; }
.ligne-billet__nom { font-weight: 700; }
.ligne-billet__desc { color: var(--texte-faible); font-size: .84rem; }
.ligne-billet__prix { font-weight: 800; color: var(--cyan); white-space: nowrap; }

.compteur { display: inline-flex; align-items: center; gap: .1rem; }
.compteur button {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--nuit-2); border: 1px solid var(--bordure); color: var(--texte);
    font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.compteur button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.compteur button:disabled { opacity: .35; cursor: not-allowed; }
.compteur input {
    width: 3rem; text-align: center; padding: .5rem .2rem; font-weight: 800;
    background: transparent; border: 0; -moz-appearance: textfield;
}
.compteur input::-webkit-outer-spin-button, .compteur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Récapitulatif collant */
.recap {
    background: linear-gradient(180deg, var(--surface-2), var(--nuit-2));
    border: 1px solid var(--bordure-vive);
    border-radius: var(--rayon); padding: 1.5rem;
}
.recap__ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .93rem; }
.recap__ligne span:first-child { color: var(--texte-doux); }
.recap__total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--bordure);
    font-weight: 800;
}
.recap__total strong {
    font-family: "Anton", sans-serif; font-size: 1.7rem; letter-spacing: .01em;
    background: var(--degrade-soleil);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.recap__remise span:last-child { color: var(--vert); }

/* Choix du moyen de paiement */
.paiements { display: grid; gap: .7rem; }
.paiement-choix { position: relative; }
.paiement-choix input { position: absolute; opacity: 0; pointer-events: none; }
.paiement-choix > span {
    display: grid; gap: .2rem; cursor: pointer;
    padding: 1rem 1.15rem; border-radius: var(--rayon-s);
    background: var(--nuit-2); border: 1px solid var(--bordure);
    transition: all .15s ease;
}
.paiement-choix strong { font-size: .98rem; }
.paiement-choix small { color: var(--texte-faible); font-size: .84rem; }
.paiement-choix input:checked + span { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(34, 211, 238, .2); }
.paiement-choix input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* --- 13 bis. Invitations d'anniversaire ------------------------------------ */
.themes { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.theme { position: relative; }
.theme input { position: absolute; opacity: 0; pointer-events: none; }
.theme__carte {
    display: block; cursor: pointer; overflow: hidden;
    border-radius: var(--rayon-s); border: 1px solid var(--bordure);
    background: var(--nuit-2); transition: all .15s ease;
}
.theme__bande { display: block; height: 3.2rem; }
.theme__nom { display: block; padding: .55rem .7rem; font-size: .85rem; font-weight: 700; }
.theme input:checked + .theme__carte { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(34, 211, 238, .25); }
.theme input:focus-visible + .theme__carte { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Aperçu du carton, à l'échelle et dans les proportions du PDF (297 × 210). */
.carton {
    aspect-ratio: 297 / 210;
    border-radius: var(--rayon-s); overflow: hidden;
    background: var(--carton-fond, #fff);
    display: flex; flex-direction: column;
    margin-bottom: 1rem;
}
.carton__bande { display: block; height: 17%; flex: 0 0 auto; }
.carton__corps {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .12rem; text-align: center; padding: .5rem; color: #1a1a2c;
}
.carton__corps em { font-style: normal; font-weight: 800; font-size: .62rem; letter-spacing: .14em; color: var(--carton-accent, #d63a5a); }
.carton__corps small { font-size: .58rem; color: #6e7696; }
.carton__corps strong { font-size: 1.15rem; line-height: 1.1; font-weight: 800; }
.carton__quand {
    margin-top: .3rem; padding: .2rem .6rem; border-radius: 999px;
    background: var(--carton-accent, #d63a5a); color: #fff;
    font-size: .58rem; font-weight: 700;
}

/* --- 14. Billet électronique ---------------------------------------------- */
.billet {
    background: linear-gradient(150deg, var(--surface-2) 0%, var(--nuit-2) 70%);
    border: 1px solid var(--bordure-vive);
    border-radius: var(--rayon-xl);
    overflow: hidden;
    max-width: 34rem; margin-inline: auto;
    box-shadow: var(--ombre);
}
.billet__haut {
    background: var(--degrade-soleil); color: #fff;
    padding: 1.5rem clamp(1.3rem, 4vw, 2rem);
}
.billet__haut p { margin: .2rem 0 0; opacity: .9; font-size: .9rem; }
.billet__reference {
    font-family: "Anton", monospace; font-size: 1.6rem; letter-spacing: .06em;
}
.billet__corps { padding: clamp(1.3rem, 4vw, 2rem); }
.billet__qr {
    background: #fff; border-radius: var(--rayon); padding: 1rem;
    width: fit-content; margin-inline: auto;
}
.billet__qr svg { width: min(15rem, 60vw); height: auto; display: block; }
.billet__lignes { display: grid; gap: .1rem; margin: 1.6rem 0 0; }
.billet__ligne {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .7rem 0; border-bottom: 1px dashed var(--bordure);
    font-size: .95rem;
}
.billet__ligne:last-child { border-bottom: 0; }
.billet__ligne dt { color: var(--texte-doux); margin: 0; }
.billet__ligne dd { margin: 0; font-weight: 700; text-align: right; }
.billet__decoupe {
    height: 1.6rem; position: relative;
    background: repeating-linear-gradient(90deg, var(--bordure) 0 8px, transparent 8px 16px);
    background-size: 100% 1px; background-repeat: no-repeat; background-position: center;
}
.billet__decoupe::before, .billet__decoupe::after {
    content: ""; position: absolute; top: 50%; translate: 0 -50%;
    width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--nuit);
}
.billet__decoupe::before { left: -.8rem; }
.billet__decoupe::after  { right: -.8rem; }

/* --- 15. Horaires ---------------------------------------------------------- */
.horaires-liste { display: grid; gap: 0; }
.horaires-liste__ligne {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .95rem 0; border-bottom: 1px solid var(--bordure);
}
.horaires-liste__ligne:last-child { border-bottom: 0; }
.horaires-liste__jour { font-weight: 700; }
.horaires-liste__ligne[data-aujourdhui="1"] { color: var(--cyan); }
.horaires-liste__ligne[data-aujourdhui="1"] .horaires-liste__jour::after {
    content: attr(data-libelle); margin-left: .6rem; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .1em; opacity: .8;
}

.carte-lieu {
    border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--bordure);
    background: var(--surface); min-height: 20rem;
}
.carte-lieu iframe { width: 100%; height: 100%; min-height: 20rem; border: 0; display: block; }

/* --- 16 bis. Accueil : histoire, expérience, anniversaires ------------------ */
/* L'histoire : le texte d'abord, le logo-signature à côté sur grand écran. */
.histoire, .bloc-anniv {
    display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.histoire__texte > p, .bloc-anniv__texte > p { max-width: 62ch; }
.histoire__texte > p:not(.chapeau), .bloc-anniv__texte > p:not(.chapeau) {
    color: var(--texte-doux); line-height: 1.7; margin: 1rem 0 0;
}
.histoire__texte .chapeau, .bloc-anniv__texte .chapeau { color: var(--texte); margin-top: 1.4rem; }
.bloc-anniv__texte h2.section__titre { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); line-height: 1; }
.histoire__visuel { margin: 0; display: grid; place-items: center; }
.histoire__visuel img { width: min(100%, 30rem); height: auto; }

/* L'expérience : deux grandes cartes par ligne, le texte complet dessous. */
.grille.experience-grille { grid-template-columns: minmax(0, 1fr); }
.experience .carte__media { aspect-ratio: 16 / 9; }
.experience .carte__corps > p { font-size: 1rem; line-height: 1.65; }
.experience__lien { margin-top: auto; padding-top: .6rem; color: var(--cyan); font-weight: 700; }
.experience:hover { transform: translateY(-3px); }

/* Anniversaires : photo de la salle, texte à côté. */
.bloc-anniv__visuel {
    margin: 0; border-radius: var(--rayon-xl); overflow: hidden;
    border: 1px solid var(--bordure-vive); box-shadow: var(--ombre);
}
.bloc-anniv__visuel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Signature finale */
.appel h2.appel__slogan {
    max-width: 24ch; margin-inline: auto; line-height: 1.06;
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
}
.appel__signature { font-weight: 700; color: var(--texte); }

@media (min-width: 900px) {
    .histoire  { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .bloc-anniv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .grille.experience-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 16. Blocs d'appel ----------------------------------------------------- */
.appel {
    background: linear-gradient(118deg, var(--surface-2), var(--nuit-2));
    border: 1px solid var(--bordure-vive);
    border-radius: var(--rayon-xl);
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
}
.appel .btn { margin-top: 1.5rem; }

.coordonnee {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.1rem 0; border-bottom: 1px solid var(--bordure);
}
.coordonnee:last-child { border-bottom: 0; }
.coordonnee__icone {
    flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.1rem;
    background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .3);
}
.coordonnee dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texte-faible); }
.coordonnee dd { margin: .15rem 0 0; font-weight: 600; }
.coordonnee a { text-decoration: none; }
.coordonnee a:hover { color: var(--cyan); }

.reseaux { display: flex; gap: .6rem; flex-wrap: wrap; }
.reseaux a {
    display: grid; place-items: center; width: 2.8rem; height: 2.8rem;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--bordure);
    text-decoration: none; transition: all .15s ease;
}
.reseaux a:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }

/* Bouton WhatsApp flottant */
.whatsapp-flottant {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 55;
    width: 3.4rem; height: 3.4rem; border-radius: 50%;
    display: grid; place-items: center; text-decoration: none;
    background: #25d366; color: #062b12;
    box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .8);
}
.whatsapp-flottant:hover { transform: scale(1.06); }

/* --- 17. Pied de page ------------------------------------------------------ */
.pied {
    background: var(--nuit-2);
    border-top: 1px solid var(--bordure);
    padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
    margin-top: clamp(3rem, 7vw, 6rem);
}
.pied__grille {
    display: grid; gap: 2.2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.pied__logo img { height: 120px; width: auto; margin-bottom: 1rem; }
.pied h2 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .16em;
    color: var(--texte-faible); margin: 0 0 1rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied a { text-decoration: none; color: var(--texte-doux); font-size: .93rem; }
.pied a:hover { color: var(--cyan); }
.pied__bas {
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bordure);
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    color: var(--texte-faible); font-size: .84rem;
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* --- 18. Utilitaires ------------------------------------------------------- */
.centre { text-align: center; }
.centre .chapeau { margin-inline: auto; }
.pile { display: flex; flex-wrap: wrap; gap: .8rem; }
.pile--centre { justify-content: center; }
.masque { display: none !important; }
.visuellement-cache {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* --- 19. Grands écrans ----------------------------------------------------- */
@media (min-width: 640px) {
    .chiffres { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
    .reservation-mise-en-page { grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 1fr); }
    .recap { position: sticky; top: 5.5rem; }
    .whatsapp-flottant { right: 1.5rem; bottom: 1.5rem; width: 3.6rem; height: 3.6rem; }
}

/* La barre de navigation complète demande de la place : en dessous de 1024 px,
   le tiroir mobile reste plus lisible qu'un menu qui se casse sur deux lignes. */
@media (min-width: 1024px) {
    .nav {
        display: flex; align-items: center; gap: 1.6rem;
        margin-right: 1.4rem;
    }
    .nav > a, .nav__declencheur {
        color: var(--texte-doux); text-decoration: none; font-size: .92rem;
        font-weight: 600; padding: .4rem 0; background: none; border: 0; cursor: pointer;
        display: inline-flex; align-items: center; gap: .3rem;
    }
    .nav > a:hover, .nav__declencheur:hover { color: var(--texte); }
    .nav > a[aria-current="page"] { color: var(--cyan); }

    /* Sous-menu « Infos pratiques » */
    .nav__groupe { position: relative; }
    .nav__sous {
        position: absolute; top: calc(100% + .7rem); left: 50%; translate: -50% 0;
        min-width: 14rem; padding: .5rem;
        background: var(--nuit-2); border: 1px solid var(--bordure);
        border-radius: var(--rayon-s); box-shadow: var(--ombre);
        display: grid; gap: .1rem;
        opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    .nav__groupe:hover .nav__sous,
    .nav__groupe:focus-within .nav__sous { opacity: 1; visibility: visible; transform: none; }
    .nav__sous a { padding: .6rem .8rem; border-radius: 8px; text-decoration: none; font-size: .92rem; color: var(--texte-doux); }
    .nav__sous a:hover { background: var(--surface); color: var(--texte); }

    .etat { display: flex; }
    .entete__reserver { display: inline-flex; }
    .burger { display: none; }
}

@media (min-width: 1100px) {
    /* Au-delà de trois colonnes, les vignettes deviennent trop étroites pour
       que la photo raconte quelque chose : on plafonne. */
    .grille--3 { grid-template-columns: repeat(3, 1fr); }
    .grille--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- 20. Impression -------------------------------------------------------- */
@media print {
    .entete, .pied, .whatsapp-flottant, .btn, .tiroir, .evitement { display: none !important; }
    body { background: #fff; color: #000; }
    .billet {
        border: 2px solid #000; box-shadow: none; background: #fff; color: #000;
        max-width: none;
    }
    .billet__haut { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .billet__ligne dt { color: #444; }
    .section { padding: 0; }
}