/* ==========================================================================
   THÈME V4 — « agence »

   Langage visuel : blanc et bleu-gris froid, grandes cartes arrondies, ombres
   très douces, icônes au trait. L'encre est un ardoise foncé plutôt qu'un
   noir — sur fond clair et à grande taille, le noir pur durcit la page.

   Le rythme tient à l'alternance blanc / bleu-gris très pâle : pas de filets
   de séparation, pas de bandes sombres. La seule zone dense est le pied de
   page.

   La carte de réservation est posée sur la photo du hero, à droite de
   l'accroche. C'est la pièce qui porte l'ombre la plus marquée ; tout le
   reste est presque plat.

   Pas de Tailwind : les vues du thème n'utilisent que ces classes. Le
   vocabulaire (btn, field, chip, dp-*, drawer…) est celui des thèmes v2 et
   v3 — mêmes rôles, dessin différent.

   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 113 188);
    --brand:     rgb(var(--brand-rgb));
    --brand-600: rgb(var(--brand-primary-hover, 0 90 150));
    --brand-700: rgb(var(--brand-primary-hover, 0 90 150));
    --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 froids, légèrement bleutés : ils s'accordent au bleu de marque
       et laissent les photos d'aéroport respirer. */
    --paper:    #FFFFFF;
    --paper-2:  #F7FAFC;
    --paper-3:  #EDF2F7;
    --line:     #E3E9EF;
    --line-2:   #C9D4DF;
    --ink:      #233140;
    --ink-2:    #2F4053;
    --ink-soft: #566879;
    --ink-mute: #8295A6;
    --on-ink:   #FFFFFF;
    --on-ink-soft: rgba(255, 255, 255, .76);
    --on-ink-mute: rgba(255, 255, 255, .56);
    --on-ink-line: rgba(255, 255, 255, .16);

    /* Les deux fonds de section. `tint-1` scande la page, `tint-2` sert aux
       encarts posés dessus. Teintés par la marque quand le navigateur sait
       le faire, repli bleu-gris sinon. */
    --tint-1: #F1F5F8;
    --tint-2: #E8F0F7;

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

    /* Rayons larges : des cartes nettement arrondies, des boutons en gélule. */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* Ombres froides et diffuses : la teinte bleue évite le gris sale qu'on
       obtient en ombrant du noir pur sur un fond bleuté. */
    --sh-card: 0 1px 2px rgba(35, 49, 64, .04), 0 6px 20px rgba(35, 49, 64, .05);
    --sh-lift: 0 2px 6px rgba(35, 49, 64, .05), 0 16px 40px rgba(35, 49, 64, .10);
    --sh-pop:  0 24px 64px rgba(35, 49, 64, .18), 0 2px 8px rgba(35, 49, 64, .08);
    --ring:    0 0 0 3px rgb(var(--brand-rgb) / 0.22);

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

    --wrap: 1240px;
    --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);

        /* Une pointe de marque dans les fonds : les six sites gardent le même
           rythme, la teinte suit chacun. */
        --tint-1: color-mix(in srgb, var(--brand) 5%, #F4F7FA);
        --tint-2: color-mix(in srgb, var(--brand) 11%, #EFF4F9);
    }
}

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

.v4 *, .v4 *::before, .v4 *::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 v4 : la portée est sûre.) */
html, body { overflow-x: clip; max-width: 100%; }

.v4 {
    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. */
.v4 h1, .v4 h2, .v4 h3, .v4 h4 { margin: 0; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.v4 p { margin: 0; }
.v4 ul, .v4 ol { margin: 0; padding: 0; }
.v4 li { list-style: none; }
.v4 img { max-width: 100%; display: block; }
.v4 a { color: inherit; text-decoration: none; }
.v4 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.v4 input, .v4 textarea, .v4 select { font: inherit; color: inherit; }
.v4 :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }

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

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

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

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

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

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

.v4 .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;
}

.v4 .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) { .v4 .only-wide { display: none !important; } }
@media (min-width: 720px) { .v4 .only-narrow { display: none !important; } }

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

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

.v4 .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;
}
.v4 .inline-link:hover { color: var(--brand-600); border-color: var(--brand); }
.v4 .inline-link .material-symbols-outlined { font-size: 18px; transition: transform .15s; }
.v4 .inline-link:hover .material-symbols-outlined { transform: translateX(3px); }

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

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

