/**
 * @project: batiPASS
 * @version: 0.1.0
 * @encoding: UTF-8
 * @compliance: GDPR, EU-Accessibility, Data Sovereignty
 * @copyright: (c) 2025-2026 kwargs SRL
 * @description: Identité visuelle batiPASS : design tokens (8 couleurs +
 *               assignation des rôles), dérivée du passeport bâtiment de
 *               l'Alliance mondiale pour les bâtiments et la construction
 *               (GlobalABC / PNUE, 2021).
 */

/* ── batiPASS : PALETTE ───────────────────────────────────────── */
/*                                                                  */
/*  SEUL FICHIER À MODIFIER pour changer l'identité visuelle.       */
/*  Chargé en dernier (bloc extra_css) : ses :root l'emportent.     */
/*                                                                  */
/*  Couleurs reprises de la charte du passeport bâtiment de         */
/*  GlobalABC : pétrole/turquoise des titres, vert feuille de la    */
/*  couverture, et les six couleurs de la roue des catégories       */
/*  de données (Fig. 9).                                            */
/*                                                                  */
/* ─────────────────────────────────────────────────────────────── */

:root {

    /* ── 1. Les 8 couleurs ──────────────────────────────────────── */

    --ks-papier:   #f2f6f5;     /* papier : clair, frais (le carnet)   */
    --ks-encre:    #172533;     /* encre : bleu nuit, profond          */
    --ks-petrole:  #1d858d;     /* pétrole : turquoise des titres      */
    --ks-ardoise:  #57727b;     /* ardoise : neutre, sobre             */
    --ks-feuille:  #4e8530;     /* feuille : vert de la couverture     */
    --ks-brique:   #b23a2c;     /* brique : terre cuite, alerte        */
    --ks-ocre:     #eaa93e;     /* ocre : chaud, avertissement         */
    --ks-azur:     #1f82aa;     /* azur : bleu ciel, informatif        */

    /* ── 2. Assignation des rôles ───────────────────────────────── */
    /*                                                                */
    /*  surface-light → fond de page clair, cartes, modales           */
    /*  surface-dark  → fond de page sombre, texte en mode clair       */
    /*  primary       → action principale, boutons d'appel             */
    /*  secondary     → actions secondaires, éléments discrets         */
    /*  success       → confirmations, validations, badges positifs    */
    /*  danger        → erreurs, suppressions, alertes critiques        */
    /*  warning       → avertissements, actions à confirmer             */
    /*  info          → messages informatifs, badges neutres            */
    /*                                                                */

    --ks-surface-light: var(--ks-papier);
    --ks-surface-dark:  var(--ks-encre);

    --ks-primary:       var(--ks-petrole);
    --ks-primary-rgb:   29, 133, 141;

    --ks-secondary:     var(--ks-ardoise);
    --ks-secondary-rgb: 87, 114, 123;

    --ks-success:       var(--ks-feuille);
    --ks-success-rgb:   78, 133, 48;

    --ks-danger:        var(--ks-brique);
    --ks-danger-rgb:    178, 58, 44;

    --ks-warning:       var(--ks-ocre);
    --ks-warning-rgb:   234, 169, 62;

    --ks-info:          var(--ks-azur);
    --ks-info-rgb:      31, 130, 170;

    /* ── 3. Forme ─────────────────────────────────────────────────── */

    --ks-border-radius: 0;          /* 0 = angulaire, 0.375rem = Bootstrap défaut */
    --ks-radius-fiche:  .5rem;      /* signature : les fiches (source, fait) sont les
                                       seules surfaces arrondies d'un produit angulaire */

    /* ── 4. Les six catégories du carnet (roue Fig. 9) ──────────── */
    /*  Couleurs décoratives : filets et pictogrammes sur fond clair. */

    --bp-cat-lieu:      #7fa528;    /* A : Lieu et parcelle          */
    --bp-cat-admin:     #0e9bd8;    /* B : Administration            */
    --bp-cat-materiaux: #4470b6;    /* C : Matériaux et systèmes     */
    --bp-cat-technique: #d9a400;    /* D : Caractéristiques techn.   */
    --bp-cat-usage:     #e8821e;    /* E : Utilisation, exploitation */
    --bp-cat-perf:      #2a9d9d;    /* F : Performance fin./soc./env.*/
}

/* ── batiPASS : composants propres au produit ──────────────────── */

