/* =====================================================
   ESFÉ – THÈME INSTITUTIONNEL
   ===================================================== */

/* Variables globales */
:root {
    --esfe-primary: #0F4C75;
    --esfe-dark: #082A3A;
    --esfe-light: #1BA6A6;
    --esfe-accent: #F4A300;
    --esfe-white: #FFFFFF;
    --esfe-bg: #F4F6F9;

    /* Tokens sémantiques dashboard (composants ui) */
    --school-primary: #0F4C75;
    --school-primary-dark: #082A3A;
    --school-primary-soft: #eef4f7;
    --school-secondary: #1BA6A6;
    --school-accent: #F4A300;

    /* Tokens text & surface */
    --text: #123145;
    --muted: #64748b;
    --muted-2: #98a2b3;
    --line: rgba(214, 228, 236, 0.95);
    --border: #d6e4ec;
    --card: #ffffff;
    --card-soft: #f8fbfc;
    --surface: #f4f6f9;
    --surface-0: #ffffff;
    --surface-1: #f8fafc;
    --surface-2: #e8eef3;

    /* Tokens état (succès, danger, avertissement, info) */
    --success: #10b981;
    --success-soft: rgba(16, 185, 129, 0.12);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.12);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.12);
    --info: #0ea5e9;
    --info-soft: rgba(14, 165, 233, 0.12);
}

/* Dark mode preview (harmonisé avec les tokens ci-dessus) */
.dark-preview {
    --surface: #111827;
    --surface-0: #0f172a;
    --surface-1: #1e293b;
    --surface-2: #172033;
    --card: #1f2937;
    --card-soft: #253246;
    --line: #3b4a61;
    --border: #3b4a61;
    --text: #f9fafb;
    --muted: #d7e0ee;
    --muted-2: #aebbd0;
    --school-primary-soft: rgba(29, 181, 176, 0.2);
    --school-secondary: #1db5b0;
    --school-accent: #f39c12;
}


/* ---------------- NAVBAR ---------------- */

.main-header.navbar {
    background-color: var(--esfe-primary) !important;
}

.main-header .navbar-nav .nav-link {
    color: var(--esfe-white) !important;
}


/* ---------------- SIDEBAR ---------------- */

.main-sidebar {
    background-color: var(--esfe-dark) !important;
}

.brand-link {
    background-color: var(--esfe-primary) !important;
    color: var(--esfe-white) !important;
    font-weight: 600;
}

.nav-sidebar .nav-link {
    color: #d6e4f0 !important;
}

.nav-sidebar .nav-link.active {
    background-color: var(--esfe-light) !important;
    color: var(--esfe-white) !important;
}

.nav-sidebar .nav-link:hover {
    background-color: rgba(255,255,255,0.08) !important;
}


/* ---------------- CARDS DASHBOARD ---------------- */

.card {
    border-radius: 10px;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.card-header {
    background-color: var(--esfe-primary);
    color: var(--esfe-white);
    font-weight: 600;
}


/* ---------------- BUTTONS ---------------- */

.btn-primary {
    background-color: var(--esfe-primary) !important;
    border-color: var(--esfe-primary) !important;
}

.btn-primary:hover {
    background-color: var(--esfe-light) !important;
}

.btn-success {
    background-color: var(--esfe-light) !important;
    border-color: var(--esfe-light) !important;
}

.btn-warning {
    background-color: var(--esfe-accent) !important;
    border-color: var(--esfe-accent) !important;
}


/* ---------------- TABLES ---------------- */

.table thead th {
    background-color: var(--esfe-primary);
    color: white;
}

.table-hover tbody tr:hover {
    background-color: rgba(27,166,166,0.08);
}


/* ---------------- FOOTER ---------------- */

.main-footer {
    background-color: var(--esfe-dark);
    color: #cbd5e1;
}


/* ---------------- TITRES ---------------- */

h1, h2, h3, h4 {
    color: var(--esfe-primary);
}


/* ---------------- BADGES ---------------- */

.badge-primary {
    background-color: var(--esfe-primary);
}

.badge-warning {
    background-color: var(--esfe-accent);
}

/* ---------------- RESPONSIVE GLOBAL ---------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

/* Base robuste pour eviter les debordements transversaux */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    line-height: 1.5;
}

