/* =============================================================================
   Drimmer — jetons de design
   Source unique de vérité pour les couleurs, la typographie, les espacements.
   Aucune valeur chromatique ou typographique ne doit être écrite ailleurs.

   Chargé par _main.php selon $config->siteIdent. Les noms de variables sont
   le contrat que site.css attend : ils doivent rester identiques d'un espace
   à l'autre, seules leurs valeurs changent.

   ── D'où viennent ces valeurs ────────────────────────────────────────────────
   Du discours de la marque, tel que le porte le site de production :
   « manufacturier de luminaires depuis 1945 », « design "Haute Couture" »,
   « à l'avant-garde de la création ». Là où Home Edelweiss parle de maison et
   de nature — céladon sur porcelaine, contraste doux —, Drimmer parle de
   lumière et de métal : une nuit bleutée, un gris perle froid de galerie, et
   le laiton, posé comme une pièce de métal sur un luminaire.

   Deux couleurs, deux rôles distincts. Le LAITON est la couleur de travail :
   liens, focus, bandeaux, survols — tout ce qui doit porter du texte, dans un
   sens ou dans l'autre. La SAUGE OLIVE #9DA88A vient d'un catalogue Drimmer :
   c'est la couleur de la marque elle-même. Elle ne peut pas travailler — 2,5:1
   sur blanc, elle ne porte ni ne reçoit de texte clair — mais elle excelle là
   où le fond est sombre (7,2:1) et sous du texte encre. Elle tient donc les
   filets de marque et les rehauts sur fond noir, le laiton fait le reste.

   L'olive est à 82° de teinte quand les verts d'Edelweiss sont à 137° et 156° :
   jaune-vert contre bleu-vert. Les deux maisons ne se confondent pas.

   La parenté reste lisible : même sans-serif de labeur, même rythme, mêmes
   composants. Drimmer appartient au groupe Edelweiss, les deux sites doivent
   se reconnaître pour frères.
   ============================================================================= */

