/* =====================================================================
   Studicap — Design System
   Charte graphique 2022 + golden rules 2026 (container queries, fluid type,
   color-mix, light-dark, oklch).
   ===================================================================== */

/* ----------------------------- Design tokens ----------------------------- */
:root {
    /* Charte officielle Studicap */
    --studi-blue:        #133149;
    --studi-blue-700:    #0e2638;
    --studi-blue-300:    #4a6580;
    --studi-blue-100:    #d1d8e0;
    --studi-gold:        #e9c94c;
    --studi-gold-700:    #c4a72e;
    --studi-grey:        #383838;
    --studi-grey-500:    #6b6b6b;
    --studi-grey-300:    #c8c8c8;
    --studi-grey-100:    #ececec;
    --studi-grey-050:    #f6f6f6;
    --studi-white:       #ffffff;
    --studi-red:         #c0392b;
    --studi-red-bg:      #fdecea;
    --studi-green:       #1e8e3e;
    --studi-green-bg:    #e6f4ea;

    /* Sémantique */
    --color-bg:           var(--studi-grey-050);
    --color-surface:      var(--studi-white);
    --color-text:         var(--studi-grey);
    --color-text-muted:   var(--studi-grey-500);
    --color-border:       var(--studi-grey-300);
    --color-border-soft:  var(--studi-grey-100);
    --color-primary:      var(--studi-blue);
    --color-primary-hover: var(--studi-blue-700);
    --color-accent:       var(--studi-gold);
    --color-accent-hover: var(--studi-gold-700);
    --color-focus-ring:   color-mix(in oklab, var(--studi-blue) 60%, transparent);

    /* Typo : Calibri (texte), Avenir Next LT pro (titres), Vogua (héro) */
    --font-sans: "Avenir Next LT Pro", "Avenir Next", "Calibri",
                 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Calibri", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Vogua", "Avenir Next LT Pro", Georgia, serif;

    /* Fluid type (clamp pour responsive sans media queries) */
    --fs-300: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --fs-400: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --fs-500: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
    --fs-600: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --fs-700: clamp(1.625rem, 1.45rem + 0.9vw, 2.125rem);
    --fs-800: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);

    /* Espaces (échelle modulaire) */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* Ombres */
    --shadow-1: 0 1px 2px rgba(19, 49, 73, .06), 0 1px 1px rgba(19, 49, 73, .04);
    --shadow-2: 0 4px 12px rgba(19, 49, 73, .08), 0 2px 4px rgba(19, 49, 73, .04);
    --shadow-3: 0 16px 40px rgba(19, 49, 73, .12), 0 4px 8px rgba(19, 49, 73, .06);

    /* Transitions */
    --t-fast: 120ms cubic-bezier(.2,.7,.3,1);
    --t-base: 200ms cubic-bezier(.2,.7,.3,1);

    /* Dimensions */
    --container-form: 27rem;          /* largeur idéale champ texte (lisibilité) */
    --brand-ratio: 38.2%;             /* nombre d'or : panneau gauche */
}

/* Dark mode (auto, respecte preference système) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:          #0a1a26;
        --color-surface:     #102434;
        --color-text:        #e7ecf2;
        --color-text-muted:  #9aa9b7;
        --color-border:      #1f3a52;
        --color-border-soft: #18324a;
        --color-primary:     var(--studi-gold);
        --color-primary-hover: var(--studi-gold-700);
    }
}

/* ----------------------------- Reset léger ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-400);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: var(--color-primary); }

/* ----- Garde-fous responsive (app-wide) ----- */
/* Jamais de débordement horizontal dû à des contenus longs. */
pre, code, kbd { overflow-wrap: anywhere; }
/* Conteneur de table scrollable : à mettre autour des <table> larges.
   La table garde ses colonnes lisibles et scrolle horizontalement sur
   mobile au lieu de casser / déborder la page. */
.table-wrap, .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
table { border-collapse: collapse; }
/* Filet de sécurité : une table sans wrapper ne fait pas déborder la page. */
.admin-card table, .card table, .panel table { max-width: 100%; }

/* Focus visible accessible (WCAG 2.4.11 + 2.4.13) */
:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip link (a11y) */
.skip-link {
    position: absolute;
    top: -40px;
    left: var(--sp-2);
    background: var(--color-primary);
    color: #fff;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    z-index: 100;
    transition: top var(--t-base);
}
.skip-link:focus { top: var(--sp-2); }

/* Réduit le mouvement si demandé */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ============================ Auth layout ============================ */
.page-auth { min-height: 100vh; min-height: 100dvh; }

.auth-shell {
    container-type: inline-size;
    container-name: auth;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100dvh;
}