.v4 .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. */
.v4 .btn--pill { border-radius: var(--r-pill); padding: 0 26px; }
.v4 .btn:active { transform: translateY(1px); }
.v4 .btn .material-symbols-outlined { font-size: 19px; }

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

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

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

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

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

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

.v4 .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);
}
.v4 .chip .material-symbols-outlined { font-size: 17px; color: var(--brand-600); }
.v4 .chip--on-ink { background: transparent; border-color: var(--on-ink-line); color: var(--on-ink-soft); }
.v4 .chip--on-ink .material-symbols-outlined { color: #fff; }

.v4 .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);
}
.v4 .badge--brand { background: var(--brand-10); color: var(--brand-700); }
.v4 .badge--success { background: var(--success-bg); color: var(--success); }

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

.v4 .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. */
.v4 .site-header.shadow-md { border-bottom-color: var(--line); box-shadow: 0 1px 14px rgba(18, 18, 18, .05); }
.v4 .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. */
.v4 .brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.v4 .brand img {
    height: 32px; width: auto;
    max-width: min(50vw, 210px); object-fit: contain; object-position: left center;
}
.v4 .brand__word { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }

.v4 .site-nav { display: none; align-items: center; gap: 4px; margin-left: 18px; }
.v4 .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;
}
.v4 .navlink:hover { color: var(--ink); background: var(--paper-2); }
.v4 .navlink.is-active { color: var(--ink); }
.v4 .navlink.is-active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
    height: 2px; background: var(--brand); border-radius: 2px;
}
.v4 .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. */
.v4 .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;
}
.v4 .site-header__phone:hover { border-color: var(--ink); background: var(--paper-2); }
.v4 .site-header__phone .material-symbols-outlined { font-size: 18px; color: var(--brand-600); }

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

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

.v4 .lang-switch { position: relative; }
.v4 .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;
}
.v4 .lang-switch__btn:hover { background: var(--paper-2); color: var(--ink); }
.v4 .lang-switch__globe { font-size: 19px; }
.v4 .lang-switch__btn [data-langmenu-chevron] { font-size: 17px; transition: transform .15s; }
.v4 .lang-switch__btn[aria-expanded="true"] [data-langmenu-chevron] { transform: rotate(180deg); }
.v4 .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);
}
.v4 .lang-switch__menu[hidden] { display: none; }
.v4 .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);
}
.v4 .lang-switch__item:hover { background: var(--paper-2); color: var(--ink); }
.v4 .lang-switch__item.is-active { color: var(--ink); font-weight: 600; }
.v4 .lang-switch__item .material-symbols-outlined { margin-left: auto; font-size: 17px; color: var(--brand); }
.v4 .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);
}
.v4 .lang-switch__item.is-active .lang-switch__code { background: var(--brand); color: var(--on-brand, #fff); }

.v4 .lang-inline { display: flex; gap: 6px; }
.v4 .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);
}
.v4 .lang-inline a:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.v4 .lang-inline a.is-active { background: #fff; border-color: #fff; color: var(--ink); }

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

.v4 .drawer-scrim {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(14, 17, 22, .5);
    opacity: 0; pointer-events: none; transition: opacity .22s;
}
.v4 .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;
}
/* `.v4` 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 `.v4 .drawer` (0,2,0)
   et le tiroir ne s'ouvre jamais. */
.v4.drawer-open .drawer { transform: translateX(0); }
.v4.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
.v4.drawer-open { overflow: hidden; }

.v4 .drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.v4 .drawer__nav { display: flex; flex-direction: column; padding: 10px 10px 4px; gap: 2px; }
.v4 .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);
}
.v4 .drawer__nav a:hover { background: var(--paper-2); }
.v4 .drawer__nav a.is-active { background: var(--brand-05); color: var(--brand-700); font-weight: 600; }
.v4 .drawer__nav .material-symbols-outlined { font-size: 21px; color: var(--ink-mute); }
.v4 .drawer__nav a.is-active .material-symbols-outlined { color: var(--brand); }
.v4 .drawer__sep { height: 1px; background: var(--line); margin: 10px 12px; }
.v4 .drawer__small { font-size: 14.5px !important; color: var(--ink-soft) !important; }
.v4 .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);
}
.v4 .drawer__foot .lang-inline a { border-color: var(--line-2); color: var(--ink-soft); }
.v4 .drawer__foot .lang-inline a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --------------------------------------------------------- Bandeau haut -- */

