/**
* Path: css/variables.css
* CSS pour les variables
*/

body {
    --br: 8px;
    --small-title: 1.3em;
    --small-text: 0.8em;
    --big-icon: 48px;
    --small-icon: 28px;
    --maxw: 1180px;
    --radius: 14px;
    --radius-lg: 18px;
    --shadow-1: 0 6px 26px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.06);
    --shadow-2: 0 14px 55px rgba(16,24,40,.10), 0 6px 18px rgba(16,24,40,.08);
    --shadow-focus-primary: 0 0 0 3px rgba(59, 130, 246, 0.1);
    --shadow-focus-danger: 0 0 0 3px rgba(220, 53, 69, 0.1);

    /* Panneau flottant : tout ce qui se pose sur la ville ou la maquette 3D (panneaux et cartes de la ville, menu
       rangé, fil d'Ariane et carte du nom de la fiche, rubriques et leurs panneaux, cartes chiffrées, bouton
       « Animation »…), avec ou sans animation. Une seule définition, consommée par plein-ecran.css, ville.css,
       fiche-ville.css, atelier-batiment.css et mode-animation.css. Fond PLEIN : pas de verre dépoli sur un dessin
       qui s'anime (sobriete.css). Les valeurs sombres suivent d'elles-mêmes (--bg-color, --border-color et
       --shadow-* sont redéfinis dans mode_sombre.css). */
    --panneau-fond: var(--bg-color, #ffffff);
    --panneau-bord: var(--border-color);
    --panneau-rayon: var(--radius-lg);
    --panneau-ombre: var(--shadow-1);
    --panneau-ombre-forte: var(--shadow-2);

    --bg: #f6f8fc;
    --surface: #ffffff;
    --ink: #0f172a;
    --muted: #5b6b80;
    --line: #e6ebf3;
    --stroke: #d1dff6;
    --border-color: #d1d7e0;

    --primary: hsl(227 100 58);
    --primary-dark: hsl(from var(--primary) h s calc(l - 15));
    --primary-darker: hsl(from var(--primary) h s calc(l - 30));
    --primary-lighter: hsl(from var(--primary) h s calc(l + 10));
    --accent: #10c2a6;
    --green: #0b6e4f;
    --orange: #D89715;
    --purple: #3c1642;
    --red: #D54141;

    --igh-color: #9b2b35;
    --igh-bg-color: #e3939a;

    --warning-color: #856404;
    --warning-bg-color: #fff3cd;
    --warning-border-color: #ffc107;
    --warning-highlighted: #ff9800;

    --success-color: #0d3617;
    --success-bg-color: #d4edda;
    --success-border-color: #a7f3d0;
    --success-highlighted: #00b300;

    --info-color: #0c5460;
    --info-bg-color: #d1ecf1;
    --info-border-color: #bee5eb;
    --info-highlighted: #2086bc;

    --danger-color: #721c24;
    --danger-bg-color: #f8d7da;
    --danger-border-color: #f5c6cb;
    --danger-border-color-hover: #dc3545;
    --danger-highlighted: #f55f6e;

    --grad-cta: linear-gradient(90deg,#2b50ff 0%, #11c19f 100%);

    /* Teintes nommées, les mêmes dans les deux thèmes (répétées dans mode_sombre.css). Les cinq premières colorent les
       rubriques de la fiche d'un bâtiment (icônes du rail, atelier-batiment.css) ; les trois « vives » sont la base des
       états ci-dessous. */
    --teinte-bleu: #2957ff;
    --teinte-violet: #7c3aed;
    --teinte-turquoise: #0d9488;
    --teinte-orange: #ea580c;
    --teinte-vert: #16a34a;
    --teinte-vert-vif: #22c55e;
    --teinte-ambre: #f59e0b;
    --teinte-orange-vif: #f97316;
    /* L'encre posée sur un aplat --primary (pastille de rang d'une tuile carrée, components/_socle.css), la même dans les deux thèmes. */
    --encre-sur-primaire: #ffffff;
    /* Le texte des pastilles « principales » (classement « ERP de type M… » sur la fiche d'un bâtiment, « Premium » sur
       /mes-notices ; components/_socle.css). En clair, la couleur primaire ; en sombre, un bleu plus clair (mode_sombre.css),
       --primary n'y atteignant pas 4,5:1 sur le fond teinté de la pastille. */
    --pastille-principale-texte: var(--primary);

    /* États « Renseigné / À compléter / À renseigner » (pastilles d'état, components/_socle.css).
       --etat-* : le texte, qui s'éclaircit en sombre (mode_sombre.css) ; --etat-*-fond : le fond de la pastille, tiré
       de la teinte vive, le même dans les deux thèmes. */
    --etat-ok: #15803d;
    --etat-ok-fond: color-mix(in srgb, var(--teinte-vert-vif) 15%, transparent);
    --etat-partiel: #b45309;
    --etat-partiel-fond: color-mix(in srgb, var(--teinte-ambre) 16%, transparent);
    --etat-manque: #c2410c;
    --etat-manque-fond: color-mix(in srgb, var(--teinte-orange-vif) 15%, transparent);

    /* Tons des messages, des alertes flash et des boutons à contour (components/_message.css, _buttons.css), lot
       « composants » du 24/10/2026. Cinq tons, cinq rôles chacun : -fond (le fond teinté), -bord (le liseré), -icone
       (l'icône seule, au moins 3:1 sur le fond), -titre et -texte (au moins 4,5:1 sur le fond). Les valeurs claires sont
       celles que _message.css écrivait en dur ; les sombres (mode_sombre.css) celles de ses anciennes surcharges. */
    --ton-info-fond: #eff6ff;      --ton-info-bord: #3b82f6;      --ton-info-icone: #2563eb;
    --ton-info-titre: #1e40af;     --ton-info-texte: #1e3a8a;
    --ton-succes-fond: #f0fdf4;    --ton-succes-bord: #22c55e;    --ton-succes-icone: #15803d;
    --ton-succes-titre: #15803d;   --ton-succes-texte: #14532d;
    --ton-attention-fond: #fffbeb; --ton-attention-bord: #f59e0b; --ton-attention-icone: #b45309;
    --ton-attention-titre: #b45309; --ton-attention-texte: #78350f;
    --ton-erreur-fond: #fef2f2;    --ton-erreur-bord: #ef4444;    --ton-erreur-icone: #dc2626;
    --ton-erreur-titre: #b91c1c;   --ton-erreur-texte: #7f1d1d;
    --ton-aide-fond: #faf5ff;      --ton-aide-bord: #a855f7;      --ton-aide-icone: #9333ea;
    --ton-aide-titre: #7e22ce;     --ton-aide-texte: #581c87;
    /* L'encre posée sur le carré coloré de l'icône (messages « normal » et « large ») : blanc en clair, encre sombre
       en sombre, où les icônes sont claires. */
    --ton-encre-sur-icone: #ffffff;
    /* Message neutre (sans ton) : liseré et texte. */
    --message-bord: var(--line);
    --message-texte: #6b7280;

    /* Aplats des boutons pleins (components/_buttons.css). Chacun porte un texte d'au moins 4,5:1 : blanc
       (--encre-sur-primaire), sauf l'orange, qui porte une encre sombre (--bouton-orange-texte). En sombre
       (mode_sombre.css), les teintes claires du thème (--green, --red…) ne portent plus le blanc : les boutons y gardent
       une teinte soutenue. */
    --bouton-primaire: var(--primary);
    --bouton-vert: var(--green);
    --bouton-succes: #047857;
    --bouton-rouge: #dc2626;
    --bouton-orange: var(--orange);
    --bouton-orange-texte: #1f2937;
    --bouton-violet: var(--purple);
    --bouton-info: #0369a1;
    --bouton-secondaire: #6b7280;

    /* Teintes des matériaux (carte « Matériaux », public/js/materiaux-parcours.js, et aspect du bâtiment en 3D, décision du pilote
       du 18/10/2026). Consommées SEULEMENT par components/_materiaux.css, le fichier des motifs ; redéfinies dans mode_sombre.css. */
    --matiere-trait: rgba(15, 23, 42, 0.28);
    --matiere-joint: #ece6dc;
    --matiere-ciel: #e8f0fb;
    --matiere-beton: #c6ccd4;
    --matiere-beton-clair: #e1e5ea;
    --matiere-beton-fonce: #959eaa;
    --matiere-cellulaire: #ecebe6;
    --matiere-parpaing: #b4bac2;
    --matiere-brique: #c4643f;
    --matiere-brique-fonce: #93452a;
    --matiere-pierre: #d9c7a6;
    --matiere-pierre-fonce: #b49b74;
    --matiere-bois: #d6a466;
    --matiere-bois-clair: #efd3a9;
    --matiere-bois-fonce: #9f6c37;
    --matiere-acier: #8c9db1;
    --matiere-acier-clair: #c5d0dc;
    --matiere-acier-fonce: #5d6d82;
    --matiere-verre: #9cc3f2;
    --matiere-verre-clair: #dcebff;
    --matiere-verre-cadre: #56677d;
    --matiere-enduit: #f3ede2;
    --matiere-enduit-fonce: #d9cfbd;
    --matiere-vegetal: #4caf6e;
    --matiere-vegetal-clair: #8fd19e;
    --matiere-vegetal-fonce: #2e7a48;
    --matiere-terre-cuite: #d17a4e;
    --matiere-terre-cuite-fonce: #a4583a;
    --matiere-fibres: #a9afb6;
    --matiere-fibres-fonce: #858c94;
    --matiere-composite: #8f8072;
    --matiere-composite-fonce: #6f6256;
    --matiere-textile: #f4f2ed;
    --matiere-textile-trait: #c3bcae;
    --matiere-polycarbonate: #d3e6ee;
    --matiere-polycarbonate-trait: #9fc0cf;
    --matiere-tuile: #c2603f;
    --matiere-tuile-fonce: #a14d31;
    --matiere-ardoise: #4f5968;
    --matiere-ardoise-fonce: #363e4a;
    --matiere-shingle: #5d4c45;
    --matiere-shingle-fonce: #41352f;
    --matiere-zinc: #9da8b1;
    --matiere-zinc-fonce: #7a858e;
    --matiere-bitume: #3e4146;
    --matiere-bitume-clair: #6c7077;
    --matiere-membrane: #dde2e8;
    --matiere-membrane-fonce: #b9c1cb;
    --matiere-dalle: #d0c9bd;
    --matiere-dalle-fonce: #aaa293;
    --matiere-cadre-pvc: #f8fafc;
    --matiere-cadre-alu: #98a2ad;
    --matiere-cadre-bois: #8a5a35;
    --matiere-cadre-acier: #2e353f;

    /* ============================================================
       Tokens ADMIN — mode clair par défaut
       Consommés par public/css/{administration,membres,classement}.css
       Overrides dark : voir public/css/mode_sombre.css section 42.
       ============================================================ */

    /* Surfaces */
    --admin-surface:            #ffffff;
    --admin-surface-alt:        #f8fafc;
    --admin-surface-inset:      #f9fafb;
    --admin-surface-strong:     #f1f5f9;

    /* Bordures */
    --admin-border:             #e5e7eb;
    --admin-border-soft:        #e2e8f0;
    --admin-border-strong:      #d1d5db;
    --admin-border-medium:      #cbd5e1;

    /* Textes */
    --admin-text:               #374151;
    --admin-text-strong:        #1e293b;
    --admin-text-muted:         #64748b;
    --admin-text-faint:         #9ca3af;

    /* Accents bleus */
    --admin-accent:             #3b82f6;
    --admin-accent-hover:       #60a5fa;
    --admin-accent-strong:      #1d4ed8;
    --admin-accent-ink:         #1e40af;
    --admin-accent-ink-strong:  #1e3a8a;
    --admin-accent-bg:          #dbeafe;
    --admin-accent-bg-soft:     #eff6ff;
    --admin-accent-border:      #bfdbfe;
    --admin-accent-border-hover:#93c5fd;

    /* Indigo & Google */
    --admin-indigo:             #4f46e5;
    --admin-blue-google:        #4285f4;
    --admin-blue-google-hover:  #3367d6;
    --admin-linkedin:           #0a66c2;   /* bleu LinkedIn (liens et icônes du CRM) ; éclairci en sombre */

    /* Warning / RGPD */
    --admin-warn-bg:            #fef3c7;
    --admin-warn-bg-soft:       #fffbeb;
    --admin-warn-border:        #fcd34d;
    --admin-warn-border-hover:  #f59e0b;
    --admin-warn-ink:           #92400e;
    --admin-warn-icon:          #d97706;

    /* Danger */
    --admin-danger-bg:          #fef2f2;
    --admin-danger-bg-strong:   #fee2e2;
    --admin-danger-border:      #fecaca;
    --admin-danger-border-hover:#fca5a5;
    --admin-danger-ink:         #7f1d1d;
    --admin-danger-title:       #b91c1c;
    --admin-danger-icon:        #dc2626;

    /* Success */
    --admin-success:            #10b981;
    --admin-success-strong:     #059669;
    --admin-success-bg:         #f0fdf4;
    --admin-success-bg-alt:     #dcfce7;
    --admin-success-border:     #86efac;
    --admin-success-ink:        #166534;
    --admin-success-icon:       #16a34a;

    /* ============================================================
       Tokens CLOCHE DE NOTIFICATIONS — mode clair par défaut
       Consommés par public/css/components/_notifications-cloche.css
       Overrides sombre : public/css/mode_sombre.css, section « cloche ».

       POURQUOI DES TOKENS DÉDIÉS PLUTÔT QUE --surface / --muted
       Deux besoins que le vocabulaire existant ne couvre pas :
       (1) le panneau SURVOLE le contenu, il lui faut un fond OPAQUE ;
           en sombre, --surface vaut rgba(255,255,255,.05), donc translucide,
           et le texte de la page transparaîtrait au travers ;
       (2) la pastille a besoin d'une encre lisible SUR du rouge dans les
           deux thèmes — aucun token existant ne dit « texte sur accent ».
       ============================================================ */
    --notif-panel-bg:        #ffffff;
    --notif-panel-border:    #d1d7e0;
    --notif-panel-shadow:    0 14px 55px rgba(16, 24, 40, 0.18);
    --notif-item-hover-bg:   #f1f5f9;
    --notif-unread-marker:   hsl(227 100 58);
    --notif-badge-bg:        #D54141;
    --notif-badge-ink:       #ffffff;
    --notif-text:            #0f172a;
    --notif-text-muted:      #5b6b80;
    --notif-icon:            #5b6b80;

    /* Hiérarchie doc réglementaire (index admin) */
    --admin-hier-cat-bg:        #1a4785;
    --admin-hier-cat-border:    #3b0764;
    --admin-hier-livre-bg:      #2e5a93;
    --admin-hier-livre-border:  #1e3a5f;
    --admin-hier-titre-bg:      #4c7ca5;
    --admin-hier-onblue-text:   #ffffff;
    --admin-hier-section-bg:    #f0f9ff;
    --admin-hier-section-ink:   #0369a1;
    --admin-hier-section-border:#e0f2fe;
}