/* Deux colonnes (marque | formulaire) UNIQUEMENT si un panneau de marque
   est présent (login/signup). Le dashboard n'a pas de .auth-brand : il
   reste en pleine largeur au lieu d'être coincé dans la colonne 38,2 %. */
@container auth (min-width: 56rem) {
    .auth-shell:has(.auth-brand) {
        grid-template-columns: var(--brand-ratio) 1fr;
    }
}

/* ----- Panneau de marque (gauche) ----- */
.auth-brand {
    position: relative;
    display: none;
    color: var(--studi-white);
    overflow: hidden;
    isolation: isolate;
}
@container auth (min-width: 56rem) {
    .auth-brand { display: grid; place-items: center; }
}

.auth-brand__bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(circle at 80% 20%, color-mix(in oklab, var(--studi-gold) 25%, transparent), transparent 50%),
        radial-gradient(circle at 20% 80%, color-mix(in oklab, var(--studi-gold) 15%, transparent), transparent 60%),
        linear-gradient(135deg, var(--studi-blue) 0%, var(--studi-blue-700) 100%);
}
.auth-brand__inner {
    position: relative;
    z-index: 1;
    padding: var(--sp-16) var(--sp-12);
    text-align: center;
    max-width: 32rem;
}
.auth-brand__logo {
    width: clamp(12rem, 55%, 22rem);
    height: auto;
    aspect-ratio: 788 / 314;         /* ratio natif du SVG : stable au chargement */
    object-fit: contain;
    margin-inline: auto;
    margin-bottom: var(--sp-6);
}
/* Écrans desktop peu hauts (paysage) : on bride le logo pour ne pas
   pousser la tagline hors du panneau. */
@media (max-height: 34rem) {
    .auth-brand__logo { width: clamp(9rem, 40%, 16rem); margin-bottom: var(--sp-4); }
}
.auth-brand__tagline {
    font-family: var(--font-display);
    font-size: var(--fs-700);
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--studi-white);
    opacity: .92;
    margin: 0;
}
.auth-brand__deco {
    position: absolute;
    bottom: -80px; right: -80px;
    width: 360px; height: 360px;
    color: var(--studi-gold);
    opacity: .5;
    pointer-events: none;
}

/* ----- Panneau formulaire (droite) ----- */
.auth-form {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--color-surface);
    padding: var(--sp-6) var(--sp-5);
}
@container auth (min-width: 56rem) {
    .auth-form { padding: var(--sp-10) var(--sp-12); }
}

.auth-form__inner {
    display: grid;
    gap: var(--sp-6);
    width: 100%;
    max-width: var(--container-form);
    margin: var(--sp-8) auto;
    align-self: center;
    justify-self: center;
}
/* Sur le dashboard (pas de panneau de marque), le contenu admin a besoin
   de largeur : on élargit le conteneur et on l'aligne en haut plutôt que
   centré verticalement. */
.auth-form__inner:has(.dashboard-admin) {
    max-width: 62rem;
    align-self: start;
    margin-block: var(--sp-8);
}

/* Logo affiché sur mobile ET tablette (panneau de marque masqué < 56rem).
   Hauteur fluide : ~44px sur petit smartphone → ~64px sur tablette, sans
   media queries, pour un logo toujours lisible et bien proportionné. */
.auth-form__logo-mobile {
    height: clamp(2.75rem, 2rem + 3vw, 4rem);
    width: auto;
    max-width: 78vw;                 /* garde-fou : jamais de débordement */
    aspect-ratio: 788 / 314;         /* ratio natif du SVG : anti layout-shift */
    object-fit: contain;
    margin: 0 auto var(--sp-2);
}
@container auth (min-width: 56rem) {
    .auth-form__logo-mobile { display: none; }
}
/* Le logo mobile est monochrome bleu (#133149) : illisible sur la surface
   sombre en dark mode. On le rend blanc (logo monochrome → filtre sûr). */
@media (prefers-color-scheme: dark) {
    .auth-form__logo-mobile { filter: brightness(0) invert(1); }
}

.auth-form__header { text-align: left; }
.auth-form__title {
    font-family: var(--font-display);
    font-size: var(--fs-800);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 var(--sp-2);
    color: var(--studi-blue);
    letter-spacing: -.01em;
}
@media (prefers-color-scheme: dark) {
    .auth-form__title { color: var(--studi-white); }
}
.auth-form__subtitle {
    font-size: var(--fs-500);
    color: var(--color-text-muted);
    margin: 0;
}

.auth-form__footer-cta {
    margin: 0;
    font-size: var(--fs-400);
    color: var(--color-text-muted);
}

