html {
    height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.content-container {
    flex: 1 0 auto;
    margin-top: 26px;
    margin-bottom: 40px;
}

/* ===== Barre de navigation (pas de bandeau de couleur : posée sur le fond
   de la page, comme dans le mockup retenu) ===== */
.navbar {
    background-color: transparent;
    padding: 14px 0;
}

.navbar .navbar-brand img {
    height: 60px;
}

/* Logo plus grand sur la vue publique d'une alerte (layoutSimple.phtml) :
   seule page utilisant ce logo, pas la barre de navigation principale. */
.navbar .navbar-brand img.navbar-brand-logo-lg {
    height: 100px;
}

.navbar .navbar-nav .nav-item {
    padding-left: 3px;
    padding-right: 3px;
}

.navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    color: var(--fg-soft);
    font-size: 15px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--fg);
    background-color: var(--line-soft);
}

.navbar .navbar-nav .nav-item.active > .nav-link {
    color: var(--fg);
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}

.navbar .navbar-toggler {
    border: none;
    color: var(--fg-soft);
    padding: 4px 8px;
}

.navbar .navbar-toggler:focus {
    box-shadow: none;
}

@media (min-width: 768px) {
    .navbar-center-wrap {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
    }
}

.navbar-user-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .navbar .navbar-collapse {
        margin-top: 10px;
    }
    .navbar .navbar-nav {
        gap: 2px;
    }
    .navbar .navbar-nav:last-child {
        margin-top: 6px;
        margin-bottom: 8px;
    }
}

.navbar .dropdown-menu {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin-top: 8px;
}

.navbar .dropdown-menu .dropdown-item {
    color: var(--fg);
    border-radius: 8px;
    padding: 8px 12px;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: var(--accent);
    color: #fff;
}

.navbar-user-chip {
    background-color: var(--line-soft);
}

.navbar-user-chip:hover {
    background-color: var(--line) !important;
}

/* ===== Sous-navigation "Gestion" ===== */
.management-subnav {
    background: transparent;
}

.management-subnav .container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 14px;
    padding-bottom: 4px;
}

.management-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: .88rem;
    font-weight: 600;
    color: var(--fg-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.management-subnav-link:hover {
    background: var(--line-soft);
    color: var(--fg);
}

.management-subnav-link.active {
    background: var(--tint-red-bg);
    color: var(--accent);
}

/* Chaque page de "Gestion" garde la couleur qui lui est déjà attribuée dans
   navigation.global.php (et utilisée sur les cartes de raccourci du tableau
   de bord) : la reprendre ici aide à identifier la section active en un
   coup d'œil plutôt que d'afficher le même rouge pour tout le monde. */
.management-subnav-link.subnav-blue:hover,
.management-subnav-link.subnav-blue.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }

.management-subnav-link.subnav-green:hover,
.management-subnav-link.subnav-green.active { background: var(--tint-green-bg); color: var(--tint-green-fg); }

.management-subnav-link.subnav-orange:hover,
.management-subnav-link.subnav-orange.active { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }

.management-subnav-link.subnav-purple:hover,
.management-subnav-link.subnav-purple.active { background: var(--tint-purple-bg); color: var(--tint-purple-fg); }

.management-subnav-link.subnav-red:hover,
.management-subnav-link.subnav-red.active { background: var(--tint-red-bg); color: var(--tint-red-fg); }

@media (max-width: 767px) {
    .management-subnav .container {
        gap: 2px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .management-subnav-link {
        padding: 7px 12px;
        font-size: .82rem;
    }
}

/* ===== Pied de page ===== */
footer {
    background: transparent;
    padding: 16px;
    color: var(--fg-soft);
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
}

footer a,
footer a:visited {
    color: var(--accent);
}

/* ===== Écran de connexion =====
   Fond uni sombre, formulaire posé directement dessus - pas de carte. */
.container-login {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgb(36 36 36 / var(--tw-bg-opacity, 1));
    color: #fff;
}

.container-login > .container {
    display: flex;
    justify-content: center;
    /* Item flex du body (.container-login) : sans ça, sa taille minimale
       automatique suit le contenu le plus large qu'il porte (ex. les
       paragraphes de la page 2FA) et empêche tout ce qui est dessous de
       rétrécir sous cette largeur sur mobile - même bug que .login-card
       ci-dessous, un niveau plus haut dans l'arbre flex. */
    min-width: 0;
}

.login-card {
    position: relative;
    /* Un item flex ne rétrécit jamais sous la taille "naturelle" de son
       contenu par défaut (min-width:auto) - avec le logo en width:100%,
       ça pourrait empêcher .login-card de suivre le viewport sur mobile. */
    min-width: 0;
    width: 100%;
    max-width: 340px;
    padding: 24px 8px !important;
    color: #fff;
    animation: login-card-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

/* Sur smartphone, réduit les marges latérales empilées (container-login +
   .container Bootstrap + .login-card) pour laisser plus de place au
   formulaire plutôt que de la perdre sur les bords. */
@media (max-width: 575.98px) {
    .container-login {
        padding-left: 8px;
        padding-right: 8px;
    }

    .container-login > .container {
        padding-left: 4px;
        padding-right: 4px;
    }

    .login-card {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

@keyframes login-card-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-card {
        animation: none;
    }
}

.login-logo {
    /* Largeur fluide (plafonnée) plutôt qu'une hauteur fixe : le logo reste
       grand sur desktop sans jamais dépasser la largeur dispo sur mobile. */
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 12px;
}

/* Écran assez large pour ne plus être un mobile en portrait : la carte et le
   logo peuvent grandir nettement sans risque de débordement. */
@media (min-width: 576px) {
    .login-card {
        max-width: 460px;
    }

    .login-logo {
        max-width: 400px;
    }
}

.login-subtitle {
    color: rgba(255, 255, 255, .55);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 30px !important;
}

.login-card input.form-control {
    text-align: left;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.login-card input.form-control::placeholder {
    color: rgba(255, 255, 255, .45);
}

.login-card .btn-primary.w-100 {
    padding-top: .65rem;
    padding-bottom: .65rem;
    font-weight: 600;
    margin-top: 6px;
}

.login-card .language-switcher-inline {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.login-card .language-switcher-flag-link svg {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}

.login-card .password-toggle-btn {
    color: rgba(255, 255, 255, .55);
}

.login-card .password-toggle-btn:hover,
.login-card .password-toggle-btn:focus {
    color: var(--accent);
}

/* ===== Boutons ===== */
.container .btn {
    border-radius: var(--radius-pill);
}

.container .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    white-space: nowrap;
}

.container .btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.container .btn-primary:active {
    background-color: var(--accent-active) !important;
    border-color: var(--accent-active) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(177, 51, 38, .2) !important;
}

.container .btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(177, 51, 38, .2);
}

.container .btn-secondary {
    background-color: var(--line);
    border-color: var(--line);
    color: var(--fg);
}

.container .btn-secondary:hover {
    background-color: #ddd3c4;
    border-color: #ddd3c4;
}

.container .btn-secondary:active {
    background-color: #ddd3c4 !important;
    border-color: #ddd3c4 !important;
    outline: none !important;
}

.container .btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}

.container input.form-control:focus,
.container select.form-control:focus,
.container textarea.form-control:focus,
.container .form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(177, 51, 38, .12);
}

.container .form-control,
.container .form-select {
    border-radius: var(--radius-input);
    border-color: var(--line);
}

/* BS5 n'a plus .form-group ; on reproduit l'espacement historique de BS4. */
.form-group {
    margin-bottom: 1rem;
}

.container hr {
    margin-top: 0;
    border-color: var(--line);
}

/* ===== Cartes de raccourci (page d'accueil) ===== */
.card-box {
    position: relative;
    color: var(--fg);
    background: var(--tint-blue-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    padding: 20px 20px 46px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease;
}

.card-box:hover {
    text-decoration: none;
    color: var(--fg);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-box .inner {
    padding-right: 40px;
}

.card-box h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
}

.card-box p {
    font-size: 14px;
    color: var(--fg-soft);
    margin: 0;
}

.card-box .icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 46% 54% 58% 42%;
    background: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.card-box .card-box-footer {
    position: absolute;
    left: 20px;
    bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.card-box:hover .card-box-footer {
    text-decoration: underline;
}

.card-box.bg-blue { background: var(--tint-blue-bg); }
.card-box.bg-blue .icon, .card-box.bg-blue .card-box-footer { color: var(--tint-blue-fg); }

.card-box.bg-green { background: var(--tint-green-bg); }
.card-box.bg-green .icon, .card-box.bg-green .card-box-footer { color: var(--tint-green-fg); }

.card-box.bg-orange { background: var(--tint-orange-bg); }
.card-box.bg-orange .icon, .card-box.bg-orange .card-box-footer { color: var(--tint-orange-fg); }

.card-box.bg-red { background: var(--tint-red-bg); }
.card-box.bg-red .icon, .card-box.bg-red .card-box-footer { color: var(--tint-red-fg); }

.card-box.bg-purple { background: var(--tint-purple-bg); }
.card-box.bg-purple .icon, .card-box.bg-purple .card-box-footer { color: var(--tint-purple-fg); }

/* ===== Icône colorée devant le titre d'une page de gestion/alerte : même
   couleur que sa carte de raccourci / son onglet dans la sous-navigation
   (voir navigation.global.php), pour donner une identité visuelle à chaque
   section plutôt qu'un simple titre monochrome. ===== */
.page-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 46% 54% 58% 42%;
    font-size: 15px;
    vertical-align: middle;
}

.page-title-icon.icon-blue { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.page-title-icon.icon-green { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.page-title-icon.icon-orange { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.page-title-icon.icon-purple { background: var(--tint-purple-bg); color: var(--tint-purple-fg); }
.page-title-icon.icon-red { background: var(--tint-red-bg); color: var(--tint-red-fg); }

/* ===== Pastilles de statut (alertes récentes sur le tableau de bord) ===== */
.pill-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
}

.pill-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pill-status-active {
    background: var(--tint-red-bg);
    color: var(--accent);
}

.pill-status-closed {
    background: var(--line-soft);
    color: var(--fg-soft);
}

.pull-left {
    float: left !important;
}

/* ===== Tableaux / DataTables ===== */
.container table.dataTable thead .sorting_asc:before,
.container table.dataTable thead .sorting_desc:before,
.container table.dataTable thead .sorting:before {
    left: 5px;
}

.container table.dataTable thead .sorting_asc:after,
.container table.dataTable thead .sorting_desc:after,
.container table.dataTable thead .sorting:after {
    left: 12px;
}

.container table.dataTable thead .sorting_asc,
.container table.dataTable thead .sorting_desc,
.container table.dataTable thead .sorting {
    padding-left: 25px;
}

.container .page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.container .page-link {
    color: var(--accent);
    background-color: transparent;
    border-radius: var(--radius-pill);
    margin: 0 2px;
    border-color: transparent;
}

/* Bootstrap n'arrondit que le côté "extérieur" du premier/dernier item
   (coin gauche pour "Précédent", coin droit pour "Suivant") pour former une
   barre de pagination continue. Ici chaque bouton est un pastille séparée
   (margin + border-radius plein ci-dessus) : sans ce correctif, le côté
   "intérieur" (ex. le coin droit de "Précédent") reste carré puisque le
   sélecteur Bootstrap :first-child/:last-child est plus spécifique. */
.container .page-item:first-child .page-link,
.container .page-item:last-child .page-link {
    border-radius: var(--radius-pill);
}

.container .page-link:hover {
    background-color: var(--line-soft);
    border-color: var(--line-soft);
}

.container .page-link:active {
    background-color: var(--line-soft) !important;
    border-color: var(--line-soft) !important;
    outline: none !important;
}

.container .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(177, 51, 38, .12);
}

.container .page-item.disabled .page-link {
    color: var(--fg-soft) !important;
    background-color: transparent !important;
    opacity: .55;
}

@media (max-width: 575px) {
    .dataTables_paginate .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .container .page-link {
        padding: .3rem .55rem;
        font-size: .85rem;
        margin: 2px;
    }
}

table td.col-button {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    text-align: right;
}

.container table th {
    padding-right: 10px !important;
    color: var(--fg-soft);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-color: var(--line) !important;
    border-top: none !important;
    border-bottom-width: 1px !important;
}

.container table thead th {
    padding-top: .4rem;
}

/* Carte qui encadre strictement un tableau de données (liste des alertes,
   contacts, groupes, utilisateurs...) : contrairement aux autres cartes du
   site (raccourcis, profil, connexion), rectangulaire - pas de coin arrondi -
   et une petite marge au-dessus pour la détacher de la barre d'outils
   (recherche / filtre / bouton d'ajout) juste au-dessus. */
.container .card.table-card {
    border-radius: 0;
}

.container .card.table-card.table-card-spaced {
    margin-top: 10px;
}

.container .table > tbody > tr > td {
    vertical-align: middle;
    border-color: var(--line);
}

/* Design de tableau plus sobre : pas de rayures alternées, juste des
   lignes fines entre les rangées, et un survol discret. Bootstrap 5.3 peint
   TOUTES les cellules en blanc opaque via background-color: var(--bs-table-bg)
   (cf. .table > :not(caption) > * > *), puis surcouche un box-shadow inset
   pour les rangées impaires/survolées : il faut donc neutraliser les deux
   mécanismes sur toutes les cellules, pas seulement les rangées impaires,
   sinon les rangées paires restent en blanc opaque et créent quand même une
   alternance visible sur le fond crème de la page. */
.container .table > tbody > tr > * {
    background-color: transparent !important;
}

.container .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    box-shadow: none !important;
}

.container .table.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--line-soft) !important;
}

.container table td.no-wrap-td {
    white-space: nowrap;
}

.container table tr td .dropdown {
    position: relative;
    display: inline-block;
}

/* Le bouton "Option" hérite de .btn-primary (rouge plein, taille des CTA de
   page comme "+ Ajouter") : trop lourd pour une action secondaire répétée
   sur chaque ligne. Version plus discrète, dimensionnée pour une ligne de
   tableau. */
.container table tr td .dropdown-btn {
    background-color: var(--line-soft);
    border-color: var(--line-soft);
    color: var(--fg-soft);
    font-size: .8rem;
    font-weight: 600;
    padding: 5px 10px 5px 14px;
    line-height: 1.4;
}

.container table tr td .dropdown-btn i {
    margin-left: 5px;
    font-size: .7rem;
}

.container table tr td .dropdown-btn:hover {
    background-color: var(--line);
    border-color: var(--line);
    color: var(--fg);
}

.container table tr td .dropdown-btn:focus,
.container table tr td .dropdown-btn:active {
    color: var(--fg) !important;
    background-color: var(--line) !important;
    border-color: var(--line) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08) !important;
}

.container table tr td .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--surface);
    border-radius: var(--radius-input);
    min-width: 180px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 5;
}

/*
 * Select2 (CDN) ajoute son menu déroulant à la fin du <body>, avec un
 * z-index par défaut plus faible que celui d'une modal Bootstrap (voire des
 * modals imbriquées, dont le z-index est augmenté dynamiquement par
 * ManagementCrud.fixNestedModal). Sans ce correctif, le menu s'affichait
 * caché derrière la modal ouverte partout où un select2 y est utilisé
 * (ajout de contacts/groupes depuis une fiche détail).
 */
.select2-container--open {
    z-index: 2000;
}

.select2-dropdown {
    z-index: 2000;
}

@media (max-width: 575px) {
    .container table tr td .dropdown-content {
        right: auto;
        transform: translateX(-70px);
    }

    .container table tr td.col-button {
        padding-right: 5px;
        padding-left: 5px;
    }

    .container table td.td-align-center-mobile {
        text-align: center;
    }
}

.container table tr td .dropdown-content a {
    color: var(--fg);
    padding: 9px 14px;
    text-decoration: none;
    display: block;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    font-size: .9rem;
}

.container table tr td .dropdown-content a:hover {
    background-color: var(--line-soft);
}

.container table tr td .show-list {
    display: block;
}

.container table.dataTable {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.container form label {
    font-weight: 600;
}

.container .select2-container--classic .select2-selection--single,
.container .select2-container--classic .select2-selection--multiple {
    border-radius: var(--radius-input);
    border-color: var(--line);
    min-height: 38px;
}

/* Le thème "classic" de select2 imite volontairement un <select> natif
   (fond en dégradé gris/blanc) : on repasse sur un fond plat pour rester
   cohérent avec les autres champs du formulaire. */
.container .select2-container--classic .select2-selection--single {
    height: 38px;
    background-color: var(--surface);
    background-image: none;
}

.container .select2-container--classic .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: 14px;
    color: var(--fg);
}

