/* ─────────────────────────────────────────────────────────────────────────────
   IDENTITÉ LABAW — CE QUE LA SUBSTITUTION DE COULEURS NE PEUT PAS FAIRE

   La palette du thème est traitée en amont : `tools/theme-couleurs-labaw.php`
   réécrit style.bundle.css en remplaçant 1 176 valeurs, et c'est le fichier dérivé
   que le gabarit charge.

   Ce fichier-ci ne s'occupe donc PLUS des couleurs de base — quatre passes de
   surcharges sélecteur par sélecteur avaient échoué à les couvrir toutes. Il porte
   trois choses qu'une substitution ne sait pas faire :

     1. RENDRE AU DANGER SA COULEUR. Dans ce thème, `primary` et `danger` ont la
        MÊME valeur : la substitution les a tous les deux passés en marine, boutons
        de suppression et messages d'erreur compris. Seul un sélecteur peut les
        redistinguer.
     2. LA FORME. Rayons, ombres, graisses, focus : rien à voir avec la teinte.
     3. LES CORRECTIONS D'ACCESSIBILITÉ que le thème ne fait pas.

   ── Ce qu'on ne touche pas ──

   Les tailles, les espacements et la grille. Les modifier déplacerait des éléments
   dans 55 gabarits que personne n'a le temps de revérifier un par un.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    --lb-marine: #06325C;
    --lb-marine-hover: #04223F;
    --lb-marine-ink: #02132F;
    --lb-marine-light: #EAF0F6;
    --lb-turquoise-ink: #00736F;
    --lb-turquoise-hover: #006B67;
    --lb-turquoise-light: #E6F4F3;

    --lb-white: #ffffff;
    --lb-gray-bg: #F5F7FA;
    --lb-text: #4A5568;
    --lb-text-muted: #64748B;
    --lb-border: #E2E8F0;
    --lb-border-strong: #CBD5E0;

    /* Assez sombres pour rester lisibles sur fond clair.
       Le contraste étant symétrique, une couleur qui atteint 4,5:1 face au blanc sert
       AUSSI de fond à du texte blanc — donc un seul jeton pour le texte et le bouton. */
    /* Les couleurs d'état de labaw.fr (assets/styles/app.css), depuis le 06/11/2026 : le
       back-office des boutiques parle la même langue que le site de Labaw. */
    --lb-success: #276749;  --lb-success-bg: #E8F5EE;
    --lb-success-hover: #1E5139;
    --lb-danger:  #C53030;  --lb-danger-bg:  #FDECEC;
    --lb-warning: #8A5A00;  --lb-warning-bg: #FFF7E6;
    --lb-info:    #2B6CB0;  --lb-info-bg:    #EAF2FB;

    --lb-radius: 16px;
    --lb-radius-sm: 10px;
    --lb-shadow: 0 2px 10px rgba(6, 50, 92, .07);
    --lb-shadow-lift: 0 6px 20px rgba(6, 50, 92, .11);
}

/* ═════════════════════════════════════════════════════════════════════════════
   1. LE DANGER REDEVIENT ROUGE

   L'enjeu n'est pas décoratif : un bouton « Supprimer » de la même couleur que
   « Modifier » se clique par erreur, et cette erreur-là ne se rattrape pas.
   ═════════════════════════════════════════════════════════════════════════════ */

.btn.btn-danger,
.label.label-danger,
.badge-danger,
.bg-danger {
    background-color: var(--lb-danger) !important;
    border-color: var(--lb-danger) !important;
    color: #fff !important;
}

.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active {
    background-color: #9B2C2C !important;
    border-color: #9B2C2C !important;
    color: #fff !important;
}

/* LA VARIANTE CLAIRE, ET LA COULEUR DU TEXTE AU SURVOL.
   Je posais le fond sans le texte : « Supprimer » sortait rouge sur rouge, donc
   illisible au moment précis où l'on veut être sûr de ce qu'on clique. */
/* LE BOUTON : À CONTOUR ROUGE, comme « Supprimer » sur labaw.fr (`.btn-lb-danger-outline`,
   06/11/2026). L'étiquette garde son fond rose pâle : elle dit un état, elle ne se clique pas. */
.btn.btn-light-danger {
    background-color: var(--lb-white) !important;
    border: 1px solid var(--lb-danger) !important;
    color: var(--lb-danger) !important;
}

