/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css - LA CHARTE, ET RIEN D'AUTRE

   Aucune couleur, aucun espacement, aucun rayon ne doit être écrit ailleurs
   qu'ici. Le reste du style s'y réfère par son nom.

   Deux thèmes, parce que juger un visuel dépend du fond qui l'entoure : le
   même visuel ne se lit pas de la même façon sur noir et sur blanc. Le
   changement de thème est un outil de contrôle, pas un ornement.

   Le sombre est le thème par défaut. Le clair s'obtient en posant
   data-theme="clair" sur la balise <html>.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Thème sombre, par défaut ── */
  --fond:          #0F1115;
  --vide:          #0A0C0F;   /* la surface qu'un visuel ne couvre pas */
  --surface:       #191C23;
  --surface-haute: #232733;
  --bordure:       #2E3340;
  --texte-fort:    #F2F4F8;
  --texte-faible:  #9AA3B2;
  /* Deux couleurs de marque, deux rôles qui ne se croisent pas.
     Le violet est l'ACTION : boutons principaux, filtres actifs, liens.
     Le cyan, celui du trait du logo, est la SIGNATURE : motifs fins, icône
     de dépôt, fichier qui survole, sol des téléphones. Jamais en aplat ni sur
     un bouton : il est presque celui de TikTok (#25F4EE), et un bouton cyan à
     côté d'une barre TikTok ferait croire que les deux disent la même chose. */
  --accent:        #7C5CFF;
  --sur-accent:    #FFFFFF;
  --signal:        #33EFFF;

  /* Vert franc, et non le vert menthe #3ECF8E d'origine : trop chargé en cyan,
     il se lisait comme du bleu, d'autant plus qu'il voisinait le cyan de TikTok.
     Une couleur de verdict doit se nommer sans hésiter. */
  --ok:        #4ADE80;
  --attention: #FFB020;
  --probleme:  #FF5C5C;

  /* Couleurs de marque des réseaux. Elles servent au repérage, jamais à
     décorer : l'accent du produit reste le violet. Et ce sont de simples
     barres, pas des logos, parce qu'afficher un logo tiers demande une
     autorisation qu'on n'a pas. Voir REGLES.md, « Citer les marques d'autrui ».
     Elles n'expriment JAMAIS un verdict : celui-ci porte un mot écrit. */
  --marque-instagram: #E1306C;
  --marque-facebook:  #1877F2;
  --marque-linkedin:  #0A66C2;
  --marque-tiktok:    #25F4EE;
  --marque-pinterest: #E60023;
  --marque-youtube:   #FF0000;
  --marque-x:         #E7E9EA;

  /* ── Typographie ──
     Une seule famille, Inter, disponible sur Google Fonts. Jamais en dessous
     de 400 : macOS épaissit le texte, Windows l'affine, et une graisse 300
     élégante sur Mac devient illisible sous Windows. */
  --police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --taille-titre:   28px;
  --taille-section: 20px;
  --taille-corps:   15px;
  --taille-etiquette: 13px;
  --taille-micro:   11px;

  /* ── Espacements ── */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;

  /* ── Rayons ── */
  --rayon-petit:  6px;
  --rayon-moyen:  10px;
  --rayon-grand:  16px;
  --rayon-rond:   999px;

  /* ── Structure ── */
  --hauteur-barre:   64px;
  --largeur-colonne: 300px;
  /* 440 px et non 380 : le détail a été remonté d'un cran en taille, une
     colonne trop étroite l'aurait haché en lignes de six mots. */
  /* Puis elle suit l'écran jusqu'à 540 px : sur un grand moniteur, 440 px
     laissaient le détail serré à côté d'un aperçu qui avait de la place. */
  --largeur-detail:  clamp(440px, 32vw, 540px);
  --apercu-hauteur-max: 420px;

  /* Hauteur de l'aperçu en mode immersion. En vh pour suivre l'écran, avec un
     plafond en pixels : sur un très grand moniteur, un aperçu de 900 px de
     haut n'aide plus personne à juger, il écrase tout le reste. */
  --immersion-hauteur: min(72vh, 720px);

  /* Ce qu'une carte en situation (fil, partage de lien, épingle) retire à la
     hauteur de son visuel pour loger entête, légende et actions. Sur
     ordinateur tout doit tenir dans l'écran ; sur téléphone la page défile,
     le visuel garde donc toute sa hauteur. */
  --reserve-carte: 300px;
}

/* ── Thème clair ── */
[data-theme="clair"] {
  --fond:          #F7F8FA;
  --vide:          #E7E9EE;
  --surface:       #FFFFFF;
  --surface-haute: #EFF1F5;
  --bordure:       #DFE3EA;
  --texte-fort:    #14171F;
  --texte-faible:  #626B7A;
  --accent:        #5B41E0;
  --sur-accent:    #FFFFFF;
  /* Le cyan du logo s'efface sur blanc : même teinte, plus dense. */
  --signal:        #0B9FB0;

  /* Sur fond clair, les teintes vives du thème sombre tombent sous le seuil
     de contraste lisible. Elles sont donc volontairement plus foncées. */
  --ok:        #157F3C;
  --attention: #C77700;
  --probleme:  #D93B3B;
}

/* Sur téléphone, la colonne de contrôle et le panneau n'ont pas la place
   d'exister : ils deviennent des écrans à part entière. */
@media (max-width: 860px) {
  :root {
    --hauteur-barre: 56px;
    --taille-titre: 25px;
    --immersion-hauteur: min(52vh, 460px);
    --reserve-carte: 0px;
  }
}