/* Brigade Web : feuille commune des gabarits PHP (mêmes jetons que l'accueil Elementor). */
:root {
  --bw-black: #0b0b0b;
  --bw-black-2: #121212;
  --bw-paper: #f1efe9;
  --bw-orange: #eb4823;
  --bw-line-dark: rgba(11, 11, 11, .17);
  --bw-line-light: rgba(255, 255, 255, .18);
  --bw-sans: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  --bw-mono: "IBM Plex Mono", Consolas, monospace;
  --bw-max: 1560px;
  --bw-pad: clamp(20px, 3.2vw, 52px);
}

html { -webkit-text-size-adjust: 100%; }
body.bw-site {
  margin: 0;
  background: var(--bw-black);
  color: var(--bw-paper);
  font-family: var(--bw-sans);
  font-size: 15px; /* comme Astra, pour que les pages reprises gardent leur rendu */
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bw-site *, .bw-site *::before, .bw-site *::after { box-sizing: border-box; }
.bw-site img { display: block; max-width: 100%; height: auto; }
.bw-main p { margin: 0; }
.bw-main h1, .bw-main h2, .bw-main h3 { margin: 0; color: inherit; font-family: inherit; font-weight: 600; }
.bw-main a { color: inherit; }

.bw-shell { width: min(100%, var(--bw-max)); margin: 0 auto; padding-left: var(--bw-pad); padding-right: var(--bw-pad); }
.bw-point { color: var(--bw-orange); }

.bw-meta {
  font-family: var(--bw-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.bw-meta a { text-decoration: none; }
.bw-meta a:hover, .bw-meta a:focus-visible { color: var(--bw-orange); }

.bw-label {
  display: grid;
  grid-template-columns: minmax(54px, 120px) 1fr;
  gap: 18px;
  padding-top: 13px;
  border-top: 1px solid currentColor;
  font-family: var(--bw-mono);
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.bw-liens { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.bw-liens a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--bw-orange);
  transition: color .2s ease;
}
.bw-liens a:hover, .bw-liens a:focus-visible { color: var(--bw-orange); }
.bw-liens svg, .bw-m-carte-nom svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; }

.bw-texte > * + * { margin-top: 1em; }
.bw-texte p, .bw-texte li { font-size: 18px; line-height: 1.6; }

/* Fiche membre */
.bw-m-hero {
  padding: clamp(118px, 12vw, 160px) 0 clamp(56px, 6vw, 96px);
  background: radial-gradient(circle at 72% 42%, rgba(235, 72, 35, .13), transparent 34%), var(--bw-black);
}
.bw-m-hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 100px);
  align-items: end;
}
.bw-m-hero .bw-meta { color: rgba(255, 255, 255, .62); }
.bw-m-hero h1 {
  margin-top: clamp(40px, 6vw, 96px);
  font-size: clamp(60px, 9vw, 152px);
  line-height: .84;
  letter-spacing: -.075em;
}
.bw-m-role {
  margin-top: clamp(22px, 2.4vw, 34px);
  padding-top: 16px;
  border-top: 1px solid var(--bw-line-light);
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 500;
}
.bw-m-phrase { margin-top: 16px; max-width: 560px; color: rgba(241, 239, 233, .76); font-size: 18px; line-height: 1.5; }
.bw-m-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--bw-black-2); }
.bw-m-photo img { width: 100%; height: 100%; object-fit: cover; }

