/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* Coquille Back-office — LANGAGE DE BORDURES (élévation par bordures discrètes,
   sable froid, PAS d'ombre marquée). Marqueur d'identité : le back-office
   s'élève par la bordure, jamais par l'ombre.
   Ne jamais importer le langage d'ombres de la Vitrine ici. */

.app-shell[b-ztibb34s3x] {
    min-height: 100vh;
    display: flex;
    background-color: var(--color-background-app);
    color: var(--color-text-primary);
    font-size: var(--text-body-app);
    line-height: var(--leading-app);
}

.app-shell-sidebar[b-ztibb34s3x] {
    width: 236px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;     /* pousse le pied utilisateur en bas (margin-top:auto) */
    min-height: 100vh;
    border-right: 1px solid var(--color-border);
    background-color: var(--color-surface-muted);   /* DÉCISION 1.4 : sable froid conservé (vs token DESIGN surface) */
}

.app-shell-main[b-ztibb34s3x] {
    flex: 1;
    min-width: 0;               /* autorise le rétrécissement / reflow du contenu */
    padding: var(--space-6) var(--space-8);
}

/* Bandeau « optimisé pour ordinateur » — masqué en desktop, révélé sous le
   point de rupture mobile. Langage de bordures (pas d'ombre). */
.admin-mobile-hint[b-ztibb34s3x] {
    display: none;
    margin: 0 0 var(--space-5);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    color: var(--color-text-muted);
    font-size: var(--text-caption);
}

/* Reflow mobile (CSS pur) : coquille en colonne, sidebar repliée en bandeau
   supérieur, contenu et panneaux empilés. */
@media (max-width: 720px) {
    .app-shell[b-ztibb34s3x] {
        flex-direction: column;
    }

    .app-shell-sidebar[b-ztibb34s3x] {
        width: 100%;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .app-shell-main[b-ztibb34s3x] {
        padding: var(--space-5) var(--margin-mobile);
    }

    .admin-mobile-hint[b-ztibb34s3x] {
        display: block;
    }
}

/* Établit le langage de bordures pour les panneaux du back-office :
   bordure discrète, aucun box-shadow. */
.app-shell[b-ztibb34s3x]  .panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
    box-shadow: none;
}
/* /Components/Layout/AdminSidebar.razor.rz.scp.css */
/* Sidebar Back-office (Story 1.4) — LANGAGE DE BORDURES, sable froid, aucune ombre.
   Tout est token-isé (design-tokens.css). Aucune classe ni couleur Bootstrap (D8). */

/* ── Wordmark : seule incursion de Cormorant dans le back-office ── */
.admin-brand[b-3jabvh3e4q] {
    padding: var(--space-5) var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.admin-wordmark[b-3jabvh3e4q] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h3);
    line-height: 1.1;
    color: var(--color-text-primary);
}

/* ── Navigation à icônes ── */
.admin-nav[b-3jabvh3e4q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
}

/* Item de nav (NavLink vivant <a> OU span inerte) : même gabarit visuel. */
.nav-item[b-3jabvh3e4q] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid transparent;   /* réserve l'accent ⇒ pas de saut au survol/actif */
    border-radius: var(--radius-app-sm);
    color: var(--color-text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-body-app);
    text-decoration: none;
}

.nav-item:hover[b-3jabvh3e4q] {
    background-color: var(--color-surface);
    text-decoration: none;
}

/* Item ACTIF (classe générée par NavLink) — l'état n'est JAMAIS porté par la couleur
   seule : fond teinté + accent de bord sauge + libellé en gras concourent. */
.nav-item.active[b-3jabvh3e4q] {
    background-color: var(--color-primary-tint);   /* app-shell.nav-active-background */
    border-left-color: var(--color-primary);        /* app-shell.nav-active-accent (sauge) */
    font-weight: 600;
}

/* Item INERTE (échafaudage non navigable) — visuellement estompé, non cliquable. */
.nav-item--disabled[b-3jabvh3e4q] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.nav-icon[b-3jabvh3e4q] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.nav-item.active .nav-icon[b-3jabvh3e4q] {
    color: var(--color-primary);
}

.nav-icon svg[b-3jabvh3e4q] {
    width: 18px;
    height: 18px;
    display: block;
}

.nav-label[b-3jabvh3e4q] {
    flex: 1;
}

/* Slot de badge réservé (vide pour les items sans compteur). */
.nav-badge[b-3jabvh3e4q] {
    flex-shrink: 0;
}

/* Badge de compteur FR-14 (Demandes en attente) — pastille discrète. Le NOMBRE (texte) porte le sens ;
   la couleur ne fait que renforcer. Un nom accessible explicite est posé en markup (aria-label). */
.nav-badge--count[b-3jabvh3e4q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
    font-size: var(--text-caption);
    font-weight: 700;
    line-height: 1;
}

/* ── Pied utilisateur + déconnexion (poussé en bas par le flex de .app-shell-sidebar) ── */
.admin-userfoot[b-3jabvh3e4q] {
    margin-top: auto;
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.admin-user[b-3jabvh3e4q] {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bouton de déconnexion — style créé ici (les classes button-* de DESIGN n'existent
   pas encore) : bouton discret BORDÉ dans l'esprit « ghost » back-office. */
.admin-logout[b-3jabvh3e4q] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-weight: 600;
    color: var(--color-text-primary);
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    cursor: pointer;
}

.admin-logout:hover[b-3jabvh3e4q] {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-3thphtrpey],
.components-reconnect-repeated-attempt-visible[b-3thphtrpey],
.components-reconnect-failed-visible[b-3thphtrpey],
.components-pause-visible[b-3thphtrpey],
.components-resume-failed-visible[b-3thphtrpey],
.components-rejoining-animation[b-3thphtrpey] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-3thphtrpey],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-3thphtrpey],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-3thphtrpey],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-3thphtrpey],
#components-reconnect-modal.components-reconnect-retrying[b-3thphtrpey],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-3thphtrpey],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-3thphtrpey],
#components-reconnect-modal.components-reconnect-failed[b-3thphtrpey],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-3thphtrpey] {
    display: block;
}


#components-reconnect-modal[b-3thphtrpey] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-3thphtrpey 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-3thphtrpey 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-3thphtrpey 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-3thphtrpey]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-3thphtrpey 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-3thphtrpey {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-3thphtrpey {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-3thphtrpey {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-3thphtrpey] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-3thphtrpey] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-3thphtrpey] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-3thphtrpey] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-3thphtrpey] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-3thphtrpey] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-3thphtrpey] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-3thphtrpey 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-3thphtrpey] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-3thphtrpey {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/VitrineLayout.razor.rz.scp.css */
/* Coquille Vitrine — LANGAGE D'OMBRES (élévation par ombres douces diffuses).
   Marqueur d'identité : la Vitrine s'élève par l'ombre, jamais par la bordure de carte.
   Ne jamais importer le langage de bordures du back-office ici.
   100% tokenisé (design-tokens.css) ; aucune couleur/typo/ombre en dur. */

.vitrine[b-mtn6mg6zxt] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: var(--leading-vitrine);
}

.vitrine-main[b-mtn6mg6zxt] {
    flex: 1;
    width: 100%;
    max-width: var(--container-vitrine);
    margin: 0 auto;
    padding: var(--section-vitrine) var(--margin-mobile);
    outline: none;
}

/* Établit le langage d'ombres pour les cartes de la Vitrine. */
.vitrine[b-mtn6mg6zxt]  .card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-vitrine);
}

/* ── Skip-link (a11y) : caché jusqu'au focus clavier ── */
.vitrine-skip[b-mtn6mg6zxt] {
    position: absolute;
    left: var(--space-2);
    top: var(--space-2);
    z-index: 30;
    transform: translateY(-200%);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-label);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card-vitrine);
    text-decoration: none;
    transition: transform .15s ease;
}

.vitrine-skip:focus[b-mtn6mg6zxt] {
    transform: translateY(0);
}

/* ── Header sticky translucide ── */
.vitrine-header[b-mtn6mg6zxt] {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: color-mix(in srgb, var(--color-background) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.vitrine-header-bar[b-mtn6mg6zxt] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--container-vitrine);
    margin: 0 auto;
    padding: var(--space-3) var(--margin-mobile);
}

/* ── Wordmark (Cormorant — usage autorisé : wordmark) ── */
.vitrine-wordmark[b-mtn6mg6zxt] {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.vitrine-leaf[b-mtn6mg6zxt] {
    color: var(--color-primary);
}

/* ── Navigation (desktop : inline ; mobile : bascule burger) ── */
.vitrine-nav-toggle[b-mtn6mg6zxt] {
    display: none;
}

.vitrine-burger[b-mtn6mg6zxt] {
    display: none;            /* masqué desktop */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.vitrine-burger-icon[b-mtn6mg6zxt],
.vitrine-burger-icon[b-mtn6mg6zxt]::before,
.vitrine-burger-icon[b-mtn6mg6zxt]::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: var(--radius-full);
}

.vitrine-burger-icon[b-mtn6mg6zxt] {
    position: relative;
}

.vitrine-burger-icon[b-mtn6mg6zxt]::before {
    position: absolute;
    top: -7px;
    left: 0;
}

.vitrine-burger-icon[b-mtn6mg6zxt]::after {
    position: absolute;
    top: 7px;
    left: 0;
}

.vitrine-nav-panel[b-mtn6mg6zxt] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-left: auto;        /* pousse nav + actions à droite du wordmark */
}

.vitrine-nav-link[b-mtn6mg6zxt] {
    font-family: var(--font-ui);
    font-size: var(--text-label);
    color: var(--color-text-primary);
    text-decoration: none;
    padding: var(--space-2) 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.vitrine-nav-link:hover[b-mtn6mg6zxt] {
    color: var(--color-primary);
}

/* État ACTIF (page courante) — repère NON chromatique : soulignement + graisse, jamais la couleur
   seule (a11y). aria-current="page" est posé au rendu (détection de route, Static SSR). */
.vitrine-nav-link[aria-current="page"][b-mtn6mg6zxt] {
    text-decoration: underline;
    text-underline-offset: var(--space-1);
    font-weight: 700;
}

/* CTA primaire sauge (action) — ombre sauge, jamais de lavande comme action. */
.vitrine-cta[b-mtn6mg6zxt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-label);
    color: var(--color-primary-foreground);
    background: var(--color-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-button-primary);
    text-decoration: none;
    min-height: 44px;
}

.vitrine-cta:hover[b-mtn6mg6zxt] {
    background: var(--color-primary-deep);
}

