/* =========================================================
   PMS — Template 2
   Feuille de style de base (layout + composants communs)
   Charte Mimmo : bleu #152453 / vert #298547
   ========================================================= */

/* ===== 1. VARIABLES ===== */
:root {
    /* Marque */
    --brand-blue: #152453;
    --brand-blue-light: #1e3374;
    --brand-green: #298547;
    --brand-green-light: rgba(41, 133, 71, .10);
    --brand-green-dark: #1f6836;

    /* Surfaces */
    --bg-app: #f4f6fa;
    --bg-rail: var(--brand-blue);
    --bg-panel: #ffffff;
    --bg-header: #ffffff;
    --bg-subtle: #f8f9fb;

    /* Textes */
    --text: #1c2434;
    --text-muted: #6b7280;
    --text-invert: #ffffff;
    --text-rail: rgba(255, 255, 255, .62);

    /* Bordures & rayons */
    --border: #e3e7ee;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;

    /* Dimensions */
    --rail-width: 76px;
    --submenu-width: 232px;
    --header-height: 60px;

    /* Espacements */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(21, 36, 83, .06);
    --shadow: 0 4px 16px rgba(21, 36, 83, .08);
}

/* ===== 2. RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background-color: var(--bg-app);
    color: var(--text);
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ===== 3. HEADER ===== */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 0 var(--sp-4);
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
}

.header__left,
.header__right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.header__brand img { height: 26px; width: auto; }

/* ===== 4. BOUTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--primary { background-color: var(--brand-green); color: var(--text-invert); }
.btn--primary:hover { background-color: var(--brand-green-dark); }

.btn--ghost { background-color: transparent; color: var(--text-muted); border-color: var(--border); }
.btn--ghost:hover { background-color: var(--bg-subtle); color: var(--text); }

/* Distingue une arrivée (primary, vert) d'un départ : même famille d'action
   (avancer le statut), mais pas le même geste — les deux boutons ne doivent
   pas se confondre l'un avec l'autre sur une même liste. */
.btn--info { background-color: var(--brand-blue); color: var(--text-invert); }
.btn--info:hover { background-color: var(--brand-blue-light); }

/* Le seul bouton rouge de l'interface : il confirme un geste irréversible.
   Le rendre disponible ailleurs banaliserait la couleur. */
.btn--danger { background-color: #b02a2a; color: var(--text-invert); }
.btn--danger:hover { background-color: #942222; }

/* Un <button disabled> a déjà cet aspect nativement ; un <a>/<span> qui joue
   le même rôle (action retirée, pas de route à suivre) ne l'a pas — il faut
   le poser à la main. */
.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 17px;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.btn-icon:hover { background-color: var(--brand-green-light); color: var(--brand-green); }

/* Retour + titre sur une meme ligne, dans l'en-tete de page */
.page-header__back {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* ===== 4 bis. BARRE DE COMMANDES ===== */
/* Barre de navigation temporelle, inspirée du calendrier Teams :
   action « Aujourd'hui », flèches nues, et la période elle-même
   ouvre un menu — elle n'est pas un simple libellé. */
.cmdbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-panel);
}

.cmdbar__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 11px;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.cmdbar__btn:hover { background-color: var(--bg-subtle); }
.cmdbar__btn i { font-size: 14px; color: var(--text-muted); }
.cmdbar__btn:hover i { color: var(--brand-green); }

/* Flèches : icônes nues, sans cadre — comme Teams */
.cmdbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.cmdbar__icon:hover { background-color: var(--bg-subtle); color: var(--text); }

/* La période est le repère principal : un cran plus grosse */
.cmdbar__period { font-size: 14px; font-weight: 600; }

.cmdbar__caret { font-size: 11px !important; }

.cmdbar__sep {
    width: 1px;
    height: 22px;
    margin: 0 var(--sp-2);
    background-color: var(--border);
}

.cmdbar__spacer { flex: 1 1 auto; }

/* ===== 4 bis-1. FORMULAIRES ===== */
/* Kit de base : champ, libellé, aide, erreur, groupes.
   C'est sur ces classes que devra s'aligner le thème de formulaire
   Twig, `bootstrap_5_layout.html.twig` n'étant pas utilisable ici. */
.form-group { display: flex; flex-direction: column; gap: var(--sp-4); }

.form-field { display: flex; flex-direction: column; gap: 6px; }

/* Deux à quatre champs côte à côte, repliés en colonne si trop étroit */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--sp-3);
}

.form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}

