/* =============================================================================
   Carto — thème
   Consomme public/css/carto-tokens.css. À charger juste après Bootstrap.
   =============================================================================

   ── Pourquoi une couche de pont plutôt qu'un remplacement ──────────────────
   Le Web de Carto est construit sur Bootstrap 5.3 : 11 pages en utilisent les
   classes, DataTables s'appuie sur son intégration bootstrap5. Réécrire ces
   pages pour changer leur apparence serait exactement la « réécriture globale
   uniquement pour changer l'apparence » que la charte demande d'éviter.

   Bootstrap 5.3 expose ses propres variables CSS. On les redirige donc vers
   les tokens Carto : une page qui écrit `btn btn-primary` obtient le bleu
   Carto sans être touchée, et les 11 pages basculent d'un coup.

   Deux limites connues de Bootstrap 5.3, qui expliquent la longueur de ce
   fichier :
     - les variantes de composant (`.btn-primary`, `.alert-danger`…) inscrivent
       une valeur **compilée** dans leurs variables locales, pas un
       `var(--bs-primary)`. Redéfinir `--bs-primary` seul ne suffit donc pas :
       chaque variante utilisée est reprise explicitement ci-dessous ;
     - les utilitaires `.text-primary` / `.bg-primary` passent, eux, par
       `--bs-primary-rgb`, qu'il suffit de redéfinir.
   ========================================================================== */

/* =============================================================================
   1 · Redirection des variables Bootstrap vers les tokens
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --bs-body-font-family: var(--carto-font-sans);
    --bs-body-font-size:   var(--carto-text-body);
    --bs-body-line-height: 1.5;
    --bs-body-color:       var(--carto-text-primary);
    --bs-body-bg:          var(--carto-background-default);
    --bs-emphasis-color:   var(--carto-text-primary);
    --bs-secondary-color:  var(--carto-text-secondary-color);

    /* Bootstrap compose plusieurs couleurs dans des `rgba()` et attend donc un
       triplet. Les triplets vivent maintenant dans les tokens, où ils suivent
       le thème : les réécrire en dur ici figeait les liens sur le bleu clair,
       y compris sur fond nuit — c'était la cause du `a` resté en #1558FF. */
    --bs-primary:     var(--carto-action-primary);
    --bs-primary-rgb: var(--carto-action-primary-rgb);

    --bs-link-color:           var(--carto-action-primary);
    --bs-link-color-rgb:       var(--carto-action-primary-rgb);
    --bs-link-hover-color:     var(--carto-action-primary-hover);
    --bs-link-hover-color-rgb: var(--carto-action-primary-hover-rgb);

    --bs-body-color-rgb:     var(--carto-text-primary-rgb);
    --bs-body-bg-rgb:        var(--carto-background-default-rgb);
    --bs-emphasis-color-rgb: var(--carto-text-primary-rgb);

    /* ── Surfaces secondaires de Bootstrap ─────────────────────────────────
       Ces quatre variables ne sont jamais consommées directement par une page,
       et c'est pour cela qu'elles avaient été oubliées. Elles sont pourtant le
       fond réel de `.input-group-text`, `.popover-header`, `.progress`, du
       survol d'un `.dropdown-item`, d'un `.page-link` désactivé et des onglets.
       Laissées aux valeurs de Bootstrap, elles peignaient une boîte #f8f9fa au
       milieu d'une page nuit, avec le texte clair hérité par-dessus. */
    --bs-secondary-bg:     var(--carto-surface-secondary);
    --bs-tertiary-bg:      var(--carto-surface-secondary);
    --bs-secondary-color:  var(--carto-text-secondary-color);
    --bs-tertiary-color:   var(--carto-text-disabled);
    --bs-body-secondary-color: var(--carto-text-secondary-color);
    --bs-body-secondary-bg:    var(--carto-surface-secondary);
    --bs-body-tertiary-color:  var(--carto-text-disabled);
    --bs-body-tertiary-bg:     var(--carto-surface-secondary);

    /* `rgba(0,0,0,.175)` : invisible sur fond sombre. C'est la bordure des
       menus déroulants, des popovers et des tableaux `.table-bordered`. */
    --bs-border-color-translucent: var(--carto-border-default);

    /* ── Familles d'état de Bootstrap ──────────────────────────────────────
       `.alert-*` est déjà repris plus bas, mais les mêmes variables servent à
       `.list-group-item-*`, à l'accordéon ouvert et aux `.link-*`. Les mapper
       ici évite d'avoir à reprendre chaque composant un par un. */
    --bs-primary-bg-subtle:   var(--carto-status-info-bg);
    --bs-secondary-bg-subtle: var(--carto-status-offline-bg);
    --bs-success-bg-subtle:   var(--carto-status-success-bg);
    --bs-info-bg-subtle:      var(--carto-status-info-bg);
    --bs-warning-bg-subtle:   var(--carto-status-warning-bg);
    --bs-danger-bg-subtle:    var(--carto-status-error-bg);
    --bs-light-bg-subtle:     var(--carto-surface-secondary);
    --bs-dark-bg-subtle:      var(--carto-surface-inverse);

    --bs-primary-text-emphasis:   var(--carto-status-info-text);
    --bs-secondary-text-emphasis: var(--carto-status-offline-text);
    --bs-success-text-emphasis:   var(--carto-status-success-text);
    --bs-info-text-emphasis:      var(--carto-status-info-text);
    --bs-warning-text-emphasis:   var(--carto-status-warning-text);
    --bs-danger-text-emphasis:    var(--carto-status-error-text);
    --bs-light-text-emphasis:     var(--carto-text-secondary-color);
    --bs-dark-text-emphasis:      var(--carto-text-secondary-color);

    --bs-primary-border-subtle:   var(--carto-status-info);
    --bs-secondary-border-subtle: var(--carto-border-strong);
    --bs-success-border-subtle:   var(--carto-status-success);
    --bs-info-border-subtle:      var(--carto-status-info);
    --bs-warning-border-subtle:   var(--carto-status-warning);
    --bs-danger-border-subtle:    var(--carto-status-error);
    --bs-light-border-subtle:     var(--carto-border-default);
    --bs-dark-border-subtle:      var(--carto-border-strong);

    --bs-highlight-bg:    var(--carto-status-warning-bg);
    --bs-highlight-color: var(--carto-status-warning-text);
    --bs-code-color:      var(--carto-status-error-text);

    /* ── DataTables ────────────────────────────────────────────────────────
       DataTables ne peint pas ses lignes : il pose un `box-shadow` interne
       composé à partir de ces triplets. Ses valeurs sombres ne s'activent que
       sous `[data-bs-theme=dark]`, attribut que Carto ne pose pas — le voile de
       zébrure, le survol et la flèche de tri restaient donc **noirs sur fond
       nuit**, c'est-à-dire invisibles. Ils suivent maintenant le texte. */
    --dt-row-stripe:        var(--carto-text-primary-rgb);
    --dt-row-hover:         var(--carto-text-primary-rgb);
    --dt-column-ordering:   var(--carto-text-primary-rgb);
    --dt-row-selected:      var(--carto-action-primary-rgb);
    --dt-row-selected-text: var(--carto-action-on-primary-rgb);
    --dt-row-selected-link: var(--carto-action-on-primary-rgb);

    --bs-border-color:     var(--carto-border-default);
    --bs-border-radius:    var(--carto-radius-button);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--carto-radius-card);
    --bs-border-radius-xl: var(--carto-radius-panel);

    --bs-box-shadow-sm: var(--carto-elevation-1);
    --bs-box-shadow:    var(--carto-elevation-2);
    --bs-box-shadow-lg: var(--carto-elevation-3);

    --bs-heading-color: var(--carto-text-primary);
}

