/* ==========================================================================
   THÈME V3 — « billet »

   Langage visuel : papier blanc, encre presque noire, filets de 1 px plutôt
   que des ombres, et trois bandes sombres qui scandent la page (hero, appel
   à l'action, pied de page). L'accent est la couleur de marque servie par
   l'API : il n'apparaît que là où l'on veut que l'œil se pose — un prix, un
   bouton, un état actif.

   La carte de réservation est dessinée comme un billet : filet pointillé,
   encoches sur les côtés, chiffres tabulaires. C'est la seule pièce qui
   porte une ombre, et elle chevauche la limite entre le hero sombre et le
   corps blanc.

   Pas de Tailwind : les vues du thème n'utilisent que ces classes. Le
   vocabulaire (btn, field, chip, dp-*, drawer…) est volontairement le même
   que celui du thème v2 — ce sont les mêmes rôles, pas le même dessin.

   Les couleurs de marque arrivent en variables `--brand-primary` (triplet
   RGB) injectées par partials/head.php ; tout le reste en découle.

   Points de rupture : 560 (formulaires), 720 (tablette), 900 (nav bureau),
   1080 (hero en deux colonnes).
   ========================================================================== */

/* -------------------------------------------------------------- Tokens -- */

:root {
    /* Marque. Le repli (navigateur sans color-mix) prend la couleur de survol
       du back-office, déjà plus sombre que la principale. */
    --brand-rgb: var(--brand-primary, 0 64 153);
    --brand:     rgb(var(--brand-rgb));
    --brand-600: rgb(var(--brand-primary-hover, 0 51 122));
    --brand-700: rgb(var(--brand-primary-hover, 0 51 122));
    --brand-05:  rgb(var(--brand-rgb) / 0.05);
    --brand-10:  rgb(var(--brand-rgb) / 0.10);
    --brand-20:  rgb(var(--brand-rgb) / 0.20);
    --brand-40:  rgb(var(--brand-rgb) / 0.40);

    /* Neutres chauds : le gris froid durcit les photos de bitume, le gris
       chaud les pose. L'encre est presque noire, pas bleutée. */
    --paper:    #FFFFFF;
    --paper-2:  #FAF7F4;
    --paper-3:  #F3EEE8;
    --line:     #EAE4DD;
    --line-2:   #D8D0C7;
    --ink:      #121212;
    --ink-2:    #262626;
    --ink-soft: #55504B;
    --ink-mute: #8A837C;
    --on-ink:   #FFFFFF;
    --on-ink-soft: rgba(255, 255, 255, .74);
    --on-ink-mute: rgba(255, 255, 255, .52);
    --on-ink-line: rgba(255, 255, 255, .16);

    /* Fonds de section teintés par la marque : c'est ce qui donne le rythme
       de la page. Repli neutre chaud là où `color-mix` manque. */
    --tint-1: #FDF8F3;
    --tint-2: #F6EFE7;

    /* Sémantiques, distinctes de la marque. */
    --success:     #0F7A4D;
    --success-bg:  #E7F4EE;
    --warning:     #9A6400;
    --warning-bg:  #FBF2E0;
    --danger:      #C0332C;
    --danger-bg:   #FBEAE9;
    --star:        #E8A317;

    /* Rayons généreux : des cartes franchement arrondies, des boutons en
       gélule là où l'on veut qu'on clique. */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Ombres larges et douces, jamais de trait dur sous une carte. */
    --sh-card: 0 1px 2px rgba(18, 18, 18, .04), 0 8px 24px rgba(18, 18, 18, .05);
    --sh-lift: 0 2px 4px rgba(18, 18, 18, .04), 0 18px 44px rgba(18, 18, 18, .10);
    --sh-pop:  0 24px 60px rgba(18, 18, 18, .18), 0 2px 8px rgba(18, 18, 18, .08);
    --ring:    0 0 0 3px rgb(var(--brand-rgb) / 0.22);

    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

    --wrap: 1180px;
    --gutter: 20px;
}

@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --brand-600: color-mix(in srgb, var(--brand) 85%, #000);
        --brand-700: color-mix(in srgb, var(--brand) 70%, #000);

        /* Les bandes teintées restent une crème chaude, avec juste assez de
           marque pour que les six sites ne soient pas identiques. Mélanger
           davantage ne réchaufferait rien : une marque bleue tirerait la
           crème vers le gris, exactement ce qu'on cherche à éviter. */
        --tint-1: color-mix(in srgb, var(--brand) 3%, #FFF8F1);
        --tint-2: color-mix(in srgb, var(--brand) 7%, #F8F0E5);
    }
}

/* ---------------------------------------------------------------- Base -- */

.v3 *, .v3 *::before, .v3 *::after { box-sizing: border-box; }

/* Le tiroir mobile attend hors de l'écran, à droite : sans cette coupe, sa
   largeur s'ajoute à celle de la page et tout défile latéralement. `clip`
   plutôt que `hidden` : il n'ouvre pas de conteneur de défilement, et
   l'en-tête collant continue de se coller à la fenêtre.
   (Cette feuille n'est chargée que par le thème v3 : la portée est sûre.) */
html, body { overflow-x: clip; max-width: 100%; }

.v3 {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 600, pas 800 : seules les graisses 400 à 700 de Poppins sont
   auto-hébergées (voir assets/css/fonts.css). Au-delà de 700, le navigateur
   fabrique un gras synthétique en épaississant les contours — c'est ce qui
   donnait aux titres cet aspect pâteux. */
.v3 h1, .v3 h2, .v3 h3, .v3 h4 { margin: 0; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.v3 p { margin: 0; }
.v3 ul, .v3 ol { margin: 0; padding: 0; }
.v3 li { list-style: none; }
.v3 img { max-width: 100%; display: block; }
.v3 a { color: inherit; text-decoration: none; }
.v3 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.v3 input, .v3 textarea, .v3 select { font: inherit; color: inherit; }
.v3 :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }

/* Chiffres alignés : prix, dates, compteurs. */
.v3 .num, .v3 .price, .v3 .dp-day, .v3 .ticket__amt, .v3 .ptable td { font-variant-numeric: tabular-nums; }

.v3 .material-symbols-outlined { font-size: 20px; line-height: 1; flex: none; }
.v3 .icon-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

@keyframes v3-spin { to { transform: rotate(360deg); } }
.v3 .animate-spin { animation: v3-spin 1s linear infinite; }

/* ----------------------------------------------------------- Utilitaires -- */

.v3 .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.v3 .wrap--narrow { max-width: 760px; }
.v3 .wrap--mid { max-width: 980px; }

/* Classes basculées par app.js : elles doivent exister ici. */
.v3 .hidden { display: none !important; }
.v3 .opacity-0 { opacity: 0; }
.v3 .btn.opacity-70 { opacity: .7; pointer-events: none; }
.v3 .text-error { color: var(--danger) !important; }
.v3 .text-text-muted { color: var(--ink-mute); }

.v3 .sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.v3 .desk-only { display: none !important; }

/* `.only-narrow` / `.only-wide` : l'un ou l'autre selon la largeur. Masqués
   par media query plutôt que par une valeur de `display`, pour qu'un élément
   garde son propre mode d'affichage une fois visible (la grille des champs
   de date, par exemple). */
@media (max-width: 719.98px) { .v3 .only-wide { display: none !important; } }
@media (min-width: 720px) { .v3 .only-narrow { display: none !important; } }

.v3 .muted { color: var(--ink-soft); }
.v3 .small { font-size: 13.5px; }
.v3 .center { text-align: center; }
.v3 .mt-2 { margin-top: 8px; }
.v3 .mt-4 { margin-top: 16px; }
.v3 .mt-6 { margin-top: 24px; }
.v3 .mt-8 { margin-top: 32px; }

/* Surtitre : la signature typographique du thème. */
.v3 .eyebrow {
    display: block;
    font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-mute);
}
.v3 .eyebrow--brand { color: var(--brand-600); }
.v3 .eyebrow--light { color: var(--on-ink-mute); }

.v3 .inline-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: 15px;
    color: var(--ink);
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 2px;
    transition: border-color .15s, color .15s;
}
.v3 .inline-link:hover { color: var(--brand-600); border-color: var(--brand); }
.v3 .inline-link .material-symbols-outlined { font-size: 18px; transition: transform .15s; }
.v3 .inline-link:hover .material-symbols-outlined { transform: translateX(3px); }

/* Texte riche venant du back-office (réponses de FAQ, pages légales). */
.v3 .rich p { margin: 0 0 12px; }
.v3 .rich p:last-child { margin-bottom: 0; }
.v3 .rich ul, .v3 .rich ol { margin: 0 0 12px; padding-left: 20px; }
.v3 .rich ul li { list-style: none; position: relative; padding-left: 16px; margin-bottom: 6px; }
.v3 .rich ul li::before {
    content: ""; position: absolute; left: 0; top: .7em;
    width: 6px; height: 1px; background: var(--line-2);
}
.v3 .rich ol li { list-style: decimal; margin-bottom: 6px; }
.v3 .rich a { color: var(--brand-600); border-bottom: 1px solid var(--brand-40); }
.v3 .rich strong { font-weight: 600; }

/* -------------------------------------------------------------- Boutons -- */

.v3 .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 0 22px;
    border: 1px solid transparent; border-radius: var(--r-md);
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s;
}

/* Gélule : le bouton de l'en-tête et ceux qui ferment une section. */
.v3 .btn--pill { border-radius: var(--r-pill); padding: 0 26px; }
.v3 .btn:active { transform: translateY(1px); }
.v3 .btn .material-symbols-outlined { font-size: 19px; }

.v3 .btn--primary { background: var(--brand); color: var(--on-brand, #fff); }
.v3 .btn--primary:hover { background: var(--brand-600); }

.v3 .btn--outline { border-color: var(--line-2); color: var(--ink); background: var(--paper); }
.v3 .btn--outline:hover { border-color: var(--ink); }

.v3 .btn--ghost { color: var(--ink-soft); }
.v3 .btn--ghost:hover { color: var(--ink); background: var(--paper-2); }

.v3 .btn--on-ink { border-color: var(--on-ink-line); color: var(--on-ink); }
.v3 .btn--on-ink:hover { border-color: rgba(255, 255, 255, .4); }

.v3 .btn--lg { min-height: 54px; padding: 0 26px; font-size: 16px; }
.v3 .btn--block { width: 100%; }
.v3 .btn--icon { width: 46px; min-height: 46px; padding: 0; }

/* --------------------------------------------------------- Chips, badges -- */

.v3 .chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 13px 6px 10px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    font-size: 13px; font-weight: 500; color: var(--ink-soft);
    background: var(--paper);
}
.v3 .chip .material-symbols-outlined { font-size: 17px; color: var(--brand-600); }
.v3 .chip--on-ink { background: transparent; border-color: var(--on-ink-line); color: var(--on-ink-soft); }
.v3 .chip--on-ink .material-symbols-outlined { color: #fff; }

.v3 .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: var(--r-xs);
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    background: var(--paper-3); color: var(--ink-soft);
}
.v3 .badge--brand { background: var(--brand-10); color: var(--brand-700); }
.v3 .badge--success { background: var(--success-bg); color: var(--success); }

/* --------------------------------------------------------------- Header -- */

.v3 .site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
/* Le filet n'apparaît qu'une fois la page défilée : en haut, l'en-tête se
   fond dans le hero. `shadow-md` est la classe que pose app.js au-delà de
   50 px — nom hérité du thème v1, dessin propre à celui-ci. */
.v3 .site-header.shadow-md { border-bottom-color: var(--line); box-shadow: 0 1px 14px rgba(18, 18, 18, .05); }
.v3 .site-header__inner {
    display: flex; align-items: center; gap: 14px;
    min-height: 74px;
}
/* Le logo cède avant les commandes. En `flex: none`, un logotype large
   poussait le bouton du menu hors de l'écran sur téléphone : il garde
   désormais une largeur maximale et se réduit si besoin. */
.v3 .brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.v3 .brand img {
    height: 32px; width: auto;
    max-width: min(50vw, 210px); object-fit: contain; object-position: left center;
}
.v3 .brand__word { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }

.v3 .site-nav { display: none; align-items: center; gap: 4px; margin-left: 18px; }
.v3 .navlink {
    position: relative;
    padding: 9px 14px; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 600; color: var(--ink-soft);
    transition: color .15s, background-color .15s;
}
.v3 .navlink:hover { color: var(--ink); background: var(--paper-2); }
.v3 .navlink.is-active { color: var(--ink); }
.v3 .navlink.is-active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
    height: 2px; background: var(--brand); border-radius: 2px;
}
.v3 .site-header__spacer { flex: 1 1 auto; }

/* Le téléphone en gélule bordée, à côté du bouton plein : deux objets de
   même forme, un seul coloré — c'est lui qu'on veut voir. */
