/* ============================================================
   BELCO GROUP — brand.css
   Tokens issus du Moodboard (sept. 2026). Source unique de vérité.
   Chaque site de division applique data-metier sur <html> ou <body>.
   v22 — échelle fluide, conteneur plafonné, états complets.
   ============================================================ */

:root {
  /* — Couleurs matière (base commune) — */
  --creme-100: #F4F6F7;   /* fond par défaut */
  --creme-200: #E7EBEE;   /* cartes, encarts */
  --creme-300: #D8DEE3;   /* filets sur fond clair */
  --slate-950: #0E1216;   /* texte, encre */
  --slate-900: #171D24;   /* bandes sombres secondaires */
  --slate-800: #232A33;   /* hero, pied, CTA */
  --slate-600: #4A545F;   /* texte secondaire sur clair */
  --clay-600:  #B14A2C;   /* filets de cotation, signature */
  --signal-500:#F2C12E;   /* focus, statuts */
  --blanc:     #FFFFFF;

  /* Encres dérivées (contraste vérifié) */
  --ink-70: rgba(14,18,22,.72);
  --on-dark:      #F4F6F7;
  --on-dark-70:   rgba(244,246,247,.76);
  --on-dark-55:   rgba(244,246,247,.58);
  --hair-dark:    rgba(244,246,247,.13);
  --hair-light:   rgba(14,18,22,.12);

  /* — Couleurs de marque — */
  --c-groupe:    #E30613;
  --c-renov:     #E2641F;
  --c-toiture:   #EFA81B;
  --c-energie:   #2EA64A;
  --c-menuiserie:#1890C0;

  /* Accent actif = groupe par défaut ; surchargé par division (voir plus bas) */
  --accent: var(--clay-600);          /* remplissage / sur fond foncé */
  --accent-ink: var(--accent);        /* MÊME teinte lisible sur fond clair (AA ≥4.5:1) */
  --accent-deep: var(--accent-ink);   /* état survol du bouton plein */
  --on-accent: var(--blanc);          /* texte posé sur le bouton */

  /* — Typographie — */
  --font-titre: 'Archivo', system-ui, sans-serif;      /* 500–800 */
  --font-corps: 'Spectral', Georgia, serif;            /* 300–600 */
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace; /* chiffres et labels techniques */

  /* Échelle typo fluide — une seule source, plus d'override par page */
  --display: clamp(2.5rem, 1.45rem + 4.4vw, 5rem);
  --h1:      clamp(2.25rem, 1.5rem + 3.1vw, 3.75rem);
  --h2:      clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --h3:      clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --chapo:   clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --corps:   clamp(1rem, .97rem + .16vw, 1.125rem);
  --petit:   .9375rem;
  --label:   .72rem;   --label-ls: .12em;
  --num:     .9375rem;
  --h1-lh: 1.04; --h2-lh: 1.08; --h3-lh: 1.25; --chapo-lh: 1.55; --corps-lh: 1.65;

  /* — Structure — */
  --radius-btn: 4px;
  --radius-champ: 6px;
  --radius-carte: 10px;
  --filet: 1px solid var(--clay-600);
  --gap-section: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --nav-h: 68px;
  /* Marge latérale : respire en petit, plafonne le contenu à 1200px en grand */
  --marge-lat: max(clamp(1.25rem, 5vw, 4rem), calc((100vw - 1200px) / 2));

  /* — Mouvement (jamais de rebond) — */
  --anim: 240ms cubic-bezier(.22,.61,.36,1);
  --anim-lent: 420ms cubic-bezier(.22,.61,.36,1);
}

/* Division colors: pose data-metier="renov|toiture|energie|menuiserie" */
[data-metier="renov"]     { --accent: var(--c-renov);      --accent-ink: #C24A18; --accent-deep: #A33D11; }
[data-metier="toiture"]   { --accent: var(--c-toiture);    --accent-ink: #8A5E06; --accent-deep: #6E4B04; --on-accent: var(--slate-950); }
[data-metier="energie"]   { --accent: var(--c-energie);    --accent-ink: #1A6B31; --accent-deep: #145226; }
[data-metier="menuiserie"]{ --accent: var(--c-menuiserie); --accent-ink: #10688F; --accent-deep: #0B5273; }
[data-metier="groupe"]    { --accent: var(--c-groupe);     --accent-ink: #C20510; --accent-deep: #9E040D; }

/* — Base — */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 1rem); }
body {
  margin: 0;
  background: var(--creme-100);
  color: var(--slate-950);
  font-family: var(--font-corps);
  font-size: var(--corps);
  line-height: var(--corps-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;              /* garde-fou : plus jamais de scroll latéral */
}
img, svg, video { max-width: 100%; }
h1,h2,h3,h4,nav,button,.label { font-family: var(--font-titre); }
h1 { font-size: var(--h1); line-height: var(--h1-lh); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 600; letter-spacing: -0.005em; }
.chapo { font-size: var(--chapo); line-height: var(--chapo-lh); }
.num, time, .prix { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.label {
  font-size: var(--label); letter-spacing: var(--label-ls);
  text-transform: uppercase; font-weight: 600;
}
:target { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

/* Lien d'évitement */
.skip {
  position: absolute; left: .75rem; top: -4rem; z-index: 300;
  background: var(--slate-950); color: var(--creme-100);
  padding: .7rem 1.1rem; border-radius: var(--radius-btn);
  font-family: var(--font-titre); font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: top var(--anim);
}
.skip:focus { top: .75rem; }

/* — Boutons — */
.btn {
  font-family: var(--font-titre); font-weight: 600; font-size: .95rem;
  border-radius: var(--radius-btn); border: 1px solid transparent;
  padding: .8rem 1.4rem; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  line-height: 1.2; text-align: center;
  transition: background var(--anim), color var(--anim), border-color var(--anim);
}
.btn--primary { background: var(--accent-ink); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-deep); }
.btn--ghost   { background: transparent; border-color: var(--slate-950); color: var(--slate-950); }
.btn--ghost:hover { background: var(--slate-950); color: var(--creme-100); }
.btn--light   { background: transparent; border-color: rgba(244,246,247,.45); color: var(--creme-100); }
.btn--light:hover { background: var(--creme-100); color: var(--slate-950); border-color: var(--creme-100); }
.lien-fleche  { color: var(--accent-ink); text-decoration: none; font-family: var(--font-titre); font-weight: 600;
  font-size: .95rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem 0; }
.lien-fleche::after { content: "→"; display: inline-block; transition: transform var(--anim); }
.lien-fleche:hover::after { transform: translateX(4px); }

/* — Champs — */
.champ {
  border: 1px solid var(--slate-600); border-radius: var(--radius-champ);
  padding: .8rem 1rem; font-family: var(--font-corps); font-size: var(--corps);
  background: var(--blanc); color: var(--slate-950); width: 100%;
  transition: border-color var(--anim);
}
.champ::placeholder { color: #5C6670; }
.champ:hover { border-color: var(--slate-950); }
.champ:focus { outline: 2px solid var(--slate-950); outline-offset: 1px; box-shadow: 0 0 0 3px var(--signal-500); border-color: var(--slate-950); }

/* — Carte générique — */
.carte { background: var(--creme-200); border: 1px solid var(--hair-light); border-radius: var(--radius-carte); overflow: hidden; }
.carte__bandeau { height: 4px; background: var(--accent); }

/* — Sections + filet de faîtage — */
.section { padding: var(--gap-section) var(--marge-lat); }
.section + .section { border-top: var(--filet); }

/* — Nav collante — */
.nav {
  position: sticky; top: 0; height: var(--nav-h); z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 var(--marge-lat);
  background: color-mix(in srgb, var(--creme-100) 88%, transparent);
  backdrop-filter: blur(10px);
}

/* — Logo Belco : BELCO en encre + suffixe couleur métier, jambe du B = barre 4 couleurs — */
.belco {
  position: relative; display: inline-flex; align-items: baseline;
  font-family: var(--font-titre); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; font-size: 1.5rem; white-space: nowrap; user-select: none;
}
.belco__wm  { color: var(--slate-950); }
.belco__sfx { color: var(--accent); }
.belco--rev .belco__wm { color: var(--creme-100); }
/* La barre couvre exactement la jambe gauche du B */
.belco__b { position: relative; display: inline-block; }
.belco__bar {
  position: absolute; left: .015em; top: .155em; width: .16em; height: .70em;
  display: flex; flex-direction: column; overflow: hidden;
}
.belco__bar i { flex: 1; }
.belco__bar i:nth-child(1){ background: var(--c-renov); }
.belco__bar i:nth-child(2){ background: var(--c-toiture); }
.belco__bar i:nth-child(3){ background: var(--c-energie); }
.belco__bar i:nth-child(4){ background: var(--c-menuiserie); }

/* Logo dynamique : les 4 barres poussent de haut en bas à l'arrivée ; vague au survol */
@media (prefers-reduced-motion: no-preference) {
  .belco__bar i { transform: scaleY(0); transform-origin: top; animation: belcoGrow .5s cubic-bezier(.22,.61,.36,1) both; }
  .belco__bar i:nth-child(1){ animation-delay: .10s; }
  .belco__bar i:nth-child(2){ animation-delay: .18s; }
  .belco__bar i:nth-child(3){ animation-delay: .26s; }
  .belco__bar i:nth-child(4){ animation-delay: .34s; }
  @keyframes belcoGrow { to { transform: scaleY(1); } }
  .belco:hover .belco__bar i { animation: belcoWave .55s ease; }
  .belco:hover .belco__bar i:nth-child(1){ animation-delay: 0s; }
  .belco:hover .belco__bar i:nth-child(2){ animation-delay: .06s; }
  .belco:hover .belco__bar i:nth-child(3){ animation-delay: .12s; }
  .belco:hover .belco__bar i:nth-child(4){ animation-delay: .18s; }
  @keyframes belcoWave { 0%,100% { transform: scaleY(1); } 45% { transform: scaleY(.55); } }
}

/* — Accessibilité — */
:focus-visible { outline: 2px solid var(--slate-950); outline-offset: 2px; box-shadow: 0 0 0 4px var(--signal-500); border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* — Entrée : fondu + 12px, sans rebond — */
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: enter var(--anim) both; }
  @keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}