/* ===========================================================================
   EduTrack — couche de thème
   ===========================================================================

   Chargée APRÈS `assets/css/style.bundle.css`. Metronic reste le socle: ce
   fichier ne réécrit pas ses composants, il redéfinit ses variables et corrige
   les quelques formes qui distinguent vraiment le produit — la barre latérale,
   l'en-tête, les cartes, les tableaux.

   Pourquoi une couche plutôt qu'une refonte: 368 vues emploient les classes
   Metronic (`card`, `table`, `btn`, `badge`, `menu-link`). Les redéfinir ici
   les fait toutes changer d'allure d'un coup, sans toucher un seul écran
   métier — et sans risquer de casser l'import Excel, les PDF ou le cahier de
   notes en réécrivant leur balisage.

   Organisation:
     1. Jetons          couleurs, rayons, ombres
     2. Fond et texte
     3. Barre latérale
     4. En-tête et bandeau de périmètre
     5. Cartes
     6. Boutons et pastilles
     7. Tableaux
     8. Formulaires
     9. Titre de page et fil d'Ariane
    10. Blocs du tableau de bord
    11. Surfaces claires — vitrine et écrans d'entrée
    12. Thème sombre

   Chaque règle vaut pour les deux thèmes de Metronic: l'application porte un
   sélecteur clair/sombre dans son en-tête, et une couleur définie une seule
   fois disparaît dans l'autre.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Jetons
   ------------------------------------------------------------------------- */

:root {
    /* L'accent. Metronic livre un bleu; l'identité du produit est un
       cramoisi. Les variables `--bs-primary*` sont lues par les boutons, les
       liens, les pastilles, les onglets et les barres de progression: les
       poser ici suffit à faire basculer l'ensemble. */
    --et-accent: #e11d48;
    --et-accent-fonce: #be123c;
    --et-accent-sombre: #9f1239;
    --et-accent-clair: #fff1f3;
    --et-accent-bord: #fecdd3;

    /* Les couleurs de sens. Elles ne servent qu'à dire quelque chose — une
       somme encaissée, un reste dû, une alerte — jamais à décorer. */
    --et-vert: #16a34a;
    --et-vert-clair: #ecfdf3;
    --et-ambre: #d97706;
    --et-ambre-clair: #fffbeb;
    --et-bleu: #2563eb;
    --et-bleu-clair: #eff6ff;
    --et-rouge: #dc2626;
    --et-rouge-clair: #fef2f2;

    /* La barre latérale: un bleu de nuit, pas un gris. */
    --et-nav: #0b1120;
    --et-nav-haut: #0f172a;
    --et-nav-texte: #94a3b8;
    --et-nav-titre: #64748b;
    --et-nav-survol: rgba(255, 255, 255, .06);

    /* Le fond et les surfaces. */
    --et-fond: #f6f7f9;
    --et-surface: #ffffff;
    --et-bord: #eceef2;
    --et-bord-appuye: #dfe3ea;
    --et-texte: #0f172a;
    --et-texte-doux: #64748b;
    --et-texte-tres-doux: #94a3b8;

    /* Rayons et ombres. Trois valeurs, pas davantage: la profusion de rayons
       est ce qui fait qu'une interface ne se ressemble pas d'un écran à
       l'autre. */
    --et-rayon-s: 8px;
    --et-rayon-m: 12px;
    --et-rayon-l: 16px;

    --et-ombre-s: 0 1px 2px rgba(16, 24, 40, .04);
    --et-ombre-m: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --et-ombre-l: 0 4px 16px rgba(16, 24, 40, .08);

    /* Reprise des variables Metronic. */
    --bs-primary: var(--et-accent);
    --bs-primary-rgb: 225, 29, 72;
    --bs-primary-active: var(--et-accent-fonce);
    --bs-primary-light: var(--et-accent-clair);
    --bs-primary-inverse: #ffffff;
    --bs-link-color: var(--et-accent);
    --bs-link-hover-color: var(--et-accent-fonce);
    /* Metronic déclare DEUX fois `.text-primary`: la seconde — celle qui
       l'emporte — lit `--bs-text-primary`, une variable distincte de
       `--bs-primary`. Sans elle, les intitulés de section, les icônes et les
       liens de la vitrine restaient BLEUS alors que tout le reste était passé
       au cramoisi. `.svg-icon-primary` la lit aussi. */
    --bs-text-primary: var(--et-accent);
    --bs-app-bg-color: var(--et-fond);
    --bs-card-border-radius: var(--et-rayon-l);
    --bs-border-radius: var(--et-rayon-s);
}

/* ---------------------------------------------------------------------------
   1 bis. Les largeurs fixes ne dépassent jamais leur conteneur
   -------------------------------------------------------------------------
   Metronic livre des utilitaires `w-<n>px` en `width: … !important`, employés
   dans 135 vues — dont 43 sur des champs de formulaire. Un `w-400px` sur un
   écran de 360 fait sortir le champ de la page: l'audit au navigateur a trouvé
   60 px de débordement sur tous les écrans de liste, et le corps de page étant
   en `overflow-x: clip`, ce qui dépasse est coupé, pas rendu défilable.

   Une largeur fixe est un souhait, pas une obligation: elle reste un plafond.
   Les corriger une par une dans 135 vues ferait 135 occasions de casser une
   mise en page; une règle les borne toutes.

   `min-w-*` est volontairement absent: ces classes forcent la largeur des
   colonnes d'un tableau à l'intérieur d'un `.table-responsive`, et les borner
   supprimerait le défilement horizontal qui les rend lisibles.
   ------------------------------------------------------------------------- */

.w-100px, .w-110px, .w-120px, .w-125px, .w-130px, .w-140px, .w-150px,
.w-175px, .w-180px, .w-200px, .w-250px, .w-275px, .w-300px, .w-375px,
.w-400px, .w-450px, .w-500px, .w-550px, .w-600px, .w-650px, .w-700px,
.w-750px, .w-800px, .w-900px {
    max-width: 100%;
    /* `max-width` seul ne suffisait pas: il se résout sur le conteneur, et le
       conteneur était lui-même dilaté. Un enfant de flex refuse en effet de
       descendre sous la largeur MINIMALE de son contenu — pour un champ de
       400 px, 400 px — tant qu'on ne lui donne pas `min-width: 0`. Toute la
       chaîne restait donc bloquée à 400 px dans une colonne de 320. */
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   2. Fond et texte
   ------------------------------------------------------------------------- */

body {
    background-color: var(--et-fond);
    color: var(--et-texte);
    -webkit-font-smoothing: antialiased;
}

.app-wrapper,
.app-main,
#kt_app_content {
    background-color: var(--et-fond);
}

/* ---------------------------------------------------------------------------
   3. Barre latérale
   ------------------------------------------------------------------------- */

[data-kt-app-layout="dark-sidebar"] .app-sidebar {
    background: linear-gradient(180deg, var(--et-nav-haut) 0%, var(--et-nav) 100%);
    border-right: 0;
}

