/* =====================================================================
   Charte AiiZon - DA "Marquages de pont"  (https://aiizon.fr/charte.css)
   Principe : capitales etroites, etiquettes mono, pointilles et ligne jaune
   du pont d'envol. Pas de cartes, pas d'arrondis, pas de flou, pas d'ombre portee.
   Polices auto-hebergees (OFL) : /fonts/polices.css
   ===================================================================== */
:root {
  /* couleurs */
  --aube-1: #ff8a3d;   /* orange de l'aube (haut du degrade) */
  --aube-2: #d9533a;   /* corail */
  --aube-3: #7a2a3a;   /* lie-de-vin */
  --aube-4: #2a1426;   /* nuit (fond le plus sombre) */
  --pont:   #1c1620;   /* gris-violet du pont : panneaux, pied de page */
  --creme:  #f6efe6;   /* texte principal */
  --creme-2:#f2dccd;   /* texte secondaire */
  --jaune:  #ffd23f;   /* ligne de securite : SEUL accent (etiquettes, reperes, focus) */
  --vert:   #5ee08a;   /* etat OK uniquement */
  --rouge:  #ff5a4e;   /* erreur / danger uniquement */
  --pointille: rgba(246, 239, 230, .6);
  /* typo */
  --f-titre: "Barlow Condensed", "Arial Narrow", sans-serif;   /* 700/800, MAJUSCULES */
  --f-mono:  "IBM Plex Mono", ui-monospace, Consolas, monospace; /* 400/500, etiquettes MAJUSCULES espacees */
  --f-texte: Inter, system-ui, "Segoe UI", sans-serif;          /* 400/500, texte courant */
  /* fond de page standard (meme ciel que l'animation d'accueil) */
  --fond: radial-gradient(90% 60% at 88% -5%, #ffd27a 0%, #ff9a3c 22%, rgba(240, 86, 60, .85) 48%, transparent 78%),
          linear-gradient(155deg, #ff8a3d 0%, #d9533a 30%, #7a2a3a 62%, #2a1426 100%);
}

/* ---- composants ---- */
.da-etiquette { font: 500 .72rem/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--jaune); }
.da-titre     { font: 800 clamp(2.6rem, 6.5vw, 4.8rem)/.9 var(--f-titre); text-transform: uppercase; letter-spacing: .01em; color: var(--creme); }
.da-pointilles{ border: 0; border-top: 1.5px dashed var(--pointille); width: 72%; margin: 16px 0 0; }
.da-texte     { font: 400 1.05rem/1.6 var(--f-texte); color: var(--creme-2); }

/* donnee : repere peint sur le pont (barre jaune a gauche) */
.da-donnee     { border-left: 3px solid var(--jaune); padding-left: 12px; }
.da-donnee .cle{ display: block; font: 500 .66rem/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--creme-2); }
.da-donnee .val{ display: block; font: 700 2.1rem/1 var(--f-titre); margin-top: 6px; text-transform: uppercase; color: var(--creme); }

/* bouton : contour net 1.5 px, capitales etroites ; au survol il se remplit en creme */
.da-bouton { display: inline-block; font: 700 .95rem/1 var(--f-titre); letter-spacing: .16em; text-transform: uppercase; color: var(--creme);
  border: 1.5px solid var(--creme); padding: 12px 18px; background: none; cursor: pointer; transition: background .2s, color .2s; }
.da-bouton:hover { background: var(--creme); color: var(--pont); }
.da-bouton.danger { border-color: var(--rouge); color: var(--rouge); } .da-bouton.danger:hover { background: var(--rouge); color: var(--pont); }
.da-bouton:focus-visible { outline: 2px dashed var(--jaune); outline-offset: 3px; }

/* panneau (quand il faut un fond lisible, ex. outils d'admin) : aplat "pont", bord pointille, angles droits */
.da-panneau { background: rgba(28, 22, 32, .88); border: 1.5px dashed rgba(246, 239, 230, .28); padding: 20px; }

@media (prefers-reduced-motion: reduce) { .da-bouton { transition: none; } }

/* barre de defilement aux couleurs du pont : piste sombre, curseur creme, jaune au survol (Chrome/Edge/Safari + Firefox) */
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: rgba(246, 239, 230, .42) #140f17; scrollbar-width: thin; } }   /* Firefox seulement : sinon Chrome ignore le style ci-dessous */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #140f17; border-left: 1px solid rgba(246, 239, 230, .08); }
::-webkit-scrollbar-thumb { background: rgba(246, 239, 230, .42); border: 3px solid #140f17; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #ffd23f; }
::-webkit-scrollbar-thumb:active { background: #ffd23f; }
::-webkit-scrollbar-corner { background: #140f17; }