.form-label--required::after { content: " *"; color: #b02a2a; }

/* Texte d'explication posé dans un formulaire, sans champ associé :
   une note de contexte, la description d'un réglage. */
.form-static {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.form-control {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-panel);
    font: inherit;
    font-size: 13px;
    color: var(--text);
}

select.form-control { cursor: pointer; }

textarea.form-control {
    height: auto;
    min-height: 74px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px var(--brand-green-light);
}

.form-control:disabled {
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-hint { font-size: 11px; color: var(--text-muted); }
.form-error { font-size: 11px; color: #b02a2a; }

.form-field.has-error .form-control { border-color: #b02a2a; }
.form-field.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(176, 42, 42, .12); }

/* Champ suivi d'une unité (m², nuits, %) */
.form-unit { display: flex; }
.form-unit .form-control { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

.form-unit__suffix {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: var(--bg-subtle);
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
/* Prefixe : symetrique de __suffix, pour ce qui se lit avant la saisie
   (ROLE_, +229, https://). Le champ perd alors son arrondi a gauche. */
.form-unit__prefix {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background-color: var(--bg-subtle);
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.form-unit__prefix + .form-control {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* Cases à cocher */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    cursor: pointer;
}

.form-check input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    accent-color: var(--brand-green);
    cursor: pointer;
}

/* Liste de cases en grille — options, équipements */
.form-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: var(--sp-2);
}

/* Le pied de formulaire : boutons alignes a droite, taille naturelle — comme
   n'importe quel groupe d'actions de l'app (en-tete d'ecran, tiroir lateral).
   Une ligne separe le pied des champs, le meme traitement que
   .form-section + .form-section et .side-drawer__footer. */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}
.form-actions .btn { flex: 0 0 auto; }

/* Conservee pour compatibilite : le pied est desormais aligne a droite par
   defaut, ce modificateur n'a plus rien a ajouter. */
.form-actions--end { justify-content: flex-end; }
.form-actions--end .btn { flex: 0 0 auto; }

/* ===== 4 bis-4. ONGLETS ===== */
/* Bascule entre panneaux d'un meme ecran. */
.tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-panel);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.tab:hover { background-color: var(--bg-subtle); color: var(--text); }
.tab.is-active { background-color: var(--brand-green); color: var(--text-invert); }
.tab i { font-size: 14px; }

.tab__count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.tab.is-active .tab__count {
    background-color: rgba(255, 255, 255, .22);
    color: var(--text-invert);
}

/* Panneau inactif : `hidden` doit l'emporter sur tout affichage */
.tabpanel[hidden] { display: none; }

/* ===== 4 bis-3. BARRE D'OUTILS DE LISTE ===== */
/* Filtres, recherche et bascule de vue sur une seule ligne.
   --control-h donne la hauteur commune aux trois : elle est calee
   sur les puces de filtre, plutot que de compter sur des paddings
   qui ne tombent jamais juste. */
.list-toolbar {
    --control-h: 30px;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

/* Les filtres prennent la place restante et defilent plutot que
   de passer a la ligne. */
.list-toolbar__filters {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
}

.list-toolbar__filters::-webkit-scrollbar { display: none; }

.list-toolbar__filters .filter-chip {
    height: var(--control-h);
    padding: 0 10px;
    font-size: 12px;
    gap: 6px;
}

.list-toolbar__tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--sp-2);
}

.list-toolbar__tools .search { flex: 0 0 220px; max-width: 220px; }

.list-toolbar .search input {
    height: var(--control-h);
    padding: 0 12px 0 32px;
    font-size: 13px;
}

.list-toolbar .search i { left: 11px; font-size: 13px; }

/* ----- Variante empilee -----
   Recherche a gauche et bascule de vue a droite sur une premiere
   ligne, filtres sur la seconde. Utile quand les filtres sont
   nombreux ou que la recherche merite de la place. */
.list-toolbar--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
}

.list-toolbar__row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.list-toolbar__spacer { flex: 1 1 auto; }

/* Seule sur sa ligne, la recherche peut respirer */
.list-toolbar--stacked .search { flex: 0 1 320px; max-width: 320px; }

/* Les filtres reprennent toute la largeur : plus besoin de defiler */
.list-toolbar--stacked .list-toolbar__filters { flex-wrap: wrap; overflow-x: visible; }

/* Bascule de vue : icones seules, meme hauteur que les filtres */
.view-toggle {
    display: inline-flex;
    height: var(--control-h);
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-panel);
}

.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.view-btn:hover { background-color: var(--bg-subtle); color: var(--text); }
.view-btn.is-active { background-color: var(--brand-green); color: var(--text-invert); }

@media (max-width: 900px) {
    .list-toolbar { flex-wrap: wrap; }
    .list-toolbar__filters { flex: 1 1 100%; }
}