.label.label-light-danger,
.badge-light-danger {
    background-color: var(--lb-danger-bg) !important;
    border-color: transparent !important;
    color: var(--lb-danger) !important;
}

.btn.btn-light-danger:hover,
.btn.btn-light-danger:focus,
.btn.btn-light-danger:active,
.btn.btn-hover-danger:hover,
.btn.btn-hover-light-danger:hover {
    background-color: var(--lb-danger) !important;
    border-color: var(--lb-danger) !important;
    color: #fff !important;
}

/* Les pictogrammes suivent le texte, dans les deux sens et pour les deux
   mécanismes : `fill` pour les SVG, `color` pour les polices d'icônes. */
.btn.btn-light-danger i,
.btn.btn-light-danger .svg-icon svg g [fill] { color: var(--lb-danger) !important; fill: var(--lb-danger) !important; }

.btn.btn-danger i,
.btn.btn-danger .svg-icon svg g [fill],
.btn.btn-light-danger:hover i,
.btn.btn-light-danger:hover .svg-icon svg g [fill],
.btn.btn-hover-danger:hover i,
.btn.btn-hover-danger:hover .svg-icon svg g [fill] { color: #fff !important; fill: #fff !important; }

.text-danger,
.invalid-feedback,
.form-error { color: var(--lb-danger) !important; }
.svg-icon-danger svg g [fill] { fill: var(--lb-danger) !important; }

.alert.alert-danger {
    background: var(--lb-danger-bg) !important;
    color: var(--lb-danger) !important;
    border-left-color: var(--lb-danger) !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   2. LA FORME
   ═════════════════════════════════════════════════════════════════════════════ */

body,
.content,
#kt_content,
.subheader { background-color: var(--lb-gray-bg); }

body {
    color: var(--lb-text);
    font-family: 'Nunito', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.text-dark, .text-dark-75, .text-dark-65 { color: var(--lb-marine) !important; }
.text-muted { color: var(--lb-text-muted) !important; }

h1, h2, h3, h4, h5, h6,
.card-label, .card-title { color: var(--lb-marine); font-weight: 700; }

.card.card-custom,
.card {
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow) !important;
    transition: box-shadow .18s ease;
}
.card.card-custom:hover { box-shadow: var(--lb-shadow-lift) !important; }

.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--lb-border);
    border-radius: var(--lb-radius) var(--lb-radius) 0 0;
    min-height: 62px;
}
.card .card-header .card-title .card-label { font-size: 1.05rem; letter-spacing: -.01em; }

.aside, .aside-menu, .brand { background-color: var(--lb-marine-ink) !important; }
.aside-menu .menu-nav > .menu-item > .menu-link { border-radius: var(--lb-radius-sm); margin: 2px 10px; }

.header, .header-mobile {
    background-color: var(--lb-white) !important;
    border-bottom: 1px solid var(--lb-border);
    box-shadow: none !important;
}

.btn {
    border-radius: var(--lb-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn.btn-secondary,
.btn.btn-light {
    background-color: var(--lb-white);
    border-color: var(--lb-border-strong);
    color: var(--lb-marine);
}
.btn.btn-secondary:hover,
.btn.btn-light:hover {
    background-color: var(--lb-marine-light) !important;
    border-color: var(--lb-marine) !important;
}

.form-control,
.form-select,
select.form-control { border-radius: var(--lb-radius-sm); border-color: var(--lb-border-strong); color: var(--lb-text); }
.form-group > label { font-weight: 600; color: var(--lb-marine); }

.table thead th {
    background: var(--lb-gray-bg);
    color: var(--lb-text-muted);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--lb-border) !important;
    border-top: none !important;
}
.table td { border-top: 1px solid var(--lb-border); vertical-align: middle; }
.table.table-hover tbody tr:hover { background-color: var(--lb-marine-light); }

.label, .badge { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }

.alert { border: none; border-left: 4px solid transparent; border-radius: var(--lb-radius-sm); box-shadow: var(--lb-shadow); }
.alert.alert-success { background: var(--lb-success-bg); color: var(--lb-success); border-left-color: var(--lb-success); }
.alert.alert-warning { background: var(--lb-warning-bg); color: var(--lb-warning); border-left-color: var(--lb-warning); }
.alert.alert-info, .alert.alert-primary { background: var(--lb-info-bg); color: var(--lb-info); border-left-color: var(--lb-info); }

.modal-content { border: none; border-radius: var(--lb-radius); box-shadow: var(--lb-shadow-lift); }
.modal-header  { border-bottom: 1px solid var(--lb-border); }
.modal-footer  { border-top: 1px solid var(--lb-border); }

.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--lb-radius-sm);
    border: 1px solid var(--lb-border-strong);
    padding: .35rem .6rem;
}

