/* ===========================================================
   TechHome — Système chromatique
   Évolution de la palette existante : mêmes couleurs, hiérarchie
   explicite. Le navy porte 80% de la surface, un seul accent
   domine par écran, les autres ponctuent.
   =========================================================== */
:root{
  /* --- Navy : l'échelle de profondeur (fond → élévation) ------ */
  --navy-950:#050B16;   /* fond extrême, hors-cadre, ombres */
  --navy-900:#0A1628;   /* FOND CANONIQUE (carte de visite, site) */
  --navy-800:#0F1F36;   /* surface élevée niveau 1 : cartes */
  --navy-700-solid:#162944;  /* surface élevée niveau 2 : hover, inputs */
  --navy-600:#1E3452;   /* surface pressée / sélection */
  --navy-500:#2A4463;   /* filets forts, bordures actives */
  --navy-400:#3C5878;   /* filets discrets sur fond sombre */

  /* --- Neutres clairs : le mode clair de la marque ------------ */
  --white:#FFFFFF;
  --paper:#F5F7FA;      /* blanc de marque — jamais #fff pur en fond */
  --mist:#E7ECF3;       /* surface claire alternée */
  --mist-deep:#D3DBE6;  /* filets en mode clair */
  --slate:#8A99B4;      /* texte secondaire sur navy */
  --slate-deep:#5A6B87;  /* texte tertiaire, mentions légales */

  /* --- Accents : les 4 couleurs historiques ------------------- */
  /* teal = COULEUR D'ACTION. Le vert de confiance, l'état sain. */
  --teal:#2EC4B6;
  --teal-bright:#3FE0D0;   /* hover sur fond sombre */
  --teal-deep:#1E9C90;     /* press, texte teal sur fond clair */
  --teal-wash:#2EC4B61F;   /* fond de badge 12% */

  /* coral = ACCENT ÉDITORIAL. Ponctuation, puces, chiffres-clés. */
  --coral:#FF6B5B;
  --coral-bright:#FF8878;
  --coral-deep:#D9483A;
  --coral-wash:#FF6B5B1F;

  /* mustard = ATTENTION / MISE EN AVANT. Rare, jamais en aplat large. */
  --mustard:#F2B33D;
  --mustard-bright:#FFC963;
  --mustard-deep:#C98A18;
  --mustard-wash:#F2B33D1F;

  /* mauve = TECHNIQUE / CATÉGORIE. Tags, taxonomies, formations. */
  --mauve:#9B7EDE;
  --mauve-bright:#B49CEB;
  --mauve-deep:#7355C4;
  --mauve-wash:#9B7EDE1F;

  /* --- Couleurs du signe : extraites du dégradé du logo ------- */
  /* Réservées au logo, aux dégradés de marque et aux nœuds réseau.
     Ne jamais les utiliser comme couleur de texte ou de bouton.  */
  --signal-cyan:#35D6F5;
  --signal-violet:#8B5CF6;
  --signal-magenta:#E86BC8;
  --signal-gold:#F0A85C;
  --circuit-copper:#E9A96B;   /* trait du circuit imprimé */

  /* --- Dégradés de marque ------------------------------------ */
  --grad-house:linear-gradient(135deg,var(--signal-gold) 0%,var(--coral) 45%,var(--signal-magenta) 100%);  /* @kind other */
  --grad-wifi:linear-gradient(90deg,var(--signal-cyan) 0%,var(--signal-violet) 100%);  /* @kind other */
  --grad-signal:linear-gradient(90deg,var(--teal) 0%,var(--signal-cyan) 40%,var(--signal-violet) 100%);  /* @kind other */
  --grad-depth:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-950) 100%);  /* @kind other */
  --grad-spectrum:linear-gradient(90deg,var(--coral) 0%,var(--mustard) 33%,var(--teal) 66%,var(--mauve) 100%);  /* @kind other */
  /* halo derrière le logo / les héros */
  --glow-signal:radial-gradient(60% 60% at 50% 40%,#8B5CF62E 0%,#35D6F514 45%,transparent 75%);  /* @kind other */

  /* --- Alias sémantiques : à utiliser dans les composants ---- */
  --bg-page:var(--navy-900);
  --bg-page-alt:var(--navy-950);
  --surface-card:var(--navy-800);
  --surface-raised:var(--navy-700-solid);
  --surface-pressed:var(--navy-600);
  --surface-light:var(--paper);
  --surface-light-alt:var(--mist);

  --text-primary:var(--paper);
  --text-secondary:var(--slate);
  --text-tertiary:var(--slate-deep);
  --text-on-light:var(--navy-900);
  --text-on-light-secondary:#4A5B77;
  --text-accent:var(--teal);
  --text-link:var(--teal);
  --text-link-hover:var(--teal-bright);

  --border-hairline:#1E3452;
  --border-strong:#2A4463;
  --border-light:var(--mist-deep);
  --border-focus:var(--teal);

  --action-primary:var(--teal);
  --action-primary-hover:var(--teal-bright);
  --action-primary-press:var(--teal-deep);
  --action-primary-text:var(--navy-950);

  /* --- Nom de marque : bi-ton obligatoire ---------------------- */  /* « Tech » dans la couleur de texte, « Home » en or. Le contraste
     chaud/froid fait la hiérarchie que le blanc plat n'a pas.        */
  --wordmark-tech:var(--paper);
  --wordmark-home:var(--mustard);

  /* --- États système ----------------------------------------- */
  --success:var(--teal);
  --warning:var(--mustard);
  --danger:var(--coral);
  --info:var(--mauve);
}

/* Section claire : inverse les alias, aucun composant à réécrire */
.th-light{
  --bg-page:var(--paper);
  --surface-card:var(--white);
  --surface-raised:var(--mist);
  --surface-pressed:var(--mist-deep);
  --text-primary:var(--navy-900);
  --text-secondary:#4A5B77;
  --text-tertiary:#6E7E99;
  --text-accent:var(--teal-deep);
  --text-link:var(--teal-deep);
  --text-link-hover:var(--navy-900);
  --border-hairline:var(--mist-deep);
  --border-strong:#B9C4D3;
  --action-primary:var(--teal-deep);
  --action-primary-hover:var(--teal);
  --action-primary-text:var(--white);
  --wordmark-tech:var(--navy-900);
  --wordmark-home:var(--mustard-deep);
}

/* --- Web : couleurs d'état des composants (thème WordPress) -------- */
:root{
  --action-accent:var(--coral);
  --action-accent-hover:var(--coral-bright);
  --action-accent-text:#3A0F09;
  --veil-hover:#FFFFFF14;
  --header-bg-solid:#0A1628E6;
  --glass-bg:#0F1F36B3;
  --glass-border:#FFFFFF14;
  /* anneaux d'accent : 35 % (badges, alertes) et 25 % (pastilles d'icône) */
  --teal-ring:#2EC4B659;--coral-ring:#FF6B5B59;--mustard-ring:#F2B33D59;--mauve-ring:#9B7EDE59;
  --teal-ring-soft:#2EC4B640;--coral-ring-soft:#FF6B5B40;--mustard-ring-soft:#F2B33D40;--mauve-ring-soft:#9B7EDE40;
}