/* Le bloc du logo: une ligne de séparation à peine visible plutôt qu'une
   bordure franche, qui découpait la colonne en deux. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Les entrées du menu. Le rayon et l'espacement font le plus gros du
   changement d'allure: la version d'origine collait les lignes les unes aux
   autres sur toute la largeur. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link {
    color: var(--et-nav-texte);
    border-radius: var(--et-rayon-m);
    padding-top: .68rem;
    padding-bottom: .68rem;
    margin-bottom: 2px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon {
    color: var(--et-nav-texte);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover:not(.active),
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.hover > .menu-link:not(.active) {
    background-color: var(--et-nav-survol);
    color: #ffffff;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover:not(.active) .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover:not(.active) .menu-icon .svg-icon {
    color: #ffffff;
}

/* L'entrée courante. Un dégradé plutôt qu'un aplat: sur un fond sombre, un
   aplat de la même couleur que le bouton principal se confond avec lui. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link {
    background: linear-gradient(90deg, var(--et-accent) 0%, var(--et-accent-sombre) 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(225, 29, 72, .28);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon .svg-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon .svg-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon .svg-icon {
    color: #ffffff;
}

/* Les sous-menus: retrait marqué, texte plus discret. Sans retrait, un
   sous-menu ouvert ne se distingue pas de la liste principale. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-sub .menu-link {
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .92rem;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-sub .menu-link.active {
    background: rgba(225, 29, 72, .18);
    color: #ffffff;
    box-shadow: none;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-sub .menu-link.active .menu-bullet .bullet {
    background-color: var(--et-accent);
}

/* Les intertitres du menu — « GESTION SCOLAIRE », « GESTION ADMINISTRATIVE ».
   Ce sont eux qui rendent une liste de vingt entrées parcourable. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-content .menu-heading,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-heading {
    color: var(--et-nav-titre);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 1.25rem;
    padding-bottom: .35rem;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .separator {
    border-color: rgba(255, 255, 255, .07);
}

/* Le pied de la colonne: le bouton du guide. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-footer .btn-custom {
    border-radius: var(--et-rayon-m);
    font-weight: 600;
}

/* Colonne repliée: ce qui vit dans le pied doit s'y adapter.

   Metronic ne prévoit cette bascule que pour le bloc du logo
   (`.app-sidebar-logo .app-sidebar-logo-default`) et pour un `.btn-custom`
   porteur de `.btn-label` / `.btn-icon`. Le pied contient désormais un encart
   de texte et le bloc du compte, qui n'entrent dans aucune de ces deux formes:
   à 75 px de large, l'encart n'aurait plus montré qu'un rectangle coloré.

   Deux classes, et les deux variantes de sélecteur — l'application pose
   `data-kt-app-sidebar-hoverable="true"`, mais la règle doit tenir si ce
   réglage change. Au survol, la colonne se rouvre: le contenu complet revient. */