.v3 .site-header__phone {
    display: none; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 700; color: var(--ink);
    min-height: 44px; padding: 0 18px;
    border: 1px solid var(--line-2); border-radius: var(--r-pill);
    transition: border-color .15s, background-color .15s;
}
.v3 .site-header__phone:hover { border-color: var(--ink); background: var(--paper-2); }
.v3 .site-header__phone .material-symbols-outlined { font-size: 18px; color: var(--brand-600); }

@media (min-width: 900px) {
    .v3 .site-nav { display: flex; }
    .v3 .brand img { height: 36px; max-width: 260px; }
    .v3 .site-header__phone { display: inline-flex; }
    .v3 .desk-only { display: inline-flex !important; }
    .v3 .mob-only { display: none !important; }
}

/* ----------------------------------------------------- Sélecteur de langue -- */

.v3 .lang-switch { position: relative; }
.v3 .lang-switch__btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 42px; padding: 0 9px; border-radius: var(--r-xs);
    font-size: 14px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase;
}
.v3 .lang-switch__btn:hover { background: var(--paper-2); color: var(--ink); }
.v3 .lang-switch__globe { font-size: 19px; }
.v3 .lang-switch__btn [data-langmenu-chevron] { font-size: 17px; transition: transform .15s; }
.v3 .lang-switch__btn[aria-expanded="true"] [data-langmenu-chevron] { transform: rotate(180deg); }
.v3 .lang-switch__menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    min-width: 186px; padding: 5px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
}
.v3 .lang-switch__menu[hidden] { display: none; }
.v3 .lang-switch__item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: var(--r-xs);
    font-size: 14.5px; color: var(--ink-soft);
}
.v3 .lang-switch__item:hover { background: var(--paper-2); color: var(--ink); }
.v3 .lang-switch__item.is-active { color: var(--ink); font-weight: 600; }
.v3 .lang-switch__item .material-symbols-outlined { margin-left: auto; font-size: 17px; color: var(--brand); }
.v3 .lang-switch__code {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 20px; border-radius: 3px;
    background: var(--paper-3); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-soft);
}
.v3 .lang-switch__item.is-active .lang-switch__code { background: var(--brand); color: var(--on-brand, #fff); }

.v3 .lang-inline { display: flex; gap: 6px; }
.v3 .lang-inline a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 34px; padding: 0 9px;
    border: 1px solid var(--on-ink-line); border-radius: var(--r-xs);
    font-size: 12.5px; font-weight: 600; text-transform: uppercase; color: var(--on-ink-soft);
}
.v3 .lang-inline a:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.v3 .lang-inline a.is-active { background: #fff; border-color: #fff; color: var(--ink); }

/* ------------------------------------------------------- Tiroir mobile -- */

.v3 .drawer-scrim {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(14, 17, 22, .5);
    opacity: 0; pointer-events: none; transition: opacity .22s;
}
.v3 .drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
    width: min(340px, 86vw);
    display: flex; flex-direction: column;
    background: var(--paper); border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
}
/* `.v3` est posé sur <body> : l'état doit être écrit sur le même élément,
   sinon `body.drawer-open .drawer` (0,1,1) perd contre `.v3 .drawer` (0,2,0)
   et le tiroir ne s'ouvre jamais. */
.v3.drawer-open .drawer { transform: translateX(0); }
.v3.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
.v3.drawer-open { overflow: hidden; }

.v3 .drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.v3 .drawer__nav { display: flex; flex-direction: column; padding: 10px 10px 4px; gap: 2px; }
.v3 .drawer__nav a {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 12px; border-radius: var(--r-sm);
    font-size: 16px; font-weight: 500; color: var(--ink);
}
.v3 .drawer__nav a:hover { background: var(--paper-2); }
.v3 .drawer__nav a.is-active { background: var(--brand-05); color: var(--brand-700); font-weight: 600; }
.v3 .drawer__nav .material-symbols-outlined { font-size: 21px; color: var(--ink-mute); }
.v3 .drawer__nav a.is-active .material-symbols-outlined { color: var(--brand); }
.v3 .drawer__sep { height: 1px; background: var(--line); margin: 10px 12px; }
.v3 .drawer__small { font-size: 14.5px !important; color: var(--ink-soft) !important; }
.v3 .drawer__foot {
    margin-top: auto; display: flex; flex-direction: column; gap: 10px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--paper-2);
}
.v3 .drawer__foot .lang-inline a { border-color: var(--line-2); color: var(--ink-soft); }
.v3 .drawer__foot .lang-inline a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ----------------------------------------------------------------- Hero -- */

/* Hero clair et centré : une photo du parking posée très en retrait, le titre
   en gros noir, et la carte de réservation au milieu. Tout converge vers
   elle — c'est le seul objet de la page qui porte une ombre marquée. */
.v3 .hero {
    position: relative;
    isolation: isolate;
    background: var(--tint-1);
    color: var(--ink);
    padding: 44px 0 56px;
    text-align: center;
    overflow: hidden;
}

/* La photo, s'il y en a une pour cette marque. Sans elle, le fond teinté
   suffit : rien ne manque à l'écran, aucune zone grise. */
.v3 .hero__photo {
    position: absolute; inset: 0; z-index: -2;
    background-image: var(--hero-bg);
    background-size: cover; background-position: center;
    /* Un cran de saturation en moins : la photo doit rester un décor, et ne
       pas se disputer la couleur de la marque. */
    filter: saturate(.8);
}
/* Écrans étroits : la version 900 px, trois fois plus légère. */
@media (max-width: 900px) {
    .v3 .hero__photo { background-image: var(--hero-bg-sm, var(--hero-bg)); }
}
.v3 .hero::after {
    /* Le voile : c'est lui qui fait le filtre, pas une opacité sur la photo.
       Dense dès le haut pour que le titre noir reste net, puis complètement
       opaque au bas, là où se pose la carte de réservation — on voit le
       parking, on ne lit jamais au travers.
       Sans photo, il ne se voit pas : le fond teinté passe à travers. */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(255, 253, 250, .66) 0%,
        rgba(255, 253, 250, .86) 34%,
        rgba(255, 253, 250, .95) 60%,
        var(--tint-1) 92%
    );
}

.v3 .hero__inner { display: flex; flex-direction: column; align-items: center; }

/* Seule la partie du H1 qui précède les deux-points est affichée (voir la vue
   d'accueil) : c'est court, et la mesure est assez large pour que ça tienne
   sur une ligne au-delà de la tablette. Un intitulé plus long passe à deux
   lignes sans rien casser. */