.vitrine-header-lang[b-mtn6mg6zxt] {
    display: flex;
    align-items: center;
}

/* Anneau de focus sauge sur tous les interactifs (a11y — jamais la couleur seule). */
.vitrine a:focus-visible[b-mtn6mg6zxt],
.vitrine summary:focus-visible[b-mtn6mg6zxt],
.vitrine-nav-toggle:focus-visible + .vitrine-burger[b-mtn6mg6zxt] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── Footer ── */
.vitrine-footer[b-mtn6mg6zxt] {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-10);
}

.vitrine-footer-top[b-mtn6mg6zxt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    max-width: var(--container-vitrine);
    margin: 0 auto;
    padding: var(--section-vitrine) var(--margin-mobile) var(--space-5);
}

.vitrine-wordmark--footer[b-mtn6mg6zxt] {
    font-size: var(--text-h2);
}

.vitrine-footer-lang[b-mtn6mg6zxt] {
    margin-left: auto;
}

.vitrine-footer-links[b-mtn6mg6zxt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    width: 100%;
}

.vitrine-footer-links a[b-mtn6mg6zxt] {
    font-family: var(--font-ui);
    font-size: var(--text-label);
    color: var(--color-text-muted);
    text-decoration: none;
}

.vitrine-footer-links a:hover[b-mtn6mg6zxt] {
    color: var(--color-primary);
}

/* Lien Carnet : lavande TEXTE = secondary-deep (contraste), jamais secondary. */
.vitrine-footer-links .vitrine-footer-carnet[b-mtn6mg6zxt] {
    color: var(--color-secondary-deep);
}

.vitrine-footer-meta[b-mtn6mg6zxt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    max-width: var(--container-vitrine);
    margin: 0 auto;
    padding: var(--space-4) var(--margin-mobile) var(--section-vitrine);
    border-top: 1px solid var(--color-border-soft);
}

.vitrine-footer-signature[b-mtn6mg6zxt] {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-text-muted);
}

