/* ============================================================================
   theme.css — Thème Bootstrap 5.3 (Bellestone / Flexinuse)
   Chargé juste APRÈS le CDN Bootstrap et AVANT app/pages/admin.css.

   Rôle :
   1. Surcharger les variables Bootstrap (palette slate + loomea, fontes, radius,
      ombres) pour conserver le rendu historique du site (ex-Tailwind).
   2. Re-styler les composants Bootstrap (boutons, forms, dropdowns, modales,
      tables) aux conventions maison.
   3. Fournir les utilitaires que Bootstrap n'a pas (tailles d'icônes, ratios,
      letter-spacing, max-widths, sidebar rail).
   ============================================================================ */

:root {
    /* --- Palette marque (ex-config Tailwind inline) --- */
    --loomea-brique:  #e8a894;
    --loomea-ciel:    #bfc6e3;
    --loomea-vegetal: #6f968c;
    --loomea-bois:    #635f5d;
    --loomea-ciment:  #a39c99;
    --loomea-pierre:  #e6dedc;
    --loomea-sable:   #f8f2f1;
    --brand-primary:      #007a5e;
    --brand-purple:       #6f60bd;
    --brand-purple-light: #ada4ff;
    --brand-cream:        #fcf1e9;
    --brand-star:         #FBBC04;

    /* --- Échelle de gris "slate" (conservée pour la fidélité visuelle) --- */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* --- Overrides des variables Bootstrap --- */
    --bs-body-font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-font-monospace: 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
    --bs-body-color: var(--slate-900);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-body-font-size: 1rem;
    --bs-secondary-color: var(--slate-600);
    --bs-secondary-color-rgb: 71, 85, 105;
    --bs-tertiary-color: var(--slate-400);
    --bs-tertiary-color-rgb: 148, 163, 184;
    --bs-secondary-bg: var(--slate-100);
    --bs-secondary-bg-rgb: 241, 245, 249;
    --bs-tertiary-bg: var(--slate-50);
    --bs-tertiary-bg-rgb: 248, 250, 252;
    --bs-border-color: var(--slate-200);
    --bs-border-color-translucent: rgba(15, 23, 42, 0.08);

    /* Couleurs de thème : primary = loomea vegetal, sémantiques alignées
       sur les teintes historiques (emerald / rose / amber / blue). */
    --bs-primary: #6f968c;      --bs-primary-rgb: 111, 150, 140;
    --bs-success: #059669;      --bs-success-rgb: 5, 150, 105;
    --bs-danger:  #e11d48;      --bs-danger-rgb: 225, 29, 72;
    --bs-warning: #d97706;      --bs-warning-rgb: 217, 119, 6;
    --bs-info:    #2563eb;      --bs-info-rgb: 37, 99, 235;
    --bs-light:   var(--slate-100); --bs-light-rgb: 241, 245, 249;
    --bs-dark:    var(--slate-900); --bs-dark-rgb: 15, 23, 42;

    --bs-primary-bg-subtle:     #f1f5f4;   /* vegetal à ~8% sur blanc */
    --bs-primary-border-subtle: #d3e0dc;
    --bs-primary-text-emphasis: #52706a;
    --bs-success-bg-subtle:     #d1fae5;   /* emerald-100 */
    --bs-success-border-subtle: #a7f3d0;   /* emerald-200 */
    --bs-success-text-emphasis: #065f46;   /* emerald-800 */
    --bs-danger-bg-subtle:      #fff1f2;   /* rose-50 */
    --bs-danger-border-subtle:  #fecdd3;   /* rose-200 */
    --bs-danger-text-emphasis:  #9f1239;   /* rose-800 */
    --bs-warning-bg-subtle:     #fef3c7;   /* amber-100 */
    --bs-warning-border-subtle: #fde68a;   /* amber-200 */
    --bs-warning-text-emphasis: #92400e;   /* amber-800 */
    --bs-info-bg-subtle:        #dbeafe;   /* blue-100 */
    --bs-info-border-subtle:    #bfdbfe;   /* blue-200 */
    --bs-info-text-emphasis:    #1e40af;   /* blue-800 */
    --bs-light-bg-subtle:       var(--slate-50);
    --bs-light-border-subtle:   var(--slate-200);
    --bs-light-text-emphasis:   var(--slate-700);
    --bs-dark-bg-subtle:        var(--slate-200);
    --bs-dark-border-subtle:    var(--slate-400);
    --bs-dark-text-emphasis:    var(--slate-900);

    /* Liens : vegetal, sans soulignement par défaut (comme avant) */
    --bs-link-color: #6f968c;       --bs-link-color-rgb: 111, 150, 140;
    --bs-link-hover-color: #5d8177; --bs-link-hover-color-rgb: 93, 129, 119;
    --bs-link-decoration: none;
    --bs-link-hover-decoration: underline;

    /* Radius : alignés sur l'échelle ex-Tailwind
       rounded-1=.375 (md) | rounded-2=.5 (lg) | rounded-3=.75 (xl)
       rounded-4=1rem (2xl) | rounded-5=1.5rem (3xl) */
    --bs-border-radius-sm:  0.375rem;
    --bs-border-radius:     0.5rem;
    --bs-border-radius-lg:  0.75rem;
    --bs-border-radius-xl:  1rem;
    --bs-border-radius-xxl: 1.5rem;

    /* Ombres douces (échelle ex-Tailwind, moins lourdes que Bootstrap) */
    --bs-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bs-box-shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --bs-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    --bs-focus-ring-color: rgba(111, 150, 140, 0.3);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   Boutons
   ============================================================================ */
.btn {
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: 0.5rem;
}
.btn-sm { --bs-btn-font-size: 0.75rem; --bs-btn-padding-y: 0.375rem; --bs-btn-padding-x: 0.75rem; --bs-btn-border-radius: 0.375rem; }
.btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-y: 0.75rem; --bs-btn-padding-x: 1.5rem; --bs-btn-border-radius: 0.75rem; }