/* Encart « créer un compte » sous le formulaire de connexion. Fond doré
   léger et bouton doré plein : il doit se repérer au premier coup d'œil
   sans concurrencer le bouton principal « Se connecter » (marine). */
.auth-signup {
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: color-mix(in oklab, var(--studi-gold) 14%, var(--color-surface));
    border: 1.5px solid color-mix(in oklab, var(--studi-gold) 55%, transparent);
    border-radius: var(--radius-lg);
}
.auth-signup__title {
    margin: 0 0 var(--sp-1);
    font-family: var(--font-sans);
    font-size: var(--fs-600);
    font-weight: 700;
    color: var(--studi-blue);
}
.auth-signup__desc {
    margin: 0;
    font-size: var(--fs-400);
    color: var(--color-text);
}
@media (prefers-color-scheme: dark) {
    .auth-signup__title { color: var(--studi-gold); }
}

.auth-form__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font-size: var(--fs-300);
}
.auth-form__footer nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ============================ Form components ============================ */
.form { display: grid; gap: var(--sp-4); }

.field { display: grid; gap: var(--sp-2); }
.field__label {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-300);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text);
}
/* Marqueur de champ obligatoire.
   `abbr` sans soulignement : le titre porte le libellé traduit pour la souris,
   et l'astérisque est en aria-hidden côté template — le lecteur d'écran
   s'appuie sur l'attribut `required` du contrôle, pas sur ce décor. */
