@layer composants {
.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    margin-right: auto;
    color: var(--texte);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.logo:hover {
    text-decoration: none;
}

.logo-marque {
    display: flex;
    flex-shrink: 0;
}

.logo-image {
    display: block;
    border-radius: var(--r-md);
    box-shadow: var(--ombre-sm);
}

@media (max-width: 29.99rem) {
    .entete .logo-image {
        width: 2.75rem;
        height: 2.75rem;
    }
}

.logo-sous-titre {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--texte-discret);
}

.nav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--e-1);
    list-style: none;
    padding: 0;
}

.nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-height: 2.75rem;
    padding: var(--e-2) var(--e-3);
    border-radius: var(--r-md);
    color: var(--texte-corps);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background-color var(--duree) ease, color var(--duree) ease;
}

.nav a:hover {
    background: var(--surface-2);
    color: var(--texte);
    text-decoration: none;
}

.nav svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.nav .nav-telephone {
    color: var(--primaire);
    font-weight: 700;
}

.nav-separe {
    margin-left: auto;
}

.entete-cta {
    flex-shrink: 0;
    min-height: 2.75rem;
    padding: var(--e-2) var(--e-5);
}

.bouton-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-md);
    color: var(--texte);
    flex-shrink: 0;
    transition: background-color var(--duree) ease;
}

.bouton-menu:hover {
    background: var(--surface-2);
}

.bouton-menu span {
    display: flex;
}

.bouton-menu .icone-fermer {
    display: none;
}

.bouton-menu[aria-expanded="true"] .icone-menu {
    display: none;
}

.bouton-menu[aria-expanded="true"] .icone-fermer {
    display: flex;
}

@media (max-width: 69.99rem) {
    .bouton-menu {
        display: flex;
        order: 1;
    }

    .nav {
        display: none;
        position: absolute;
        top: calc(100% + var(--e-2));
        left: var(--e-4);
        right: var(--e-4);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--e-3);
        background: var(--surface);
        border: 1px solid var(--bordure);
        border-radius: var(--r-lg);
        box-shadow: var(--ombre-lg);
    }

    .nav.nav-ouvert {
        display: flex;
    }

    .nav li + li {
        border-top: 1px solid var(--bordure);
    }

    .nav a {
        display: flex;
        min-height: 3rem;
        padding: var(--e-3);
    }

    .nav-separe {
        margin-left: 0;
    }
}

@media (max-width: 29.99rem) {
    .logo-sous-titre {
        display: none;
    }

    .entete-cta {
        padding-inline: var(--e-4);
    }
}

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 3rem;
    padding: var(--e-3) var(--e-5);
    border: 1.5px solid transparent;
    border-radius: var(--r-md);
    background: var(--action);
    color: var(--sur-action);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--ombre-sm);
    cursor: pointer;
    transition: background-color var(--duree) ease, border-color var(--duree) ease, box-shadow var(--duree) ease, transform var(--duree) ease;
}

.bouton:hover {
    background: var(--action-hover);
    box-shadow: var(--ombre-md);
    text-decoration: none;
    transform: translateY(-1px);
}

.bouton:active {
    box-shadow: var(--ombre-sm);
    transform: translateY(0);
}

.bouton svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.bouton-primaire {
    background: var(--primaire);
    color: var(--sur-primaire);
}

.bouton-primaire:hover {
    background: var(--primaire-hover);
}

/* Orange : à réserver aux fonds bleus foncés, où il ressort le mieux. */
.bouton-accent {
    background: var(--accent);
    color: var(--sur-accent);
}

.bouton-accent:hover {
    background: var(--accent-hover);
}

.bouton-secondaire {
    background: var(--surface);
    border-color: var(--bordure-forte);
    color: var(--texte);
    box-shadow: none;
}

.bouton-secondaire:hover {
    background: var(--primaire-fond);
    border-color: var(--primaire);
    color: var(--primaire-hover);
    box-shadow: none;
}

.bouton-danger {
    background: var(--erreur);
    color: var(--blanc);
}

.bouton-danger:hover {
    background: color-mix(in srgb, var(--erreur) 82%, black);
}

.bouton-petit {
    min-height: 2.5rem;
    padding: var(--e-2) var(--e-4);
    font-size: var(--t-petit);
}

.bouton-grand {
    min-height: 3.5rem;
    padding: var(--e-4) var(--e-6);
    font-size: 1.0625rem;
}

.bouton-pleine-largeur {
    display: flex;
    width: 100%;
}