/* Une seule promesse, centrée, au-dessus de l'en-tête. Elle défile avec la
   page : c'est une annonce, pas un outil. */
.v4 .topbar {
    background: var(--brand); color: #fff;
    font-size: 13px; font-weight: 600;
}
.v4 .topbar__inner {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 38px; text-align: center;
}
.v4 .topbar .material-symbols-outlined { font-size: 17px; }

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

/* Deux colonnes : l'accroche à gauche, la carte de réservation à droite,
   toutes deux posées sur une photo du lieu. Sous 1080 px la carte passe
   dessous — l'ordre de lecture reste le même. */
.v4 .hero {
    position: relative;
    isolation: isolate;
    background: var(--tint-1);
    color: var(--ink);
    padding: 40px 0 48px;
    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. */
.v4 .hero__photo {
    position: absolute; inset: 0; z-index: -2;
    background-image: var(--hero-bg);
    background-size: cover; background-position: center;
}
@media (max-width: 900px) {
    .v4 .hero__photo { background-image: var(--hero-bg-sm, var(--hero-bg)); }
}

/* Le voile : dégradé horizontal, dense à gauche où se lit le texte, plus
   transparent à droite où la carte blanche fait elle-même écran. */
.v4 .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .88) 42%, rgba(255, 255, 255, .62) 100%);
}

.v4 .hero__inner { display: grid; gap: 32px; align-items: center; }

.v4 .hero__title {
    font-size: clamp(30px, 4.6vw, 50px);
    letter-spacing: -.035em;
    line-height: 1.1;
    text-wrap: balance;
    max-width: 18ch;
}
.v4 .hero__lead {
    margin-top: 18px;
    max-width: 50ch;
    font-size: clamp(15.5px, 1.6vw, 17px);
    color: var(--ink-soft);
    text-wrap: pretty;
}
.v4 .hero__eyebrow { margin-bottom: 16px; }

/* Les promesses sous l'accroche, sur deux colonnes dès qu'il y a la place. */
.v4 .hero__checks {
    display: grid; gap: 11px 28px;
    margin-top: 28px;
}
.v4 .hero__checks li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: var(--ink-soft);
}
.v4 .hero__checks .material-symbols-outlined {
    font-size: 19px; color: var(--brand); margin-top: 1px;
}

@media (min-width: 620px) { .v4 .hero__checks { grid-template-columns: 1fr 1fr; } }

@media (min-width: 1080px) {
    .v4 .hero { padding: 56px 0 64px; }
    .v4 .hero__inner { grid-template-columns: minmax(0, 1fr) 448px; gap: 56px; }
    .v4 .hero::after {
        background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .86) 48%, rgba(255, 255, 255, .55) 100%);
    }
}

/* ------------------------------------------------- Carte de réservation -- */

/* Blanche, franchement arrondie, posée sur la photo : c'est elle qui porte
   l'ombre la plus marquée de la page. */
.v4 .ticket-wrap { position: relative; z-index: 2; }

.v4 .ticket {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lift);
    padding: 24px;
}

/* En-tête de la carte : pastille d'icône, titre, sous-titre. */
.v4 .ticket__head {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 22px;
}
.v4 .ticket__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none;
    border-radius: var(--r-md);
    background: var(--brand-10); color: var(--brand);
}
.v4 .ticket__icon .material-symbols-outlined { font-size: 22px; }
.v4 .ticket__label { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.v4 .ticket__sub { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-mute); }

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

/* Encart de prix : le seul aplat coloré de la carte. */
.v4 .ticket__quote {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 18px; padding: 16px 18px;
    background: var(--tint-2); border-radius: var(--r-md);
}
.v4 .ticket__quote-label {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-mute);
}
.v4 .ticket__quote-days { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-soft); }
.v4 .ticket__amt { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--brand); line-height: 1; }
.v4 .ticket__from { font-size: 13px; color: var(--ink-mute); }
.v4 .ticket__unit { font-size: 13px; color: var(--ink-mute); }
.v4 .ticket__price { display: flex; align-items: baseline; gap: 5px; }
.v4 .ticket__fine { margin-top: 10px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }

/* Réassurance de pied de carte. */
.v4 .ticket__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px;
    margin-top: 16px;
    font-size: 13px; color: var(--ink-soft);
}
.v4 .ticket__foot span { display: inline-flex; align-items: center; gap: 7px; }
.v4 .ticket__foot .material-symbols-outlined { font-size: 17px; color: var(--brand); }

@media (min-width: 560px) {
    .v4 .ticket { padding: 28px; }
    .v4 .ticket__fields { grid-template-columns: 1fr 1fr; }
    .v4 .ticket__cta { grid-column: 1 / -1; }
}

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

.v4 .section, .v4 [id] { scroll-margin-top: 110px; }

.v4 .section { padding: 64px 0; }
/* Le bleu-gris très pâle est la seule séparation entre sections : pas de
   filets, pas de bandes sombres. */
.v4 .section--tint { background: var(--tint-1); }
.v4 .section--warm { background: var(--tint-1); }
.v4 .section--tight { padding: 44px 0; }
.v4 .section--first { padding-top: 72px; }

.v4 .section__head { margin-bottom: 36px; max-width: 64ch; }
.v4 .section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.v4 .section__head--row {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
    max-width: none;
}
.v4 .section__title { font-size: clamp(26px, 3.6vw, 38px); text-wrap: balance; }
.v4 .section__lead { margin-top: 14px; color: var(--ink-soft); font-size: 16.5px; text-wrap: pretty; }
.v4 .section__eyebrow { margin-bottom: 14px; }
.v4 .section__action { display: flex; justify-content: flex-start; margin-top: 34px; }
.v4 .section__head--center + .steps + .section__action,
.v4 .section__head--center ~ .section__action { justify-content: center; }

/* Note de bas de section, précédée d'une icône d'information. */
.v4 .section__note {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 26px; font-size: 14px; color: var(--ink-soft);
}
.v4 .section__note .material-symbols-outlined { font-size: 19px; color: var(--brand); margin-top: 1px; }

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

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

/* Sur fond clair ici : quatre faits en ligne, séparés par rien d'autre que
   l'espace. */
.v4 .statband { background: var(--paper); border-bottom: 1px solid var(--line); }
.v4 .statband__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 18px;
    padding: 24px 0;
}
.v4 .stat { display: flex; align-items: center; gap: 13px; }
.v4 .stat .material-symbols-outlined { font-size: 24px; color: var(--brand); flex: none; }
.v4 .stat__v { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.v4 .stat__l { font-size: 12.5px; color: var(--ink-mute); line-height: 1.35; }

@media (min-width: 900px) {
    .v4 .statband__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 0; }
    .v4 .statband--3 { grid-template-columns: repeat(3, 1fr); }
    .v4 .statband--2 { grid-template-columns: repeat(2, 1fr); }
}

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

/* Icône en haut à gauche, numéro en pâle en haut à droite : on suit la
   colonne des icônes, le numéro ne sert qu'à confirmer l'ordre. */
.v4 .steps { display: grid; gap: 20px; }
.v4 .step {
    position: relative;
    padding: 24px 26px 26px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.v4 .step__top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.v4 .step__ic { color: var(--brand); }
.v4 .step__ic .material-symbols-outlined { font-size: 26px; }
.v4 .step__n {
    font-size: 19px; font-weight: 700; line-height: 1;
    letter-spacing: -.02em; color: var(--line-2);
    font-variant-numeric: tabular-nums;
}
.v4 .step h3 { font-size: 17.5px; margin-bottom: 9px; }
.v4 .step p { color: var(--ink-soft); font-size: 14.5px; }

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

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

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

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

/* Liste à coches dans une carte. */
.v4 .card__list { display: grid; gap: 9px; margin-top: 16px; }
.v4 .card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ink-soft); }
.v4 .card__list .material-symbols-outlined { font-size: 18px; color: var(--brand); margin-top: 1px; }
.v4 .card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ------------------------------------------------------ Mosaïque photos -- */

/* Une grande image et quatre petites. Sous 760 px, tout passe en deux
   colonnes égales : la hiérarchie n'a plus de sens sur un téléphone. */
.v4 .mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.v4 .mosaic figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.v4 .mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