.field__required {
    margin-inline-start: .25em;
    color: var(--studi-red);
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: help;
}
@media (prefers-color-scheme: dark) {
    /* Le rouge de marque descend sous le seuil AA sur le fond marine sombre :
       on l'éclaircit plutôt que de perdre le code couleur. */
    .field__required { color: #ff9a8f; }
}

.field__control {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__control:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
    outline: none;
}
.field__icon {
    width: 18px; height: 18px;
    color: var(--color-text-muted);
    margin: 0 var(--sp-3);
    flex-shrink: 0;
}
.field__control input,
.field__control textarea {
    flex: 1;
    width: 100%;
    border: 0;
    background: transparent;
    padding: var(--sp-3) 0;
    font: inherit;
    color: var(--color-text);
    min-width: 0;
    outline: none;
}
.field__control textarea {
    padding: var(--sp-3);
    resize: vertical;
    line-height: 1.5;
}
.field__control input::placeholder,
.field__control textarea::placeholder { color: color-mix(in oklab, var(--color-text-muted) 85%, transparent); }

.field__toggle {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    padding: var(--sp-2);
    margin-right: var(--sp-1);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    transition: color var(--t-fast), background var(--t-fast);
}
.field__toggle:hover { color: var(--color-primary); background: var(--color-border-soft); }
.field__toggle svg { width: 18px; height: 18px; }

.form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: -var(--sp-1);
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--fs-400);
}
.checkbox input {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.checkbox__box {
    width: 20px; height: 20px;
    border: 1.5px solid var(--color-border);
    border-radius: 5px;
    display: grid;
    place-items: center;
    background: var(--color-surface);
    color: transparent;
    transition: all var(--t-fast);
}
.checkbox__box svg { width: 14px; height: 14px; }
/* Note : on utilise `~` plutôt que `+` car Spring Thymeleaf (`th:field`)
   intercale parfois un <input type="hidden" name="_field"> entre la
   checkbox et le .checkbox__box pour gérer le décochage. Le sélecteur
   adjacent `+` ne matcherait plus, alors que `~` (fratrie générale) si. */
.checkbox input:checked ~ .checkbox__box {
    background: var(--studi-blue);
    border-color: var(--studi-blue);
    color: var(--studi-gold);
}
.checkbox input:focus-visible ~ .checkbox__box {
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

/* ============================ Buttons ============================ */
.btn {
    --btn-bg: var(--studi-blue);
    --btn-fg: var(--studi-white);
    --btn-bd: var(--studi-blue);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-500);
    line-height: 1.2;
    letter-spacing: .01em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1.5px solid var(--btn-bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    min-height: 48px;       /* WCAG 2.5.8 target size */
}
.btn svg { width: 18px; height: 18px; transition: transform var(--t-fast); }
.btn:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}
.btn:hover svg { transform: translateX(2px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.btn--block { width: 100%; }

.btn--primary { --btn-bg: var(--studi-blue); --btn-fg: var(--studi-white); --btn-bd: var(--studi-blue); }
.btn--primary:hover { --btn-bg: var(--studi-blue-700); --btn-bd: var(--studi-blue-700); }

/* ============================ Links ============================ */
.link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    border-radius: 2px;
    transition: color var(--t-fast);
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link--strong { font-weight: 600; }
.link--muted  { color: var(--color-text-muted); }

/* ============================ Alerts ============================ */
.alert {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-400);
    border: 1px solid transparent;
}

/* ---------- Modale « session expirée » ---------- */
.session-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: color-mix(in oklab, var(--studi-blue-700) 55%, transparent);
    backdrop-filter: blur(2px);
}
.session-modal[hidden] { display: none; }
.session-modal__dialog {
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: var(--sp-6);
    max-width: 26rem;
    width: 100%;
    text-align: center;
}
.session-modal__icon { color: var(--color-accent); margin-bottom: var(--sp-3); }
.session-modal__title { margin: 0 0 var(--sp-2); font-size: var(--fs-600); }
.session-modal__text { margin: 0 0 var(--sp-5); color: var(--color-text-muted); }
@media (prefers-reduced-motion: no-preference) {
    .session-modal:not([hidden]) .session-modal__dialog {
        animation: session-modal-in .2s ease-out;
    }
    @keyframes session-modal-in {
        from { transform: translateY(8px) scale(.98); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }
}
.alert__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.alert--success { background: var(--studi-green-bg); color: var(--studi-green); border-color: color-mix(in oklab, var(--studi-green) 25%, transparent); }
.alert--error   { background: var(--studi-red-bg);   color: var(--studi-red);   border-color: color-mix(in oklab, var(--studi-red) 25%, transparent); }
.alert--info    { background: #fff8e1; color: #8a6a00; border-color: color-mix(in oklab, var(--studi-gold) 45%, transparent); }
@media (prefers-color-scheme: dark) {
    .alert--info { background: color-mix(in oklab, var(--studi-gold) 12%, transparent); color: var(--studi-gold); }
}
.alert__body    { display: grid; gap: 2px; min-width: 0; }
.alert__title   { font-weight: 600; }
.alert__detail  {
    display: block;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: var(--fs-300);
    color: color-mix(in oklab, currentColor 85%, transparent);
    word-break: break-word;
    overflow-wrap: anywhere;
    margin-top: 4px;
}

/* ============================ Modale documents légaux ============================
   Ouvre mentions légales / confidentialité / CGU sans quitter la page
   (fragments/legal-modal.html + js/legal-modal.js). L'article injecté est
   stylé par legal.css, chargée avec le fragment. */
.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--sp-4);
}
.legal-modal[hidden] { display: none; }
.legal-modal__backdrop {
    position: absolute;
    inset: 0;
    /* Repli rgba d'abord : color-mix() n'existe qu'à partir de Safari 16.2 /
       Chrome 111 — sans repli le fond serait totalement transparent. */
    background: rgba(19, 49, 73, .55);
    background: color-mix(in oklab, var(--studi-blue) 55%, transparent);
    /* Safari iOS ne délivre pas de click délégué sur un div « non
       cliquable » : cursor pointer le rend cliquable au sens WebKit. */
    cursor: pointer;
}
.legal-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(46rem, 100%);
    /* Repli vh d'abord : dvh n'existe qu'à partir de Safari 15.4 — sans
       repli, la déclaration entière serait ignorée et la barre de fermeture
       sortirait de l'écran sur les longs documents. */
    max-height: 85vh;
    max-height: min(85dvh, 60rem);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.legal-modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--color-border-soft);
}
.legal-modal__close {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 48px;  /* WCAG 2.5.8 target size — norme projet, cf. .btn */
    padding: 0 var(--sp-3);
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font: inherit;
    font-size: var(--fs-300);
    font-weight: 600;
}
.legal-modal__close:hover { border-color: var(--color-primary); color: var(--color-primary); }
.legal-modal__fullpage {
    display: inline-flex;
    align-items: center;
    min-height: 48px;  /* WCAG 2.5.8 target size */
}
.legal-modal__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-5) var(--sp-6) var(--sp-8);
}
.legal-modal__loading { color: var(--color-text-muted); }
/* Fond de page figé pendant qu'une modale est ouverte. overflow:hidden ne
   suffit pas sur Safari iOS (rubber-band tactile) : on fige le body en
   position:fixed — legal-modal.js pose top:-scrollY et restaure la position
   du défilement à la fermeture. */
html.legal-modal-open { overflow: hidden; }
html.legal-modal-open body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* ============================ Language switcher ============================ */
.lang-switcher {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: 10;
}
@container auth (min-width: 56rem) {
    .lang-switcher { top: var(--sp-6); right: var(--sp-8); }
}

.lang-switcher__details { position: relative; }
.lang-switcher__details > summary { list-style: none; }
.lang-switcher__details > summary::-webkit-details-marker { display: none; }

