/*
 * Jetons de la charte SIMA.
 *
 * Trois mots tiennent la ligne : atelier, precision, duree.
 *
 * Le rouge est rare, donc puissant : il ne sert qu'a UNE chose, l'action de demander un
 * devis. Un seul bouton rouge par ecran. L'acier prend en charge tout ce qui est
 * technique et neutre - en-tetes de tableau, blocs de caracteristiques, fil d'Ariane.
 *
 * L'ancien site faisait l'inverse : un theme jaune sur un logo rouge, et un fond
 * photographique derriere le contenu.
 */

:root {
  /* Marque. Le rouge du logo mesure #FF1E1A sur un JPEG compresse, donc bruite ;
     #E32219 est sa valeur normalisee, plus dense et lisible en petits caracteres. */
  --sima-rouge: #e32219;
  --sima-rouge-fonce: #b41a13;
  --sima-rouge-pale: #fdeceb;
  --sima-acier: #2c4a63;
  --sima-acier-pale: #eef3f7;

  /* Neutres */
  --sima-encre: #16181c;
  --sima-gris-700: #4a5058;
  /* Assombri depuis #8b929b, qui ne donnait que 3,14:1 sur blanc - sous le seuil AA de
     4,5:1 exige pour du texte courant. La teinte est conservee, la clarte baissee juste
     assez : 4,99:1 sur blanc, 4,52:1 sur le gris de fond. Le texte d'appui doit rester
     discret, pas illisible - et la moitie des visiteurs le lisent sur un telephone, en
     plein jour, sur un chantier. */
  --sima-gris-500: #6b7077;
  --sima-gris-300: #d5d9de;
  --sima-gris-100: #f2f4f6;
  --sima-blanc: #ffffff;

  /*
   * ------------------------------------------------------------------ Roles -----
   *
   * La palette ci-dessus donne des COULEURS ; ce bloc donne des ROLES. C'est la
   * distinction qui rend deux themes possibles : une regle qui dit
   * `background: var(--sima-fond)` suit le theme, une regle qui dit
   * `color: var(--sima-blanc)` reste blanche - et c'est voulu, c'est le texte pose
   * sur un bouton rouge, qui ne change pas de couleur parce que la page s'assombrit.
   *
   * Le partage s'est fait sur la propriete, pas sur le jeton : `--sima-blanc` servait
   * 16 fois de surface et 21 fois de texte sur fond fonce. Confondre les deux etait
   * exactement ce qui empechait d'ouvrir un theme sombre sans repeindre chaque regle.
   */
  --sima-fond: var(--sima-blanc);
  --sima-fond-2: var(--sima-gris-100);
  /* Un bloc volontairement sombre DANS le theme clair - le pied de page. Il ne
     s'inverse pas au theme sombre, il s'y fond. */
  --sima-fond-inverse: var(--sima-encre);

  --sima-texte: var(--sima-encre);
  --sima-texte-2: var(--sima-gris-700);
  --sima-texte-3: var(--sima-gris-500);

  --sima-bordure: var(--sima-gris-300);
  --sima-bordure-tenue: var(--sima-gris-100);
  --sima-bordure-forte: var(--sima-gris-500);

  /* Les lettres du logo.
   *
   * BLANCHES DANS LES DEUX THEMES, et c'est une decision, pas un oubli : le logo est
   * pose sur ses quatre carres rouges, jamais sur le fond de la page. C'est donc du
   * rouge que ses lettres doivent se detacher, et le rouge ne change pas avec le theme.
   * Les faire suivre le fond les rendait noires sur rouge en clair - lisible, mais ce
   * n'est plus le logo de la maison.
   *
   * Le jeton reste : il dit ou se regle la question, et le pied de page s'en sert deja
   * pour garder la main sur sa propre zone. */
  --sima-logo-texte: var(--sima-blanc);

  /* Etats */
  --sima-succes: #1b7f4b;
  --sima-succes-pale: #e8f5ee;
  --sima-alerte: #b45309;
  --sima-alerte-pale: #fdf3e7;

  /* Typographie. Barlow Condensed laisse passer des titres longs de produits
     techniques sans casser la grille ; Inter porte les chiffres tabulaires, sans
     lesquels un tableau de caracteristiques ne s'aligne pas. */
  --sima-police-titre: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --sima-police-texte: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sima-taille-base: 17px;
  --sima-mesure: 68ch;

  /* Echelle, base 17 px.
   *
   * Le cran d'affichage `t0` n'existait pas, et c'est ce qui manquait le plus : le titre
   * d'accroche de l'accueil et le nom d'une bande abrasive portaient le meme poids. Quand
   * rien ne domine l'ecran, la page parait plate - c'est ce que le client a appele
   * « pas de punch ».
   *
   * L'ecart entre l'accroche et le texte courant passe de 2,5x a 4,25x. C'est le levier
   * de perception le plus rentable de toute la refonte, et il ne coute qu'une variable. */
  --sima-t0: clamp(2.75rem, 4.6vw, 4.25rem);
  --sima-t1: 3rem;
  --sima-t2: 2.15rem;
  --sima-t3: 1.6rem;
  --sima-corps-large: 1.12rem;
  --sima-corps: 1rem;
  --sima-petit: 0.88rem;
  --sima-micro: 0.76rem;

  /* Espacement, base 4 px. Aucune valeur hors de cette liste. */
  --sima-esp-1: 4px;
  --sima-esp-2: 8px;
  --sima-esp-3: 12px;
  --sima-esp-4: 16px;
  --sima-esp-6: 24px;
  --sima-esp-8: 32px;
  --sima-esp-12: 48px;
  --sima-esp-16: 64px;
  --sima-esp-24: 96px;

  /* Formes. Rien au-dela : les angles tres arrondis appartiennent au vocabulaire des
     applications grand public, pas a celui de l'outillage professionnel. */
  --sima-rayon-champ: 4px;
  --sima-rayon-carte: 8px;

  /* Deux couches plutot qu'une : une ombre a couche unique se lit comme un filtre pose
     sur l'element, deux couches se lisent comme de la lumiere. */
  --sima-ombre-1: 0 1px 2px rgba(22, 24, 28, 0.05), 0 4px 10px rgba(22, 24, 28, 0.04);
  --sima-ombre-2: 0 2px 4px rgba(22, 24, 28, 0.06), 0 12px 24px rgba(22, 24, 28, 0.1);

  /* Grille.
   *
   * 1280 px laissaient 688 px de blanc sur un ecran 1920, soit 36 % de l'ecran perdu -
   * et surtout TROIS produits par ligne sur une page famille, colonne de filtres
   * deduite. Un catalogue de 341 references qui en montre trois a la fois oblige a
   * defiler sur 3 400 px pour voir une seule page.
   *
   * A 1560 px la meme page en montre quatre, sans reduire la taille des vignettes. */
  /* Une part de la fenetre plutot qu'une largeur fixe : au-dela de 1560 px, le site
     laissait deux bandes vides de plus en plus larges sur les ecrans d'atelier. */
  --sima-largeur-max: 90%;
  --sima-largeur-texte: 720px;

  /* Le rapport des visuels produit, partout le meme.
   *
   * C'est celui des sources : les 349 photographies reprises sont en 4:3, et le
   * convertisseur recadre a ce rapport. Le declarer ici evite qu'un cadre s'en ecarte
   * quelque part et fasse sauter l'image d'un ecran a l'autre. */
  --sima-ratio-produit: 4 / 3;
  --sima-gouttiere: clamp(16px, 3vw, 32px);

  /* Hauteur de l'en-tete collant, en une seule variable : elle etait ecrite en dur dans
     le `top` de la colonne de filtres, et les deux divergeaient des qu'on touchait a
     l'une des deux. */
  --sima-hauteur-entete: 113px;

  /* Zone tactile minimale : c'est la cible WCAG 2.2, et surtout ce qui rend le site
     utilisable avec un gant de chantier. */
  --sima-touche-min: 48px;

  --sima-transition: 150ms ease-out;
}