/* Surfaces thème-aware : dérivées des tokens de surface via color-mix, donc
   correctes en clair ET en sombre (pas de couleur claire figée qui resterait
   illisible sur fond sombre). var(--bs-body-bg/-color) basculent avec le thème. */
.bati-surface-1 { background-color: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-body-color)); }
.bati-surface-2 { background-color: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-body-color)); }

/* Carte de catégorie : élévation visible dans les deux thèmes (sinon une
   .card prend le fond de page et disparaît en sombre), bord discret + filet
   supérieur coloré + pictogramme teinté. */
.bati-cat {
    background-color: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-body-color));
    border: 1px solid color-mix(in srgb, var(--bs-body-bg) 78%, var(--bs-body-color));
    border-top: 4px solid var(--bati-accent, var(--ks-secondary));
}
.bati-cat .bati-cat-icon { color: var(--bati-accent, var(--ks-secondary)); }

.bati-cat-lieu      { --bati-accent: var(--bp-cat-lieu); }
.bati-cat-admin     { --bati-accent: var(--bp-cat-admin); }
.bati-cat-materiaux { --bati-accent: var(--bp-cat-materiaux); }
.bati-cat-technique { --bati-accent: var(--bp-cat-technique); }
.bati-cat-usage     { --bati-accent: var(--bp-cat-usage); }
.bati-cat-perf      { --bati-accent: var(--bp-cat-perf); }

/* ── Collecteur : en-tête de dimension + cartouches de source ─────── */
/*  L'accent (--bati-accent) est posé sur le groupe .bati-cat-{slug} et
    hérité par l'icône d'en-tête et les cartouches (variables CSS = cascade). */
.bati-dim-icon { color: var(--bati-accent, var(--ks-secondary)); }

/*  Cartouche = une source réglable, présentée en petite CARTE encadrée (comme la
    roue des catégories) : bandeau d'accent en tête à la couleur de sa dimension,
    cadre discret, élévation ; teintée et surélevée quand sélectionnée. Toute la
    cartouche coche/décoche. */
.bati-source {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 100%;
    margin: 0;
    padding: .55rem .7rem;
    background-color: color-mix(in srgb, var(--bs-body-bg) 90%, var(--bs-body-color));
    border: 1px solid color-mix(in srgb, var(--bs-body-bg) 78%, var(--bs-body-color));
    border-left: 4px solid var(--bati-accent, var(--ks-secondary));
    border-radius: var(--ks-radius-fiche);   /* la cartouche s'arrondit (plaque), même si le design global est angulaire */
    cursor: pointer;
    user-select: none;
    transition: background-color var(--ks-duration-fast) var(--ks-easing), border-color var(--ks-duration-fast) var(--ks-easing);
}
.bati-source:hover { border-color: var(--bati-accent, var(--ks-secondary)); }
.bati-source:has(:checked) {
    background-color: color-mix(in srgb, var(--bati-accent, var(--ks-primary)) 12%, var(--bs-body-bg));
    border-color: var(--bati-accent, var(--ks-primary));
}
.bati-source-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bati-source-help { color: var(--bati-accent, var(--ks-secondary)); cursor: help; }

/*  Progression de collecte : la coche prend la couleur d'accent de sa dimension
    (héritée du groupe .bati-cat-{slug}). */
.collecte-ok { color: var(--bati-accent, var(--ks-success)); }

/*  Résultats : mise en page « maçonnerie » (colonnes CSS). Les cartouches ont des
    hauteurs inégales (esquisse, série d'adresses, valeur simple) ; en colonnes elles
    s'empilent sans laisser de trous, contrairement à une grille en lignes. 1 colonne
    en mobile, 2 dès sm, 3 dès lg. Zéro JS. */
.bati-masonry { column-gap: .5rem; }
.bati-masonry-item { break-inside: avoid; margin-bottom: .5rem; }
@media (min-width: 576px) { .bati-masonry { column-count: 2; } }
@media (min-width: 992px) { .bati-masonry { column-count: 3; } }
/*  Un cartouche « pleine largeur » (ex. la liste des écoles à proximité) traverse
    toutes les colonnes de sa maçonnerie. Comme il sort du flux en colonnes, il
    n'hérite d'aucune marge haute : on la pose pour qu'il ne colle pas au cartouche
    du dessus. */
.bati-masonry-wide { column-span: all; margin-top: .5rem; }