.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-weight: 700;
    color: var(--primaire);
}

.lien-fleche svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform var(--duree) ease;
}

.lien-fleche:hover svg {
    transform: translateX(3px);
}

.lien-etire::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.pastille {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0.4rem 0.9rem 0.4rem 0.65rem;
    border: 1px solid var(--bordure);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--ombre-sm);
    font-size: var(--t-petit);
    font-weight: 700;
    color: var(--texte);
}

.pastille svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--primaire);
}

.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-sm);
    overflow: hidden;
}

.carte > .contenu {
    padding: var(--e-6);
}

@media (max-width: 29.99rem) {
    .carte > .contenu {
        padding: var(--e-5);
    }
}

.formulaire-auth {
    width: 100%;
    max-width: 34rem;
}

.formulaire-auth .bouton {
    width: 100%;
    margin-top: var(--e-2);
}

.formulaire-auth .texte-discret {
    margin-top: var(--e-4);
}

.champ-groupe {
    margin-bottom: var(--e-5);
}

.champ-aide {
    margin-top: var(--e-1);
    font-size: 0.8125rem;
    color: var(--texte-discret);
}

.suggestion-email {
    margin-top: var(--e-1);
    font-size: 0.8125rem;
    color: var(--texte-discret);
}

.suggestion-email-lien {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: inherit;
    color: var(--electrique-600);
    text-decoration: underline;
    cursor: pointer;
}

.suggestion-email-lien:hover,
.suggestion-email-lien:focus-visible {
    color: var(--electrique-500);
}

.choix-radio {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-bottom: var(--e-3);
    font-size: var(--t-corps);
    font-weight: 500;
    color: var(--texte);
    cursor: pointer;
}

.choix-radio input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    flex-shrink: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pill);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-succes {
    background: var(--succes-fond);
    color: var(--succes);
}

.badge-attente {
    background: var(--attente-fond);
    color: var(--attente);
}

.badge-erreur {
    background: var(--erreur-fond);
    color: var(--erreur);
}

.badge-info {
    background: var(--info-fond);
    color: var(--info);
}

.badge-cyan {
    background: var(--cyan-fond);
    color: var(--cyan);
}

.badge-neutre {
    background: var(--neutre-badge-fond);
    color: var(--neutre-badge);
}

.alerte {
    display: block;
    margin-bottom: var(--e-4);
    padding: var(--e-4) var(--e-5);
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--texte);
}

.alerte-succes {
    background: var(--succes-fond);
    border-color: var(--succes-bordure);
    border-left-color: var(--succes);
}

.alerte-attente {
    background: var(--attente-fond);
    border-color: var(--attente-bordure);
    border-left-color: var(--attente);
}

.alerte-erreur {
    background: var(--erreur-fond);
    border-color: var(--erreur-bordure);
    border-left-color: var(--erreur);
}

.recherche {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-4);
    padding: var(--e-5);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-xl);
    box-shadow: var(--ombre-lg);
}

.recherche-champ {
    min-width: 0;
}

.recherche-libelle {
    display: block;
    margin-bottom: var(--e-2);
    font-size: var(--t-petit);
    font-weight: 700;
    color: var(--texte);
}

.recherche-agence {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-height: 3.25rem;
    padding: var(--e-2) var(--e-4);
    border-radius: var(--r-md);
    background: var(--primaire-fond);
    color: var(--texte);
    line-height: 1.3;
}

.recherche-agence svg {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    color: var(--primaire);
}

.recherche-agence strong {
    display: block;
    font-size: 0.9375rem;
}

.recherche-agence small {
    display: block;
    font-size: 0.8125rem;
    color: var(--texte-discret);
}

.recherche-dates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--e-3);
}

.recherche input,
.recherche select {
    min-height: 3.25rem;
}

.recherche-bouton {
    width: 100%;
}

.recherche-aide {
    grid-column: 1 / -1;
    min-height: 1.5em;
    font-size: var(--t-petit);
    color: var(--texte-discret);
}

.recherche-aide-erreur {
    color: var(--erreur);
    font-weight: 700;
}

@media (max-width: 29.99rem) {
    .recherche {
        padding: var(--e-4);
    }
}

@media (min-width: 48rem) {
    .recherche {
        grid-template-columns: 1fr 1fr;
        align-items: end;
        padding: var(--e-6);
    }
}