/* ── LE SÉLECTEUR « AFFICHER N ÉLÉMENTS » ──
   Le raccourci `padding` d'une règle commune avec le champ de recherche écrasait le
   padding droit de 2rem que Bootstrap réserve à la flèche. Or cette flèche n'est pas
   un pseudo-élément : c'est une IMAGE DE FOND posée à `right 1rem`. Sans la réserve,
   elle se dessinait par-dessus les chiffres — « 25 » à l'étroit sous un chevron, sur
   tous les tableaux du back-office.

   D'où une règle séparée : le champ de recherche n'a pas de flèche, le sélecteur si.
   La largeur minimale est là pour « 100 », la plus longue des valeurs proposées. */
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--lb-radius-sm);
    border: 1px solid var(--lb-border-strong);
    padding: .35rem 2rem .35rem .6rem;
    background-position: right .7rem center;
    width: auto;
    min-width: 5rem;
}

/* ── LE BOUTON DE VALIDATION ──
   Le thème le peignait en #1BC5BD, son turquoise vif. Mesuré : du texte blanc n'y
   atteint que 2,15:1, soit un libellé qu'on devine plus qu'on ne le lit — et ce
   bouton est partout dans le back-office.

   La substitution de teinte ne pouvait pas le rattraper : elle remplace une couleur
   par une autre de même clarté, et le problème ici EST la clarté.

   #047857 donne 5,5:1 avec du blanc, et reste à 23,5 (OKLab ×100) du marine de
   `btn-primary` — assez loin pour qu'on ne confonde pas « enregistrer » avec une
   action ordinaire. C'est le même jeton que les alertes et les étiquettes de succès,
   donc toute la famille s'accorde au lieu d'avoir un bouton vif à côté d'une alerte
   sombre. */
/* LES BOUTONS « SUCCESS » SONT DES ACTIONS, PAS DES ÉTATS (06/11/2026) : ils prennent le
   turquoise foncé des boutons d'action de labaw.fr (`.btn-lb-action`, 5,7:1 avec du blanc).
   Le vert reste aux ÉTATS — étiquettes, alertes, textes : « payée », « enregistré ». */
.btn.btn-success {
    background-color: var(--lb-turquoise-ink) !important;
    border-color: var(--lb-turquoise-ink) !important;
    color: #fff !important;
}

.label.label-success,
.badge-success,
.bg-success {
    background-color: var(--lb-success) !important;
    border-color: var(--lb-success) !important;
    color: #fff !important;
}

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-hover-success:hover {
    background-color: var(--lb-turquoise-hover) !important;
    border-color: var(--lb-turquoise-hover) !important;
    color: #fff !important;
}

/* La variante claire, ET la couleur du texte au survol — l'oubli qui avait rendu
   « Supprimer » illisible sur le rouge. Bouton : turquoise pâle ; étiquette : vert pâle. */
.btn.btn-light-success {
    background-color: var(--lb-turquoise-light) !important;
    border-color: transparent !important;
    color: var(--lb-turquoise-ink) !important;
}

.label.label-light-success,
.badge-light-success {
    background-color: var(--lb-success-bg) !important;
    border-color: transparent !important;
    color: var(--lb-success) !important;
}

.btn.btn-light-success:hover,
.btn.btn-light-success:focus,
.btn.btn-light-success:active,
.btn.btn-hover-light-success:hover {
    background-color: var(--lb-turquoise-ink) !important;
    border-color: var(--lb-turquoise-ink) !important;
    color: #fff !important;
}

/* Les pictogrammes suivent le texte, pour les deux mécanismes : `fill` pour les SVG,
   `color` pour les polices d'icônes. */
.btn.btn-light-success i,
.btn.btn-light-success .svg-icon svg g [fill] { color: var(--lb-turquoise-ink) !important; fill: var(--lb-turquoise-ink) !important; }