@media (min-width: 760px) {
    .v4 .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
    .v4 .mosaic figure:first-child { grid-column: span 2; grid-row: span 2; }
    .v4 .mosaic figure:first-child img { aspect-ratio: auto; height: 100%; }
}

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

/* Deux colonnes : la note d'ensemble à gauche, les témoignages à droite.
   Pas de cartes ni de carrousel — des citations séparées par un filet, qui se
   lisent d'affilée. Le poids visuel est sur le chiffre, pas sur les vignettes.
*/
.v4 .reviews-split { display: grid; gap: 32px; align-items: start; }

@media (min-width: 900px) {
    .v4 .reviews-split { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
    /* La note reste sous les yeux pendant qu'on parcourt les avis. */
    .v4 .reviews-summary { position: sticky; top: 104px; }
}

/* Panneau de note. */
.v4 .reviews-summary {
    padding: 28px 26px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.v4 .reviews-summary__score {
    display: flex; align-items: baseline; gap: 4px;
    margin-bottom: 8px;
}
.v4 .reviews-summary__n { font-size: 48px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.v4 .reviews-summary__d { font-size: 16px; color: var(--ink-mute); }
.v4 .reviews-summary__count { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.v4 .reviews-summary .stars { margin-bottom: 2px; }
.v4 .reviews-summary__cta { margin-top: 20px; }

/* Les citations : un guillemet ouvrant en gros, le texte, la signature. */
.v4 .reviews { display: grid; gap: 0; }
.v4 .tcard {
    display: block;
    padding: 26px 0;
    border-top: 1px solid var(--line);
    background: none; border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: 0; box-shadow: none;
}
.v4 .tcard:first-child { border-top: 0; padding-top: 0; }

.v4 .tcard__text {
    position: relative;
    padding-left: 34px;
    color: var(--ink); font-size: 16.5px; line-height: 1.6;
    text-wrap: pretty;
}
.v4 .tcard__text::before {
    /* Le guillemet en clair plutôt qu'un échappement hexadécimal : selon
       la police chargée, celui-ci se résolvait en carré vide. */
    content: "“";
    position: absolute; left: 0; top: -.18em;
    font-size: 44px; line-height: 1; color: var(--brand-20);
}

.v4 .tcard__author {
    display: flex; align-items: baseline; gap: 10px;
    margin-top: 12px; padding-left: 34px;
}
.v4 .tcard__name { font-size: 14px; font-weight: 700; color: var(--ink); }
.v4 .tcard__meta { font-size: 13px; color: var(--ink-mute); }
.v4 .tcard__name::after { content: " ·"; color: var(--ink-mute); font-weight: 400; }

@media (min-width: 620px) {
    .v4 .reviews { grid-template-columns: 1fr 1fr; column-gap: 44px; }
    /* En deux colonnes, le premier de CHAQUE colonne perd son filet haut. */
    .v4 .tcard:nth-child(2) { border-top: 0; padding-top: 0; }
}

.v4 .stars { display: inline-flex; gap: 1px; color: var(--star); }
.v4 .stars .material-symbols-outlined { font-size: 17px; }
.v4 .stars--lg .material-symbols-outlined { font-size: 21px; }

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

/* Chaque question est une carte blanche à part, posée sur le fond teinté. */
.v4 .faq-list { display: grid; gap: 12px; }
.v4 .faq-item {
    background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    transition: box-shadow .18s;
}
.v4 .faq-item[open] { box-shadow: var(--sh-lift); }
.v4 .faq-item > summary {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px; cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 600; letter-spacing: -.015em;
}
.v4 .faq-item > summary::-webkit-details-marker { display: none; }
.v4 .faq-item > summary::after {
    content: "expand_more"; margin-left: auto; flex: none;
    font-family: "Material Symbols Outlined"; font-size: 22px; font-weight: 400;
    color: var(--brand); line-height: 1;
    transition: transform .2s;
}
.v4 .faq-item[open] > summary::after { transform: rotate(180deg); }
.v4 .faq-item > summary:hover { color: var(--brand-700); }
.v4 .faq-item__a { padding: 0 60px 22px 24px; color: var(--ink-soft); font-size: 15.5px; }

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

.v4 .tiers { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .v4 .tiers { grid-template-columns: repeat(4, 1fr); } }

.v4 .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-lg);
    box-shadow: var(--sh-card);
    text-align: center;
}
.v4 .tier__name {
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-mute);
}
.v4 .tier__price { font-size: clamp(28px, 3.6vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.v4 .tier__days { font-size: 13px; color: var(--ink-mute); }

/* Le palier mis en avant prend la couleur de marque, pas de l'encre. */
.v4 .tier--best {
    background: var(--brand); border-color: var(--brand); color: #fff;
    box-shadow: var(--sh-lift);
}
.v4 .tier--best .tier__name,
.v4 .tier--best .tier__days { color: rgba(255, 255, 255, .78); }
.v4 .tier__flag {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    padding: 5px 13px; border-radius: var(--r-pill);
    background: var(--ink); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
}
.v4 .tiers-note {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin-top: 26px; font-size: 14.5px; color: var(--ink-soft);
}
.v4 .tiers-note .material-symbols-outlined { font-size: 19px; color: var(--brand); }

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

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

@media (min-width: 880px) {
    .v4 .showcase { grid-template-columns: 1fr 1fr; gap: 56px; }
    .v4 .showcase--solo { grid-template-columns: minmax(0, 760px); justify-content: center; text-align: center; }
    .v4 .showcase--solo .showcase__list { text-align: left; max-width: 620px; margin-left: auto; margin-right: auto; }
    .v4 .showcase--solo .showcase__actions { justify-content: center; }
}

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

/* Un encart clair, pas une bande sombre : la page reste lumineuse jusqu'au
   pied de page. */
.v4 .cta-band { background: var(--paper); padding: 0 0 72px; }
.v4 .cta-band__inner {
    display: grid; gap: 24px; align-items: center;
    padding: 36px 28px;
    background: var(--tint-2); border-radius: var(--r-xl);
}
.v4 .cta-band h2 { font-size: clamp(23px, 3vw, 31px); }
.v4 .cta-band p { margin-top: 12px; color: var(--ink-soft); max-width: 56ch; }
.v4 .cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.v4 .cta-band__link { font-size: 15px; font-weight: 600; color: var(--brand-700); border-bottom: 1px solid var(--brand-40); padding-bottom: 2px; }
.v4 .cta-band__link:hover { border-color: var(--brand); }
@media (min-width: 860px) {
    .v4 .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding: 42px 46px; }
}

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

/* Pied de page clair : la page reste lumineuse de bout en bout. La
   hiérarchie tient aux graisses et aux filets, pas à un aplat sombre. */
.v4 .site-footer { background: var(--paper); color: var(--ink-soft); padding: 56px 0 0; border-top: 1px solid var(--line); }
.v4 .site-footer a { color: var(--ink-soft); }
.v4 .site-footer a:hover { color: var(--brand-700); }
.v4 .foot-grid { display: grid; gap: 34px; }
@media (min-width: 720px) { .v4 .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .v4 .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

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

.v4 .foot-pay { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.v4 .pay-badge {
    display: inline-flex; align-items: center; justify-content: center;
    height: 26px; min-width: 42px; padding: 0 7px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft);
}
.v4 .pay-badge img { height: 15px; width: auto; }

/* Bande de réassurance, juste avant les mentions. */
.v4 .foot-trust {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
    margin-top: 44px; padding: 22px 0;
    border-top: 1px solid var(--line);
}
.v4 .foot-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); font-weight: 600; }
.v4 .foot-trust .material-symbols-outlined { font-size: 20px; color: var(--brand); }
@media (min-width: 900px) { .v4 .foot-trust { grid-template-columns: repeat(4, 1fr); } }

.v4 .foot-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    padding: 20px 0 26px;
    border-top: 1px solid var(--line);
    font-size: 13px; color: var(--ink-mute);
}
.v4 .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. */
.v4 .page-head { padding: 48px 0 44px; background: var(--tint-1); }
.v4 .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;
}
.v4 .page-head__back:hover { color: var(--ink); }
.v4 .page-head__back .material-symbols-outlined { font-size: 17px; }
.v4 .page-head__h1 { font-size: clamp(29px, 4.4vw, 46px); letter-spacing: -.035em; text-wrap: balance; max-width: 22ch; }
.v4 .page-head__lead { margin-top: 16px; max-width: 62ch; color: var(--ink-soft); font-size: 16.5px; text-wrap: pretty; }
.v4 .page-head__eyebrow { margin-bottom: 14px; }
.v4 .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. */
.v4 .page-head + .section { padding-top: 56px; }

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

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

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

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