:root {
  /* --- Couleurs de base ------------------------------------------------- */
  --c-ink:            #14161C;  /* texte, fonds sombres — nuit bleutée */
  --c-ink-soft:       #22252D;
  --c-text:           #3A3E48;
  --c-text-muted:     #585D68;
  --c-text-light:     #6A6F7A;
  --c-text-faint:     #8A8F99;
  --c-porcelain:      #EBEBEE;  /* fond de section alterné — gris perle froid */
  --c-white:          #FFFFFF;
  --c-rule:           #DCDCE1;  /* filets et séparateurs */
  --c-rule-strong:    #C5C6CD;  /* bordures de champs */
  --c-rule-header:    #E1E1E7;

  /* Sur fond ink */
  --c-on-ink:         #EBEBEE;
  --c-on-ink-muted:   #B3B6BF;
  --c-on-ink-faint:   #7B7F89;
  --c-on-ink-rule:    #262A33;
  --c-on-ink-border:  #5F6574;  /* 3,1:1 sur l'encre : le chrome étant sombre,
                                   cette bordure dessine des boutons réels */
  --c-on-ink-accent:  #9DA88A;  /* sur-titre du carrousel — sauge du catalogue */
  --c-on-ink-lede:    #C3C6CE;  /* chapô du carrousel */
  --c-on-ink-highlight: #9DA88A;  /* survols sur fond sombre — sauge du catalogue */

  /* --- Accents ---------------------------------------------------------- */
  /* Le laiton est assez sombre pour servir de couleur de texte sur blanc
     (5,9:1) autant que de fond sous du blanc. Un or plus franc n'aurait pu
     tenir les deux rôles : il vit sur fond sombre, où --c-on-ink-accent
     prend le relais. */
  --c-accent:         #7E5F36;  /* laiton patiné : accent de la marque */
  --c-accent-dark:    #654B29;
  --c-accent-pale:    #F8F4ED;
  --c-accent-on:      #EFE7DA;  /* texte secondaire sur bandeau laiton */

  /* Couleur de marque. L'espace n'en porte qu'une : Drimmer. Relevée sur un
     catalogue de la maison — c'est la marque qui se nomme, pas nous. */
  --c-drimmer:        #9DA88A;  /* sauge olive */
  --c-drimmer-pale:   #EDF0E7;

  --c-error:          #A5342A;
  --c-error-bg:       #FBF1F0;
  --c-error-text:     #7A2A22;

  /* --- Typographie ------------------------------------------------------ */
  /* Le titre change de CATÉGORIE, pas seulement de dessin : Edelweiss titre
     en serif, Drimmer en sans. C'est l'écart le plus visible qu'on puisse
     produire, et le plus fidèle — la géométrique est la lettre de l'objet de
     design depuis le Bauhaus, celle que les maisons emploient pour leur
     signature. Jost est une Futura : cercles parfaits, capitales larges.
     Contrairement à une didone, elle ne repose sur aucun délié et tient donc
     les 17 px de l'en-tête aussi bien que les 108 px du numéro de planche.
     Le sans-serif de labeur ne change pas — c'est lui qui garde la parenté. */
  --f-display: Jost, Futura, 'Century Gothic', system-ui, sans-serif;  /* titres, chiffres, citations */
  --f-text:    'Work Sans', system-ui, sans-serif;                     /* courant, interface */

  /* Échelle fluide : la borne basse vaut pour 360px, la haute pour 1440px */
  --t-h1:        clamp(34px, 4.6vw, 64px);
  --t-h2:        clamp(28px, 3.2vw, 44px);
  --t-h2-small:  clamp(26px, 2.8vw, 36px);
  --t-h3:        clamp(22px, 2.2vw, 30px);
  --t-h4:        clamp(20px, 1.8vw, 24px);
  --t-hero:      clamp(30px, 3.4vw, 50px);
  --t-quote:     clamp(23px, 2.4vw, 32px);
  --t-statement: clamp(24px, 2.6vw, 38px);
  --t-fact:      clamp(30px, 3vw, 42px);
  --t-lede:      clamp(17px, 1.5vw, 20px);
  --t-body:      17px;
  --t-body-s:    16px;
  --t-meta:      15px;
  --t-small:     14px;
  --t-label:     13px;
  --t-overline:  11px;
  --t-micro:     10px;

  /* Interlignes resserrés d'un cran : les titres en capitales n'ont ni
     jambages ni hampes, l'espace entre les lignes paraît plus grand qu'il
     n'est. */
  --lh-tight: 1.08;
  --lh-title: 1.18;
  --lh-body:  1.7;
  --lh-prose: 1.8;

  --ls-overline: 0.24em;
  --ls-label:    0.16em;
  --ls-button:   0.12em;

  /* --- Rythme ------------------------------------------------------------ */
  /* Identique à Edelweiss : la structure est commune, seule la parure change. */
  --gutter:      clamp(20px, 4vw, 40px);   /* marge latérale de page */
  --w-page:      1440px;                    /* largeur maximale de contenu */
  --w-prose:     90ch;                      /* colonne de lecture */

  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 40px;
  --s-section:       clamp(56px, 7vw, 96px);   /* padding vertical de section */
  --s-section-lg:    clamp(72px, 9vw, 120px);  /* section respirante */
  --s-heading:       clamp(36px, 5vw, 56px);   /* titre de section → contenu */
  --gap-grid:        clamp(32px, 3.4vw, 48px);
  --gap-tiles:       clamp(20px, 2.4vw, 36px) clamp(16px, 2vw, 28px);

  /* Largeur minimale d'une cellule : pilote le nombre de colonnes */
  --tile-min:      210px;
  --tile-min-wide: 280px;
  --card-min:      300px;

  /* --- Mouvement -------------------------------------------------------- */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-slide: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast:    160ms;
  --d-base:    620ms;
  --d-slide:   760ms;

  --shadow-pop: 0 18px 40px rgba(20, 22, 28, 0.16);
}

/* Contexte de marque. Les classes sont propres à cet espace : site.css ne les
   connaît pas, il ne lit que --c-brand. Le champ « Classe de thème » de la page
   marque doit valoir theme-drimmer. */
.theme-drimmer { --c-brand: var(--c-drimmer); --c-brand-pale: var(--c-drimmer-pale); }