.lang-switcher__current {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-400);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    min-height: 40px;
    box-shadow: var(--shadow-1);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lang-switcher__current:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-2);
}
.lang-switcher__flag { font-size: 1.1em; line-height: 1; }
.lang-switcher__chev { width: 12px; height: 12px; color: var(--color-text-muted); transition: transform var(--t-fast); }
.lang-switcher__details[open] .lang-switcher__chev { transform: rotate(180deg); }

.lang-switcher__menu {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    margin: 0;
    padding: var(--sp-2);
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    min-width: 12rem;
    display: grid;
    gap: 2px;
}
.lang-switcher__menu form { margin: 0; }
.lang-switcher__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    text-align: left;
    color: var(--color-text);
    font: inherit;
    min-height: 40px;
    transition: background var(--t-fast), color var(--t-fast);
}
.lang-switcher__item:hover { background: var(--color-border-soft); }
.lang-switcher__item.is-current {
    background: color-mix(in oklab, var(--studi-blue) 8%, transparent);
    color: var(--studi-blue);
    font-weight: 600;
}
@media (prefers-color-scheme: dark) {
    .lang-switcher__item.is-current { color: var(--studi-gold); }
}

/* ============================ Language flags row ============================ */
.lang-flags {
    display: grid;
    gap: var(--sp-2);
    justify-items: center;
    text-align: center;
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--color-border-soft);
}
.lang-flags__label {
    font-size: var(--fs-300);
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: .02em;
}
.lang-flags__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
}
.lang-flags__form { margin: 0; }

.lang-flags__btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 56px;
    min-height: 48px;          /* WCAG 2.5.8 target size */
    padding: var(--sp-2) var(--sp-3);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    font: inherit;
    transition: border-color var(--t-fast), background var(--t-fast),
                transform var(--t-fast), color var(--t-fast);
}
.lang-flags__btn:hover {
    border-color: var(--color-border);
    background: var(--color-border-soft);
    color: var(--studi-blue);
    transform: translateY(-2px);
}
.lang-flags__btn:active { transform: translateY(0); }

.lang-flags__btn.is-current {
    border-color: var(--studi-gold);
    background: color-mix(in oklab, var(--studi-gold) 12%, transparent);
    color: var(--studi-blue);
    cursor: default;
}
.lang-flags__btn.is-current:hover { transform: none; }

.lang-flags__flag {
    font-size: 22px;
    line-height: 1;
    filter: saturate(1.1);
}
.lang-flags__code {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

@media (prefers-color-scheme: dark) {
    .lang-flags__btn.is-current { color: var(--studi-gold); }
}

/* ============================ Compat banner ============================ */
.compat {
    --compat-bg: var(--studi-green-bg);
    --compat-fg: var(--studi-green);
    --compat-bd: color-mix(in oklab, var(--studi-green) 25%, transparent);

    border: 1px solid var(--compat-bd);
    background: var(--compat-bg);
    color: var(--compat-fg);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-400);
    display: grid;
    gap: var(--sp-2);
    transition: opacity var(--t-base);
}
.compat[data-status="partial"] {
    --compat-bg: #fff8e1;
    --compat-fg: #8a6a00;
    --compat-bd: color-mix(in oklab, var(--studi-gold) 50%, transparent);
}
.compat[data-status="block"] {
    --compat-bg: var(--studi-red-bg);
    --compat-fg: var(--studi-red);
    --compat-bd: color-mix(in oklab, var(--studi-red) 30%, transparent);
}
.compat--fade { opacity: 0; }

.compat__head {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
}
.compat__icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.compat__text { display: grid; gap: 2px; }
.compat__title {
    display: block;
    font-weight: 600;
    font-size: var(--fs-400);
    color: inherit;
}
.compat__summary {
    color: color-mix(in oklab, var(--compat-fg) 80%, transparent);
    font-size: var(--fs-300);
    line-height: 1.5;
}

.compat__details { margin-top: var(--sp-1); }
.compat__details > summary { list-style: none; cursor: pointer; outline: none; }
.compat__details > summary::-webkit-details-marker { display: none; }
.compat__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-300);
    font-weight: 600;
    color: inherit;
    padding: 4px 0;
    border-radius: var(--radius-sm);
}
.compat__toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.compat__chev {
    width: 12px; height: 12px;
    transition: transform var(--t-fast);
}
.compat__details[open] .compat__chev { transform: rotate(180deg); }