.v3 .hero__title {
    font-size: clamp(31px, 5.2vw, 58px);
    letter-spacing: -.04em;
    line-height: 1.08;
    text-wrap: balance;
    max-width: 30ch;
}
.v3 .hero__lead {
    margin-top: 18px;
    max-width: 52ch;
    font-size: clamp(15.5px, 1.7vw, 17.5px);
    color: var(--ink-soft);
    text-wrap: pretty;
}
.v3 .hero__eyebrow { margin-bottom: 20px; }

/* Pastille d'ouverture : un point vivant, un fait court. */
.v3 .pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 16px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .82);
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
    backdrop-filter: blur(6px);
}
.v3 .pill__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--success); flex: none;
    box-shadow: 0 0 0 3px rgba(15, 122, 77, .16);
}

/* Badge de note, posé sous la carte de réservation. */
.v3 .ratingbadge {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: 26px; padding: 12px 20px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--sh-card);
}
.v3 .ratingbadge__score { display: flex; align-items: baseline; gap: 3px; }
.v3 .ratingbadge__n { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.v3 .ratingbadge__d { font-size: 12.5px; color: var(--ink-mute); }
.v3 .ratingbadge__meta { font-size: 12.5px; color: var(--ink-mute); text-align: left; }
.v3 .ratingbadge .stars { margin-bottom: 2px; }

/* ------------------------------------------------------- Carte « billet » -- */

/* La carte de réservation. Blanche, posée au centre, c'est elle qui porte
   l'ombre la plus marquée de la page : tout le reste est plat autour. */
.v3 .ticket-wrap { position: relative; z-index: 2; width: 100%; max-width: 580px; margin-top: 34px; }

.v3 .ticket {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lift);
    padding: 22px;
    text-align: left;
}
.v3 .ticket__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 18px;
}
.v3 .ticket__label { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }
.v3 .ticket__price { display: flex; align-items: baseline; gap: 5px; font-size: 13px; color: var(--ink-mute); }
.v3 .ticket__from { font-size: 13px; color: var(--ink-mute); }
.v3 .ticket__amt { font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: var(--brand-600); line-height: 1; }
.v3 .ticket__unit { font-size: 13px; color: var(--ink-mute); }

.v3 .ticket__fields { display: grid; gap: 12px; }
.v3 .ticket__cta { margin-top: 16px; }
.v3 .ticket__status { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }

/* Deux réassurances courtes, en ligne, cochées en vert. */
.v3 .ticket__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px;
    margin-top: 16px;
    font-size: 13px; color: var(--ink-soft);
}
.v3 .ticket__foot span { display: inline-flex; align-items: center; gap: 7px; }
.v3 .ticket__foot .material-symbols-outlined { font-size: 17px; color: var(--success); }

@media (min-width: 560px) {
    .v3 .ticket { padding: 26px 28px; }
    .v3 .ticket__fields { grid-template-columns: 1fr 1fr; }
    .v3 .ticket__cta { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
    .v3 .hero { padding: 64px 0 76px; }
}

/* ------------------------------------------------------------- Sections -- */

/* `scroll-margin-top` : l'en-tête est collant, un saut vers une ancre
   placerait sinon le titre de la section juste dessous. */
.v3 .section, .v3 .statband, .v3 [id] { scroll-margin-top: 90px; }

.v3 .section { padding: 64px 0; }
/* Les bandes teintées rythment la page ; plus de filets, c'est le changement
   de fond qui marque la limite. */
.v3 .section--tint { background: var(--tint-1); }
.v3 .section--warm { background: var(--tint-2); }
.v3 .section--tight { padding: 44px 0; }
.v3 .section--first { padding-top: 72px; }

.v3 .section__head { margin-bottom: 36px; max-width: 62ch; }
.v3 .section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.v3 .section__head--row {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
    max-width: none;
}
.v3 .section__title { font-size: clamp(27px, 4vw, 42px); text-wrap: balance; }
.v3 .section__lead { margin-top: 14px; color: var(--ink-soft); font-size: 16.5px; text-wrap: pretty; }
.v3 .section__eyebrow { margin-bottom: 14px; }

/* Bouton seul, centré, qui ferme une section. */
.v3 .section__action { display: flex; justify-content: center; margin-top: 38px; }

@media (min-width: 720px) { .v3 .section { padding: 88px 0; } }

/* ------------------------------------------------- Bande de chiffres -- */

/* Quatre faits, sur fond d'encre, juste sous le hero : ce que le visiteur
   veut savoir avant de lire quoi que ce soit. */
.v3 .statband { background: var(--ink); color: var(--on-ink); }
.v3 .statband__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 18px;
    padding: 26px 0;
}
.v3 .stat { display: flex; align-items: center; gap: 13px; }
.v3 .stat .material-symbols-outlined { font-size: 26px; color: var(--brand); flex: none; }
.v3 .stat__v { font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.v3 .stat__l { font-size: 12.5px; color: var(--on-ink-mute); line-height: 1.3; }

@media (min-width: 900px) {
    /* Autant de colonnes que de faits : une grille de quatre avec trois
       entrées laisse un vide que l'œil lit comme une donnée manquante. */
    .v3 .statband__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 30px 0; }
    .v3 .statband--3 { grid-template-columns: repeat(3, 1fr); }
    .v3 .statband--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------- Étapes -- */

/* Étapes : des cartes claires, le numéro en très gros dans l'angle, assez
   pâle pour rester un repère et jamais un titre. */
.v3 .steps { display: grid; gap: 18px; }
.v3 .step {
    position: relative; overflow: hidden;
    padding: 26px 28px 28px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
}
.v3 .step__n {
    position: absolute; top: 4px; right: 16px;
    font-size: 72px; font-weight: 700; line-height: 1;
    letter-spacing: -.06em;
    color: var(--brand-05);
    pointer-events: none;
}
/* Le titre s'arrête avant le chiffre : sans cette réserve, une intitulé de
   deux lignes passe dessous et les deux deviennent illisibles. */
.v3 .step h3 { font-size: 19px; margin-bottom: 9px; position: relative; padding-right: 44px; }
.v3 .step p { color: var(--ink-soft); font-size: 15px; position: relative; }

@media (min-width: 720px) {
    .v3 .steps { grid-template-columns: repeat(3, 1fr); }
    .v3 .steps--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .v3 .steps--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------- Cartes -- */

.v3 .cards { display: grid; gap: 18px; }
@media (min-width: 620px) { .v3 .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .v3 .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.v3 .card {
    display: flex; flex-direction: column;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .15s, box-shadow .2s, transform .2s;
}
.v3 .card:hover { border-color: transparent; box-shadow: var(--sh-lift); transform: translateY(-2px); }
.v3 .card__media { aspect-ratio: 16 / 10; background: var(--paper-3); }
.v3 .card__media img { width: 100%; height: 100%; object-fit: cover; }
.v3 .card__media--icon {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: auto; padding: 26px 0 0; background: transparent;
}
.v3 .card__media--icon .material-symbols-outlined { font-size: 30px; color: var(--brand); }
.v3 .card__body { padding: 18px 20px 22px; }
.v3 .card__title { display: flex; align-items: center; gap: 9px; font-size: 17px; margin-bottom: 7px; }
.v3 .card__title .material-symbols-outlined { font-size: 20px; color: var(--brand); }
.v3 .card__text { color: var(--ink-soft); font-size: 15px; }
.v3 .card__tag { align-self: flex-start; margin: 0 20px 14px; }

/* ------------------------------------------------------------ Avis -- */

/* Les avis défilent horizontalement : on en montre plus que trois sans
   allonger la page, et le geste est naturel au doigt comme au pavé tactile.
   En grille sous 760 px, où le défilement latéral désoriente. */
.v3 .reviews { display: grid; gap: 16px; }

@media (min-width: 760px) {
    .v3 .reviews {
        display: flex; gap: 18px;
        overflow-x: auto; scroll-snap-type: x mandatory;
        padding-bottom: 18px; margin-bottom: -4px;
        scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
    }
    .v3 .reviews > .tcard { flex: 0 0 320px; scroll-snap-align: start; }
    .v3 .reviews::-webkit-scrollbar { height: 6px; }
    .v3 .reviews::-webkit-scrollbar-track { background: var(--line); border-radius: 3px; }
    .v3 .reviews::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
}

.v3 .tcard {
    display: flex; flex-direction: column; gap: 14px;
    padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--paper);
}
.v3 .tcard__text { color: var(--ink); font-size: 15px; text-wrap: pretty; }
.v3 .tcard__author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.v3 .tcard__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--brand); color: var(--on-brand, #fff); font-size: 15px; font-weight: 700;
    flex: none;
}
.v3 .tcard__name { display: block; font-size: 14.5px; font-weight: 700; }
.v3 .tcard__meta { display: block; font-size: 12.5px; color: var(--ink-mute); }

/* En-tête d'avis : titre à gauche, note encartée à droite. */
.v3 .reviews-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 22px; margin-bottom: 32px;
}
.v3 .reviews-head > div:first-child { max-width: 48ch; }