.vitrine-footer-copyright[b-mtn6mg6zxt] {
    font-family: var(--font-ui);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

/* ── Mobile : reflow colonne unique, header = burger + wordmark + « FR » ── */
@media (max-width: 768px) {
    .vitrine-burger[b-mtn6mg6zxt] {
        display: inline-flex;
        order: 1;
    }

    .vitrine-wordmark[b-mtn6mg6zxt] {
        order: 2;
        margin: 0 auto;
    }

    .vitrine-header-lang[b-mtn6mg6zxt] {
        order: 3;
    }

    .vitrine-nav-panel[b-mtn6mg6zxt] {
        display: none;
        order: 4;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        margin: 0;
        padding: var(--space-4) var(--margin-mobile);
        background: var(--color-surface);
        box-shadow: var(--shadow-card-vitrine);
    }

    /* La case (cachée) pilote l'ouverture du panneau — sans JS. */
    .vitrine-nav-toggle:checked ~ .vitrine-nav-panel[b-mtn6mg6zxt] {
        display: flex;
    }

    .vitrine-cta[b-mtn6mg6zxt] {
        width: 100%;
    }

    .vitrine-footer-lang[b-mtn6mg6zxt] {
        margin-left: 0;
    }
}
/* /Components/Pages/Admin/Calendrier.razor.rz.scp.css */
/* Page Calendrier interne (Story 1.6). Langage de bordures : le cadre .panel (bordure, rayon,
   aucune ombre) est posé par AdminLayout (::deep .panel) — ici on ajoute le padding et la barre
   de navigation par mois. Liens de navigation focusables nativement (anneau :focus-visible sauge
   global). Mulish partout (le titre h1 = Cormorant via les styles globaux). */

.cal-panel[b-lvjyb6tqw9] {
    padding: var(--space-5);
}

.cal-monthnav[b-lvjyb6tqw9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.cal-monthlabel[b-lvjyb6tqw9] {
    font-weight: 700;                   /* Mulish, pas Cormorant */
    font-size: var(--text-body-lg);
    min-width: 9ch;
}

.cal-navlink[b-lvjyb6tqw9] {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: var(--text-body-app);
}

.cal-navlink:hover[b-lvjyb6tqw9] {
    background-color: var(--color-surface-muted);
    text-decoration: none;
}

/* « Aujourd'hui » poussé à droite de la barre. */
.cal-navlink--today[b-lvjyb6tqw9] {
    margin-left: auto;
}

@media (max-width: 720px) {
    .cal-navlink--today[b-lvjyb6tqw9] {
        margin-left: 0;
    }
}

/* ===== Story 1.7 — barre d'outils, blocage / déblocage ===== */

.cal-toolbar[b-lvjyb6tqw9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.cal-toolbar .cal-monthnav[b-lvjyb6tqw9] {
    margin-bottom: 0;
}

/* Bascule FR-4 « Afficher le calendrier public » (Story 1.8) — langage de bordures back-office. */
.cal-toggle-wrap[b-lvjyb6tqw9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
}

.cal-toggle[b-lvjyb6tqw9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--text-body-app);
    color: var(--color-text-primary);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.cal-toggle:disabled[b-lvjyb6tqw9] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Case : vide (désactivé) → sauge + coche (activé). L'état est aussi porté par aria-checked et la
   coche affichée dans le balisage : jamais la couleur seule. */
.cal-toggle .box[b-lvjyb6tqw9] {
    width: 1rem;
    height: 1rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary-foreground);
}

.cal-toggle[aria-checked="true"] .box[b-lvjyb6tqw9] {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.cal-toggle-note[b-lvjyb6tqw9] {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

.cal-block-wrap[b-lvjyb6tqw9] {
    position: relative;
    margin-left: auto;
}

/* Boutons back-office (langage de bordures ; ombre réservée au popover transitoire). */
.cal-btn[b-lvjyb6tqw9] {
    font-weight: 700;
    font-size: var(--text-body-app);
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    cursor: pointer;
}

.cal-btn:disabled[b-lvjyb6tqw9] {
    opacity: 0.5;
    cursor: default;
}

.cal-btn--primary[b-lvjyb6tqw9] {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

.cal-btn--primary:not(:disabled):hover[b-lvjyb6tqw9] {
    background-color: var(--color-primary-deep);
}

.cal-btn--ghost[b-lvjyb6tqw9] {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.cal-btn--ghost:not(:disabled):hover[b-lvjyb6tqw9] {
    background-color: var(--color-surface-muted);
}

.cal-btn--danger[b-lvjyb6tqw9] {
    background-color: var(--color-danger);
    color: var(--color-primary-foreground);
}

.cal-btn--danger:not(:disabled):hover[b-lvjyb6tqw9] {
    filter: brightness(0.94);
}

/* ----- Popover de motif : overlay PROFONDEUR 1 (invariant 1.4) ----- */
.cal-popover-backdrop[b-lvjyb6tqw9] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;            /* capte le clic-dehors sans assombrir (popover discret) */
}

.cal-popover[b-lvjyb6tqw9] {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 41;
    width: 260px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
    /* Seul élément transitoire du back-office : ombre portée nette autorisée (D12). */
    box-shadow: 0 8px 24px rgba(44, 42, 38, 0.12);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.cal-popover-title[b-lvjyb6tqw9] {
    font-size: var(--text-body-lg);
    margin: 0 0 var(--space-2);
}

.cal-popover-range[b-lvjyb6tqw9] {
    font-size: var(--text-caption);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

.cal-muted[b-lvjyb6tqw9] {
    color: var(--color-text-muted);
}

.cal-datefields[b-lvjyb6tqw9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.cal-datefields label[b-lvjyb6tqw9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--color-text-muted);
}

.cal-datefields input[b-lvjyb6tqw9] {
    font: inherit;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
}

.cal-motif[b-lvjyb6tqw9] {
    border: 0;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cal-motif legend[b-lvjyb6tqw9] {
    font-size: var(--text-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
    padding: 0;
}

.cal-required[b-lvjyb6tqw9] {
    color: var(--color-danger-foreground);
}

.cal-motif-opt[b-lvjyb6tqw9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: inherit;
    font-weight: 600;
    text-align: left;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.cal-motif-opt.sel[b-lvjyb6tqw9] {
    border-color: var(--color-primary);
    background-color: var(--color-primary-tint);
}

.cal-motif-dot[b-lvjyb6tqw9] {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.cal-motif-dot--maintenance[b-lvjyb6tqw9] {
    background-color: var(--color-state-blocked-maintenance-cell);
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(44, 42, 38, 0.22) 4px 6px);
}

.cal-motif-dot--family[b-lvjyb6tqw9] {
    background-color: var(--color-state-blocked-family-cell);
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(44, 42, 38, 0.22) 4px 6px);
}

.cal-popover-actions[b-lvjyb6tqw9] {
    display: flex;
    gap: var(--space-2);
}

.cal-popover-actions .cal-btn[b-lvjyb6tqw9] {
    flex: 1;
    text-align: center;
}

/* ----- Messages d'état (succès / erreur, non bloquants) ----- */
.cal-msg[b-lvjyb6tqw9] {
    font-size: var(--text-body-app);
    font-weight: 600;
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-3);
}

.cal-msg--success[b-lvjyb6tqw9] {
    background-color: var(--color-success-tint);
    color: var(--color-primary-deep);
}

.cal-msg--error[b-lvjyb6tqw9] {
    background-color: var(--color-danger-tint);
    color: var(--color-danger-foreground);
}

/* ----- Bandeau de déblocage inline (pas un 2e overlay : profondeur 1 préservée) ----- */
.cal-unblock[b-lvjyb6tqw9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    justify-content: space-between;
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-body-app);
}

.cal-unblock-actions[b-lvjyb6tqw9] {
    display: flex;
    gap: var(--space-2);
}
/* /Components/Pages/Admin/Carnet.razor.rz.scp.css */
/* Carnet de la maison back-office (Story 5.1). Langage de BORDURES (sable froid, aucune ombre), cohérent
   avec les autres pages /admin (Galerie/Contenu). */

.carnet-section[b-8wmrzch6dx],
.carnet-newsection[b-8wmrzch6dx] {
    margin-block-end: 1.5rem;
    padding: 1.25rem;
}

.carnet-section-title[b-8wmrzch6dx] {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.carnet-empty[b-8wmrzch6dx] {
    color: var(--admin-muted, #6b6f6a);
    font-style: italic;
}

.carnet-empty--section[b-8wmrzch6dx] {
    margin-block: 0.5rem;
}

.carnet-section-head[b-8wmrzch6dx] {
    margin-block-end: 1rem;
    padding-block-end: 1rem;
    border-bottom: 1px solid var(--admin-border, #d8d4cc);
}

.carnet-list[b-8wmrzch6dx] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.carnet-item[b-8wmrzch6dx] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--admin-border, #d8d4cc);
    border-radius: 6px;
}

.carnet-item-body[b-8wmrzch6dx] {
    flex: 1 1 auto;
    min-width: 0;
}

.carnet-item-kind[b-8wmrzch6dx] {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-muted, #6b6f6a);
    margin-block-end: 0.25rem;
}

.carnet-item-meta[b-8wmrzch6dx] {
    margin-inline-start: 0.5rem;
    font-size: 0.8rem;
    color: var(--admin-muted, #6b6f6a);
}

.carnet-doc-link[b-8wmrzch6dx] {
    font-weight: 600;
}

.carnet-label[b-8wmrzch6dx] {
    display: block;
    font-size: 0.85rem;
    margin: 0.25rem 0;
}

.carnet-input[b-8wmrzch6dx],
.carnet-textarea[b-8wmrzch6dx] {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--admin-border, #d8d4cc);
    border-radius: 4px;
    font: inherit;
}

.carnet-textarea[b-8wmrzch6dx] {
    min-height: 4rem;
    resize: vertical;
}

.carnet-section-actions[b-8wmrzch6dx],
.carnet-item-actions[b-8wmrzch6dx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-block-start: 0.5rem;
}

.carnet-add[b-8wmrzch6dx] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-top: 1px solid var(--admin-border, #d8d4cc);
}

.carnet-add-block[b-8wmrzch6dx] {
    flex: 1 1 16rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.carnet-add-title[b-8wmrzch6dx] {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
}

.carnet-btn[b-8wmrzch6dx] {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--admin-border, #c7c2b8);
    border-radius: 4px;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.carnet-btn:disabled[b-8wmrzch6dx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.carnet-btn--primary[b-8wmrzch6dx] {
    border-color: var(--admin-accent, #4a5d43);
    background: var(--admin-accent, #4a5d43);
    color: #fff;
}

.carnet-btn--danger[b-8wmrzch6dx] {
    border-color: #9a3b3b;
    color: #9a3b3b;
}

.carnet-btn--ghost[b-8wmrzch6dx] {
    padding-inline: 0.6rem;
}

.carnet-msg[b-8wmrzch6dx] {
    margin-block: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

.carnet-msg--success[b-8wmrzch6dx] {
    border: 1px solid #4a5d43;
    color: #34452f;
}

.carnet-msg--error[b-8wmrzch6dx] {
    border: 1px solid #9a3b3b;
    color: #7a2e2e;
}
/* /Components/Pages/Admin/Contenu.razor.rz.scp.css */
/* Édition du Contenu vitrine (Story 4.1). Langage de bordures back-office, aucune ombre.
   Le cadre `.panel` est posé par AdminLayout (::deep .panel). */

.contenu-group[b-3a53dinpy9] {
    margin-bottom: var(--space-5);
}

.contenu-group-title[b-3a53dinpy9] {
    margin: 0 0 var(--space-4);
    font-size: var(--text-h2-app, 1.125rem);
    color: var(--color-text-primary);
}

.contenu-field[b-3a53dinpy9] {
    margin-bottom: var(--space-4);
}

.contenu-label[b-3a53dinpy9] {
    display: block;
    font-weight: 600;
    font-size: var(--text-body-app);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.contenu-input[b-3a53dinpy9],
.contenu-textarea[b-3a53dinpy9] {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: var(--text-body-app);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
}

.contenu-textarea[b-3a53dinpy9] {
    resize: vertical;
    min-height: calc(var(--space-5) * 2);
    line-height: 1.5;
}

.contenu-input:focus[b-3a53dinpy9],
.contenu-textarea:focus[b-3a53dinpy9] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.contenu-input:disabled[b-3a53dinpy9],
.contenu-textarea:disabled[b-3a53dinpy9] {
    opacity: 0.6;
}

/* ----- Éditeur de liste (équipements) ----- */
.contenu-listedit[b-3a53dinpy9] {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.contenu-listitem[b-3a53dinpy9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.contenu-listitem .contenu-input[b-3a53dinpy9] {
    flex: 1 1 auto;
}

.contenu-listitem-actions[b-3a53dinpy9] {
    display: flex;
    gap: var(--space-1);
    flex: 0 0 auto;
}

.contenu-addbtn[b-3a53dinpy9] {
    margin-top: var(--space-1);
}

/* ----- Pied de section (bouton enregistrer + message d'état) ----- */
.contenu-group-foot[b-3a53dinpy9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

/* ----- Boutons (calque .demande-btn) ----- */
.contenu-btn[b-3a53dinpy9] {
    font-weight: 700;
    font-size: var(--text-body-app);
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    cursor: pointer;
}

.contenu-btn:disabled[b-3a53dinpy9] {
    opacity: 0.5;
    cursor: default;
}

.contenu-btn--ghost[b-3a53dinpy9] {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.contenu-btn--ghost:not(:disabled):hover[b-3a53dinpy9] {
    background-color: var(--color-surface-muted);
}

.contenu-btn--primary[b-3a53dinpy9] {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

.contenu-btn--primary:not(:disabled):hover[b-3a53dinpy9] {
    filter: brightness(0.96);
}

/* ----- Messages d'état (succès / erreur) — calque .demande-msg ----- */
.contenu-msg[b-3a53dinpy9] {
    font-size: var(--text-body-app);
    font-weight: 600;
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    margin: 0;
}

.contenu-msg--success[b-3a53dinpy9] {
    background-color: var(--color-success-tint);
    color: var(--color-primary-deep);
}

.contenu-msg--error[b-3a53dinpy9] {
    background-color: var(--color-danger-tint);
    color: var(--color-danger-foreground);
}
/* /Components/Pages/Admin/Demandes.razor.rz.scp.css */
/* Page liste des Demandes (Story 3.1). Langage de bordures back-office, aucune ombre.
   Les styles `.panel` / `.panel-empty` sont scoped à Index.razor ⇒ on redéclare ici l'état vide
   (le cadre `.panel` reste posé par AdminLayout `::deep .panel`). */

.demandes-list[b-tiaxn287vq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Mise en évidence NON chromatique des Demandes non traitées (AC1) : un accent de bord franc à gauche
   (structure visuelle), redondant avec le `status-chip` texte « En attente ». Jamais la couleur seule.
   `::deep` car `.request-card` est rendue par le composant enfant (hors scope de cette page). */
.demande-item--pending[b-tiaxn287vq]  .request-card {
    border-left: 3px solid var(--color-primary);
}

.panel-empty[b-tiaxn287vq] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-body-app);
}

/* ----- Messages d'état (succès / erreur, non bloquants) — calque .cal-msg ----- */
.demande-msg[b-tiaxn287vq] {
    font-size: var(--text-body-app);
    font-weight: 600;
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
}

.demande-msg--success[b-tiaxn287vq] {
    background-color: var(--color-success-tint);
    color: var(--color-primary-deep);
}

.demande-msg--error[b-tiaxn287vq] {
    background-color: var(--color-danger-tint);
    color: var(--color-danger-foreground);
}

/* ----- Confirmation de refus inline (profondeur 1, pas un 2e overlay) — calque .cal-unblock ----- */
.demande-refuse[b-tiaxn287vq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    justify-content: space-between;
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-body-app);
}

.demande-refuse-actions[b-tiaxn287vq] {
    display: flex;
    gap: var(--space-2);
}

.demande-btn[b-tiaxn287vq] {
    font-weight: 700;
    font-size: var(--text-body-app);
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    cursor: pointer;
}

.demande-btn:disabled[b-tiaxn287vq] {
    opacity: 0.5;
    cursor: default;
}

.demande-btn--ghost[b-tiaxn287vq] {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.demande-btn--ghost:not(:disabled):hover[b-tiaxn287vq] {
    background-color: var(--color-surface-muted);
}

.demande-btn--danger[b-tiaxn287vq] {
    background-color: var(--color-danger);
    color: var(--color-primary-foreground);
}

.demande-btn--danger:not(:disabled):hover[b-tiaxn287vq] {
    filter: brightness(0.94);
}
/* /Components/Pages/Admin/Fiche.razor.rz.scp.css */
/* Fiche de réservation (FR-16, Story 3.3) — langage de bordures back-office, aucune ombre.
   Calque la maquette key-backoffice-fiche.html. [Source: DESIGN.md fiche ; maquette] */

.panel-empty[b-9hvja78ql8] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-body-app);
}

/* ----- Fil d'Ariane ----- */
.fiche-breadcrumb[b-9hvja78ql8] {
    font-size: var(--text-caption);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.fiche-breadcrumb a[b-9hvja78ql8] {
    color: var(--color-secondary-deep);
    text-decoration: none;
}

.fiche-breadcrumb a:hover[b-9hvja78ql8] {
    text-decoration: underline;
}

.fiche-sep[b-9hvja78ql8] {
    margin: 0 var(--space-2);
    color: var(--color-text-muted);
}

.fiche-current[b-9hvja78ql8] {
    color: var(--color-text-primary);
}

/* ----- En-tête ----- */
.fiche-head[b-9hvja78ql8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.fiche-title[b-9hvja78ql8] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h1);
    color: var(--color-text-primary);
}

/* ----- Bande de faits ----- */
.fiche-facts[b-9hvja78ql8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
}

.fiche-fact[b-9hvja78ql8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.fiche-fact dt[b-9hvja78ql8] {
    font-size: var(--text-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    font-weight: 700;
}

.fiche-fact dd[b-9hvja78ql8] {
    margin: 0;
    font-size: var(--text-body-app);
    font-weight: 700;
    color: var(--color-text-primary);
}

.fiche-fact dd small[b-9hvja78ql8] {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* ----- Grille 2 colonnes (s'empile sous ~1080px) ----- */
.fiche-cols[b-9hvja78ql8] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 1080px) {
    .fiche-cols[b-9hvja78ql8] {
        grid-template-columns: 1fr;
    }
}

/* ----- Carte Notes internes ----- */
.fiche-card[b-9hvja78ql8] {
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.fiche-card-title[b-9hvja78ql8] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    color: var(--color-text-primary);
}

.fiche-card-hint[b-9hvja78ql8] {
    margin: 0;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

.fiche-notes[b-9hvja78ql8] {
    width: 100%;
    font-family: var(--font-ui);
    font-size: var(--text-body-app);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    resize: vertical;
}

.fiche-notes-foot[b-9hvja78ql8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.fiche-notes-meta[b-9hvja78ql8] {
    font-size: var(--text-caption);
    font-style: italic;
    color: var(--color-text-muted);
}

.fiche-notes-meta b[b-9hvja78ql8] {
    font-style: normal;
    color: var(--color-primary-deep);
}

/* ----- Messages d'état + bouton (calque .demande-msg / .demande-btn, scoped à cette page) ----- */
.demande-msg[b-9hvja78ql8] {
    font-size: var(--text-body-app);
    font-weight: 600;
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
}

.demande-msg--success[b-9hvja78ql8] {
    background-color: var(--color-success-tint);
    color: var(--color-primary-deep);
}

.demande-msg--error[b-9hvja78ql8] {
    background-color: var(--color-danger-tint);
    color: var(--color-danger-foreground);
}

.demande-btn[b-9hvja78ql8] {
    font-weight: 700;
    font-size: var(--text-body-app);
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    cursor: pointer;
}

.demande-btn:disabled[b-9hvja78ql8] {
    opacity: 0.5;
    cursor: default;
}

.demande-btn--ghost[b-9hvja78ql8] {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.demande-btn--ghost:not(:disabled):hover[b-9hvja78ql8] {
    background-color: var(--color-surface-muted);
}
/* /Components/Pages/Admin/Galerie.razor.rz.scp.css */
/* Galerie média back-office (Story 4.2). Langage de BORDURES (sable froid, aucune ombre), cohérent
   avec les autres pages /admin. */

.gal-section[b-o42rylhddm] {
    margin-block-end: 1.5rem;
    padding: 1.25rem;
}

.gal-section-title[b-o42rylhddm] {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.gal-empty[b-o42rylhddm] {
    color: var(--admin-muted, #6b6f6a);
    font-style: italic;
}

.gal-list[b-o42rylhddm] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gal-item[b-o42rylhddm] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--admin-border, #d8d4cc);
    border-radius: 6px;
}

.gal-thumb[b-o42rylhddm] {
    flex: 0 0 auto;
    width: 120px;
    height: auto;
    border: 1px solid var(--admin-border, #d8d4cc);
    border-radius: 4px;
    object-fit: cover;
}

.gal-item-body[b-o42rylhddm] {
    flex: 1 1 auto;
    min-width: 0;
}

.gal-label[b-o42rylhddm] {
    display: block;
    font-size: 0.85rem;
    margin: 0.25rem 0;
}

.gal-input[b-o42rylhddm] {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--admin-border, #d8d4cc);
    border-radius: 4px;
    font: inherit;
}

.gal-item-actions[b-o42rylhddm],
.gal-add[b-o42rylhddm],
.gal-videoform[b-o42rylhddm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-block-start: 0.5rem;
}

.gal-add[b-o42rylhddm],
.gal-videoform[b-o42rylhddm] {
    flex-direction: column;
    align-items: flex-start;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-top: 1px solid var(--admin-border, #d8d4cc);
}

.gal-add-title[b-o42rylhddm] {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
}

.gal-btn[b-o42rylhddm] {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--admin-border, #c7c2b8);
    border-radius: 4px;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.gal-btn:disabled[b-o42rylhddm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.gal-btn--primary[b-o42rylhddm] {
    border-color: var(--admin-accent, #4a5d43);
    background: var(--admin-accent, #4a5d43);
    color: #fff;
}

.gal-btn--danger[b-o42rylhddm] {
    border-color: #9a3b3b;
    color: #9a3b3b;
}

.gal-btn--ghost[b-o42rylhddm] {
    padding-inline: 0.6rem;
}

.gal-video[b-o42rylhddm] {
    display: block;
    max-width: 100%;
    margin-block-end: 0.75rem;
    border: 1px solid var(--admin-border, #d8d4cc);
    border-radius: 4px;
}

.gal-msg[b-o42rylhddm] {
    margin-block-start: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

.gal-msg--success[b-o42rylhddm] {
    border: 1px solid #4a5d43;
    color: #34452f;
}

.gal-msg--error[b-o42rylhddm] {
    border: 1px solid #9a3b3b;
    color: #7a2e2e;
}
/* /Components/Pages/Admin/Index.razor.rz.scp.css */
/* Tableau de bord Back-office (Story 1.4). Token-isé, langage de bordures.
   Le cadre des panneaux (.panel) est posé par AdminLayout (::deep .panel) ; ici on
   ajoute densité (padding, grille, titres). Aucune ombre, aucune classe Bootstrap. */

.admin-page-head[b-jv85m5g5ye] {
    margin-bottom: var(--space-5);
}

.admin-page-head h1[b-jv85m5g5ye] {
    font-size: var(--text-h2);
    margin-bottom: var(--space-1);
}

.admin-welcome[b-jv85m5g5ye] {
    margin: 0;
    color: var(--color-text-muted);
}

/* Grille des panneaux : ~1,5fr / 1fr en desktop, empilée sous le breakpoint mobile. */
.admin-dashboard[b-jv85m5g5ye] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-5);
}

.panel[b-jv85m5g5ye] {
    padding: var(--space-5);
}

.panel-title[b-jv85m5g5ye] {
    font-size: var(--text-h3);
    margin: 0 0 var(--space-3);
}

.panel-empty[b-jv85m5g5ye] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-body-app);
}

/* Aperçu « Demandes récentes » (Story 3.1) — lignes compactes (nom · dates · chip). */
.dash-demandes[b-jv85m5g5ye] {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dash-demande[b-jv85m5g5ye] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-body-app);
}

.dash-demande-name[b-jv85m5g5ye] {
    font-weight: 700;
}

.dash-demande-dates[b-jv85m5g5ye] {
    color: var(--color-text-muted);
}

.dash-demandes-link[b-jv85m5g5ye] {
    margin: 0;
    font-size: var(--text-body-app);
}

@media (max-width: 720px) {
    .admin-dashboard[b-jv85m5g5ye] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Reservations.razor.rz.scp.css */
/* Liste des Réservations (FR-16, Story 3.3) — langage de bordures back-office, aucune ombre. */

.reservations-list[b-1ptbwti5ff] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.panel-empty[b-1ptbwti5ff] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-body-app);
}

.reservation-link[b-1ptbwti5ff] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
    text-decoration: none;
    color: var(--color-text-primary);
}

.reservation-link:hover[b-1ptbwti5ff] {
    background-color: var(--color-surface-muted);
}

.reservation-name[b-1ptbwti5ff] {
    font-weight: 700;
    font-size: var(--text-body-app);
    flex: 1 1 10rem;
}

.reservation-dates[b-1ptbwti5ff] {
    font-size: var(--text-body-app);
    color: var(--color-text-primary);
}

.reservation-dates small[b-1ptbwti5ff] {
    color: var(--color-text-muted);
}

.reservation-progress[b-1ptbwti5ff] {
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--color-text-muted);
}
/* /Components/Pages/Carnet.razor.rz.scp.css */
/* Consultation publique du Carnet (Story 5.3). Styles scoppés, sobres, alignés sur la Vitrine
   (variables de design tokens héritées du layout). Lecture seule : pas d'état interactif. */

.carnet-public[b-xswicumhci] {
    max-width: 52rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.carnet-public-title[b-xswicumhci] {
    margin-bottom: 0.25rem;
}

.carnet-public-lead[b-xswicumhci] {
    margin-bottom: 2rem;
    opacity: 0.8;
}

.carnet-public-section[b-xswicumhci] {
    margin-bottom: 2rem;
}

.carnet-public-section-title[b-xswicumhci] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
}

.carnet-public-list[b-xswicumhci] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.carnet-public-note-title[b-xswicumhci] {
    margin: 0 0 0.2rem;
    font-size: 1rem;
}

/* Texte de note ÉCHAPPÉ : on préserve seulement les sauts de ligne d'origine (jamais de HTML). */
.carnet-public-note-body[b-xswicumhci] {
    margin: 0;
    white-space: pre-line;
}

.carnet-public-doc-size[b-xswicumhci] {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.7;
}

.carnet-public-empty[b-xswicumhci],
.carnet-public-unavailable[b-xswicumhci] {
    opacity: 0.75;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Page d'accueil Vitrine — styles scoped, 100% tokenisés (design-tokens.css).
   Élévation par ombres (les cartes héritent de .vitrine ::deep .card du layout). */

/* ── Boutons ── */
.btn-primary[b-d3icej8irm],
.btn-ghost[b-d3icej8irm],
.btn-on-sage[b-d3icej8irm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-label);
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-md);
    text-decoration: none;
}

.btn-primary[b-d3icej8irm] {
    color: var(--color-primary-foreground);
    background: var(--color-primary);
    box-shadow: var(--shadow-button-primary);
}

.btn-primary:hover[b-d3icej8irm] {
    background: var(--color-primary-deep);
}

.btn-ghost[b-d3icej8irm] {
    color: var(--color-primary-deep);
    background: transparent;
    border: 1px solid var(--color-primary);
}

.btn-ghost:hover[b-d3icej8irm] {
    background: var(--color-primary-tint);
}

/* Variante « sur sauge » (bandeau CTA) : surface claire sur fond sauge. */
.btn-on-sage[b-d3icej8irm] {
    color: var(--color-primary-deep);
    background: var(--color-surface);
}

/* ── Hero ── */
.hero[b-d3icej8irm] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    margin-bottom: var(--section-vitrine);
}

.hero-eyebrow[b-d3icej8irm] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-eyebrow);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-secondary-deep);
    margin: 0 0 var(--space-3);
}

.hero-title[b-d3icej8irm] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-display);
    line-height: 1.05;
    margin: 0 0 var(--space-4);
}

.hero-subtitle[b-d3icej8irm] {
    font-size: var(--text-body-lg);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
    max-width: 36ch;
}

.hero-cta[b-d3icej8irm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hero-photo[b-d3icej8irm] {
    min-height: 340px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-tint);
    box-shadow: var(--shadow-card-vitrine);
}

/* ── Sections (teasers) ── */
.section[b-d3icej8irm] {
    padding: var(--section-vitrine) 0;
    border-top: 1px solid var(--color-border-soft);
}

.section-kicker[b-d3icej8irm] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-eyebrow);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--space-3);
}

.section-heading[b-d3icej8irm] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h1);
    margin: 0 0 var(--space-4);
}

.section-lead[b-d3icej8irm] {
    font-size: var(--text-body);
    color: var(--color-text-muted);
    max-width: 60ch;
    margin: 0 0 var(--space-5);
}

.section-grid[b-d3icej8irm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.section-photo[b-d3icej8irm] {
    min-height: 280px;
    border-radius: var(--radius-lg);
    background: var(--color-secondary-tint);
    box-shadow: var(--shadow-card-vitrine);
}

/* ── Équipements (chips) ── */
.amenities[b-d3icej8irm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.amenity-chip[b-d3icej8irm] {
    font-family: var(--font-ui);
    font-size: var(--text-label);
    color: var(--color-primary-deep);
    background: var(--color-primary-tint);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
}

/* ── Disponibilités (teaser : 1 mois courant, composant availability-calendar — Story 2.5) ── */
.dispo-teaser[b-d3icej8irm] {
    max-width: 420px;
    margin: 0 0 var(--space-5);
}

.dispo-legend[b-d3icej8irm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
}

.dispo-legend-item[b-d3icej8irm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-label);
}

.dot[b-d3icej8irm] {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    display: inline-block;
}

.dot-available[b-d3icej8irm] {
    background: var(--color-state-available);
    border: 1px solid var(--color-border);
}

.dot-unavailable[b-d3icej8irm] {
    background: var(--color-primary);
}

/* ── Région (3 cartes) ── */
.region-cards[b-d3icej8irm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}

.region-card[b-d3icej8irm] {
    padding: var(--space-5);
}

.region-card-title[b-d3icej8irm] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-2);
}

.region-card p[b-d3icej8irm] {
    color: var(--color-text-muted);
    font-size: var(--text-body);
    margin: 0;
}

/* ── Bandeau CTA de clôture (fond sauge plein) ── */
.cta-band[b-d3icej8irm] {
    margin-top: var(--section-vitrine);
    padding: var(--section-vitrine) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    text-align: center;
}

.cta-band-heading[b-d3icej8irm] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h1);
    margin: 0 0 var(--space-3);
}

.cta-band-text[b-d3icej8irm] {
    font-size: var(--text-body-lg);
    margin: 0 auto var(--space-5);
    max-width: 48ch;
    opacity: .95;
}

/* ── Mobile : colonne unique ── */
@media (max-width: 768px) {
    .hero[b-d3icej8irm],
    .section-grid[b-d3icej8irm] {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .region-cards[b-d3icej8irm] {
        grid-template-columns: 1fr;
    }

    .hero-title[b-d3icej8irm] {
        font-size: var(--text-h1);
    }

    .hero-cta .btn-primary[b-d3icej8irm],
    .hero-cta .btn-ghost[b-d3icej8irm] {
        width: 100%;
    }
}
/* /Components/Pages/Styleguide.razor.rz.scp.css */
/* Styles scoped de la page styleguide — démonstration des tokens.
   Tout s'appuie sur les variables de design-tokens.css. */

.sg[b-pjvjtl9cuw] {
    max-width: 980px;
}

.sg-head[b-pjvjtl9cuw] {
    margin-bottom: var(--space-10);
}

.sg-section[b-pjvjtl9cuw] {
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-soft);
}

.sg-label[b-pjvjtl9cuw] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-label);
}

/* ── Nuancier ── */
.sg-swatches[b-pjvjtl9cuw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.sg-swatch[b-pjvjtl9cuw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    width: 120px;
    text-align: center;
}

.sg-swatch span[b-pjvjtl9cuw] {
    width: 100%;
    height: 56px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* ── Rayons ── */
.sg-radii[b-pjvjtl9cuw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.sg-radius[b-pjvjtl9cuw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 72px;
    background-color: var(--color-primary-tint);
    border: 1px solid var(--color-primary);
    font-size: var(--text-caption);
    color: var(--color-primary-deep);
}

/* ── Boutons & ombres ── */
.sg-btn-primary[b-pjvjtl9cuw] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-label);
    color: var(--color-primary-foreground);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    box-shadow: var(--shadow-button-primary);
}

.sg-btn-primary:hover[b-pjvjtl9cuw] {
    background-color: var(--color-primary-deep);
}

.sg-elevation-demo[b-pjvjtl9cuw] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.sg-shadow-card[b-pjvjtl9cuw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 120px;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-vitrine);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

/* ── Deux coquilles côte à côte ── */
.sg-shells[b-pjvjtl9cuw] {
    display: flex;
    gap: var(--gutter);
    flex-wrap: wrap;
}

.sg-shell-vitrine[b-pjvjtl9cuw],
.sg-shell-app[b-pjvjtl9cuw] {
    flex: 1;
    min-width: 260px;
    padding: var(--space-6);
    border-radius: var(--radius);
}

.sg-shell-vitrine[b-pjvjtl9cuw] {
    background-color: var(--color-background);
}

.sg-shell-app[b-pjvjtl9cuw] {
    background-color: var(--color-background-app);
}

/* Vitrine : élévation par ombre. */
.sg-vitrine-card[b-pjvjtl9cuw] {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-vitrine);
    padding: var(--space-5);
}

/* Back-office : élévation par bordure, pas d'ombre. */
.sg-app-panel[b-pjvjtl9cuw] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
    box-shadow: none;
    padding: var(--space-5);
    font-size: var(--text-body-app);
}

/* ── Démo focus ── */
.sg-focus-demo[b-pjvjtl9cuw] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.sg-focus-demo input[b-pjvjtl9cuw] {
    font-family: var(--font-ui);
    font-size: var(--text-body);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
/* Sélecteur de langue « FR ▾ » — styles scoped, tokenisés (rien en dur).
   [Source: DESIGN.md#components.language-switcher ; design-tokens.css ; story 2.1 T4] */

.lang-switcher[b-4b6is4froh] {
    position: relative;
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--text-label);
}

/* Déclencheur « FR ▾ » : surface, bordure discrète, rayon — sans icône. */
.lang-switcher > summary[b-4b6is4froh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;            /* retire le marqueur natif du <summary> */
    user-select: none;
}

.lang-switcher > summary[b-4b6is4froh]::-webkit-details-marker {
    display: none;
}

.lang-caret[b-4b6is4froh] {
    color: var(--color-text-muted);
    font-size: 0.8em;
    line-height: 1;
}

/* Menu déroulant. */
.lang-menu[b-4b6is4froh] {
    position: absolute;
    z-index: 10;
    margin: var(--space-1) 0 0;
    padding: var(--space-1);
    min-width: 100%;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-vitrine);
}

.lang-menu li[b-4b6is4froh] {
    margin: 0;
}

.lang-option[b-4b6is4froh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    text-decoration: none;
}

.lang-option:hover[b-4b6is4froh] {
    background: var(--color-primary-tint);
}

/* Langue active : fond teinté sauge + coche ✓ (le sens ne dépend jamais de la couleur seule). */
.lang-option--active[b-4b6is4froh] {
    background: var(--color-primary-tint);
    color: var(--color-primary-deep);
    font-weight: 700;
}

.lang-check[b-4b6is4froh] {
    color: var(--color-primary);
    line-height: 1;
}
/* /Components/Shared/StatusChip.razor.rz.scp.css */
/* Pilule de statut (UX-DR4) — Mulish 700, rayon plein. Couleurs via tokens (design-tokens.css) :
   le texte assombri (*-foreground) garantit le contraste ; le fond teinté (*-tint) renforce sans
   porter seul le sens (le libellé texte reste l'information primaire). [Source: DESIGN.md L183-191] */

.status-chip[b-xszfyxde3i] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-caption);
    line-height: 1.4;
    white-space: nowrap;
}

.status-chip--pending[b-xszfyxde3i] {
    background-color: var(--color-warning-tint);
    color: var(--color-warning-foreground);
}

.status-chip--confirmed[b-xszfyxde3i] {
    background-color: var(--color-success-tint);
    color: var(--color-primary-deep);
}

.status-chip--refused[b-xszfyxde3i] {
    background-color: var(--color-danger-tint);
    color: var(--color-danger-foreground);
}
/* /Features/Calendar/Components/CalendarInternal.razor.rz.scp.css */
/* Calendrier interne (Story 1.6) — LANGAGE DE BORDURES back-office : cellules cernées d'une
   bordure discrète, rayons serrés, AUCUNE ombre. Mulish partout (le titre de page = Cormorant,
   géré ailleurs). Tokens des 4 états réutilisés tels quels (design-tokens.css). Hachures = CSS pur
   (repeating-linear-gradient) — aucune image, aucune police d'icônes (D8).
   AC2 : le sens passe par le libellé texte + bandeau/hachure/pill, jamais par la couleur seule. */

.cal[b-xoq905afm7] {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;          /* indispensable pour des rayons par cellule */
    border-spacing: var(--space-1);
    font-size: var(--text-body-app);
}

.cal th[b-xoq905afm7] {
    padding: var(--space-1) 0 var(--space-2);
    text-align: center;
    font-weight: 700;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

.cal th abbr[b-xoq905afm7] {
    text-decoration: none;              /* pas de soulignement pointillé sur l'abréviation */
}

.cal-cell[b-xoq905afm7] {
    height: 60px;
    vertical-align: top;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    background-color: var(--color-surface);
}

.cal-daynum[b-xoq905afm7] {
    display: block;
    font-weight: 700;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

/* ── Fonds des 4 états (tokens dédiés) ── */
.cal-cell--reserved[b-xoq905afm7] {
    background-color: var(--color-state-reserved-cell);
}

.cal-cell--available[b-xoq905afm7] {
    background-color: var(--color-state-available);
}

/* Blocages : fond teinté + hachures 45° (repère NON chromatique, superposé en CSS pur). */
.cal-cell--maintenance[b-xoq905afm7] {
    background-color: var(--color-state-blocked-maintenance-cell);
    background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(44, 42, 38, 0.06) 5px 7px);
}

.cal-cell--family[b-xoq905afm7] {
    background-color: var(--color-state-blocked-family-cell);
    background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(44, 42, 38, 0.06) 5px 7px);
}

/* Jours de débordement (mois précédent/suivant) : estompés mais toujours porteurs de leur état. */
.cal-cell--outside[b-xoq905afm7] {
    opacity: 0.45;
}

/* Story 1.7 — cellule activable : le <button> remplit la cellule SANS la remplacer (la <table>/<td>
   reste intacte). Pas de style propre au bouton (hérite des fonds d'état) ; focus-visible sauge global. */
.cal-cell-btn[b-xoq905afm7] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 56px;
    margin: 0;
    padding: 0;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.cal-cell-btn:disabled[b-xoq905afm7] {
    cursor: default;
}

.cal-cell-btn:not(:disabled):hover[b-xoq905afm7] {
    outline: 1px solid var(--color-primary);
    outline-offset: -1px;
}

/* Plage en cours de sélection (blocage) : anneau sauge net, sans masquer l'état sous-jacent. */
.cal-cell--selected[b-xoq905afm7] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background-color: var(--color-primary-tint);
}

/* ── Repères texte des états ── */
/* Réservé : bandeau sauge (non nominatif en 1.6 — pas d'identité avant l'Epic 3). */
.cal-band[b-xoq905afm7] {
    display: block;
    margin-top: var(--space-1);
    padding: 1px var(--space-1);
    border-radius: var(--radius-app-sm);
    background-color: var(--color-state-reserved);
    color: var(--color-primary-foreground);
    font-weight: 700;
    font-size: var(--text-caption);
    text-align: center;
}

/* Pills des blocages : texte blanc (contraste vérifié sur les fonds des pills, DESIGN.md). */
.cal-pill[b-xoq905afm7] {
    display: inline-block;
    margin-top: var(--space-1);
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    color: #ffffff;
    font-weight: 700;
    font-size: var(--text-caption);
}

.cal-pill--maintenance[b-xoq905afm7] {
    background-color: var(--color-state-blocked-maintenance-pill);
}

.cal-pill--family[b-xoq905afm7] {
    background-color: var(--color-state-blocked-family-pill);
}

/* Disponible : libellé annoncé mais visuellement masqué (la cellule reste nue). */
.cal-available[b-xoq905afm7] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Légende à 4 entrées (OBLIGATOIRE — partie intégrante de l'AC1) ── */
.cal-legend[b-xoq905afm7] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-4) 0 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--color-border);
}

.cal-legend li[b-xoq905afm7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cal-swatch[b-xoq905afm7] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
}

.cal-swatch--reserved[b-xoq905afm7] {
    background-color: var(--color-state-reserved);
}

.cal-swatch--available[b-xoq905afm7] {
    background-color: var(--color-state-available);
}

.cal-swatch--maintenance[b-xoq905afm7] {
    background-color: var(--color-state-blocked-maintenance-cell);
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(44, 42, 38, 0.18) 4px 6px);
}

.cal-swatch--family[b-xoq905afm7] {
    background-color: var(--color-state-blocked-family-cell);
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(44, 42, 38, 0.18) 4px 6px);
}

/* Reflow mobile : la grille reste lisible, la légende s'empile. */
@media (max-width: 720px) {
    .cal-legend[b-xoq905afm7] {
        flex-direction: column;
        gap: var(--space-2);
    }
}
/* /Features/Requests/Components/RequestCard.razor.rz.scp.css */
/* Carte de Demande (UX-DR7) — langage de bordures back-office, aucune ombre. Premier usage du langage
   « card-app » de DESIGN.md : le cadre (fond surface, bordure discrète, rayon app) est porté ici, en
   scoped CSS auto-contenu (comme `.panel`), plutôt que via une classe utilitaire globale prématurée.
   [Source: DESIGN.md request-card L207-216 ; AdminLayout.razor.css `.panel`] */

.request-card[b-fclqgetdo1] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
}

.request-card-head[b-fclqgetdo1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.request-card-name[b-fclqgetdo1] {
    font-weight: 700;
    font-size: var(--text-body-app);
    color: var(--color-text-primary);
}

.request-card-meta[b-fclqgetdo1] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.request-card-row[b-fclqgetdo1] {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-body-app);
}

.request-card-row dt[b-fclqgetdo1] {
    flex-shrink: 0;
    width: 5.5rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.request-card-row dd[b-fclqgetdo1] {
    margin: 0;
    color: var(--color-text-primary);
}

/* Aperçu du message — style « muet » (texte estompé). [Source: DESIGN.md L216 message-preview-foreground] */
.request-card-message[b-fclqgetdo1] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-body-app);
    font-style: italic;
}