.v4 .input, .v4 .textarea, .v4 .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;
}
.v4 .input::placeholder, .v4 .textarea::placeholder { color: var(--ink-mute); }
.v4 .input:focus, .v4 .textarea:focus, .v4 .select:focus {
    outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
.v4 .input[aria-invalid="true"], .v4 .textarea[aria-invalid="true"], .v4 .is-invalid { border-color: var(--danger); }
.v4 .textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.v4 .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;
}
.v4 .alert p { margin: 0; }
.v4 .alert .material-symbols-outlined { font-size: 19px; margin-top: 1px; }
.v4 .alert--success { background: var(--success-bg); border-color: rgba(15, 122, 77, .2); color: var(--success); }
.v4 .alert--error { background: var(--danger-bg); border-color: rgba(192, 51, 44, .2); color: var(--danger); }
.v4 .alert--info { background: var(--paper-2); border-color: var(--line); color: var(--ink-soft); }
.v4 .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). */
.v4 .pick { display: grid; gap: 10px; }
.v4 .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;
}
.v4 .pick__item:hover { border-color: var(--ink-mute); }
.v4 .pick__item:has(:checked) { border-color: var(--brand); background: var(--brand-05); }
.v4 .pick__item input { accent-color: var(--brand); margin-top: 4px; }