/* Utilitaires layout generiques pour sections, formulaires et grilles */
.container,
.container-fluid,
[class*="container-"] {
    width: 100%;
    max-width: 100%;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

[class*="col-"] {
    min-width: 0;
}

input,
select,
textarea,
button {
    min-height: 42px;
}

textarea {
    min-height: 110px;
}

/* Evite les cartes/formulaires trop compacts sur mobile */
.card,
form,
.form-shell,
.sa-form {
    max-width: 100%;
}

/* Rendre les tableaux exploitables sur petits ecrans */
.table,
.data-table {
    width: 100%;
}

.table-responsive,
.overflow-x-auto,
.card-body,
.data-table-wrapper {
    overflow-x: auto;
}

.data-table,
.table {
    min-width: 720px;
}

/* Modales et panneaux: conserver la lisibilite mobile */
.modal,
.modal-dialog,
.modal-content,
[role="dialog"] {
    max-width: 100%;
}

.modal-dialog,
[role="dialog"] {
    margin: 0.75rem;
}

/* Toasts / popups: eviter la coupe sur petits ecrans */
.fixed[class*="max-w"],
#toast-container {
    max-width: calc(100vw - 1rem);
}

/* ---------------- RESPONSIVE GLOBAL ---------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

/* Tables: garde la lisibilite sur mobile sans casser le desktop */
.table-responsive,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1200px) {
    .card-header,
    .card-body,
    .card-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 1024px) {
    table {
        font-size: 0.875rem;
    }

    table th,
    table td {
        white-space: nowrap;
    }

    .main-header,
    .navbar,
    .main-header .navbar-nav {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .card {
        border-radius: 12px;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-left: 0.95rem;
        padding-right: 0.95rem;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        font-size: 16px;
    }

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-warning,
    .btn-outline {
        width: 100%;
        justify-content: center;
    }

    .main-footer {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .card-header,
    .card-body,
    .card-footer {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .main-header .navbar-nav .nav-link {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }
}

/* ---------------- PREMIUM PUBLIC LAYER ---------------- */

:root {
    --esfe-surface: #ffffff;
    --esfe-surface-soft: #f8fbfc;
    --esfe-border-soft: rgba(226, 232, 240, 0.82);
    --esfe-shadow-soft: 0 10px 30px -18px rgba(15, 23, 42, 0.22);
    --esfe-shadow-premium: 0 18px 48px -24px rgba(15, 23, 42, 0.28);
    --esfe-shadow-float: 0 24px 70px -30px rgba(15, 23, 42, 0.35);
    --esfe-shadow-glow: 0 16px 40px -24px rgba(29, 181, 176, 0.45);
    --esfe-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #334155;
    background:
        radial-gradient(circle at top, rgba(29, 181, 176, 0.08), transparent 28%),
        linear-gradient(180deg, #f8fbfc 0%, #f8fafc 28%, #f1f5f9 100%);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-poppins {
    font-family: 'Poppins', 'Roboto', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

.font-roboto {
    font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

p {
    line-height: 1.75;
}

::selection {
    background: rgba(29, 181, 176, 0.2);
    color: #123145;
}

.container-shell {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .container-shell {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-shell {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.section-frame {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.section-frame-sm {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.section-frame-lg {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
    .section-frame {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .section-frame-sm {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .section-frame-lg {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
}

@media (min-width: 1024px) {
    .section-frame {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .section-frame-sm {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .section-frame-lg {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.text-balance {
    text-wrap: balance;
}

.ease-premium {
    transition-timing-function: var(--esfe-ease-premium) !important;
}

.shadow-soft {
    box-shadow: var(--esfe-shadow-soft) !important;
}

.shadow-premium {
    box-shadow: var(--esfe-shadow-premium) !important;
}

.shadow-float {
    box-shadow: var(--esfe-shadow-float) !important;
}

.shadow-glow {
    box-shadow: var(--esfe-shadow-glow) !important;
}

.shadow-outline-soft {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 50px -30px rgba(15, 23, 42, 0.45) !important;
}

.premium-surface,
.premium-card {
    border: 1px solid var(--esfe-border-soft);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
}

.premium-card {
    border-radius: 1.5rem;
    box-shadow: var(--esfe-shadow-soft);
    transition: transform 0.3s var(--esfe-ease-premium), box-shadow 0.3s var(--esfe-ease-premium);
}

.premium-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--esfe-shadow-premium);
}

.premium-link {
    transition: color 0.2s var(--esfe-ease-premium), transform 0.2s var(--esfe-ease-premium);
}

.premium-link:hover {
    color: var(--esfe-light);
}

.scrollbar-thin::-webkit-scrollbar {
    width: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(30, 79, 111, 0.18);
    border-radius: 9999px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 79, 111, 0.28);
}

[data-aos] {
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================
   SITE VITRINE — identité officielle ESFé

   `esfe_theme.css` is also loaded by a legacy workspace shell.  The public
   marker keeps this palette strictly on the public chrome while the Tailwind
   configuration retains fallbacks for authenticated interfaces.
   ===================================================== */

body:has([data-esfe-public-chrome]) {
    --brand-primary: #006bbf;
    --brand-primary-rgb: 0 107 191;
    --brand-primary-light: #098fc7;
    --brand-primary-light-rgb: 9 143 199;
    --brand-primary-dark: #00589d;
    --brand-primary-dark-rgb: 0 88 157;
    --brand-primary-50: #eaf6fc;
    --brand-primary-50-rgb: 234 246 252;
    --brand-primary-100: #d4eef9;
    --brand-primary-100-rgb: 212 238 249;
    --brand-primary-200: #a9dcf3;
    --brand-primary-200-rgb: 169 220 243;
    --brand-primary-300: #7dcaed;
    --brand-primary-300-rgb: 125 202 237;
    --brand-primary-400: #098fc7;
    --brand-primary-400-rgb: 9 143 199;
    --brand-primary-500: #006bbf;
    --brand-primary-500-rgb: 0 107 191;
    --brand-primary-600: #0061ad;
    --brand-primary-600-rgb: 0 97 173;
    --brand-primary-700: #00589d;
    --brand-primary-700-rgb: 0 88 157;
    --brand-primary-800: #00477f;
    --brand-primary-800-rgb: 0 71 127;
    --brand-primary-900: #003660;
    --brand-primary-900-rgb: 0 54 96;
    --brand-on-primary: #ffffff;

    --brand-accent: #1db5b0;
    --brand-accent-rgb: 29 181 176;
    --brand-accent-50: #e8f8f7;
    --brand-accent-50-rgb: 232 248 247;
    --brand-accent-100: #d1f1f0;
    --brand-accent-100-rgb: 209 241 240;
    --brand-accent-200: #a4e2df;
    --brand-accent-200-rgb: 164 226 223;
    --brand-accent-300: #76d4d0;
    --brand-accent-300-rgb: 118 212 208;
    --brand-accent-400: #4bcac6;
    --brand-accent-400-rgb: 75 202 198;
    --brand-accent-500: #1db5b0;
    --brand-accent-500-rgb: 29 181 176;
    --brand-accent-600: #1aa9a4;
    --brand-accent-600-rgb: 26 169 164;
    --brand-accent-700: #169b97;
    --brand-accent-700-rgb: 22 155 151;
    --brand-accent-800: #117c78;
    --brand-accent-800-rgb: 17 124 120;
    --brand-accent-900: #0d5e5b;
    --brand-accent-900-rgb: 13 94 91;
    --brand-accent-light: #4bcac6;
    --brand-accent-light-rgb: 75 202 198;
    --brand-accent-dark: #169b97;
    --brand-accent-dark-rgb: 22 155 151;
    --brand-orange: #f39c12;
    --brand-orange-rgb: 243 156 18;
    --brand-orange-light: #f7b955;
    --brand-orange-light-rgb: 247 185 85;
    --brand-orange-dark: #c97f0d;
    --brand-orange-dark-rgb: 201 127 13;

    --surface-page: #f7f9fa;
    --surface-page-rgb: 247 249 250;
    --surface-muted: #eff4f6;
    --surface-muted-rgb: 239 244 246;
    --surface-card: #ffffff;
    --surface-card-rgb: 255 255 255;
    --border-soft: #dce5e9;
    --border-soft-rgb: 220 229 233;
    --text-primary: #17232d;
    --text-primary-rgb: 23 35 45;
    --text-secondary: #5f6f7a;
    --text-secondary-rgb: 95 111 122;

    /* Compatibility tokens consumed by existing public components. */
    --esfe-primary: var(--brand-primary);
    --esfe-dark: var(--brand-primary-dark);
    --esfe-light: var(--brand-accent);
    --esfe-accent: var(--brand-orange);
    --esfe-white: var(--surface-card);
    --esfe-bg: var(--surface-page);
    --school-primary: var(--brand-primary);
    --school-primary-dark: var(--brand-primary-dark);
    --school-primary-soft: var(--brand-primary-50);
    --school-secondary: var(--brand-accent);
    --school-accent: var(--brand-orange);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --muted-2: #8a9aa5;
    --line: var(--border-soft);
    --border: var(--border-soft);
    --card: var(--surface-card);
    --card-soft: var(--surface-muted);
    --surface: var(--surface-page);
    --surface-0: var(--surface-card);
    --surface-1: var(--surface-page);
    --surface-2: var(--surface-muted);
    --esfe-surface: var(--surface-card);
    --esfe-surface-soft: var(--surface-muted);
    --esfe-border-soft: rgb(var(--border-soft-rgb) / 0.82);
    --esfe-shadow-glow: 0 16px 40px -24px rgb(var(--brand-accent-rgb) / 0.45);
    --ui-focus-color: var(--brand-accent);
    --ui-chart-primary: var(--brand-primary);
    --ui-chart-primary-soft: rgb(var(--brand-primary-rgb) / 0.12);

    color: var(--text-primary);
    background:
        radial-gradient(circle at top, rgb(var(--brand-accent-rgb) / 0.08), transparent 28%),
        linear-gradient(180deg, var(--surface-page) 0%, var(--surface-page) 28%, var(--surface-muted) 100%);
}

/* Tailwind JIT compatibility aliases for public templates using DEFAULT. */
body:has([data-esfe-public-chrome]) .bg-primary,
body:has([data-esfe-public-chrome]) .hover\:bg-primary:hover {
    background-color: var(--brand-primary);
}
body:has([data-esfe-public-chrome]) .hover\:bg-primary-light:hover {
    background-color: var(--brand-primary-light);
}
body:has([data-esfe-public-chrome]) .text-primary {
    color: var(--brand-primary);
}
body:has([data-esfe-public-chrome]) .hover\:text-primary-light:hover {
    color: var(--brand-primary-light);
}
body:has([data-esfe-public-chrome]) .border-primary,
body:has([data-esfe-public-chrome]) .focus\:border-primary:focus {
    border-color: var(--brand-primary);
}
body:has([data-esfe-public-chrome]) .focus\:ring-primary\/20:focus {
    --tw-ring-color: rgb(var(--brand-primary-rgb) / 0.32);
}
body:has([data-esfe-public-chrome]) .bg-primary\/5 { background-color: rgb(var(--brand-primary-rgb) / 0.05); }
body:has([data-esfe-public-chrome]) .bg-primary\/10,
body:has([data-esfe-public-chrome]) .hover\:bg-primary\/10:hover { background-color: rgb(var(--brand-primary-rgb) / 0.1); }
body:has([data-esfe-public-chrome]) .bg-primary\/15,
body:has([data-esfe-public-chrome]) .hover\:bg-primary\/15:hover { background-color: rgb(var(--brand-primary-rgb) / 0.15); }
body:has([data-esfe-public-chrome]) .bg-primary\/30 { background-color: rgb(var(--brand-primary-rgb) / 0.3); }
body:has([data-esfe-public-chrome]) .border-primary\/10 { border-color: rgb(var(--brand-primary-rgb) / 0.1); }
body:has([data-esfe-public-chrome]) .border-primary\/20 { border-color: rgb(var(--brand-primary-rgb) / 0.2); }
body:has([data-esfe-public-chrome]) .shadow-primary\/25 {
    box-shadow:
        0 10px 15px -3px rgb(var(--brand-primary-rgb) / 0.22),
        0 4px 6px -4px rgb(var(--brand-primary-rgb) / 0.12);
}
body:has([data-esfe-public-chrome]) .to-primary\/5 {
    --tw-gradient-to: rgb(var(--brand-primary-rgb) / 0.05) var(--tw-gradient-to-position);
}
body:has([data-esfe-public-chrome]) .from-primary {
    --tw-gradient-from: var(--brand-primary) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--brand-primary-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body:has([data-esfe-public-chrome]) .to-primary-light {
    --tw-gradient-to: var(--brand-primary-light) var(--tw-gradient-to-position);
}
body:has([data-esfe-public-chrome]) .via-primary {
    --tw-gradient-via: var(--brand-primary) var(--tw-gradient-via-position);
    --tw-gradient-stops:
        var(--tw-gradient-from),
        var(--tw-gradient-via),
        var(--tw-gradient-to);
}

/* Existing public templates already use these secondary shade utilities.
   They remain scoped because the shared Tailwind bundle also serves the app. */
body:has([data-esfe-public-chrome]) .bg-secondary-100 { background-color: var(--brand-accent-100); }
body:has([data-esfe-public-chrome]) .bg-secondary-50\/60 { background-color: rgb(var(--brand-accent-50-rgb) / 0.6); }
body:has([data-esfe-public-chrome]) .bg-secondary-500 { background-color: var(--brand-accent-500); }
body:has([data-esfe-public-chrome]) .bg-secondary-500\/10 { background-color: rgb(var(--brand-accent-500-rgb) / 0.1); }
body:has([data-esfe-public-chrome]) .bg-secondary-500\/20 { background-color: rgb(var(--brand-accent-500-rgb) / 0.2); }
body:has([data-esfe-public-chrome]) .text-secondary-400 { color: var(--brand-accent-400); }
body:has([data-esfe-public-chrome]) .text-secondary-600 { color: var(--brand-accent-600); }
body:has([data-esfe-public-chrome]) .from-secondary-400 {
    --tw-gradient-from: var(--brand-accent-400) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--brand-accent-400-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body:has([data-esfe-public-chrome]) .from-secondary-500 {
    --tw-gradient-from: var(--brand-accent-500) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--brand-accent-500-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body:has([data-esfe-public-chrome]) .via-secondary-500 {
    --tw-gradient-via: var(--brand-accent-500) var(--tw-gradient-via-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}
body:has([data-esfe-public-chrome]) .to-secondary-50 { --tw-gradient-to: var(--brand-accent-50) var(--tw-gradient-to-position); }
body:has([data-esfe-public-chrome]) .to-secondary-500 { --tw-gradient-to: var(--brand-accent-500) var(--tw-gradient-to-position); }
body:has([data-esfe-public-chrome]) .to-secondary-500\/5 { --tw-gradient-to: rgb(var(--brand-accent-500-rgb) / 0.05) var(--tw-gradient-to-position); }
body:has([data-esfe-public-chrome]) .to-secondary-600 { --tw-gradient-to: var(--brand-accent-600) var(--tw-gradient-to-position); }

/* =====================================================
   SITE VITRINE — passe premium institutionnelle
   ===================================================== */

body:has([data-esfe-public-chrome]) {
    --esfe-radius: 0.75rem;
    --esfe-shadow-soft: 0 8px 24px -20px rgb(var(--text-primary-rgb) / 0.32);
    --esfe-shadow-premium: 0 16px 34px -24px rgb(var(--text-primary-rgb) / 0.4);
}

body:has([data-esfe-public-chrome]) main {
    background: var(--surface-page);
}

body:has([data-esfe-public-chrome]) :is(.premium-card, .premium-surface) {
    border-color: var(--border-soft);
    border-radius: 0.75rem;
    background: var(--surface-card);
    box-shadow: var(--esfe-shadow-soft);
}

/* Navigation — surface claire pour révéler le logo officiel couleur. */
body:has([data-esfe-public-chrome]) .esfe-public-navbar {
    color: var(--text-primary);
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 0 rgb(var(--text-primary-rgb) / 0.02);
}

body:has([data-esfe-public-chrome]) .esfe-public-navbar.is-scrolled {
    background: var(--surface-page);
    box-shadow: 0 8px 20px -22px rgb(var(--text-primary-rgb) / 0.35);
}

body:has([data-esfe-public-chrome]) .esfe-public-nav {
    color: var(--text-primary);
}

body:has([data-esfe-public-chrome]) .esfe-navbar-logo {
    filter: none;
    height: 60px;
    width: auto;
    max-width: none;
    transform: scale(1.65);
    transform-origin: center;
}

body:has([data-esfe-public-chrome]) .esfe-navbar-logo-link {
    width: 60px;
    height: 60px;
    min-width: 60px;
    overflow: hidden;
    justify-content: center;
}

body:has([data-esfe-public-chrome]) [data-esfe-public-menu] > li > :is(a, button) {
    color: var(--text-primary);
    border-radius: 0.375rem;
}

body:has([data-esfe-public-chrome]) [data-esfe-public-menu] > li > :is(a, button):hover {
    color: var(--brand-primary);
    background: var(--surface-muted);
}

body:has([data-esfe-public-chrome]) .esfe-nav-cta {
    color: var(--surface-card) !important;
    background: var(--brand-accent) !important;
    border: 1px solid var(--brand-accent);
    border-radius: 0.375rem;
    box-shadow: 0 6px 14px -10px rgb(var(--brand-accent-rgb) / 0.65);
}

body:has([data-esfe-public-chrome]) .esfe-nav-cta:hover {
    color: var(--surface-card) !important;
    background: var(--brand-accent-dark) !important;
    border-color: var(--brand-accent-dark);
}

body:has([data-esfe-public-chrome]) :is(.esfe-nav-login, .esfe-nav-toggle) {
    color: var(--text-primary);
    border-radius: 0.375rem;
}

body:has([data-esfe-public-chrome]) :is(.esfe-nav-login, .esfe-nav-toggle):hover {
    color: var(--brand-primary);
    background: var(--surface-muted);
}

body:has([data-esfe-public-chrome]) .esfe-public-mobile-menu {
    color: var(--text-primary);
    background: var(--surface-page);
    border-color: var(--border-soft);
    box-shadow: 0 12px 22px -24px rgb(var(--text-primary-rgb) / 0.35);
}

body:has([data-esfe-public-chrome]) .esfe-public-mobile-menu [data-esfe-public-menu] :is(a, button) {
    color: var(--text-primary);
}

body:has([data-esfe-public-chrome]) .esfe-public-mobile-menu [data-esfe-public-menu] :is(a, button):hover {
    color: var(--brand-primary);
    background: var(--surface-muted);
}

body:has([data-esfe-public-chrome]) .esfe-public-nav :is(a, button):focus-visible,
body:has([data-esfe-public-chrome]) main :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
}

/* Hero — une image institutionnelle lisible sans assombrissement noir excessif. */
body:has([data-esfe-public-chrome]) .esfe-hero-overlay {
    background: linear-gradient(108deg, rgb(var(--brand-primary-900-rgb) / 0.72) 0%, rgb(var(--brand-primary-dark-rgb) / 0.5) 46%, rgb(var(--brand-primary-rgb) / 0.2) 100%);
}

body:has([data-esfe-public-chrome]) .esfe-home-hero .brand {
    max-width: 17ch;
    text-shadow: 0 5px 22px rgb(0 30 55 / 0.3);
}

body:has([data-esfe-public-chrome]) .esfe-hero-era {
    border-radius: 0.375rem;
    background: rgb(var(--surface-card-rgb) / 0.12);
}

body:has([data-esfe-public-chrome]) :is(.esfe-hero-primary, .esfe-hero-secondary) {
    border-radius: 0.5rem;
    min-height: 3rem;
}

body:has([data-esfe-public-chrome]) .esfe-hero-primary {
    background: var(--brand-accent);
    box-shadow: 0 12px 24px -18px rgb(var(--brand-accent-rgb) / 0.8);
}

body:has([data-esfe-public-chrome]) .esfe-hero-primary:hover {
    background: var(--brand-accent-dark);
    transform: translateY(-2px);
}

body:has([data-esfe-public-chrome]) .esfe-hero-secondary {
    border-color: rgb(var(--surface-card-rgb) / 0.72);
    background: rgb(var(--surface-card-rgb) / 0.1);
}

body:has([data-esfe-public-chrome]) .esfe-hero-secondary:hover {
    color: var(--brand-primary-dark);
    border-color: var(--surface-card);
    background: var(--surface-card);
}

/* Sections, cards and controls share a sober academic rhythm. */
body:has([data-esfe-public-chrome]) :is(#a-propos, #pourquoi-esfe, #actualites) {
    background: var(--surface-muted);
}

body:has([data-esfe-public-chrome]) :is(#annexes, #faq) {
    background: var(--surface-card);
}

body:has([data-esfe-public-chrome]) .esfe-public-card {
    border-color: var(--border-soft);
    border-radius: 0.75rem;
    box-shadow: 0 8px 22px -20px rgb(var(--text-primary-rgb) / 0.38);
}

body:has([data-esfe-public-chrome]) .esfe-public-card:hover {
    border-color: rgb(var(--brand-primary-rgb) / 0.48);
    box-shadow: 0 16px 30px -24px rgb(var(--text-primary-rgb) / 0.42);
}

body:has([data-esfe-public-chrome]) .esfe-public-filter {
    border-color: var(--border-soft);
    box-shadow: 0 10px 24px -22px rgb(var(--text-primary-rgb) / 0.42);
}

body:has([data-esfe-public-chrome]) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea) {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--surface-card);
    border-radius: 0.5rem;
}

body:has([data-esfe-public-chrome]) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea):focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgb(var(--brand-accent-rgb) / 0.16);
}

body:has([data-esfe-public-chrome]) #pourquoi-esfe .group:hover img,
body:has([data-esfe-public-chrome]) #actualites .group:hover img {
    transform: scale(1.04);
}

body:has([data-esfe-public-chrome]) #actualites a.group {
    border-color: var(--border-soft);
    box-shadow: 0 8px 20px -20px rgb(var(--text-primary-rgb) / 0.3);
}

body:has([data-esfe-public-chrome]) #actualites a.group:hover {
    border-color: rgb(var(--brand-primary-rgb) / 0.42);
    box-shadow: 0 14px 26px -22px rgb(var(--text-primary-rgb) / 0.38);
}

/* Admissions publiques — mêmes surfaces sobres, sans modifier le tunnel. */
body:has([data-esfe-public-chrome]) .esfe-admission-hero {
    border-bottom: 3px solid var(--brand-accent);
}

body:has([data-esfe-public-chrome]) .esfe-admission-layout .admission-grid {
    border-color: var(--border-soft);
    box-shadow: 0 18px 34px -28px rgb(var(--text-primary-rgb) / 0.38);
}

body:has([data-esfe-public-chrome]) .esfe-admission-layout .admission-form-panel {
    border-radius: 0;
    box-shadow: none;
    background: var(--surface-card);
}

body:has([data-esfe-public-chrome]) .esfe-admission-layout .zoom-slow {
    animation-duration: 30s;
}

/* Footer — a calm, strong institutional surface with the white official logo. */
body:has([data-esfe-public-chrome]) .esfe-public-footer {
    background: #196DA8;
    border-top: 3px solid var(--brand-accent);
}

body:has([data-esfe-public-chrome]) .esfe-public-footer :is(.bg-primary-900, .bg-primary-900\/60) {
    background-color: #196DA8;
}

body:has([data-esfe-public-chrome]) .esfe-public-footer .esfe-footer-logo {
    filter: none;
    width: auto;
    height: clamp(84px, 8vw, 100px);
    max-width: 134px;
}

/* Pages publiques d'authentification : même sceau officiel, sans cadre. */
body:has([data-esfe-public-chrome]) .esfe-auth-logo-link {
    display: flex;
    width: 80px;
    height: 80px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

body:has([data-esfe-public-chrome]) .esfe-auth-logo {
    display: block;
    width: auto;
    height: 80px;
    max-width: none;
    transform: scale(1.65);
    transform-origin: center;
}

@media (max-width: 1023px) {
    body:has([data-esfe-public-chrome]) .esfe-navbar-logo {
        height: 50px;
        max-width: none;
    }

    body:has([data-esfe-public-chrome]) .esfe-navbar-logo-link {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

    body:has([data-esfe-public-chrome]) .esfe-public-mobile-menu {
        max-height: calc(100vh - 72px);
    }

    body:has([data-esfe-public-chrome]) .esfe-admission-layout .admission-form-panel {
        border-radius: 0;
    }
}

@media (max-width: 479px) {
    body:has([data-esfe-public-chrome]) .esfe-navbar-logo {
        height: 44px;
        max-width: none;
    }

    body:has([data-esfe-public-chrome]) .esfe-navbar-logo-link {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    body:has([data-esfe-public-chrome]) .esfe-public-navbar > div > nav > div {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    body:has([data-esfe-public-chrome]) .esfe-home-hero .brand {
        max-width: 100%;
    }
}