@media (min-width: 992px) {
    /* `!important`: un composant Metronic pose son propre `display` avec une
       spécificité supérieure (`.btn.btn-icon` vaut 0,2,0 contre 0,1,0 pour une
       classe seule) et l'emporterait sur ce masquage. C'est exactement ce qui
       laissait deux boutons d'aide côte à côte dans le pied de la colonne. */
    [data-kt-app-sidebar-minimize="on"]:not([data-kt-app-sidebar-hoverable="true"]) .app-sidebar .et-replie-cache,
    [data-kt-app-sidebar-minimize="on"][data-kt-app-sidebar-hoverable="true"] .app-sidebar:not(:hover) .et-replie-cache {
        display: none !important;
    }

    /* Replié, le bloc du compte se réduit à sa pastille, centrée. */
    [data-kt-app-sidebar-minimize="on"]:not([data-kt-app-sidebar-hoverable="true"]) .app-sidebar .et-compte-nav,
    [data-kt-app-sidebar-minimize="on"][data-kt-app-sidebar-hoverable="true"] .app-sidebar:not(:hover) .et-compte-nav {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------------------------------------------------------------------------
   4. En-tête et bandeau de périmètre
   ------------------------------------------------------------------------- */

.app-header {
    background-color: var(--et-surface);
    border-bottom: 1px solid var(--et-bord);
    box-shadow: none;
}

/* Les listes du périmètre — année, groupe, période, classe — deviennent des
   pastilles. Ce sont les commandes les plus utilisées de l'application: elles
   doivent se voir comme des commandes, pas comme des champs de formulaire
   perdus dans une barre. */
.perimetre-select .select2-selection,
.perimetre-select select.form-select,
.perimetre-select .form-select {
    background-color: #f8f9fb;
    border: 1px solid var(--et-bord);
    border-radius: 10px;
    font-weight: 600;
    font-size: .875rem;
    color: var(--et-texte);
    min-height: 40px;
}

.perimetre-select .select2-selection:hover,
.perimetre-select .form-select:hover {
    border-color: var(--et-bord-appuye);
}

.perimetre-select .select2-container--focus .select2-selection,
.perimetre-select .form-select:focus {
    border-color: var(--et-accent-bord);
    box-shadow: 0 0 0 3px rgba(225, 29, 72, .1);
}

/* Le bandeau « Connecté sur … ».

   Le gabarit posait `overflow: hidden` sur `.menu-title` ET sur les `span`
   qu'elle contient, pour que le nom de l'établissement se termine en points de
   suspension quand la place manque. Mais `« Connecté sur »` est un préfixe de
   longueur FIXE: le rogner n'économise rien, et sur un `span` en ligne
   `text-overflow` ne rend même pas de points de suspension — il coupait
   simplement 5 px du libellé, à toutes les largeurs, sur les 35 écrans que
   l'audit au navigateur a relevés.

   Seul le nom de l'établissement varie: c'est `.menu-title` qui le tronque.

   Le sélecteur porte `.app-header` en plus: la règle du gabarit vit dans une
   balise `<style>` du CORPS de page, donc plus loin que cette feuille. À
   spécificité égale, c'est la dernière qui gagne — il faut être plus précis
   qu'elle, pas seulement après. */
.app-header .entete-etablissement .menu-title > span {
    overflow: visible;
    text-overflow: clip;
}

/* Au-delà de 1200 px la place ne manque plus: le libellé prend la largeur de
   son contenu au lieu d'être tronqué de cinq pixels — un rognage qui
   n'économisait rien et se voyait sur les 37 écrans de l'application. */
@media (min-width: 1200px) {
    .app-header .entete-etablissement .menu-title {
        overflow: visible;
        text-overflow: clip;
        flex: 0 0 auto;
    }
}

/* Les icônes de droite — notifications, messagerie, thème, compte. */
.app-navbar .app-navbar-item > .btn-icon,
.app-navbar .app-navbar-item .btn.btn-icon {
    border-radius: 10px;
}

/* ---------------------------------------------------------------------------
   5. Cartes
   ------------------------------------------------------------------------- */

.card {
    background-color: var(--et-surface);
    border: 1px solid var(--et-bord);
    border-radius: var(--et-rayon-l);
    box-shadow: var(--et-ombre-m);
}

/* Metronic livre plusieurs variantes d'ombre portée sur les cartes: elles se
   contredisaient d'un écran à l'autre. Une seule est retenue. */
.card.card-flush,
.card.shadow-sm,
.card.card-bordered {
    box-shadow: var(--et-ombre-m);
    border: 1px solid var(--et-bord);
}

.card > .card-header {
    border-bottom: 1px solid var(--et-bord);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.card > .card-header .card-title,
.card > .card-header .card-title .card-label {
    font-weight: 700;
    color: var(--et-texte);
    font-size: 1rem;
}

.card > .card-body {
    padding: 1.5rem;
}

/* Sur téléphone, 24 px de marge de chaque côté prennent un sixième de l'écran.
   Le contenu passe avant le blanc. */
@media (max-width: 575.98px) {
    .card > .card-body {
        padding: 1.1rem;
    }

    .card > .card-header {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}

.card > .card-footer {
    border-top: 1px solid var(--et-bord);
}

/* ---------------------------------------------------------------------------
   6. Boutons et pastilles
   ------------------------------------------------------------------------- */

/* `.link-primary` code sa couleur EN DUR (`#009ef7`), sans passer par aucune
   variable: c'est la seule famille que la reprise des jetons n'atteint pas.
   Elle est employée sur tous les écrans d'entrée et dans la vitrine. */
.link-primary {
    color: var(--et-accent) !important;
}

.link-primary:hover,
.link-primary:focus {
    color: var(--et-accent-fonce) !important;
}

.btn {
    border-radius: var(--et-rayon-s);
    font-weight: 600;
}

.btn.btn-primary {
    background-color: var(--et-accent);
    border-color: var(--et-accent);
    color: #ffffff;
}

.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show {
    background-color: var(--et-accent-fonce);
    border-color: var(--et-accent-fonce);
    color: #ffffff;
}

.btn.btn-light-primary {
    background-color: var(--et-accent-clair);
    color: var(--et-accent);
}

.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light-primary:active:not(.btn-active) {
    background-color: var(--et-accent);
    color: #ffffff;
}

.btn.btn-light {
    background-color: #f4f5f7;
    color: var(--et-texte);
    border: 1px solid var(--et-bord);
}

.btn.btn-light:hover:not(.btn-active) {
    background-color: #eceef2;
    color: var(--et-texte);
}

/* Les pastilles d'état. Le poids et le rayon les rendent lisibles à petite
   taille — elles portent souvent le seul mot qui compte de la ligne. */
.badge {
    border-radius: 6px;
    font-weight: 600;
    padding: .35em .6em;
}

.badge.badge-light-primary {
    background-color: var(--et-accent-clair);
    color: var(--et-accent);
}

.badge.badge-light-success {
    background-color: var(--et-vert-clair);
    color: var(--et-vert);
}

.badge.badge-light-warning {
    background-color: var(--et-ambre-clair);
    color: var(--et-ambre);
}

.badge.badge-light-danger {
    background-color: var(--et-rouge-clair);
    color: var(--et-rouge);
}

.badge.badge-light-info {
    background-color: var(--et-bleu-clair);
    color: var(--et-bleu);
}

.badge.badge-primary {
    background-color: var(--et-accent);
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   7. Tableaux
   ------------------------------------------------------------------------- */

/* L'en-tête d'un tableau n'est pas une ligne de données: capitales étroites,
   gris, sur fond neutre. C'est ce qui permet de balayer une colonne sans
   relire l'intitulé à chaque fois. */
.table:not(.table-borderless) > thead > tr > th,
.table > thead > tr > th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--et-texte-doux);
    border-bottom: 1px solid var(--et-bord);
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.table.table-row-dashed > tbody > tr {
    border-bottom-color: var(--et-bord);
}

.table.table-row-bordered > tbody > tr,
.table.table-row-bordered > thead > tr {
    border-bottom-color: var(--et-bord);
}

.table.table-hover > tbody > tr:hover > * {
    background-color: #fafbfc;
}

/* ---------------------------------------------------------------------------
   8. Formulaires
   ------------------------------------------------------------------------- */

.form-control,
.form-select {
    border-radius: var(--et-rayon-s);
    border-color: var(--et-bord-appuye);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--et-accent-bord);
    box-shadow: 0 0 0 3px rgba(225, 29, 72, .1);
}

.form-check-input:checked {
    background-color: var(--et-accent);
    border-color: var(--et-accent);
}

.form-label {
    font-weight: 600;
    color: var(--et-texte);
}

/* Une liste cherchable a la taille d'une liste ordinaire.

   Select2 remplace le `<select>` par un `<span>` dont la hauteur ne vient que
   de son contenu. Un emplacement vide — trente-quatre gabarits ouvrent leur
   liste par une `<option>` sans libellé — donnait un champ de 22 px à côté
   d'un champ natif de 44: c'est ce qu'on voyait sur « Nationalité », à côté de
   « Sexe » resté natif faute d'assez d'options pour devenir cherchable.

   Le texte de remplacement est réparé côté script (`select-recherche`), mais la
   hauteur est posée ici aussi: elle ne doit dépendre d'aucun contenu. On aligne
   la boîte plutôt que d'y ajouter de la marge — deux champs voisins doivent se
   poser sur la même ligne au pixel près. */
.select2-container--bootstrap5 .select2-selection--single.form-select {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 1.55rem + 2px);
}

.select2-container--bootstrap5 .select2-selection--single.form-select .select2-selection__rendered {
    width: 100%;
    line-height: 1.5;
}

/* Les déclinaisons de taille de Metronic gardent la leur. */
.select2-container--bootstrap5 .select2-selection--single.form-select-sm {
    min-height: calc(1.5em + 1.1rem + 2px);
}

.select2-container--bootstrap5 .select2-selection--single.form-select-lg {
    min-height: calc(1.5em + 2rem + 2px);
}

/* ---------------------------------------------------------------------------
   9. Titre de page et fil d'Ariane
   ------------------------------------------------------------------------- */

.app-toolbar {
    background-color: transparent;
}

.page-heading,
.page-title h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--et-texte);
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    color: var(--et-texte-doux);
}

.breadcrumb .breadcrumb-item a:hover {
    color: var(--et-accent);
}

/* ---------------------------------------------------------------------------
   10. Blocs du tableau de bord
   -------------------------------------------------------------------------
   Les seules classes propres au produit. Elles décrivent des formes que
   Metronic n'a pas: la tuile d'indicateur et la vignette d'icône teintée.
   Réutilisables partout — un écran de reporting qui affiche un total y a
   autant droit que l'accueil. */

/* La vignette carrée qui porte l'icône d'un indicateur. */
.et-vignette {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--et-rayon-m);
    flex-shrink: 0;
}

.et-vignette .svg-icon,
.et-vignette i {
    font-size: 1.35rem;
}

.et-vignette-accent { background-color: var(--et-accent-clair); color: var(--et-accent); }
.et-vignette-vert   { background-color: var(--et-vert-clair);   color: var(--et-vert); }
.et-vignette-ambre  { background-color: var(--et-ambre-clair);  color: var(--et-ambre); }
.et-vignette-bleu   { background-color: var(--et-bleu-clair);   color: var(--et-bleu); }
.et-vignette-rouge  { background-color: var(--et-rouge-clair);  color: var(--et-rouge); }