@media (min-width: 64rem) {
    .recherche {
        grid-template-columns: minmax(12rem, 1.1fr) minmax(19rem, 2fr) minmax(11rem, 1.1fr) auto;
        row-gap: var(--e-3);
    }

    .recherche-bouton {
        width: auto;
    }
}

.carte-categorie,
.vignette {
    --teinte-carrosserie: var(--soleil-500);
    --teinte-sombre: var(--soleil-700);
    --teinte-fond: var(--soleil-50);
    --teinte-cercle: var(--soleil-100);
}

.carte-categorie {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-sm);
    overflow: hidden;
    transition: transform var(--duree) ease, box-shadow var(--duree) ease, border-color var(--duree) ease;
}

.carte-categorie:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-lg);
    border-color: var(--bordure-forte);
}

.carte-categorie:has(.lien-etire:focus-visible) {
    outline: 3px solid var(--anneau-focus);
    outline-offset: 3px;
}

.carte-categorie .lien-etire:focus-visible {
    outline: none;
}

.teinte-berline {
    --teinte-carrosserie: var(--bleu-600);
    --teinte-sombre: var(--bleu-800);
    --teinte-fond: var(--bleu-50);
    --teinte-cercle: var(--bleu-100);
}

.teinte-suv {
    --teinte-carrosserie: var(--emeraude-600);
    --teinte-sombre: var(--emeraude-800);
    --teinte-fond: var(--emeraude-50);
    --teinte-cercle: var(--emeraude-100);
}

.teinte-utilitaire {
    --teinte-carrosserie: var(--blanc);
    --teinte-sombre: var(--neutre-300);
    --teinte-fond: var(--neutre-100);
    --teinte-cercle: var(--neutre-200);
}

.carte-categorie-visuel {
    padding: var(--e-3) var(--e-4) 0;
    background: var(--teinte-fond);
}

.carte-categorie-visuel svg {
    width: 100%;
    height: auto;
}

.carte-categorie-corps {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--e-2);
    padding: var(--e-5);
}

.carte-categorie h3 a {
    color: var(--texte);
}

.carte-categorie h3 a:hover {
    text-decoration: none;
}

.carte-categorie-corps > p {
    font-size: 0.9375rem;
    color: var(--texte-discret);
}

.carte-categorie-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-top: auto;
    padding-top: var(--e-4);
    border-top: 1px solid var(--bordure);
}

.carte-categorie-meta p {
    display: flex;
    flex-direction: column;
    font-size: var(--t-petit);
    line-height: 1.4;
    color: var(--texte-discret);
}

.carte-categorie-prix strong {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--accent-texte);
}

.carte-categorie-fleche {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--r-pill);
    background: var(--primaire-fond);
    color: var(--primaire);
    transition: background-color var(--duree) ease, color var(--duree) ease, transform var(--duree) ease;
}

.carte-categorie-fleche svg {
    width: 1.25rem;
    height: 1.25rem;
}

.carte-categorie:hover .carte-categorie-fleche {
    background: var(--primaire);
    color: var(--blanc);
    transform: translateX(2px);
}

.illu-vehicule-roule {
    transition: transform 400ms ease;
}

.carte-categorie:hover .illu-vehicule-roule {
    transform: translateX(8px);
}

.illu-cercle {
    fill: var(--teinte-cercle);
}

.illu-ombre {
    fill: var(--neutre-900);
    opacity: 0.12;
}

.illu-vitesse {
    fill: none;
    stroke: var(--teinte-sombre);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0.35;
}

.illu-carrosserie {
    fill: var(--teinte-carrosserie);
}

.teinte-utilitaire .illu-carrosserie {
    stroke: var(--neutre-300);
    stroke-width: 2;
}

.illu-sombre {
    fill: var(--teinte-sombre);
}

.illu-vitre {
    fill: var(--illu-vitre);
}

.illu-reflet {
    fill: var(--blanc);
    opacity: 0.6;
}

.illu-ligne {
    fill: none;
    stroke: var(--teinte-sombre);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.illu-pneu {
    fill: var(--illu-pneu);
}

.illu-jante {
    fill: var(--illu-jante);
}

.illu-phare {
    fill: var(--illu-phare);
}

.illu-feu {
    fill: var(--illu-feu);
}

.carte-vehicule {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-sm);
    overflow: hidden;
    color: inherit;
    transition: transform var(--duree) ease, box-shadow var(--duree) ease, border-color var(--duree) ease;
}

.carte-vehicule:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-lg);
    border-color: var(--bordure-forte);
    text-decoration: none;
}

.carte-vehicule-media {
    position: relative;
    overflow: hidden;
}

