/* tokens.css — Variables du design system, direction « Soft UI » (relief doux,
   surfaces éclairées en haut à gauche, bleu brillant). Remplace « Encre et papier ».
   Couleurs, typographie, espacements, rayons, ombres, dimensions et z-index.
   Aucune valeur en dur ne doit apparaître ailleurs que dans ce fichier. */

:root {
  /* Couleurs : fond et surfaces */
  --couleur-fond: #E8ECF1;
  --couleur-fond-haut: #F1F4F7;
  --couleur-fond-bas: #E1E6EC;
  --couleur-surface: #F5F7FA;
  --couleur-surface-claire: #FBFCFD;
  --degrade-surface: linear-gradient(145deg, #F9FAFC, #EBEEF2);
  --couleur-surface-2: #ECEFF3;
  --couleur-bordure: #D6DCE4;
  --couleur-bordure-forte: #BCC5D1;
  --couleur-voile: rgba(28, 36, 51, 0.40);

  /* Couleurs : texte */
  --couleur-texte: #1C2433;
  --couleur-texte-2: #4A5466;
  --couleur-texte-3: #646D7F;
  --couleur-texte-inverse: #FFFFFF;

  /* Couleurs : primaire, actions humaines */
  --couleur-primaire: #1F6BE0;
  --couleur-primaire-haut: #5FA3FF;
  --couleur-primaire-bas: #1D66DA;
  --couleur-primaire-survol: #1A5CC4;
  --couleur-primaire-actif: #164FA8;
  --couleur-primaire-teinte: #E2ECFC;
  --couleur-primaire-bordure: #B3CBF3;

  /* Couleurs : bleu nuit, actions sombres secondaires (« Voir les prospects ») */
  --couleur-nuit: #2B3654;
  --couleur-nuit-haut: #46567B;
  --couleur-nuit-bas: #1D2742;

  /* Couleurs : accent, tout ce qui vient de l'agent IA */
  --couleur-accent: #7A4A72;
  --couleur-accent-survol: #653C5E;
  --couleur-accent-teinte: #F2EAF1;
  --couleur-accent-bordure: #D6C2D3;

  /* Couleurs : sémantiques */
  --couleur-succes: #2C7A47;
  --couleur-succes-teinte: #E3F0E7;
  --couleur-attention: #A86400;
  --couleur-attention-teinte: #F8EEDC;
  --couleur-erreur: #B3261E;
  --couleur-erreur-survol: #921C15;
  --couleur-erreur-teinte: #F8E4E2;

  /* Couleurs : focus clavier */
  --couleur-focus: #1F6BE0;

  /* Couleurs des réseaux : réservées aux badges d'identification */
  --reseau-instagram: #E1306C;
  --reseau-facebook: #1877F2;
  --reseau-linkedin: #0A66C2;
  --reseau-google: #4285F4;

  /* Aperçus réseaux : lignes visibles avant « … plus » dans le fil de chaque réseau */
  --apercu-lignes-instagram: 2;
  --apercu-lignes-facebook: 5;
  --apercu-lignes-linkedin: 3;
  --apercu-largeur: 500px;

  /* Séries de graphiques : ordre fixe, validé pour les daltonismes (série 1 Instagram, 2 Facebook, 3 LinkedIn) */
  --graphique-1: #2F6A9C;
  --graphique-2: #D08A2E;
  --graphique-3: #A0588F;
  --graphique-1-teinte: #E3ECF4;

  /* Placeholders d'images */
  --visuel-1: #DCE3D8;
  --visuel-2: #E5DED2;
  --visuel-3: #D7DDE4;
  --visuel-4: #E6DDE4;
  --visuel-trait: rgba(27, 29, 27, 0.28);

  /* Typographie : familles */
  --police-titres: "Inter", system-ui, "Segoe UI", sans-serif;
  --police-texte: "Inter", system-ui, "Segoe UI", sans-serif;

  /* Typographie : tailles */
  --taille-12: 12px;
  --taille-13: 13px;
  --taille-14: 14px;
  --taille-15: 15px;
  --taille-17: 17px;
  --taille-20: 20px;
  --taille-26: 26px;
  --taille-34: 34px;
  --taille-40: 40px;

  /* Typographie : interlignages */
  --interligne-12: 16px;
  --interligne-13: 20px;
  --interligne-14: 20px;
  --interligne-15: 24px;
  --interligne-17: 24px;
  --interligne-20: 28px;
  --interligne-26: 34px;
  --interligne-34: 40px;
  --interligne-40: 48px;

  /* Typographie : graisses */
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-demi: 600;

  /* Espacements */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --esp-16: 64px;

  /* Rayons : un rayon par famille d'objet */
  --rayon-xs: 6px;
  --rayon-sm: 11px;
  --rayon-md: 18px;
  --rayon-pill: 999px;

  /* Barres de défilement : fines, pouce arrondi dans le ton des bordures, piste invisible */
  --defilement-epaisseur: 10px;
  --defilement-pouce: #C3CBD6;
  --defilement-pouce-survol: #97A2B2;
  --defilement-pouce-actif: var(--couleur-primaire);
  --defilement-piste: transparent;

  /* Reliefs : la lumière vient d'en haut à gauche. Trois niveaux de relevé,
     deux de creux, un reflet pour les boutons pleins et un halo bleu.
     Allégés le 2026-10-06 (décalage, flou et opacité environ divisés par deux) :
     les ombres portées dominaient l'interface. */
  --ombre-sombre: rgba(146, 158, 178, 0.22);
  --ombre-claire: rgba(255, 255, 255, 0.7);
  --relief-petit: 1px 1px 2px var(--ombre-sombre), -1px -1px 2px var(--ombre-claire), inset 1px 1px 0 rgba(255, 255, 255, 0.9);
  --relief: 2px 2px 6px var(--ombre-sombre), -2px -2px 5px var(--ombre-claire), inset 1px 1px 0 rgba(255, 255, 255, 0.9);
  --relief-fort: 3px 3px 10px rgba(136, 148, 170, 0.28), -3px -3px 8px var(--ombre-claire), inset 1px 1px 0 rgba(255, 255, 255, 0.95);
  --creux: inset 1px 1px 4px rgba(146, 158, 178, 0.26), inset -1px -1px 4px rgba(255, 255, 255, 0.8);
  --creux-leger: inset 1px 1px 2px rgba(146, 158, 178, 0.24), inset -1px -1px 2px rgba(255, 255, 255, 0.75);
  --reflet: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.16);
  --enfonce: inset 2px 2px 5px rgba(0, 0, 0, 0.25);
  --enfonce-fort: inset 2px 2px 5px rgba(0, 0, 0, 0.32);
  --ombre-nuit: 1px 2px 4px rgba(29, 39, 66, 0.18);
  --ombre-erreur: 0 3px 8px rgba(179, 38, 30, 0.22);
  --ombre-accent: 0 2px 6px rgba(122, 74, 114, 0.25);
  --ombre-curseur: 1px 1px 3px rgba(120, 132, 150, 0.4);
  --degrade-curseur: linear-gradient(#FFFFFF, #E3E7EC);
  --halo: rgba(46, 125, 255, 0.22);
  --halo-anneau: rgba(46, 125, 255, 0.18);
  --halo-bleu: 0 0 0 3px var(--halo-anneau), 0 4px 10px var(--halo);
  --halo-focus: 0 0 0 2px rgba(46, 125, 255, 0.75), 0 0 8px var(--halo);
  --lisere-clair: rgba(255, 255, 255, 0.75);
  --degrade-primaire: linear-gradient(var(--couleur-primaire-haut), var(--couleur-primaire-bas));
  --degrade-nuit: linear-gradient(var(--couleur-nuit-haut), var(--couleur-nuit-bas));
  --degrade-accent: linear-gradient(#B57BAA, #7A4A72);
  --degrade-agent: linear-gradient(145deg, #FAF5F9, #EDE3EB);
  --degrade-succes: linear-gradient(#5FD08F, #1F9A55);
  --degrade-erreur: linear-gradient(#E46A62, #B3261E);

  /* Ombres des couches flottantes */
  --ombre-flottante: var(--relief-fort);
  --ombre-modale: 0 12px 32px rgba(28, 36, 51, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.9);

  /* Dimensions */
  --largeur-nav: 96px;
  --hauteur-barre: 56px;
  --largeur-contenu-max: 1400px;
  --hauteur-controle: 40px;
  --hauteur-controle-sm: 32px;
  --largeur-panneau-lateral: 360px;

  /* Épaisseurs */
  --trait: 1px;
  --trait-fort: 2px;

  /* Z-index */
  --z-base: 0;
  --z-collant: 100;
  --z-deroulant: 200;
  --z-panneau: 300;
  --z-modale: 400;
  --z-glisser: 450;
  --z-toast: 500;

  /* Mouvement */
  --duree-rapide: 120ms;
  --duree-normale: 200ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);
  --courbe-rebond: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Glisser-déposer du calendrier : la pile saisie pivote, ses cartes s'ouvrent en éventail */
  --rotation-glisser: 20deg;
  --rotation-eventail: 7deg;
  --echelle-glisser: 1.04;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-rapide: 0ms;
    --duree-normale: 0ms;
    --rotation-glisser: 0deg;
    --rotation-eventail: 0deg;
    --echelle-glisser: 1;
  }
}