/* Le nombre d'un indicateur. Aligné sur des chiffres de même chasse: sans
   `tabular-nums`, une somme qui change fait sauter tout le bloc.

   La taille suit la largeur de l'écran. À 1,75 rem fixe, « 22 371 750 » fait
   168 px alors qu'une demi-colonne n'en laisse que 96 sur un téléphone de
   360 px — et le corps de page est en `overflow-x: clip`: le nombre était
   COUPÉ, pas rendu défilable. */
.et-chiffre {
    font-size: clamp(1.05rem, 4.4vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--et-texte);
    /* Dernier recours: un nombre plus long que prévu passe à la ligne au lieu
       de sortir de sa carte. */
    overflow-wrap: anywhere;
}

/* Au-delà du téléphone, la place est là: le nombre reprend sa taille pleine
   sans dépendre de la largeur de la fenêtre. */
@media (min-width: 576px) {
    .et-chiffre {
        font-size: 1.75rem;
    }
}

.et-chiffre-vert  { color: var(--et-vert); }
.et-chiffre-ambre { color: var(--et-ambre); }
.et-chiffre-bleu  { color: var(--et-bleu); }
.et-chiffre-rouge { color: var(--et-rouge); }

.et-libelle {
    font-size: .875rem;
    font-weight: 500;
    color: var(--et-texte-doux);
}

.et-precision {
    font-size: .75rem;
    color: var(--et-texte-tres-doux);
    line-height: 1.4;
}

/* L'écart affiché sous un indicateur: « +12 % ce mois ». */
.et-ecart {
    font-size: .75rem;
    font-weight: 600;
}

.et-ecart-hausse { color: var(--et-vert); }
.et-ecart-baisse { color: var(--et-rouge); }

/* -------------------------------------------------------------------------
   Le retour d'une action, en bas de fenêtre

   Il s'affichait en tête du contenu: après un enregistrement fait au bas d'un
   long écran, la confirmation apparaissait hors de vue et l'on ne savait pas
   si le clic avait porté. Il est posé là où le regard se trouve au moment où
   l'on clique.
   ------------------------------------------------------------------------- */

.et-bandeau-alerte {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Au-dessus des fenêtres modales (1055 chez Bootstrap): un enregistrement
       fait depuis une fenêtre recharge la page, et son retour doit se voir
       quoi qu'il arrive. */
    z-index: 1090;
    padding: 0 1rem 1rem;
    /* La page reste cliquable de part et d'autre du bandeau: seul le bandeau
       lui-même capte le clic. Sans cela, une bande invisible barrerait le bas
       de l'écran. */
    pointer-events: none;
}

/* Le bandeau commence après la barre latérale, et suit son repli: la variable
   vaut 75 px quand la colonne est réduite. */
@media (min-width: 992px) {
    .et-bandeau-alerte {
        left: var(--bs-app-sidebar-width, 0px);
        padding-bottom: 1.5rem;
    }
}

.et-bandeau-alerte-interieur {
    max-width: 1320px;
    margin: 0 auto;
    pointer-events: auto;
    /* Plusieurs messages s'empilent, le plus récent en bas — près du regard,
       qui vient de quitter le bouton. */
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.et-alerte {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--et-rayon-l);
    border: 1px solid transparent;
    background: var(--et-surface);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
    /* Le bandeau monte depuis le bas: il ne surgit pas, il arrive. */
    animation: et-alerte-entree .28s ease-out both;
    transition: opacity .24s ease, transform .24s ease;
}

@keyframes et-alerte-entree {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* La sortie: la même chose à l'envers, pour que le message ne s'évanouisse pas
   d'un coup pendant qu'on le lit. */
.et-alerte.et-alerte-sortie {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

/* Un mouvement qui n'apprend rien ne vaut pas d'être imposé à qui le supporte
   mal. Le bandeau reste, il n'est simplement plus animé. */
@media (prefers-reduced-motion: reduce) {
    .et-alerte {
        animation: none;
        transition: none;
    }
}

.et-alerte-corps {
    flex: 1 1 auto;
    min-width: 0;
}

.et-alerte.et-alerte-succes {
    background: var(--et-vert-clair);
    border-color: rgba(22, 163, 74, .28);
}

.et-alerte.et-alerte-echec {
    background: var(--et-rouge-clair);
    border-color: rgba(220, 38, 38, .28);
}

.et-alerte.et-alerte-avis {
    background: var(--et-ambre-clair);
    border-color: rgba(217, 119, 6, .28);
}

.et-alerte.et-alerte-info {
    background: var(--et-bleu-clair);
    border-color: rgba(37, 99, 235, .28);
}

.et-alerte .et-alerte-vignette {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--et-rayon-m);
    font-size: 1.15rem;
    color: #ffffff;
}

.et-alerte-succes .et-alerte-vignette { background: var(--et-vert); }
.et-alerte-echec .et-alerte-vignette  { background: var(--et-rouge); }
.et-alerte-avis .et-alerte-vignette   { background: var(--et-ambre); }
.et-alerte-info .et-alerte-vignette   { background: var(--et-bleu); }

.et-alerte .et-alerte-nature {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .15rem;
}

.et-alerte-succes .et-alerte-nature { color: var(--et-vert); }
.et-alerte-echec .et-alerte-nature  { color: var(--et-rouge); }
.et-alerte-avis .et-alerte-nature   { color: var(--et-ambre); }
.et-alerte-info .et-alerte-nature   { color: var(--et-bleu); }

.et-alerte .et-alerte-texte {
    color: var(--et-texte);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5;
    /* Un message long — une liste de lignes d'import refusées — ne doit pas
       pousser le bandeau sur toute la hauteur de l'écran. */
    max-height: 30vh;
    overflow-y: auto;
    /* Ces messages citent des noms de fichiers et des adresses: une chaîne sans
       espace plus large que l'écran sortait du bandeau, que le corps de page
       coupe au lieu de le rendre défilable. */
    overflow-wrap: anywhere;
}

/* Sur téléphone, le bandeau se resserre: la vignette et le bouton de fermeture
   prennent sinon la moitié de la largeur, et le message tient sur deux mots
   par ligne. */
@media (max-width: 575.98px) {
    .et-bandeau-alerte {
        padding: 0 .75rem .75rem;
    }

    .et-alerte {
        gap: .75rem;
        padding: .85rem;
    }

    .et-alerte .et-alerte-vignette {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .et-alerte .et-alerte-texte {
        font-size: .9rem;
    }
}

.et-alerte .et-alerte-fermer {
    background: transparent;
    border: 0;
    color: var(--et-texte-doux);
    padding: .35rem .5rem;
    line-height: 1;
    flex-shrink: 0;
    border-radius: var(--et-rayon-s);
}

.et-alerte .et-alerte-fermer:hover {
    background: rgba(16, 24, 40, .06);
    color: var(--et-texte);
}

/* La carte d'appel à l'action, au pied de la barre latérale. */
.et-encart-nav {
    background: linear-gradient(160deg, rgba(225, 29, 72, .22) 0%, rgba(159, 18, 57, .12) 100%);
    border: 1px solid rgba(225, 29, 72, .25);
    border-radius: var(--et-rayon-l);
    padding: 1.25rem 1rem;
    text-align: center;
}

.et-encart-nav .et-encart-titre {
    color: #ffffff;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.35;
}

.et-encart-nav .et-encart-texte {
    color: var(--et-nav-texte);
    font-size: .78rem;
    line-height: 1.5;
}

/* L'encart du guide, PLIÉ par défaut: une barre d'une ligne au lieu d'une
   carte qui mangeait la hauteur de la colonne. La pastille dit qu'il y a
   quelque chose derrière; elle bat tant que le guide n'a jamais été ouvert. */
.et-encart-nav.et-encart-plie {
    padding: 0;
    text-align: left;
}

.et-encart-plie .et-encart-entete {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .85rem;
    background: transparent;
    border: 0;
    border-radius: var(--et-rayon-l);
    color: #ffffff;
    font-weight: 600;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
}

.et-encart-plie .et-encart-entete:hover {
    background: rgba(255, 255, 255, .05);
}

.et-encart-plie .et-encart-icone {
    position: relative;
    display: inline-flex;
    font-size: 1.15rem;
    line-height: 1;
}

.et-encart-plie .et-encart-libelle {
    flex-grow: 1;
    min-width: 0;
}

.et-encart-plie .et-encart-chevron {
    font-size: .8rem;
    color: var(--et-nav-texte);
    transition: transform .2s ease;
}

/* Replié, le chevron regarde vers le haut (« ça se déplie »); déplié, il
   se retourne. */
.et-encart-plie.et-ouvert .et-encart-chevron {
    transform: rotate(180deg);
}

.et-encart-plie .et-encart-pastille {
    position: absolute;
    top: -3px;
    right: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--et-accent);
    border: 2px solid var(--et-nav);
    animation: et-pastille-bat 1.8s ease-out infinite;
}

.et-encart-plie.et-vu .et-encart-pastille {
    animation: none;
}

@keyframes et-pastille-bat {
    0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .55); }
    70% { box-shadow: 0 0 0 7px rgba(225, 29, 72, 0); }
    100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .et-encart-plie .et-encart-pastille { animation: none; }
    .et-encart-plie .et-encart-chevron { transition: none; }
}

