/* assets/css/sobre.css — Surcharge sobre, légère et moderne
   Chargée APRÈS tailwind.css ; redéfinit la palette et
   complète les classes manquantes sans reconstruire Tailwind. */

/* ─── Palette publique : bleu doux + accent doré ─── */
:root {
    --color-primary-50:  #f2f6fb;
    --color-primary-100: #e2ebf5;
    --color-primary-200: #c4d8eb;
    --color-primary-300: #99bade;
    --color-primary-400: #6995c4;
    --color-primary-500: #3f74a8;
    --color-primary-600: #32608c;
    --color-primary-700: #2a5075;
    --color-primary-800: #244360;
    --color-primary-900: #1f3850;
    --color-primary:     var(--color-primary-600);

    --color-accent-50:  #faf6f0;
    --color-accent-100: #f6f1ea;
    --color-accent-200: #ecdfce;
    --color-accent-300: #dfc7a9;
    --color-accent-400: #cfb697;
    --color-accent-500: #b3936b;
    --color-accent-600: #93734c;
    --color-accent-700: #775c3d;
    --color-accent-800: #5f4a31;
    --color-accent-900: #4a3a27;

    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ─── Classes manquantes dans le tailwind.css compilé ─── */
.font-display { font-family: var(--font-display, var(--font-sans)); }

.bg-primary { background-color: var(--color-primary-600); }
.text-primary { color: var(--color-primary-600); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }
.border-primary { border-color: var(--color-primary-500); }
.ring-primary { --tw-ring-color: var(--color-primary-500); }

/* Voile sombre pour les bannières image + texte */
.sbr-overlay { position: absolute; inset: 0; background-color: rgba(24, 32, 41, 0.7); }

/* Utilitaires fins manquants dans le build */
.h-1 { height: 0.25rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-5 { margin-top: 1.25rem; }
.max-w-2xl { max-width: 42rem; }
.w-56 { width: 14rem; }
.leading-snug { line-height: 1.375; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(calc(0.25rem * var(--tw-space-y-reverse)) * -1); margin-bottom: calc(0.25rem * (1 - var(--tw-space-y-reverse))); }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(calc(0.75rem * var(--tw-space-y-reverse)) * -1); margin-bottom: calc(0.75rem * (1 - var(--tw-space-y-reverse))); }
@media (min-width: 640px) {
  .sm\:w-52 { width: 13rem; }
  .sm\:h-64 { height: 16rem; }
  .sm\:text-left { text-align: left; }
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:mx-0 { margin-left: 0; margin-right: 0; }
}

.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary-400); }
.focus\:border-primary:focus { border-color: var(--color-primary-400); }
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus\:ring-4:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }

/* ─── Classes utilisées par header / footer / newsletter absentes du build ─── */
.bg-white\/85 { background-color: rgba(255, 255, 255, 0.85); }
.bg-dark\/50 { background-color: rgba(15, 23, 42, 0.50); }
.dark .dark\:bg-dark\/85, .dark.bg-dark\/85 { background-color: rgba(15, 23, 42, 0.85); }
:where(.dark, .dark *) .dark\:bg-dark\/85 { background-color: rgba(15, 23, 42, 0.85); }
.placeholder-gray-400::placeholder { color: #9ca3af; }
.dark:where(.dark, .dark *) .dark\:placeholder-dark-200::placeholder { color: var(--color-dark-200, #475569); }
.dark\:placeholder-dark-200::placeholder { color: var(--color-dark-200, #475569); }
:where(.dark, .dark *) .dark\:placeholder-dark-200::placeholder { color: var(--color-dark-200, #475569); }
:focus\:placeholder-accent-600::placeholder, .focus\:placeholder-accent-600:focus::placeholder { color: var(--color-accent-600); }
.focus\:placeholder-accent-600:focus::placeholder { color: var(--color-accent-600); }
:where(.dark, .dark *) .dark\:focus\:placeholder-primary-300:focus::placeholder { color: var(--color-primary-300, #adc0cf); }
.dark\:focus\:placeholder-primary-300:focus::placeholder { color: var(--color-primary-300, #adc0cf); }
.focus\:ring-accent-400\/60:focus { --tw-ring-color: rgba(207, 182, 151, 0.6); }
.hover\:border-primary-200:hover { border-color: var(--color-primary-200); }
.opacity-70 { opacity: 0.7; }
.md\:inline-flex { display: inline-flex; }
.sm\:gap-2 { gap: 0.5rem; }
.sm\:gap-2\.5 { gap: 0.625rem; }
.sm\:h-\[4\.5rem\] { height: 4.5rem; }
.sm\:mt-20 { margin-top: 5rem; }
.mt-16 { margin-top: 4rem; }
.lg\:p-16 { padding: 4rem; }
.pl-2 { padding-left: 0.5rem; }
.rounded-\[2rem\] { border-radius: 2rem; }
.from-primary-700 { --tw-gradient-from: var(--color-primary-700); --tw-gradient-to: rgb(61 82 104 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-primary-800 { --tw-gradient-to: rgb(47 64 80 / 0); --tw-gradient-stops: var(--tw-gradient-from, transparent), var(--via, transparent), var(--tw-gradient-to); --via: var(--color-primary-800); }
.to-primary-900 { --tw-gradient-to: var(--color-primary-900); }
.bg-accent-500\/20 { background-color: rgba(179, 147, 107, 0.2); }
.border-white\/40 { border-color: rgba(255, 255, 255, 0.4); }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.-top-12 { top: -3rem; }
.-bottom-14 { bottom: -3.5rem; }
.-left-10 { left: -2.5rem; }
.h-52 { height: 13rem; }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
.text-primary-100\/80 { color: rgba(233, 238, 242, 0.8); }
.text-primary-100\/90 { color: rgba(233, 238, 242, 0.9); }
.placeholder-white\/50::placeholder { color: rgba(255, 255, 255, 0.5); }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.active\:scale-\[0\.97\]:active { transform: scale(0.97); }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.hover\:shadow-accent-500\/25:hover { --tw-shadow-color: rgba(179, 147, 107, 0.25); }
.hover\:shadow-2xl:hover { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.top-8 { top: 2rem; }
.right-10 { right: 2.5rem; }
.bottom-10 { bottom: 2.5rem; }
.left-12 { left: 3rem; }
.-top-16 { top: -4rem; }
.-left-16 { left: -4rem; }
.-bottom-20 { bottom: -5rem; }
.-right-10 { right: -2.5rem; }

.shadow-soft { box-shadow: 0 2px 12px -2px rgba(31, 41, 55, 0.08); }
.shadow-card { box-shadow: 0 1px 4px -1px rgba(31, 41, 55, 0.08); }

/* Animations manquantes */
.animate-heartbeat { animation: sbr-heartbeat 0.4s ease-in-out; }
@keyframes sbr-heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.animate-stagger > * { opacity: 0; animation: sbr-slide-up 0.5s ease-out forwards; }
@keyframes sbr-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.animate-slideUp { animation: sbr-slide-up 0.5s ease-out forwards; }
.animate-slideInLeft { animation: sbr-slide-left 0.5s ease-out forwards; }
@keyframes sbr-slide-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
.animate-slideInRight { animation: sbr-slide-right 0.5s ease-out forwards; }
@keyframes sbr-slide-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* Typographie de contenu légère (équivalent prose minimal) */
.prose { line-height: 1.75; color: #374151; }
.prose p { margin-bottom: 1.1em; }
.prose h2 { font-size: 1.35rem; font-weight: 700; color: #111827; margin: 1.6em 0 0.6em; }
.prose h3 { font-size: 1.15rem; font-weight: 700; color: #111827; margin: 1.4em 0 0.5em; }
.prose ul, .prose ol { list-style: disc; padding-left: 1.4em; margin-bottom: 1.1em; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--color-primary-600); text-decoration: underline; }
.prose strong { color: #111827; font-weight: 700; }

/* Respect du thème sombre */
.dark .prose { color: var(--color-dark-400); }
.dark .prose h2, .dark .prose h3, .dark .prose strong { color: var(--color-dark-500); }
.dark .prose a { color: var(--color-primary-400); }

/* ═══ EN-TÊTE ═══ */
/* Liseré uni discret tout en haut du header */
.sbr-topbar {
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--color-accent-500);
    z-index: 60;
}

/* Ombre douce du header */
.site-nav { transition: box-shadow .35s ease, height .3s ease; }
.site-nav.scrolled { box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18); }

/* Le header lui-même : ombre discrète permanente + hauteur qui rétrécit au scroll */
#siteHeader { box-shadow: 0 4px 16px -10px rgba(15, 23, 42, 0.08); transition: box-shadow .35s ease, padding .3s ease; }
#siteHeader.scrolled { box-shadow: 0 12px 32px -14px rgba(15, 23, 42, 0.22); }
#siteHeader.scrolled > .sbr-header-bar { height: 4rem !important; }

/* ═══ TIROIR DE NAVIGATION MOBILE (SORT DE LA GAUCHE, FOND 100 % OPAQUE) ═══ */
.sbr-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.sbr-mobile-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.sbr-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    height: 100dvh;
    background: #ffffff;
    color: #1f2937;
    border-right: 1px solid #e5e7eb;
    box-shadow: 16px 0 44px rgba(15, 23, 42, 0.28);
    z-index: 70;
    display: flex;
    flex-direction: column;
    transform: translateX(-104%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.dark .sbr-mobile-drawer {
    background: #0f172a;
    color: #f1f5f9;
    border-right-color: #1e293b;
}
.sbr-mobile-drawer.is-open {
    transform: translateX(0);
}
.sbr-mobile-drawer-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.15rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, rgba(50, 96, 140, 0.05), transparent);
}
.dark .sbr-mobile-drawer-head {
    border-bottom-color: #1e293b;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}
.sbr-mobile-drawer-head::after {
    content: "";
    position: absolute;
    left: 1.15rem;
    bottom: -1px;
    width: 3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent-500);
}
.sbr-mobile-close {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    background: #f3f4f6;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sbr-mobile-close:hover {
    background: #e5e7eb;
    color: #111827;
}
.dark .sbr-mobile-close {
    background: #1e293b;
    color: #cbd5e1;
}
.sbr-mobile-drawer-search {
    padding: 0.85rem 1rem 0.5rem;
}
.sbr-mobile-search-form {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.85rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}
.dark .sbr-mobile-search-form {
    background: #1e293b;
    border-color: #334155;
}
.sbr-mobile-search-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: inherit;
}
.sbr-mobile-drawer-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sbr-mobile-section-label {
    padding: 0.45rem 0.65rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
}
.sbr-mobile-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.68rem 0.75rem;
    border-radius: 0.85rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #374151;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dark .sbr-mobile-link {
    color: #e2e8f0;
}
.sbr-mobile-link:hover {
    background: #f3f4f6;
    color: #111827;
}
.dark .sbr-mobile-link:hover {
    background: #1e293b;
    color: #ffffff;
}
.sbr-mobile-link-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f5fa;
    color: var(--color-primary-600);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.dark .sbr-mobile-link-icon {
    background: rgba(50, 96, 140, 0.22);
    color: #93c5fd;
}
.sbr-mobile-link-arrow {
    margin-left: auto;
    font-size: 0.85rem;
    opacity: 0.4;
}
.sbr-mobile-link.is-active {
    background: #eef4fa;
    color: var(--color-primary-700);
    box-shadow: inset 3px 0 0 var(--color-accent-500);
}
.dark .sbr-mobile-link.is-active {
    background: rgba(50, 96, 140, 0.28);
    color: #ffffff;
}
.sbr-mobile-link.is-active .sbr-mobile-link-icon {
    background: var(--color-primary-600);
    color: #ffffff;
}
.sbr-mobile-drawer-foot {
    padding: 0.9rem 1rem 1.15rem;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
}
.dark .sbr-mobile-drawer-foot {
    border-top-color: #1e293b;
    background: #0b1324;
}
.sbr-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.9rem;
    background: var(--color-accent-500);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(179, 147, 107, 0.28);
    transition: background-color 0.2s ease;
}
.sbr-mobile-cta:hover {
    background: var(--color-accent-600);
}

/* ═══ ALIGNEMENT JUSTIFIÉ PROPRE POUR LES TEXTES LONGS ═══ */
.sbr-justify,
.sbr-justify p,
.article-body p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Pills de navigation : soulignement animé + icône qui avance au survol */
.sbr-pill { position: relative; display: inline-flex; align-items: center; }
.sbr-pill::after {
    content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.25rem;
    height: 2px; border-radius: 9999px;
    background: var(--color-accent-500);
    transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.sbr-pill:hover::after,
.sbr-pill.is-active::after { transform: scaleX(1); }
.sbr-pill .sbr-icon { display: inline-block; transition: transform .3s ease; }
.sbr-pill:hover .sbr-icon { transform: translateX(3px); }

/* Pastille de recherche : s'étend au focus */
.sbr-search { position: relative; }
.sbr-search .sbr-search-input { width: 44px; transition: width .35s ease; }
.sbr-search .sbr-search-input:focus { width: 190px; }
.sbr-search .sbr-search-input:focus + .sbr-search-icon,
.sbr-search .sbr-search-icon:focus { opacity: .85; }
.sbr-search .sbr-search-icon { pointer-events: none; opacity: .55; transition: opacity .3s; }


/* ═══ PIED DE PAGE ═══ */
/* Liseré uni discret en haut du footer */
.sbr-footergrad { height: 1px; width: 100%;
    background: var(--color-accent-500); }

/* Newsletter : conserve le rendu d'origine (bleu ardoise + doré) */
.nl-legacy {
    --color-primary-50:  #f4f6f8;
    --color-primary-100: #e9eef2;
    --color-primary-200: #d4dee6;
    --color-primary-300: #adc0cf;
    --color-primary-400: #7f9ab2;
    --color-primary-500: #5c7b97;
    --color-primary-600: #49647e;
    --color-primary-700: #3d5268;
    --color-primary-800: #2f4050;
    --color-primary-900: #24313e;
    --color-accent-100:  #f6f1ea;
    --color-accent-400:  #cfb697;
    --color-accent-500:  #b3936b;
    --color-accent-600:  #93734c;
}
.nl-legacy .text-primary-100\/80 { color: rgba(233, 238, 242, .8); }
.nl-legacy .text-primary-100\/90 { color: rgba(233, 238, 242, .9); }

/* Survol du pied de page : couleurs d'origine (bleu ardoise) */
#siteFooter a:hover { color: #49647e; }
.dark #siteFooter a:hover { color: #7f9ab2; }
#siteFooter .sbr-socials a:hover { background-color: #5c7b97; color: inherit; }

/* Vignettes des derniers articles */
.sbr-thumb { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
    display: flex; align-items: center; justify-content: center; color: var(--color-primary-400);
    transition: transform .3s ease; }
a:hover .sbr-thumb { transform: scale(1.06); }
.sbr-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Mot-clé géant en filigrane */
.sbr-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--color-primary-200); opacity: .45; user-select: none; pointer-events: none; }
.dark .sbr-watermark { color: var(--color-primary-800); opacity: .35; }

/* Bouton retour en haut flottant */
.sbr-topbtn { position: fixed; right: 20px; bottom: 24px; z-index: 70; width: 46px; height: 46px;
    border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    background: var(--color-primary-600); color: #fff; font-size: 1.1rem;
    box-shadow: 0 12px 28px -8px rgba(50, 96, 140, 0.40);
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, background .3s ease; }
.sbr-topbtn.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sbr-topbtn:hover { background: var(--color-primary-700); }

/* ═══ CARTES FONCTIONNALITÉS ═══ */
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }
.shadow-primary-500\/10 { box-shadow: 0 4px 14px -2px rgba(63, 116, 168, 0.10); }
.shadow-primary-500\/20 { box-shadow: 0 12px 30px -8px rgba(63, 116, 168, 0.20); }
.hover\:shadow-primary-500\/10:hover { box-shadow: 0 18px 40px -12px rgba(63, 116, 168, 0.10); }
.rotate-3 { transform: rotate(3deg); }
.group:hover .group-hover\:rotate-3 { transform: rotate(3deg); }
.group:hover .group-hover\:translate-x-0 { transform: translateX(0); }
.group:hover .group-hover\:scale-110 { transform: scale(1.10); }
.dark .dark\:hover\:border-primary-800\/40:hover { border-color: rgba(30, 64, 175, 0.40); }
.top-5 { top: 1.25rem; }
.right-6 { right: 1.5rem; }

/* ═══ FORMULAIRES ═══ */
.inset-y-0 { top: 0; bottom: 0; }
.left-4 { left: 1rem; }
.pl-10 { padding-left: 2.5rem; }
.left-3\.5 { left: 0.875rem; }
.right-3\.5 { right: 0.875rem; }
.dark .dark\:bg-dark-100\/40 { background-color: rgba(30, 41, 59, 0.4); }
.peer:focus ~ .peer-focus\:text-primary { color: var(--color-primary-500); }
.dark .dark\:focus\:border-accent-600:focus { border-color: var(--color-accent-600); }
.dark .dark\:focus\:ring-accent-400\/60:focus { --tw-ring-color: rgba(207, 182, 151, 0.6); }

/* ═══ SURCOUCHE HERO ACCUEIL ═══ */
.from-dark\/85 { --tw-gradient-from: rgba(15, 23, 42, 0.85); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.via-primary-900\/70 { --tw-gradient-stops: var(--tw-gradient-from), rgba(30, 64, 175, 0.70), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
.to-primary-900\/80 { --tw-gradient-to: rgba(30, 64, 175, 0.80); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.from-dark\/40 { --tw-gradient-from: rgba(15, 23, 42, 0.40); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
.to-transparent { --tw-gradient-to: transparent; }
.from-primary-600 { --tw-gradient-from: var(--color-primary-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.to-primary-800 { --tw-gradient-to: var(--color-primary-800); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.to-accent-500 { --tw-gradient-to: var(--color-accent-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.blur-3xl { filter: blur(64px); }
.-top-24 { top: -6rem; }
.-right-24 { right: -6rem; }
.-bottom-24 { bottom: -6rem; }
.-left-24 { left: -6rem; }
.bg-accent-100\/40 { background-color: rgba(254, 243, 199, 0.40); }
.bg-primary-100\/40 { background-color: rgba(219, 234, 254, 0.40); }
.dark .dark\:bg-accent-900\/10 { background-color: rgba(120, 53, 15, 0.10); }
.dark .dark\:bg-primary-900\/10 { background-color: rgba(30, 64, 175, 0.10); }
.gradient-text { background-image: linear-gradient(90deg, var(--color-primary-500), var(--color-accent-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ═══ DOCUMENTS & PAIEMENT (compléments) ═══ */
.mt-20 { margin-top: 5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.break-all { word-break: break-all; }
.max-w-\[180px\] { max-width: 180px; }
.border-amber-200 { border-color: #fde68a; }
.text-amber-800 { color: #92400e; }
.border-emerald-200 { border-color: #a7f3d0; }
.text-emerald-800 { color: #065f46; }
.hover\:bg-primary-100:hover { background-color: var(--color-primary-100); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }

/* ═══ ADMIN : menu latéral responsive ═══ */
.admin-main { min-width: 0; }
.admin-menu-btn { display: none; }
.admin-overlay { display: none; }

@media (max-width: 1023px) {
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-main { margin-left: 0 !important; }
  .admin-menu-btn { display: inline-flex; }
  .admin-overlay.is-visible {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 35;
  }
}

@media (min-width: 1024px) {
  .admin-sidebar { transform: none; }
  .admin-overlay { display: none !important; }
}

/* ═══ LECTURE DES ARTICLES ═══ */
.article-card { background-color: #fffdf9; }

.article-body {
  max-width: 68ch;
  margin-inline: auto;
  color: #1f2937;
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.85;
  letter-spacing: 0.002em;
  overflow-wrap: break-word;
}

.article-body p { margin: 0 0 1.25em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong,
.article-body b { color: #111827; font-weight: 600; }
.article-body a { color: #2a5075; text-decoration: underline; text-underline-offset: 3px; }

.article-body blockquote {
  margin: 1.25em 0;
  padding: 0.75em 1em;
  border-left: 4px solid #c7d2fe;
  border-radius: 0 8px 8px 0;
  background: #eef2ff;
  color: #1e293b;
}

.article-body ul,
.article-body ol { margin: 0 0 1.25em 1.4em; padding: 0; }
.article-body li { margin: 0.35em 0; }
.article-body h2,
.article-body h3 { color: #111827; line-height: 1.3; margin: 1.6em 0 0.6em; }
.article-body h2 { font-size: 1.35em; font-weight: 700; }
.article-body h3 { font-size: 1.15em; font-weight: 600; }

.dark .article-card { background-color: #111c33; border-color: #334155; }
.dark .article-body { color: #e2e8f0; }
.dark .article-body strong,
.dark .article-body b { color: #ffffff; }
.dark .article-body a { color: #93c5fd; }
.dark .article-body blockquote { background: #1e293b; color: #e2e8f0; border-left-color: #3b82f6; }
.dark .article-body h2,
.dark .article-body h3 { color: #ffffff; }

/* ═══ PARTAGE D'ARTICLE : STYLE SOBRE ═══ */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  color: #374151;
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.share-btn:hover {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}
.dark .share-btn {
  border-color: #334155;
  color: #cbd5e1;
}
.dark .share-btn:hover {
  background: #f8fafc;
  border-color: #f8fafc;
  color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — CONFORT DE LECTURE
   Agrandit toute l'administration d'environ 10 % (équivalent
   d'un zoom navigateur à 110 %), sans toucher au site public.
   ═══════════════════════════════════════════════════════════ */
html:has(body.admin-shell) {
    font-size: 110%;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — SYSTÈME VISUEL SOBRE
   Accent unique : bleu #2563eb (le site public garde sa palette)
   Fond sable très clair, cartes blanches, bordures fines.
   ═══════════════════════════════════════════════════════════ */
:root {
    --adm-accent:      #2563eb;
    --adm-accent-dark: #1d4ed8;
    --adm-accent-soft: #eff6ff;
    --adm-bg:          #faf8f7;
    --adm-border:      #ece7e2;
    --adm-border-soft: #f3efeb;
    --adm-ink:         #1f2937;
    --adm-muted:       #6b7280;
    --adm-faint:       #9ca3af;
}

body.admin-shell {
    background-color: var(--adm-bg);
    color: var(--adm-ink);
}

/* ─── Sidebar bleu nuit (identité du projet) ─── */
.admin-sidebar {
    background: #1e3a5f;
    border-right: 1px solid rgba(255, 255, 255, .08);
    color: #cbd5e1;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}
.admin-side-brand {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    background:
        radial-gradient(120% 150% at 50% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 62%);
    overflow: hidden;
}
.admin-side-brand::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 3.5rem;
    height: 2px;
    transform: translate(-50%, 50%);
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(179, 147, 107, 0), #b3936b, rgba(179, 147, 107, 0));
}
.admin-side-brand img {
    width: min(8.25rem, 100%);
    height: auto;
    max-width: 100%;
    border-radius: .5rem;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28));
    transition: transform .25s ease, filter .25s ease;
}
.admin-side-brand:hover img {
    transform: scale(1.04);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35));
}
.adm-side-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem .7rem .5rem;
}
.adm-side-nav ul > :not([hidden]) ~ :not([hidden]) {
    margin-top: .12rem;
}
.adm-side-section {
    padding: .5rem .6rem .2rem;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, .45);
}
.adm-side-section:first-child { padding-top: .15rem; }
.adm-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .36rem .6rem;
    border-radius: .5rem;
    font-size: .81rem;
    font-weight: 500;
    color: #cbd5e1;
    transition: background-color .18s ease, color .18s ease;
}
.adm-nav-link i { font-size: .98rem; color: #94a3b8; transition: color .18s ease; }
.adm-nav-link:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }
.adm-nav-link:hover i { color: #e2e8f0; }
.adm-nav-link.is-active {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #f97316;
}
.adm-nav-link.is-active i { color: #fdba74; }
.adm-nav-count {
    margin-left: auto;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(249, 115, 22, .18);
    color: #fdba74;
    font-size: .62rem;
    font-weight: 700;
}
.adm-side-footer {
    flex: 0 0 auto;
    margin: 0 .75rem .5rem;
    padding: .6rem .75rem;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .05);
}
.adm-side-footer p { font-size: .68rem; line-height: 1.35; color: rgba(226, 232, 240, .65); }
.adm-side-footer p strong { color: #f8fafc; }
.adm-side-footer a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
    font-size: .68rem;
    font-weight: 600;
    color: #fdba74;
}
.adm-side-footer a:hover { text-decoration: underline; }
.adm-side-logout { flex: 0 0 auto; }

/* Écrans peu hauts (portables 768 px et moins) : condense encore
   pour que l'intégralité du menu reste visible sans défilement. */
@media (max-height: 800px) {
    .admin-side-brand { padding: .7rem .9rem .65rem; }
    .admin-side-brand img { width: min(6.75rem, 100%); }
    .adm-side-nav { padding: .35rem .65rem .35rem; }
    .adm-side-section { padding: .35rem .6rem .12rem; font-size: .54rem; }
    .adm-nav-link { padding: .26rem .55rem; font-size: .78rem; }
    .adm-side-footer { margin: 0 .65rem .35rem; padding: .45rem .65rem; }
    .adm-side-footer p { font-size: .63rem; line-height: 1.25; }
    .adm-side-footer a { margin-top: .2rem; font-size: .64rem; }
}
@media (max-height: 690px) {
    .adm-side-footer { display: none; }
}

/* ─── Topbar ─── */
.adm-topbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--adm-border);
    position: sticky;
    top: 0;
    z-index: 30;
}
.adm-search {
    position: relative;
    width: 100%;
    max-width: 26.25rem; /* 420px : largeur fixe quel que soit le titre */
}
.adm-search i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--adm-faint);
    font-size: 1rem;
    pointer-events: none;
}
.adm-search input {
    width: 100%;
    height: 2.45rem;
    padding: 0 2.6rem 0 2.45rem;
    border: 1px solid var(--adm-border);
    border-radius: .65rem;
    background: #fbf9f7;
    font-size: .82rem;
    color: var(--adm-ink);
    outline: none;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.adm-search input::placeholder { color: var(--adm-faint); }
.adm-search input:focus {
    background: #fff;
    border-color: #bfdbfe;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
.adm-search kbd {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--adm-border);
    border-radius: .35rem;
    background: #fff;
    padding: .1rem .3rem;
    font-size: .6rem;
    color: var(--adm-faint);
    font-family: var(--font-sans);
}
.adm-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .6rem;
    border: 1px solid transparent;
    color: #6b7280;
    font-size: 1.15rem;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.adm-icon-btn:hover { background: #f7f4f1; color: #111827; border-color: var(--adm-border-soft); }
.adm-icon-dot {
    position: absolute;
    top: .28rem;
    right: .28rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #e5484d;
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    border: 2px solid #fff;
}
.adm-profile {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-left: .85rem;
    border-left: 1px solid var(--adm-border-soft);
}
.adm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 9999px;
    background: var(--adm-accent-soft);
    color: var(--adm-accent-dark);
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.adm-profile-name { font-size: .8rem; font-weight: 600; color: var(--adm-ink); line-height: 1.2; }
.adm-profile-role { font-size: .68rem; color: var(--adm-faint); line-height: 1.2; margin-top: .1rem; }

/* ─── Cartes ─── */
.adm-card {
    background: #fff;
    border: 1px solid var(--adm-border);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.adm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--adm-border-soft);
}
.adm-card-title { font-size: .9rem; font-weight: 600; color: var(--adm-ink); }
.adm-card-sub { font-size: .72rem; color: var(--adm-muted); margin-top: .15rem; }
.adm-card-body { padding: 1.25rem 1.35rem; }
.adm-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--adm-accent);
}
.adm-link:hover { text-decoration: underline; }
.admin-shell .hover\:text-primary:hover { color: var(--adm-accent); }
.admin-shell .text-primary { color: var(--adm-accent); }

/* ─── KPI ─── */
.adm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 1024px) {
    .adm-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.adm-kpi {
    padding: 1.05rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.adm-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.adm-kpi-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--adm-muted);
}
.adm-kpi-value {
    font-size: 1.75rem; /* 28px */
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--adm-ink);
}
.adm-kpi-value small { font-size: .8rem; font-weight: 600; color: var(--adm-muted); letter-spacing: 0; }
.adm-kpi-foot { font-size: .7rem; color: var(--adm-muted); line-height: 1.35; }

/* ─── Badges ─── */
.adm-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .16rem .5rem;
    border-radius: 9999px;
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
.adm-badge i { font-size: .75rem; }
.adm-badge-green { background: #ecfdf3; color: #027a48; }
.adm-badge-red   { background: #fef3f2; color: #b42318; }
.adm-badge-blue  { background: #eff8ff; color: #175cd3; }
.adm-badge-amber { background: #fffaeb; color: #b54708; }
.adm-badge-gray  { background: #f2f4f7; color: #475467; }

/* ─── Boutons ─── */
.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 2.4rem;
    padding: 0 .95rem;
    border-radius: .6rem;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.adm-btn-primary { background: var(--adm-accent); color: #fff; }
.adm-btn-primary:hover { background: var(--adm-accent-dark); }
.adm-btn-ghost {
    background: #fff;
    border: 1px solid var(--adm-border);
    color: #374151;
}
.adm-btn-ghost:hover { border-color: #bfdbfe; color: var(--adm-accent-dark); background: #f8fbff; }

/* ─── Onglets (périodes) ─── */
.adm-tabs {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .18rem;
    background: #f5f2ef;
    border-radius: .55rem;
}
.adm-tab {
    padding: .3rem .6rem;
    border-radius: .4rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--adm-muted);
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.adm-tab:hover { color: var(--adm-ink); }
.adm-tab.is-active {
    background: #fff;
    color: var(--adm-ink);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .07);
}

/* ─── Graphique en barres ─── */
.adm-chart {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    height: 13rem;
    padding-top: .5rem;
}
.adm-chart-col {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    min-width: 0;
}
.adm-chart-bar {
    width: 100%;
    min-height: 3px;
    border-radius: .3rem .3rem .1rem .1rem;
    background: linear-gradient(180deg, #60a5fa 0%, var(--adm-accent) 100%);
    transition: filter .18s ease, height .35s ease;
}
.adm-chart-col:hover .adm-chart-bar { filter: brightness(.92); }
.adm-chart-bar.is-zero { background: #eef0f3; }
.adm-chart-x {
    display: flex;
    gap: .35rem;
    margin-top: .45rem;
}
.adm-chart-x span {
    flex: 1 1 0;
    text-align: center;
    font-size: .6rem;
    color: var(--adm-faint);
    white-space: nowrap;
    overflow: hidden;
}
.adm-chart-total { font-size: 1.35rem; font-weight: 700; color: var(--adm-ink); letter-spacing: -.02em; }
.adm-chart-note { font-size: .7rem; color: var(--adm-muted); margin-top: .15rem; }

/* ─── Jauge / donut ─── */
.adm-donut {
    position: relative;
    width: 7rem;
    height: 7rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.adm-donut::after {
    content: "";
    position: absolute;
    inset: .8rem;
    border-radius: 9999px;
    background: #fff;
}
.adm-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    text-align: center;
}
.adm-donut-center strong { font-size: 1.25rem; font-weight: 700; color: var(--adm-ink); line-height: 1; }
.adm-donut-center span { font-size: .6rem; color: var(--adm-muted); margin-top: .2rem; }
.adm-legend { display: flex; flex-direction: column; gap: .7rem; }
.adm-legend-row { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--adm-muted); }
.adm-legend-dot { width: .5rem; height: .5rem; border-radius: 9999px; flex-shrink: 0; }
.adm-legend-row strong { color: var(--adm-ink); font-weight: 600; margin-left: auto; }

/* ─── Barres de progression (top articles) ─── */
.adm-meter { height: .4rem; background: #f2f0ee; border-radius: 9999px; overflow: hidden; }
.adm-meter > span {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--adm-accent);
    transition: width .4s ease;
}
.adm-meter.is-muted > span { background: #c7cdd4; }

/* ─── Flux d'activité ─── */
.adm-activity { display: flex; flex-direction: column; }
.adm-activity-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--adm-border-soft);
}
.adm-activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.adm-activity-item:first-child { padding-top: 0; }
.adm-activity-body { min-width: 0; flex: 1; }
.adm-activity-text { font-size: .76rem; color: #374151; line-height: 1.4; }
.adm-activity-text strong { font-weight: 600; color: var(--adm-ink); }
.adm-activity-time { font-size: .65rem; color: var(--adm-faint); margin-top: .15rem; }
.adm-avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    flex-shrink: 0;
}
.adm-avatar-blue   { background: #eff8ff; color: #175cd3; }
.adm-avatar-green  { background: #ecfdf3; color: #027a48; }
.adm-avatar-amber  { background: #fffaeb; color: #b54708; }
.adm-avatar-purple { background: #f4f3ff; color: #5925dc; }

/* ─── Tableaux admin ─── */
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table thead th {
    padding: .65rem 1.35rem;
    text-align: left;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--adm-faint);
    background: #fcfaf9;
    border-bottom: 1px solid var(--adm-border-soft);
}
.adm-table tbody td { padding: .75rem 1.35rem; border-bottom: 1px solid var(--adm-border-soft); vertical-align: middle; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr { transition: background-color .15s ease; }
.adm-table tbody tr:hover { background: #fcfaf9; }

/* ─── État vide ─── */
.adm-empty { padding: 2rem 1.25rem; text-align: center; }
.adm-empty i { font-size: 1.6rem; color: #d1d5db; display: block; margin-bottom: .5rem; }
.adm-empty p { font-size: .8rem; color: var(--adm-muted); }
.adm-empty a { color: var(--adm-accent); font-weight: 600; }
.adm-empty a:hover { text-decoration: underline; }

/* ─── Bandeau de bienvenue ─── */
.adm-welcome-title { font-size: 1.85rem; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--adm-ink); }
.adm-welcome-date { font-size: .75rem; color: var(--adm-faint); margin-top: .3rem; }
.adm-section-title { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--adm-faint); }

@media (max-width: 640px) {
    .adm-welcome-title { font-size: 1.5rem; }
    .adm-kpi-value { font-size: 1.45rem; }
    .adm-card-head, .adm-card-body { padding-left: 1rem; padding-right: 1rem; }
    .adm-table thead th, .adm-table tbody td { padding-left: 1rem; padding-right: 1rem; }
    .adm-chart { height: 10rem; gap: .2rem; }
    .adm-chart-x { gap: .2rem; }
    .adm-chart-x span { font-size: .52rem; }
}
@media (min-width: 1024px) {
    .adm-kpi-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Utilitaires complémentaires utilisés par l'admin ─── */
.mb-7 { margin-bottom: 1.75rem; }
.sm\:inline { display: inline; }
.sm\:inline-flex { display: inline-flex; }
.sm\:gap-5 { gap: 1.25rem; }
.first\:pt-0:first-child { padding-top: 0; }
.last\:pb-0:last-child { padding-bottom: 0; }
@media (min-width: 1024px) {
    .lg\:items-end { align-items: flex-end; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:max-w-\[15rem\] { max-width: 15rem; }
}
.admin-shell .group:hover .group-hover\:text-primary { color: var(--adm-accent); }
@media (min-width: 768px) {
    .adm-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.file\:text-primary::file-selector-button { color: var(--adm-accent); }
@media (min-width: 640px) {
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:ml-auto { margin-left: auto; }
}
/* Ordre final : 3 colonnes sur tablette, 5 (ou 4) sur grand écran */
@media (min-width: 1024px) {
    .adm-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .adm-kpi-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   UTILITAIRES PUBLICS MANQUANTS DANS LE BUILD TAILWIND
   Le build n'est pas régénéré : on complète ici, à l'identique.
   ═══════════════════════════════════════════════════════════ */

/* Couleurs de marque */
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }
.bg-accent-400  { background-color: var(--color-accent-400); }
.bg-accent-50   { background-color: var(--color-accent-50); }
.bg-emerald-600 { background-color: #059669; }
.hover\:bg-emerald-700:hover { background-color: #047857; }
.dark\:bg-emerald-900\/20:where(.dark, .dark *) { background-color: rgba(6, 78, 59, .2); }
.dark\:border-emerald-800:where(.dark, .dark *) { border-color: #065f46; }
.dark\:text-emerald-300:where(.dark, .dark *) { color: #6ee7b7; }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-100\/80 { color: rgba(219, 234, 254, .8); }
.text-primary-100\/85 { color: rgba(219, 234, 254, .85); }
.text-primary-100\/90 { color: rgba(219, 234, 254, .9); }
.text-gray-200\/90 { color: rgba(229, 231, 235, .9); }

/* Espacements et dimensions */
.px-7 { padding-inline: calc(var(--spacing) * 7); }
.mb-9 { margin-bottom: calc(var(--spacing) * 9); }
.mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); }
.h-1\.5 { height: calc(var(--spacing) * 1.5); }
.w-1\.5 { width: calc(var(--spacing) * 1.5); }
.space-y-3\.5 > :not(:last-child) {
    margin-block-start: 0;
    margin-block-end: calc(var(--spacing) * 3.5);
}
.leading-\[1\.08\] { line-height: 1.08; }
.text-\[11px\] { font-size: 11px; }
.gap-x-4 { column-gap: calc(var(--spacing) * 4); }
.gap-y-1 { row-gap: calc(var(--spacing) * 1); }
.mx-2 { margin-inline: calc(var(--spacing) * 2); }
.pb-1 { padding-bottom: calc(var(--spacing) * 1); }
.pr-1 { padding-right: calc(var(--spacing) * 1); }
.top-4 { top: calc(var(--spacing) * 4); }
.scroll-mt-24 { scroll-margin-top: calc(var(--spacing) * 24); }
@media (min-width: 640px) {
    .sm\:py-12 { padding-block: calc(var(--spacing) * 12); }
}

/* Flou et bordures */
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
    backdrop-filter: var(--tw-backdrop-blur);
}
.hover\:border-gray-200:hover { border-color: var(--color-gray-200); }

/* Variantes responsive */
@media (min-width: 640px) {
    .sm\:items-end { align-items: flex-end; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:text-right { text-align: right; }
}
@media (min-width: 1024px) {
    .lg\:p-14 { padding: calc(var(--spacing) * 14); }
}

/* Mode sombre */
.dark\:bg-accent-900\/20:where(.dark, .dark *) { background-color: rgba(124, 45, 18, .2); }
.dark\:placeholder-dark-300:where(.dark, .dark *)::placeholder { color: var(--color-dark-300); }

/* ═══════════════════════════════════════════════════════════
   ADMIN — SOCLE COMMUN (conteneur, en-tête, boutons, tableaux)
   ═══════════════════════════════════════════════════════════ */

/* ─── Conteneur unique ─── */
.adm-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: 2rem;
}
@media (max-width: 640px) {
    .adm-container { padding: 1.25rem; }
}

/* ─── En-tête de page ─── */
.adm-page-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--adm-ink);
}
.adm-page-sub {
    font-size: .72rem;
    line-height: 1.3;
    color: var(--adm-muted);
    margin-top: .15rem;
}

/* ─── Boutons secondaires / danger / petits ─── */
.adm-btn-secondary {
    background: #fff;
    border: 1px solid var(--adm-border);
    color: #374151;
}
.adm-btn-secondary:hover {
    border-color: #c7d2fe;
    color: var(--adm-accent-dark);
    background: #f8fbff;
}
.adm-btn-danger {
    background: #fff;
    border: 1px solid #fecaca;
    color: #b42318;
}
.adm-btn-danger:hover { background: #fef3f2; border-color: #fca5a5; }
.adm-btn-sm { height: 2rem; padding: 0 .7rem; font-size: .72rem; border-radius: .5rem; }
.adm-btn-icon { width: 2rem; height: 2rem; padding: 0; }

/* ─── Actions de tableau (boutons carrés 32px) ─── */
.adm-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    color: #98a2b3;
    font-size: 1rem;
    transition: background-color .15s ease, color .15s ease;
}
.adm-action:hover { background: #f2f4f7; color: #344054; }
.adm-action-primary:hover { background: #eff6ff; color: var(--adm-accent); }
.adm-action-danger:hover { background: #fef3f2; color: #b42318; }

/* ─── Cartes de stats : icône à droite ─── */
.adm-kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}
.adm-kpi-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.adm-kpi-icon-blue   { background: #eff6ff; color: #2563eb; }
.adm-kpi-icon-green  { background: #ecfdf3; color: #027a48; }
.adm-kpi-icon-amber  { background: #fffaeb; color: #b54708; }
.adm-kpi-icon-red    { background: #fef3f2; color: #b42318; }
.adm-kpi-icon-gray   { background: #f2f4f7; color: #475467; }
.adm-kpi-icon-purple { background: #f4f3ff; color: #5925dc; }

/* ─── Tableaux : 14px, en-têtes 12px, lignes compactes ─── */
.adm-table thead th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #98a2b3;
    padding: .6rem 1.1rem;
}
.adm-table tbody td {
    font-size: .875rem;
    padding: .6rem 1.1rem;
}
.adm-table-title {
    font-size: .875rem;
    font-weight: 500;
    color: #101828;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}
.adm-table-title:hover { color: var(--adm-accent); }
.adm-table-sub { font-size: .7rem; color: var(--adm-faint); margin-top: .15rem; }

/* ─── Filtres segmentés ─── */
.adm-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .15rem;
    padding: .2rem;
    background: #f5f2ef;
    border-radius: .6rem;
}
.adm-segmented > a,
.adm-segmented > button {
    padding: .4rem .75rem;
    border-radius: .45rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--adm-muted);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.adm-segmented > a:hover,
.adm-segmented > button:hover { color: var(--adm-ink); }
.adm-segmented > a.is-active,
.adm-segmented > button.is-active {
    background: #fff;
    color: var(--adm-ink);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .07);
}

/* ─── Champs de formulaire ─── */
.adm-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: #344054;
    margin-bottom: .35rem;
}
.adm-input,
.adm-select,
.adm-textarea {
    width: 100%;
    height: 2.5rem;
    padding: 0 .85rem;
    border: 1px solid var(--adm-border);
    border-radius: .6rem;
    background: #fff;
    font-size: .85rem;
    color: var(--adm-ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.adm-textarea { height: auto; padding: .65rem .85rem; }
.adm-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
}
.adm-input:focus,
.adm-select:focus,
.adm-textarea:focus {
    border-color: #bfdbfe;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.adm-input::placeholder,
.adm-textarea::placeholder { color: var(--adm-faint); }

/* ─── Alertes et encarts ─── */
.adm-alert {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: .65rem;
    font-size: .82rem;
    line-height: 1.45;
    border: 1px solid transparent;
    margin-bottom: 1rem;
}
.adm-alert i { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }
.adm-alert-success { background: #ecfdf3; border-color: #d1fadf; color: #027a48; }
.adm-alert-error   { background: #fef3f2; border-color: #fee4e2; color: #b42318; }
.adm-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    border-radius: .65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: .78rem;
    line-height: 1.5;
    color: #475467;
}
.adm-note i { color: var(--adm-accent); font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }

/* ─── État vide enrichi ─── */
.adm-empty { padding: 2.75rem 1.5rem; text-align: center; }
.adm-empty > i {
    font-size: 2rem;
    color: #d0d5dd;
    display: block;
    margin-bottom: .6rem;
}
.adm-empty-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--adm-ink);
}
.adm-empty-note {
    font-size: .8rem;
    color: var(--adm-muted);
    margin-top: .25rem;
    line-height: 1.45;
}
.adm-empty .adm-btn { margin-top: 1rem; }

/* ─── Accordéon ─── */
.adm-accordion {
    background: #fff;
    border: 1px solid var(--adm-border);
    border-radius: .75rem;
    overflow: hidden;
}
.adm-accordion > summary {
    list-style: none;
    cursor: pointer;
    padding: .9rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--adm-ink);
}
.adm-accordion > summary::-webkit-details-marker { display: none; }
.adm-accordion > summary::after {
    content: "+";
    margin-left: auto;
    color: var(--adm-faint);
    font-weight: 400;
    font-size: 1rem;
}
.adm-accordion[open] > summary::after { content: "−"; }
.adm-accordion > summary i { color: var(--adm-accent); }

/* ─── Modale ─── */
.adm-dialog {
    border: 1px solid var(--adm-border);
    border-radius: 1rem;
    padding: 0;
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .2);
    margin: auto;
}
.adm-dialog::backdrop {
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.adm-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--adm-border-soft);
}
.adm-dialog-title { font-size: .95rem; font-weight: 600; color: var(--adm-ink); }
.adm-dialog-body { padding: 1.25rem 1.35rem; }
.adm-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.35rem;
    border-top: 1px solid var(--adm-border-soft);
    background: #fcfaf9;
}

/* ─── Barre de force du mot de passe ─── */
.adm-strength {
    height: .4rem;
    border-radius: 9999px;
    background: #f2f0ee;
    overflow: hidden;
    margin-top: .5rem;
}
.adm-strength > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 9999px;
    background: #f04438;
    transition: width .2s ease, background-color .2s ease;
}
.adm-check-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .6rem;
}
.adm-check-list li {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: var(--adm-muted);
}
.adm-check-list li i { font-size: .85rem; color: #d0d5dd; }
.adm-check-list li.is-ok { color: #027a48; }
.adm-check-list li.is-ok i { color: #12b76a; }

/* ─── Avatar de tableau ─── */
.adm-avatar-xs {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
    font-weight: 700;
    flex-shrink: 0;
    background: #eff6ff;
    color: #175cd3;
}

/* ─── Grilles de stats 3 / 4 colonnes ─── */
@media (min-width: 1024px) {
    .adm-kpi-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── Ajustements du tableau ─── */
@media (max-width: 640px) {
    .adm-table thead th,
    .adm-table tbody td { padding-left: .85rem; padding-right: .85rem; }
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — COMPOSANTS DE FINITION (en-tête, filtres, listes)
   ═══════════════════════════════════════════════════════════ */

/* ─── En-tête de page dans la barre supérieure ─── */
.adm-topbar-title {
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--adm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-topbar-sub {
    font-size: .7rem;
    line-height: 1.25;
    color: var(--adm-muted);
    margin-top: .12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Barre de filtres / recherche en page ─── */
.adm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    padding: .7rem .9rem;
    background: #fff;
    border: 1px solid var(--adm-border);
    border-radius: .85rem;
    margin-bottom: 1rem;
}
.adm-toolbar .adm-search {
    flex: 1 1 14rem;
    max-width: 20rem;
}
.adm-toolbar .adm-search input { height: 2.4rem; }
.adm-toolbar .adm-segmented { flex: 0 0 auto; }
.adm-toolbar-spacer { flex: 1 1 auto; }

/* ─── Contrôles de tableau ─── */
.adm-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: .3rem;
    border: 1px solid #d0d5dd;
    accent-color: var(--adm-accent);
    cursor: pointer;
    vertical-align: middle;
}
.adm-table .adm-col-check { width: 2.75rem; text-align: center; }
.adm-table .adm-col-actions { text-align: right; white-space: nowrap; }
.adm-table tbody tr.is-selected { background: #f5f9ff; }

.adm-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    margin-bottom: .8rem;
    border: 1px solid #bfdbfe;
    border-radius: .65rem;
    background: var(--adm-accent-soft);
    font-size: .78rem;
    color: #175cd3;
}
.adm-bulkbar strong { font-weight: 600; }
.adm-bulkbar select {
    height: 2rem;
    padding: 0 .5rem;
    border: 1px solid #bfdbfe;
    border-radius: .45rem;
    background: #fff;
    font-size: .75rem;
    color: var(--adm-ink);
}

/* ─── Pagination ─── */
.adm-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .9rem;
}
.adm-pager-info { font-size: .75rem; color: var(--adm-muted); }
.adm-pager-links { display: flex; align-items: center; gap: .3rem; }
.adm-pager-links a,
.adm-pager-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    border-radius: .45rem;
    border: 1px solid var(--adm-border);
    background: #fff;
    font-size: .75rem;
    font-weight: 600;
    color: #475467;
}
.adm-pager-links a:hover { border-color: #bfdbfe; color: var(--adm-accent); }
.adm-pager-links .is-current {
    background: var(--adm-accent);
    border-color: var(--adm-accent);
    color: #fff;
}
.adm-pager-links .is-disabled { opacity: .45; }

/* ─── Statuts avec point coloré ─── */
.adm-status {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    font-size: .74rem;
    font-weight: 600;
    color: #475467;
    white-space: nowrap;
}
.adm-status-dot {
    width: .42rem;
    height: .42rem;
    border-radius: 9999px;
    background: #98a2b3;
    flex-shrink: 0;
}
.adm-status.is-green .adm-status-dot { background: #12b76a; }
.adm-status.is-amber .adm-status-dot { background: #f79009; }
.adm-status.is-red   .adm-status-dot { background: #f04438; }
.adm-status.is-blue  .adm-status-dot { background: #2e90fa; }
.adm-status.is-gray  .adm-status-dot { background: #98a2b3; }
.adm-status.is-green { color: #027a48; }
.adm-status.is-amber { color: #b54708; }
.adm-status.is-red   { color: #b42318; }
.adm-status.is-blue  { color: #175cd3; }

/* ─── Listes compactes (commentaires) ─── */
.adm-list { display: flex; flex-direction: column; }
.adm-list-item {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--adm-border-soft);
    transition: background-color .15s ease;
}
.adm-list-item:last-child { border-bottom: 0; }
.adm-list-item:hover { background: #fcfaf9; }
.adm-list-body { flex: 1; min-width: 0; }
.adm-list-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.adm-list-name { font-size: .82rem; font-weight: 600; color: var(--adm-ink); }
.adm-list-id {
    font-size: .66rem;
    color: var(--adm-faint);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 13rem;
}
.adm-list-meta { font-size: .7rem; color: var(--adm-muted); margin-top: .2rem; }
.adm-list-text {
    font-size: .8rem;
    line-height: 1.5;
    color: #475467;
    margin-top: .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.adm-list-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.adm-avatar-neutral { background: #f2f4f7; color: #98a2b3; }

/* ─── Miniature de cours ─── */
.adm-cover {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .65rem;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: var(--adm-accent);
    font-size: 1.2rem;
}
.adm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Troncature ─── */
.adm-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.adm-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Formulaires alignés ─── */
.adm-btn-match { height: 2.5rem; }
.adm-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
}
@media (min-width: 640px) {
    .adm-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.adm-field { position: relative; }
.adm-field .adm-input { padding-right: 2.6rem; }
.adm-eye-btn {
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    color: var(--adm-faint);
    font-size: 1rem;
}
.adm-eye-btn:hover { background: #f2f4f7; color: #475467; }

/* ─── Page Paramètres ─── */
.adm-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .adm-settings-grid { grid-template-columns: 19rem minmax(0, 1fr); }
}
.adm-account-card { padding: 1.35rem; text-align: center; }
.adm-account-avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 9999px;
    margin: 0 auto .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adm-accent-soft);
    color: var(--adm-accent-dark);
    font-size: 1.1rem;
    font-weight: 700;
}
.adm-account-name { font-size: .95rem; font-weight: 600; color: var(--adm-ink); }
.adm-account-mail { font-size: .75rem; color: var(--adm-muted); margin-top: .15rem; word-break: break-all; }
.adm-account-rows { margin-top: 1.1rem; border-top: 1px solid var(--adm-border-soft); padding-top: .9rem; display: flex; flex-direction: column; gap: .65rem; text-align: left; }
.adm-account-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; font-size: .76rem; }
.adm-account-row span:first-child { color: var(--adm-muted); }
.adm-account-row span:last-child { color: var(--adm-ink); font-weight: 600; text-align: right; }

/* ─── Accès rapides / badges d'info ─── */
.adm-inline-icon { font-size: .95rem; vertical-align: -.12em; }
.adm-note-soft {
    border-radius: .65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: .8rem 1rem;
    font-size: .76rem;
    line-height: 1.5;
    color: #475467;
}

/* ─── Modale : pied de page et fermeture ─── */
.adm-dialog-close {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .45rem;
    color: var(--adm-faint);
    font-size: 1.05rem;
}
.adm-dialog-close:hover { background: #f2f4f7; color: #344054; }
.adm-dialog .adm-input,
.adm-dialog .adm-select { height: 2.45rem; }

/* ─── Etat vide : titre + aide + action ─── */
.adm-empty-title { font-size: .92rem; font-weight: 600; color: #344054; }
.adm-empty-note { font-size: .76rem; color: var(--adm-muted); margin-top: .2rem; line-height: 1.5; }
.adm-empty .adm-btn { margin-top: .85rem; }

/* ─── Responsive topbar ─── */
@media (max-width: 1023px) {
    .adm-topbar-sub { max-width: 11rem; }
}

/* ─── Largeur des formulaires dans le conteneur unique ─── */
.adm-form-narrow { max-width: 56rem; }
.adm-form-wide   { max-width: 72rem; }

/* ═══════════════════════════════════════════════════════════
   PUBLIC — CONTENUS PLUS LARGES ET MENU MOBILE OPAQUE
   ═══════════════════════════════════════════════════════════ */
/* On élargit les conteneurs de toutes les pages publiques,
   sans reconstruire Tailwind. */
.max-w-7xl { max-width: 90rem; }   /* 1280 → 1440 px */
.max-w-5xl { max-width: 76rem; }   /* 1024 → 1216 px */
.max-w-4xl { max-width: 66rem; }   /*  896 → 1056 px */

/* Menu mobile : fond plein, sans transparence, avec séparation nette */
#mobileNav {
    position: relative;
    z-index: 60;
    background-color: #ffffff;
    border-bottom: 1px solid #f1f1f1;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 22px 34px -22px rgba(15, 23, 42, 0.35);
}
.dark #mobileNav {
    background-color: #0f172a;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 34px -22px rgba(0, 0, 0, 0.65);
}

/* Bordures de séparation de la page À propos (grand écran) */
@media (min-width: 1024px) {
    .lg\:border-l { border-left-width: 1px; }
    .lg\:border-t-0 { border-top-width: 0; }
}

/* ─── Lecteur vidéo intégré aux cours ─── */
.course-video summary {
    list-style: none;
    cursor: pointer;
}
.course-video summary::-webkit-details-marker { display: none; }
.course-video summary::marker { content: ""; }
.course-video video {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: .75rem;
    background: #000;
}

/* Compléments utilisés par le mode d'emploi des cours */
.border-primary-100 { border-color: var(--color-primary-100); }
.dark .dark\:text-primary-200 { color: var(--color-primary-200); }

/* ─── Page de lecture d'un chapitre ─── */
.chapter-content {
    color: #374151;
    font-size: 1rem;
    line-height: 1.85;
}
.dark .chapter-content { color: #cbd5e1; }
.chapter-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 1.6rem 0 .6rem;
}
.dark .chapter-content h3 { color: #f8fafc; }
.chapter-content p { margin: 0 0 1rem; }
.chapter-content ul {
    margin: .5rem 0 1.1rem;
    padding-left: 1.2rem;
    list-style: disc;
}
.chapter-content li { margin: .3rem 0; }
.chapter-content strong { color: #111827; font-weight: 700; }
.dark .chapter-content strong { color: #f8fafc; }
.chapter-content > :first-child { margin-top: 0; }
.chapter-content > :last-child { margin-bottom: 0; }
.chapter-video {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: .75rem;
    background: #000;
}

/* Compléments utilisés par la page de lecture d'un chapitre */
.gap-x-2 { column-gap: calc(var(--spacing) * 2); }
.dark .dark\:hover\:bg-dark-100:hover { background-color: var(--color-dark-100); }

/* Zones à compléter dans les pages légales */
.legal-todo {
    display: inline;
    background: #fef3c7;
    color: #92400e;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* Icône décorative à droite d'un champ admin */
.adm-field-icon {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 1.05rem;
}