/*  Esquisse d'emprise (résultats) : le contour projeté, teinté à la couleur de la
    dimension. Rendu vectoriel, sans carte tuilée ni JS. */
.bati-emprise path {
    fill: none;                 /* le trait seul : contour, pas de remplissage */
    stroke: var(--bati-accent, var(--ks-secondary));
    stroke-width: 1.4;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* ── Étagère de carnets (page « Mes carnets ») ──────────────────── */
/*  Chaque carnet est une vignette : surface papier angulaire, filet d'accent
    pétrole à gauche, légère élévation au survol. Les couleurs suivent le thème
    (clair/sombre) via les variables Bootstrap ; l'accent reste kwargs.          */
.bp-carnet-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--ks-primary);
    border-radius: var(--ks-border-radius, 0);
    color: inherit;
    text-decoration: none;
    transition: transform var(--ks-duration-fast) var(--ks-easing), box-shadow var(--ks-duration-fast) var(--ks-easing);
}
.bp-carnet-card:hover,
.bp-carnet-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.5rem rgba(var(--ks-secondary-rgb), .2);
    color: inherit;
}
.bp-carnet-title { color: var(--bs-emphasis-color, inherit); }

/*  Pastille d'icône (carte) et médaillon (état vide) : carré angulaire teinté. */
.bp-carnet-icon,
.bp-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ks-primary);
    background: rgba(var(--ks-primary-rgb), .1);
    border-radius: var(--ks-border-radius, 0);
}
.bp-carnet-icon { width: 2.25rem; height: 2.25rem; font-size: 1.2rem; }
.bp-empty-icon  { width: 4rem;    height: 4rem;    font-size: 2rem; margin-inline: auto; }

/*  Couverture par dimension : six pastilles, allumées à la couleur de leur
    catégorie (var --d posée en ligne) quand un fait de cette dimension existe. */
.bp-dims { display: inline-flex; gap: .35rem; }
.bp-dim {
    width: .7rem;
    height: .7rem;
    border-radius: var(--ks-border-radius-circle);
    background: transparent;
    border: 1.5px solid var(--bs-border-color);
}
.bp-dim.is-on {
    background: var(--d);
    border-color: var(--d);
}

/* ── Fiche carnet : barre latérale collante + sections + carte de fait ─ */
/*  Le menu vit dans une barre latérale : collante sous la navbar en desktop,
    simple bloc en tête sur mobile. Chaque lien saute à sa section (ancre HTML) :
    navigation 100% CSS, zéro JS, robuste partout. L'accent de chaque entrée de
    dimension suit sa couleur de catégorie (--bati-accent, via .bati-cat-{slug}). */
@media (min-width: 992px) {
    .bp-sidebar { position: sticky; top: 5rem; }
}
.bp-menu .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-body-color);
    border-left: 3px solid transparent;
    border-radius: 0;
    padding: .4rem .6rem;
}
.bp-menu .nav-link i { color: var(--bati-accent, var(--ks-secondary)); }
.bp-menu .nav-link:hover,
.bp-menu .nav-link:focus-visible {
    color: var(--bati-accent, var(--ks-primary));
    border-left-color: var(--bati-accent, var(--ks-primary));
    background-color: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-body-color));
}
/*  Une section par entrée de menu : décalée sous la navbar collante lors du saut. */
.bp-section { scroll-margin-top: 5rem; }
.bp-section + .bp-section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}
.bp-section-title .bati-dim-icon { color: var(--bati-accent, var(--ks-secondary)); }

/*  Carte de fait : plaque encadrée, filet d'accent à la couleur de la dimension
    (hérité de la .bati-cat-{slug} du panneau). Bloc de gouvernance détaché par un
    filet pointillé (provenance, connaissance, identité, rattachements).          */
.bp-fait {
    height: 100%;
    padding: .7rem .85rem;
    background-color: color-mix(in srgb, var(--bs-body-bg) 90%, var(--bs-body-color));
    border: 1px solid color-mix(in srgb, var(--bs-body-bg) 78%, var(--bs-body-color));
    border-left: 4px solid var(--bati-accent, var(--ks-secondary));
    border-radius: var(--ks-radius-fiche);
}
.bp-gouv {
    margin-top: .5rem;
    padding-top: .4rem;
    border-top: 1px dashed color-mix(in srgb, var(--bs-body-bg) 72%, var(--bs-body-color));
    line-height: 1.6;
}