.et-encart-plie .et-encart-corps {
    display: none;
    padding: 0 1rem 1rem;
    text-align: center;
}

.et-encart-plie.et-ouvert .et-encart-corps {
    display: block;
}

/* Le bloc du compte, tout en bas de la barre latérale. */
.et-compte-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border-radius: var(--et-rayon-m);
    border-top: 1px solid rgba(255, 255, 255, .07);
    text-decoration: none;
}

.et-compte-nav:hover {
    background-color: var(--et-nav-survol);
}

.et-compte-nav .et-compte-initiale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--et-accent) 0%, var(--et-accent-sombre) 100%);
    color: #ffffff;
    font-weight: 700;
    flex-shrink: 0;
}

.et-compte-nav .et-compte-nom {
    color: #ffffff;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.2;
}

.et-compte-nav .et-compte-role {
    color: var(--et-nav-titre);
    font-size: .72rem;
}

/* ---------------------------------------------------------------------------
   11. Surfaces claires — vitrine et écrans d'entrée
   -------------------------------------------------------------------------
   La vitrine et les cinq écrans d'entrée (connexion, inscription, changement
   imposé, mot de passe oublié, nouveau mot de passe) sont les seules pages
   vues par quelqu'un qui n'est pas encore client.

   Elles sont CLAIRES. Le contraste ne vient pas d'un fond noir mais de la
   hiérarchie: un titre bien noir, un texte gris, un seul accent cramoisi, et
   des surfaces qui se distinguent par une ombre plutôt que par une couleur.
   C'est ce qui tient sur un vidéoprojecteur de salle des professeurs comme sur
   un téléphone en plein soleil — ce que le sombre ne fait pas.

   Les noms de classes du gabarit (`landing-dark-bg`, `landing-dark-color`)
   sont conservés: ils sont câblés dans les courbes de Metronic et dans quatre
   sections de la vitrine. Seul ce qu'ils PEIGNENT a changé. */

:root {
    /* Les bandes de la vitrine: le blanc pour respirer, un gris à peine teinté
       pour séparer deux sections sans tirer un trait. */
    --et-bande: #f7f8fa;
    --et-bande-appuyee: #eef1f6;
}

/* Le fond des sections que le gabarit dit « sombres ». Une bande claire, avec
   une lueur cramoisie très diluée: elle donne une source de lumière au lieu
   d'un aplat, sans jamais gêner la lecture.

   La lueur est posée en couches de `background-image` et l'illustration voyage
   en variable (`--et-illustration`, en style en ligne dans la vue): un
   `background-image` en ligne l'emporterait sur cette liste.

   Aucun contexte d'empilement ici — ni `isolation`, ni `transform`: l'en-tête
   collant est un DESCENDANT de cette section et s'y trouverait enfermé, donc
   passerait sous les sections suivantes. */
.landing-dark-bg {
    background-color: var(--et-bande) !important;
    background-image:
        var(--et-illustration, none),
        radial-gradient(900px 520px at 8% -12%, rgba(225, 29, 72, .09), transparent 62%),
        radial-gradient(760px 460px at 96% 4%, rgba(37, 99, 235, .06), transparent 64%);
}

/* La courbe qui sépare deux sections doit être de la MÊME couleur que la bande
   qu'elle prolonge, sinon un liseré apparaît à la jointure. */
.landing-dark-color {
    color: var(--et-bande) !important;
}

/* Les filets du pied de page, écrits pour du blanc sur du noir. */
.landing-dark-border {
    border: 1px solid var(--et-bord) !important;
    background: #ffffff;
}

.landing-dark-separator {
    border-top: 1px solid var(--et-bord);
}

/* L'en-tête de la vitrine. */
.landing-header .menu-link.nav-link {
    color: var(--et-texte-doux);
    position: relative;
    font-weight: 600;
}

.landing-header .menu-link.nav-link:hover {
    color: var(--et-texte);
}

/* L'onglet courant se marque par un filet, pas par une couleur seule: deux
   gris ne se distinguent pas au premier regard. */
.landing-header .menu-link.nav-link.active {
    color: var(--et-texte);
}

@media (min-width: 992px) {
    .landing-header .menu-link.nav-link.active::after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: -2px;
        height: 3px;
        border-radius: 2px;
        background: var(--et-accent);
    }
}

/* L'en-tête collant passe au-dessus de tout le reste. Metronic lui donne
   `z-index: 100`, ce qui suffit tant qu'aucun ancêtre ne crée de contexte
   d'empilement. On le remonte par sécurité. */
[data-kt-sticky-landing-header="on"] .landing-header {
    z-index: 1030;
    border-bottom: 1px solid var(--et-bord);
}