/* =============================================================================
   2 · Typographie — charte §4
   ========================================================================== */

body {
    font-family: var(--carto-font-sans);
    background-color: var(--carto-background-default);
    color: var(--carto-text-primary);
    /* Chiffres tabulaires : le cadastre est d'abord un tableau de nombres, et
       des chiffres de largeurs inégales rendent une colonne illisible en
       diagonale (charte §14). */
    font-variant-numeric: tabular-nums;
}

h1, .carto-display {
    font-size: var(--carto-text-h1);
    line-height: var(--carto-leading-h1);
    font-weight: var(--carto-weight-bold);
    color: var(--carto-text-primary);
}

.carto-display {
    font-size: var(--carto-text-display);
    line-height: var(--carto-leading-display);
}

h2 {
    font-size: var(--carto-text-h2);
    line-height: var(--carto-leading-h2);
    font-weight: var(--carto-weight-semibold);
}

h3, h4, h5, h6 {
    font-size: var(--carto-text-h3);
    line-height: var(--carto-leading-h3);
    font-weight: var(--carto-weight-semibold);
}

.carto-subtitle,
.text-muted {
    color: var(--carto-text-secondary-color) !important;
    font-size: var(--carto-text-secondary);
    line-height: var(--carto-leading-secondary);
}

/* Métadonnées : réservé aux informations non essentielles (charte §4). */
.carto-meta {
    font-size: var(--carto-text-small);
    line-height: var(--carto-leading-small);
    color: var(--carto-text-secondary-color);
}

/* Un nombre que l'œil doit pouvoir attraper d'un coup. */
.carto-figure {
    font-size: var(--carto-text-display);
    line-height: var(--carto-leading-display);
    font-weight: var(--carto-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--carto-text-primary);
}

.carto-unit {
    font-size: var(--carto-text-secondary);
    font-weight: var(--carto-weight-regular);
    color: var(--carto-text-secondary-color);
}

/* =============================================================================
   3 · Focus — charte §16 et §31
   Un anneau unique, visible sur toutes les surfaces, et seulement au clavier :
   `:focus-visible` évite l'anneau permanent après un clic à la souris.
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--carto-border-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    box-shadow: var(--carto-focus-ring);
    border-color: var(--carto-border-focus);
    outline: none;
}

/* =============================================================================
   4 · Navigation — charte §6
   ========================================================================== */

.carto-navbar {
    background-color: var(--carto-surface-inverse);
    box-shadow: var(--carto-elevation-1);
    /* En thème sombre, la barre a exactement la couleur du fond de page et son
       ombre portée ne se voit pas sur du noir : sans ce trait, la navigation
       n'a plus de bord bas. */
    border-bottom: 1px solid var(--carto-border-default);
}

.carto-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--carto-space-2);
    font-weight: var(--carto-weight-bold);
    font-size: var(--carto-text-h3);
    letter-spacing: -0.01em;
    color: var(--carto-text-on-inverse);
}

.carto-navbar .navbar-brand__mark {
    display: block;
    height: 28px;
    width: auto;
}

.carto-navbar .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--carto-text-secondary);
    font-weight: var(--carto-weight-medium);
    border-radius: var(--carto-radius-button);
    padding-inline: var(--carto-space-3);
    transition: color var(--carto-motion-fast) var(--carto-motion-ease),
                background-color var(--carto-motion-fast) var(--carto-motion-ease);
}

.carto-navbar .nav-link:hover,
.carto-navbar .nav-link:focus-visible {
    color: var(--carto-text-on-inverse);
    background-color: rgba(255, 255, 255, 0.08);
}

/* État actif en bleu Carto — la charte §6 l'exige explicitement pour le Web. */
.carto-navbar .nav-link.active,
.carto-navbar .nav-item.show > .nav-link {
    color: var(--carto-action-on-primary);
    background-color: var(--carto-action-primary);
}

.carto-navbar .navbar-text {
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--carto-text-secondary);
}

.carto-navbar .dropdown-menu {
    border: 1px solid var(--carto-border-default);
    border-radius: var(--carto-radius-card);
    box-shadow: var(--carto-elevation-2);
    padding: var(--carto-space-1);
    background-color: var(--carto-surface-default);
}

.carto-navbar .dropdown-item {
    border-radius: 6px;
    font-size: var(--carto-text-secondary);
    color: var(--carto-text-primary);
    padding: var(--carto-space-2) var(--carto-space-3);
}

.carto-navbar .dropdown-item:hover,
.carto-navbar .dropdown-item:focus {
    background-color: var(--carto-surface-secondary);
    color: var(--carto-text-primary);
}

.carto-navbar .dropdown-item.active {
    background-color: var(--carto-action-primary);
    color: var(--carto-action-on-primary);
}

/* =============================================================================
   5 · Boutons — charte §6
   Une action principale au maximum par zone logique : c'est une règle
   d'usage, pas de CSS, mais `.btn-primary` doit rester assez marqué pour que
   son abus se voie.
   ========================================================================== */

.btn {
    --bs-btn-border-radius: var(--carto-radius-button);
    --bs-btn-font-weight: var(--carto-weight-medium);
    --bs-btn-font-size: var(--carto-text-secondary);
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: var(--carto-space-4);
    transition: background-color var(--carto-motion-fast) var(--carto-motion-ease),
                border-color var(--carto-motion-fast) var(--carto-motion-ease),
                color var(--carto-motion-fast) var(--carto-motion-ease);
}

.btn-primary {
    --bs-btn-bg:                 var(--carto-action-primary);
    --bs-btn-border-color:       var(--carto-action-primary);
    --bs-btn-color:              var(--carto-action-on-primary);
    --bs-btn-hover-bg:           var(--carto-action-primary-hover);
    --bs-btn-hover-border-color: var(--carto-action-primary-hover);
    --bs-btn-hover-color:        var(--carto-action-on-primary);
    --bs-btn-active-bg:          var(--carto-action-primary-active);
    --bs-btn-active-border-color: var(--carto-action-primary-active);
    --bs-btn-disabled-bg:        var(--carto-action-disabled-bg);
    --bs-btn-disabled-border-color: var(--carto-action-disabled-bg);
    --bs-btn-disabled-color:     var(--carto-action-disabled-text);
}

.btn-outline-primary {
    --bs-btn-color:              var(--carto-action-primary);
    --bs-btn-border-color:       var(--carto-action-primary);
    --bs-btn-hover-bg:           var(--carto-action-primary);
    --bs-btn-hover-border-color: var(--carto-action-primary);
    --bs-btn-hover-color:        var(--carto-action-on-primary);
    --bs-btn-active-bg:          var(--carto-action-primary-active);
    --bs-btn-active-border-color: var(--carto-action-primary-active);
}

/* Bouton secondaire de la charte : neutre, bordé, texte bleu nuit. */
.btn-outline-secondary {
    --bs-btn-color:              var(--carto-action-secondary-text);
    --bs-btn-border-color:       var(--carto-action-secondary-border);
    --bs-btn-bg:                 var(--carto-action-secondary);
    --bs-btn-hover-bg:           var(--carto-surface-secondary);
    --bs-btn-hover-border-color: var(--carto-border-strong);
    --bs-btn-hover-color:        var(--carto-action-secondary-text);
    --bs-btn-active-bg:          var(--carto-surface-secondary);
    --bs-btn-active-color:       var(--carto-action-secondary-text);
    --bs-btn-active-border-color: var(--carto-border-strong);
    --bs-btn-disabled-color:      var(--carto-action-disabled-text);
    --bs-btn-disabled-border-color: var(--carto-border-default);
}

.btn-outline-light {
    --bs-btn-color:        rgba(255, 255, 255, 0.88);
    --bs-btn-border-color: rgba(255, 255, 255, 0.40);
    --bs-btn-hover-bg:     rgba(255, 255, 255, 0.12);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.60);
    --bs-btn-hover-color:  #FFFFFF;
}

/* Rouge réservé aux actions destructrices (charte §6). */
.btn-danger {
    --bs-btn-bg:                 var(--carto-status-error);
    --bs-btn-border-color:       var(--carto-status-error);
    --bs-btn-hover-bg:           #B91C1C;
    --bs-btn-hover-border-color: #B91C1C;
    --bs-btn-active-bg:          #991B1B;
    --bs-btn-active-border-color: #991B1B;
}

.btn-link {
    --bs-btn-color:       var(--carto-action-primary);
    --bs-btn-hover-color: var(--carto-action-primary-hover);
    --bs-btn-font-weight: var(--carto-weight-medium);
}

/* Les variantes restantes. Elles n'étaient pas reprises : `btn-secondary` et
   `btn-dark` gardaient donc le gris #6c757d et le #212529 de Bootstrap, y
   compris en thème sombre où le second se confond avec le fond. */
.btn-secondary {
    --bs-btn-bg:                 var(--carto-status-offline);
    --bs-btn-border-color:       var(--carto-status-offline);
    --bs-btn-color:              var(--carto-white);
    --bs-btn-hover-bg:           var(--carto-slate-700);
    --bs-btn-hover-border-color: var(--carto-slate-700);
    --bs-btn-hover-color:        var(--carto-white);
}

.btn-success {
    --bs-btn-bg:                 var(--carto-status-success);
    --bs-btn-border-color:       var(--carto-status-success);
    /* Blanc sur ce vert : 3,3:1. L'encre est sombre, comme sur `.bg-success`. */
    --bs-btn-color:              var(--carto-night);
    --bs-btn-hover-bg:           var(--carto-signal-excellent);
    --bs-btn-hover-border-color: var(--carto-signal-excellent);
    --bs-btn-hover-color:        var(--carto-white);
}

.btn-warning {
    --bs-btn-bg:                 var(--carto-status-warning);
    --bs-btn-border-color:       var(--carto-status-warning);
    --bs-btn-color:              var(--carto-night);
    --bs-btn-hover-bg:           #B45309;
    --bs-btn-hover-border-color: #B45309;
    --bs-btn-hover-color:        var(--carto-white);
}

.btn-dark,
.btn-outline-dark {
    --bs-btn-color:              var(--carto-action-secondary-text);
    --bs-btn-border-color:       var(--carto-border-strong);
    --bs-btn-hover-bg:           var(--carto-surface-inverse);
    --bs-btn-hover-border-color: var(--carto-surface-inverse);
    --bs-btn-hover-color:        var(--carto-text-on-inverse);
    --bs-btn-active-bg:          var(--carto-surface-inverse);
    --bs-btn-active-color:       var(--carto-text-on-inverse);
}

.btn-dark {
    --bs-btn-bg:           var(--carto-surface-inverse);
    --bs-btn-color:        var(--carto-text-on-inverse);
    --bs-btn-border-color: var(--carto-surface-inverse);
}

.btn-outline-success {
    --bs-btn-color:              var(--carto-status-success-text);
    --bs-btn-border-color:       var(--carto-status-success);
    --bs-btn-hover-bg:           var(--carto-status-success);
    --bs-btn-hover-border-color: var(--carto-status-success);
    --bs-btn-hover-color:        var(--carto-night);
}

/* =============================================================================
   6 · Champs — charte §6
   ========================================================================== */

.form-label {
    font-size: var(--carto-text-secondary);
    font-weight: var(--carto-weight-medium);
    color: var(--carto-text-primary);
    margin-bottom: var(--carto-space-1);
}

.form-control,
.form-select {
    border-radius: var(--carto-radius-field);
    border-color: var(--carto-border-default);
    background-color: var(--carto-surface-default);
    color: var(--carto-text-primary);
    font-size: var(--carto-text-secondary);
    padding: 0.5rem var(--carto-space-3);
}

/* Le raccourci `padding` ci-dessus écrase la réserve que Bootstrap ménage à
   droite pour le chevron : sur un `<select>` étroit — celui du nombre de lignes
   de DataTables — la valeur passait sous l'icône. */
.form-select {
    padding-right: 2.25rem;
}

/* Le texte d'invite n'est pas un texte désactivé : rien ne l'exempte de WCAG,
   et `--carto-text-disabled` le laissait à 2,6:1 dans les deux thèmes. Il prend
   la couleur du texte secondaire, qui bascule et qui passe. */
.form-control::placeholder {
    color: var(--carto-text-secondary-color);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--carto-action-disabled-bg);
    color: var(--carto-action-disabled-text);
}

/* Le moteur grise lui-même les `<option>` d'un `<select>` désactivé, en #808080
   quel que soit le thème. WCAG 1.4.3 exempte les composants inactifs, mais la
   valeur reste affichée : autant qu'elle soit lisible. */
.form-select:disabled option {
    color: var(--carto-action-disabled-text);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--carto-status-error);
}

.invalid-feedback {
    /* Le rouge vif passe sur blanc mais tombe à 3,3:1 sur le fond sombre :
       c'est la teinte de texte, pas la teinte d'accent, qui suit le thème. */
    color: var(--carto-status-error-text);
    font-size: var(--carto-text-small);
}

/* =============================================================================
   7 · Cartes et panneaux — charte §5 et §6
   Pas d'ombre par défaut : une carte dans une page se sépare du fond par sa
   surface et sa bordure. L'ombre est réservée à ce qui flotte (voir §9).
   ========================================================================== */

.card {
    --bs-card-border-radius: var(--carto-radius-card);
    --bs-card-border-color:  var(--carto-border-default);
    --bs-card-bg:            var(--carto-surface-default);
    --bs-card-spacer-y:      var(--carto-space-5);
    --bs-card-spacer-x:      var(--carto-space-5);
    --bs-card-cap-bg:        var(--carto-surface-secondary);
    box-shadow: var(--carto-elevation-0);
}

/* `shadow-sm` reste possible, mais devient l'élévation 1 de la charte. */
.card.shadow-sm,
.shadow-sm {
    box-shadow: var(--carto-elevation-1) !important;
}

.carto-panel {
    background-color: var(--carto-surface-default);
    border: 1px solid var(--carto-border-default);
    border-radius: var(--carto-radius-panel);
    box-shadow: var(--carto-elevation-2);
    padding: var(--carto-space-4);
}

/* =============================================================================
   8 · États — charte §8
   Les alertes Bootstrap deviennent les six états de la charte. `alert-info`
   reste bleu Carto : c'est l'information, pas une donnée métier.
   ========================================================================== */

.alert {
    --bs-alert-border-radius: var(--carto-radius-card);
    border-width: 1px;
    font-size: var(--carto-text-secondary);
    padding: var(--carto-space-3) var(--carto-space-4);
}

.alert-info    { --bs-alert-bg: var(--carto-status-info-bg);    --bs-alert-color: var(--carto-status-info-text);    --bs-alert-border-color: var(--carto-status-info); }
.alert-success { --bs-alert-bg: var(--carto-status-success-bg); --bs-alert-color: var(--carto-status-success-text); --bs-alert-border-color: var(--carto-status-success); }
.alert-warning { --bs-alert-bg: var(--carto-status-warning-bg); --bs-alert-color: var(--carto-status-warning-text); --bs-alert-border-color: var(--carto-status-warning); }
.alert-danger  { --bs-alert-bg: var(--carto-status-error-bg);   --bs-alert-color: var(--carto-status-error-text);   --bs-alert-border-color: var(--carto-status-error); }

/* Les huit états que la charte §8 demande de prévoir explicitement. Ceux qui
   n'avaient pas de forme sur le Web en ont une ici. */
.carto-state {
    display: flex;
    align-items: center;
    gap: var(--carto-space-3);
    padding: var(--carto-space-3) var(--carto-space-4);
    border-radius: var(--carto-radius-card);
    font-size: var(--carto-text-secondary);
    border: 1px solid transparent;
}

.carto-state--loading { background: var(--carto-status-info-bg);    color: var(--carto-status-info-text);    border-color: var(--carto-status-info); }
.carto-state--empty   { background: var(--carto-surface-secondary); color: var(--carto-status-offline-text); border-color: var(--carto-border-default); }
.carto-state--error   { background: var(--carto-status-error-bg);   color: var(--carto-status-error-text);   border-color: var(--carto-status-error); }
.carto-state--stale   { background: var(--carto-status-warning-bg); color: var(--carto-status-warning-text); border-color: var(--carto-status-warning); }
.carto-state--offline { background: var(--carto-status-offline-bg); color: var(--carto-status-offline-text); border-color: var(--carto-border-strong); }
.carto-state--sync    { background: var(--carto-status-info-bg);    color: var(--carto-status-info-text);    border-color: var(--carto-status-info); }
.carto-state--success { background: var(--carto-status-success-bg); color: var(--carto-status-success-text); border-color: var(--carto-status-success); }
.carto-state--live    { background: var(--carto-data-live-bg);      color: var(--carto-data-live-text);       border-color: var(--carto-data-live); }

/* Skeleton — charte §8 : pour les surfaces, là où un spinner ne dit rien de la
   forme de ce qui arrive. L'animation disparaît en motion réduite. */
.carto-skeleton {
    background: linear-gradient(90deg,
        var(--carto-surface-secondary) 25%,
        var(--carto-border-default) 37%,
        var(--carto-surface-secondary) 63%);
    background-size: 400% 100%;
    border-radius: 6px;
    animation: carto-skeleton-sweep 1.4s ease infinite;
    min-height: 1rem;
}

@keyframes carto-skeleton-sweep {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

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

/* Indicateur « live » — visible sans animation agressive (charte §11). */
.carto-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--carto-data-live);
    box-shadow: 0 0 0 3px var(--carto-data-live-bg);
}

/* =============================================================================
   9 · Cartographie — charte §7
   La carte est le contenu principal : ce qui flotte au-dessus d'elle est la
   seule chose qui porte une ombre marquée.
   ========================================================================== */

.carto-map {
    border-radius: var(--carto-radius-card);
    overflow: hidden;
    border: 1px solid var(--carto-border-default);
}

.leaflet-bar,
.leaflet-control-zoom {
    border: 1px solid var(--carto-border-default) !important;
    border-radius: var(--carto-radius-button) !important;
    box-shadow: var(--carto-elevation-2) !important;
    overflow: hidden;
}

.leaflet-bar a,
.leaflet-control-zoom a,
.carto-map-control {
    background-color: var(--carto-surface-default);
    color: var(--carto-text-primary);
    border-bottom-color: var(--carto-border-default);
}

.leaflet-bar a:hover,
.carto-map-control:hover {
    background-color: var(--carto-surface-secondary);
    color: var(--carto-action-primary);
}

/* Contrôle cartographique conforme au minimum tactile de la charte §10 : 44 px
   sur le Web, contre les 30 px par défaut de Leaflet. */
.carto-map-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    cursor: pointer;
    padding: 0;
}

.carto-map-control svg {
    width: 20px;
    height: 20px;
}

.carto-map-control[aria-pressed="true"] {
    background-color: var(--carto-action-primary);
    color: var(--carto-action-on-primary);
}

.leaflet-popup-content-wrapper {
    border-radius: var(--carto-radius-card);
    box-shadow: var(--carto-elevation-3);
    background: var(--carto-surface-default);
    color: var(--carto-text-primary);
}

.leaflet-popup-content {
    font-family: var(--carto-font-sans);
    font-size: var(--carto-text-secondary);
    line-height: var(--carto-leading-secondary);
    margin: var(--carto-space-3) var(--carto-space-4);
}

.leaflet-popup-tip {
    background: var(--carto-surface-default);
}

/* ── Clusters ───────────────────────────────────────────────────────────────
   Le défaut de markercluster est une échelle vert → jaune → rouge selon la
   taille. Sur une carte d'antennes, c'est l'échelle du signal : un cluster
   rouge se lit « mauvaise réception » alors qu'il veut dire « beaucoup de
   sites ». La charte §7 tranche — la couleur reste celle de Carto, et c'est
   le diamètre qui porte le nombre. */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large,