.carte-vehicule img,
.media-remplacement {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
    transition: transform 400ms ease;
}

.carte-vehicule:hover img {
    transform: scale(1.04);
}

.media-remplacement {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--neutre-100), var(--neutre-50));
}

.media-remplacement svg {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--neutre-400);
}

.prix-etiquette {
    position: absolute;
    top: var(--e-3);
    right: var(--e-3);
    padding: 0.35rem 0.75rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--sur-accent);
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: var(--ombre-sm);
}

.prix-etiquette small {
    font-size: 0.72rem;
    font-weight: 600;
}

.pastille-categorie {
    position: absolute;
    top: var(--e-3);
    left: var(--e-3);
    padding: 0.25rem 0.65rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.94);
    color: var(--texte);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: var(--ombre-sm);
}

.carte-vehicule .contenu {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--e-2);
    padding: var(--e-5);
}

.carte-vehicule h3 {
    font-size: 1.125rem;
}

.specs-mini {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    margin-top: auto;
    padding-top: var(--e-3);
    border-top: 1px solid var(--bordure);
}

.specs-mini span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--t-petit);
    color: var(--texte-discret);
}

.specs-mini svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: var(--primaire);
}

.carte-vehicule.selectionnee {
    border-color: var(--primaire);
    box-shadow: 0 0 0 3px var(--bleu-100), var(--ombre-md);
}

.indicateur-selection {
    display: none;
    position: absolute;
    right: var(--e-3);
    bottom: var(--e-3);
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background: var(--primaire);
    color: var(--blanc);
    box-shadow: var(--ombre-sm);
}

.indicateur-selection svg {
    width: 1.1rem;
    height: 1.1rem;
}

.carte-vehicule.selectionnee .indicateur-selection {
    display: flex;
}

.tarif {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--accent-texte);
}

.galerie-photos {
    display: grid;
    gap: var(--e-3);
    margin-bottom: var(--e-5);
}

.galerie-photos .principale img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--r-lg);
}

.galerie-photos .miniatures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: var(--e-3);
}

.galerie-photos .miniatures img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.grille-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--e-3);
    margin-block: var(--e-6);
}

.spec {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    background: var(--fond-alt);
    border: 1px solid var(--bordure);
    border-radius: var(--r-md);
}

.spec .icone {
    display: flex;
    flex-shrink: 0;
    color: var(--primaire);
}

.spec .valeur {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--texte);
}

.spec .label {
    font-size: 0.8125rem;
    color: var(--texte-discret);
}

.carte-reservation {
    position: sticky;
    top: 6rem;
}

.ligne-confiance {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-4);
    font-size: var(--t-petit);
    color: var(--texte-discret);
}

.ligne-confiance .icone {
    display: flex;
    flex-shrink: 0;
    color: var(--primaire);
}

.ligne-confiance svg {
    width: 1.25rem;
    height: 1.25rem;
}

.filtre-recherche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--e-4);
    align-items: end;
    padding: var(--e-5);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-sm);
}

.filtre-recherche .champ-groupe {
    margin-bottom: 0;
}

.actions-tableau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
}

.zone-selection {
    position: relative;
}

.panneau-reservation {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    margin-top: var(--e-6);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-xl);
    box-shadow: var(--ombre-lg);
    overflow: hidden;
}

.panneau-reservation[hidden] {
    display: none;
}

.panneau-fond {
    display: none;
}

@media (min-width: 48rem) {
    .panneau-fond {
        position: fixed;
        inset: 0;
        z-index: 190;
        background: rgba(2, 29, 94, 0.55);
    }

    .panneau-fond:not([hidden]) {
        display: block;
    }

    #panneau-reservation:not([hidden]) {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 200;
        width: min(90vw, 46rem);
        margin-top: 0;
        transform: translate(-50%, -50%);
    }
}

.panneau-retour {
    position: absolute;
    top: var(--e-4);
    left: var(--e-4);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--ombre-md);
    color: var(--texte);
}

.panneau-retour:hover {
    background: var(--surface-2);
}

.panneau-retour svg {
    width: 1.2rem;
    height: 1.2rem;
    transform: rotate(180deg);
}

.panneau-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 21 / 9;
    min-width: 0;
    background: linear-gradient(160deg, var(--neutre-100), var(--neutre-50));
}