/* Entre 992 et 1200 px, six entrées de menu, un logo et deux boutons ne
   tiennent pas dans un conteneur de 960: la barre débordait. On resserre au
   lieu de masquer — une entrée cachée ne se retrouve pas. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .landing-header .menu-link.nav-link {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        font-size: .95rem;
    }

    .landing-header .menu-link.nav-link.active::after {
        left: .5rem;
        right: .5rem;
    }

    .landing-header .btn {
        padding-left: .7rem !important;
        padding-right: .7rem !important;
        font-size: .85rem;
    }

    /* Le libellé du bouton secondaire cède la place: son icône suffit à le
       reconnaître, et c'est l'inscription qui doit rester lisible. */
    .landing-header .btn.btn-contour-clair .libelle-secondaire {
        display: none;
    }

    .landing-header .btn.btn-contour-clair i {
        margin-right: 0 !important;
    }
}

/* Le bandeau de chiffres de l'accroche. C'était une barre de verre posée sur
   du noir; c'est désormais une carte posée sur la bande claire. */
.bandeau-chiffres {
    background: #ffffff !important;
    border: 1px solid var(--et-bord) !important;
    box-shadow: var(--et-ombre-l);
    backdrop-filter: none !important;
}

.separateur-chiffre {
    border-left: 1px solid var(--et-bord) !important;
}

@media (max-width: 991.98px) {
    .bandeau-chiffres > .col-6:nth-child(n + 3) {
        border-top: 1px solid var(--et-bord) !important;
    }
}

/* -------------------------------------------------------------------------
   Les écrans d'entrée
   ------------------------------------------------------------------------- */

.auth-clair {
    /* Le sol est à peine gris, pas blanc: la carte du formulaire, elle, est
       blanche. Sans cette nuance, elle ne se détachait que par son ombre. */
    background-color: var(--et-fond) !important;
    color: var(--et-texte);
}

/* Le panneau de marque, à gauche.

   Il était une photographie sous un voile cramoisi — dense, pour rester
   lisible, au prix de paraître sombre et un peu lourd en ouverture d'un
   produit. Il est maintenant CLAIR comme le reste de l'écran: le même sol que
   la vitrine, deux lueurs très diluées pour donner une source de lumière (le
   même principe que `.landing-dark-bg`). Une colonne de texte seule, sans
   illustration: une photo posée entre le texte et la carte du formulaire se
   lisait comme un bloc flottant au milieu de deux autres, jamais comme une
   photo intégrée au panneau. */
.auth-panneau {
    position: relative;
    background-color: var(--et-bande);
    background-image:
        radial-gradient(720px 480px at 6% -8%, rgba(225, 29, 72, .10), transparent 60%),
        radial-gradient(640px 420px at 100% 100%, rgba(37, 99, 235, .07), transparent 62%);
    border-right: 0;
}

/* Le trait rouge sous l'accroche: un repère de marque discret, plutôt qu'un
   second cramoisi qui aurait fait doublon avec l'accent du titre. */
.auth-accroche-trait {
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--et-accent);
    margin: .9rem 0 1.4rem;
}

/* La note manuscrite: une touche chaleureuse, pas un argument de plus — elle
   n'a donc pas la même police que le reste, ni la même rigueur d'alignement. */
.auth-note-manuscrite {
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    color: var(--et-texte-doux);
    line-height: 1.3;
    transform: rotate(-2deg);
}

.auth-note-manuscrite .auth-note-trait {
    display: block;
    width: 120px;
    height: 3px;
    border-radius: 2px;
    background: var(--et-accent-bord);
    margin-top: .4rem;
}

/* Le logo n'a plus besoin d'étiquette blanche: il est déjà sur du clair. */
.auth-panneau .logo-panneau {
    padding: 0;
}

/* La carte du formulaire. Sur du clair, c'est l'ÉLÉVATION qui la détache — un
   liseré seul la ferait passer pour un cadre de tableau. */
.auth-carte {
    background: #ffffff;
    border: 1px solid var(--et-bord);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 18px 48px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .04);
}

@media (max-width: 575.98px) {
    .auth-carte {
        padding: 1.75rem 1.25rem;
        border-radius: 16px;
    }
}

/* La pastille ronde en tête de carte: elle dit d'un coup d'œil de quel écran
   il s'agit — un cadenas pour entrer, une enveloppe pour un lien. */
.auth-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* `--et-accent-fonce` plutôt que `--et-accent`: un départ moins vif pour
       ce disque qui ouvre la carte, et une ombre teintée resserrée plutôt
       qu'un halo — même intention, moins criante. */
    background: linear-gradient(140deg, var(--et-accent-fonce) 0%, var(--et-accent-sombre) 100%);
    color: #ffffff;
    font-size: 1.6rem;
    box-shadow: 0 0 0 8px var(--et-accent-clair), 0 8px 16px rgba(190, 18, 60, .18);
}

/* L'icône de la pastille. Metronic impose aux `<i>` une taille propre (13 px),
   plus spécifique que l'héritage: le cadenas se perdait au milieu d'un disque
   de 64. La couleur est posée par la même occasion. */
.auth-pastille i {
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 1;
}

.auth-clair h1,
.auth-clair h2,
.auth-clair h3,
.auth-clair .auth-titre {
    color: var(--et-texte);
}

.auth-clair .auth-sous-titre {
    color: var(--et-texte-doux);
}

.auth-clair .form-label {
    color: var(--et-texte);
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.auth-clair .form-control,
.auth-clair .form-select {
    background-color: #ffffff;
    border: 1px solid var(--et-bord-appuye);
    color: var(--et-texte);
    min-height: 48px;
    border-radius: 10px;
}

.auth-clair .form-control::placeholder {
    color: var(--et-texte-tres-doux);
}

.auth-clair .form-control:focus,
.auth-clair .form-select:focus {
    /* Un champ porte souvent `autofocus` sur ces écrans: le contour rouge se
       voit donc dès le chargement, avant toute saisie — une teinte adoucie
       évite qu'il se lise comme une erreur. */
    border-color: #c2536b;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, .10);
}

/* Chrome et les gestionnaires de mots de passe (1Password, etc.) imposent
   leur propre fond — jaune pâle ou lavande — dès qu'un champ est reconnu
   comme identifiant ou mot de passe, par-dessus tout ce que ce fichier
   déclare. Le déjouer exige cette astuce précise: un `box-shadow` intérieur
   de la couleur voulue, assez large pour recouvrir tout le champ, plutôt
   qu'un `background` qui n'a aucune prise sur `:autofill`. La transition à
   5000s sur `background-color` bloque l'animation que Chrome applique au
   moment du remplissage, seul autre moyen par lequel la teinte reviendrait. */
.auth-clair .form-control:-webkit-autofill,
.auth-clair .form-control:-webkit-autofill:hover,
.auth-clair .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--et-texte);
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s;
}

.auth-clair .form-text {
    color: var(--et-texte-doux);
}

/* La case à cocher d'habilitation et son libellé. Metronic les rend en gris
   très clair, hérité de son gabarit: sur du blanc, la phrase que l'on certifie
   en signant devenait la moins lisible de la page. */
.auth-clair .form-check-label {
    color: var(--et-texte-doux);
}

