/*
 * organisme/assets/css/complement.css
 *
 * Complément local à AdminLTE. Règle de conduite : ne JAMAIS modifier assets/adminlte/css/
 * adminlte.min.css — c'est un fichier de distribution, toute retouche y serait effacée à la
 * première mise à jour du socle. Tout écart au thème se pose ici.
 *
 * ⚠️ Piège déjà rencontré ailleurs sur ce dépôt (voir la note « complement.css annulé par
 * settings.js ») : un fichier de complément peut être réinjecté APRÈS par un script de thème et se
 * faire écraser. Ici, complement.css est chargé en DERNIER dans <head> et aucun script ne réinjecte
 * de CSS — si un jour l'un des deux change, revérifier l'ordre réel dans l'inspecteur, pas dans le
 * code source.
 */

/* Le socle AdminLTE n'a pas de variante « entrée de menu inerte » : sans cela, une entrée « à
   venir » garde le curseur main et l'effet de survol, donc a l'air cliquable. */
.sidebar-menu .nav-link[aria-disabled="true"] {
    cursor: default;
}

.sidebar-menu .nav-link[aria-disabled="true"]:hover {
    background-color: transparent;
}

/* La pastille de lot ne doit pas peser autant que le libellé qu'elle qualifie — ni lui voler sa
   place : compacte au maximum, sinon « Offre de séjours » et « Tarifs et remises » se font tronquer
   dans la largeur fixe du menu (constaté à l'écran, pas supposé). */
.sidebar-menu .badge {
    font-weight: 400;
    font-size: .65rem;
    padding: .2em .4em;
}

/* Le `float-end` d'AdminLTE fait passer la pastille à la ligne dès que le libellé est un peu long
   (« Tarifs et remises », « Comptabilité »), ce qui déforme la hauteur des entrées et casse
   l'alignement vertical du menu. Un flex avec justify-content résout le cas général : libellé à
   gauche, pastille collée à droite, toujours sur une seule ligne.
   Vaut pour les deux cas : entrées inertes portant leur numéro de lot, et entrées actives portant
   une pastille chiffrée. Une CLASSE explicite plutôt que :has(), pour ne dépendre d'aucun support
   récent du navigateur. */
.sidebar-menu .nav-link[aria-disabled="true"] > p,
.sidebar-menu .org-menu-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
}

.sidebar-menu .nav-link[aria-disabled="true"] > p .badge,
.sidebar-menu .org-menu-ligne .badge {
    flex: 0 0 auto;
}

/* La pastille de demandes en attente appelle l'action : elle doit peser plus que la pastille de lot,
   qui n'est qu'une étiquette documentaire. D'où le rétablissement d'une graisse et d'une taille
   normales, que la règle générique .sidebar-menu .badge avait volontairement rabaissées. */
.sidebar-menu .org-pastille {
    font-weight: 600;
    font-size: .75rem;
    padding: .25em .5em;
}

/* Le libellé cède avant la pastille si la place manque (menu étroit, zoom important).
   ⚠️ `min-width: 0` est INDISPENSABLE (05/10/2026) : sans lui, un élément flex ne descend jamais
   sous la largeur de son contenu, l'ellipse ne se déclenche pas, et c'est la pastille qui est
   poussée hors du cadre puis rognée. Constaté sur « Informations parents à vérifier » : la
   pastille « 10 » s'affichait sur « Inscriptions » mais nulle part dans le sous-menu. */
.org-menu-libelle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}
.sidebar-menu .org-menu-ligne {
    min-width: 0;
}

/* Libellé en rouge tant qu'une pastille le concerne (demande du propriétaire, 05/10/2026) : un
   libellé long reste tronqué, et le rouge désigne la bonne entrée même quand on ne lit que le
   début. ⚠️ `--bs-danger`, le MÊME rouge que la pastille (`text-bg-danger`) : la première version
   prenait `--bs-danger-text-emphasis`, un bordeaux terne que le propriétaire a jugé trop faible et
   sans lien visible avec la pastille. Pas sur l'entrée active : du rouge sur le fond bleu ne se
   lirait pas. */
.sidebar-menu .nav-link:not(.active) .org-menu-alerte .org-menu-libelle {
    color: var(--bs-danger);
    font-weight: 600;
}

/* Bandeau d'avertissement de l'échafaudage : visible sans être criard, et lisible dans les deux
   thèmes (AdminLTE 4 bascule via data-bs-theme, les variables Bootstrap suivent automatiquement). */
.org-avertissement {
    border-left: .25rem solid var(--bs-warning);
}