.btn-primary {
    --bs-btn-bg: #6f968c; --bs-btn-border-color: #6f968c;
    --bs-btn-hover-bg: #628a7f; --bs-btn-hover-border-color: #628a7f;
    --bs-btn-active-bg: #597c73; --bs-btn-active-border-color: #597c73;
    --bs-btn-disabled-bg: #6f968c; --bs-btn-disabled-border-color: #6f968c;
    --bs-btn-focus-shadow-rgb: 111, 150, 140;
}
.btn-outline-primary {
    --bs-btn-color: #6f968c; --bs-btn-border-color: #6f968c;
    --bs-btn-hover-bg: #6f968c; --bs-btn-hover-border-color: #6f968c;
    --bs-btn-active-bg: #6f968c; --bs-btn-active-border-color: #6f968c;
    --bs-btn-focus-shadow-rgb: 111, 150, 140;
}
.btn-success {
    --bs-btn-bg: #059669; --bs-btn-border-color: #059669;
    --bs-btn-hover-bg: #047857; --bs-btn-hover-border-color: #047857;
    --bs-btn-active-bg: #065f46; --bs-btn-active-border-color: #065f46;
    --bs-btn-disabled-bg: #059669; --bs-btn-disabled-border-color: #059669;
}
.btn-danger {
    --bs-btn-bg: #e11d48; --bs-btn-border-color: #e11d48;
    --bs-btn-hover-bg: #be123c; --bs-btn-hover-border-color: #be123c;
    --bs-btn-active-bg: #9f1239; --bs-btn-active-border-color: #9f1239;
    --bs-btn-disabled-bg: #e11d48; --bs-btn-disabled-border-color: #e11d48;
}
.btn-outline-danger {
    --bs-btn-color: #e11d48; --bs-btn-border-color: #fecdd3;
    --bs-btn-hover-color: #be123c; --bs-btn-hover-bg: #fff1f2; --bs-btn-hover-border-color: #fda4af;
    --bs-btn-active-color: #be123c; --bs-btn-active-bg: #ffe4e6; --bs-btn-active-border-color: #fda4af;
}
/* "Bouton neutre" maison : bordure slate, hover gris clair */
.btn-light {
    --bs-btn-bg: var(--slate-100); --bs-btn-border-color: var(--slate-100);
    --bs-btn-color: var(--slate-700);
    --bs-btn-hover-bg: var(--slate-200); --bs-btn-hover-border-color: var(--slate-200);
    --bs-btn-hover-color: var(--slate-900);
    --bs-btn-active-bg: var(--slate-200); --bs-btn-active-border-color: var(--slate-200);
}
.btn-outline-secondary {
    --bs-btn-color: var(--slate-700); --bs-btn-border-color: var(--slate-200);
    --bs-btn-hover-color: var(--slate-900); --bs-btn-hover-bg: var(--slate-50);
    --bs-btn-hover-border-color: var(--slate-300);
    --bs-btn-active-color: var(--slate-900); --bs-btn-active-bg: var(--slate-100);
    --bs-btn-active-border-color: var(--slate-300);
}
.btn-white {
    --bs-btn-bg: #fff; --bs-btn-border-color: var(--slate-200);
    --bs-btn-color: var(--slate-700);
    --bs-btn-hover-bg: var(--slate-50); --bs-btn-hover-border-color: var(--slate-300);
    --bs-btn-hover-color: var(--slate-900);
    --bs-btn-active-bg: var(--slate-100); --bs-btn-active-border-color: var(--slate-300);
    --bs-btn-active-color: var(--slate-900);
}