.marker-cluster {
    background-color: var(--carto-map-cluster-ring) !important;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div,
.marker-cluster div {
    background-color: var(--carto-map-cluster-bg) !important;
    color: var(--carto-map-cluster-text) !important;
    font-family: var(--carto-font-sans) !important;
    font-weight: var(--carto-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* Quatre paliers, 2–9 · 10–49 · 50–199 · 200+ (charte §7). */
.carto-cluster-1 { width: 34px; height: 34px; }
.carto-cluster-1 div { width: 28px; height: 28px; line-height: 28px; font-size: var(--carto-text-small); }
.carto-cluster-2 { width: 40px; height: 40px; }
.carto-cluster-2 div { width: 34px; height: 34px; line-height: 34px; font-size: var(--carto-text-small); }
.carto-cluster-3 { width: 48px; height: 48px; }
.carto-cluster-3 div { width: 42px; height: 42px; line-height: 42px; font-size: var(--carto-text-secondary); }
.carto-cluster-4 { width: 56px; height: 56px; }
.carto-cluster-4 div { width: 50px; height: 50px; line-height: 50px; font-size: var(--carto-text-secondary); }

.carto-cluster-1 div,
.carto-cluster-2 div,
.carto-cluster-3 div,
.carto-cluster-4 div {
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Épingles de site ───────────────────────────────────────────────────────
   `divIcon` arrive avec le fond blanc et la bordure de Leaflet : sans ce
   décrochage, chaque épingle vectorielle serait posée sur un carré blanc. */
.carto-site-marker {
    background: none;
    border: none;
}

.carto-site-marker svg {
    display: block;
    filter: drop-shadow(0 1px 1px rgba(13, 24, 42, 0.35));
}

/* Site sélectionné — la charte §7 demande un état de sélection distinct, qui
   n'existait pas : une fois sa bulle refermée, le site ouvert redevenait
   indiscernable des autres. L'anneau bleu est dessiné dans le SVG ; ici on
   n'ajoute que le halo et la mise au premier plan. */
.carto-marker-selected {
    z-index: 1000 !important;
}

.carto-marker-selected svg {
    filter: drop-shadow(0 0 6px var(--carto-map-selection-ring))
            drop-shadow(0 1px 2px rgba(13, 24, 42, 0.45));
}

/* =============================================================================
   10 · Tableaux — charte §14
   ========================================================================== */

.table {
    --bs-table-color:  var(--carto-text-primary);
    --bs-table-bg:     var(--carto-surface-default);
    --bs-table-border-color: var(--carto-border-default);
    --bs-table-striped-bg:   var(--carto-surface-secondary);
    --bs-table-hover-bg:     var(--carto-blue-050);
    font-size: var(--carto-text-secondary);
    font-variant-numeric: tabular-nums;
}

.table > thead {
    color: var(--carto-text-secondary-color);
    font-size: var(--carto-text-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── En-têtes triables ──────────────────────────────────────────────────────
   Un en-tête de tri n'introduit **aucune couleur** : il hérite de l'encre de
   `thead`, qui est déjà mesurée par le garde-fou de contraste. Peindre le lien
   en couleur d'action aurait ajouté une paire texte/fond à vérifier — et un
   thead entièrement bleu, qui se lit comme une barre de navigation.

   La colonne active ne se signale donc pas par la couleur, mais par trois
   choses redondantes : la flèche, la graisse, et `aria-sort` pour qui n'a pas
   d'écran. `white-space: nowrap` garde le libellé et sa flèche solidaires,
   faute de quoi une colonne étroite renverrait la flèche seule à la ligne. */
.carto-sort {
    display: inline-flex;
    align-items: baseline;
    gap: var(--carto-space-1);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.carto-sort:hover,
.carto-sort:focus-visible {
    color: inherit;
    text-decoration: underline;
}

[aria-sort="ascending"] .carto-sort,
[aria-sort="descending"] .carto-sort {
    font-weight: 700;
}

/* La flèche est un caractère, pas une image de fond : elle survit à un blocage
   des images et se copie avec le tableau. */
.carto-sort-arrow {
    font-size: 0.75em;
}

/* Colonnes de nombres : alignées à droite pour être comparables en diagonale. */
.carto-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dataTables_wrapper {
    font-size: var(--carto-text-secondary);
}

.page-link {
    --bs-pagination-color:        var(--carto-action-primary);
    --bs-pagination-active-bg:    var(--carto-action-primary);
    --bs-pagination-active-border-color: var(--carto-action-primary);
    --bs-pagination-hover-bg:     var(--carto-surface-secondary);
    --bs-pagination-border-color: var(--carto-border-default);
}

/* =============================================================================
   11 · Badges et chips — charte §6
   Un chip n'est pas un bouton : rayon complet, pas d'ombre, pas d'état hover
   sauf s'il est réellement sélectionnable.
   ========================================================================== */

.carto-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--carto-space-1);
    padding: 0.125rem var(--carto-space-2);
    border-radius: var(--carto-radius-chip);
    font-size: var(--carto-text-small);
    font-weight: var(--carto-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.carto-chip--selectable {
    cursor: pointer;
    background: var(--carto-surface-secondary);
    color: var(--carto-text-secondary-color);
    border-color: var(--carto-border-default);
}

.carto-chip--selectable[aria-pressed="true"] {
    background: var(--carto-action-primary);
    color: var(--carto-action-on-primary);
    border-color: var(--carto-action-primary);
}

/* =============================================================================
   12 · Utilitaires de couleur
   =============================================================================

   Les utilitaires `.bg-*` et `.text-*` de Bootstrap sont des valeurs compilées.
   Redéfinir leurs variables ne les atteint pas toutes, et surtout : un `.bg-*`
   ne pose **que** le fond. L'encre reste héritée du corps de page — c'est le
   mécanisme exact des deux défauts constatés en sombre, « boîte blanche à texte
   blanc » (`.bg-light`) et « texte noir sur boîte noire » (`.bg-dark`).

   Chaque fond plein impose donc son encre. Le `:not()` laisse la main à la page
   quand elle a explicitement choisi, et ne s'applique que lorsqu'elle s'est tue.
   ========================================================================== */

/* --- Encres ------------------------------------------------------------- */

/* `.text-dark` ne veut pas dire « la couleur de texte du thème » : dans les
   pages, il accompagne toujours un fond d'accent clair (ambre, cyan) qui, lui,
   ne bascule pas. L'encre ne doit donc pas basculer non plus, sinon elle
   s'éclaircit sur un fond resté clair. */
.text-dark      { color: var(--carto-night) !important; }
.text-body,
.text-body-emphasis { color: var(--carto-text-primary) !important; }
.text-primary   { color: var(--carto-action-primary) !important; }
.text-secondary { color: var(--carto-text-secondary-color) !important; }
.text-success   { color: var(--carto-status-success-text) !important; }
.text-danger    { color: var(--carto-status-error-text) !important; }
.text-warning   { color: var(--carto-status-warning-text) !important; }
.text-info      { color: var(--carto-status-info-text) !important; }

/* --- Fonds pleins ------------------------------------------------------- */

.bg-light,
.bg-white,
.bg-body,
.bg-body-secondary,
.bg-body-tertiary { background-color: var(--carto-surface-secondary) !important; }
.bg-dark          { background-color: var(--carto-surface-strong) !important; }
.bg-primary       { background-color: var(--carto-action-primary) !important; }
.bg-secondary     { background-color: var(--carto-status-offline) !important; }
.bg-success       { background-color: var(--carto-status-success) !important; }
.bg-warning       { background-color: var(--carto-status-warning) !important; }
.bg-info          { background-color: var(--carto-status-info) !important; }
.bg-danger        { background-color: var(--carto-status-error) !important; }

/* L'encre qui va avec, mesurée pour tenir 4,5:1 dans les deux thèmes. Le vert
   et l'ambre reçoivent l'encre sombre : en blanc ils tombent respectivement à
   3,3:1 et 1,9:1. */
.bg-light:not(.text-dark):not(.text-white),
.bg-white:not(.text-dark):not(.text-white),
.bg-body:not(.text-dark):not(.text-white),
.bg-body-secondary:not(.text-dark):not(.text-white),
.bg-body-tertiary:not(.text-dark):not(.text-white) { color: var(--carto-text-primary) !important; }

.bg-dark:not(.text-dark):not(.text-white)      { color: var(--carto-text-on-inverse) !important; }
.bg-primary:not(.text-dark):not(.text-white)   { color: var(--carto-action-on-primary) !important; }
.bg-secondary:not(.text-dark):not(.text-white) { color: var(--carto-white) !important; }
.bg-danger:not(.text-dark):not(.text-white)    { color: var(--carto-white) !important; }
.bg-info:not(.text-dark):not(.text-white)      { color: var(--carto-white) !important; }
.bg-success:not(.text-dark):not(.text-white)   { color: var(--carto-night) !important; }
.bg-warning:not(.text-dark):not(.text-white)   { color: var(--carto-night) !important; }

.border { border-color: var(--carto-border-default) !important; }
hr      { border-color: var(--carto-border-default); opacity: 1; }

/* =============================================================================
   13 · Composants Bootstrap à valeur compilée
   =============================================================================

   Tout ce qui suit relève du même constat : la variante inscrit un littéral au
   lieu de lire une variable, et reste donc claire quel que soit le thème. Rien
   ici n'est un correctif de page — chaque règle vaut pour toutes les pages.
   ========================================================================== */

/* --- Tableaux ------------------------------------------------------------ */
/* `.table-light` et consorts posent `--bs-table-color: #000` **et** un fond
   clair. En sombre, la cellule redevenait une boîte blanche, et tout ce qui
   s'y trouvait avec sa propre couleur — un lien, un `.text-muted` — devenait
   illisible. Les cinq variantes réellement employées sont reprises. */
.table-light,
.table-secondary {
    --bs-table-color:          var(--carto-text-primary);
    --bs-table-bg:             var(--carto-surface-secondary);
    --bs-table-border-color:   var(--carto-border-default);
    --bs-table-striped-color:  var(--carto-text-primary);
    --bs-table-striped-bg:     var(--carto-surface-secondary);
    --bs-table-active-color:   var(--carto-text-primary);
    --bs-table-active-bg:      var(--carto-surface-hover);
    --bs-table-hover-color:    var(--carto-text-primary);
    --bs-table-hover-bg:       var(--carto-surface-hover);
}

.table-dark {
    --bs-table-color:         var(--carto-text-on-inverse);
    --bs-table-bg:            var(--carto-surface-strong);
    --bs-table-border-color:  var(--carto-border-strong);
    --bs-table-striped-color: var(--carto-text-on-inverse);
    --bs-table-striped-bg:    var(--carto-surface-strong);
    --bs-table-active-color:  var(--carto-text-on-inverse);
    --bs-table-active-bg:     color-mix(in srgb, var(--carto-surface-strong) 85%, var(--carto-white));
    --bs-table-hover-color:   var(--carto-text-on-inverse);
    --bs-table-hover-bg:      color-mix(in srgb, var(--carto-surface-strong) 85%, var(--carto-white));
}

.table-warning {
    --bs-table-color:         var(--carto-status-warning-text);
    --bs-table-bg:            var(--carto-status-warning-bg);
    --bs-table-border-color:  var(--carto-status-warning);
    --bs-table-striped-color: var(--carto-status-warning-text);
    /* Les trois `-bg` d'accent comptent autant que `--bs-table-bg` : c'est un
       `box-shadow` interne qui peint réellement la cellule dans une table
       zébrée, et il l'emporte sur le fond. Les oublier laissait une ligne
       claire avec l'encre claire de l'état par-dessus. */
    --bs-table-striped-bg:    var(--carto-status-warning-bg);
    --bs-table-active-color:  var(--carto-status-warning-text);
    --bs-table-active-bg:     color-mix(in srgb, var(--carto-status-warning-bg) 82%, var(--carto-status-warning));
    --bs-table-hover-color:   var(--carto-status-warning-text);
    --bs-table-hover-bg:      color-mix(in srgb, var(--carto-status-warning-bg) 82%, var(--carto-status-warning));
}

.table-success {
    --bs-table-color:         var(--carto-status-success-text);
    --bs-table-bg:            var(--carto-status-success-bg);
    --bs-table-border-color:  var(--carto-status-success);
    --bs-table-striped-color: var(--carto-status-success-text);
    /* Les trois `-bg` d'accent comptent autant que `--bs-table-bg` : c'est un
       `box-shadow` interne qui peint réellement la cellule dans une table
       zébrée, et il l'emporte sur le fond. Les oublier laissait une ligne
       claire avec l'encre claire de l'état par-dessus. */
    --bs-table-striped-bg:    var(--carto-status-success-bg);
    --bs-table-active-color:  var(--carto-status-success-text);
    --bs-table-active-bg:     color-mix(in srgb, var(--carto-status-success-bg) 82%, var(--carto-status-success));
    --bs-table-hover-color:   var(--carto-status-success-text);
    --bs-table-hover-bg:      color-mix(in srgb, var(--carto-status-success-bg) 82%, var(--carto-status-success));
}

/* --- Menus déroulants ---------------------------------------------------- */
/* Le §4 ne traitait que ceux de la barre de navigation. Les autres gardaient
   le bleu #0d6efd de Bootstrap pour l'entrée active et son gris clair pour le
   survol. */
.dropdown-menu {
    --bs-dropdown-bg:                  var(--carto-surface-default);
    --bs-dropdown-color:               var(--carto-text-primary);
    --bs-dropdown-border-color:        var(--carto-border-default);
    --bs-dropdown-divider-bg:          var(--carto-border-default);
    --bs-dropdown-link-color:          var(--carto-text-primary);
    --bs-dropdown-link-hover-color:    var(--carto-text-primary);
    --bs-dropdown-link-hover-bg:       var(--carto-surface-secondary);
    --bs-dropdown-link-active-color:   var(--carto-action-on-primary);
    --bs-dropdown-link-active-bg:      var(--carto-action-primary);
    --bs-dropdown-link-disabled-color: var(--carto-text-disabled);
    --bs-dropdown-header-color:        var(--carto-text-secondary-color);
}

/* --- Pagination ---------------------------------------------------------- */
.page-link {
    --bs-pagination-color:        var(--carto-action-primary);
    --bs-pagination-bg:           var(--carto-surface-default);
    --bs-pagination-active-bg:    var(--carto-action-primary);
    --bs-pagination-active-color: var(--carto-action-on-primary);
    --bs-pagination-active-border-color: var(--carto-action-primary);
    --bs-pagination-hover-bg:     var(--carto-surface-secondary);
    --bs-pagination-hover-color:  var(--carto-action-primary-hover);
    --bs-pagination-focus-bg:     var(--carto-surface-secondary);
    --bs-pagination-focus-color:  var(--carto-action-primary-hover);
    --bs-pagination-border-color: var(--carto-border-default);
    --bs-pagination-disabled-bg:  var(--carto-surface-secondary);
    --bs-pagination-disabled-color: var(--carto-text-disabled);
    --bs-pagination-disabled-border-color: var(--carto-border-default);
}

/* --- Listes, onglets, accordéon, progression ----------------------------- */
.list-group {
    --bs-list-group-color:              var(--carto-text-primary);
    --bs-list-group-bg:                 var(--carto-surface-default);
    --bs-list-group-border-color:       var(--carto-border-default);
    --bs-list-group-action-hover-bg:    var(--carto-surface-secondary);
    --bs-list-group-action-hover-color: var(--carto-text-primary);
    --bs-list-group-active-bg:          var(--carto-action-primary);
    --bs-list-group-active-color:       var(--carto-action-on-primary);
    --bs-list-group-active-border-color: var(--carto-action-primary);
    --bs-list-group-disabled-bg:        var(--carto-surface-secondary);
    --bs-list-group-disabled-color:     var(--carto-text-disabled);
}

.nav-tabs {
    --bs-nav-tabs-link-active-bg:           var(--carto-surface-default);
    --bs-nav-tabs-link-active-color:        var(--carto-text-primary);
    --bs-nav-tabs-link-active-border-color: var(--carto-border-default) var(--carto-border-default) var(--carto-surface-default);
    --bs-nav-tabs-link-hover-border-color:  var(--carto-surface-secondary) var(--carto-surface-secondary) var(--carto-border-default);
    --bs-nav-link-color:                    var(--carto-action-primary);
    --bs-nav-link-hover-color:              var(--carto-action-primary-hover);
    --bs-nav-link-disabled-color:           var(--carto-text-disabled);
}

.accordion {
    --bs-accordion-color:        var(--carto-text-primary);
    --bs-accordion-bg:           var(--carto-surface-default);
    --bs-accordion-border-color: var(--carto-border-default);
    --bs-accordion-btn-color:    var(--carto-text-primary);
    --bs-accordion-active-color: var(--carto-status-info-text);
    --bs-accordion-active-bg:    var(--carto-status-info-bg);
    --bs-accordion-btn-focus-box-shadow: var(--carto-focus-ring);
}

.progress {
    --bs-progress-bg:         var(--carto-surface-secondary);
    --bs-progress-bar-bg:     var(--carto-action-primary);
    --bs-progress-bar-color:  var(--carto-action-on-primary);
}

/* --- Modale, infobulle, popover ------------------------------------------ */
.modal {
    --bs-modal-bg:                  var(--carto-surface-default);
    --bs-modal-color:               var(--carto-text-primary);
    --bs-modal-border-color:        var(--carto-border-default);
    --bs-modal-header-border-color: var(--carto-border-default);
    --bs-modal-footer-border-color: var(--carto-border-default);
}

/* L'infobulle est volontairement inverse : c'est la seule surface qui doit se
   détacher du fond dans les deux thèmes. */
.tooltip {
    --bs-tooltip-bg:    var(--carto-surface-strong);
    --bs-tooltip-color: var(--carto-text-on-inverse);
}

.popover {
    --bs-popover-bg:           var(--carto-surface-default);
    --bs-popover-border-color: var(--carto-border-default);
    --bs-popover-header-bg:    var(--carto-surface-secondary);
    --bs-popover-header-color: var(--carto-text-primary);
    --bs-popover-body-color:   var(--carto-text-primary);
}

.card {
    --bs-card-color:     var(--carto-text-primary);
    --bs-card-cap-color: var(--carto-text-primary);
}

/* Case à cocher et bouton radio cochés — le bleu #0d6efd de Bootstrap. */
.form-check-input:checked {
    background-color: var(--carto-action-primary);
    border-color: var(--carto-action-primary);
}

.form-check-input:focus {
    border-color: var(--carto-border-focus);
    box-shadow: var(--carto-focus-ring);
}

/* --- Icônes monochromes livrées en SVG encodé ---------------------------- */
/* Le chevron d'un `<select>`, la croix de fermeture et la flèche d'accordéon
   sont des images : leur couleur est cuite dans l'URI et ne peut pas suivre un
   token. Sur fond sombre, elles étaient simplement invisibles. */
.form-select     { background-image: var(--carto-select-chevron); }
.btn-close       { filter: var(--carto-icon-invert); }
.accordion-button::after,
.accordion-button:not(.collapsed)::after { filter: var(--carto-icon-invert); }

/* --- Survol des tableaux -------------------------------------------------- */
/* `--carto-blue-050` ne bascule pas : c'est une nuance de la palette, pas un
   rôle. Il allumait une ligne blanche au survol d'un tableau sombre. */
.table { --bs-table-hover-bg: var(--carto-surface-hover); }

/* --- Cartographie : surfaces de Leaflet ---------------------------------- */
/* Leaflet peint sa mention d'attribution en blanc avec un texte #333, et le
   fond de la zone hors tuiles en gris clair. Ni l'un ni l'autre ne passe par
   une variable : ce sont les deux dernières surfaces claires d'une carte en
   thème sombre. */
.leaflet-container {
    background: var(--carto-surface-secondary);
}

.leaflet-control-attribution,
.leaflet-control-scale-line {
    background: var(--carto-map-overlay-bg) !important;
    color: var(--carto-map-overlay-text) !important;
}

.leaflet-control-attribution a {
    color: var(--carto-action-primary) !important;
}

/* Panneau flottant posé sur la carte — indicateur de zoom, badge de mode live. */
.carto-map-overlay {
    background: var(--carto-map-overlay-bg);
    color: var(--carto-map-overlay-text);
    border: 1px solid var(--carto-border-default);
    box-shadow: var(--carto-elevation-2);
    border-radius: var(--carto-radius-chip);
    padding: var(--carto-space-2) var(--carto-space-3);
    font-size: var(--carto-text-secondary);
    font-weight: var(--carto-weight-semibold);
}

/* =============================================================================
   14 · Connexion et inscription
   Ces deux pages n'incluent pas la navigation : le symbole y tient lieu
   d'en-tête. C'est le seul endroit du Web où la marque est montrée en grand —
   ailleurs, la charte §7 veut la place pour la carte et les données.
   ========================================================================== */

.carto-h-login {
    font-size: var(--carto-text-h2);
    line-height: var(--carto-leading-h2);
    font-weight: var(--carto-weight-bold);
    letter-spacing: -0.01em;
    color: var(--carto-text-primary);
}

/* =============================================================================
   15 · Pied de page global
   Sobre par construction : le pied n'est pas un second menu, et il ne doit pas
   prendre une part visible de l'écran. Il se distingue du corps par une surface
   secondaire plutôt que par un cadre — un bloc encadré en bas de page se lit
   comme un contenu, pas comme un pied.

   Aucune couleur littérale : les deux thèmes suivent les tokens de surface, ce
   qui évite le pied clair sur fond sombre que produisait un `bg-light` figé.
   ========================================================================== */

.carto-footer {
    background-color: var(--carto-surface-secondary);
    border-top-color: var(--carto-border-default) !important;
}

.carto-footer a {
    color: var(--carto-action-primary);
    text-decoration: none;
}

.carto-footer a:hover,
.carto-footer a:focus-visible {
    text-decoration: underline;
}

/* Les listes de liens sont serrées : sur mobile, les trois colonnes se
   superposent et un interligne de corps de texte ferait un pied plus haut que
   la page qu'il termine. La cible tactile reste conforme grâce au padding
   vertical, qui n'écarte pas les lignes visuellement. */
.carto-footer ul li + li {
    margin-top: var(--carto-space-1);
}

.carto-footer ul a {
    display: inline-block;
    padding-block: 0.15rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §13 — Fiches de site : natures, provenance, diagrammes
   ───────────────────────────────────────────────────────────────────────────
   Ajouté en 0.9.0, quand les données régionales conservées depuis la 0.8.0 sont
   devenues visibles. Toutes les couleurs sont des jetons : une valeur écrite
   ici ne basculerait pas en thème sombre, et c'est le mécanisme exact de la
   « boîte blanche à texte blanc » que §12 existe pour empêcher.

   Un fond peint impose toujours son encre. C'est la règle du fichier, et elle
   vaut pour chaque pastille ci-dessous.
   ═══════════════════════════════════════════════════════════════════════════ */

.rf-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.45;
    white-space: nowrap;
    background: var(--carto-surface-secondary);
    color: var(--carto-text-default);
    border: 1px solid var(--carto-border-default);
}

.rf-chip-role {
    opacity: 0.7;
    font-size: 0.9em;
}

.rf-chip-muted {
    background: transparent;
    color: var(--carto-text-muted);
}

/* ── Natures d'installation ──────────────────────────────────────────────────
   Seule Bruxelles les déclare. Elles se distinguent sans se ressembler aux
   couleurs d'opérateur : ce sont deux familles, et §3.1 de la charte interdit
   de les faire collisionner. */
.rf-kind-outdoor   { background: var(--carto-status-info-bg);    color: var(--carto-status-info-text);    border-color: var(--carto-status-info); }
.rf-kind-indoor    { background: var(--carto-status-warning-bg); color: var(--carto-status-warning-text); border-color: var(--carto-status-warning); }
.rf-kind-broadcast { background: var(--carto-surface-inverse);   color: var(--carto-text-inverse);        border-color: var(--carto-border-strong); }

/* ── Statuts administratifs — jamais un état radio ─────────────────────────── */
.rf-status-in-force  { background: var(--carto-status-success-bg); color: var(--carto-status-success-text); border-color: var(--carto-status-success); }
.rf-status-review    { background: var(--carto-status-warning-bg); color: var(--carto-status-warning-text); border-color: var(--carto-status-warning); }
.rf-status-archived  { background: var(--carto-status-offline-bg); color: var(--carto-status-offline-text); border-color: var(--carto-status-offline); }
.rf-status-temporary,
.rf-status-refused   { background: var(--carto-status-error-bg);   color: var(--carto-status-error-text);   border-color: var(--carto-status-error); }

/* ── Provenance ─────────────────────────────────────────────────────────────
   « Calculé par Carto » doit se distinguer d'une affirmation officielle au
   premier coup d'œil : c'est la seule chose qu'un lecteur ne peut pas deviner
   d'une valeur affichée. La distinction ne tient pas qu'à la couleur — le
   libellé la dit en toutes lettres. */
.rf-prov-official { background: var(--carto-status-success-bg); color: var(--carto-status-success-text); border-color: var(--carto-status-success); }
.rf-prov-document { background: var(--carto-status-info-bg);    color: var(--carto-status-info-text);    border-color: var(--carto-status-info); }
.rf-prov-derived  { background: var(--carto-status-warning-bg); color: var(--carto-status-warning-text); border-color: var(--carto-status-warning); }
.rf-prov-field,
.rf-prov-manual   { background: var(--carto-surface-secondary);  color: var(--carto-text-default);        border-color: var(--carto-border-strong); }

/* ── Acteurs ────────────────────────────────────────────────────────────────
   Un acteur sans réseau mobile rattaché ne reçoit aucune couleur d'opérateur :
   une pastille de réseau sur « De Lijn » serait une affirmation fausse. */
.rf-actor-network { background: var(--carto-surface-strong);    color: var(--carto-text-default); border-color: var(--carto-border-strong); }
.rf-actor-other   { background: transparent;                    color: var(--carto-text-muted);   border-style: dashed; }

.rf-generation      { background: var(--carto-surface-strong); color: var(--carto-text-default); }
.rf-measure-violation { background: var(--carto-status-error-bg); color: var(--carto-status-error-text); border-color: var(--carto-status-error); }

/* ── Diagrammes de rayonnement ──────────────────────────────────────────────
   Un motif de rayonnement, jamais une zone desservie. Aucune de ces règles ne
   produit de géométrie géographique. */
.rf-pattern-card  { display: inline-block; margin: 0 1rem 1rem 0; vertical-align: top; }
.rf-pattern-chart { max-width: 100%; height: auto; }

.rf-pattern-frame,
.rf-pattern-ring  { fill: none; stroke: var(--carto-border-default); stroke-width: 1; }
.rf-pattern-ring  { stroke-dasharray: 2 3; }
.rf-pattern-axis  { stroke: var(--carto-border-default); stroke-width: 1; opacity: 0.5; }

.rf-pattern-trace {
    fill: var(--carto-status-info);
    fill-opacity: 0.25;
    stroke: var(--carto-status-info);
    stroke-width: 1.5;
}

.rf-pattern-ring-label,
.rf-pattern-axis-label {
    fill: var(--carto-text-muted);
    font-size: 9px;
    text-anchor: middle;
}
.rf-pattern-ring-label { text-anchor: start; }

/* ── Sections repliables ────────────────────────────────────────────────────
   Le niveau « source » est replié par défaut : il est consultable sans peser
   sur la lecture principale. */
details.card > summary {
    cursor: pointer;
    list-style: none;
}
details.card > summary::after {
    content: "▸";
    float: right;
    opacity: 0.6;
}
details.card[open] > summary::after { content: "▾"; }

/* Les tableaux techniques défilent dans leur propre conteneur : la page, elle,
   ne doit jamais défiler horizontalement. */
@media (max-width: 575.98px) {
    .rf-chip { white-space: normal; }
}