/* Pot de miel du formulaire public de demande d'ouverture.
   ⚠️ NE PAS remplacer par `display: none` seul : certains robots ignorent les champs en display:none
   (c'est le piège le plus connu) alors qu'ils remplissent ceux qui sont simplement sortis du cadre.
   Le champ porte par ailleurs aria-hidden et tabindex="-1" côté HTML, pour qu'aucune personne au
   clavier ou au lecteur d'écran ne puisse tomber dedans et voir sa demande rejetée sans explication. */
/* Champ de saisie du code à 6 chiffres : espacé et centré, pour qu'on relise sans effort ce qu'on
   vient de recopier depuis sa boîte mail. */
.org-champ-code {
    letter-spacing: .6em;
    font-weight: 600;
    padding-left: .6em; /* compense l'espacement, qui décentre visuellement vers la gauche */
    max-width: 14rem;
    margin-inline: auto;
}

/* ============================================================================================
   SOUS-MENUS DU MENU LATÉRAL (demandes du 11/08/2026)
   ============================================================================================ */

/* 1. Décalage vers la droite + trait de rattachement.
   AdminLTE propose bien une classe `.nav-indent`, mais elle se contente d'un padding-left de .5rem
   sur le <ul> : à l'œil, le sous-menu reste aligné avec son titre et rien ne dit visuellement qu'il
   en dépend. On pose donc le décalage ici, avec un filet vertical qui rattache les enfants au
   parent — c'est lui qui fait comprendre la hiérarchie, plus que le décalage lui-même.
   La barre latérale porte data-bs-theme="dark" en dur (voir index.php) : le blanc translucide y est
   donc toujours le bon choix, quel que soit le thème choisi par la personne. */
.sidebar-menu .nav-treeview {
    margin-left: 1.15rem;
    padding-left: .35rem;
    border-left: 2px solid rgba(255, 255, 255, .15);
}

/* 2. Fond distinct pour le sous-menu SÉLECTIONNÉ.
   ⚠️ Cause réelle du problème signalé : AdminLTE donne la MÊME valeur aux deux fonds —
   `--lte-sidebar-menu-active-bg` et `--lte-sidebar-submenu-active-bg` valent tous deux
   rgba(255,255,255,0.1) en thème sombre. Le titre du menu ouvert et l'entrée sélectionnée étaient
   donc rigoureusement de la même couleur.

   On redéfinit la VARIABLE plutôt que la règle : la déclaration d'AdminLTE
   (`.sidebar-wrapper .nav-treeview>.nav-item>.nav-link.active`) la lit telle quelle, et l'état de
   survol reste cohérent sans qu'on ait à le réécrire.
   ⚠️ Les trois sélecteurs reprennent EXACTEMENT ceux du socle (`.app-sidebar` et sa variante
   `[data-bs-theme=dark]`) : à spécificité égale, c'est l'ordre de chargement qui tranche, et
   complement.css est chargé en dernier. Un sélecteur plus faible se ferait écraser en silence —
   piège de spécificité déjà rencontré sur ce dépôt. */
.app-sidebar,
[data-bs-theme=dark] .app-sidebar,
[data-bs-theme=dark].app-sidebar {
    --lte-sidebar-submenu-active-bg: var(--bs-primary);
    --lte-sidebar-submenu-active-color: #fff;
}

/* Le filet de rattachement disparaîtrait sous le fond plein de l'entrée sélectionnée : on le rend
   franc à cet endroit, pour que l'entrée reste visuellement accrochée à son parent. */
.sidebar-menu .nav-treeview > .nav-item > .nav-link.active {
    border-radius: .25rem;
}

/* ============================================================================================
   MODALES LONGUES — barre de défilement (constaté le 12/08/2026)
   ============================================================================================ */

/* ⚠️ CONSTAT, mesuré dans le navigateur le 12/08/2026 : tout était pourtant en place —
   `.modal-content` en `flex/column` à 804 px avec `max-height:100%` et `overflow:hidden`,
   `.modal-body` en `flex: 1 1 auto` avec `min-height: 0` et `overflow-y: auto` — et POURTANT le
   corps restait à 977 px, débordait, et se faisait couper sans jamais produire de barre.
   La chaîne flex de `.modal-dialog-scrollable` ne contraint donc pas le corps sur ce socle
   (AdminLTE embarque sa propre compilation de Bootstrap).

   On cesse d'en dépendre : le corps est borné DIRECTEMENT en unités de fenêtre. Moins élégant,
   mais indépendant de toute la chaîne de mise en page — et vérifiable. Les ~200 px retranchés
   couvrent l'en-tête, le pied et les marges de la modale. */