/* Note produit sur la carte Pending : rappelle la revalidation à la confirmation (FR-15). [Source: EXPERIENCE.md L148] */
.request-card-note[b-fclqgetdo1] {
    margin: 0;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

/* Actions Confirmer / Refuser (Story 3.2) — Confirmer = sauge plein (button-app),
   Refuser = ghost (button-ghost). Mêmes tokens que les boutons du calendrier. [Source: DESIGN.md L213-214] */
.request-card-actions[b-fclqgetdo1] {
    display: flex;
    gap: var(--space-2);
}

.rc-btn[b-fclqgetdo1] {
    font-weight: 700;
    font-size: var(--text-body-app);
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    cursor: pointer;
}

.rc-btn:disabled[b-fclqgetdo1] {
    opacity: 0.5;
    cursor: default;
}

.rc-btn--primary[b-fclqgetdo1] {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

.rc-btn--primary:not(:disabled):hover[b-fclqgetdo1] {
    background-color: var(--color-primary-deep);
}

.rc-btn--ghost[b-fclqgetdo1] {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.rc-btn--ghost:not(:disabled):hover[b-fclqgetdo1] {
    background-color: var(--color-surface-muted);
}

/* Lien « Voir la fiche » (Story 3.3) — lavande TEXTE lisible (jamais #7C86BC pour du texte). [Source: DESIGN.md L321] */
.rc-fiche-link[b-fclqgetdo1] {
    font-weight: 700;
    font-size: var(--text-body-app);
    color: var(--color-secondary-deep);
    text-decoration: none;
}

.rc-fiche-link:hover[b-fclqgetdo1] {
    text-decoration: underline;
}
/* /Features/Reservations/Components/CarnetLinkCard.razor.rz.scp.css */
/* Carte « lien privé du carnet » (Story 5.2, UX-DR8 carnet-link). Calque la carte Notes internes de la
   Fiche (langage de bordures back-office, aucune ombre). [Source: DESIGN.md l.217-225,322 ; Fiche.razor.css] */

.carnet-link-card[b-hosqtmgnn3] {
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
}

.carnet-link-title[b-hosqtmgnn3] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    color: var(--color-text-primary);
}

.carnet-link-empty[b-hosqtmgnn3] {
    margin: 0;
    font-size: var(--text-body-app);
    color: var(--color-text-muted);
}

/* Lien : monospace, coupable proprement (le clair peut être long). */
.carnet-link-value[b-hosqtmgnn3] {
    margin: 0;
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Consolas", monospace);
    font-size: var(--text-body-app);
    word-break: break-all;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    color: var(--color-text-primary);
}

.carnet-link-value--masked[b-hosqtmgnn3] {
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

.carnet-link-once[b-hosqtmgnn3] {
    margin: 0;
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--color-primary-deep);
}

.carnet-link-status[b-hosqtmgnn3] {
    margin: 0;
    font-size: var(--text-body-app);
    color: var(--color-text-primary);
}

.carnet-link-badge[b-hosqtmgnn3] {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-app-sm);
    margin-inline-end: var(--space-2);
}

.carnet-link-badge--revoked[b-hosqtmgnn3],
.carnet-link-badge--expired[b-hosqtmgnn3] {
    background-color: var(--color-danger-tint);
    color: var(--color-danger-foreground);
}

.carnet-link-copied[b-hosqtmgnn3] {
    margin: 0;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-primary-deep);
}

.carnet-link-actions[b-hosqtmgnn3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.carnet-link-btn[b-hosqtmgnn3] {
    font-weight: 700;
    font-size: var(--text-body-app);
    border-radius: var(--radius-app-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
}

.carnet-link-btn:disabled[b-hosqtmgnn3] {
    opacity: 0.5;
    cursor: default;
}

.carnet-link-btn--primary[b-hosqtmgnn3] {
    border-color: var(--color-secondary-deep);
    background-color: var(--color-secondary-deep);
    color: var(--color-surface);
}

/* Révoquer : sens porté par le LIBELLÉ (pas que la couleur) — a11y floor UX-DR12. */
.carnet-link-btn--danger[b-hosqtmgnn3] {
    border-color: var(--color-danger-foreground);
    background-color: var(--color-surface);
    color: var(--color-danger-foreground);
}

/* Note de sécurité : LISIBLE (pas un gris décoratif). */
.carnet-link-note[b-hosqtmgnn3] {
    margin: 0;
    font-size: var(--text-caption);
    font-style: italic;
    color: var(--color-text-muted);
}
/* /Features/Reservations/Components/Checklist.razor.rz.scp.css */
/* Checklist de Fiche (FR-16, Story 3.3) — langage de bordures back-office, aucune ombre.
   Tokens « Sous les Arbres » : « fait » = success + glyphe ; « Prochaine action » = lavande + pastille
   texte ; progression = dégradé sauge. Sens jamais porté par la couleur seule. [Source: DESIGN.md checklist] */

.checklist-card[b-6ignfgjd2z] {
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.checklist-head[b-6ignfgjd2z] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.checklist-title[b-6ignfgjd2z] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    color: var(--color-text-primary);
}

.checklist-sub[b-6ignfgjd2z] {
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--color-text-muted);
}

/* ----- Barre de progression (redondance textuelle X/N + %) ----- */
.progress-wrap[b-6ignfgjd2z] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.progress-bar[b-6ignfgjd2z] {
    flex: 1;
    height: 7px;
    border-radius: var(--radius-full);
    background-color: var(--color-border-soft);
    overflow: hidden;
}

.progress-fill[b-6ignfgjd2z] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-deep));
}

.progress-label[b-6ignfgjd2z] {
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--color-text-muted);
}

/* ----- Étapes ----- */
.steps[b-6ignfgjd2z] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.step[b-6ignfgjd2z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    background-color: var(--color-surface);
}

.step--next[b-6ignfgjd2z] {
    background-color: var(--color-secondary-tint);
    border-color: #D9DCEF;
}

.step-main[b-6ignfgjd2z] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 12rem;
    cursor: pointer;
}

/* Case réelle, cible tactile ~44px (carré ≥ 21px + zone de label cliquable). */
.step-box[b-6ignfgjd2z] {
    width: 21px;
    height: 21px;
    min-width: 21px;
    accent-color: var(--color-success);
    cursor: pointer;
}

.step-text[b-6ignfgjd2z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.step-label[b-6ignfgjd2z] {
    font-size: var(--text-body-app);
    font-weight: 600;
    color: var(--color-text-primary);
}

.step--done .step-label[b-6ignfgjd2z] {
    color: var(--color-text-muted);
}

.step--next .step-label[b-6ignfgjd2z] {
    color: var(--color-secondary-deep);
    font-weight: 700;
}

/* Pastille TEXTE « Prochaine action » — le sens est porté par le texte, pas la couleur. */
.step-pill[b-6ignfgjd2z] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-foreground);
    background-color: var(--color-secondary);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

.step-meta[b-6ignfgjd2z] {
    font-size: var(--text-caption);
    font-style: italic;
    color: var(--color-text-muted);
}

.step-meta b[b-6ignfgjd2z] {
    font-style: normal;
    color: var(--color-primary-deep);
}

/* ----- Contrôles par étape (cibles tactiles ~44px) ----- */
.step-controls[b-6ignfgjd2z],
.step-rename[b-6ignfgjd2z],
.step-remove-confirm[b-6ignfgjd2z] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.step-remove-confirm[b-6ignfgjd2z] {
    gap: var(--space-2);
    width: 100%;
    font-size: var(--text-caption);
    color: var(--color-danger-foreground);
}

.step-btn[b-6ignfgjd2z] {
    min-width: 44px;
    min-height: 36px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-caption);
    font-weight: 700;
    color: var(--color-secondary-deep);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
    cursor: pointer;
}

.step-btn:not(:disabled):hover[b-6ignfgjd2z] {
    background-color: var(--color-surface-muted);
}

.step-btn:disabled[b-6ignfgjd2z] {
    opacity: 0.5;
    cursor: default;
}

.step-btn--next.is-active[b-6ignfgjd2z] {
    background-color: var(--color-secondary-tint);
    border-color: var(--color-secondary);
}

.step-btn--danger[b-6ignfgjd2z] {
    color: var(--color-danger-foreground);
}

.step-btn--danger:not(:disabled):hover[b-6ignfgjd2z] {
    background-color: var(--color-danger-tint);
}

.step-rename-input[b-6ignfgjd2z],
.add-step-input[b-6ignfgjd2z] {
    font-size: var(--text-body-app);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-app-sm);
}

/* ----- Pied : ajout d'étape ----- */
.checklist-foot[b-6ignfgjd2z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-3);
}

.add-step[b-6ignfgjd2z] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.foot-note[b-6ignfgjd2z] {
    font-size: var(--text-caption);
    font-style: italic;
    color: var(--color-text-muted);
}
/* /Features/Vitrine/Components/AvailabilityCalendar.razor.rz.scp.css */
/* Calendrier public (consultation, 2 états) — LANGAGE D'OMBRES VITRINE, jamais le langage de
   bordures/hachures back-office (CalendarInternal.razor.css NON réutilisé). 100% tokenisé
   (design-tokens.css) : aucun hex/px en dur. L'état Indisponible passe par un repère NON
   CHROMATIQUE (texte barré + opacité réduite), jamais par la couleur seule (AC3).
   focus-visible sauge = global (Story 1.2), non re-déclaré ici. */

.avail-cal[b-izja759d60] {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: var(--space-1);
}

/* En-tête de mois (Cormorant — usage titre autorisé). */
.avail-cal-caption[b-izja759d60] {
    caption-side: top;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h3);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

/* En-têtes de jours (Mulish, libellé). */
.avail-cal th[b-izja759d60] {
    padding: var(--space-1) 0 var(--space-2);
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

.avail-cal th abbr[b-izja759d60] {
    text-decoration: none;   /* pas de soulignement pointillé sur l'abréviation */
}

/* Cellule : cible ≥ ~44px (aspect carré), élévation douce par fond clair — jamais de bordure. */
.avail-cal-cell[b-izja759d60] {
    aspect-ratio: 1 / 1;
    vertical-align: top;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-app-sm);
    text-align: left;
}

.avail-cal-num[b-izja759d60] {
    display: block;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-label);
    color: var(--color-text-primary);
}

/* Jour DISPONIBLE : surface claire (token état disponible). */
.avail-cal-cell--dispo[b-izja759d60] {
    background-color: var(--color-state-available);
    box-shadow: var(--shadow-card-vitrine);
}

/* Jour INDISPONIBLE : fond atténué + n° BARRÉ + opacité réduite = repères NON chromatiques
   (le sens ne dépend jamais de la couleur seule). */
.avail-cal-cell--indispo[b-izja759d60] {
    background-color: var(--color-surface-muted);
}

.avail-cal-cell--indispo .avail-cal-num[b-izja759d60] {
    text-decoration: line-through;
    color: var(--color-text-muted);
    opacity: 0.75;
}

/* Jours de débordement (mois précédent/suivant) : estompés. */
.avail-cal-cell--outside[b-izja759d60] {
    opacity: 0.4;
}

/* ── Mode SÉLECTION (Story 2.6) — jours dispo activables ──
   Le n° devient un <button> (avail-cal-btn) : on neutralise le chrome natif pour rester visuellement
   identique au <span> de consultation. La cible est pleine cellule (≥ ~44px) et opérable au clavier
   (Entrée/Espace, sémantique native du <button>) ; l'anneau focus-visible sauge est global (Story 1.2). */
.avail-cal-btn[b-izja759d60] {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    padding: 0;
    /* hérite font/poids/taille/couleur de .avail-cal-num (classe partagée) */
}

.avail-cal-btn:disabled[b-izja759d60] {
    cursor: default;
}

/* Surlignage de plage — LANGAGE D'OMBRES VITRINE, 100% tokenisé.
   Bande continue = teinte sauge (--color-primary-tint) ; extrémités = sauge primaire + n° en blanc
   (--color-primary-foreground), avec ombre douce. Coins arrondis côté extérieur de la plage. */
.avail-cal-cell--in-range[b-izja759d60] {
    background-color: var(--color-primary-tint);
}

.avail-cal-cell--range-start[b-izja759d60],
.avail-cal-cell--range-end[b-izja759d60],
.avail-cal-cell--selected[b-izja759d60] {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-card-vitrine);
}

.avail-cal-cell--range-start .avail-cal-num[b-izja759d60],
.avail-cal-cell--range-end .avail-cal-num[b-izja759d60],
.avail-cal-cell--selected .avail-cal-num[b-izja759d60] {
    color: var(--color-primary-foreground);
}
/* /Features/Vitrine/Pages/Demande.razor.rz.scp.css */
/* Formulaire de Demande — styles scoped, 100% tokenisés (design-tokens.css). Élévation par OMBRES
   douces (jamais de bordure back-office). Le style des CELLULES du calendrier (dont le surlignage de
   plage) vit dans le composant (AvailabilityCalendar.razor.css) ; ici : en-tête, nav par mois
   interactive, disposition 2 mois, légende, champs, stepper, consentement. Même breakpoint 768px que
   les autres pages Vitrine : 2 mois côte à côte → 1 mois (colonne unique) sur mobile. */

/* ── En-tête ── */
.demande-title[b-su5lsihkoy] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-display);
    line-height: 1.05;
    margin: 0 0 var(--space-3);
}

.demande-lede[b-su5lsihkoy] {
    font-size: var(--text-body-lg);
    color: var(--color-text-muted);
    max-width: 60ch;
    margin: 0 0 var(--space-6);
}

/* ── Carte formulaire ── */
.demande-form[b-su5lsihkoy] {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-vitrine);
    padding: var(--space-6);
    max-width: 760px;
}

.demande-dates[b-su5lsihkoy] {
    border: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}

.demande-dates legend[b-su5lsihkoy],
.demande-label[b-su5lsihkoy] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-label);
    color: var(--color-text-primary);
    padding: 0;
    margin: 0 0 var(--space-2);
    display: block;
}

/* ── Navigation par mois (boutons interactifs) ── */
.demande-monthnav[b-su5lsihkoy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}

.demande-navbtn[b-su5lsihkoy] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-label);
    color: var(--color-primary-deep);
    background: var(--color-primary-tint);
    border: none;
    cursor: pointer;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
}

.demande-navbtn:hover:not(:disabled)[b-su5lsihkoy] {
    background: var(--color-secondary-tint);
}

.demande-navbtn:disabled[b-su5lsihkoy] {
    opacity: 0.5;
    cursor: default;
}

.demande-navbtn--today[b-su5lsihkoy] {
    margin-left: auto;
}

/* ── Disposition des 2 mois ── */
.demande-months[b-su5lsihkoy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    margin: 0 0 var(--space-4);
}

/* ── Légende 3 états ── */
.demande-legend[b-su5lsihkoy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
}

.demande-legend-item[b-su5lsihkoy] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-label);
}

.dot[b-su5lsihkoy] {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-app-sm);
    display: inline-block;
    flex-shrink: 0;
}

.dot-available[b-su5lsihkoy] {
    background: var(--color-state-available);
    box-shadow: var(--shadow-card-vitrine);
}

.dot-unavailable[b-su5lsihkoy] {
    background: var(--color-surface-muted);
    position: relative;
}

.dot-unavailable[b-su5lsihkoy]::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--color-text-muted);
}

.dot-selected[b-su5lsihkoy] {
    background: var(--color-primary);
}

/* ── Bandeau de plage (aria-live) ── */
.demande-choice[b-su5lsihkoy] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-body);
    color: var(--color-primary-deep);
    margin: 0 0 var(--space-4);
}

/* ── Repli saisie texte des dates ── */
.demande-datefields[b-su5lsihkoy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.demande-datefields label[b-su5lsihkoy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-label);
}

/* ── Champs ── */
.demande-field[b-su5lsihkoy] {
    margin: 0 0 var(--space-5);
}

.control[b-su5lsihkoy] {
    width: 100%;
    font-family: var(--font-ui);
    font-size: var(--text-body);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
}

.control:focus-visible[b-su5lsihkoy] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--color-primary);
}

.demande-textarea[b-su5lsihkoy] {
    min-height: 96px;
    resize: vertical;
}

.demande-optional[b-su5lsihkoy] {
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ── Stepper ── */
.demande-stepper[b-su5lsihkoy] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.demande-step[b-su5lsihkoy] {
    width: 44px;
    height: 44px;
    font-size: var(--text-body-lg);
    font-weight: 700;
    color: var(--color-primary-deep);
    background: var(--color-primary-tint);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.demande-step:disabled[b-su5lsihkoy] {
    opacity: 0.5;
    cursor: default;
}

.demande-step-value[b-su5lsihkoy] {
    min-width: 2ch;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-body-lg);
}

/* ── Consentement RGPD ── */
.demande-consent label[b-su5lsihkoy] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-body);
    color: var(--color-text-primary);
}

.demande-consent a[b-su5lsihkoy] {
    color: var(--color-secondary-deep);
    font-weight: 600;
}