.auth-clair .form-check-input {
    border-color: var(--et-bord-appuye);
}

/* L'intitulé d'un groupe de champs. Metronic propose `separator-content`, mais
   son filet est calculé pour un autre gabarit. Un filet à gauche du titre
   suffit à séparer sans couper la carte en tranches. */
.auth-clair .et-groupe-titre {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--et-texte-doux);
    margin: 2rem 0 1.25rem;
}

.auth-clair .et-groupe-titre::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--et-bord);
}

/* Le premier groupe suit immédiatement l'en-tête de la carte: il n'a pas à
   s'en écarter davantage que les suivants ne s'écartent l'un de l'autre. */
.auth-clair .et-groupe-titre:first-of-type {
    margin-top: .5rem;
}

.auth-clair .form-label.required::after {
    color: var(--et-accent);
}

/* L'icône posée dans le champ — enveloppe, cadenas. Le champ lui laisse la
   place par un retrait, sinon le texte saisi passe dessous. */
.auth-champ {
    position: relative;
}

.auth-champ .auth-champ-icone {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--et-texte-tres-doux);
    pointer-events: none;
    line-height: 1;
    z-index: 2;
}

.auth-champ .auth-champ-icone ~ .form-control {
    padding-left: 2.9rem;
}

.auth-champ .auth-bascule {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--et-texte-tres-doux);
    padding: .35rem .5rem;
    line-height: 1;
    z-index: 2;
}

.auth-champ .auth-bascule:hover {
    color: var(--et-texte);
}

.auth-clair .btn.btn-primary {
    min-height: 48px;
    border-radius: 10px;
    /* Une ombre plus discrète: le bouton reste l'accent le plus franc de
       l'écran, mais son ombre n'a pas à crier aussi fort que lui. */
    box-shadow: 0 6px 14px rgba(225, 29, 72, .14);
}

.auth-clair .alert {
    border: 1px solid var(--et-bord);
    background: var(--et-fond);
    color: var(--et-texte);
    border-radius: 12px;
}

.auth-clair .alert.alert-danger {
    border-color: rgba(220, 38, 38, .28);
    background: var(--et-rouge-clair);
}

.auth-clair .alert.alert-success {
    border-color: rgba(22, 163, 74, .28);
    background: var(--et-vert-clair);
}

/* -------------------------------------------------------------------------
   Le bouton à contour, commun à la vitrine et aux écrans d'entrée
   -------------------------------------------------------------------------
   Il s'appelait « clair » parce qu'il était clair SUR DU SOMBRE. Le nom est
   conservé — il est employé dans six endroits — mais il porte désormais un
   contour gris sur fond blanc, et l'accent au survol. */

/* IMPORTANT: la balise doit porter `btn-contour-clair` ET `btn-outline`.
   Metronic pose `border: 0` sur tout `.btn` qui n'est pas `.btn-outline`, par
   une règle en chaîne de `:not()` dont la spécificité dépasse tout ce qu'on
   peut écrire ici — sans la classe, la bordure ci-dessous est simplement
   ignorée et le bouton redevient le bloc blanc qu'on cherchait à éviter. La
   classe rétablit aussi la compensation de remplissage: un bouton bordé et un
   bouton plein gardent alors la MÊME hauteur, côte à côte.
   `CoquilleTest::test_le_bouton_a_contour_porte_sa_classe_de_bordure` le garde. */
.btn.btn-contour-clair {
    /* Un fond blanc et un contour franc, pas un contour transparent: sur une
       bande déjà très claire, un liseré à peine gris ne se lisait pas comme un
       bouton — « Voir les forfaits » passait pour du texte. */
    background: #ffffff;
    border: 1px solid var(--et-bord-appuye);
    color: var(--et-texte);
    border-radius: 10px;
    font-weight: 600;
    box-shadow: var(--et-ombre-s);
}

.btn.btn-contour-clair:hover,
.btn.btn-contour-clair:focus,
.btn.btn-contour-clair:active {
    background: var(--et-accent-clair);
    border-color: var(--et-accent-bord);
    color: var(--et-accent);
}

/* -------------------------------------------------------------------------
   Le panneau de marque, commun aux cinq écrans d'entrée
   ------------------------------------------------------------------------- */

/* Le titre en deux tons: la seconde moitié en cramoisi. C'est ce qui fait
   qu'une accroche se lit en une fois plutôt que mot à mot. */
.auth-accroche {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--et-texte);
}

.auth-accroche .auth-accroche-accent {
    /* Toujours sur sa propre ligne, jamais laissé au hasard du retour à la
       ligne: selon la longueur de la première moitié, le navigateur coupait
       tantôt après « école, », tantôt en plein milieu de la seconde («
       ...le / jour ») — le modèle fourni coupe systématiquement à la
       jointure des deux. */
    display: block;
    color: var(--et-accent);
}

@media (min-width: 1200px) {
    .auth-accroche {
        font-size: 2.5rem;
    }
}

/* Un argument: une vignette teintée, et deux lignes dont la première porte
   le mot qui compte. */
.et-argument {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

/* Un disque, pas un carré arrondi: repris du gabarit fourni, mais dans le
   SEUL accent du produit — un bleu ou un vert y auraient introduit une
   deuxième et une troisième couleur là où la doctrine du site n'en tolère
   qu'une (les deux verts déjà en place ailleurs sont des exceptions
   nommées: « compris », « authentique » — pas une palette à égalité). */
.et-argument .et-argument-vignette {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--et-accent-clair);
    border: 1px solid var(--et-accent-bord);
    color: var(--et-accent);
    box-shadow: none;
}

.et-argument .et-argument-texte {
    color: var(--et-texte-doux);
    font-size: .95rem;
    line-height: 1.5;
}

.et-argument .et-argument-texte strong {
    color: var(--et-texte);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   11bis. Le parcours d'une fiche
   -------------------------------------------------------------------------
   Une étape est une LIGNE, pas une carte: empilées, les cartes donnaient dix
   boîtes de même poids où rien ne se lisait avant le reste. La ligne garde le
   numéro, l'intitulé et le bouton sur un seul axe, et l'œil descend.

   Tout est écrit en jetons (`--et-*`), redéfinis par le thème sombre en fin de
   feuille: une couleur posée en dur ici disparaîtrait dans l'autre thème. */

.et-etape {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem .25rem;
    border-bottom: 1px solid var(--et-bord);
}

.et-etape:last-child {
    border-bottom: 0;
}

/* Le numéro porte l'état. Une pastille pleine pour ce qui reste à faire, une
   pastille discrète pour ce qui est fait: c'est le contraste, et non un
   libellé, qui fait remonter les étapes en attente à la première lecture. */
.et-etape-numero {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    background: var(--et-bord);
    color: var(--et-texte-doux);
    margin-top: 2px;
}

.et-etape-a_faire .et-etape-numero {
    background: var(--et-accent);
    color: #fff;
}

.et-etape-fait .et-etape-numero {
    background: var(--et-vert-clair);
    color: var(--et-vert);
}

.et-etape-corps {
    flex: 1 1 auto;
    min-width: 0;
}

.et-etape-titre {
    font-weight: 600;
    color: var(--et-texte);
    line-height: 1.35;
}

/* La raison du geste. Elle n'est pas une infobulle: une infobulle suppose un
   survol, que le doigt ne produit pas, et se referme dès qu'on la lit. */
.et-etape-aide {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--et-texte-doux);
    margin-top: .15rem;
}