@media (max-width: 768px) {
    .list-toolbar { flex-direction: column; align-items: stretch; }
    .list-toolbar__tools { flex-wrap: wrap; }
    .list-toolbar__tools .search { flex: 1 1 auto; max-width: none; }
}

/* ===== 4 bis-1b. SECTIONS DE FORMULAIRE ===== */
/* Un formulaire long se decoupe en sections nommees plutot qu'en une
   seule colonne de champs. */
.form-section + .form-section {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.form-section__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-size: 14px;
    font-weight: 600;
}

.form-section__title i { color: var(--brand-green); font-size: 15px; }

/* Deux colonnes de champs sur large écran */
.form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    align-items: start;
}

/* Zone de dépôt de la pièce d'identité */
.form-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--sp-5) var(--sp-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.form-drop:hover { border-color: var(--brand-green); background-color: var(--brand-green-light); }
.form-drop i { font-size: 22px; color: var(--brand-green); }

@media (max-width: 768px) {
    .form-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Intitule d'une section, sous son titre */
.form-section__hint { margin: calc(var(--sp-3) * -1) 0 var(--sp-4); }

/* ===== 4 bis-2. PUCES DE FILTRE ===== */
/* Utilisées par les modules Réservations (extras) et Chambres. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-panel);
    font: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.filter-chip:hover { border-color: var(--brand-green); color: var(--brand-green); }

.filter-chip.is-active {
    border-color: var(--brand-green);
    background-color: var(--brand-green);
    color: var(--text-invert);
}

/* Pastille de couleur — sert à porter un code statut */
.filter-chip__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: currentColor;
}

.filter-chip__count {
    min-width: 18px;
    padding: 0 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.filter-chip.is-active .filter-chip__count {
    border-color: transparent;
    background-color: rgba(255, 255, 255, .22);
    color: var(--text-invert);
}

/* ===== 4 ter. MENUS DÉROULANTS ===== */
.dropdown { position: relative; }

.dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1300;
    min-width: 200px;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-panel);
    box-shadow: var(--shadow);
    display: none;
}

.dropdown.is-open .dropdown__menu { display: block; }

/* Menu aligné à droite quand le bouton est en fin de barre */
.dropdown--end .dropdown__menu { left: auto; right: 0; }

.dropdown__label {
    display: block;
    padding: var(--sp-1) var(--sp-2) var(--sp-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.dropdown__item:hover { background-color: var(--bg-subtle); }

/* La coche n'apparaît que sur l'entrée active, mais occupe
   toujours sa place pour que les libellés restent alignés. */
.dropdown__item i { width: 14px; font-size: 13px; visibility: hidden; }
.dropdown__item.is-active { font-weight: 600; color: var(--brand-green); }
.dropdown__item.is-active i { visibility: visible; }

/* Menu contenant des champs (filtres avances) plutot que des choix */
.dropdown__menu--form { width: 260px; padding: var(--sp-3); }

.dropdown__fields { display: flex; flex-direction: column; gap: var(--sp-3); }

.dropdown__foot {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

.dropdown__foot .btn { flex: 1 1 auto; }

/* Compteur de filtres actifs sur le bouton d'ouverture */
.cmdbar__btn .filter-count,
.filter-count {
    min-width: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--brand-green);
    color: var(--text-invert);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

.filter-count[hidden] { display: none; }

.dropdown__date {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 13px;
    color: var(--text);
}

.dropdown__date:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px var(--brand-green-light);
}

/* ===== 5. RAIL (barre d'icônes principale) ===== */
.rail {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--rail-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-2);
    background-color: var(--bg-rail);
    z-index: 900;
    overflow-y: auto;
    scrollbar-width: none;
}

.rail::-webkit-scrollbar { display: none; }

.rail__spacer { flex: 1 1 auto; min-height: var(--sp-4); }

.rail__item {
    width: 100%;
    padding: 9px 4px;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--text-rail);
    text-align: center;
    transition: background-color .18s ease, color .18s ease;
}

.rail__item:hover { background-color: rgba(255, 255, 255, .09); color: var(--text-invert); }

.rail__item.is-active {
    background-color: var(--brand-green);
    color: var(--text-invert);
}

.rail__item i { font-size: 19px; line-height: 1; }

.rail__label {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.15;
    max-width: 100%;
    /* Autorise 2 lignes : « Réservations » ne tient pas sur une seule */
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ===== 6. SOUS-MENU CONTEXTUEL ===== */
.submenu {
    position: fixed;
    top: var(--header-height);
    left: var(--rail-width);
    bottom: 0;
    width: var(--submenu-width);
    padding: var(--sp-4) var(--sp-3);
    background-color: var(--bg-panel);
    border-right: 1px solid var(--border);
    z-index: 800;
    overflow-y: auto;
    scrollbar-width: none;
}

.submenu::-webkit-scrollbar { display: none; }

.submenu__title {
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.submenu__list { display: flex; flex-direction: column; gap: 2px; }

.submenu__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    transition: background-color .18s ease, color .18s ease;
}

.submenu__item:hover { background-color: var(--bg-subtle); color: var(--text); }

.submenu__item.is-active {
    background-color: var(--brand-green-light);
    color: var(--brand-green);
    font-weight: 500;
}

.submenu__item i { width: 18px; font-size: 15px; text-align: center; }

.submenu__badge {
    margin-left: auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.submenu__item.is-active .submenu__badge {
    background-color: var(--brand-green);
    color: var(--text-invert);
}

/* ===== 7. CONTENU ===== */
.content {
    margin-top: var(--header-height);
    margin-left: calc(var(--rail-width) + var(--submenu-width));
    padding: var(--sp-5);
    min-height: calc(100vh - var(--header-height));
}

/* Pages sans sous-menu (accueil) */
.content--full { margin-left: var(--rail-width); }

/* Pages sans rail : un parcours court qui n'a rien a naviguer.
   --full retire seulement le sous-menu, il reste le rail. */
.content--bare { margin-left: 0; }


.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.page-header__title { font-size: 20px; font-weight: 600; }
.page-header__subtitle { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.page-header__actions { display: flex; align-items: center; gap: var(--sp-2); }

/* ===== 8. CARTES ===== */
.card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* Deux cartes qui se suivent : sans cet ecart elles se touchent et se
   lisent comme un seul bloc. */
.card + .card { margin-top: var(--sp-4); }

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.card__title { font-size: 15px; font-weight: 600; }
.card__body { padding: var(--sp-4); }

/* Grille de statistiques */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.stat {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background-color: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background-color: var(--brand-green-light);
    color: var(--brand-green);
    font-size: 19px;
}

.stat__value { font-size: 22px; font-weight: 600; line-height: 1.2; }
.stat__label { font-size: 12px; color: var(--text-muted); }

/* Cartes de navigation (accueil) */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
}

.module-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background-color: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.module-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand-green);
    box-shadow: var(--shadow);
}

.module-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--sp-2);
    border-radius: var(--radius);
    background-color: var(--brand-blue);
    color: var(--text-invert);
    font-size: 20px;
}

.module-card__title { font-size: 16px; font-weight: 600; }
.module-card__text { font-size: 13px; color: var(--text-muted); }

/* ===== 9. BARRE D'OUTILS & FILTRES ===== */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.search {
    position: relative;
    flex: 1 1 240px;
    max-width: 340px;
}

.search i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-panel);
    font: inherit;
    color: var(--text);
}

.search input:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px var(--brand-green-light);
}

/* ===== 10. TABLEAUX ===== */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.table thead th {
    padding: 11px var(--sp-3);
    background-color: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.table tbody td {
    padding: 11px var(--sp-3);
    border-bottom: 1px solid var(--border);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background-color: var(--bg-subtle); }

/* ===== 11. BADGES DE STATUT ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}

.badge--success { background-color: var(--brand-green-light); color: var(--brand-green); }
.badge--info    { background-color: rgba(21, 36, 83, .08);    color: var(--brand-blue); }
.badge--warning { background-color: rgba(217, 145, 12, .12);  color: #a8720a; }
.badge--danger  { background-color: rgba(197, 48, 48, .10);   color: #b02a2a; }
.badge--muted   { background-color: var(--bg-subtle);         color: var(--text-muted); }

/* Référence en clair — code de chambre, de rôle, de mode de facturation.
   Elle se lit en machine autant qu'à l'œil : chasse fixe, et un cadre qui la
   détache du texte courant. */
.ref-code {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border);
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Une référence suivie d'une pastille : les deux tiennent sur une ligne et
   respirent. Sans cela la pastille se posait sous la référence. */
.ref-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* ===== 10 bis. COMPOSANTS PARTAGÉS DE LISTE =====
   Ils vivaient chacun dans la feuille de l'écran qui les avait vus naître, et
   d'autres écrans les employaient sans charger cette feuille — leur balisage
   était juste, leur rendu absent. `.ref-table` en donnait la mesure : les huit
   écrans du référentiel chargent parametres.css, la règle était dans
   chambres.css. Un composant qu'au moins deux modules emploient appartient
   ici. */

/* Tableau de référentiel : la ligne s'ouvre au clic, la sélection marque
   l'enregistrement en cours d'édition. */
.ref-table tbody tr { cursor: pointer; }
.ref-table tbody tr.is-selected { background-color: var(--brand-green-light); }

/* Une ligne de référentiel désactivée reste lisible, mais en retrait. */
.ref-off td { color: var(--text-muted); }
.ref-off .ref-code { opacity: .6; }

/* Colonne de nombres : alignée à droite, chiffres de même chasse pour que les
   unités se superposent d'une ligne à l'autre. */
.table .num,
.table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Effectif d'une ligne — chambres d'un type, comptes d'un rôle. */
.head-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.head-count--zero { color: var(--text-muted); font-weight: 400; }

/* Référence discrète d'un client, en chasse fixe. */
.client-ref {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 11px;
    color: var(--text-muted);
}

/* Référence de réservation — repère visuel fort dans la liste. */
.res-ref {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-weight: 600;
    color: var(--brand-blue);
}

/* Ligne d'une réservation non attribuée à une chambre. */
.res-unassigned {
    color: var(--text-muted);
    font-style: italic;
}

/* Caractéristiques physiques, en paires — fiche chambre, fiche client,
   demande d'établissement. */
.spec-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

.spec__key {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.spec__value { font-size: 13px; font-weight: 500; }

/* Encart d'explication tarifaire : la chambre ne fixe pas ses prix, elle les
   hérite de son type. */
.rate-note {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    border-left: 3px solid var(--occ-arrivee);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: rgba(47, 111, 174, .06);
    font-size: 12px;
    line-height: 1.45;
}

.rate-note i { color: var(--occ-arrivee); }

/* ===== 11 bis. IDENTITÉ CLIENT ===== */
/* Utilisé par les modules Clients et Réservations */
.client-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.client-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--brand-blue);
    color: var(--text-invert);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.client-name { font-weight: 500; }

/* Coordonnées secondaires (email, téléphone) */
.client-contact {
    color: var(--text-muted);
    font-size: 12px;
}

/* Petite étiquette d'annotation (code tarif, code postal…) */
.tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}

/* ===== 11 quater. FICHE DETAILLEE ===== */
/* Ossature commune aux fiches client et chambre : colonne d'identite
   collante a gauche, alertes et onglets a droite. */
.detail-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
}

.detail-aside { position: sticky; top: calc(var(--header-height) + var(--sp-5)); }

/* Deuxieme carte de la colonne de droite */
.stack { margin-top: var(--sp-5); }

/* Titre de sous-section suivant un bloc */
.detail-title--spaced { margin-top: var(--sp-5); }

@media (max-width: 1200px) {
    .detail-layout { grid-template-columns: minmax(0, 1fr); }
    .detail-aside { position: static; }
}

.detail-aside__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

/* L'avatar prend la teinte du type plutôt que le bleu par défaut. */
.client-avatar--typed { background-color: var(--client-ink, var(--brand-blue)); }

.client-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: 18px;
    flex: 0 0 auto;
}

.detail-aside__name { font-size: 17px; font-weight: 600; line-height: 1.2; }

.detail-aside__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-4);
}

.detail-title {
    margin-bottom: var(--sp-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

/* Deux compteurs côte à côte */
.counters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

.counter {
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    background-color: var(--bg-subtle);
    text-align: center;
}

.counter__value { font-size: 20px; font-weight: 600; line-height: 1.1; }

.counter__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

/* Liste de coordonnées à icône */
.icon-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: 13px;
    line-height: 1.45;
}

.icon-list i {
    flex: 0 0 16px;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ----- Alertes en tete de fiche ----- */
/* Allergie et impaye ne sont pas des informations parmi d'autres :
   la reception doit les voir avant d'ouvrir quoi que ce soit. */
.alerts {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--alert-ink);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: var(--alert-bg);
    font-size: 13px;
    line-height: 1.45;
}

.alert i { color: var(--alert-ink); font-size: 15px; margin-top: 1px; }
.alert strong { color: var(--alert-ink); }

.alert--danger  { --alert-ink: #b02a2a; --alert-bg: rgba(176, 42, 42, .07); }
.alert--warning { --alert-ink: #c8860d; --alert-bg: rgba(200, 134, 13, .08); }
.alert--info    { --alert-ink: var(--brand-blue); --alert-bg: rgba(21, 36, 83, .06); }

/* ----- Chiffres cles d'un onglet ----- */
.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.fact {
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-subtle);
}

.fact__value { font-size: 17px; font-weight: 600; line-height: 1.2; }
.fact__value--danger { color: #b02a2a; }
.fact__value--success { color: var(--brand-green); }

.fact__label {
    margin-top: 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

/* ----- Journal ----- */
.journal { display: flex; flex-direction: column; }

.journal__entry {
    display: grid;
    grid-template-columns: 118px 30px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.45;
}

.journal__entry:last-child { border-bottom: 0; }

.journal__time { color: var(--text-muted); font-size: 12px; }

.journal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 12px;
}

.journal__icon--green { background-color: var(--brand-green-light); color: var(--brand-green); }
.journal__icon--blue  { background-color: rgba(47, 111, 174, .12); color: #2f6fae; }
.journal__icon--amber { background-color: rgba(200, 134, 13, .12); color: #c8860d; }
.journal__icon--red   { background-color: rgba(176, 42, 42, .10); color: #b02a2a; }

.journal__author { color: var(--text-muted); font-size: 12px; }

/* Passage d'une valeur a une autre */
.journal__change { font-size: 12px; }
.journal__from { color: var(--text-muted); text-decoration: line-through; }
.journal__to { color: var(--text); font-weight: 500; }

/* Note interne : bloc a part dans le journal */
.journal__note {
    margin-top: 4px;
    padding: var(--sp-2) var(--sp-3);
    border-left: 2px solid var(--border);
    background-color: var(--bg-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 12px;
}

/* Zone d'ajout de note */
.note-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.note-form__actions { display: flex; justify-content: flex-end; }


/* ===== 11 quinquies. COMPTE EN DEBIT / CREDIT ===== */
/* Folio de sejour, compte client, journal de caisse : meme grille. */
.ledger td:nth-child(3),
.ledger td:nth-child(4),
.ledger td:nth-child(5),
.ledger th:nth-child(3),
.ledger th:nth-child(4),
.ledger th:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }

.ledger__debit  { color: #b02a2a; }
.ledger__credit { color: var(--brand-green); }
.ledger__balance { font-weight: 600; }

/* Ligne de solde final */
.ledger tfoot td {
    padding: 11px var(--sp-3);
    border-top: 2px solid var(--border);
    font-weight: 600;
}

/* ===== 12. ÉTAT VIDE ===== */
.empty {
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    color: var(--text-muted);
}

.empty i { font-size: 34px; opacity: .45; }
.empty p { margin-top: var(--sp-3); font-size: 13px; }

/* ===== 11 bis-2. ACTIONS DE LIGNE ===== */
/* Trio consulter / modifier / supprimer en fin de ligne de tableau. */
.row-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.row-action:hover { background-color: var(--bg-subtle); color: var(--brand-blue); }

/* La suppression vire au rouge au survol : elle ne se confond pas
   avec les deux autres au moment du clic. */
.row-action--danger:hover { background-color: rgba(176, 42, 42, .10); color: #b02a2a; }

/* ===== 11 ter. CARTE D'INFORMATION ===== */
/* Carte en grille : en-tête (vignette, nom, codes) puis une ou
   plusieurs lignes « libellé ····· valeur ». Sert aux articles
   du module Réservations et aux étages du module Chambres. */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-4);
}

/* Sans cette regle, le `display: grid` ci-dessus l'emporterait sur
   l'attribut `hidden` et la grille resterait visible en vue liste. */
.info-grid[hidden] { display: none; }

.info-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-panel);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-align: left;
    font: inherit;
    color: var(--text);
    transition: border-color .18s ease, box-shadow .18s ease;
}

/* Carte écartée par un filtre */
.info-card[hidden] { display: none; }

.info-card:hover,
.info-card.is-selected {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 2px var(--brand-green-light);
}

.info-card__header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
}

.info-card__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background-color: var(--brand-green-light);
    color: var(--brand-green);
    font-size: 15px;
}

.info-card__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-card__codes { display: flex; gap: 4px; flex: 0 0 auto; }

.info-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-3);
}

/* Ligne « 0 / 1 × Article ····· 14 000 F » */
.info-line {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: 13px;
}

.info-line__lead {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.info-line__label { flex: 0 1 auto; }

/* Points de conduite : bordure pointillée extensible, pas une suite
   de « . » — le prix reste aligné à droite à toute largeur. */
.info-line__leader {
    flex: 1 1 auto;
    min-width: 16px;
    height: 1px;
    margin-bottom: 3px;
    border-bottom: 1px dotted var(--border);
}

.info-line__value {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Ligne soldée / complète */
.info-line--done .info-line__lead { color: var(--brand-green); font-weight: 600; }

/* ===== 12 bis. TIROIR LATÉRAL DROIT ===== */
/* Fiche de détail ou formulaire ouvert par-dessus la page.
   L'overlay est facultatif : on le met sur un formulaire, pour
   isoler la saisie, mais pas sur une fiche de consultation où
   l'on veut garder le contexte visible derrière. */
.side-drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(21, 36, 83, .35);
    z-index: 1150;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.side-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.side-drawer {
    /* top: 0 et non la hauteur de l'en-tete : le voile recouvre deja celui-ci,
       le laisser visible donnait une barre inerte d'apparence cliquable et un
       titre en double avec celui du tiroir. */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 92%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-panel);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 20px rgba(21, 36, 83, .10);
    transform: translateX(100%);
    /* Un tiroir ferme reste dans le flux : son ombre portee, dirigee vers la
       gauche, deborde donc sur le bord droit de la fenetre. Une page qui rend
       un tiroir par ligne les empilait toutes et peignait une bande sombre le
       long de l'ecran. visibility le retire du rendu comme du parcours au
       clavier tant qu'il est ferme. */
    visibility: hidden;
    transition: transform .25s ease, visibility .25s ease;
    z-index: 1200;
}

.side-drawer.is-open { transform: translateX(0); visibility: visible; }

/* Variante étroite — fiche de consultation */
.side-drawer--narrow { width: 330px; }

/* Variante large — formulaire, éditeur JSON */
.side-drawer--wide { width: 480px; }

.side-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.side-drawer__title { font-size: 15px; font-weight: 600; }

.side-drawer__body {
    flex: 1 1 auto;
    padding: var(--sp-4);
    overflow-y: auto;
}

.side-drawer__footer {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
}

/* Liste de réactivation d'un référentiel — posée ici et non dans une
   feuille d'écran : trois référentiels s'en servent, et ils ne chargent
   pas tous la même. C'est la page des types de chambre, sur chambres.css,
   qui l'a montré — son bouton « Réactiver » n'était plus aligné. */
/* ===== RÉACTIVATION D'UN RÉFÉRENTIEL ===== */
/* Une ligne éteinte se rallume depuis son tiroir. Pas de hauteur plafonnée
   ici : c'est le corps du tiroir qui défile. */
.ref-restore {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.ref-restore__ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: 13px;
}

/* Le bouton reste entier et colle au libellé : c'est le libellé qui cède.
   Sans ça, « Appartement 1 chambre (T2) » comprimait « Réactiver » jusqu'à le
   pousser hors de sa propre bordure — les catégories, aux libellés courts, ne
   le montraient pas. Le titre au survol rend le nom coupé. */
.ref-restore__ligne > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ref-restore__ligne .btn { flex: 0 0 auto; }

@media (max-width: 768px) {
    .side-drawer { top: 0; }
}

/* ===== 13. MENU MOBILE (tiroir) ===== */
.mobile-only { display: none; }

.drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(21, 36, 83, .45);
    z-index: 1400;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 272px;
    max-width: 85%;
    background-color: var(--bg-panel);
    z-index: 1500;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
}

.drawer.is-open { transform: translateX(0); }

.drawer__header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

.drawer__header img { height: 22px; width: auto; }
.drawer__body { padding: var(--sp-3); }

.drawer__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: background-color .18s ease, color .18s ease;
}

.drawer__item:hover { background-color: var(--bg-subtle); color: var(--text); }

.drawer__item.is-active {
    background-color: var(--brand-green-light);
    color: var(--brand-green);
    font-weight: 500;
}

.drawer__item i { width: 20px; font-size: 16px; text-align: center; }

.drawer__section {
    margin-top: var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.drawer__subitem {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px var(--sp-3) 9px 34px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
}

.drawer__subitem:hover { background-color: var(--bg-subtle); color: var(--text); }
.drawer__subitem.is-active { color: var(--brand-green); font-weight: 500; }

/* ===== 14. RESPONSIVE ===== */
/* Tablette : le sous-menu est masqué, navigation via le tiroir */
@media (max-width: 1100px) {
    .submenu { display: none; }
    .content { margin-left: var(--rail-width); }
    .mobile-only { display: inline-flex; }
}

/* Mobile : rail masqué, tout passe par le tiroir */
@media (max-width: 768px) {
    .rail { display: none; }
    .content,
    .content--full {
        margin-left: 0;
        padding: var(--sp-4) var(--sp-3);
    }
    .page-header { flex-direction: column; align-items: flex-start; }
    .stat-grid { grid-template-columns: 1fr; }
}

/* ===== FENÊTRE DE CONFIRMATION ===== */
/* Une seule pour toute l'application, posée par le gabarit de base. Elle
   remplace window.confirm(), qui ne s'habille pas et que le navigateur
   laisse désactiver — le geste destructeur passait alors sans retenue. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

/* `display: flex` l'emporterait sur [hidden] : il faut le dire. */
.modal[hidden] { display: none; }

.modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(21, 36, 83, .45);
}

.modal__box {
    position: relative;
    width: 400px;
    max-width: 100%;
    padding: var(--sp-5);
    border-radius: var(--radius-lg);
    background-color: var(--bg-panel);
    box-shadow: 0 12px 40px rgba(21, 36, 83, .22);
    text-align: center;
}

.modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--sp-3);
    border-radius: 50%;
    background-color: rgba(176, 42, 42, .10);
    color: #b02a2a;
    font-size: 22px;
}

.modal__title {
    margin: 0 0 var(--sp-2);
    font-size: 17px;
    font-weight: 600;
}

.modal__text {
    margin: 0 0 var(--sp-5);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Champ optionnel de la confirmation (ex. motif d'annulation) : le reste de
   la fenêtre est centré, mais un label + textarea se lit mieux aligné à
   gauche. */
.modal__field {
    margin: 0 0 var(--sp-5);
    text-align: left;
}

.modal__field .form-label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: 12px;
}

.modal__actions {
    display: flex;
    justify-content: center;
    gap: var(--sp-3);
}

@media (max-width: 480px) {
    .modal__actions { flex-direction: column-reverse; }
    .modal__actions .btn { width: 100%; justify-content: center; }
}

/* Composants à display explicite : sans ces gardes, l'attribut `hidden` ne
   les cache pas. Une alerte de validation, des champs de carte bancaire, une
   ligne d'acompte ou un champ isolé (ex. date de libération d'une option)
   restent alors affichés à contretemps. */
.alerts[hidden] { display: none; }
.form-row[hidden] { display: none; }
.info-line[hidden] { display: none; }
.form-field[hidden] { display: none; }
.form-check[hidden] { display: none; }

/* =========================================================
   STEPPER — assistant de création (reservations-nouvelle)
   Repris tel quel de la maquette.
   ========================================================= */

.stepper {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.stepper__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.stepper__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: var(--bg-panel);
    font-size: 12px;
    font-weight: 600;
}

/* Le trait qui relie deux étapes : il occupe la place restante, donc les
   pastilles se répartissent d'elles-mêmes sur toute la largeur. */
.stepper__sep {
    flex: 1 1 auto;
    min-width: 12px;
    height: 1px;
    background-color: var(--border);
}

.stepper__item.is-done {
    color: var(--brand-green);
    cursor: pointer;
}

.stepper__item.is-done .stepper__num {
    border-color: var(--brand-green);
    background-color: var(--brand-green-light);
    color: var(--brand-green);
}

.stepper__item.is-active {
    color: var(--text);
    font-weight: 600;
}

.stepper__item.is-active .stepper__num {
    border-color: var(--brand-green);
    background-color: var(--brand-green);
    color: var(--text-invert);
}

/* Sous 900 px les libellés ne tiennent plus : les pastilles suffisent à
   dire où l'on en est. */
@media (max-width: 900px) {
    .stepper__label { display: none; }
}

/* Un `<form>` enveloppe presque toujours les trois parties du tiroir : sans
   cette regle il devient l'unique element flex, et l'en-tete, le corps et le
   pied retombent en flux normal — le bouton de validation passe alors sous le
   bas de l'ecran. */
.side-drawer > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* `min-height: auto` est la valeur par defaut d'un element flex : il refuse
   de retrecir sous la taille de son contenu, et `overflow-y` ne se declenche
   jamais. Sans ce zero, un formulaire long deborde au lieu de defiler. */
.side-drawer__body { min-height: 0; }

/* Le pied reste visible quoi qu'il arrive : c'est lui qui porte l'action. */
.side-drawer__footer { flex: 0 0 auto; }

/* =========================================================
   MESSAGES PASSAGERS (toasts)
   Ils vivaient sur les classes de Bootstrap, que la maquette n'embarque
   pas : le message tombait en bas du document, hors de l'ecran. Il a
   maintenant sa place a lui, au-dessus de tout le reste.
   ========================================================= */

.toast-container {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(380px, calc(100vw - 2 * var(--sp-4)));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    border-left: 3px solid currentColor;
    background-color: var(--bg-panel);
    box-shadow: 0 8px 24px rgba(21, 36, 83, .16);
    pointer-events: auto;

    /* Ferme, il ne prend pas le clic : la transition l'amene a l'ecran. */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}

.toast.is-shown { opacity: 1; transform: none; }

.toast--success { color: var(--brand-green); }
.toast--error   { color: #b02a2a; }

.toast__body {
    flex: 1;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}

.toast__close {
    flex: 0 0 auto;
    padding: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
}

.toast__close:hover { background-color: var(--bg-subtle); color: var(--text); }

@media (max-width: 640px) {
    .toast-container {
        top: auto;
        bottom: var(--sp-4);
        left: var(--sp-3);
        right: var(--sp-3);
        max-width: none;
    }

    .toast { transform: translateY(8px); }
}