.modal-dialog-scrollable .modal-body,
.modal-xl .modal-body,
.modal-lg .modal-body {
    max-height: calc(100vh - 200px);
    min-height: 0;
    overflow-y: auto;
}

/* La barre doit se VOIR : sur un formulaire de cent champs, une zone qui défile sans le montrer
   laisse croire que la fiche s'arrête là. Discrète, mais présente. */
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, .55) transparent;
}

.modal-body::-webkit-scrollbar {
    width: .55rem;
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, .55);
    border-radius: .3rem;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, .8);
}

/* ⚠️ Des en-têtes de section « collants » (position: sticky) avaient été essayés ici puis RETIRÉS
   le 12/08/2026 : toutes les rubriques partageant le même conteneur, elles se collaient toutes au
   même endroit et laissaient dépasser les champs qui défilaient derrière. Le remède était pire que
   le mal. Ne pas les remettre sans traiter ce point. */

.org-pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =================================================================================================
   LIGNES DE TABLEAU CONTEXTUELLES EN MODE SOMBRE — corrigé le 13/08/2026 (signalé en capture).

   ⚠️ LE PIÈGE : `.table-warning` (et ses variantes) ne posent qu'un FOND clair. La couleur du texte,
   elle, reste celle du thème sombre — un gris très clair. Résultat : gris clair sur beige, illisible.
   Ce n'est pas propre à ce projet, c'est le comportement de Bootstrap 5.3 dès qu'on mélange une
   classe contextuelle et `data-bs-theme="dark"`.

   La correction passe par les VARIABLES et non par une règle `color:` : Bootstrap recalcule
   `--bs-table-color` sur chaque cellule, et une déclaration directe serait écrasée par la sienne.

   ⚠️ `.text-body-secondary` porte un `!important` dans Bootstrap — piège déjà rencontré le
   12/08/2026 sur le suivi des inscriptions, et diagnostiqué à l'époque en mesurant les styles
   calculés. Le neutraliser demande donc un `!important` à son tour ; sans lui, la ligne d'information
   sous le nom du séjour reste illisible alors que le titre, lui, aura été corrigé.
   ================================================================================================= */
.table > :not(caption) > tr.table-warning > *,
.table > :not(caption) > tr.table-danger > *,
.table > :not(caption) > tr.table-success > *,
.table > :not(caption) > tr.table-info > * {
    --bs-table-color: #1a1a1a;
    --bs-table-color-state: #1a1a1a;
    color: #1a1a1a;
}

/* Les nuances de gris et les liens hérités du thème sombre deviennent invisibles sur ces fonds. */
.table > :not(caption) > tr.table-warning .text-body-secondary,
.table > :not(caption) > tr.table-danger .text-body-secondary,
.table > :not(caption) > tr.table-success .text-body-secondary,
.table > :not(caption) > tr.table-info .text-body-secondary {
    color: #4a4a4a !important;
}

.table > :not(caption) > tr.table-warning a:not(.btn),
.table > :not(caption) > tr.table-danger a:not(.btn),
.table > :not(caption) > tr.table-success a:not(.btn),
.table > :not(caption) > tr.table-info a:not(.btn) {
    color: #0a3d62;
}

/* =================================================================================================
   LISTES DÉROULANTES EN MODE SOMBRE — ajouté le 13/08/2026 (signalé en capture sur la période
   d'activité, à la création d'un séjour).

   ⚠️ LE PIÈGE : la liste déroulante d'un `<select>` est dessinée par le NAVIGATEUR, et elle hérite
   du `background-color` du champ — pas de sa couleur de texte, qui reste celle du thème. Dès qu'une
   règle pose un fond sur un `<select>` (signalement d'un champ manquant, teinte d'état…), les
   options deviennent gris pâle sur fond clair. Le champ fermé, lui, reste parfaitement lisible :
   le défaut ne se voit qu'en ouvrant la liste.

   Deux protections, l'une n'excusant pas l'autre :
     1. NE PAS poser de `background-color` sur un `<select>` (voir `.org-manque`) ;
     2. et, quoi qu'il arrive, forcer ici la couleur des options — un fond posé demain par une autre
        règle ne rendra pas la liste illisible pour autant.
   ================================================================================================= */
.form-select option,
select.form-control option {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* Une option indisponible doit RESTER visiblement indisponible — sans redevenir illisible.
   `--bs-secondary-color` suit le thème, contrairement à un gris écrit en dur. */
.form-select option:disabled,
select.form-control option:disabled {
    color: var(--bs-secondary-color);
}

/* =============================================================================================
   PLACEHOLDERS — 20/08/2026, demande du propriétaire.
   =============================================================================================

   ⚠️ LE PROBLÈME : « elles donnent vraiment l'impression que quelque chose est déjà écrit ». Le
   placeholder de Bootstrap reprend la couleur du corps de texte simplement atténuée ; sur une
   fiche de soixante champs vides, l'œil lit soixante valeurs et il faut cliquer pour découvrir
   qu'il n'y a rien. C'est d'autant plus gênant ici que le module a fait le choix, partout, de
   loger le NOM du champ dans son placeholder plutôt que dans un libellé.

   Ce que ces règles font : le placeholder devient nettement plus clair, et surtout ITALIQUE. La
   pente est ce qui distingue une invite d'une saisie au premier coup d'œil, avant même que la
   nuance de gris ne soit jugée — un texte penché n'a jamais l'air d'avoir été tapé par quelqu'un.

   ⚠️ PAS EN DESSOUS DE 0.55 D'OPACITÉ : le placeholder porte le nom du champ, il doit rester
   LISIBLE. Adoucir jusqu'à l'effacement remplacerait un défaut par un autre, plus grave, et
   sortirait du contraste minimal exigé pour un texte utile.

   ⚠️ Le sélecteur `::placeholder` seul suffit pour tous les navigateurs visés (Chrome, Firefox,
   Safari, Edge). Les anciens préfixes sont volontairement absents : groupés dans une même règle,
   un préfixe non reconnu invaliderait TOUTE la déclaration, et l'on perdrait l'effet partout.
*/
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
    font-style: italic;
    opacity: 0.55;
    /* `currentColor` plutôt qu'un gris fixe : la fiche se lit aussi en thème sombre, où un gris
       codé en dur deviendrait soit illisible, soit plus voyant que le texte réel. */
    color: currentColor;
}

/* Le champ actif est celui qu'on remplit : son invite s'efface encore un peu pour laisser toute la
   place à ce qu'on tape, sans disparaître tant qu'aucun caractère n'est saisi. */
.form-control:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0.4;
}

/* =============================================================================================
   LIBELLÉ AU-DESSUS DES SÉLECTEURS — 20/08/2026, demande du propriétaire.
   =============================================================================================

   Un `<select>` n'a PAS de placeholder : le module y logeait donc le nom du champ dans la première
   option (« Sexe… »), qui disparaît dès qu'on choisit. La fiche perdait le nom du champ au moment
   précis où elle se remplissait. Les champs `date` avaient déjà reçu, eux, un libellé en petit
   au-dessus — faute de placeholder affichable. On étend ce même traitement aux sélecteurs.

   ⚠️ MÊME CLASSE que les dates (`.orga-mini-label`), et non un style parallèle : deux champs
   voisins portant le même rôle doivent s'écrire pareil, sinon l'alignement de la ligne se défait.
*/
.orga-mini-label {
    font-size: .75rem;
    line-height: 1;
    margin-bottom: .15rem;
    opacity: .7;
    /* Tronqué plutôt que replié : un libellé long ferait descendre son champ d'une demi-ligne et
       casserait l'alignement de toute la rangée. L'intitulé complet reste dans l'info-bulle. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================================================================
   TITRES DE SECTION D'UNE FICHE — 20/08/2026, demande du propriétaire.
   =============================================================================================

   « Identité », « Prise en charge et situation sociale », « Assurance », « Règlements affectés à
   cette inscription », « Allergènes à déclaration obligatoire »… Ces intertitres étaient en
   `text-body-secondary`, c'est-à-dire PLUS PÂLES que les données qu'ils annoncent : sur une fiche
   de soixante champs, ils ne découpaient plus rien.

   ⚠️ PREMIER JET INSUFFISANT, à ne pas refaire : un simple changement de couleur du texte (bleu
   soutenu sur fond clair) a été jugé trop discret le jour même — « quelque chose de bien visible
   qui permet de se positionner facilement ». Un titre coloré parmi soixante champs reste du texte
   parmi du texte ; ce qu'on cherche, c'est un REPÈRE qu'on attrape en faisant défiler sans lire.
   D'où l'aplat pleine largeur : c'est la surface, pas la teinte, qui se voit de loin.

   ⚠️ UNE SEULE COULEUR pour toutes les sections (choix du propriétaire, contre une teinte par
   section) : le bandeau sert à SÉPARER, pas à qualifier. Huit teintes différentes sur une fiche
   auraient fait croire à un code couleur porteur de sens, qu'il aurait fallu apprendre.

   ⚠️ `color: #fff` en dur, et non une variable de thème : le fond est un aplat de couleur PLEINE
   dans les deux thèmes, donc le texte doit rester blanc dans les deux. Une variable qui suit le
   thème donnerait du bleu foncé sur bleu en mode nuit.
*/
.orga-titre-section {
    display: block;
    background-color: var(--bs-primary);
    color: #fff;
    text-transform: uppercase;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .35rem .75rem;
    border-radius: .25rem;
    /* L'air AVANT le bandeau est ce qui rattache visuellement chaque section à SES champs : sans
       lui, un titre paraît appartenir au bloc qu'il vient de clore. */
    margin-top: 1.25rem;
    margin-bottom: .5rem;
}

/* Le tout premier titre d'un onglet n'a rien au-dessus de lui à séparer : sa marge haute ne
   ferait qu'ouvrir un trou sous la barre d'onglets. */
.tab-pane > .orga-titre-section:first-child,
.orga-titre-section:first-child {
    margin-top: 0;
}

/* =================================================================================================
   LIGNES DE THÉMATIQUE — marron clair, lisibles dans LES DEUX THÈMES (généralisé le 21/08/2026).

   ⚠️ POURQUOI CE BLOC EST ICI ET NON DANS UN ÉCRAN. La convention existait déjà sur le suivi des
   inscriptions, mais enfermée dans un `<style>` préfixé `#orgTableSuivi`. L'onglet « Séjours » de la
   fiche enfant montre EXACTEMENT la même chose et utilisait `table-light` — qui pose un fond CLAIR
   quel que soit le thème : ligne blanche au milieu d'un écran sombre (signalé le 21/08/2026).
   Deux écrans, une seule définition : c'est le seul moyen qu'ils ne divergent plus.

   ⚠️ LE MARRON RESTE CLAIR EN THÈME SOMBRE, et le texte passe en foncé. C'est voulu : la couleur du
   texte suit SON FOND, pas le thème. Une couleur ne se choisit jamais sans son texte.

   ⚠️ `box-shadow: none` : Bootstrap peint le survol et le zébrage par une ombre interne qui recouvre
   `background-color`. Sans l'annuler, le marron serait masqué une ligne sur deux.
   ================================================================================================= */
:root {
    --org-them-fond: #e8d5bd;
    --org-them-texte: #3b2c1d;
    --org-them-doux: #6d5a43;
}
[data-bs-theme=dark] {
    --org-them-fond: #d9c2a3;
    --org-them-texte: #2e2318;
    --org-them-doux: #5c4a35;
}
.table > tbody > tr.org-them > td {
    background-color: var(--org-them-fond);
    color: var(--org-them-texte);
    box-shadow: none;
}
/* La première cellule reprend le fond des lignes de séjour : c'est ce décalage qui fait voir que la
   thématique APPARTIENT au séjour du dessus au lieu de le concurrencer.

   ⚠️⚠️ ET ELLE REPREND AUSSI SA COULEUR DE TEXTE (corrigé le 21/08/2026, signalé en capture par le
   propriétaire : « les thématiques sont illisibles »). La règle ne remettait que le FOND : le texte
   gardait `--org-them-texte`, un brun foncé prévu pour le marron clair, et se retrouvait donc en
   brun sur l'anthracite du thème sombre — mesuré à l'écran, #2e2318 sur #212529. Le nom de la
   thématique était purement et simplement invisible, seul son badge d'âge se voyait.

   ⚠️ C'est la même leçon que trois lignes plus haut : une couleur ne se choisit JAMAIS sans son
   texte. Changer un fond sans changer la couleur qui va avec, c'est fabriquer un texte invisible —
   ici dans une cellule, ailleurs dans un `<select>`. */
.table > tbody > tr.org-them > td:first-child {
    background-color: var(--bs-table-bg);
    color: var(--bs-body-color);
    box-shadow: none;
}
/* ⚠️ `!important` OBLIGATOIRE : `.text-body-secondary` est une classe utilitaire de Bootstrap,
   déclarée elle-même en `!important`. Aucune spécificité ne peut la battre autrement — sans cela le
   texte reste en gris CLAIR sur marron clair, donc illisible en thème sombre. */
.table > tbody > tr.org-them > td:not(:first-child) .text-body-secondary,
.table > tbody > tr.org-them > td:not(:first-child) .form-text {
    color: var(--org-them-doux) !important;
}
/* ⚠️ `:not(:first-child)` (21/08/2026) : le brun doux est fait pour le fond marron. Appliqué dans
   la première cellule, restée au fond du tableau, il donnait une flèche et un texte secondaire bruns
   sur anthracite — le même défaut que le nom, en plus discret. Cette cellule suit le thème. */