/* ============================================================================
   Formulaires
   ============================================================================ */
.form-control, .form-select {
    border-color: var(--slate-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--slate-900);
}
.form-control::placeholder { color: var(--slate-400); }
.form-control:focus, .form-select:focus {
    border-color: var(--loomea-vegetal);
    box-shadow: 0 0 0 0.2rem rgba(111, 150, 140, 0.3);
}
.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--slate-800);
    margin-bottom: 0.375rem;
}
.form-text { color: var(--slate-400); font-size: 0.75rem; }
.form-check-input:checked { background-color: var(--loomea-vegetal); border-color: var(--loomea-vegetal); }
.form-check-input:focus {
    border-color: var(--loomea-vegetal);
    box-shadow: 0 0 0 0.2rem rgba(111, 150, 140, 0.3);
}
.input-group-text { font-size: 0.875rem; color: var(--slate-500); background: var(--slate-50); border-color: var(--slate-300); }

/* ============================================================================
   Dropdowns, cards, modales, tables, badges, alerts, pagination
   ============================================================================ */
.dropdown-menu {
    --bs-dropdown-border-radius: 0.75rem;
    --bs-dropdown-border-color: var(--slate-200);
    --bs-dropdown-box-shadow: var(--bs-box-shadow-lg);
    --bs-dropdown-font-size: 0.875rem;
    --bs-dropdown-link-color: var(--slate-700);
    --bs-dropdown-link-hover-bg: var(--slate-50);
    --bs-dropdown-link-hover-color: var(--slate-900);
    --bs-dropdown-link-active-bg: var(--slate-100);
    --bs-dropdown-link-active-color: var(--slate-900);
    box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; }

.card {
    --bs-card-border-color: var(--slate-200);
    --bs-card-border-radius: 0.75rem;
    --bs-card-inner-border-radius: calc(0.75rem - 1px);
    --bs-card-cap-bg: var(--slate-50);
}

.modal-content { border: 0; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.modal-backdrop { --bs-backdrop-bg: #0f172a; --bs-backdrop-opacity: 0.5; }
.modal-title { font-weight: 600; }

.table { --bs-table-border-color: var(--slate-200); }
.table > thead th {
    background: var(--slate-50);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    white-space: nowrap;
}
.table > tbody td { font-size: 0.875rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--loomea-sable); }

.badge { font-weight: 500; }
/* Alias hérités (badge-success / badge-warning / badge-info / badge-error)
   encore émis par certains partiels ou JS. */
.badge-success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.badge-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.badge-info    { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.badge-error   { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

.alert { --bs-alert-border-radius: 0.5rem; font-size: 0.875rem; }

.pagination {
    --bs-pagination-color: var(--slate-600);
    --bs-pagination-border-color: var(--slate-200);
    --bs-pagination-hover-bg: var(--slate-50);
    --bs-pagination-hover-color: var(--slate-900);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(111, 150, 140, 0.3);
    --bs-pagination-active-bg: var(--loomea-vegetal);
    --bs-pagination-active-border-color: var(--loomea-vegetal);
}

.nav-tabs { --bs-nav-tabs-link-active-color: var(--loomea-vegetal); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--loomea-vegetal); }
.nav-link { --bs-nav-link-color: var(--slate-600); --bs-nav-link-hover-color: var(--loomea-vegetal); }

.breadcrumb { --bs-breadcrumb-font-size: 0.875rem; }

/* ============================================================================
   Utilitaires complémentaires (ce que Bootstrap n'a pas)
   ============================================================================ */

/* Tailles de texte fines (ex text-xs / text-sm / text-lg) */
.fs-xs { font-size: 0.75rem !important; }
.fs-sm { font-size: 0.875rem !important; }
.fs-lg { font-size: 1.125rem !important; }

/* Letter-spacing (ex tracking-wide / tracking-wider) */
.ls-wide  { letter-spacing: 0.025em !important; }
.ls-wider { letter-spacing: 0.05em !important; }

/* Line-height (ex leading-tight / leading-relaxed) */
.lh-tight   { line-height: 1.25 !important; }
.lh-relaxed { line-height: 1.625 !important; }

/* Icônes SVG inline (ex w-3 h-3 … w-8 h-8) — flex-shrink pour les layouts flex */
.icon-12 { width: 0.75rem;  height: 0.75rem;  flex-shrink: 0; }
.icon-14 { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.icon-16 { width: 1rem;     height: 1rem;     flex-shrink: 0; }
.icon-20 { width: 1.25rem;  height: 1.25rem;  flex-shrink: 0; }
.icon-24 { width: 1.5rem;   height: 1.5rem;   flex-shrink: 0; }
.icon-32 { width: 2rem;     height: 2rem;     flex-shrink: 0; }

/* Pastilles rondes avec icône/initiale centrée (ex w-9 h-9 rounded-full flex …) */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
}
.icon-circle-sm { width: 1.75rem; height: 1.75rem; }
.icon-circle-lg { width: 2.5rem;  height: 2.5rem; }
.icon-circle-xl { width: 4rem;    height: 4rem; }

/* Max-widths (ex max-w-md … max-w-7xl) */
.mw-xs  { max-width: 20rem !important; }
.mw-sm  { max-width: 24rem !important; }
.mw-md  { max-width: 28rem !important; }
.mw-lg  { max-width: 32rem !important; }
.mw-xl  { max-width: 36rem !important; }
.mw-2xl { max-width: 42rem !important; }
.mw-3xl { max-width: 48rem !important; }
.mw-4xl { max-width: 56rem !important; }
.mw-5xl { max-width: 64rem !important; }
.mw-6xl { max-width: 72rem !important; }
.mw-7xl { max-width: 80rem !important; }

/* Conteneur page (ex max-w-7xl mx-auto px-4 sm:px-6 lg:px-8) */
.container-page { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 576px)  { .container-page { padding-inline: 1.5rem; } }
@media (min-width: 992px)  { .container-page { padding-inline: 2rem; } }
/* Variante large pour les tables denses du BO (ex max-w-[1700px]) */
.container-wide { max-width: 1700px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 576px)  { .container-wide { padding-inline: 1.5rem; } }
@media (min-width: 992px)  { .container-wide { padding-inline: 2rem; } }

/* Ratios (ex aspect-[4/3] etc.) */
.ar-1x1   { aspect-ratio: 1 / 1; }
.ar-4x3   { aspect-ratio: 4 / 3; }
.ar-16x9  { aspect-ratio: 16 / 9; }
.ar-16x10 { aspect-ratio: 16 / 10; }

/* Rotations (chevrons ouverts/fermés pilotés en JS) */
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* Séparateurs entre enfants (ex divide-y divide-slate-100) */
.divide-y > * + * { border-top: 1px solid var(--slate-100); }

/* Troncature multi-lignes (ex line-clamp-N) */
.clamp-1, .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

/* Hovers récurrents */
.hover-bg-light:hover { background-color: var(--slate-50); }
/* Pastille sociale : gris clair, passe au vegetal au hover */
.hover-primary-circle { background: var(--slate-100); color: var(--slate-600); transition: all 0.15s ease; }
.hover-primary-circle:hover { background: var(--loomea-vegetal); color: #fff; }
.hover-lift { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.hover-lift:hover { box-shadow: var(--bs-box-shadow-lg); transform: translateY(-2px); }

/* Lien de navigation neutre (ex text-slate-600 hover:text-loomea-vegetal) */
.link-nav { color: var(--slate-600); text-decoration: none; transition: color 0.15s ease; }
.link-nav:hover, .link-nav:focus { color: var(--loomea-vegetal); }
/* Lien "invisible" héritant de la couleur du parent (cartes cliquables) */
.link-plain { color: inherit; text-decoration: none; }
.link-plain:hover { color: inherit; }

/* Fond sable (ex bg-loomea-sable) */
.bg-sable { background-color: var(--loomea-sable) !important; }

/* Transition générique */
.transition-base { transition: all 0.15s ease; }

/* Curseur */
.cursor-pointer { cursor: pointer; }

/* Compat : hook JS historique (169 toggles classList('hidden') dans les vues).
   Équivalent de d-none — à réserver aux éléments togglés en JS. */
.hidden { display: none !important; }

/* ============================================================================
   Sidebar "rail" (x-admin.sidebar) — repliée à 4rem sur desktop, déployée au
   hover ; off-canvas custom sur mobile (classe .show + backdrop).
   ============================================================================ */
.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    width: 16rem;
    background: #fff;
    border-right: 1px solid var(--slate-200);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out, width 0.2s ease-out, box-shadow 0.2s ease-out;
    overflow-y: auto;
}
.app-sidebar.show { transform: none; }
.app-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1030;
}
@media (min-width: 992px) {
    .app-sidebar {
        transform: none;
        width: 4rem;
        top: 4rem;
        height: calc(100vh - 4rem);
        overflow: hidden;
    }
    .app-sidebar:hover {
        width: 16rem;
        overflow-y: auto;
        box-shadow: var(--bs-box-shadow-lg);
    }
    .app-sidebar .sidebar-label { opacity: 0; transition: opacity 0.15s ease; }
    .app-sidebar:hover .sidebar-label { opacity: 1; }
    .app-sidebar .sidebar-children { display: none; }
    .app-sidebar:hover .sidebar-children { display: block; }
}
/* Décalage du contenu quand le rail est présent (ex lg:pl-16) */
@media (min-width: 992px) {
    .main-with-rail { padding-left: 4rem; }
}

/* Entrées de la sidebar */
.sidebar-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    list-style: none;
    color: var(--slate-700);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-summary::-webkit-details-marker { display: none; }
.sidebar-summary:hover { background: var(--slate-50); color: var(--slate-900); }
.sidebar-summary.active { background: var(--bs-primary-bg-subtle); color: var(--loomea-vegetal); }
.sidebar-child-link {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--slate-600);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-child-link:hover { background: var(--slate-50); color: var(--slate-900); }
.sidebar-child-link.active { background: var(--slate-100); color: var(--slate-900); font-weight: 600; }
.sidebar-chevron { transition: transform 0.15s ease; }
details[open] > .sidebar-summary .sidebar-chevron { transform: rotate(90deg); }