.compat-list {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: var(--fs-300);
}
.compat-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 0;
    color: var(--studi-grey);
}
.compat-list__sym {
    display: inline-grid;
    place-items: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.compat-list li.is-ok   .compat-list__sym { background: color-mix(in oklab, var(--studi-green) 18%, transparent); color: var(--studi-green); }
.compat-list li.is-warn .compat-list__sym { background: color-mix(in oklab, var(--studi-gold)  35%, transparent); color: #8a6a00; }
.compat-list li.is-err  .compat-list__sym { background: color-mix(in oklab, var(--studi-red)   18%, transparent); color: var(--studi-red); }

@media (prefers-color-scheme: dark) {
    .compat-list li { color: var(--color-text); }
}

/* ============================ Petits écrans ============================ */
@media (max-width: 30rem) {
    .auth-form { padding: var(--sp-4); }
    .auth-form__inner { gap: var(--sp-5); margin: var(--sp-4) auto; }
}

/* ============================================================
   Section ADMIN (dashboard + page email-config)
   ============================================================ */
.dashboard-admin {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px dashed var(--color-border-soft);
    display: grid;
    gap: var(--sp-5);
}
.dashboard-admin__head {
    display: grid;
    gap: var(--sp-1);
}
.dashboard-admin__title {
    font-family: var(--font-sans);
    font-size: var(--fs-500);
    font-weight: 600;
    color: var(--studi-blue);
    margin: 0;
    letter-spacing: .01em;
}
.dashboard-admin__hint {
    color: var(--color-text-muted);
    font-size: var(--fs-300);
    margin: 0;
}

/* ----- Groupes thématiques -----
   Chaque sous-groupe est introduit par un <h3> avec icône, et les
   boutons sont posés dans une grille fluide. Séparation visuelle douce
   (bord supérieur quasi-invisible) pour aérer sans alourdir. */
.dashboard-admin__group {
    display: grid;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
}
.dashboard-admin__group + .dashboard-admin__group {
    border-top: 1px solid var(--color-border-soft);
}
.dashboard-admin__group-title {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-500);        /* agrandi pour la lisibilité */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--studi-blue);        /* marine (au lieu du gris peu contrasté) */
}
.dashboard-admin__group-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    opacity: 1;
    color: var(--studi-blue);
}
/* Le 4e groupe (IA) est mis subtilement en évidence avec une teinte
   gold pour signaler qu'il regroupe les fonctionnalités IA. */
.dashboard-admin__group--ai .dashboard-admin__group-title {
    color: var(--studi-blue);
}
.dashboard-admin__group--ai .dashboard-admin__group-icon {
    opacity: 1;
}

.dashboard-admin__grid {
    display: grid;
    gap: var(--sp-3);
    /* Grille fluide : 1 colonne en mobile, puis autant que la largeur le
       permet (cartes >= 15rem). Plus de saut brutal 1 -> 2. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

@media (prefers-color-scheme: dark) {
    .dashboard-admin__title       { color: var(--studi-gold); }
    .dashboard-admin__group-title { color: var(--color-text-muted); }
    .dashboard-admin__group--ai .dashboard-admin__group-title {
        color: var(--studi-gold);
    }
}

/* Bouton doré (encart « créer un compte »). Doré sur marine : contraste ≈ 8:1 (AAA), dans les deux thèmes. */
.btn--accent {
    --btn-bg: var(--studi-gold);
    --btn-fg: var(--studi-blue);
    --btn-bd: var(--studi-gold);
}
.btn--accent:hover {
    --btn-bg: var(--studi-gold-700);
    --btn-bd: var(--studi-gold-700);
}

/* ----- Boutons secondaire / ghost ----- */
.btn--secondary {
    --btn-bg: var(--studi-white);
    --btn-fg: var(--studi-blue);
    --btn-bd: var(--studi-blue);
}
.btn--secondary:hover {
    --btn-bg: var(--studi-blue);
    --btn-fg: var(--studi-white);
}
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--color-text);
    --btn-bd: var(--color-border);
    box-shadow: none;
}
.btn--ghost:hover {
    --btn-bg: var(--color-border-soft);
    --btn-fg: var(--color-text);
}

/* ============================================================
   Layout admin (page email-config et futures pages admin)
   ============================================================ */
.page-admin {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-bg);
}
.admin-shell {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100dvh;
    container-type: inline-size;
    container-name: admin;
}
.admin-header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-1);
    position: sticky;
    top: 0;
    z-index: 5;
}
.admin-header__brand { display: inline-flex; align-items: center; }
/* Mobile : les quatre colonnes du bandeau (logo, nav, déconnexion, langue)
   dépassent ~392px de largeur intrinsèque sans ces règles — débordement
   horizontal garanti sur iPhone SE/13 mini (375px) et Android 360px.
   On resserre : logo réduit, libellé de déconnexion masqué (icône seule,
   aria-label/title déjà portés par le bouton), titre sur l'échelle du bas. */