.panneau-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.panneau-media .media-remplacement {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.panneau-media .media-remplacement svg {
    width: 4rem;
    height: 4rem;
}

.panneau-contenu {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    padding: var(--e-6);
}

.panneau-contenu h2 {
    margin: 0;
}

.panneau-contenu .pastille-categorie {
    position: static;
    align-self: flex-start;
    background: var(--primaire-fond);
    color: var(--primaire-hover);
    box-shadow: none;
}

.options-reservation {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    margin-top: var(--e-2);
}

.option-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--bordure);
    border-radius: var(--r-md);
}

.option-ligne strong {
    display: block;
    font-size: 0.95rem;
    color: var(--texte);
}

.option-ligne .texte-discret {
    font-size: 0.8125rem;
}

.panneau-disponibilite {
    margin-top: var(--e-4);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    font-size: 0.875rem;
    font-weight: 600;
}

.panneau-disponibilite-verification {
    background: var(--neutre-100);
    color: var(--texte-discret);
}

.panneau-disponibilite-indisponible {
    background: var(--erreur-fond);
    color: var(--erreur);
}

.bouton-desactive {
    opacity: 0.5;
    pointer-events: none;
    box-shadow: none;
}

.panneau-prix-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    margin-top: auto;
    padding-top: var(--e-4);
    border-top: 1px solid var(--bordure);
}

.panneau-prix-groupe {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
}

.panneau-prix {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent-texte);
}

@media (max-width: 47.99rem) {
    #panneau-reservation:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 200;
        margin-top: 0;
        border-radius: 0;
        overflow-y: auto;
    }

    #panneau-reservation:not([hidden]) .panneau-prix-barre {
        position: sticky;
        bottom: 0;
        padding-bottom: var(--e-4);
        background: var(--surface);
    }
}

/* ---------- Sélecteur de date personnalisé (voir initialiserSelecteursDate dans app.js) ---------- */

.champ-cadre-personnalise input[type="date"] {
    display: none;
}

.champ-date-bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    width: 100%;
    min-height: 3rem;
    padding: var(--e-3) var(--e-4);
    font: inherit;
    color: var(--texte);
    text-align: left;
    cursor: pointer;
}

.champ-date-texte-vide {
    color: var(--texte-discret);
}

.champ-date-bouton .icone {
    display: flex;
    flex-shrink: 0;
    color: var(--texte-discret);
}

.champ-date-bouton .icone svg {
    width: 1.15rem;
    height: 1.15rem;
}

.calendrier-popup {
    position: fixed;
    z-index: 400;
    width: 18.5rem;
    max-width: calc(100vw - 1rem);
    padding: var(--e-4);
    border: 1px solid var(--bordure);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--ombre-lg);
}

.calendrier-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--e-3);
}

.calendrier-titre {
    font-weight: 800;
    color: var(--texte);
    text-transform: capitalize;
}

.calendrier-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: var(--r-pill);
    color: var(--texte-discret);
    cursor: pointer;
    transition: background var(--duree) ease, color var(--duree) ease;
}

.calendrier-nav:hover {
    background: var(--primaire-fond);
    color: var(--primaire);
}

.calendrier-nav svg {
    width: 1.1rem;
    height: 1.1rem;
}

.calendrier-jours-entete {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: var(--e-1);
}

.calendrier-jours-entete span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--texte-discret);
}

.calendrier-grille {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.15rem;
}

.jour-calendrier {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: var(--r-pill);
    color: var(--texte);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duree) ease, color var(--duree) ease;
}

.jour-calendrier:hover:not(:disabled) {
    background: var(--primaire-fond);
}

.jour-calendrier.jour-hors-mois {
    color: var(--texte-discret);
    font-weight: 500;
}

.jour-calendrier.jour-aujourdhui {
    box-shadow: inset 0 0 0 1.5px var(--primaire);
}

.jour-calendrier.jour-selectionne {
    background: var(--primaire);
    color: var(--sur-primaire);
}

.jour-calendrier.jour-selectionne:hover {
    background: var(--primaire-hover);
}

.jour-calendrier:disabled {
    color: var(--bordure-forte);
    cursor: not-allowed;
}

.calendrier-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--e-3);
    padding-top: var(--e-3);
    border-top: 1px solid var(--bordure);
}

.calendrier-lien {
    padding: 0;
    font-size: var(--t-petit);
    font-weight: 700;
    color: var(--primaire);
    cursor: pointer;
}

.calendrier-lien:hover {
    text-decoration: underline;
}

.calendrier-lien:disabled {
    color: var(--texte-discret);
    cursor: not-allowed;
    text-decoration: none;
}
}