.v4 .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;
}
.v4 .summary dt { color: var(--ink-mute); white-space: nowrap; }
.v4 .summary dd { margin: 0; font-weight: 600; }

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

.v4 .dp { position: relative; }
.v4 .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;
}
.v4 .dp-trigger:hover { border-color: var(--ink-mute); }
.v4 .dp-trigger:focus-visible, .v4 .dp[data-open="true"] .dp-trigger {
    outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
.v4 .dp-trigger[aria-invalid="true"] { border-color: var(--danger); }
.v4 .dp-icon { color: var(--ink-mute); font-size: 19px; }
.v4 .dp-value { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.v4 .dp-value[data-empty="true"] { color: var(--ink-mute); font-weight: 400; }

.v4 .dp-backdrop { position: fixed; inset: 0; z-index: 59; background: transparent; }
.v4 .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);
}
.v4 .dp-panel[hidden] { display: none; }
.v4 .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.v4 .dp-title { font-size: 15.5px; font-weight: 600; text-transform: capitalize; }
.v4 .dp-nav {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--r-xs); color: var(--ink-soft);
}
.v4 .dp-nav:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.v4 .dp-nav:disabled { color: var(--line-2); cursor: not-allowed; }
.v4 .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.v4 .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);
}
.v4 .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;
}
.v4 .dp-day:hover:not([data-disabled]):not([data-selected="true"]) { background: var(--paper-3); }
.v4 .dp-day[data-outside="true"] { color: var(--ink-mute); font-weight: 400; opacity: .6; }
.v4 .dp-day[data-disabled] { color: var(--line-2); cursor: not-allowed; text-decoration: line-through; }
.v4 .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);
}
.v4 .dp-day[data-in-range="true"] { background: var(--brand-10); border-radius: 0; }
.v4 .dp-day[data-selected="true"] { background: var(--brand); color: var(--on-brand, #fff); font-weight: 600; }
.v4 .dp-day[data-disabled][data-selected="true"] { color: var(--on-brand, #fff); text-decoration: none; cursor: default; }
.v4 .dp-day[data-selected="true"][data-today="true"]::after { background: var(--on-brand, #fff); }
.v4 .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);
}
.v4 .dp-hint { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; }
.v4 .dp-clear { font-size: 13px; font-weight: 600; color: var(--brand-600); padding: 6px 10px; border-radius: var(--r-xs); }
.v4 .dp-clear:hover { background: var(--paper-2); }

@media (max-width: 480px) {
    .v4 .ticket { padding: 18px 16px; }
    .v4 .ticket__perf { margin-left: -16px; margin-right: -16px; }
    .v4 .dp-trigger { padding: 0 12px; gap: 8px; }
    .v4 .dp-value { font-size: clamp(12.5px, 3.5vw, 15px); }
    .v4 .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;
    }
    .v4 .dp-backdrop { background: rgba(14, 17, 22, .45); }
    .v4 .dp-day { height: 44px; }
}

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

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

.v4 .ptable { width: 100%; border-collapse: collapse; }
.v4 .ptable caption { text-align: left; padding-bottom: 14px; color: var(--ink-soft); font-size: 15px; }
.v4 .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);
}
.v4 .ptable th:last-child, .v4 .ptable td:last-child { text-align: right; }
.v4 .ptable td { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.v4 .ptable td:last-child { font-weight: 600; }
.v4 .ptable tr.is-best td { background: var(--brand-05); }
.v4 .ptable tr.is-best td:first-child { font-weight: 600; }
.v4 .ptable__tag { margin-left: 9px; }

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

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

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

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

.v4 .svc { display: grid; gap: 0; }
.v4 .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);
}
.v4 .svc__item:last-child { border-bottom: 1px solid var(--line); }
.v4 .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);
}
.v4 .svc__ic .material-symbols-outlined { font-size: 22px; color: var(--brand); }
.v4 .svc__item h3 { font-size: 18px; margin-bottom: 6px; }
.v4 .svc__item p { color: var(--ink-soft); font-size: 15px; }
.v4 .svc__features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

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

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