@media (max-width: 40rem) {
    .admin-header {
        gap: var(--sp-2);
        padding: var(--sp-3) var(--sp-3);
    }
    .admin-header__brand img,
    .admin-header__brand svg { height: 28px; }
    .admin-header__nav { gap: var(--sp-2); }
    .admin-header__title { font-size: var(--fs-500); }
    .topbar-logout__btn {
        min-width: 48px;
        justify-content: center;
        padding: .4rem;
    }
    .topbar-logout__btn > span {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
/* Logo d'en-tête : hauteur fixe (le SVG officiel a une taille intrinsèque
   ~788x314 ; sans contrainte il occuperait toute la bannière). */
.admin-header__brand img,
.admin-header__brand svg { height: 36px; width: auto; }
.admin-header__nav { display: inline-flex; align-items: center; gap: var(--sp-4); min-width: 0; }
/* Titre de page dans la barre (fragments/admin-header) : le lien retour reste
   générique (« Retour »), c'est ce titre qui porte le contexte. Ellipse plutôt
   que débordement quand le titre est long (traductions DE). */
.admin-header__title {
    font-family: var(--font-sans);
    font-size: var(--fs-600);
    font-weight: 700;
    color: var(--color-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lang-switcher--inline { position: static; }

/* -------------------------- Bouton de déconnexion (en-tête) -------------------- */
.topbar-logout { margin: 0; display: inline-flex; }
.topbar-logout__btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;  /* WCAG 2.5.8 target size — norme projet */
    gap: .4rem;
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-md);
    padding: .4rem .7rem;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.topbar-logout__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.topbar-logout__btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.admin-main {
    padding: var(--sp-6) var(--sp-5);
    display: grid;
    /* minmax(0,1fr) : empêche le "grid blowout" — la colonne peut rétrécir
       sous la largeur intrinsèque de son contenu (tables, codes longs),
       ce qui évite tout débordement horizontal de la page sur mobile. */
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: start;
}
@container admin (min-width: 56rem) {
    .admin-main { padding: var(--sp-10) var(--sp-8); }
}

.admin-card {
    width: 100%;
    max-width: 64rem;
    min-width: 0;                 /* autorise le rétrécissement (anti-blowout) */
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-6);
}
/* Les enfants directs d'une grille/flex doivent pouvoir rétrécir sous leur
   contenu ; sinon un tableau large ou un long code fait déborder la page.
   Indispensable pour que les conteneurs .*-table-wrap scrollent vraiment. */
.admin-card > *,
.admin-status,
.active-panel,
[class*="table-wrap"] { min-width: 0; }
@container admin (min-width: 56rem) {
    .admin-card { padding: var(--sp-10) var(--sp-12); }
}
.admin-card__head { display: grid; gap: var(--sp-2); }
.admin-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-700);
    color: var(--studi-blue);
    margin: 0;
    line-height: 1.15;
}
@media (prefers-color-scheme: dark) {
    .admin-card__title { color: var(--studi-white); }
}
.admin-card__subtitle {
    color: var(--color-text-muted);
    margin: 0;
}

/* ----- Bandeau statut courant ----- */
.admin-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    background: color-mix(in oklab, var(--studi-blue) 4%, transparent);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    font-size: var(--fs-400);
}
.admin-status__label {
    color: var(--color-text-muted);
    font-size: var(--fs-300);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: var(--sp-1);
}
.tag {
    display: inline-block;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-full);
    font-size: var(--fs-300);
    font-weight: 600;
}
.tag--ok   { background: var(--studi-green-bg); color: var(--studi-green); }
.tag--err  { background: var(--studi-red-bg);   color: var(--studi-red); }
.tag--off  { background: var(--studi-grey-100); color: var(--studi-grey-500); }
.tag--soft { background: color-mix(in oklab, var(--studi-blue) 8%, transparent); color: var(--studi-blue); }

/* ============================================================
   Panneau "Configuration ACTIVE" — fiche en tête de page
   ============================================================ */
.active-panel {
    border: 1.5px solid color-mix(in oklab, var(--studi-green) 35%, transparent);
    background: color-mix(in oklab, var(--studi-green) 5%, var(--color-surface));
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-6);
    display: grid;
    gap: var(--sp-4);
    box-shadow: var(--shadow-1);
}
@media (prefers-color-scheme: dark) {
    .active-panel {
        background: color-mix(in oklab, var(--studi-green) 8%, var(--color-surface));
    }
}