.container .select2-container--classic .select2-selection--single .select2-selection__arrow {
    height: 36px;
    background: transparent;
    border-left: none;
}

.container .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    padding: 4px 8px;
}

/* Le champ multi-select (ex: Destinataires) est initialisé avec width:"100%",
   ce qui pousse select2 à mettre aussi le champ de recherche interne en
   width:100% (style inline) : vide, il passe alors seul sur sa propre ligne
   sous la liste (vide elle aussi), doublant la hauteur de la case pour rien.
   On lui redonne une largeur basée sur son contenu. */
.container .select2-search--inline .select2-search__field {
    width: auto !important;
    max-width: 100%;
}

/* Cases à cocher : un peu plus grandes (plus faciles à toucher sur mobile) et
   couleur de la marque plutôt que le bleu par défaut de Bootstrap. */
.container .form-check-input {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.15em;
}

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

.container .form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(177, 51, 38, .12);
}

.container .form-check {
    padding-left: 1.6em;
}

.container .select2-container .select2-selection--multiple .select2-selection__choice,
.container .select2-container .select2-selection--single .select2-selection__choice {
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    color: white;
}

.select2-container--classic .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent) !important;
}

.select2-container--classic.select2-container--open .select2-dropdown,
.select2-container--bootstrap.select2-container--open .select2-dropdown {
    border-color: var(--accent) !important;
}

.select2-container--classic.select2-container--open .select2-selection--multiple,
.select2-container--bootstrap.select2-container--open .select2-selection--single {
    border: 1px solid var(--accent) !important;
}

.select2-container--classic .select2-results__option--selected {
    display: none;
}

.select2-container--classic .select2-results__option--selectable {
    padding-left: 14px;
}

.container .select2-container .select2-selection--multiple .select2-selection__choice button span {
    color: white;
}

.container input[type="checkbox"].form-check-input:checked + span {
    border-color: var(--accent) !important;
    background-color: var(--accent) !important;
}

.container .alert-danger {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
    border-radius: var(--radius-input);
}