.v4 .prose { max-width: 70ch; color: var(--ink-soft); font-size: 16.5px; }
.v4 .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);
}
.v4 .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.v4 .prose h3 { margin: 26px 0 10px; font-size: 18px; color: var(--ink); }
.v4 .prose p { margin-bottom: 14px; text-wrap: pretty; }
.v4 .prose ol { counter-reset: v3-ol; margin: 0 0 16px; }
.v4 .prose ol li {
    counter-increment: v3-ol; position: relative;
    padding-left: 34px; margin-bottom: 12px;
}
.v4 .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;
}
.v4 .prose ul { margin: 0 0 16px; }
.v4 .prose ul li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.v4 .prose ul li::before {
    content: ""; position: absolute; left: 0; top: .75em; width: 7px; height: 1px; background: var(--line-2);
}
.v4 .prose a { color: var(--brand-600); border-bottom: 1px solid var(--brand-40); }
.v4 .prose strong { color: var(--ink); font-weight: 600; }
.v4 .prose .not-prose { margin: 18px 0; }

.v4 .plist { border-top: 1px solid var(--line); }
.v4 .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;
}
.v4 .plist b { font-weight: 600; color: var(--ink); white-space: nowrap; }

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

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

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

.v4 .promo-float {
    position: fixed; z-index: 55;
    right: 16px; bottom: 16px; left: 16px;
    transition: opacity .3s, transform .3s;
}
@media (min-width: 720px) { .v4 .promo-float { left: auto; width: 360px; } }
.v4 .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);
}
.v4 .promo-float__ic { display: inline-flex; color: var(--brand); }
.v4 .promo-float__ic .material-symbols-outlined { font-size: 22px; }
.v4 .promo-float__title { font-size: 14px; font-weight: 500; line-height: 1.35; }
.v4 .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;
}
.v4 .promo-float__code:hover { background: rgba(255, 255, 255, .18); }
.v4 .promo-float__code .material-symbols-outlined { font-size: 15px; }
.v4 .promo-float__feedback {
    position: absolute; left: 50px; bottom: 3px;
    font-size: 11.5px; color: var(--brand); transition: opacity .2s;
}
.v4 .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);
}
.v4 .promo-float__close:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.v4 .promo-float__close .material-symbols-outlined { font-size: 17px; }

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

.v4 .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;
}
.v4 .sticky-cta[data-visible="true"] { transform: translateY(0); }
.v4 .sticky-cta .btn { width: 100%; }
@media (min-width: 720px) { .v4 .sticky-cta { display: none; } }
.v4.has-sticky-cta .site-footer { padding-bottom: 92px; }
@media (min-width: 720px) { .v4.has-sticky-cta .site-footer { padding-bottom: 28px; } }

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

.v4 .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;
}
.v4 .api-offline code { font-size: 12px; word-break: break-all; }

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

.v4 .notfound { padding: 90px 0 100px; text-align: center; }
.v4 .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);
}
.v4 .notfound h1 { margin: 20px 0 12px; font-size: clamp(22px, 3.4vw, 30px); }
.v4 .notfound p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto; }
.v4 .notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

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

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

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

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