.active-panel__head {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}
.active-panel__title-block {
    display: grid;
    gap: var(--sp-2);
    min-width: 0;
}
.active-panel__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: var(--studi-green);
    color: var(--studi-white);
    font-size: var(--fs-300);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px var(--sp-3);
    border-radius: var(--radius-full);
    width: fit-content;
}
.active-panel__pill svg { width: 14px; height: 14px; }
.active-panel__provider {
    font-family: var(--font-display);
    font-size: var(--fs-700);
    color: var(--studi-blue);
    margin: 0;
    line-height: 1.1;
}
@media (prefers-color-scheme: dark) {
    .active-panel__provider { color: var(--studi-white); }
}
.active-panel__head-right {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-1);
    font-size: var(--fs-300);
}
.active-panel__last-test {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-text-muted);
}

.active-panel__grid {
    margin: 0;
    display: grid;
    gap: var(--sp-2) var(--sp-5);
    grid-template-columns: 1fr;
    padding-top: var(--sp-3);
    border-top: 1px dashed color-mix(in oklab, var(--studi-green) 25%, transparent);
}
@container admin (min-width: 56rem) {
    .active-panel__grid { grid-template-columns: 1fr 1fr; }
}
.active-panel__row {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: var(--sp-3);
    align-items: baseline;
    padding: 4px 0;
    font-size: var(--fs-400);
    min-width: 0;
}
.active-panel__row dt {
    font-size: var(--fs-300);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}
.active-panel__row dd {
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    overflow-wrap: anywhere;
    min-width: 0;
}
.active-panel__row code {
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: var(--fs-300);
    padding: 2px 6px;
    background: color-mix(in oklab, var(--studi-grey-100) 60%, transparent);
    border-radius: var(--radius-sm);
    color: var(--studi-blue);
}
@media (prefers-color-scheme: dark) {
    .active-panel__row code {
        background: color-mix(in oklab, var(--studi-white) 8%, transparent);
        color: var(--studi-gold);
    }
}
.active-panel__muted {
    color: var(--color-text-muted);
    font-size: var(--fs-300);
}

/* Titre de section au-dessus du formulaire */
.form-section-title {
    margin: var(--sp-3) 0 0;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--studi-blue);
    font-size: var(--fs-500);
    letter-spacing: .01em;
}
@media (prefers-color-scheme: dark) {
    .form-section-title { color: var(--studi-gold); }
}

/* ----- Form admin ----- */
.form--admin .form__group {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    display: grid;
    gap: var(--sp-4);
    background: color-mix(in oklab, var(--color-surface) 96%, transparent);
}
.form--admin legend {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--studi-blue);
    padding: 0 var(--sp-2);
    font-size: var(--fs-400);
    letter-spacing: .02em;
}
.form__group-hint {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-300);
    color: var(--color-text-muted);
    line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
    .form--admin legend { color: var(--studi-gold); }
}
.form__grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}
@container admin (min-width: 40rem) {
    .form__grid { grid-template-columns: 1fr 1fr; }
}
@container admin (min-width: 64rem) {
    .form__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.field--col-span-2 { grid-column: span 2; }
.field__control--select select {
    flex: 1;
    border: 0;
    background: transparent;
    padding: var(--sp-3);
    font: inherit;
    color: var(--color-text);
    min-width: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.field__hint {
    margin: 0;
    font-size: var(--fs-300);
    color: var(--color-text-muted);
}
.field__error {
    margin: 0;
    font-size: var(--fs-300);
    color: var(--studi-red);
}

/*
 * Confirmation discrete sous un champ (ville completee depuis le code postal).
 * Le vert de la charte tient le contraste AA sur les deux themes, ou
 * --studi-green est deja ajuste. Jamais seul porteur de sens : le message
 * texte dit ce qui s'est passe, la couleur ne fait que l'appuyer (WCAG 1.4.1).
 */
.field__ok {
    margin: 0;
    font-size: var(--fs-300);
    color: var(--studi-green);
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: flex-end;
    align-items: center;
}

/* ----- Form de test inline ----- */
.form--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: end;
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--color-border-soft);
}
.form--inline .field { flex: 1 1 18rem; }
.form--inline .field__label { font-size: var(--fs-300); }

[data-provider-block][hidden],
[data-provider-only][hidden] { display: none !important; }

/* ===================================================================
   Connexion fédérée (SSO Keycloak) sur la page de login
   =================================================================== */
.auth-sso {
    margin-top: 1.25rem;
}
.auth-sso__divider {
    display: flex;
    align-items: center;
    text-align: center;
    gap: .75rem;
    margin: 1rem 0;
    color: var(--c-muted, #6b7785);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.auth-sso__divider::before,
.auth-sso__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-border, #d8dee6);
}
.auth-sso .btn svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* Bandeau de statut « informations à reporter dans Keycloak » (lecture seule) */
.admin-status--muted {
    opacity: .9;
}
.admin-status--muted code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    word-break: break-all;
}