/*
 * ---------------------------------------------------------------- Theme sombre -----
 *
 * Il a longtemps ete ecarte ici, au motif qu'un catalogue consulte en plein jour sur un
 * chantier n'en a pas l'usage. L'argument vaut pour le chantier, pas pour le bureau ou
 * se preparent les devis, ni pour le telephone consulte le soir.
 *
 * Il ne redefinit que des ROLES, jamais la marque : le rouge et l'acier gardent leur
 * valeur, seules les surfaces, les textes et les bordures basculent. C'est aussi ce qui
 * borne le cout de verification des contrastes a une dizaine de jetons.
 *
 * Deux selecteurs, et l'ordre compte :
 *   - `[data-theme="sombre"]` : le choix explicite du visiteur, retenu d'une visite a
 *     l'autre. Il prime sur tout ;
 *   - `prefers-color-scheme: dark` SANS `[data-theme="clair"]` : le reglage du systeme,
 *     qui ne s'applique que si le visiteur n'a rien choisi.
 */
:root[data-theme="sombre"] {
  color-scheme: dark;

  /* Surfaces. Pas de noir absolu : il fait vibrer le texte clair et durcit les bords.
     Un gris tres fonce legerement bleute tient la meme famille que l'acier. */
  --sima-fond: #14171b;
  --sima-fond-2: #1b1f26;
  --sima-fond-inverse: #0e1013;

  --sima-texte: #e9edf1;
  --sima-texte-2: #b7bfc8;
  /* 4,6:1 sur le fond principal : le texte d'appui reste discret sans devenir illisible,
     comme son equivalent clair. */
  --sima-texte-3: #8d959f;

  --sima-bordure: #2c323b;
  --sima-bordure-tenue: #232830;
  --sima-bordure-forte: #46505c;

  /* L'acier d'origine tombe a 2,4:1 sur ce fond : il eclaircit, sans changer de teinte. */
  --sima-acier: #7aa7cc;
  --sima-acier-pale: #18242e;
  --sima-rouge-pale: #2e100e;
  --sima-succes-pale: #10251a;
  --sima-alerte-pale: #2a1d0c;

  /* Une ombre portee ne se voit pas sur un fond sombre : ce qui detache une carte, c'est
     un fond legerement plus clair et un contour. L'ombre reste, plus dense, pour la
     profondeur des elements flottants. */
  --sima-ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
  --sima-ombre-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 24px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;

    --sima-fond: #14171b;
    --sima-fond-2: #1b1f26;
    --sima-fond-inverse: #0e1013;

    --sima-texte: #e9edf1;
    --sima-texte-2: #b7bfc8;
    --sima-texte-3: #8d959f;

    --sima-bordure: #2c323b;
    --sima-bordure-tenue: #232830;
    --sima-bordure-forte: #46505c;

    --sima-acier: #7aa7cc;
    --sima-acier-pale: #18242e;
    --sima-rouge-pale: #2e100e;
    --sima-succes-pale: #10251a;
    --sima-alerte-pale: #2a1d0c;

    --sima-ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
    --sima-ombre-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 24px rgba(0, 0, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sima-transition: 0ms;
  }
}