.btn.btn-success i,
.btn.btn-success .svg-icon svg g [fill],
.btn.btn-light-success:hover i,
.btn.btn-light-success:hover .svg-icon svg g [fill],
.btn.btn-hover-success:hover i,
.btn.btn-hover-success:hover .svg-icon svg g [fill] { color: #fff !important; fill: #fff !important; }

.text-success { color: var(--lb-success) !important; }

/* DEUX CLASSES, PAS UNE. Le thème écrit `.svg-icon.svg-icon-success svg g [fill]` : une
   règle à une seule classe perd la comparaison de spécificité et le pictogramme restait
   turquoise. Relevé par tools/audit-couleurs-admin.php sur la page rendue — c'est
   exactement le genre de reste qu'une relecture de gabarit ne montre pas. */
.svg-icon.svg-icon-success svg g [fill],
.svg-icon-success svg g [fill] { fill: var(--lb-success) !important; }

/* ═════════════════════════════════════════════════════════════════════════════
   4. AUX COULEURS DE LABAW.FR (06/11/2026, demandé par Amory)

   Chaque famille de couleurs du thème prend le rôle qu'elle a sur labaw.fr :

     primary         → marine : l'action principale, les textes forts ;
     light-primary   → BOUTON : turquoise pâle, texte turquoise (actions secondaires) ;
                       étiquette ou fond : marine pâle ;
     success         → BOUTON : turquoise foncé ; ÉTAT : vert (voir plus haut) ;
     info, warning, danger, dark → les couleurs d'état de labaw.fr, et le marine profond.

   Les pictogrammes passent au turquoise ; le marine reste au texte et aux actions
   principales. La forme ne bouge pas. Les couleurs des évènements du calendrier, une par
   mode de livraison, ne sont pas touchées : ce sont des catégories, choisies pour rester
   distinctes entre elles (App\Service\CouleursCalendrier).
   ═════════════════════════════════════════════════════════════════════════════ */

/* — L'action principale : marine — */
.btn.btn-primary,
.label.label-primary,
.badge-primary,
.bg-primary {
    background-color: var(--lb-marine) !important;
    border-color: var(--lb-marine) !important;
    color: #fff !important;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active,
.btn.btn-hover-primary:hover, .btn.btn-hover-primary:focus {
    background-color: var(--lb-marine-hover) !important;
    border-color: var(--lb-marine-hover) !important;
    color: #fff !important;
}
.btn.btn-primary i, .btn.btn-primary .svg-icon svg g [fill],
.btn.btn-hover-primary:hover i, .btn.btn-hover-primary:hover .svg-icon svg g [fill] { color: #fff !important; fill: #fff !important; }

/* — Les actions secondaires : turquoise pâle, texte turquoise — */
.btn.btn-light-primary {
    background-color: var(--lb-turquoise-light) !important;
    border-color: transparent !important;
    color: var(--lb-turquoise-ink) !important;
}
.btn.btn-light-primary i,
.btn.btn-light-primary .svg-icon svg g [fill] { color: var(--lb-turquoise-ink) !important; fill: var(--lb-turquoise-ink) !important; }
.btn.btn-light-primary:hover, .btn.btn-light-primary:focus, .btn.btn-light-primary:active, .btn.btn-light-primary.active,
.btn.btn-hover-light-primary:hover {
    background-color: var(--lb-turquoise-ink) !important;
    border-color: var(--lb-turquoise-ink) !important;
    color: #fff !important;
}
.btn.btn-light-primary:hover i, .btn.btn-light-primary:hover .svg-icon svg g [fill],
.btn.btn-light-primary.active i, .btn.btn-light-primary.active .svg-icon svg g [fill] { color: #fff !important; fill: #fff !important; }

.label.label-light-primary,
.badge-light-primary,
.bg-light-primary {
    background-color: var(--lb-marine-light) !important;
    color: var(--lb-marine) !important;
}

/* — Avertissement : le moutarde foncé de labaw.fr (6,9:1 avec du blanc) — */
.btn.btn-warning,
.label.label-warning,
.badge-warning,
.bg-warning {
    background-color: var(--lb-warning) !important;
    border-color: var(--lb-warning) !important;
    color: #fff !important;
}
.btn.btn-warning:hover, .btn.btn-warning:focus, .btn.btn-warning:active,
.btn.btn-hover-warning:hover { background-color: #6E4800 !important; border-color: #6E4800 !important; color: #fff !important; }
.btn.btn-warning i, .btn.btn-warning .svg-icon svg g [fill] { color: #fff !important; fill: #fff !important; }

.btn.btn-light-warning,
.label.label-light-warning,
.badge-light-warning,
.bg-light-warning {
    background-color: var(--lb-warning-bg) !important;
    border-color: transparent !important;
    color: var(--lb-warning) !important;
}
.btn.btn-light-warning i, .btn.btn-light-warning .svg-icon svg g [fill] { color: var(--lb-warning) !important; fill: var(--lb-warning) !important; }
.btn.btn-light-warning:hover, .btn.btn-light-warning:focus, .btn.btn-light-warning:active, .btn.btn-light-warning.active,
.btn.btn-hover-light-warning:hover { background-color: var(--lb-warning) !important; border-color: var(--lb-warning) !important; color: #fff !important; }
.btn.btn-light-warning:hover i, .btn.btn-light-warning:hover .svg-icon svg g [fill],
.btn.btn-light-warning.active i { color: #fff !important; fill: #fff !important; }

/* — Information : le bleu de labaw.fr, à la place du violet du thème — */
.btn.btn-info,
.label.label-info,
.badge-info,
.bg-info {
    background-color: var(--lb-info) !important;
    border-color: var(--lb-info) !important;
    color: #fff !important;
}
.btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info:active { background-color: #245A92 !important; border-color: #245A92 !important; color: #fff !important; }
.btn.btn-light-info,
.label.label-light-info,
.badge-light-info,
.bg-light-info {
    background-color: var(--lb-info-bg) !important;
    border-color: transparent !important;
    color: var(--lb-info) !important;
}
.btn.btn-light-info:hover, .btn.btn-light-info:focus, .btn.btn-light-info:active { background-color: var(--lb-info) !important; color: #fff !important; }

.bg-light-success { background-color: var(--lb-success-bg) !important; }
.bg-light-danger { background-color: var(--lb-danger-bg) !important; }

/* — Le sombre : marine profond — */
.btn.btn-dark,
.label.label-dark,
.badge-dark,
.bg-dark {
    background-color: var(--lb-marine-ink) !important;
    border-color: var(--lb-marine-ink) !important;
    color: #fff !important;
}

/* — Le nom de la boutique dans l'en-tête, quand elle n'a pas encore de logo (06/11/2026) — */
.entete-marque { display: flex; align-items: center; min-width: 0; text-decoration: none !important; }
.entete-marque__nom {
    display: block;
    max-width: 280px;
    overflow: hidden;
    color: var(--lb-marine);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.entete-marque:hover .entete-marque__nom { color: var(--lb-turquoise-ink); }
.header-mobile .entete-marque__nom { max-width: 170px; font-size: 1.1rem; }

/* — Les textes — */
.text-primary { color: var(--lb-marine) !important; }
.text-warning { color: var(--lb-warning) !important; }
.text-info { color: var(--lb-info) !important; }
.text-hover-primary:hover,
a.text-hover-primary:hover { color: var(--lb-turquoise-ink) !important; }

/* — Les pictogrammes : turquoise. DEUX CLASSES, comme le thème (voir svg-icon-success). — */
.svg-icon.svg-icon-primary svg g [fill],
.svg-icon-primary svg g [fill] { fill: var(--lb-turquoise-ink) !important; }
.svg-icon.svg-icon-primary,
.svg-icon-primary { color: var(--lb-turquoise-ink); }
.svg-icon.svg-icon-warning svg g [fill],
.svg-icon-warning svg g [fill] { fill: var(--lb-warning) !important; }
.svg-icon.svg-icon-info svg g [fill],
.svg-icon-info svg g [fill] { fill: var(--lb-info) !important; }

.symbol.symbol-light-primary .symbol-label { background-color: var(--lb-turquoise-light) !important; color: var(--lb-turquoise-ink) !important; }
.symbol.symbol-light-success .symbol-label { background-color: var(--lb-success-bg) !important; color: var(--lb-success) !important; }
.symbol.symbol-light-warning .symbol-label { background-color: var(--lb-warning-bg) !important; color: var(--lb-warning) !important; }
.symbol.symbol-light-info .symbol-label { background-color: var(--lb-info-bg) !important; color: var(--lb-info) !important; }
.symbol.symbol-light-danger .symbol-label { background-color: var(--lb-danger-bg) !important; color: var(--lb-danger) !important; }

/* — Les tuiles de navigation : pictogrammes turquoise, libellés marine ; la tuile active
     reste pleine, en marine. — */
.dashboard-tabs .nav-link:not(.active) .nav-icon .svg-icon svg g [fill] { fill: var(--lb-turquoise-ink) !important; }
.dashboard-tabs .nav-link:not(.active) .nav-text { color: var(--lb-marine) !important; }
.dashboard-tabs .nav-link:not(.active):hover { background-color: var(--lb-turquoise-light) !important; border-color: var(--lb-turquoise-ink) !important; }

/* — Les alertes du thème (`alert-custom alert-light-*`) — */
.alert.alert-custom.alert-light-primary { background-color: var(--lb-marine-light) !important; color: var(--lb-marine) !important; }
.alert.alert-custom.alert-light-success { background-color: var(--lb-success-bg) !important; color: var(--lb-success) !important; }
.alert.alert-custom.alert-light-warning { background-color: var(--lb-warning-bg) !important; color: var(--lb-warning) !important; }
.alert.alert-custom.alert-light-info { background-color: var(--lb-info-bg) !important; color: var(--lb-info) !important; }
.alert.alert-custom.alert-light-danger { background-color: var(--lb-danger-bg) !important; color: var(--lb-danger) !important; }
.alert.alert-custom[class*="alert-light-"] .alert-text { color: inherit !important; }
.alert.alert-custom.alert-light-primary .alert-icon i, .alert.alert-custom.alert-light-primary .alert-icon .svg-icon svg g [fill] { color: var(--lb-marine) !important; fill: var(--lb-marine) !important; }
.alert.alert-custom.alert-light-success .alert-icon i, .alert.alert-custom.alert-light-success .alert-icon .svg-icon svg g [fill] { color: var(--lb-success) !important; fill: var(--lb-success) !important; }
.alert.alert-custom.alert-light-warning .alert-icon i, .alert.alert-custom.alert-light-warning .alert-icon .svg-icon svg g [fill] { color: var(--lb-warning) !important; fill: var(--lb-warning) !important; }
.alert.alert-custom.alert-light-info .alert-icon i, .alert.alert-custom.alert-light-info .alert-icon .svg-icon svg g [fill] { color: var(--lb-info) !important; fill: var(--lb-info) !important; }
.alert.alert-custom.alert-light-danger .alert-icon i, .alert.alert-custom.alert-light-danger .alert-icon .svg-icon svg g [fill] { color: var(--lb-danger) !important; fill: var(--lb-danger) !important; }

/* — Le calendrier (FullCalendar 5) : la vue active en marine, les autres en marine pâle,
     « Aujourd'hui » à contour, la colonne du jour en turquoise très pâle. `body` devant : la
     feuille du calendrier est chargée APRÈS celle-ci, et gagnerait à spécificité égale. — */
body .fc .fc-button-primary {
    background-color: var(--lb-marine-light);
    border-color: var(--lb-marine-light);
    color: var(--lb-marine);
    font-weight: 600;
}
body .fc .fc-button-primary:hover { background-color: #D5E1EE; border-color: #D5E1EE; color: var(--lb-marine); }
body .fc .fc-button-primary:not(:disabled).fc-button-active,
body .fc .fc-button-primary:not(:disabled):active {
    background-color: var(--lb-marine);
    border-color: var(--lb-marine);
    color: #fff;
}
body .fc .fc-button-primary:focus,
body .fc .fc-button-primary:not(:disabled).fc-button-active:focus,
body .fc .fc-button-primary:not(:disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(6, 50, 92, .2); }
body .fc .fc-today-button.fc-button-primary { background-color: var(--lb-white); border-color: var(--lb-marine); color: var(--lb-marine); }
body .fc .fc-today-button.fc-button-primary:disabled { background-color: var(--lb-white); border-color: var(--lb-border-strong); color: var(--lb-text-muted); opacity: 1; }
body .fc .fc-daygrid-day.fc-day-today,
body .fc .fc-timegrid-col.fc-day-today { background-color: rgba(0, 115, 111, .06); }

/* — Le sélecteur de périodes (daterangepicker) — */
body .daterangepicker td.active,
body .daterangepicker td.active:hover { background-color: var(--lb-marine) !important; color: #fff !important; }
body .daterangepicker td.in-range { background-color: var(--lb-marine-light); color: var(--lb-marine); }
body .daterangepicker td.available:hover,
body .daterangepicker th.available:hover { background-color: var(--lb-turquoise-light); }
body .daterangepicker .ranges li:hover { background-color: var(--lb-marine-light); }
body .daterangepicker .ranges li.active { background-color: var(--lb-marine) !important; color: #fff !important; }

/* — Le sélecteur de date et d'heure (jquery.datetimepicker) : il survolait en orange — */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
    background: var(--lb-marine) !important;
    box-shadow: none !important;
    color: #fff !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
    background: var(--lb-turquoise-ink) !important;
    color: #fff !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: var(--lb-turquoise-ink) !important; }

/* — Les listes de choix (select2) — */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted { background-color: var(--lb-marine-light) !important; color: var(--lb-marine) !important; }
.select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--lb-turquoise-light) !important; color: var(--lb-turquoise-ink) !important; }

/* — Les boîtes de dialogue (SweetAlert2) — */
.swal2-popup .swal2-styled.swal2-confirm { background-color: var(--lb-marine) !important; }
.swal2-popup .swal2-styled.swal2-cancel { background-color: var(--lb-white) !important; color: var(--lb-marine) !important; border: 1px solid var(--lb-border-strong) !important; }
.swal2-popup .swal2-icon.swal2-warning { border-color: #E9C98A !important; color: var(--lb-warning) !important; }
.swal2-popup .swal2-icon.swal2-info,
.swal2-popup .swal2-icon.swal2-question { border-color: #A9C4E4 !important; color: var(--lb-info) !important; }
.swal2-popup .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--lb-turquoise-ink) !important; }
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(0, 115, 111, .3) !important; }

/* ═════════════════════════════════════════════════════════════════════════════
   3. ACCESSIBILITÉ — CE QUE LE THÈME NE FAIT PAS
   ═════════════════════════════════════════════════════════════════════════════ */

/* UN FOCUS VISIBLE. Metronic le supprimait : au clavier, on ne savait plus où l'on
   se trouvait, ce qui rend le back-office inutilisable sans souris. */
.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(0, 154, 150, .45);
    outline-offset: 2px;
}

/* LE FOCUS D'UN CHAMP N'EST PAS UNE ERREUR.
   Le thème borde en rouge le champ actif — la même teinte que la validation en
   échec. Un filtre qu'on vient d'ouvrir ressemblait donc à un champ mal rempli. */
.form-control:focus,
.form-select:focus,
select.form-control:focus,
select:focus,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--lb-turquoise-ink) !important;
    box-shadow: 0 0 0 .2rem rgba(0, 154, 150, .15) !important;
    outline: none;
}

/* La bordure rouge reste réservée à ce qui l'est vraiment : un champ invalide. */
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated select:invalid { border-color: var(--lb-danger) !important; }

/* Les états, assez sombres pour être lus. Le turquoise d'origine du thème
   n'atteignait pas le contraste AA sur blanc. */
.label.label-light-success, .badge-light-success { background: var(--lb-success-bg); color: var(--lb-success); }
.label.label-light-warning, .badge-light-warning { background: var(--lb-warning-bg); color: var(--lb-warning); }
.label.label-light-info,    .badge-light-info    { background: var(--lb-info-bg);    color: var(--lb-info); }

/* ── Au téléphone : les boutons en tête d'une carte (06/11/2026, retours d'Amory) ──
   Le thème les posait côte à côte avec des marges d'écran large (`mr-2`, `ml-lg-3`) : au téléphone, ils
   se collaient ou s'empilaient, de hauteurs et de largeurs différentes. Un écart régulier, une même
   hauteur, et — quand deux longs libellés ne tiennent pas — un libellé court : `.libelle-long` sur
   ordinateur, `.libelle-court` au téléphone. */
.libelle-court { display: none; }
@media (max-width: 767.98px) {
    .card-header > .card-toolbar { gap: 8px; }
    .card-header > .card-toolbar > * { margin-left: 0 !important; margin-right: 0 !important; }
    .card-header > .card-toolbar > .btn { display: inline-flex; align-items: center; min-height: 36px; max-width: 100%; text-align: left; }
    .card-header > .card-toolbar > .btn .svg-icon svg { width: 18px !important; height: 18px !important; }
    .libelle-long { display: none; }
    .libelle-court { display: inline; }
}

/* ── Les lignes dépliées des tableaux (06/11/2026, retours d'Amory) ──
   Au téléphone, DataTables replie les colonnes qui ne tiennent pas sous la ligne, en « libellé : valeur ».
   La colonne des actions y héritait de son alignement à droite (`text-right`) : « Actions: » flottait au
   milieu et les boutons passaient sur deux lignes. Chaque détail sur sa ligne, le libellé en gris à gauche,
   la valeur à droite ; les boutons d'action en rangée, sans libellé — ce sont des boutons. */
table.dataTable > tbody > tr.child ul.dtr-details { display: block; width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex !important; /* le thème impose `table-row !important` */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--lb-border) !important;
    text-align: left !important;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0 !important; }
/* Un long courriel revient à la ligne : sans quoi il élargissait tout le tableau, coupé par la carte. */
table.dataTable > tbody > tr.child span.dtr-title { display: block !important; flex: 0 0 auto; max-width: 45%; padding: 0 !important; border: 0 !important; color: var(--lb-text-muted); font-weight: 600; }
table.dataTable > tbody > tr.child span.dtr-data { display: block !important; flex: 1 1 auto; min-width: 0; padding: 0 !important; border: 0 !important; text-align: right; color: var(--lb-text); overflow-wrap: anywhere; }
table.dataTable > tbody > tr.child ul.dtr-details > li:has(.btn) .dtr-title { display: none !important; }
table.dataTable > tbody > tr.child ul.dtr-details > li:has(.btn) .dtr-data {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:has(.btn) .dtr-data > *,
table.dataTable > tbody > tr.child ul.dtr-details > li:has(.btn) .dtr-data .btn { margin: 0 !important; }

/* ── Volet de notifications : les quatre onglets sur UNE ligne (06/11/2026, relevé par Amory) ──
   « Contact » devenu « Demandes » : « Autre » passait à la ligne dans les 375 px du volet (338 sur un
   téléphone). Plus de retour à la ligne, des écarts resserrés, et les onglets répartis sur la largeur. */
#kt_quick_notifications .nav-tabs { flex-wrap: nowrap; justify-content: space-between; min-width: 0; padding-left: 14px !important; padding-right: 14px !important; }
#kt_quick_notifications .nav-tabs .nav-item { flex: 0 0 auto; }
#kt_quick_notifications .nav-tabs .nav-link { margin-left: 0 !important; margin-right: 0 !important; white-space: nowrap; }
#kt_quick_notifications .nav-tabs .nav-link .label { margin-left: 5px !important; }
@media (max-width: 374.98px) {
    #kt_quick_notifications .nav-tabs { padding-left: 8px !important; padding-right: 8px !important; }
    #kt_quick_notifications .nav-tabs .nav-link { font-size: 12px; }
    #kt_quick_notifications .nav-tabs .nav-link .label { margin-left: 3px !important; }
}
@media (max-width: 339.98px) {
    #kt_quick_notifications .nav-tabs { padding-left: 4px !important; padding-right: 4px !important; }
    #kt_quick_notifications .nav-tabs .nav-link { font-size: 11px; }
}

/* ── Impression ──
   Un bon de commande s'imprime : la navigation et les boutons n'ont rien à y faire. */
@media print {
    .aside, .header, .header-mobile, .btn, .dataTables_paginate, .dataTables_filter { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc; }
    body { background: #fff; }
}

/* L'onglet « Indésirables » de la carte des demandes (08/11/2026) : une ligne par message, le texte à
   gauche, les boutons à droite ; au téléphone, les boutons passent sous le texte. */
.lb-indesirable { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; padding: .9rem 0; border-top: 1px solid #EBEDF3; }
.lb-indesirable-texte { flex: 1 1 320px; min-width: 0; }
.lb-indesirable-actions { flex: 0 0 auto; display: flex; align-items: center; }

/* Le suivi d'un nom de domaine acheté (08/11/2026) : quatre étapes en ligne, faites en turquoise, celle en
   cours en marine ; au téléphone, deux par ligne. Voir templates/admin/store/_domaine_achete.html.twig. */
.domaine-suivi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.domaine-suivi__etape { padding: .6rem .5rem; border-radius: .42rem; border: 1px solid var(--lb-border); color: var(--lb-text-muted); text-align: center; font-weight: 600; font-size: .95rem; }
.domaine-suivi__etape--fait { background: var(--lb-turquoise-light); border-color: var(--lb-turquoise-light); color: var(--lb-turquoise-ink); }
.domaine-suivi__etape--encours { background: var(--lb-marine-light); border-color: var(--lb-marine-light); color: var(--lb-marine); }
@media (max-width: 575.98px) { .domaine-suivi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }