/* ==========================================================================
   SunLouvre Pergolas : socle de design, commun a TOUT le site.
   Cree le 25 septembre 2026 pour la refonte.

   Ce fichier ne style RIEN. Il ne fait que declarer des variables. Il est
   charge en PREMIER, avant common.css et avant les CSS de page, pour que
   tout le monde puisse lire les memes valeurs. L'unification proprement
   dite se fait dans sl-unify.css, charge en DERNIER.

   Source de verite : prototype-accueil-v2/css/styles.css
   ========================================================================== */

:root {
  /* --- Couleurs -------------------------------------------------------- */
  --sl-color-primary: #333230;
  --sl-color-secondary: #946955;
  --sl-color-secondary-hover: #7a5843;
  --sl-color-white: #ffffff;
  --sl-color-cream: #f3f1ee;
  --sl-color-taupe-light: #c9a58f;

  --sl-color-ink-70: rgba(51, 50, 48, 0.7);
  --sl-color-ink-55: rgba(51, 50, 48, 0.55);
  --sl-color-ink-20: rgba(51, 50, 48, 0.2);
  --sl-color-ink-12: rgba(51, 50, 48, 0.12);
  --sl-color-ink-10: rgba(51, 50, 48, 0.1);
  --sl-color-paper-80: rgba(255, 255, 255, 0.8);
  --sl-color-paper-60: rgba(255, 255, 255, 0.6);
  --sl-color-paper-12: rgba(255, 255, 255, 0.12);
  --sl-color-paper-08: rgba(255, 255, 255, 0.08);

  /* Anciennes valeurs du theme, gardees pour la transition.
     #f5f0eb etait la creme de blog/accessoires/landing, #f3f1ee est celle
     du prototype. On converge vers --sl-color-cream. */
  --sl-color-cream-legacy: #f5f0eb;
  --sl-color-border: #d6cfc6;
  --sl-color-muted: #9a8e82;

  /* --- Familles -------------------------------------------------------- */
  /* futura-pt vient du kit Adobe duy6uql, charge globalement depuis le
     25 septembre 2026. Avant cette date il n'etait charge QUE sur la page
     visite virtuelle : partout ailleurs le site retombait sur Futura (Mac)
     ou sur une sans-serif generique (Windows). */
  --sl-font-sans: 'futura-pt', 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --sl-font-serif: 'Cormorant Garamond', 'cormorant-garamond', Georgia, serif;
  --sl-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Graisses -------------------------------------------------------- */
  /* ATTENTION : le kit Adobe duy6uql ne sert futura-pt qu'en 400 et 700
     (verifie le 25 septembre 2026 en lisant le CSS du kit). Un 300 demande
     quelque part dans le theme est donc rendu en 400, il ne retombe PAS sur
     la police suivante de la pile. En pratique le site n'a que deux
     graisses. --sl-weight-light existe pour que le jour ou le kit gagne un
     Light, un seul endroit change. */
  --sl-weight-light: 300;   /* rendu 400 aujourd'hui */
  --sl-weight-regular: 400; /* corps, titres par defaut */
  --sl-weight-bold: 700;    /* la moitie accentuee d'un titre, les boutons */

  /* --- Echelle de type ------------------------------------------------- */
  --sl-text-body: 17px;
  --sl-leading-body: 1.65;
  --sl-leading-lede: 1.7;

  --sl-text-h1: clamp(38px, 4.6vw, 76px);
  /* Le titre d'un HERO n'a pas la largeur d'un titre de contenu : il vit
     dans une demi-colonne, a cote d'une photo. C'est l'echelle du hero de
     page du prototype (.h--display), pas celle d'un h1 pleine largeur.
     A 76px, « Salle de montre Region d'Ottawa/Gatineau » sortait de l'ecran. */
  --sl-text-hero: clamp(32px, 4.2vw, 60px);
  --sl-leading-hero: 1.04;
  --sl-text-h2: clamp(30px, 3vw, 44px);
  --sl-text-h3: clamp(22px, 2vw, 28px);
  --sl-leading-h: 1.12;
  --sl-tracking-h: -0.005em;

  /* Surtitre : Cormorant italique, pas de majuscules */
  --sl-text-eyebrow: clamp(22px, 2vw, 28px);
  /* Libelle mono : majuscules, tres espace */
  --sl-text-label: 11.5px;
  --sl-tracking-label: 0.14em;

  /* --- Mise en page ---------------------------------------------------- */
  --sl-margin: 40px;
  --sl-max: 1680px;
  --sl-gap: 24px;
  --sl-section-pad: clamp(96px, 11vw, 168px);

  /* --- Hauteur du header ------------------------------------------------
     L'ancien header faisait 130px, code en dur dans six fichiers CSS. Le
     nouveau est plus mince. Toute page pleine hauteur doit lire CETTE
     variable, jamais un nombre. Voir REFONTE-WP-CHECKLIST.md, etape 2. */
  --sl-header-h: 130px;
  --sl-header-h-stuck: 88px;

  /* --- Mouvement ------------------------------------------------------- */
  --sl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sl-reveal-duration: 600ms;
}

@media (max-width: 720px) {
  :root {
    --sl-margin: 16px;
  }
}