/* ── Soumission ── */
.demande-submit[b-su5lsihkoy] {
    margin-top: var(--space-2);
}

.demande-submitnote[b-su5lsihkoy] {
    font-size: var(--text-label);
    color: var(--color-text-muted);
    margin: var(--space-3) 0 0;
}

/* ── Messages ── */
.demande-error[b-su5lsihkoy] {
    font-family: var(--font-ui);
    font-size: var(--text-body);
    color: var(--color-danger-foreground);
    background: var(--color-danger-tint);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-5);
}

/* La validation par champ (ValidationMessage) hérite de la classe globale .validation-message. */

/* ── Honeypot anti-spam (Story 2.8) ── */
/* Hors flux mais PRÉSENT dans le DOM : un bot headless qui parse le DOM le voit et le remplit ; un
   humain ne le rencontre pas (invisible, hors tabulation via tabindex=-1, aria-hidden sur le conteneur).
   NE PAS utiliser display:none (certains bots ignorent les champs réellement non rendus). */
.demande-hp[b-su5lsihkoy] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Hôte du widget Turnstile ── */
.cf-turnstile-host[b-su5lsihkoy] {
    margin: 0 0 var(--space-5);
}

/* ── Mobile (≤768px) : 1 SEUL mois, nav empilée ── */
@media (max-width: 768px) {
    .demande-title[b-su5lsihkoy] {
        font-size: var(--text-h1);
    }

    .demande-months[b-su5lsihkoy] {
        grid-template-columns: 1fr;
    }

    .demande-month--second[b-su5lsihkoy] {
        display: none;
    }

    .demande-navbtn--today[b-su5lsihkoy] {
        margin-left: 0;
    }
}
/* /Features/Vitrine/Pages/DemandeConfirmee.razor.rz.scp.css */
/* Écran de confirmation de la Demande — styles scoped, 100% tokenisés. Carte de succès sobre,
   élévation par ombre douce (langage Vitrine). */

.confirm[b-ea9yk9acw7] {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-vitrine);
    padding: var(--space-8) var(--space-6);
    max-width: 640px;
    text-align: center;
}

.confirm-heading[b-ea9yk9acw7] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h1);
    line-height: 1.1;
    margin: 0 0 var(--space-4);
}

.confirm-recap[b-ea9yk9acw7] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-body-lg);
    color: var(--color-primary-deep);
    margin: 0 0 var(--space-4);
}

.confirm-ack[b-ea9yk9acw7] {
    font-family: var(--font-ui);
    font-size: var(--text-body);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

.confirm-body[b-ea9yk9acw7] {
    font-size: var(--text-body);
    color: var(--color-text-muted);
    max-width: 52ch;
    margin: 0 auto var(--space-6);
}

.confirm-home[b-ea9yk9acw7] {
    display: inline-flex;
}
/* /Features/Vitrine/Pages/Disponibilites.razor.rz.scp.css */
/* Page Disponibilités — styles scoped, 100% tokenisés (design-tokens.css). Élévation par OMBRES
   douces (jamais de bordure back-office). Le style des CELLULES du calendrier vit dans le composant
   (AvailabilityCalendar.razor.css) ; ici : en-tête, nav par mois, disposition 2 mois, légende.
   Même breakpoint 768px que Villa/Région/Home : 2 mois côte à côte → 1 mois (colonne unique) sur mobile. */

/* ── En-tête ── */
.dispo-title[b-ub8cpqrun2] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-display);
    line-height: 1.05;
    margin: 0 0 var(--space-3);
}

.dispo-intro[b-ub8cpqrun2] {
    font-size: var(--text-body-lg);
    color: var(--color-text-muted);
    max-width: 60ch;
    margin: 0 0 var(--space-6);
}

/* ── Navigation par mois (liens GET, Static SSR) ── */
.dispo-monthnav[b-ub8cpqrun2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
}

.dispo-navlink[b-ub8cpqrun2] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-label);
    color: var(--color-primary-deep);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-primary-tint);
}

.dispo-navlink:hover[b-ub8cpqrun2] {
    background: var(--color-secondary-tint);
}

.dispo-navlink--today[b-ub8cpqrun2] {
    margin-left: auto;   /* « Aujourd'hui » repoussé à droite (poussé en colonne sur mobile) */
}

/* ── Disposition des 2 mois (côte à côte desktop) ── */
.dispo-months[b-ub8cpqrun2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    margin: 0 0 var(--space-6);
}

/* ── Légende 2 états ── */
.dispo-legend[b-ub8cpqrun2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}

.dispo-legend-item[b-ub8cpqrun2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-label);
}

.dot[b-ub8cpqrun2] {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-app-sm);
    display: inline-block;
    flex-shrink: 0;
}

.dot-available[b-ub8cpqrun2] {
    background: var(--color-state-available);
    box-shadow: var(--shadow-card-vitrine);
}

/* Indisponible : aplat atténué + barre médiane = repère NON chromatique cohérent avec la cellule. */
.dot-unavailable[b-ub8cpqrun2] {
    background: var(--color-surface-muted);
    position: relative;
}

.dot-unavailable[b-ub8cpqrun2]::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--color-text-muted);
}

/* ── Message sobre quand le calendrier public est masqué (flag off) ── */
.dispo-offline[b-ub8cpqrun2] {
    font-size: var(--text-body);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}

.dispo-cta[b-ub8cpqrun2] {
    display: inline-flex;
}

/* ── Mobile (≤768px) : 1 SEUL mois (la 2ᵉ grille masquée), nav empilée ── */
@media (max-width: 768px) {
    .dispo-title[b-ub8cpqrun2] {
        font-size: var(--text-h1);
    }

    .dispo-months[b-ub8cpqrun2] {
        grid-template-columns: 1fr;
    }

    .dispo-month--second[b-ub8cpqrun2] {
        display: none;
    }

    .dispo-navlink--today[b-ub8cpqrun2] {
        margin-left: 0;
    }
}
/* /Features/Vitrine/Pages/GuideRegion.razor.rz.scp.css */
/* Guide de la région — styles scoped, 100% tokenisés (design-tokens.css).
   Élévation par OMBRES douces : l'ombre/le fond/le rayon des rubriques viennent de la classe GLOBALE
   `.card` (.vitrine ::deep .card du layout) ; ici on ne définit QUE la grille, le padding et la typo.
   Les `.region-card*` de Home.razor.css sont scopées à Home et ne s'appliquent pas ici (d'où ces
   classes propres). Cormorant réservé aux titres ; jamais de bordure back-office. */

/* ── En-tête ── */
.region-title[b-y5b6lmj08z] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-display);
    line-height: 1.05;
    margin: 0 0 var(--space-3);
}

.region-intro[b-y5b6lmj08z] {
    font-size: var(--text-body-lg);
    color: var(--color-text-muted);
    max-width: 60ch;
    margin: 0 0 var(--section-vitrine);
}

/* ── Grille des 3 rubriques (À voir / À faire / Accès) ── */
.region-guide[b-y5b6lmj08z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gutter);
}

/* Padding de carte ; fond + rayon + ombre hérités de `.card` (global, layout). */
.region-rubric[b-y5b6lmj08z] {
    padding: var(--space-5);
}

.region-rubric-title[b-y5b6lmj08z] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h3);
    margin: 0 0 var(--space-3);
}

.region-rubric p[b-y5b6lmj08z] {
    font-size: var(--text-body);
    line-height: var(--leading-vitrine);
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Mobile : rubriques en colonne unique ── */
@media (max-width: 768px) {
    .region-guide[b-y5b6lmj08z] {
        grid-template-columns: 1fr;
    }

    .region-title[b-y5b6lmj08z] {
        font-size: var(--text-h1);
    }
}
/* /Features/Vitrine/Pages/Villa.razor.rz.scp.css */
/* Page Villa — styles scoped, 100% tokenisés (design-tokens.css).
   Élévation par OMBRES douces (langage Vitrine ; jamais de bordure back-office).
   Cormorant réservé aux titres ; Mulish pour le corps/UI. */

/* ── En-tête ── */
.villa-title[b-nk1q2jrt6n] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-display);
    line-height: 1.05;
    margin: 0 0 var(--space-3);
}

.villa-intro[b-nk1q2jrt6n] {
    font-size: var(--text-body-lg);
    color: var(--color-text-muted);
    max-width: 60ch;
    margin: 0 0 var(--section-vitrine);
}

/* ── Galerie d'images ── */
.villa-gallery[b-nk1q2jrt6n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gutter);
    margin: 0 0 var(--section-vitrine);
}

.villa-photo[b-nk1q2jrt6n] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-vitrine);
    background: var(--color-primary-tint);
}

/* ── Vidéo ── */
.villa-video[b-nk1q2jrt6n] {
    margin: 0 0 var(--section-vitrine);
}

.villa-video video[b-nk1q2jrt6n] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-vitrine);
    background: var(--color-secondary-tint);
}

.villa-video-caption[b-nk1q2jrt6n] {
    margin: var(--space-3) 0 0;
    font-family: var(--font-ui);
    font-style: italic;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

/* ── Description ── */
.villa-description[b-nk1q2jrt6n] {
    margin: 0 0 var(--section-vitrine);
}

.villa-description p[b-nk1q2jrt6n] {
    font-size: var(--text-body);
    line-height: var(--leading-vitrine);
    color: var(--color-text-primary);
    max-width: 65ch;
    margin: 0;
}

/* ── Équipements (chips) ── */
.villa-section-heading[b-nk1q2jrt6n] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-h2);
    margin: 0 0 var(--space-4);
}

.amenities[b-nk1q2jrt6n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.amenity-chip[b-nk1q2jrt6n] {
    font-family: var(--font-ui);
    font-size: var(--text-label);
    color: var(--color-primary-deep);
    background: var(--color-primary-tint);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
}

/* ── N° d'enregistrement meublé (loi Le Meur — affiché si renseigné) ── */
.villa-registration[b-nk1q2jrt6n] {
    margin: var(--section-vitrine) 0 0;
    font-family: var(--font-ui);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

.villa-registration-label[b-nk1q2jrt6n] {
    font-weight: 700;
}

.villa-registration-label[b-nk1q2jrt6n]::after {
    content: " : ";
}

/* ── Mobile : galerie en colonne unique ── */
@media (max-width: 768px) {
    .villa-gallery[b-nk1q2jrt6n] {
        grid-template-columns: 1fr;
    }

    .villa-title[b-nk1q2jrt6n] {
        font-size: var(--text-h1);
    }
}