.container .badge {
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.container .alert-warning {
    background-color: #c47a3d;
    color: white;
    border-color: #c47a3d;
    border-radius: var(--radius-input);
}

/* ===== DataTables Responsive (colonnes repliées sur petit écran) =====
   Le "+" ne sert qu'à déplier des colonnes masquées par manque de place :
   datatables-fr.js ajoute la classe dtr-has-hidden sur le tableau
   uniquement quand au moins une colonne est effectivement repliée, pour
   qu'il n'apparaisse pas quand il ne servirait à rien (ex. sur desktop où
   tout tient déjà à l'écran). */
.container table.dataTable > tbody > tr > td.dtr-control {
    position: relative;
}

/* !important : le bundle CSS de DataTables (chargé après layout.css) définit
   sa propre puce ("►") sur ce même pseudo-élément avec une spécificité
   identique ; sans ça, l'ordre de chargement la fait gagner. */
.container table.dataTable.dtr-has-hidden > tbody > tr td.dtr-control:before {
    box-sizing: border-box !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 14px !important;
    text-align: center !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    color: var(--fg-soft) !important;
    font-size: 11px !important;
    font-family: monospace !important;
    content: "+" !important;
    margin-right: 10px !important;
}

.container table.dataTable.dtr-has-hidden > tbody > tr.parent td.dtr-control:before {
    content: "\2212" !important;
}

.container table.dataTable > tbody > tr.child {
    background: var(--line-soft);
}

.container table.dataTable > tbody > tr.child td.child {
    padding: 10px 20px;
}

.container table.dataTable > tbody > tr.child ul.dtr-details {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.container table.dataTable > tbody > tr.child ul.dtr-details li {
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.container table.dataTable > tbody > tr.child ul.dtr-details li:last-child {
    border-bottom: none;
}

.container table.dataTable > tbody > tr.child span.dtr-title {
    display: inline-block;
    min-width: 110px;
    font-weight: 600;
    color: var(--fg-soft);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Drapeaux en SVG inline (voir layout/language-switcher.phtml) : gabarit
   commun 20x15 pour les trois, quel que soit leur ratio officiel réel. */
.language-switcher-toggle svg,
.language-switcher-flag svg,
.language-switcher-flag-link svg {
    display: block;
    width: 20px;
    height: 15px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Sélecteur de langue - variante "menu" (navbar) : juste le drapeau, sans
   fond ni bordure, pour rester discret dans la barre de navigation. */
.language-switcher-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: .85;
    transition: opacity .15s ease;
}

.language-switcher-toggle:hover {
    opacity: 1;
}

.language-switcher-flag {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 2px;
}

.language-switcher .dropdown-item.active {
    background: var(--tint-blue-bg);
    color: var(--fg);
}

/* Sélecteur de langue - variante "login" : les 3 drapeaux affichés
   directement, sous le bouton de connexion. */
.language-switcher-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.language-switcher-flag-link {
    display: inline-flex;
    text-decoration: none;
    opacity: .45;
    filter: grayscale(70%);
    transform: scale(.9);
    transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}

.language-switcher-flag-link svg {
    width: 26px;
    height: 19px;
    border-radius: 4px;
}

.language-switcher-flag-link:hover {
    opacity: .75;
    filter: grayscale(20%);
}

.language-switcher-flag-link.active {
    opacity: 1;
    filter: none;
    transform: scale(1);
}

/* ===== Configuration / vérification de la double authentification (2FA) =====
   Même fond que l'écran de connexion (layout/login.phtml) - carte plus large
   pour loger le QR code et les explications pas-à-pas. */
.tfa-card {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 560px;
    color: #fff;
    animation: login-card-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .tfa-card {
        animation: none;
    }
}

.tfa-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(177, 51, 38, .18);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 18px;
}

.tfa-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.tfa-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, .6);
    font-size: .92rem;
    max-width: 420px;
    margin: 0 auto 32px;
    line-height: 1.5;
}

.tfa-step {
    display: flex;
    gap: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-card);
    padding: 20px;
    margin-bottom: 16px;
}

.tfa-step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
}

.tfa-step-body {
    min-width: 0;
}

.tfa-step-body h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 4px 0 6px;
    color: #fff;
}

.tfa-step-body p {
    color: rgba(255, 255, 255, .65);
    font-size: .88rem;
    margin: 0 0 8px;
    line-height: 1.5;
}

.tfa-qr-frame {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    width: fit-content;
    margin: 12px 0;
    box-shadow: var(--shadow-md);
}

.tfa-qr-frame img {
    display: block;
    width: 180px;
    height: 180px;
}

.tfa-manual-entry {
    margin-top: 4px;
}

.tfa-manual-entry summary {
    cursor: pointer;
    color: var(--accent);
    font-size: .85rem;
    font-weight: 600;
}

.tfa-secret {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px dashed rgba(255, 255, 255, .2);
    border-radius: 10px;
    font-family: "SFMono-Regular", Consolas, monospace;
    letter-spacing: .05em;
    font-size: .88rem;
    color: #fff;
    word-break: break-all;
}

.tfa-form {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.tfa-code-input {
    flex: 1 1 160px;
    min-width: 0;
    padding: 12px 16px;
    border-radius: var(--radius-input);
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 1.3rem;
    letter-spacing: .3em;
    text-align: center;
}

.tfa-code-input::placeholder {
    color: rgba(255, 255, 255, .25);
    letter-spacing: .3em;
}

.tfa-code-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(177, 51, 38, .25);
}

.tfa-submit {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-top: .65rem;
    padding-bottom: .65rem;
    font-weight: 600;
}

.tfa-verify-only .tfa-step {
    margin-bottom: 0;
}

.tfa-card .language-switcher-inline {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.tfa-card .language-switcher-flag-link svg {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}

.alert-language-info {
    margin-left: 4px;
    cursor: pointer;
}