/* ============================================================
   Bourgueil & Rouleau — Tokens
   Couleurs, typographie, boutons et espaces, par rôle. Chargé avant
   main.css et promenade.css, qui n'écrivent plus de valeur en dur.
   ============================================================ */

:root {
  /* ── Couleurs ── */
  --color-blue:         #00b7ff;
  --color-blue-section: #51b4f9;                    /* visiteurs seulement (main.css gelé) ; en Promenade, le bleu du logo */
  --color-bg:           #f5f5f5;
  --color-title:        #202020;
  --color-text:         #595959;
  --color-text-muted:   rgba(32, 32, 32, 0.8);
  --color-text-faint:   #999;                       /* extrait d'actualité */
  --color-text-on-dark: #f5f5f5;                    /* titre de l'Agence, liens du pied de page */
  --color-nav:          #575757;                    /* liens de l'en-tête */
  --color-border:       rgba(32, 32, 32, 0.2);
  --color-border-subtle: rgba(32, 32, 32, 0.1);     /* membres de l'équipe, téléphone */
  --color-border-on-dark: rgba(255, 255, 255, 0.3); /* filets du pied de page, téléphone */
  --color-white:        #ffffff;
  --color-black:        #000;                       /* fond des vidéos, voile de l'ouverture */
  --color-placeholder:  #cccccc;                    /* hero de l'Agence avant son image */
  --color-accent-footer: #F7FF0B;                   /* survol des liens du pied de page, sélection du texte (Promenade) */
  --color-quote-line:   #99ccf2;                    /* légende des actualités */
  --color-header-scrolled: rgba(245, 245, 245, 0.75);
  --color-overlay-hero: rgba(32, 32, 32, 0);
  --color-overlay-grid: rgba(0, 57, 93, 0);
  --color-overlay-grid-hover: rgba(0, 57, 93, 0.45);
  --color-overlay-agence: rgba(16, 16, 16, 0.35);
  --color-overlay-lightbox: rgba(20, 20, 20, 0.88);
  --color-overlay-footer: rgba(0, 0, 0, 0.72);
  --shadow-header:          0 4px 8px rgba(32, 32, 32, 0.04);
  --shadow-header-scrolled: 0 4px 20px rgba(32, 32, 32, 0.08);

  /* ── Typographie ── */
  --font-base: 'Inter', sans-serif;

  --size-xs:   14px;
  --size-sm:   16px;
  --size-md:   19px;
  --size-lg:   28.5px;
  --size-xl:   70px;
  --size-xxl:  76px;

  --lh-tight:  1.0;
  --lh-body:   1.5;
  --lh-xl:     76px;

  --track-xl:  -0.836px;
  --track-lg:  -1.14px;
  --track-nav: 0.98px;

  /* ── Boutons ── */
  --btn-gap:           40px;            /* libellé → cercle (.br-btn) */
  --btn-fs:            var(--size-sm);
  --btn-fw:            500;
  --btn-underline-gap: 10px;            /* libellé → trait */
  --btn-circle:        40px;
  --btn-circle-fs:     18px;
  --cta-underline-gap: 4px;             /* liens soulignés : grille, menu mobile */

  /* ── Espaces ── */
  --space-section-v: 140px;
  --space-section-h: 160px;
  --space-block-v:   40px;              /* bande d'en-tête de bloc (barre du titre, pied de page) */
  --gap-grid:        60px;              /* colonnes */
  --gap-block:       40px;              /* blocs voisins */

  --transition-base: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Tablette ≤1024px : espace de section réduit */
@media (max-width: 1024px) {
  :root {
    --space-section-v: 100px;
    --space-section-h: 80px;
  }
}

/* Téléphone ≤767px */
@media (max-width: 767px) {
  :root {
    --space-section-v: 56px;
    --space-section-h: 20px;
  }
}

/* ── Espaces du mode Promenade (promenade.css) ─────────────────
   Unité u = 8 px à 1440 px. Sur ordinateur, u suit la largeur de
   l'écran (100vw / 180 = 8 px à 1440), comme les images du site,
   déjà en vw : la composition reste la même de 1025 à 2560 px.
   Textes : multiples de u. Sections : multiples d'un module de 16u,
   dans le rapport 1 : 2 : 3 (resserré, respiration, grande
   respiration). */
html[data-br-mode="proposition"] {
  --pr-u: 8px;
  --pr-titre: calc(var(--pr-u) * 2);     /* sous-titre → paragraphe, étiquette → titre */
  --pr-texte: calc(var(--pr-u) * 12);    /* bloc de texte → bloc de texte, titre → premier bloc */
  --pr-module: calc(var(--pr-u) * 16);
  --pr-serre: var(--pr-module);                 /* 1 module : texte après une grande image */
  --pr-air: calc(var(--pr-module) * 2);         /* 2 modules : d'une scène à l'autre */
  --pr-pause: calc(var(--pr-module) * 3);       /* 3 modules : citations, énoncés, fin de page */

  /* ── v2 : fondations validées par J-E le 13/11 (piste B « Proportion »,
     WIDGETS.md). Sous 768 et de 768 à 1024, valeurs fixes ; à partir de
     1025, tout suit u, sauf le texte, borné. */
  /* Grille de 12 colonnes : marges, gouttières, ligne de lecture */
  --pr-marge: 24px;
  --pr-gout: 16px;
  --pr-mesure: 34em;      /* 53 à 64 signes, en em du texte courant */
  --pr-c3: calc((100% - 11 * var(--pr-gout)) / 12 * 3 + 2 * var(--pr-gout));   /* 3 colonnes */
  --pr-c10: calc((100% - 11 * var(--pr-gout)) / 12 * 10 + 9 * var(--pr-gout)); /* 10 colonnes */
  /* Typo : neuf rôles (taille, interligne), deux graisses */
  --ty-affiche: 48px;  --ty-affiche-lh: 1;
  --ty-enonce: 32px;   --ty-enonce-lh: 1.1;
  --ty-titre: 28px;    --ty-titre-lh: 1.12;
  --ty-citation: 24px; --ty-citation-lh: 1.3;
  --ty-sous: 20px;     --ty-sous-lh: 1.25;
  --ty-chapeau: 18px;  --ty-chapeau-lh: 1.5;
  --ty-texte: 16px;    --ty-texte-lh: 1.7;
  --ty-petit: 14px;    --ty-petit-lh: 1.6;
  --ty-etiquette: 13px; --ty-etiquette-lh: 20px;
  --ty-w-texte: 400;   /* texte, citation, petit */
  --ty-w-fort: 600;    /* titres, sous-titres, chapeau, valeurs, liens, étiquette */
  /* Couleurs : gris légèrement bleutés ; un seul bleu, celui du logo */
  --pr-noir: #1b1f23;     /* titres */
  --pr-gris: #4a5258;     /* texte */
  --pr-discret: #687077;  /* libellés, rôles, légendes */
  --color-blue-section: var(--color-blue);
}
@media (min-width: 768px) {
  html[data-br-mode="proposition"] {
    --pr-marge: 64px; --pr-gout: 24px;
    --ty-affiche: 72px; --ty-enonce: 40px; --ty-titre: 32px; --ty-citation: 28px;
  }
}
@media (min-width: 1025px) {
  html[data-br-mode="proposition"] {
    --pr-u: calc(100vw / 180);
    --pr-marge: calc(var(--pr-u) * 20); --pr-gout: calc(var(--pr-u) * 4);
    --ty-affiche: calc(var(--pr-u) * 13);
    --ty-enonce: calc(var(--pr-u) * 7);
    --ty-titre: calc(var(--pr-u) * 5);
    --ty-citation: calc(var(--pr-u) * 4);
    --ty-sous: calc(var(--pr-u) * 3);
    --ty-chapeau: clamp(18px, calc(var(--pr-u) * 2.5), 24px);
    --ty-texte: clamp(16px, calc(var(--pr-u) * 2.125), 19px);
  }
}
/* Tablette et téléphone (v2) : même système, module de 8u = 64 px.
   Rapport 1 : 2 : 3 conservé (64, 128, 192) ; textes 2u et 6u. */
@media (max-width: 1024px) {
  html[data-br-mode="proposition"] {
    --pr-module: calc(var(--pr-u) * 8);
    --pr-texte: calc(var(--pr-u) * 6);
  }
}