.bw-m-corps { padding: clamp(64px, 7vw, 112px) 0; background: #fff; color: var(--bw-black); }
.bw-m-corps-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.bw-m-corps .bw-meta { color: rgba(11, 11, 11, .66); }
.bw-m-bio .bw-texte { margin-top: 14px; max-width: 720px; color: rgba(11, 11, 11, .8); }
.bw-m-expertises { margin: 12px 0 28px; padding: 0; list-style: none; }
.bw-m-expertises li { padding: 12px 0; border-top: 1px solid var(--bw-line-dark); font-size: 18px; font-weight: 600; }
.bw-m-expertises li:last-child { border-bottom: 1px solid var(--bw-line-dark); }

.bw-m-equipe { padding: clamp(72px, 8vw, 128px) 0; background: var(--bw-paper); color: var(--bw-black); }
.bw-m-equipe h2 { margin-top: clamp(36px, 4vw, 64px); font-size: clamp(42px, 6vw, 96px); line-height: .9; letter-spacing: -.065em; }
.bw-m-cartes { margin-top: clamp(40px, 4vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.bw-m-carte { display: block; text-decoration: none; }
.bw-m-carte-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: #e3dfd6; }
.bw-m-carte-photo img { width: 100%; height: 100%; object-fit: cover; transition: filter .25s ease; }
.bw-m-carte-nom { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; letter-spacing: -.04em; transition: color .2s ease; }
.bw-m-carte .bw-meta { display: block; margin-top: 6px; color: rgba(11, 11, 11, .62); }
.bw-m-carte:hover .bw-m-carte-photo img, .bw-m-carte:focus-visible .bw-m-carte-photo img { filter: brightness(.9); }
.bw-m-carte:hover .bw-m-carte-nom, .bw-m-carte:focus-visible .bw-m-carte-nom { color: var(--bw-orange); }

@media (max-width: 900px) {
  .bw-m-hero-grille, .bw-m-corps-grille { grid-template-columns: minmax(0, 1fr); }
  .bw-m-photo { max-width: 520px; }
}
@media (max-width: 640px) {
  .bw-m-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw-texte p, .bw-texte li { font-size: 16px; }
}

/* Gabarit générique */
.bw-g-hero { padding: clamp(118px, 12vw, 160px) 0 clamp(40px, 5vw, 72px); background: var(--bw-black); }
.bw-g-hero .bw-meta { color: rgba(255, 255, 255, .62); }
.bw-g-hero h1 { margin-top: clamp(32px, 5vw, 72px); font-size: clamp(52px, 8vw, 128px); line-height: .86; letter-spacing: -.07em; }
.bw-g-corps { padding: clamp(56px, 6vw, 96px) 0; background: #fff; color: var(--bw-black); }
.bw-g-corps .bw-texte { max-width: 760px; color: rgba(11, 11, 11, .8); }
.bw-g-corps .bw-texte a { color: var(--bw-black); text-decoration-color: var(--bw-orange); text-underline-offset: 3px; }

/* 404 */
.bw-404 { min-height: 78svh; display: flex; align-items: flex-end; padding-bottom: clamp(64px, 8vw, 120px); }
.bw-404-texte { margin-top: 24px; max-width: 560px; color: rgba(241, 239, 233, .76); font-size: 20px; line-height: 1.45; }
.bw-404-liens { margin-top: 28px; }

/* Accessibilité ------------------------------------------------------------------------------------------- */
.bw-saut {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.bw-saut:focus {
  position: fixed; z-index: 100000; top: 12px; left: 12px; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
  padding: 12px 18px; border-radius: 4px; background: var(--bw-orange); color: var(--bw-black);
  font: 700 14px/1 var(--bw-sans); text-decoration: none; outline: 2px solid var(--bw-paper); outline-offset: 2px;
}
.bw-main:focus { outline: none; }

/* Contrastes (WCAG AA) : mêmes teintes, un cran plus foncées là où elles ne passaient pas.
   Préfixe html body : passe devant les styles en ligne des pages reprises d'Elementor. */

/* 1. Deuxièmes lignes grises des grands titres sur fond beige : 3:1 minimum */
html body #brigade-site .bw-section--paper .bw-display-md > span,
html body #brigade-site .bw-section--paper .bw-display-lg > span,
html body #brigade-site .bw-work-substatement,
html body #brigade-services-page #bws-web .bws-category-head h2 > span,
html body #brigade-services-page .bws-next-inner h2 > span,
html body #brigade-about .bw-about-work-statement h2 > span,
html body #brigade-about .bw-about-work-end > p:nth-child(2) { color: rgba(11, 11, 11, .5); }

/* 2. Petit texte gris sur fond beige : 4,5:1 */
html body #brigade-site .bw-section--paper .bw-metric > p:nth-child(3),
html body #brigade-site .bw-section--paper .bw-fit-item > p:nth-child(3) { color: rgba(11, 11, 11, .66); }

/* 3. Petits chiffres et libellés orange sur fond clair : orange plus profond (le grand orange reste) */
html body #brigade-site .bw-manifesto-preview-item .bw-mono,
html body #brigade-manifesto .bm-principle-num,
html body #brigade-services-page #bws-web .bws-mono { color: #b8340f; }

/* 4. Texte foncé translucide sur les sections orange : plus opaque */
html body #brigade-site .bw-section--orange .bw-step p,
html body #brigade-global-footer .bw-partner-role,
html body #brigade-services-page #bws-branding .bws-category-intro,
html body #brigade-services-page #bws-branding .bws-mono,
html body #brigade-services-page #bws-branding .bws-service-row p { color: rgba(11, 11, 11, .88); }

/* Mouvement : apparitions plus discrètes (10 px, 0,55 s au lieu de 20 à 30 px sur 0,7 à 0,85 s), pas de mouvement au survol */
html body #brigade-site .bw-reveal,
html body #brigade-global-footer .bw-reveal,
html body #brigade-contact-page .bc-reveal,
html body #brigade-manifesto .bm-reveal,
html body #brigade-services-page .bws-reveal,
html body #brigade-podcast .bp-reveal,
html body #brigade-about .bw-about-reveal { transition-duration: .55s; }
html body #brigade-site .bw-reveal:not(.bw-in),
html body #brigade-global-footer .bw-reveal:not(.bw-in),
html body #brigade-contact-page .bc-reveal:not(.bc-in),
html body #brigade-manifesto .bm-reveal:not(.bm-in),
html body #brigade-services-page .bws-reveal:not(.bws-in),
html body #brigade-podcast .bp-reveal:not(.bp-in),
html body #brigade-about .bw-about-reveal:not(.bw-about-in) { transform: translateY(10px); }
html body #brigade-services-page .bws-hero-service:hover svg { transform: none; }

/* Texte minimum 11 px sur téléphone */
@media (max-width: 640px) {
  html body #brigade-global-footer .bw-partner-role,
  html body #brigade-site .bw-team-photo-tag,
  html body #brigade-site .bw-team-photo-year,
  html body #brigade-manifesto .bm-index-num,
  html body #brigade-global-header .bgh-menu-btn > span,
  html body #brigade-site .bw-service-row .bw-mono,
  html body #brigade-global-footer .bw-footer-line span,
  html body #brigade-contact-page .bc-contact-data strong { font-size: 11px; }
}

/* ==========================================================================================================
   Système de mise en page commun (audit design 2026-10-24) : un seul rythme vertical, un seul écart
   étiquette → titre, un plancher de taille pour le texte courant, une longueur de ligne lisible.
   ========================================================================================================== */
:root {
  --bw-section-y: clamp(80px, 8vw, 120px);   /* marge haut/bas d'une section */
  --bw-label-gap: clamp(36px, 4.4vw, 64px);  /* étiquette (« 01 · L'équipe ») → titre */
}

/* 1. Rythme vertical : 158 px sur l'accueil, 86 à 122 ailleurs → une seule valeur partout */
html body #brigade-site .bw-section,
html body #brigade-services-page .bws-section:not(.bws-hero),
html body #brigade-manifesto .bm-intro,
html body #brigade-manifesto .bm-index,
html body #brigade-manifesto .bm-closing,
html body #brigade-about .bw-about-section,
html body #brigade-podcast .bp-section,
html body #brigade-podcast .bp-offres,
html body #brigade-contact-page .bc-form-section,
html body #brigade-privacy .bpv-body,
html body .bw-m-corps,
html body .bw-m-equipe { padding-top: var(--bw-section-y); padding-bottom: var(--bw-section-y); }
html body #brigade-realisations .brl-section { padding-top: var(--bw-section-y); }
html body #brigade-realisations .brl-section--noir { padding-bottom: var(--bw-section-y); }

/* 2. Étiquette → titre : de 52 à 124 px selon la page → une seule valeur */
html body #brigade-site .bw-intro-grid,
html body #brigade-site .bw-services-heading,
html body #brigade-site .bw-work-heading,
html body #brigade-site .bw-strategy-layout,
html body #brigade-site .bw-manifesto-preview-head,
html body #brigade-site .bw-label + .bw-display-lg,
html body #brigade-services-page .bws-category-head,
html body #brigade-services-page .bws-orchestration-head,
html body #brigade-manifesto .bm-intro-grid,
html body #brigade-manifesto .bm-index-head,
html body #brigade-manifesto .bm-label + h2,
html body #brigade-about .bw-about-team-head,
html body #brigade-about .bw-about-story-layout,
html body #brigade-about .bw-about-work-layout,
html body #brigade-podcast .bp-section-heading,
html body #brigade-contact-page .bc-form-grid,
html body .bw-m-equipe h2 { margin-top: var(--bw-label-gap); }

/* 3. Texte courant : 14 à 15 px sous des titres de 60 à 140 px → plancher de 16 px */
html body #brigade-site .bw-metric p:nth-child(n):nth-child(n),
html body #brigade-site .bw-fit-item p:nth-child(n):nth-child(n),
html body #brigade-site .bw-principle p:nth-child(n):nth-child(n),
html body #brigade-site .bw-work-feature-scope:nth-child(n),
html body #brigade-site .bw-strategy-copy,
html body #brigade-services-page .bws-flow-item p:nth-child(n):nth-child(n),
html body #brigade-about .bw-about-discipline-copy,
html body #brigade-podcast .bp-production-item p,
html body #brigade-podcast .bp-section p:not([class*="mono"]):not([class*="label"]) { font-size: 16px; line-height: 1.5; }
html body #brigade-services-page .bws-hero-service-list { font-size: 14px; }

/* 4. Longueur de ligne : jusqu'à 113 caractères → ~80 au maximum */
html body #brigade-manifesto .bm-intro-copy,
html body #brigade-manifesto .bm-principle-copy,
html body #brigade-manifesto .bm-closing-copy,
html body #brigade-privacy .bpv-text { max-width: 36em; }
html body #brigade-manifesto .bm-principle-copy p,
html body #brigade-manifesto .bm-intro-copy p,
html body #brigade-privacy .bpv-text p,
html body #brigade-privacy .bpv-text li { font-size: 18px; line-height: 1.6; }
html body #brigade-services-page .bws-hero-copy,
html body #brigade-about .bw-about-hero-copy,
html body #brigade-podcast .bp-hero-copy { max-width: 34em; }
html body #brigade-realisations .brl-texte { max-width: 34em; }

/* 5. Titres de page : « Services. » à 101 px quand Réalisations, Manifesto et Nous joindre sont à 166 px */
html body #brigade-services-page .bws-hero h1 { font-size: clamp(66px, 11.5vw, 184px); line-height: .8; letter-spacing: -.078em; }

/* 6. Boutons : coins droits partout (Réalisations était la seule page à 4 px) */
html body #brigade-realisations .brl-btn { border-radius: 0; }

/* 7. Cartes à hauteur fixe (300 px) : sur téléphone, le vide au-dessus des titres disparaît */
@media (max-width: 760px) {
  html body #brigade-site .bw-metric,
  html body #brigade-site .bw-fit-item,
  html body #brigade-site .bw-principle,
  html body #brigade-services-page .bws-flow-item,
  html body #brigade-podcast .bp-production-item { min-height: 0; }
}

/* 8. Page Nous joindre : le pied répétait mot pour mot le titre et l'invitation de la page */
html body.bw-page-nous-joindre #brigade-global-footer .bw-contact > .bw-shell > .bw-label,
html body.bw-page-nous-joindre #brigade-global-footer .bw-contact-title,
html body.bw-page-nous-joindre #brigade-global-footer .bw-contact-copy { display: none; }
html body.bw-page-nous-joindre #brigade-global-footer .bw-contact { min-height: 0; padding-top: var(--bw-section-y); }
html body.bw-page-nous-joindre #brigade-global-footer .bw-contact-main { margin-top: 0; }

/* 9. En-tête de Services : deux fils d'Ariane superposés (« Services · Brigade Web » et « Services / Toutes nos
      expertises ») collés au grand titre → on garde le premier, comme sur les autres pages */
html body #brigade-services-page .bws-breadcrumb { display: none; }
html body #brigade-services-page .bws-hero-main h1 { margin-top: clamp(40px, 6vw, 96px); }

/* 10. Services, téléphone : la bande de catégories défile collée au bord de l'écran → marge intérieure comme le reste */
@media (max-width: 640px) {
  html body #brigade-services-page .bws-hero-services { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; scroll-padding-left: 18px; }
}

/* 11. Nous joindre, pied : la navigation s'aligne sur le haut des coordonnées */
html body.bw-page-nous-joindre #brigade-global-footer .bw-contact-nav { margin-top: 0; padding-top: 0; }