.v3 .stars { display: inline-flex; gap: 1px; color: var(--star); }
.v3 .stars .material-symbols-outlined { font-size: 17px; }
.v3 .stars--lg .material-symbols-outlined { font-size: 21px; }
.v3 .rating-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); }

/* --------------------------------------------------------------- FAQ -- */

/* FAQ : chaque question est une carte à part, avec un bouton rond qui passe
   de + à − . Ouverte, la carte prend la teinte de la marque. */
.v3 .faq-list { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.v3 .faq-item {
    background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-md);
    transition: border-color .18s, box-shadow .18s;
}
.v3 .faq-item[open] { border-color: var(--brand-20); box-shadow: var(--sh-card); }
.v3 .faq-item > summary {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px; cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 700; letter-spacing: -.02em;
}
.v3 .faq-item > summary::-webkit-details-marker { display: none; }
.v3 .faq-item > summary::after {
    content: "+"; margin-left: auto; flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--brand-10); color: var(--brand-700);
    font-size: 18px; font-weight: 600; line-height: 1;
    transition: background-color .18s, color .18s;
}
.v3 .faq-item[open] > summary::after { content: "–"; background: var(--brand); color: var(--on-brand, #fff); }
.v3 .faq-item > summary:hover { color: var(--brand-700); }
.v3 .faq-item__a { padding: 0 60px 20px 20px; color: var(--ink-soft); font-size: 15.5px; }

/* ---------------------------------------------- Paliers de prix (accueil) -- */

/* Quatre durées courantes, le palier le plus réservé en noir. Ce ne sont pas
   les tarifs complets — la grille entière vit sur la page Tarifs — mais
   l'ordre de grandeur, que le visiteur cherche avant tout le reste. */
.v3 .tiers { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .v3 .tiers { grid-template-columns: repeat(4, 1fr); } }

.v3 .tier {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 28px 16px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    text-align: center;
}
.v3 .tier__name {
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-mute);
}
.v3 .tier__price { font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.v3 .tier__days { font-size: 13px; color: var(--ink-mute); }

/* Le palier mis en avant : fond d'encre, et son étiquette à cheval sur le
   bord supérieur. */
.v3 .tier--best {
    background: var(--ink); border-color: var(--ink); color: var(--on-ink);
    box-shadow: var(--sh-lift);
}
.v3 .tier--best .tier__name { color: var(--brand); }
.v3 .tier--best .tier__days { color: var(--on-ink-mute); }
.v3 .tier__flag {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    padding: 5px 13px; border-radius: var(--r-pill);
    background: var(--brand); color: var(--on-brand, #fff);
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
}
.v3 .tiers-note {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin-top: 26px; font-size: 14.5px; color: var(--ink-soft);
}
.v3 .tiers-note .material-symbols-outlined { font-size: 19px; color: var(--success); }

/* ------------------------------------------------------ Photo et texte -- */

.v3 .showcase { display: grid; gap: 28px; align-items: center; }
.v3 .showcase__media { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.v3 .showcase__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.v3 .showcase__title { font-size: clamp(26px, 3.6vw, 38px); text-wrap: balance; }
.v3 .showcase__text { margin-top: 16px; color: var(--ink-soft); font-size: 16px; text-wrap: pretty; }
.v3 .showcase__list { display: grid; gap: 12px; margin-top: 22px; }
.v3 .showcase__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; }
.v3 .showcase__list .material-symbols-outlined { font-size: 20px; color: var(--brand); margin-top: 1px; }

@media (min-width: 880px) {
    .v3 .showcase { grid-template-columns: 1fr 1fr; gap: 56px; }
    /* Pas de photo : une seule colonne, mesure limitée pour que les lignes
       restent lisibles. */
    .v3 .showcase--solo { grid-template-columns: minmax(0, 760px); justify-content: center; text-align: center; }
    .v3 .showcase--solo .showcase__list { text-align: left; max-width: 620px; margin-left: auto; margin-right: auto; }
}

/* --------------------------------------------------- Appel à l'action -- */

/* L'appel à l'action est une carte d'encre posée sur la crème, pas une bande
   pleine largeur : il se détache du pied de page, qui est sombre lui aussi. */
.v3 .cta-band { background: var(--tint-1); padding: 0 0 72px; }
.v3 .cta-band__inner {
    display: grid; gap: 26px; align-items: center;
    padding: 40px 26px;
    background: var(--ink); color: var(--on-ink);
    border-radius: var(--r-lg);
}
@media (min-width: 720px) { .v3 .cta-band__inner { padding: 48px 44px; } }
.v3 .cta-band h2 { font-size: clamp(24px, 3.2vw, 34px); }
.v3 .cta-band p { margin-top: 12px; color: var(--on-ink-soft); max-width: 56ch; }
.v3 .cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.v3 .cta-band__link { font-size: 15px; color: var(--on-ink-soft); border-bottom: 1px solid var(--on-ink-line); padding-bottom: 2px; }
.v3 .cta-band__link:hover { color: #fff; border-color: #fff; }
@media (min-width: 860px) {
    .v3 .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
}

/* ------------------------------------------------------------- Footer -- */

/* Pas de filet en haut : l'appel à l'action qui précède est désormais une
   carte posée sur la crème, le pied de page commence donc franchement. */
.v3 .site-footer { background: var(--ink); color: var(--on-ink-soft); padding: 60px 0 30px; }
.v3 .site-footer a { color: var(--on-ink-soft); }
.v3 .site-footer a:hover { color: #fff; }
.v3 .foot-grid { display: grid; gap: 34px; }
@media (min-width: 720px) { .v3 .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .v3 .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.v3 .foot-brand__logo {
    display: inline-flex; padding: 10px 14px; border-radius: var(--r-sm);
    background: #fff; margin-bottom: 18px;
}
.v3 .foot-brand__logo img { height: 28px; width: auto; }
.v3 .foot-brand__word { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 14px; display: block; }
.v3 .foot-brand p { font-size: 14px; max-width: 42ch; }
.v3 .foot-title {
    font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--on-ink-mute); margin-bottom: 16px;
}
.v3 .foot-list { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.v3 .foot-contact { display: flex; flex-direction: column; gap: 13px; font-size: 14.5px; }
.v3 .foot-contact li { display: flex; align-items: flex-start; gap: 10px; }
.v3 .foot-contact .material-symbols-outlined { font-size: 18px; color: var(--on-ink-mute); margin-top: 2px; }

.v3 .foot-pay { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.v3 .pay-badge {
    display: inline-flex; align-items: center; justify-content: center;
    height: 26px; min-width: 42px; padding: 0 7px;
    background: #fff; border-radius: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.v3 .pay-badge img { height: 15px; width: auto; }

.v3 .foot-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--on-ink-line);
    font-size: 13px; color: var(--on-ink-mute);
}
.v3 .foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ------------------------------------------------------- En-tête de page -- */

/* Même crème que le hero, sans filet de séparation : les pages internes
   s'ouvrent sur la même matière que l'accueil. */
.v3 .page-head { padding: 48px 0 44px; background: var(--tint-1); }
.v3 .page-head__back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-mute); margin-bottom: 20px;
}
.v3 .page-head__back:hover { color: var(--ink); }
.v3 .page-head__back .material-symbols-outlined { font-size: 17px; }
.v3 .page-head__h1 { font-size: clamp(29px, 4.4vw, 46px); letter-spacing: -.035em; text-wrap: balance; max-width: 22ch; }
.v3 .page-head__lead { margin-top: 16px; max-width: 62ch; color: var(--ink-soft); font-size: 16.5px; text-wrap: pretty; }
.v3 .page-head__eyebrow { margin-bottom: 14px; }
.v3 .page-head__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* La section qui suit l'en-tête revient au blanc : la crème ne doit pas
   déborder sur le contenu, sans quoi la page n'a plus de respiration. */
.v3 .page-head + .section { padding-top: 56px; }

/* ----------------------------------------------------------- Formulaires -- */

.v3 .form-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 22px;
}
@media (min-width: 560px) { .v3 .form-card { padding: 28px 30px; } }

.v3 .form-grid { display: grid; gap: 16px; }
@media (min-width: 620px) { .v3 .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.v3 .form-grid--2 .field--full { grid-column: 1 / -1; }

.v3 .field { display: flex; flex-direction: column; gap: 7px; }
.v3 .field__label { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.v3 .field__hint { font-size: 12.5px; color: var(--ink-mute); }
.v3 .field__err { font-size: 13px; color: var(--danger); }

.v3 .input, .v3 .textarea, .v3 .select {
    width: 100%; min-height: 48px; padding: 12px 14px;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm);
    font-size: 15.5px; color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.v3 .input::placeholder, .v3 .textarea::placeholder { color: var(--ink-mute); }
.v3 .input:focus, .v3 .textarea:focus, .v3 .select:focus {
    outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
.v3 .input[aria-invalid="true"], .v3 .textarea[aria-invalid="true"], .v3 .is-invalid { border-color: var(--danger); }
.v3 .textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.v3 .alert {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 14px 16px; border-radius: var(--r-sm); margin-bottom: 22px;
    font-size: 14.5px; border: 1px solid transparent;
}
.v3 .alert p { margin: 0; }
.v3 .alert .material-symbols-outlined { font-size: 19px; margin-top: 1px; }
.v3 .alert--success { background: var(--success-bg); border-color: rgba(15, 122, 77, .2); color: var(--success); }
.v3 .alert--error { background: var(--danger-bg); border-color: rgba(192, 51, 44, .2); color: var(--danger); }
.v3 .alert--info { background: var(--paper-2); border-color: var(--line); color: var(--ink-soft); }
.v3 .alert--warning { background: var(--warning-bg); border-color: rgba(154, 100, 0, .2); color: var(--warning); }

/* Choix d'une réservation (remboursement, retrouver sa réservation). */
.v3 .pick { display: grid; gap: 10px; }
.v3 .pick__item {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 15px 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
    cursor: pointer; transition: border-color .15s, background-color .15s;
}
.v3 .pick__item:hover { border-color: var(--ink-mute); }
.v3 .pick__item:has(:checked) { border-color: var(--brand); background: var(--brand-05); }
.v3 .pick__item input { accent-color: var(--brand); margin-top: 4px; }

.v3 .summary {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
    padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--paper-2); font-size: 14.5px;
}
.v3 .summary dt { color: var(--ink-mute); white-space: nowrap; }
.v3 .summary dd { margin: 0; font-weight: 600; }

/* ----------------------------------------------------- Calendrier (dp-*) -- */
/* Mêmes sélecteurs que public/assets/js/datepicker.js, habillage du thème. */

.v3 .dp { position: relative; }
.v3 .dp-trigger {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 48px; padding: 0 14px;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm);
    text-align: left; transition: border-color .15s, box-shadow .15s;
}
.v3 .dp-trigger:hover { border-color: var(--ink-mute); }
.v3 .dp-trigger:focus-visible, .v3 .dp[data-open="true"] .dp-trigger {
    outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
.v3 .dp-trigger[aria-invalid="true"] { border-color: var(--danger); }
.v3 .dp-icon { color: var(--ink-mute); font-size: 19px; }
.v3 .dp-value { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.v3 .dp-value[data-empty="true"] { color: var(--ink-mute); font-weight: 400; }

.v3 .dp-backdrop { position: fixed; inset: 0; z-index: 59; background: transparent; }
.v3 .dp-panel {
    position: fixed; z-index: 60;
    width: 330px; max-width: calc(100vw - 2rem); padding: 16px;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
}
.v3 .dp-panel[hidden] { display: none; }
.v3 .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.v3 .dp-title { font-size: 15.5px; font-weight: 600; text-transform: capitalize; }
.v3 .dp-nav {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--r-xs); color: var(--ink-soft);
}
.v3 .dp-nav:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.v3 .dp-nav:disabled { color: var(--line-2); cursor: not-allowed; }
.v3 .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.v3 .dp-weekday {
    padding-bottom: 8px; text-align: center;
    font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
}
.v3 .dp-day {
    position: relative; height: 40px; border-radius: var(--r-xs);
    font-size: 14px; font-weight: 500; color: var(--ink);
    transition: background-color .12s, color .12s;
}
.v3 .dp-day:hover:not([data-disabled]):not([data-selected="true"]) { background: var(--paper-3); }
.v3 .dp-day[data-outside="true"] { color: var(--ink-mute); font-weight: 400; opacity: .6; }
.v3 .dp-day[data-disabled] { color: var(--line-2); cursor: not-allowed; text-decoration: line-through; }
.v3 .dp-day[data-today="true"]::after {
    content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--brand);
}
.v3 .dp-day[data-in-range="true"] { background: var(--brand-10); border-radius: 0; }
.v3 .dp-day[data-selected="true"] { background: var(--brand); color: var(--on-brand, #fff); font-weight: 600; }
.v3 .dp-day[data-disabled][data-selected="true"] { color: var(--on-brand, #fff); text-decoration: none; cursor: default; }
.v3 .dp-day[data-selected="true"][data-today="true"]::after { background: var(--on-brand, #fff); }
.v3 .dp-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.v3 .dp-hint { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; }
.v3 .dp-clear { font-size: 13px; font-weight: 600; color: var(--brand-600); padding: 6px 10px; border-radius: var(--r-xs); }
.v3 .dp-clear:hover { background: var(--paper-2); }

@media (max-width: 480px) {
    .v3 .ticket { padding: 18px 16px; }
    .v3 .ticket__perf { margin-left: -16px; margin-right: -16px; }
    .v3 .dp-trigger { padding: 0 12px; gap: 8px; }
    .v3 .dp-value { font-size: clamp(12.5px, 3.5vw, 15px); }
    .v3 .dp-panel {
        top: auto !important; bottom: 0 !important; left: 0 !important; right: 0;
        width: 100%; max-width: none;
        padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
        border-radius: var(--r-lg) var(--r-lg) 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    }
    .v3 .dp-backdrop { background: rgba(14, 17, 22, .45); }
    .v3 .dp-day { height: 44px; }
}

/* ------------------------------------------------------------- Tarifs -- */

.v3 .price-layout { display: grid; gap: 26px; align-items: start; }
@media (min-width: 980px) { .v3 .price-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }

.v3 .ptable { width: 100%; border-collapse: collapse; }
.v3 .ptable caption { text-align: left; padding-bottom: 14px; color: var(--ink-soft); font-size: 15px; }
.v3 .ptable th {
    text-align: left; padding: 0 0 10px;
    font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-mute); border-bottom: 1px solid var(--ink);
}
.v3 .ptable th:last-child, .v3 .ptable td:last-child { text-align: right; }
.v3 .ptable td { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.v3 .ptable td:last-child { font-weight: 600; }
.v3 .ptable tr.is-best td { background: var(--brand-05); }
.v3 .ptable tr.is-best td:first-child { font-weight: 600; }
.v3 .ptable__tag { margin-left: 9px; }

.v3 .plans { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 620px) { .v3 .plans { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.v3 .plan {
    display: flex; flex-direction: column; gap: 6px;
    padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md);
}
.v3 .plan--featured { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.v3 .plan__name { font-size: 15px; font-weight: 600; }
.v3 .plan__price { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.v3 .plan--featured .plan__price { color: #fff; }
.v3 .plan__old { font-size: 14px; color: var(--ink-mute); text-decoration: line-through; }
.v3 .plan__tag { margin-top: 4px; align-self: flex-start; }

.v3 .aside-card {
    padding: 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
}
.v3 .aside-card + .aside-card { margin-top: 14px; }
.v3 .aside-card--ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.v3 .aside-card--ink p { color: var(--on-ink-soft); }
.v3 .aside-card h2, .v3 .aside-card h3 { font-size: 16.5px; margin-bottom: 10px; }
.v3 .aside-list { display: flex; flex-direction: column; gap: 14px; }
.v3 .aside-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; }
.v3 .aside-list .material-symbols-outlined { font-size: 19px; color: var(--brand); margin-top: 2px; }
.v3 .aside-list b { display: block; font-weight: 600; }
.v3 .aside-list span { color: var(--ink-soft); }

@media (min-width: 980px) { .v3 .aside-sticky { position: sticky; top: 92px; } }

/* --------------------------------------------------------- Services -- */

.v3 .svc { display: grid; gap: 0; }
.v3 .svc__item {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start;
    padding: 24px 0; border-top: 1px solid var(--line);
}
.v3 .svc__item:last-child { border-bottom: 1px solid var(--line); }
.v3 .svc__ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-sm);
    background: var(--paper-2); border: 1px solid var(--line);
}
.v3 .svc__ic .material-symbols-outlined { font-size: 22px; color: var(--brand); }
.v3 .svc__item h3 { font-size: 18px; margin-bottom: 6px; }
.v3 .svc__item p { color: var(--ink-soft); font-size: 15px; }
.v3 .svc__features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* --------------------------------------------------------- Landing SEO -- */

.v3 .landing { display: grid; gap: 34px; align-items: start; padding-bottom: 20px; }
@media (min-width: 980px) { .v3 .landing { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; } }

.v3 .prose { max-width: 70ch; color: var(--ink-soft); font-size: 16.5px; }
.v3 .prose h2 {
    margin: 38px 0 14px; font-size: clamp(21px, 2.6vw, 27px); color: var(--ink);
    padding-top: 26px; border-top: 1px solid var(--line);
}
.v3 .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.v3 .prose h3 { margin: 26px 0 10px; font-size: 18px; color: var(--ink); }
.v3 .prose p { margin-bottom: 14px; text-wrap: pretty; }
.v3 .prose ol { counter-reset: v3-ol; margin: 0 0 16px; }
.v3 .prose ol li {
    counter-increment: v3-ol; position: relative;
    padding-left: 34px; margin-bottom: 12px;
}
.v3 .prose ol li::before {
    content: counter(v3-ol, decimal-leading-zero);
    position: absolute; left: 0; top: 1px;
    font-size: 13px; font-weight: 700; color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.v3 .prose ul { margin: 0 0 16px; }
.v3 .prose ul li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.v3 .prose ul li::before {
    content: ""; position: absolute; left: 0; top: .75em; width: 7px; height: 1px; background: var(--line-2);
}
.v3 .prose a { color: var(--brand-600); border-bottom: 1px solid var(--brand-40); }
.v3 .prose strong { color: var(--ink); font-weight: 600; }
.v3 .prose .not-prose { margin: 18px 0; }

.v3 .plist { border-top: 1px solid var(--line); }
.v3 .plist li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px;
}
.v3 .plist b { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ------------------------------------------------------------ Juridique -- */

.v3 .legal { padding: 34px 0 64px; }
.v3 .legal__updated { font-size: 13px; color: var(--ink-mute); margin-bottom: 26px; }
.v3 .legal__body { max-width: 72ch; color: var(--ink-soft); font-size: 16px; }
.v3 .legal__body h2 {
    margin: 32px 0 12px; font-size: 20px; color: var(--ink);
    padding-top: 22px; border-top: 1px solid var(--line);
}
.v3 .legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.v3 .legal__body h3 { margin: 22px 0 8px; font-size: 16.5px; color: var(--ink); }
.v3 .legal__body p { margin-bottom: 13px; }
.v3 .legal__body ul { margin: 0 0 14px; }
.v3 .legal__body li { position: relative; padding-left: 18px; margin-bottom: 7px; }
.v3 .legal__body li::before {
    content: ""; position: absolute; left: 0; top: .75em; width: 7px; height: 1px; background: var(--line-2);
}
.v3 .legal__body a { color: var(--brand-600); border-bottom: 1px solid var(--brand-40); }
.v3 .legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
.v3 .legal__body th, .v3 .legal__body td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.v3 .legal__foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); }

/* --------------------------------------------------- Carte promotionnelle -- */

.v3 .promo-float {
    position: fixed; z-index: 55;
    right: 16px; bottom: 16px; left: 16px;
    transition: opacity .3s, transform .3s;
}
@media (min-width: 720px) { .v3 .promo-float { left: auto; width: 360px; } }
.v3 .promo-float__card {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 14px 40px 14px 16px;
    background: var(--ink); color: #fff; border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
}
.v3 .promo-float__ic { display: inline-flex; color: var(--brand); }
.v3 .promo-float__ic .material-symbols-outlined { font-size: 22px; }
.v3 .promo-float__title { font-size: 14px; font-weight: 500; line-height: 1.35; }
.v3 .promo-float__code {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px; border-radius: var(--r-xs);
    background: rgba(255, 255, 255, .1); border: 1px dashed rgba(255, 255, 255, .35);
    font-size: 13.5px; font-weight: 700; letter-spacing: .06em; color: #fff;
}
.v3 .promo-float__code:hover { background: rgba(255, 255, 255, .18); }
.v3 .promo-float__code .material-symbols-outlined { font-size: 15px; }
.v3 .promo-float__feedback {
    position: absolute; left: 50px; bottom: 3px;
    font-size: 11.5px; color: var(--brand); transition: opacity .2s;
}
.v3 .promo-float__close {
    position: absolute; top: 6px; right: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--r-xs); color: var(--on-ink-mute);
}
.v3 .promo-float__close:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.v3 .promo-float__close .material-symbols-outlined { font-size: 17px; }

/* ------------------------------------------------ Appel à l'action collant -- */

.v3 .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 54;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform .25s;
}
.v3 .sticky-cta[data-visible="true"] { transform: translateY(0); }
.v3 .sticky-cta .btn { width: 100%; }
@media (min-width: 720px) { .v3 .sticky-cta { display: none; } }
.v3.has-sticky-cta .site-footer { padding-bottom: 92px; }
@media (min-width: 720px) { .v3.has-sticky-cta .site-footer { padding-bottom: 28px; } }

/* ------------------------------------------------- Bandeau API hors ligne -- */

.v3 .api-offline {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 14px 0; padding: 12px 14px;
    border: 1px dashed var(--warning); border-radius: var(--r-sm);
    background: var(--warning-bg); color: var(--warning); font-size: 13.5px;
}
.v3 .api-offline code { font-size: 12px; word-break: break-all; }

/* ------------------------------------------------------------- Page 404 -- */

.v3 .notfound { padding: 90px 0 100px; text-align: center; }
.v3 .notfound__code {
    font-size: clamp(64px, 16vw, 128px); font-weight: 700; line-height: 1;
    letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--line-2);
}
.v3 .notfound h1 { margin: 20px 0 12px; font-size: clamp(22px, 3.4vw, 30px); }
.v3 .notfound p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto; }
.v3 .notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ----------------------------------------------------------- Impression -- */

@media print {
    .v3 .site-header, .v3 .drawer, .v3 .drawer-scrim, .v3 .promo-float,
    .v3 .sticky-cta, .v3 .cta-band, .v3 .site-footer { display: none !important; }
    .v3 { color: #000; }
    .v3 .hero { background: none; color: #000; padding: 20px 0; }
}

/* ------------------------------------------- Mouvement réduit / contraste -- */

@media (prefers-reduced-motion: reduce) {
    .v3 *, .v3 *::before, .v3 *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}