/* Ce que la fiche SAIT: le reste à payer, le nombre de documents, la date du
   dernier versement. C'est ce chiffre qui évite d'ouvrir la fenêtre pour rien. */
.et-etape-detail {
    font-size: .8rem;
    color: var(--et-texte-tres-doux);
    margin-top: .3rem;
}

.et-etape-bouton {
    flex: 0 0 auto;
    align-self: center;
    min-width: 110px;
}

@media (max-width: 575.98px) {
    /* Sur téléphone, le bouton passe sous le texte et prend toute la largeur:
       à 360 px, un bouton de 110 px à droite d'un intitulé le comprimait sur
       quatre lignes. */
    .et-etape {
        flex-wrap: wrap;
    }

    /* Le numéro reste sur la ligne de l'intitulé. Sans base explicite, le
       corps réclamait sa largeur de contenu et renvoyait le numéro seul sur
       une ligne, où il ne désigne plus rien. */
    .et-etape-corps {
        flex: 1 1 150px;
    }

    .et-etape-bouton {
        width: 100%;
        margin-left: calc(30px + 1rem);
        width: calc(100% - 30px - 1rem);
    }
}

/* La zone sensible: ce qui ne se rattrape pas. Elle est à part, en bas, et
   son cadre le dit — sans quoi « Supprimer » se lit comme les autres. */
.et-parcours-sensible {
    border: 1px dashed var(--et-accent-bord) !important;
}

.et-parcours-sensible .card-title {
    color: var(--et-accent);
}

/* ---------------------------------------------------------------------------
   11ter. Les panneaux de configuration
   -------------------------------------------------------------------------
   Neuf panneaux écrits neuf fois: chacun sa taille de titre, son compteur, ses
   icônes recopiées à la main — une punaise, un crayon jaune, une corbeille
   rouge, de tailles différentes d'un panneau à l'autre. Trois couleurs vives
   par ligne sur neuf panneaux, et l'œil ne trouve plus ce qui compte.

   Les actions prennent donc la même forme, discrète, et ne se colorent qu'au
   survol — sauf ce qui retire, en rouge, parce que là la couleur informe. */

.et-param-ligne {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem .25rem;
    border-bottom: 1px solid var(--et-bord);
}

.et-param-ligne:last-child {
    border-bottom: 0;
}

.et-param-corps {
    flex: 1 1 auto;
    min-width: 0;
}

.et-param-titre {
    font-weight: 600;
    color: var(--et-texte);
    line-height: 1.35;
}

.et-param-detail {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--et-texte-doux);
    margin-top: .15rem;
}

.et-param-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Une action est d'abord un contour discret: elle ne réclame l'attention
   qu'au survol. Sans cela, six lignes de réglages font dix-huit taches de
   couleur, et le contenu passe derrière ses propres boutons. */
.et-param-action {
    width: 32px;
    height: 32px;
    color: var(--et-texte-doux);
    background: transparent;
    border: 1px solid transparent;
    position: relative;
}

.et-param-action:hover,
.et-param-action:focus {
    color: var(--et-accent);
    background: var(--et-accent-clair);
    border-color: var(--et-accent-bord);
}

.et-param-action-danger:hover,
.et-param-action-danger:focus {
    color: var(--et-rouge);
    background: var(--et-rouge-clair);
    border-color: var(--et-rouge);
}

/* Le compteur d'une action — le nombre de périodes d'une année, par exemple.
   Il tenait dans une pastille flottante posée sur l'icône, qui débordait de la
   ligne; il se pose maintenant dans l'angle du bouton. */
.et-param-compteur {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--et-accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* L'intitulé cède la place au bouton plutôt que de le renvoyer à la ligne:
   sans `min-width: 0`, la phrase d'aide imposait sa largeur et poussait le
   compteur et « Ajouter » sous le titre. */
.et-panneau-param .card-header {
    gap: .75rem;
    /* Metronic laisse `flex-wrap: wrap` sur l'en-tête d'une carte: la phrase
       d'aide poussait alors le compteur et « Ajouter » sous le titre, et
       l'en-tête faisait deux fois sa hauteur. */
    flex-wrap: nowrap;
}

.et-panneau-param .card-header > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.et-panneau-param .card-toolbar {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .et-panneau-param .card-header {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    /* Sur téléphone les actions passent sous l'intitulé: à 360 px, quatre
       boutons à droite d'un intitulé le comprimaient sur quatre lignes. */
    .et-param-ligne {
        flex-wrap: wrap;
    }

    .et-param-corps {
        flex: 1 1 140px;
    }
}

/* ---------------------------------------------------------------------------
   12. Thème sombre
   -------------------------------------------------------------------------
   L'en-tête porte un sélecteur clair/sombre. Une couleur définie une seule
   fois plus haut disparaîtrait ici: les surfaces, les bordures et le texte
   sont donc redéfinis, l'accent restant le même dans les deux thèmes. */

[data-bs-theme="dark"] {
    --et-fond: #12121e;
    --et-surface: #1b1b29;
    --et-bord: #2b2b40;
    --et-bord-appuye: #33334a;
    --et-texte: #e6e6ef;
    --et-texte-doux: #9a9ab0;
    --et-texte-tres-doux: #6d6d85;

    --et-accent-clair: rgba(225, 29, 72, .16);
    --et-vert-clair: rgba(22, 163, 74, .16);
    --et-ambre-clair: rgba(217, 119, 6, .16);
    --et-bleu-clair: rgba(37, 99, 235, .16);
    --et-rouge-clair: rgba(220, 38, 38, .16);

    --et-ombre-s: none;
    --et-ombre-m: none;
    --et-ombre-l: 0 4px 16px rgba(0, 0, 0, .3);

    --bs-app-bg-color: var(--et-fond);
}

[data-bs-theme="dark"] .perimetre-select .select2-selection,
[data-bs-theme="dark"] .perimetre-select .form-select {
    background-color: #22223a;
    color: var(--et-texte);
}

[data-bs-theme="dark"] .btn.btn-light {
    background-color: #22223a;
    color: var(--et-texte);
    border-color: var(--et-bord);
}

[data-bs-theme="dark"] .btn.btn-light:hover:not(.btn-active) {
    background-color: #2b2b40;
    color: var(--et-texte);
}

[data-bs-theme="dark"] .table.table-hover > tbody > tr:hover > * {
    background-color: #22223a;
}

/* ---------------------------------------------------------------------------
   Impression
   -------------------------------------------------------------------------
   Bulletins, reçus et états sortent aussi par le navigateur. Les ombres et
   les fonds teintés coûtent de l'encre sans rien dire. */

@media print {
    .card {
        box-shadow: none;
        border: 1px solid #d0d5dd;
    }

    .app-sidebar,
    .app-header,
    .app-footer {
        display: none !important;
    }
}