/* ============================================================
   MAQUETTE « SCÈNE CONTINUE » — accueil FireLab Pyrénées
   Charte FIRELAB_charte_web_1.md (système Pyrénées, jetons --fl-*)
   Chargée APRÈS style.min.css : ce fichier surcharge les bandeaux
   de couleur et pose la scène en couches. MAQUETTE UNIQUEMENT.
   ============================================================ */

:root{
  --fl-font: 'Manrope', -apple-system, sans-serif;
  --fl-font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --fl-size-h1: 54px;   --fl-size-h2: 34px;    --fl-size-h3: 24px;
  --fl-size-lead: 19px; --fl-size-body: 16.5px; --fl-size-caption: 13px;
  --fl-size-eyebrow: 11px; --fl-size-data: 13px;
  --fl-lh-body: 1.65;

  --fl-track-wordmark: .36em;
  --fl-track-sub:      .34em;
  --fl-track-eyebrow:  .18em;
  --fl-track-data:     .14em;

  --fl-sp-1: 8px;  --fl-sp-2: 16px; --fl-sp-3: 24px;
  --fl-sp-4: 40px; --fl-sp-5: 64px; --fl-sp-6: 96px; --fl-sp-grid: 160px;
  --fl-radius: 2px;
}

/* ---------- THÈME NUIT ---------- */
[data-theme="dark"]{
  --fl-bg:          #050506;
  --fl-bg-scene:    radial-gradient(140% 120% at 50% 128%, #17100e 0%, #0d0a0b 30%, #08070a 58%, #050506 80%), #050506;
  --fl-text-strong: #F4ECE2;
  --fl-text:        #E4DBD0;
  --fl-text-muted:  rgba(196,186,174,.66);
  --fl-mono:        rgba(184,192,204,.62);
  --fl-mono-warm:   rgba(230,128,86,.82);
  --fl-mono-dim:    rgba(160,168,180,.42);
  --fl-peak:        rgba(204,212,222,.62);
  --fl-peak-alt:    rgba(230,138,92,.82);
  --fl-peak-mark:   rgba(214,120,80,.60);
  --fl-ridge-far:   rgba(150,162,178,.13);
  --fl-crest-glow:  rgba(232,128,84,.50);
  --fl-reticle:     rgba(244,120,72,.90);
  --fl-reticle-dot: #F4926A;
  --fl-grid-line:   rgba(255,255,255,.018);
  --fl-grid-dot:    rgba(255,255,255,.05);
  --fl-bracket:     rgba(255,255,255,.22);
  --fl-divider-0:   rgba(242,236,228,0);
  --fl-divider-1:   rgba(242,236,228,.40);
  --fl-glow:        rgba(244,120,56,.55);
  --fl-wordmark-grad: linear-gradient(180deg,#FFD48C 0%,#F4772E 46%,#D6431A 100%);
  --fl-vignette:    radial-gradient(135% 125% at 50% 46%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%);
  --fl-wm-shadow:   0 2px 48px rgba(0,0,0,.75);
  --fl-grain-op: .05; --fl-grain-blend: overlay;
  --fl-link: #E68056;
  --fl-panel: rgba(244,236,226,.03);
  --fl-nav-bg: rgba(5,5,6,.78);
}

/* ---------- THÈME JOUR ---------- */
[data-theme="light"]{
  --fl-bg:          #FBFAF7;
  --fl-bg-scene:    radial-gradient(130% 115% at 50% 122%, #F7E7D8 0%, #F3EADF 26%, #F7F2EA 58%, #FCFBF8 82%), linear-gradient(180deg,#FCFBF8 0%,#F2ECE3 100%);
  --fl-text-strong: #201915;
  --fl-text:        #7A6F66;
  --fl-text-muted:  rgba(64,54,46,.74);
  --fl-mono:        rgba(74,64,56,.72);
  --fl-mono-warm:   rgba(176,54,22,.90);
  --fl-mono-dim:    rgba(96,86,78,.50);
  --fl-peak:        rgba(64,56,48,.72);
  --fl-peak-alt:    rgba(176,54,22,.85);
  --fl-peak-mark:   rgba(176,54,22,.55);
  --fl-ridge-far:   rgba(120,104,92,.22);
  --fl-crest-glow:  rgba(210,88,44,.22);
  --fl-reticle:     rgba(176,54,22,.90);
  --fl-reticle-dot: #B8371A;
  --fl-grid-line:   rgba(40,28,22,.045);
  --fl-grid-dot:    rgba(40,28,22,.09);
  --fl-bracket:     rgba(40,28,22,.24);
  --fl-divider-0:   rgba(40,28,22,0);
  --fl-divider-1:   rgba(40,28,22,.32);
  --fl-glow:        rgba(210,90,50,.30);
  --fl-wordmark-grad: linear-gradient(180deg,#E0791F 0%,#CE3D18 50%,#9E230E 100%);
  --fl-vignette:    radial-gradient(140% 130% at 50% 42%, rgba(0,0,0,0) 58%, rgba(120,92,70,.07) 100%);
  --fl-wm-shadow:   none;
  --fl-grain-op: .035; --fl-grain-blend: multiply;
  --fl-link: #B8371A;
  --fl-panel: rgba(32,25,21,.028);
  --fl-nav-bg: rgba(251,250,247,.82);
}

/* ============================================================
   LA SCÈNE — couches de fond (une seule, continue, par page)
   ============================================================ */
html.scene-root{ background: var(--fl-bg-scene) !important; }
body.scene{
  background: transparent !important;
  color: var(--fl-text-muted) !important;
  font-family: var(--fl-font) !important;
  opacity: 1 !important;
  animation: none !important;
}
/* couche 2 : grille technique 160 px + points d'intersection */
body.scene::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle, var(--fl-grid-dot) 1.3px, transparent 1.6px),
    linear-gradient(var(--fl-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--fl-grid-line) 1px, transparent 1px);
  background-size: var(--fl-sp-grid) var(--fl-sp-grid);
}
/* couche 3a : vignettage */
body.scene::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: var(--fl-vignette);
}
/* couche 3b : grain (div dédiée — blend différent du vignettage) */
.fl-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity: var(--fl-grain-op); mix-blend-mode: var(--fl-grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.scene > *{ position:relative; z-index:1; }
/* les couches fixes (modales, overlays) gardent leur position d'origine */
body.scene > .ml-modal, body.scene > [class*="cookie"], body.scene > [id*="cookie"],
body.scene > .f-success{ position:fixed !important; }

/* lien d'évitement : invisible tant qu'il n'a pas le focus clavier */
body.scene .skip-nav{
  position:fixed !important; top:-100px !important; left:16px !important;
  z-index:200 !important; transition:none !important;
}
body.scene .skip-nav:focus{ top:16px !important; }

/* animations GSAP restaurées (b1 retiré) */

/* ============================================================
   NAV — verre léger sur la scène
   ============================================================ */
body.scene .nav{
  background: var(--fl-nav-bg) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fl-bracket) !important;
  box-shadow: none !important;
}
body.scene .nav-links > a,
body.scene .nav-drop-trigger{ color: var(--fl-text-strong) !important; }
body.scene .nav-drop-menu{
  background: var(--fl-bg) !important;
  border: 1px solid var(--fl-bracket) !important;
  border-radius: var(--fl-radius) !important;
}
body.scene .nav-drop-menu a{ color: var(--fl-text-muted) !important; }
body.scene .nav-drop-menu a:hover{ color: var(--fl-link) !important; }
body.scene .nav-name{ color: var(--fl-text-strong) !important; }
body.scene .nav .fl-fire,
body.scene .fl-wordmark .fire,
body.scene .brand-fl .fl-fire{
  background: var(--fl-wordmark-grad) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
body.scene .nav .fl-lab, body.scene .brand-fl .fl-lab{ color: var(--fl-text-strong) !important; }
body.scene .brand-pyr{ color: var(--fl-text) !important; font-weight:300 !important; }
body.scene .tm{ color: var(--fl-mono-dim) !important; }
body.scene .lang-btn{ color: var(--fl-text-strong) !important; border-color: var(--fl-bracket) !important; background: transparent !important; }
body.scene .lang-panel{ background: var(--fl-bg) !important; border:1px solid var(--fl-bracket) !important; }
body.scene .lang-panel-title, body.scene .lang-option, body.scene .lang-name{ color: var(--fl-text-muted) !important; }
body.scene .nav-mob span{ background: var(--fl-text-strong) !important; }

/* ============================================================
   HERO SCÈNE — composition complète du wallpaper Pyrénées
   ============================================================ */
.hero-scene{
  position:relative; min-height: 100vh; max-height: 1180px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; padding: clamp(76px, 11vh, 118px) 24px 0; overflow:hidden;
}
.hero-scene .fl-divider{ margin: 18px auto 16px; }
.hero-scene .hs-baseline{ margin-bottom: 20px; }
/* règle graduée sous la nav */
.hs-ruler{
  position:absolute; top:56px; left:4%; right:4%; height:12px; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, var(--fl-bracket) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--fl-grid-dot) 0 1px, transparent 1px 120px);
  background-size: auto 6px, auto 12px;
  background-repeat: repeat-x; background-position: bottom left, bottom left;
  opacity:.7;
}
/* annotations d'angle */
.hs-corner{
  position:absolute; display:flex; flex-direction:column; gap:6px; pointer-events:none;
  font-family:var(--fl-font-mono); font-size:12px; font-weight:500;
  letter-spacing:var(--fl-track-eyebrow); text-transform:uppercase;
}
.hs-corner .l1{ color: var(--fl-mono); }
.hs-corner .l2{ color: var(--fl-mono-dim); }
.hs-corner .l2.warm{ color: var(--fl-mono-warm); }
.hs-corner-tl{ top:88px; left:4%;  text-align:left;  }
.hs-corner-tr{ top:88px; right:4%; text-align:right; }
.hs-corner-bl{ bottom:34px; left:4%;  text-align:left;  z-index:2; }
.hs-corner-br{ bottom:34px; right:4%; text-align:right; z-index:2; }
/* équerres des angles hauts */
.hs-corner-tl::before, .hs-corner-tr::before{
  content:""; position:absolute; top:-18px; width:34px; height:34px;
  border-color:var(--fl-bracket); border-style:solid; border-width:0;
}
.hs-corner-tl::before{ left:-14px;  border-top-width:1.4px; border-left-width:1.4px; }
.hs-corner-tr::before{ right:-14px; border-top-width:1.4px; border-right-width:1.4px; }
/* picto sommet cerclé */
.hs-picto{ width:48px; height:48px; margin-bottom: var(--fl-sp-2); }
.hs-picto circle{ stroke: var(--fl-bracket); }
.hs-picto .pk{ stroke: var(--fl-reticle-dot); }
.hs-picto .dot{ fill: var(--fl-reticle-dot); stroke:none; }
/* wordmark sur UNE ligne, comme le wallpaper */
.hs-wordmark{
  font-family:var(--fl-font); font-weight:600; text-transform:uppercase; line-height:1.1;
  font-size: clamp(30px, 3.8vw, 58px); white-space:nowrap;
  letter-spacing: var(--fl-track-wordmark); text-indent: var(--fl-track-wordmark);
  color: var(--fl-text-strong); text-shadow: var(--fl-wm-shadow); margin:0;
}
.hs-wordmark .fire{
  background: var(--fl-wordmark-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hs-wordmark .lab{ color: var(--fl-text-strong); }
.hs-wordmark .py{ font-weight:300; color: var(--fl-text); }
.hs-wordmark .tm{ font-size:.32em; vertical-align:1.2em; letter-spacing:0; color:var(--fl-mono-dim); }
.fl-divider{ display:flex; align-items:center; justify-content:center; gap:22px;
             width:min(600px,80%); margin: var(--fl-sp-4) auto var(--fl-sp-3); }
.fl-divider .line  { height:1px; flex:1; background:linear-gradient(90deg,var(--fl-divider-0),var(--fl-divider-1)); }
.fl-divider .line.r{ background:linear-gradient(90deg,var(--fl-divider-1),var(--fl-divider-0)); }
.fl-divider .dot   { width:7px; height:7px; border-radius:50%; background:var(--fl-reticle-dot);
                     box-shadow:0 0 14px 2px var(--fl-glow); }
.hs-baseline{
  font-family:var(--fl-font); font-weight:500; font-size: clamp(13px, 1.5vw, 17px);
  text-transform:uppercase; letter-spacing:.28em; text-indent:.28em;
  color: var(--fl-text-muted); margin:0 0 var(--fl-sp-4);
}
.hs-stats{
  display:flex; gap: clamp(24px, 5vw, 72px); justify-content:center; flex-wrap:wrap;
  margin-bottom: var(--fl-sp-5);
}
.hs-stat{ display:flex; flex-direction:column; gap:6px; }
.hs-stat b{
  font-family:var(--fl-font); font-weight:600; font-size:26px; color:var(--fl-text-strong);
}
.hs-stat span{
  font-family:var(--fl-font-mono); font-size:var(--fl-size-eyebrow); font-weight:500;
  letter-spacing:var(--fl-track-eyebrow); text-transform:uppercase; color:var(--fl-mono);
}
.fl-btn{
  display:inline-block; font-family:var(--fl-font); font-weight:600; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; padding:15px 30px;
  border:1px solid var(--fl-reticle-dot); border-radius:var(--fl-radius);
  color:var(--fl-reticle-dot); background:transparent; transition:all .25s var(--ease);
  text-decoration:none;
}
.fl-btn:hover{ background:var(--fl-reticle-dot); color:var(--fl-bg); box-shadow:0 0 24px var(--fl-glow); }

/* baseline + CTA */
.hs-cta{
  margin-top: clamp(56px, 11vh, 128px); position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:12px;
  border-radius: 999px !important; padding: 15px 32px;
}
.cta-cible{ width:17px; height:17px; flex:0 0 auto; }

/* skyline vectorielle — la crête traverse le bas du premier écran */
.hs-skyline{
  position:relative; margin-top:auto; width:100%; height:min(42vh, 400px);
  pointer-events:none; display:block; z-index:1;
}
.hs-skyline .ridge-far { stroke: var(--fl-ridge-far); }
.hs-skyline .ridge-main{ stroke: var(--fl-peak-alt); }
.hs-skyline .peak-alt  { fill: var(--fl-peak-alt); }
.hs-skyline .cote      { font-family:var(--fl-font-mono); font-size:13px;
                         font-weight:500; letter-spacing:.14em; }
.hs-skyline .pk-name   { fill: var(--fl-mono); }
.hs-skyline .pk-alt    { fill: var(--fl-mono-warm); }
.hs-skyline .cote      { fill: var(--fl-mono-dim); }
.hs-skyline .glow-dot  { fill: var(--fl-reticle-dot); }
.hs-skyline .reticle   { stroke: var(--fl-reticle); }
.hs-skyline .reticle-dim{ stroke: var(--fl-reticle); opacity:.28; }
.hs-skyline .axis-v    { stroke: var(--fl-peak-mark); }
.hs-skyline .ret-l1    { fill: var(--fl-mono-warm); font-family:var(--fl-font-mono);
                         font-size:14px; font-weight:500; letter-spacing:.16em; }
.hs-skyline .ret-l2    { fill: var(--fl-mono-dim); font-family:var(--fl-font-mono);
                         font-size:12.5px; font-weight:500; letter-spacing:.14em; }

/* sceau v7 en nav — sans cadre ; le blanc du JPEG se fond dans la scène */
body.scene .nav-sceau{
  width:48px !important; height:48px !important; flex:0 0 auto;
  border:none !important; box-shadow:none !important; background:none !important;
  border-radius:50% !important; clip-path: circle(49.5% at 50% 50%);
  object-fit: cover;
}
[data-theme="light"] body.scene .nav-sceau, [data-theme="light"] .nav-sceau{ mix-blend-mode:multiply; }
/* picto sommet cerclé (hero) */
.hs-picto{ width:48px; height:48px; margin-bottom: var(--fl-sp-2); }
.hs-picto circle{ stroke: var(--fl-bracket); }
.hs-picto .pk{ stroke: var(--fl-reticle-dot); }
.hs-picto .dot{ fill: var(--fl-reticle-dot); stroke:none; }

/* ============================================================
   SECTIONS → panneaux posés sur la scène (plus de bandeaux)
   ============================================================ */
body.scene .sec, body.scene .sec-alt, body.scene .latest-news{
  background: transparent !important;
}

/* étiquette de section — mono, trait braise */
body.scene .tag{
  font-family: var(--fl-font-mono) !important; font-weight:500 !important;
  font-size: var(--fl-size-eyebrow) !important;
  letter-spacing: var(--fl-track-eyebrow) !important; text-transform: uppercase !important;
  color: var(--fl-mono-warm) !important;
}
body.scene .tag::before{ background: var(--fl-reticle-dot) !important; }

body.scene .h2, body.scene h2, body.scene h3{ color: var(--fl-text-strong) !important; }
body.scene .sub, body.scene p{ color: var(--fl-text-muted); }
body.scene .sec-alt .h2, body.scene .sec-alt .sub, body.scene .sec-alt p{ color: var(--fl-text-muted) !important; }
body.scene .sec-alt .h2, body.scene .sec-alt h2, body.scene .sec-alt h3{ color: var(--fl-text-strong) !important; }
body.scene a{ color: var(--fl-link); }
body.scene p a strong, body.scene p a{ color: var(--fl-link) !important; }
body.scene .section-link{ color: var(--fl-link) !important; }
body.scene strong{ color: var(--fl-text-strong); }
body.scene .sec-alt strong{ color: var(--fl-text-strong) !important; }

/* cartes → panneaux translucides + équerres d'angle */
body.scene .cd{
  background: var(--fl-panel) !important;
  border: 1px solid var(--fl-bracket) !important;
  border-radius: var(--fl-radius) !important;
  box-shadow: none !important;
  position: relative;
}
body.scene .cd::before, body.scene .cd::after{
  content:""; position:absolute; width:26px; height:26px; pointer-events:none;
  border-color: var(--fl-reticle-dot); border-style:solid; border-width:0;
  opacity:0; transition:opacity .25s var(--ease);
}
body.scene .cd::before{ top:-1px; left:-1px; border-top-width:1.4px; border-left-width:1.4px; }
body.scene .cd::after { bottom:-1px; right:-1px; border-bottom-width:1.4px; border-right-width:1.4px; }
body.scene .cd:hover::before, body.scene .cd:hover::after{ opacity:1; }
body.scene .cd:hover{ background: var(--fl-panel) !important; border-color: var(--fl-bracket) !important; transform:none !important; }
body.scene .cd h3{ color: var(--fl-text-strong) !important; }
body.scene .cd p{ color: var(--fl-text-muted) !important; }
body.scene .card-sub{
  font-family: var(--fl-font-mono) !important; font-weight:500 !important;
  letter-spacing: var(--fl-track-eyebrow) !important; text-transform:uppercase !important;
  color: var(--fl-mono-warm) !important;
}
body.scene .card-num{ color: var(--fl-mono-dim) !important; font-family: var(--fl-font-mono) !important; }
body.scene .card-link{ color: var(--fl-link) !important; }

/* le panneau de présentation (ex-hero-grid) */
body.scene .scene-panel-w{
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
}
body.scene .scene-panel-w::before, body.scene .scene-panel-w::after{ content:none; }
body.scene .scene-panel-w::before{ top:-1px; left:-1px; border-top-width:1.4px; border-left-width:1.4px; }
body.scene .scene-panel-w::after { bottom:-1px; right:-1px; border-bottom-width:1.4px; border-right-width:1.4px; }

body.scene .photo-credit{ color: var(--fl-mono-dim) !important; font-family: var(--fl-font-mono) !important; }
body.scene .about-img img, body.scene .hero-photo img{ border-radius: var(--fl-radius) !important; }

/* publications — layout du site, seules les couleurs s'adaptent à la scène */
body.scene .news-subtitle{ color: var(--fl-text-muted) !important; }
body.scene .news-all a{ color: var(--fl-link) !important; }
body.scene .news-card, body.scene .news-item{
  background: var(--fl-panel) !important; border:1px solid var(--fl-bracket) !important;
  border-radius: var(--fl-radius) !important;
}
body.scene .news-card h3, body.scene .news-item h3{ color: var(--fl-text-strong) !important; }
body.scene .news-card p, body.scene .news-item p{ color: var(--fl-text-muted) !important; }

/* ============================================================
   FOOTER — sur la scène, séparé par un filet
   ============================================================ */
body.scene .ft{
  background: transparent !important;
  border-top: 1px solid var(--fl-bracket) !important;
}
body.scene .ft, body.scene .ft a, body.scene .ft p{ color: var(--fl-text-muted) !important; }
body.scene .ft a:hover{ color: var(--fl-link) !important; }
body.scene .ft-col-t{
  font-family: var(--fl-font-mono) !important; font-weight:500 !important;
  letter-spacing: var(--fl-track-eyebrow) !important; text-transform:uppercase !important;
  color: var(--fl-mono-warm) !important;
}
body.scene .ft .fl-black{ color: var(--fl-text-strong) !important; }
body.scene .ft .fl-red{ color: var(--fl-link) !important; }
body.scene .ft-bot{ border-top: 1px solid var(--fl-bracket) !important; color: var(--fl-mono-dim) !important; }

/* modal mentions légales */
body.scene .ml-modal-content{
  background: var(--fl-bg) !important; color: var(--fl-text-muted) !important;
  border: 1px solid var(--fl-bracket) !important; border-radius: var(--fl-radius) !important;
}
body.scene .ml-modal-content p{ color: var(--fl-text-muted) !important; }
body.scene .ml-titre, body.scene .ml-sous-titre{ color: var(--fl-text-strong) !important; }

/* divers héritages du site actuel */
body.scene .scroll-progress{ background: var(--fl-reticle-dot) !important; }
body.scene .stt{ background: var(--fl-bg) !important; border:1px solid var(--fl-bracket) !important; color: var(--fl-text-strong) !important; }
body.scene .mob-contact a{ background: var(--fl-bg) !important; border:1px solid var(--fl-reticle-dot) !important; color: var(--fl-reticle-dot) !important; }

/* ============================================================
   BASCULE JOUR / NUIT
   ============================================================ */
.theme-toggle{
  position:fixed !important; right:18px !important; left:auto !important; bottom:78px !important; z-index:60;
  font-family:var(--fl-font-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--fl-text-strong); background:var(--fl-nav-bg);
  border:1px solid var(--fl-bracket); border-radius:var(--fl-radius);
  padding:10px 16px; cursor:pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition:all .25s var(--ease);
}
.theme-toggle:hover{ border-color:var(--fl-reticle-dot); color:var(--fl-reticle-dot); }

@media (max-width: 720px){
  .hero-scene{ padding: 120px 16px 160px; }
  .hs-wordmark{ letter-spacing:.22em; text-indent:.22em; }
}


/* ============================================================
   HIÉRARCHIE TYPOGRAPHIQUE — échelle de la charte (§6)
   Alignements et positions inchangés ; seuls corps/graisses/
   interlettrages retrouvent une vraie hiérarchie.
   ============================================================ */
body.scene .h2{
  font-family: var(--fl-font) !important; font-style: normal !important;
  font-weight: 600 !important;
  font-size: clamp(26px, 2.4vw, 34px) !important;
  letter-spacing: .02em !important; line-height: 1.25 !important;
  color: var(--fl-text-strong) !important;
}
body.scene .sub{
  font-size: 19px !important; font-weight: 400 !important; line-height: 1.6 !important;
}
body.scene p{ font-size: 16.5px; line-height: 1.65; }
body.scene .hero-intro{ font-size: 17px !important; line-height: 1.7 !important; }

/* titres de cartes */
body.scene .cd h3{
  font-family: var(--fl-font) !important; font-style: normal !important;
  font-weight: 600 !important; font-size: 21px !important;
  letter-spacing: .01em !important; line-height: 1.3 !important;
}

/* numéros fantômes — grands, légers, discrets comme sur le site */
body.scene .cd{ position:relative !important; overflow:hidden; padding:32px 32px 28px !important; }
body.scene .card-num{
  font-family: var(--fl-font) !important; font-style: normal !important;
  font-weight: 300 !important; font-size: 68px !important;
  line-height: 1 !important; opacity: .12 !important;
  color: var(--fl-text-strong) !important;
  position: absolute !important; top: 18px !important; right: 22px !important;
  bottom: auto !important; left: auto !important; pointer-events: none;
}
body.scene .grid-joint-3 .card-num{ font-size: 52px !important; top: 16px !important; right: 18px !important; }
body.scene .card-sub{ margin: 0 0 10px !important; padding-right: 84px; position:relative; z-index:1; }
body.scene .cd h3{ margin: 0 0 12px !important; padding-right: 64px; position:relative; z-index:1; }
body.scene .cd p{ margin: 0 0 16px !important; position:relative; z-index:1; }
body.scene .card-link{ position:relative; z-index:1; }

/* liens d'action — grammaire mono de la charte */
body.scene .section-link, body.scene .card-link, body.scene .news-all a{
  font-family: var(--fl-font-mono) !important; font-weight: 500 !important;
  font-size: 12.5px !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; font-style: normal !important;
}

/* marque dans le corps de texte — jamais d'italique */
body.scene .brand-fl, body.scene .brand-pyr, body.scene .fl-brand,
body.scene .fl-black, body.scene .fl-red, body.scene em{
  font-style: normal !important;
}
body.scene strong{ font-weight: 600; }


/* présentation : sceau en grand à gauche, texte à droite */
body.scene .pres-grid{
  display:grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 4vw, 64px);
  align-items:center;
}
body.scene .pres-sceau{
  width:100%; max-width:300px; height:auto; border-radius:50%;
  clip-path: circle(49.5% at 50% 50%); display:block; margin:0 auto;
}
[data-theme="light"] body.scene .pres-sceau{ mix-blend-mode:multiply; }
body.scene .pres-text{ text-align:left; }
@media (max-width: 860px){
  body.scene .pres-grid{ grid-template-columns:1fr; }
  body.scene .pres-sceau{ max-width:220px; }
  body.scene .pres-text{ text-align:center; }
}

/* footer harmonisé — adresse discrète, colonnes calmes */
body.scene .ft-addr{
  font-size: 13px !important; font-weight: 400 !important;
  color: var(--fl-mono-dim) !important; letter-spacing: .02em !important;
  font-family: var(--fl-font) !important;
}
body.scene .ft-col a{ font-size: 14px !important; line-height: 2 !important; }
body.scene .ft-brand-link .fl-brand{ font-size: 17px !important; }

/* publications — cartes teaser (titre + date) sur la scène */
body.scene .news-card{
  display:block; padding: 20px 22px !important;
}
body.scene .news-title{
  font-family: var(--fl-font) !important; font-style: normal !important;
  font-weight: 600 !important; font-size: 16.5px !important;
  color: var(--fl-text-strong) !important; line-height: 1.4 !important; margin:0 0 8px !important;
}
body.scene .news-date{
  font-family: var(--fl-font-mono) !important; font-size: 12px !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--fl-mono-dim) !important;
}


/* flèche remonter — harmonisée avec la bascule */
body.scene .stt{
  right:18px !important; bottom:18px !important; left:auto !important;
  width:44px !important; height:44px !important;
  border-radius: var(--fl-radius) !important;
}
body.scene .stt svg{ stroke: var(--fl-text-strong) !important; }

/* grille de 3 : réserve réduite sous le numéro, titres mieux posés */
body.scene .grid-joint-3 .card-sub{ padding-right: 60px; }
body.scene .grid-joint-3 .cd h3{ padding-right: 40px; }

/* ============================================================
   JUSTIFICATION — règle de composition de l'ancien site
   (p justifiés dès 768px), conservée avec la nouvelle charte
   ============================================================ */
@media (min-width: 768px){
  body.scene p,
  body.scene .hero-intro,
  body.scene .cd p,
  body.scene .about-text p,
  body.scene .sub,
  body.scene .news-subtitle{
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto; -webkit-hyphens: auto;
  }
}
/* exceptions : éléments centrés ou courts */
body.scene .hero-scene p{ text-align: center !important; hyphens: none; }
body.scene .hs-corner, body.scene .hs-corner span{ text-align: inherit !important; }
body.scene .photo-credit, body.scene .news-date,
body.scene .ft-addr, body.scene .ft p{ text-align: left !important; hyphens: none; }
body.scene .ft-col-brand .ft-addr{ text-align: left !important; }

/* ============================================================
   PAGES INTÉRIEURES — le BANDEAU sombre (visuel EXPERTISE entier)
   est conservé ; seuls le fond de page et les sections passent
   en scène continue.
   ============================================================ */
body.scene .hero-page{ background:#050506 !important; }
body.scene .hero-page .tag{
  color:#F4926A !important; display:inline-flex !important; align-items:center !important;
  gap:16px !important; margin-bottom:12px !important;
}
body.scene .hero-page .tag::before{ background:#F4926A !important; }
body.scene .h1-page-dark, body.scene .h1-page-dark em{
  color:#F4ECE2 !important; font-family: var(--fl-font) !important;
  font-style: normal !important; font-weight: 600 !important;
}
body.scene .hero-page .hero-sub{ color: rgba(228,219,208,.88) !important; }
body.scene .hero-page .hero-sub strong{ color:#F4ECE2 !important; }

/* animations GSAP restaurées (b2 retiré) */


/* animations GSAP restaurées (b3 retiré) */

/* justification étendue — affiliations, FAQ, sections de pages intérieures */
@media (min-width: 768px){
  body.scene .affiliations-section p,
  body.scene .affiliations-card p,
  body.scene .faq-a, body.scene .faq-a p,
  body.scene .page-sec p,
  body.scene details p,
  body.scene .f-side p{
    text-align: justify !important; text-justify: inter-word;
    hyphens: auto; -webkit-hyphens: auto;
  }
}


/* crête signature au-dessus du footer (pages intérieures) */
body.scene .foot-skyline{
  position: relative; z-index: 1; pointer-events: none;
  margin: 48px 0 -1px; line-height: 0;
}
body.scene .foot-skyline svg{ width: 100%; height: auto; display: block; opacity: .55; }
body.scene .foot-skyline .ridge-far { stroke: var(--fl-ridge-far); }
body.scene .foot-skyline .ridge-main{ stroke: var(--fl-peak-alt); }
body.scene .foot-skyline .peak-alt  { fill: var(--fl-peak-alt); }
body.scene .foot-skyline .cote      { font-family: var(--fl-font-mono); font-size: 12px;
                                      font-weight: 500; letter-spacing: .14em; fill: var(--fl-mono-dim); }
body.scene .foot-skyline .pk-name   { fill: var(--fl-mono); }
body.scene .foot-skyline .pk-alt    { fill: var(--fl-mono-warm); }

/* bandeau : le visuel EXPERTISE ressort — net, pleine hauteur, sans voile à droite */
body.scene .hero-page{ min-height: 360px !important; }
body.scene .hero-page .hero-bg{
  opacity: 1 !important; filter: none !important;
  object-fit: contain !important; object-position: right center !important;
  height: 100% !important;
}
body.scene .hero-page .hero-ov{
  background: linear-gradient(90deg,
    rgba(5,5,6,.94) 0%, rgba(5,5,6,.78) 30%,
    rgba(5,5,6,.35) 48%, rgba(5,5,6,0) 62%) !important;
}


/* ============================================================
   ACCUEIL — fond de bandeau v2 fourni par Stéphane
   (généré par le code du fond d'écran : quadrillage, équerres,
   crête, sommets cotés, réticule — version sobre, H1 en haut)
   ============================================================ */
body.scene .hero-scene{
  background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat;
  justify-content: flex-start; padding-top: clamp(110px, 16vh, 170px);
  max-height: none;
}
[data-theme="light"] body.scene .hero-scene{
  background-color: #FBFAF7;
  background-image: image-set(
    url("/fonds/FIRELAB_hero_BLANC_2560x1440.avif") type("image/avif"),
    url("/fonds/FIRELAB_hero_BLANC_1600x900.webp") type("image/webp"));
}
[data-theme="dark"] body.scene .hero-scene{
  background-color: #050506;
  background-image: image-set(
    url("/fonds/FIRELAB_hero_NOIR_2560x1440.avif") type("image/avif"),
    url("/fonds/FIRELAB_hero_NOIR_2560x1440.webp") type("image/webp"));
}
@media (max-width: 640px) and (orientation: portrait){
  [data-theme="light"] body.scene .hero-scene{
    background-image: url("/fonds/FIRELAB_hero_mobile_BLANC_1170x2532.webp");
  }
  [data-theme="dark"] body.scene .hero-scene{
    background-image: url("/fonds/FIRELAB_hero_mobile_NOIR_1170x2532.webp");
  }
}

/* ============================================================
   BANDEAU pages intérieures — le texte ne chevauche plus le visuel
   ============================================================ */
@media (min-width: 901px){
  body.scene .hero-page .tag,
  body.scene .hero-page .h1-page-dark,
  body.scene .hero-page .hero-sub{
    max-width: 52% !important; margin-right: auto !important;
  }
  body.scene .hero-page .hero-sub{ text-align: left !important; }
}
@media (max-width: 900px){
  body.scene .hero-page .hero-ov{
    background: rgba(5,5,6,.78) !important;
  }
}


/* logo rond officiel dans la nav — bascule avec le thème */
body.scene .nav-sceau{ clip-path:none; mix-blend-mode:normal !important; }
[data-theme="light"] .nav-sceau-nuit{ display:none !important; }
[data-theme="dark"] .nav-sceau-jour{ display:none !important; }

/* ============================================================
   ACCUEIL v3 — le fond 16:9 s'affiche EN ENTIER (aucun recadrage,
   aucune annotation coupée) ; wordmark nettement plus grand
   ============================================================ */
body.scene .hero-scene{
  aspect-ratio: 2560 / 1440;
  min-height: 0 !important; max-height: none !important; height: auto !important;
  padding: 0 24px !important; justify-content: flex-start !important;
  background-size: 100% 100% !important; background-position: center !important;
}
body.scene .hero-scene .hs-picto{ margin-top: 7.5%; margin-bottom: 12px; }
body.scene .hs-wordmark{
  font-size: clamp(40px, 5.6vw, 86px) !important;
}
body.scene .hero-scene .fl-divider{ margin: 20px auto 16px; }
body.scene .hero-scene .hs-baseline{
  font-size: clamp(14px, 1.25vw, 19px); margin-bottom: 0;
}
body.scene .hs-cta{ margin-top: clamp(20px, 4.5vh, 60px); }
@media (max-width: 640px) and (orientation: portrait){
  body.scene .hero-scene{ aspect-ratio: 1170 / 2532; }
  body.scene .hero-scene .hs-picto{ margin-top: 16%; }
}


/* bandeau permanence — pleine largeur, cliquable, bascule avec le thème */
body.scene .perm-bandeau{
  display:block; margin: 8px 0 40px; border-radius: var(--fl-radius);
  overflow:hidden; line-height:0; border:1px solid var(--fl-bracket);
  transition: box-shadow .25s var(--ease);
}
body.scene .perm-bandeau:hover{ box-shadow: 0 0 28px var(--fl-glow); }
body.scene .perm-bandeau img{ width:100%; height:auto; display:block; }
[data-theme="light"] .perm-bandeau-nuit{ display:none !important; }
[data-theme="dark"] .perm-bandeau-jour{ display:none !important; }
/* la colonne de gauche libérée : le formulaire prend la largeur */
body.scene .ct-grid{ display:block !important; }
body.scene .ct-left:empty{ display:none !important; }


/* ============================================================
   FORMULAIRE — champs, sélecteurs, cases et bouton sur la charte
   ============================================================ */
body.scene .f-grp label{
  font-family: var(--fl-font-mono) !important; font-size: 11px !important;
  font-weight: 500 !important; letter-spacing: var(--fl-track-eyebrow) !important;
  text-transform: uppercase !important; color: var(--fl-mono) !important;
}
body.scene .f-grp input, body.scene .f-grp select, body.scene .f-grp textarea{
  background: var(--fl-panel) !important;
  border: 1px solid var(--fl-bracket) !important;
  border-radius: var(--fl-radius) !important;
  color: var(--fl-text-strong) !important;
  font-family: var(--fl-font) !important; font-size: 15px !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
body.scene .f-grp input::placeholder, body.scene .f-grp textarea::placeholder{
  color: var(--fl-mono-dim) !important; font-style: normal !important;
}
body.scene .f-grp input:focus, body.scene .f-grp select:focus, body.scene .f-grp textarea:focus{
  border-color: var(--fl-reticle-dot) !important; outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-reticle-dot) 18%, transparent) !important;
}
body.scene .contact-form-submit, body.scene .f-btn, body.scene button[type="submit"]{
  font-family: var(--fl-font) !important; font-weight: 600 !important;
  font-size: 13px !important; letter-spacing: .12em !important; text-transform: uppercase !important;
  padding: 15px 32px !important; border-radius: 999px !important;
  border: 1px solid var(--fl-reticle-dot) !important;
  color: var(--fl-reticle-dot) !important; background: transparent !important;
  cursor: pointer; transition: all .25s var(--ease) !important;
}
body.scene .contact-form-submit:hover, body.scene button[type="submit"]:hover{
  background: var(--fl-reticle-dot) !important; color: var(--fl-bg) !important;
  box-shadow: 0 0 24px var(--fl-glow) !important;
}
body.scene .f-consent, body.scene .f-grp .consent, body.scene label.checkbox{
  color: var(--fl-text-muted) !important;
}
body.scene input[type="checkbox"]{ accent-color: var(--fl-reticle-dot) !important; }
body.scene .f-note, body.scene .form-note{ color: var(--fl-mono-dim) !important; }


/* ============================================================
   CONTACT v2 — bandeau permanence en tête, cartes en grille
   ============================================================ */
.sr-only-h1{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
body.scene .contact-hero-perm{
  padding: 118px 0 0; margin: 0 0 8px;
}
body.scene .perm-bandeau-hero{
  margin: 0 !important; border: none !important; border-radius: 0 !important;
}
body.scene .perm-bandeau-hero:hover{ box-shadow: none; opacity: .96; }
/* cartes « Joindre le cabinet » : grille aérée pleine largeur */
body.scene .contact-main-grid{ display: block !important; }
body.scene .contact-main-right{
  display: grid !important;
  /* min(300px,100%) et non 300px : sinon la colonne ne peut pas descendre
     sous 300px et les cartes debordent de l'ecran sous 350 px. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px; width: 100% !important; max-width: none !important;
}
body.scene .contact-card{
  background: var(--fl-panel) !important;
  border: 1px solid var(--fl-bracket) !important;
  border-left: 2px solid var(--fl-reticle-dot) !important;
  border-radius: var(--fl-radius) !important;
  margin: 0 !important;
}
body.scene .contact-card-title{
  font-family: var(--fl-font-mono) !important; font-size: 11px !important;
  letter-spacing: var(--fl-track-eyebrow) !important; text-transform: uppercase !important;
  color: var(--fl-mono-warm) !important;
}
body.scene .contact-card-value{ color: var(--fl-text-strong) !important; }

/* contact : le bandeau permanence d'en-tête reste NOIR dans les deux thèmes */
body.scene .contact-hero-perm{ background:#050506; }
body.scene .perm-bandeau-hero .perm-bandeau-jour{ display:none !important; }
body.scene .perm-bandeau-hero .perm-bandeau-nuit{ display:block !important; }


/* section bandeau permanence commune */
body.scene .perm-sec{ padding-top: 24px !important; padding-bottom: 8px !important; }

/* ™ toujours visible (footer et corps de page) */
body.scene .fl-tm, body.scene sup.tm{
  display: inline !important; visibility: visible !important; opacity: 1 !important;
  color: var(--fl-mono-dim) !important;
  font-size: .55em !important; vertical-align: .75em !important;
  font-style: normal !important;
}
body.scene .ft .fl-tm{ color: var(--fl-text-muted) !important; }

/* bandeau permanence de bas de page : rappel contenu, pas un second écran */
body.scene .perm-sec{ padding-top: 8px !important; padding-bottom: 0 !important; }
body.scene .perm-sec .perm-bandeau{
  max-width: 860px; margin: 0 auto 8px !important;
  box-shadow: 0 6px 40px rgba(20,12,8,.10);
}


/* ============================================================
   BANDEAU pages intérieures — visuel EXPERTISE NOIR « dégagé »
   de Stéphane en fond (2560x640), titre posé à gauche
   ============================================================ */
body.scene .hero-page{
  background: #050506 url("/fonds/FIRELAB_bandeau_Expertise_NOIR_complet_reduit_2560x640.avif") center / cover no-repeat !important;
  aspect-ratio: 2560 / 640; min-height: 320px !important; height: auto !important;
  display: flex !important; align-items: center !important;
  padding: 40px 0 !important;
}
@media (max-width: 900px){
  /* Cadrage mobile des bandeaux (validé 2026-07-31, variante B « fond calme ») :
     tous les bandeaux FireLab ont leur graphisme (mot-symbole, sceau-loupe,
     instruments) concentré à DROITE et une zone technique calme (quadrillage,
     repères) à GAUCHE. À 72% le cadrage tombait sur les instruments et les
     coupait. À 18% on montre la zone calme : le titre ressort, plus rien n'est
     coupé. On ne touche ni à l'image, ni au desktop. */
  body.scene .hero-page{ aspect-ratio: auto; min-height: 300px !important;
    background-position: 18% center !important; }
}

/* logo rond de nav agrandi */
body.scene .nav-sceau{ width:76px !important; height:76px !important; }
body.scene .nav-in{ align-items:center; }
@media (max-width: 720px){
  body.scene .nav-sceau{ width:56px !important; height:56px !important; }
}

/* le sceau : empreinte majeure de la nav, déborde comme un cachet */
body.scene .nav-sceau{
  width:118px !important; height:118px !important;
  margin: -8px 4px -34px 0;
  position: relative; z-index: 60;
  filter: drop-shadow(0 8px 22px rgba(20,12,8,.22));
}
body.scene .nav-name{
  font-size: 15px !important; letter-spacing: .12em !important;
}
body.scene .nav-name .tm{ font-size: .5em !important; }
@media (max-width: 720px){
  body.scene .nav-sceau{ width:72px !important; height:72px !important; margin:-4px 2px -18px 0; }
}

/* le trait de la nav s'interrompt autour du cachet */
body.scene .nav-sceau{
  border-radius: 50% !important;
  box-shadow: 0 0 0 8px var(--fl-bg) !important;
  background: var(--fl-bg);
}
[data-theme="dark"] body.scene .nav-sceau{ box-shadow: 0 0 0 8px #050506 !important; background:#050506; }

/* nav pro : le sceau est CONTENU dans une barre plus haute —
   pas de débord, pas de collerette, le filet passe dessous */
body.scene .nav-sceau{
  width: 100px !important; height: 100px !important;
  margin: 8px 12px 8px 0 !important;
  box-shadow: none !important; background: none !important;
  filter: none !important; position: static !important;
}
body.scene .nav .nav-in{ min-height: 116px; align-items: center !important; }
@media (max-width: 720px){
  body.scene .nav-sceau{ width: 64px !important; height: 64px !important; margin: 6px 8px 6px 0 !important; }
  body.scene .nav .nav-in{ min-height: 76px; }
}


/* bandeau par métier — AUDIT */
body.scene .hero-page.hp-audit{
  background-image: url("/fonds/FIRELAB_bandeau_Audit_NOIR_audit_reduit_v_2560x640.avif") !important;
}


/* bandeau par métier — PRÉVENTION */
body.scene .hero-page.hp-prevention{
  background-image: url("/fonds/FIRELAB_bandeau_Prevention_NOIR_prev_reduit_2560x640.avif") !important;
}

/* ============================================================
   PAGE LE CABINET — implantations + engagements sur la charte
   ============================================================ */
/* implantations : plus de bandeau gris, typo Manrope */
body.scene .implant-section{ background: transparent !important; }
body.scene .implant-title, body.scene .implant-title em{
  font-family: var(--fl-font) !important; font-style: normal !important;
  font-weight: 600 !important; color: var(--fl-text-strong) !important;
}
body.scene .implant-title{ font-size: clamp(26px, 2.4vw, 34px) !important; letter-spacing: .02em !important; }
body.scene .implant-title em{ color: var(--fl-reticle-dot) !important; }
body.scene .implant-tag{
  font-family: var(--fl-font-mono) !important; font-weight: 500 !important;
  font-size: var(--fl-size-eyebrow) !important; letter-spacing: var(--fl-track-eyebrow) !important;
  text-transform: uppercase !important; color: var(--fl-mono-warm) !important;
}
body.scene .implant-name{
  font-family: var(--fl-font) !important; font-style: normal !important;
  font-weight: 600 !important; color: var(--fl-text-strong) !important;
}
body.scene .implant-desc, body.scene .implant-intro{ color: var(--fl-text-muted) !important; }
body.scene .implant-badge{
  font-family: var(--fl-font-mono) !important; letter-spacing: var(--fl-track-eyebrow) !important;
  color: var(--fl-mono-warm) !important;
}
body.scene .implant-marker{ background: var(--fl-reticle-dot) !important; }

/* engagements : panneaux de scène, plus de cartes blanches */
body.scene .engagement-card{
  background: var(--fl-panel) !important;
  border: 1px solid var(--fl-bracket) !important;
  border-left: 2px solid var(--fl-reticle-dot) !important;
  border-radius: var(--fl-radius) !important;
  box-shadow: none !important;
}
body.scene .engagement-title{
  font-family: var(--fl-font) !important; font-weight: 600 !important;
  font-style: normal !important; color: var(--fl-text-strong) !important;
  font-size: 17px !important;
}
body.scene .engagement-desc{ color: var(--fl-text-muted) !important; font-size: 14.5px !important; }
body.scene .engagement-icon{ color: var(--fl-reticle-dot) !important; }

/* fondateur : cohérence typo */
body.scene .founder-name{
  font-family: var(--fl-font) !important; font-style: normal !important;
  font-weight: 600 !important; color: var(--fl-text-strong) !important;
}
body.scene .founder-role{
  font-family: var(--fl-font-mono) !important; letter-spacing: var(--fl-track-eyebrow) !important;
  text-transform: uppercase !important; color: var(--fl-mono-warm) !important;
}
body.scene .founder-bio{ color: var(--fl-text-muted) !important; }
body.scene .founder-fact-badge{
  font-family: var(--fl-font-mono) !important; color: var(--fl-mono-warm) !important;
  border-color: var(--fl-bracket) !important;
}
body.scene .founder-fact-text{ color: var(--fl-text-muted) !important; }
body.scene .founder-photo img{ border-radius: var(--fl-radius) !important; }


/* bandeau par métier — MÉDIATION */
body.scene .hero-page.hp-mediation{
  background-image: url("/fonds/FIRELAB_bandeau_Mediation_NOIR_med_reduit_2560x640.avif") !important;
}


/* bandeau par métier — FORMATION */
body.scene .hero-page.hp-formation{
  background-image: url("/fonds/FIRELAB_bandeau_Formation_NOIR_form_reduit_2560x640.avif") !important;
}

/* bandeau institutionnel — LE CABINET (le-cabinet, nos-experts, domaines-intervention) */
body.scene .hero-page.hp-cabinet{
  background-image: url("/fonds/FIRELAB_bandeau_Cabinet_NOIR_cab_reduit_2560x640.avif") !important;
}

/* bandeau — PUBLICATIONS */
body.scene .hero-page.hp-publications{
  background-image: url("/fonds/FIRELAB_bandeau_Publications_NOIR_pub_reduit_2560x640.avif") !important;
}

/* bandeau — CONTACT (remplace le bandeau permanence en tête de Nous contacter) */
body.scene .hero-page.hp-contact{
  background-image: url("/fonds/FIRELAB_bandeau_Contact_NOIR_cont_reduit_2560x640_1.avif") !important;
}
body.scene .hero-page.hp-contact .hero-sub a{ color: inherit; text-decoration: none; }

/* bandeau — MÉTHODE */
body.scene .hero-page.hp-methode{
  background-image: url("/fonds/FIRELAB_bandeau_Methode_NOIR_meth_reduit_2560x640.avif") !important;
}

/* ============================================================
   MOBILE — bandeaux xs (≤900px) : versions resserrées des visuels
   ============================================================ */
@media (max-width: 900px){
  body.scene .hero-page{ background-image:url("/fonds/FIRELAB_bandeau_Expertise_NOIR_complet_reduit_xs_2560x640.avif") !important; }
  body.scene .hero-page.hp-audit{ background-image:url("/fonds/FIRELAB_bandeau_Audit_NOIR_audit_reduit_xs_flux_2560x640.avif") !important; }
  body.scene .hero-page.hp-prevention{ background-image:url("/fonds/FIRELAB_bandeau_Prevention_NOIR_prev_reduit_xs_2560x640.avif") !important; }
  body.scene .hero-page.hp-mediation{ background-image:url("/fonds/FIRELAB_bandeau_Mediation_NOIR_med_reduit_xs_2560x640.avif") !important; }
  body.scene .hero-page.hp-formation{ background-image:url("/fonds/FIRELAB_bandeau_Formation_NOIR_form_reduit_xs_2560x640.avif") !important; }
  body.scene .hero-page.hp-cabinet{ background-image:url("/fonds/FIRELAB_bandeau_Cabinet_NOIR_cab_reduit_xs_2560x640.avif") !important; }
  body.scene .hero-page.hp-publications{ background-image:url("/fonds/FIRELAB_bandeau_Publications_NOIR_pub_reduit_xs_2560x640.avif") !important; }
  body.scene .hero-page.hp-contact{ background-image:url("/fonds/FIRELAB_bandeau_Contact_NOIR_cont_reduit_xs_2560x640_1.avif") !important; }
  body.scene .hero-page.hp-methode{ background-image:url("/fonds/FIRELAB_bandeau_Methode_NOIR_meth_reduit_xs_2560x640.avif") !important; }
}

/* MOBILE — wordmark accueil sur une ligne sans débordement, toggle discret */
@media (max-width: 600px){
  body.scene .hs-wordmark{ font-size: clamp(19px, 5.2vw, 30px) !important;
    letter-spacing:.2em !important; text-indent:.2em !important; white-space:nowrap !important; }
  .theme-toggle{ bottom:14px !important; right:12px !important;
    padding:7px 11px !important; font-size:10px !important; opacity:.92; }
}

/* nav : le panneau de langues s'ancre à droite, jamais de défilement horizontal */
body.scene{ overflow-x: hidden !important; }
body.scene .lang-panel{ left:auto !important; right:0 !important; }

/* nav ES/PT : libellés plus longs — on resserre pour tenir sur une ligne à 1440px */
@media (min-width: 901px) and (max-width: 1600px){
  html[lang="es"] body.scene .nav-links > a, html[lang="es"] body.scene .nav-drop-trigger,
  html[lang="pt"] body.scene .nav-links > a, html[lang="pt"] body.scene .nav-drop-trigger{
    font-size: 14px !important; padding-left: 8px !important; padding-right: 8px !important;
  }
}

/* la nav (et son panneau de langues) doit passer AU-DESSUS des heros */
body.scene > nav.nav, body.scene .nav{ z-index: 300 !important; }

/* ============================================================
   MODERNISATION v46 — cartes, numéros, photos, affiliations
   (même langage que les bandeaux : équerres, braise, mono)
   ============================================================ */

/* — cartes : panneau scène + coins d'équerre techniques — */
body.scene .cd, body.scene .news-card, body.scene .affiliation-card{
  position:relative !important;
  background: var(--fl-panel) !important;
  border:1px solid var(--fl-bracket) !important;
  border-radius: var(--fl-radius) !important;
  box-shadow:none !important;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease) !important;
}
body.scene .cd::before, body.scene .news-card::before, body.scene .affiliation-card::before,
body.scene .cd::after,  body.scene .news-card::after,  body.scene .affiliation-card::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none; z-index:2;
  border:0 solid var(--fl-reticle-dot); opacity:.9;
  transition: width .35s var(--ease), height .35s var(--ease);
}
body.scene .cd::before, body.scene .news-card::before, body.scene .affiliation-card::before{
  top:-1px; left:-1px; border-top-width:2px; border-left-width:2px;
}
body.scene .cd::after, body.scene .news-card::after, body.scene .affiliation-card::after{
  bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px;
}
body.scene .cd:hover, body.scene .news-card:hover, body.scene .affiliation-card:hover{
  transform: translateY(-3px) !important;
  border-color: var(--fl-reticle) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.22) !important;
}
body.scene .cd:hover::before, body.scene .cd:hover::after,
body.scene .news-card:hover::before, body.scene .news-card:hover::after,
body.scene .affiliation-card:hover::before, body.scene .affiliation-card:hover::after{
  width:24px; height:24px;
}

/* — numéros de carte : relevé technique braise, fini le chiffre fantôme — */
body.scene .card-num{
  font-family: var(--fl-font-mono) !important;
  font-size: 13px !important; font-weight:500 !important; line-height:1 !important;
  letter-spacing:.16em !important;
  color: var(--fl-mono-warm) !important; opacity:1 !important;
  -webkit-text-stroke:0 !important; text-stroke:0 !important;
}
body.scene .card-num::after{
  content:""; display:block; width:26px; height:1.5px;
  background: var(--fl-reticle-dot); margin-top:7px; opacity:.75;
}

/* — photos éditoriales : duotone braise + cadre réticule + crédit mono — */
body.scene .about-img, body.scene .hero-photo{
  position:relative; border:1px solid var(--fl-bracket); border-radius: var(--fl-radius);
  overflow:visible;
}
body.scene .about-img img, body.scene .hero-photo img{
  filter: grayscale(1) contrast(1.06) brightness(.97) sepia(.30) saturate(1.4) hue-rotate(-12deg);
  border-radius: var(--fl-radius); display:block;
}
[data-theme="light"] body.scene .about-img img,
[data-theme="light"] body.scene .hero-photo img{
  filter: grayscale(1) contrast(1.04) brightness(1.02) sepia(.22) saturate(1.25) hue-rotate(-10deg);
}
body.scene .about-img::before, body.scene .hero-photo::before,
body.scene .about-img::after,  body.scene .hero-photo::after{
  content:""; position:absolute; width:18px; height:18px; pointer-events:none; z-index:2;
  border:0 solid var(--fl-reticle-dot); opacity:.9;
}
body.scene .about-img::before, body.scene .hero-photo::before{
  top:-5px; left:-5px; border-top-width:2px; border-left-width:2px;
}
body.scene .about-img::after, body.scene .hero-photo::after{
  bottom:-5px; right:-5px; border-bottom-width:2px; border-right-width:2px;
}
body.scene .photo-credit{
  font-family: var(--fl-font-mono) !important; font-size:10px !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  color:#E4DBD0 !important; background: rgba(5,5,6,.55) !important;
  padding:4px 8px !important; border-radius:2px !important;
}

/* — affiliations IAAI / E-AFI : logos apaisés, badge mono — */
body.scene .affiliation-logo{ background:transparent !important; box-shadow:none !important; }
body.scene .affiliation-logo img{
  filter: grayscale(1) opacity(.82); transition: filter .35s var(--ease);
}
body.scene .affiliation-card:hover .affiliation-logo img{ filter:none; }
body.scene .affiliation-badge{
  font-family: var(--fl-font-mono) !important; font-size:11px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color: var(--fl-mono-warm) !important; background:transparent !important;
  border:1px solid var(--fl-bracket) !important; border-radius:2px !important;
}

/* — footer : le sceau accompagne la marque — */
body.scene .ft-sceau{
  display:block; width:64px; height:64px; margin:0 0 14px 0;
  border-radius:50%; opacity:.92;
}
body.scene .ft-brand-link{ display:inline-block; }

/* — CTA unifiés : la pastille cible de la permanence, partout — */
body.scene .f-btn, body.scene .hero-cta, body.scene .hero-cta-alt,
body.scene .contact-form-submit{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:12px !important;
  background:transparent !important; color: var(--fl-link) !important;
  border:1.5px solid var(--fl-reticle) !important; border-radius:999px !important;
  font-family: var(--fl-font-mono) !important; font-size:13px !important; font-weight:500 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  padding:16px 30px !important; cursor:pointer;
  box-shadow:none !important;
  transition: box-shadow .3s var(--ease), background .3s var(--ease) !important;
}
body.scene .f-btn:hover, body.scene .hero-cta:hover, body.scene .hero-cta-alt:hover,
body.scene .contact-form-submit:hover{
  background: rgba(244,120,56,.09) !important;
  box-shadow: 0 0 34px rgba(244,120,56,.28) !important;
  transform:none !important;
}
body.scene .f-btn::before, body.scene .hero-cta::before, body.scene .hero-cta-alt::before,
body.scene .contact-form-submit::before{
  content:""; width:18px; height:18px; flex:0 0 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='black' stroke='none'/%3E%3Cline x1='10' y1='0.5' x2='10' y2='4'/%3E%3Cline x1='10' y1='16' x2='10' y2='19.5'/%3E%3Cline x1='0.5' y1='10' x2='4' y2='10'/%3E%3Cline x1='16' y1='10' x2='19.5' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='black' stroke='none'/%3E%3Cline x1='10' y1='0.5' x2='10' y2='4'/%3E%3Cline x1='10' y1='16' x2='10' y2='19.5'/%3E%3Cline x1='0.5' y1='10' x2='4' y2='10'/%3E%3Cline x1='16' y1='10' x2='19.5' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* — bouton permanence de l'accueil : un cran plus bas, toujours cliquable — */
body.scene .hs-cta{
  margin-top: clamp(34px, 7.5vh, 96px) !important;
  position:relative !important; z-index:6 !important; pointer-events:auto !important;
}

/* — menus déroulants : petite cible braise devant chaque entrée — */
body.scene .nav-drop-menu a{
  display:flex !important; align-items:center !important; gap:10px !important;
}
body.scene .nav-drop-menu a::before{
  content:""; width:11px; height:11px; flex:0 0 11px; opacity:.55;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='black' stroke='none'/%3E%3Cline x1='10' y1='0.5' x2='10' y2='4'/%3E%3Cline x1='10' y1='16' x2='10' y2='19.5'/%3E%3Cline x1='0.5' y1='10' x2='4' y2='10'/%3E%3Cline x1='16' y1='10' x2='19.5' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='black' stroke='none'/%3E%3Cline x1='10' y1='0.5' x2='10' y2='4'/%3E%3Cline x1='10' y1='16' x2='10' y2='19.5'/%3E%3Cline x1='0.5' y1='10' x2='4' y2='10'/%3E%3Cline x1='16' y1='10' x2='19.5' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: opacity .2s;
}
body.scene .nav-drop-menu a:hover::before{ opacity:1; color: var(--fl-link); }

/* neutralise les anciens pseudo-éléments des cartes (carrés parasites) */
body.scene .cd::before, body.scene .cd::after,
body.scene .news-card::before, body.scene .news-card::after,
body.scene .affiliation-card::before, body.scene .affiliation-card::after{
  background:transparent !important; box-shadow:none !important;
  transform:none !important; border-radius:0 !important;
  margin:0 !important; inset:auto !important;
}
body.scene .cd::before, body.scene .news-card::before, body.scene .affiliation-card::before{
  top:-1px !important; left:-1px !important; right:auto !important; bottom:auto !important;
}
body.scene .cd::after, body.scene .news-card::after, body.scene .affiliation-card::after{
  bottom:-1px !important; right:-1px !important; top:auto !important; left:auto !important;
}

/* logos d'affiliation : gris apaisé, couleur au survol (les deux structures) */
body.scene img.affiliation-logo, body.scene .affiliation-logo img{
  filter: grayscale(1) opacity(.8) !important; transition: filter .35s var(--ease) !important;
}
body.scene .affiliation-card:hover img.affiliation-logo,
body.scene .affiliation-card:hover .affiliation-logo img{ filter:none !important; }

/* ============================================================
   PASSE PREMIUM v46 — matière, profondeur, micro-détails
   ============================================================ */

/* cartes : sheen discret + lueur braise au survol */
body.scene .cd, body.scene .news-card, body.scene .affiliation-card{
  background-image: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 38%) !important;
}
[data-theme="light"] body.scene .cd,
[data-theme="light"] body.scene .news-card,
[data-theme="light"] body.scene .affiliation-card{
  background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%) !important;
}
body.scene .cd:hover, body.scene .news-card:hover, body.scene .affiliation-card:hover{
  box-shadow: 0 18px 56px rgba(0,0,0,.28), 0 6px 40px rgba(244,120,56,.10) !important;
}

/* étiquette de carte : le petit trait braise, comme les tags de page */
body.scene .card-sub{
  font-family: var(--fl-font-mono) !important; font-size:11px !important;
  letter-spacing:.18em !important; color: var(--fl-mono-warm) !important;
  display:inline-flex !important; align-items:center !important; gap:10px !important;
}
body.scene .card-sub::before{
  content:""; width:18px; height:1.5px; background: var(--fl-reticle-dot); opacity:.8;
}

/* lien de carte : micro-CTA mono, flèche qui glisse, soulignement braise */
body.scene .card-link{
  font-family: var(--fl-font-mono) !important; font-size:12px !important;
  letter-spacing:.16em !important; color: var(--fl-link) !important;
  position:relative !important;
}
body.scene .card-link::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:0;
  background: var(--fl-reticle-dot); transition: width .35s var(--ease);
}
body.scene .cd:hover .card-link::after{ width:100%; }
body.scene .card-arrow{ transition: transform .3s var(--ease) !important; display:inline-block !important; }
body.scene .cd:hover .card-arrow{ transform: translateX(5px) !important; }

/* boutons cible : halo intérieur + cible qui pivote au survol */
body.scene .f-btn::before, body.scene .hero-cta::before,
body.scene .hero-cta-alt::before, body.scene .contact-form-submit::before,
body.scene .hs-cta .cta-cible{ transition: transform .5s cubic-bezier(.22,1,.36,1); }
body.scene .f-btn:hover::before, body.scene .hero-cta:hover::before,
body.scene .hero-cta-alt:hover::before, body.scene .contact-form-submit:hover::before,
body.scene .hs-cta:hover .cta-cible{ transform: rotate(90deg); }

/* photos : bande technique sous l'image (référence de pièce) */
body.scene .about-img{ margin-bottom:26px; }
body.scene .about-img > picture::after{
  content:"DOC. TERRAIN — INVESTIGATION · NFPA 921"; position:absolute; left:0; bottom:-24px;
  font-family: var(--fl-font-mono); font-size:10px; letter-spacing:.2em;
  color: var(--fl-mono-dim); white-space:nowrap;
}
body.scene .about-img > picture{ position:static; }

/* vignettes du blog : image duotone qui reprend ses couleurs au survol */
body.scene .news-card img{
  filter: grayscale(.85) contrast(1.04) sepia(.22) saturate(1.3) hue-rotate(-10deg);
  transition: filter .45s var(--ease);
  border-radius: var(--fl-radius) var(--fl-radius) 0 0;
}
body.scene .news-card:hover img{ filter:none; }
body.scene .news-date{
  font-family: var(--fl-font-mono) !important; font-size:10.5px !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  color: var(--fl-mono-warm) !important;
}

/* footer : colonne marque resserrée, titres de colonnes en mono technique */
body.scene .ft h4, body.scene .ft .ft-col-title, body.scene .ft-heading{
  font-family: var(--fl-font-mono) !important; font-size:11px !important;
  letter-spacing:.2em !important; text-transform:uppercase !important;
  color: var(--fl-mono-warm) !important;
}

/* ============================================================
   BOUTON DE PERMANENCE — cadre de visée
   Validé par Stéphane le 2026-07-31. Reprend le vocabulaire du
   bouton JOUR · NUIT : texte, fond et filet suivent le thème.
   Le bandeau d'accueil est BLANC en jour et NOIR en nuit, d'où
   var(--fl-text-strong) : #201915 le jour, #F4ECE2 la nuit.
   Les quatre équerres braise le distinguent d'un simple réglage.
   ============================================================ */
body.scene .hs-cta{
  background: var(--fl-nav-bg) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--fl-text-strong) !important;
  border: 1px solid var(--fl-bracket) !important;
  border-radius: var(--fl-radius) !important;
  box-shadow: none !important;
  position: relative;
  padding: 16px 34px !important;
  font-weight: 600 !important;
}
body.scene .hs-cta .cta-cible{ stroke: var(--fl-reticle-dot); }

/* les quatre équerres de visée, comme sur les photographies */
body.scene .hs-cta::before, body.scene .hs-cta::after,
body.scene .hs-cta>span::before, body.scene .hs-cta>span::after{
  content:""; position:absolute; width:13px; height:13px;
  border:1.4px solid var(--fl-reticle-dot); pointer-events:none;
  transition: all .25s var(--ease);
}
body.scene .hs-cta::before{ top:-4px;    left:-4px;  border-right:0; border-bottom:0; }
body.scene .hs-cta::after{  top:-4px;    right:-4px; border-left:0;  border-bottom:0; }
body.scene .hs-cta>span::before{ bottom:-4px; left:-4px;  border-right:0; border-top:0; }
body.scene .hs-cta>span::after{  bottom:-4px; right:-4px; border-left:0;  border-top:0; }

body.scene .hs-cta:hover{
  background: var(--fl-nav-bg) !important;
  border-color: var(--fl-reticle-dot) !important;
  color: var(--fl-reticle-dot) !important;
  transform: none; box-shadow: none !important;
}
body.scene .hs-cta:hover::before, body.scene .hs-cta:hover::after,
body.scene .hs-cta:hover>span::before, body.scene .hs-cta:hover>span::after{
  width:17px; height:17px;
}

/* — sceau footer : version claire, halo discret — */
body.scene .ft-sceau{ opacity:1; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 4px 22px rgba(0,0,0,.4); }

/* — sceau footer : suit le thème comme la nav — */
[data-theme="light"] body.scene .ft-sceau-nuit{ display:none !important; }
[data-theme="light"] body.scene .ft-sceau-jour{ display:block !important; }
[data-theme="dark"] body.scene .ft-sceau-jour{ display:none !important; }
[data-theme="dark"] body.scene .ft-sceau-nuit{ display:block !important; }

/* — boutons Formulaire de contact : pastille cible, plus d'air — */
body.scene .btn-primary{
  display:inline-flex !important; align-items:center !important; gap:12px !important;
  background: linear-gradient(180deg, #F4832E 0%, #D6431A 100%) !important;
  color:#140B07 !important; border:none !important; border-radius:999px !important;
  font-family: var(--fl-font-mono) !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  padding:16px 30px !important; margin-top:18px !important;
  box-shadow: 0 6px 26px rgba(244,120,56,.30) !important;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), background .3s var(--ease) !important;
}
body.scene .btn-primary:hover{
  background: linear-gradient(180deg, #FF9440 0%, #E44E1F 100%) !important;
  box-shadow: 0 10px 40px rgba(244,120,56,.45) !important; transform: translateY(-1px) !important;
}
body.scene .btn-primary::before{
  content:""; width:17px; height:17px; flex:0 0 17px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='black' stroke='none'/%3E%3Cline x1='10' y1='0.5' x2='10' y2='4'/%3E%3Cline x1='10' y1='16' x2='10' y2='19.5'/%3E%3Cline x1='0.5' y1='10' x2='4' y2='10'/%3E%3Cline x1='16' y1='10' x2='19.5' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='black' stroke='none'/%3E%3Cline x1='10' y1='0.5' x2='10' y2='4'/%3E%3Cline x1='10' y1='16' x2='10' y2='19.5'/%3E%3Cline x1='0.5' y1='10' x2='4' y2='10'/%3E%3Cline x1='16' y1='10' x2='19.5' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* curseur réticule retiré : trop gadget pour un cabinet judiciaire (décision 2026-07-28) */

/* — mobile : le bouton permanence tient dans l'écran (2 lignes centrées) — */
@media (max-width: 600px){
  body.scene .hs-cta{
    white-space: normal !important; text-align:center !important;
    max-width: min(88vw, 340px) !important; line-height:1.5 !important;
    font-size: 11.5px !important; letter-spacing:.12em !important;
    padding: 14px 22px !important;
  }
  body.scene .hs-cta .cta-cible{ flex:0 0 16px; width:16px; height:16px; }
}

/* — mobile : la baseline du hero tient dans l'écran — */
@media (max-width: 600px){
  body.scene .hs-baseline{
    font-size: 12px !important; letter-spacing: .18em !important;
    white-space: normal !important; max-width: 92vw !important;
    margin-left: auto !important; margin-right: auto !important; line-height: 1.7 !important;
  }
  body.scene .hero-scene{ overflow-x: clip !important; }
}

/* — mobile : la bande DOC. TERRAIN reste dans la photo — */
@media (max-width: 700px){
  body.scene .about-img > picture::after{
    white-space: normal !important; right: 0 !important;
    font-size: 9px !important; letter-spacing: .14em !important; line-height:1.5;
    bottom: -30px !important;
  }
  body.scene .about-img{ margin-bottom: 34px !important; }
}

/* ============================================================
   v53 — ACCESSIBILITÉ : lisibilité sur les surfaces sombres
   Les bandeaux des pages intérieures sont noirs dans les DEUX
   thèmes ; la marque y héritait des couleurs du thème JOUR
   (« LAB » encre #201915 sur noir = illisible, ratio 1.18).
   ============================================================ */
body.scene .hero-page .fl-lab,
body.scene .hero-page .brand-fl .fl-lab,
body.scene .contact-hero-perm .fl-lab,
body.scene .contact-hero-perm .brand-fl .fl-lab{
  color: #F4ECE2 !important;
}
body.scene .hero-page .brand-pyr,
body.scene .contact-hero-perm .brand-pyr{
  color: rgba(228,219,208,.90) !important;
}
body.scene .hero-page .fl-fire,
body.scene .hero-page .brand-fl .fl-fire,
body.scene .contact-hero-perm .fl-fire,
body.scene .contact-hero-perm .brand-fl .fl-fire{
  background: linear-gradient(180deg,#FFD48C 0%,#F4772E 46%,#E8552A 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
body.scene .hero-page .tm, body.scene .hero-page .fl-tm,
body.scene .contact-hero-perm .tm, body.scene .contact-hero-perm .fl-tm{
  color: rgba(228,219,208,.58) !important;
}
/* contact : numéro de permanence sur fond noir — braise trop sombre (3.49) */
body.scene .contact-hero-perm a,
body.scene .contact-hero-perm .contact-hero-num{ color: #F4926A !important; }

/* lien d'évitement : « body.scene a{color:var(--fl-link)} » écrasait le
   color:#fff, donnant du braise sur braise au focus clavier (ratio 1.02). */
body.scene .skip-nav, body.scene a.skip-nav,
body.scene .skip-nav:focus, body.scene .skip-nav:hover{
  color: #FFFFFF !important; background: var(--red-flame, #B83A1A) !important;
  text-decoration: none !important;
}

/* ============================================================
   v53 — MODE NUIT : remappage des jetons de l'ANCIENNE charte
   Les composants non repris par scene.css (case RGPD, notes de
   formulaire, libellés réseaux…) utilisent encore --text/--bg/
   --surface de style.min.css, qui sont FIXES : en nuit ils
   restaient clairs (encart RGPD beige sur fond noir) ou trop
   sombres pour être lus. On ne remappe QUE la nuit : le rendu
   JOUR validé reste strictement inchangé.
   --black n'est PAS remappé : il sert aussi de fond (.related-
   section, .mob-contact) et l'inverser casserait ces blocs.
   ============================================================ */
[data-theme="dark"]{
  --text:              #E4DBD0;
  --text-2:            rgba(228,219,208,.84);
  --text-3:            rgba(228,219,208,.64);
  --bg:                #050506;
  --bg-off:            rgba(244,236,226,.05);
  --surface:           rgba(244,236,226,.04);
  --border:            rgba(244,236,226,.16);
  --border-card:       1px solid rgba(244,236,226,.12);
  --color-link:        #E68056;
  --color-link-hover:  #F4926A;
}
/* encart de consentement RGPD : suit la surface du thème */
[data-theme="dark"] body.scene .f-ok{
  background: rgba(244,236,226,.05) !important;
  border-color: rgba(244,236,226,.14) !important;
  color: rgba(228,219,208,.84) !important;
}
/* notes de formulaire et libellé réseaux : lisibles sur le noir */
[data-theme="dark"] body.scene .contact-form-note,
[data-theme="dark"] body.scene .f-note,
[data-theme="dark"] body.scene .f-note-alt{ color: rgba(228,219,208,.64) !important; }
[data-theme="dark"] body.scene .contact-social-label{ color: rgba(228,219,208,.88) !important; }

/* marque en corps de texte : « .fl-brand .fl-black » est figé à #201915
   en dur dans style.min.css (vague wordmark V18) — invisible en nuit */
[data-theme="dark"] body.scene .fl-brand .fl-black,
[data-theme="dark"] body.scene .fl-brand em.fl-black,
[data-theme="dark"] body.scene .hero .fl-brand .fl-black{
  color: var(--fl-text-strong) !important;
}
[data-theme="dark"] body.scene .fl-brand .fl-red,
[data-theme="dark"] body.scene .fl-brand em.fl-red{ color: var(--fl-link) !important; }

/* ============================================================
   v53 — MODE NUIT : mises en valeur et FAQ
   « .cd strong », « .hero-page ~ .sec p strong », « .nfpa-simple
   strong » etc. sont figés sur --black / #000 dans style.min.css.
   En nuit, TOUS les mots en gras des cartes et du corps de texte
   et TOUTES les questions de FAQ devenaient illisibles (1.17).
   ============================================================ */
[data-theme="dark"] body.scene strong,
[data-theme="dark"] body.scene .cd strong,
[data-theme="dark"] body.scene .expert-card strong,
[data-theme="dark"] body.scene .sec p strong,
[data-theme="dark"] body.scene .hero-page ~ .sec p strong,
[data-theme="dark"] body.scene .nfpa-simple strong,
[data-theme="dark"] body.scene .about-text strong,
[data-theme="dark"] body.scene .cab-kw strong,
[data-theme="dark"] body.scene .expert-card-hint strong,
[data-theme="dark"] body.scene .expert-inscription strong,
[data-theme="dark"] body.scene .founder-fact-text strong,
[data-theme="dark"] body.scene .cta-contact-split .cta-split-action p strong{
  color: var(--fl-text-strong) !important;
}
/* questions de FAQ */
[data-theme="dark"] body.scene summary,
[data-theme="dark"] body.scene .faq-q,
[data-theme="dark"] body.scene .faq-section .faq-q{ color: var(--fl-text-strong) !important; }
[data-theme="dark"] body.scene .faq-section .faq-q:hover{ color: var(--fl-link) !important; }

/* libellés de section et mentions discrètes : remontés au-dessus du seuil AA */
[data-theme="dark"] body.scene .section-label,
[data-theme="dark"] body.scene body.page-cabinet .section-label{ color: var(--fl-mono-warm) !important; }
[data-theme="dark"] body.scene .ft-copy span,
[data-theme="dark"] body.scene .ft-legal{ color: rgba(196,186,174,.70) !important; }

/* ============================================================
   v53 — MODE NUIT : surfaces restées BLANCHES
   « section.methode-etape » alterne #fff / #f6f4ef en dur : en
   nuit, les six étapes s'affichaient en texte clair sur bandes
   blanches — page « Notre méthode » illisible. On garde
   l'alternance, mais en surfaces sombres de la scène.
   ============================================================ */
[data-theme="dark"] body.scene .methode-etape{
  background-color: rgba(244,236,226,.030) !important;
}
[data-theme="dark"] body.scene .methode-etape:nth-of-type(even),
[data-theme="dark"] body.scene .methode-etape.alt{
  background-color: rgba(244,236,226,.060) !important;
}
/* cartes et encarts qui gardaient une surface ivoire en dur */
[data-theme="dark"] body.scene .cd,
[data-theme="dark"] body.scene .expert-card,
[data-theme="dark"] body.scene .card,
[data-theme="dark"] body.scene .sec-alt{
  background-color: rgba(244,236,226,.035) !important;
}

/* ============================================================
   v53 — LISIBILITÉ des mentions qui portent de l'information
   « --fl-mono-dim » (2.26 en jour, 2.27 en nuit) convient à un
   ornement, pas à une mention RGPD, à un libellé de champ ni au
   copyright : ces trois-là passent sur --fl-text-muted (≈5.1).
   Le crédit photo garde le ton discret voulu.
   ============================================================ */
body.scene .f-note, body.scene .f-note-alt, body.scene .form-note,
body.scene .contact-form-note{ color: var(--fl-text-muted) !important; }
body.scene .f-grp label, body.scene .f-ok{ color: var(--fl-text-muted) !important; }
body.scene .ft-bot, body.scene .ft-bot span{ color: var(--fl-text-muted) !important; }
[data-theme="dark"] body.scene .f-note,
[data-theme="dark"] body.scene .f-note-alt,
[data-theme="dark"] body.scene .contact-form-note,
[data-theme="dark"] body.scene .f-grp label,
[data-theme="dark"] body.scene .ft-bot,
[data-theme="dark"] body.scene .ft-bot span{ color: rgba(196,186,174,.88) !important; }

/* ================================================================
   BANDEAU « RESPECT DE VOTRE VIE PRIVEE » — remise en charte
   2026-07-30. Remplace l'ancienne formule graphique : carte blanche
   a coins 16px, ancien logo carre, bouton rouge plein.
   Le texte et la logique JS (consentement, cookie, piege a focus)
   sont INCHANGES : ceci n'est qu'une feuille de style.
   Portee : uniquement a l'interieur de #cookie-overlay, pour ne pas
   toucher la modale des mentions legales qui partage .ml-sous-titre.
   ================================================================ */
body.scene .cookie-modal{
  background: var(--fl-bg) !important;
  border: 1px solid var(--fl-bracket) !important;
  border-radius: var(--fl-radius) !important;
  max-width: 480px !important;
  padding: var(--fl-sp-4) var(--fl-sp-4) var(--fl-sp-3) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.22) !important;
  text-align: left !important;
  position: relative;
}
/* filet braise en haut a gauche, comme sur les cartes du site */
body.scene .cookie-modal::before{
  content: ""; position: absolute; left: 0; top: 0;
  width: 56px; height: 2px; background: var(--fl-reticle-dot);
}

/* le sceau rond du site, avec sa version nuit */
body.scene .cookie-logo{ margin: 0 0 var(--fl-sp-3) !important; }
body.scene .cookie-logo img{
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important; box-shadow: none !important;
}
/* garde-fou : si data-theme venait a manquer, on affiche le sceau jour
   seul plutot que les deux empiles. */
body.scene .cookie-sceau-nuit{ display: none; }
[data-theme="light"] body.scene .cookie-sceau-nuit{ display: none !important; }
[data-theme="light"] body.scene .cookie-sceau-jour{ display: block !important; }
[data-theme="dark"]  body.scene .cookie-sceau-jour{ display: none !important; }
[data-theme="dark"]  body.scene .cookie-sceau-nuit{ display: block !important; }

/* surtitre en mono, meme traitement que les etiquettes du site */
body.scene .cookie-eyebrow{
  font-family: var(--fl-font-mono); font-size: var(--fl-size-eyebrow);
  letter-spacing: var(--fl-track-eyebrow); text-transform: uppercase;
  color: var(--fl-mono-warm); margin: 0 0 var(--fl-sp-1);
  display: flex; align-items: center; gap: 10px;
}
body.scene .cookie-eyebrow::before{
  content: ""; width: 18px; height: 1px;
  background: var(--fl-reticle-dot); flex: none;
}

body.scene #cookie-overlay .ml-sous-titre{
  font-family: var(--fl-font) !important; font-size: 21px !important;
  font-weight: 600 !important; color: var(--fl-text-strong) !important;
  letter-spacing: normal !important; text-transform: none !important;
  margin: 0 0 var(--fl-sp-2) !important; line-height: 1.25 !important;
}

body.scene .cookie-text{
  font-family: var(--fl-font) !important; font-size: 14.5px !important;
  line-height: var(--fl-lh-body) !important; color: var(--fl-text) !important;
  text-align: left !important; margin: 0 0 var(--fl-sp-2) !important;
}
body.scene .cookie-text-small{
  font-size: 13px !important; color: var(--fl-text-muted) !important;
}

/* boutons en filet, comme tous les boutons du site */
body.scene .cookie-actions{
  display: flex !important; gap: 12px !important;
  justify-content: flex-start !important; flex-wrap: wrap;
  margin: var(--fl-sp-3) 0 var(--fl-sp-2) !important;
}
body.scene .cookie-btn{
  font-family: var(--fl-font) !important; font-weight: 600 !important;
  font-size: 13px !important; letter-spacing: .12em !important;
  text-transform: uppercase !important; padding: 14px 26px !important;
  border-radius: var(--fl-radius) !important; background: transparent !important;
  transition: all .25s var(--ease);
}
body.scene .cookie-btn-accept{
  border: 1px solid var(--fl-reticle-dot) !important;
  color: var(--fl-reticle-dot) !important;
}
body.scene .cookie-btn-accept:hover{
  background: var(--fl-reticle-dot) !important; color: var(--fl-bg) !important;
  box-shadow: 0 0 24px var(--fl-glow) !important;
}
body.scene .cookie-btn-refuse{
  border: 1px solid var(--fl-bracket) !important;
  color: var(--fl-text) !important;
}
body.scene .cookie-btn-refuse:hover{
  border-color: var(--fl-text-strong) !important;
  color: var(--fl-text-strong) !important;
}
/* le focus doit rester visible : le piege a focus place le curseur
   sur « Refuser » a l'ouverture. */
body.scene .cookie-btn:focus-visible,
body.scene .cookie-link:focus-visible{
  outline: 2px solid var(--fl-reticle-dot) !important; outline-offset: 3px;
}

body.scene .cookie-link{
  font-family: var(--fl-font-mono) !important; font-size: 11px !important;
  letter-spacing: var(--fl-track-data) !important;
  text-transform: uppercase !important; color: var(--fl-mono) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--fl-bracket); padding-bottom: 2px;
}
body.scene .cookie-link:hover{
  color: var(--fl-reticle-dot) !important;
  border-color: var(--fl-reticle-dot) !important;
}

@media (max-width: 700px){
  body.scene .cookie-modal{ padding: var(--fl-sp-3) !important; }
  body.scene .cookie-actions .cookie-btn{ flex: 1 1 auto; text-align: center; }
}

/* ================================================================
   CORRECTIONS MOBILE — 2026-07-30 (audit sur petits ecrans)
   Trois defauts anterieurs, trouves en testant a 320 px et sur la
   ligne de consentement du formulaire. Corriges ici plutot que dans
   les .min.css, qui sont des fichiers generes.
   ================================================================ */

/* 1. Accueil : les cartes d'articles debordaient de 4 px sous 350 px.
      Cause : grille en repeat(auto-fit, minmax(300px,1fr)) dans
      maillage.min.css — un minmax dont le minimum vaut 300px ne peut
      pas descendre sous 300px, meme quand la colonne fait 272px.
      min(300px,100%) autorise la carte a se reduire a la place
      disponible, sans rien changer au-dela de 350 px. */
body.scene .news-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
}

/* 2. Formulaire de contact : la ligne « J'autorise … » se cassait en
      colonne d'un mot par ligne sur mobile.
      Cause : le label est un conteneur flex et le texte n'est pas
      enveloppe dans une balise ; chaque morceau de texte devenait donc
      un element de la rangee et se faisait comprimer.
      En flow-root le texte redevient du texte courant et s'ecoule
      autour de la case flottante. flow-root (et non block) pour que
      le label contienne bien la case flottante. */
body.scene .f-ok,
body.scene .contact-form .f-ok{
  display: flow-root !important;
}
body.scene .f-ok > input[type="checkbox"]{
  float: left !important;
  margin: .2rem .6rem 0 0 !important;
}

/* 3. Menu mobile : chaque entree depliante affichait sous elle une
      boite vide de 10 px.
      Cause : a l'etat ferme la hauteur est bien ramenee a 0, mais le
      remplissage (4+4 px) et la bordure (1+1 px) restaient dessines.
      On les annule a l'etat ferme et on les retablit a l'ouverture. */
@media (max-width: 899px){
  body.scene .nav-links.on .nav-drop-menu{
    padding-top: 0 !important; padding-bottom: 0 !important;
    margin-top: 0 !important; margin-bottom: 0 !important;
    border-width: 0 !important;
    transition: max-height var(--t), padding var(--t), border-width var(--t) !important;
  }
  body.scene .nav-links.on .nav-drop.open .nav-drop-menu{
    padding-top: 4px !important; padding-bottom: 4px !important;
    margin-top: 4px !important; margin-bottom: 8px !important;
    border-width: 1px !important;
  }
}

/* 4. Publications : les cartes debordaient de 12 px sous 350 px.
      Cause differente des precedentes : la grille est bien en « 1fr » sur
      mobile, mais « 1fr » vaut « minmax(auto, 1fr) » — le minimum « auto »
      empeche la colonne de descendre sous la largeur minimale du contenu,
      ici 300 px. minmax(0, 1fr) autorise la colonne a se reduire.
      Porte au seul palier mobile : au-dessus, la grille a 2 ou 3 colonnes
      est plus large que 300 px et n'a jamais debordee. */
@media (max-width: 768px){
  body.scene .pub-grid{ grid-template-columns: minmax(0, 1fr) !important; }
}

/* ================================================================
   BARRE DE NAVIGATION — plage du menu burger etendue a 1439 px
   2026-07-30.
   Symptome reel : le menu horizontal ne tient dans l'ecran qu'a partir
   de 1400 px (mesure, identique dans les 4 langues). En dessous, et
   jusqu'au basculement en burger a 899 px, les dernieres entrees sont
   COUPEES — le debordement est masque par overflow-x:hidden sur body,
   donc la page ne glisse pas : les entrees sont simplement inaccessibles.
     900 px  : « Nos publications », « Nous contacter » et FR coupes
     1024 px : « Nous contacter » (-111) et FR (-198)
     1280 px : « Nous contacter » (-27) et FR (-114) -> selecteur de
               langue entierement hors ecran
     1366 px : FR (-28)
     1400 px et au-dela : tout visible
   On etend donc la plage du burger jusqu'a 1439 px (seuil reel 1400,
   plus une marge). Aucun style n'est invente : ce sont les regles
   mobiles de style.min.css, reprises telles quelles. Seule difference,
   top:100% au lieu de top:110px, pour suivre la hauteur reelle de la
   barre a ces largeurs (117 px et non 110).
   ================================================================ */
@media (min-width: 900px) and (max-width: 1439px){
  body.scene .nav-mob{ display: flex !important; }
  body.scene .nav-links{ display: none !important; }
  body.scene .nav-links.on{
    display: flex !important; flex-direction: column !important;
    position: absolute !important; top: 100% !important;
    left: 0 !important; right: 0 !important;
    background: var(--surface) !important;
    border-bottom: .5px solid var(--border) !important;
    padding: 16px !important; gap: 4px !important; z-index: var(--z-fixed) !important;
  }
  body.scene .nav-links.on > a,
  body.scene .nav-links.on .nav-drop-trigger{
    height: 48px !important; padding: 0 14px !important;
    width: 100% !important; justify-content: flex-start !important;
  }
  body.scene .nav-links.on .nav-drop-menu{
    position: static !important; transform: none !important;
    opacity: 1 !important; pointer-events: auto !important;
    box-shadow: none !important; background: var(--bg-off) !important;
    min-width: 0 !important; max-height: 0 !important; overflow: hidden !important;
    padding: 0 8px !important; margin: 0 !important; border-width: 0 !important;
    transition: max-height var(--t), padding var(--t), border-width var(--t) !important;
  }
  body.scene .nav-links.on .nav-drop.open .nav-drop-menu{
    max-height: 400px !important;
    padding: 4px 8px !important; margin: 4px 0 8px !important; border-width: 1px !important;
  }
}

/* ================================================================
   GRAND SCEAU DE L'ACCUEIL — version nuit
   2026-07-30. Il n'existait qu'en version claire : en mode sombre on
   affichait donc une pastille blanche au milieu d'une page noire.
   Meme mecanisme que les sceaux de la barre de navigation.
   Garde-fou : si data-theme venait a manquer, on montre le jour seul.
   ================================================================ */
body.scene .pres-sceau-nuit{ display: none; }
[data-theme="light"] body.scene .pres-sceau-nuit{ display: none !important; }
[data-theme="light"] body.scene .pres-sceau-jour{ display: block !important; }
[data-theme="dark"]  body.scene .pres-sceau-jour{ display: none !important; }
[data-theme="dark"]  body.scene .pres-sceau-nuit{ display: block !important; }

/* ================================================================
   CIBLES TACTILES — 2026-07-31 (accessibilité WCAG 2.5.5)
   On agrandit la ZONE CLIQUABLE à 44x44, sans changer la taille
   visible des icônes ni des textes. Aucune modification d'apparence.
   ================================================================ */

/* fil d'Ariane : le lien garde sa taille visuelle, zone tactile étendue
   verticalement à 44px via padding compensé par une marge négative. */
body.scene .breadcrumb a{
  display: inline-block; padding: 12px 0; margin: -12px 0;
}

/* Orthotypo 2026-07-31 — chiffres tabulaires (touche 3) */
.news-date,.card-num,.ft-col a[href^="tel:"],.ft-col a[href^="https://wa.me"]{font-variant-numeric:tabular-nums}


/* ============================================================
   LOT 1 — Echelle typographique (2026-07-31)
   8 tailles rondes tokenisees, interlignes apparies.
   Chrome (nav, hero, selecteur de langue, liens de nav/pied) laisse intact.
   ============================================================ */
:root{
  --fs-display:48px;  --lh-display:1.1;
  --fs-h1:34px;       --lh-h1:1.2;
  --fs-h2:26px;       --lh-h2:1.25;
  --fs-h3:20px;       --lh-h3:1.35;
  --fs-lead:18px;     --lh-lead:1.8;
  --fs-body:17px;     --lh-body:1.8;
  --fs-annexe:14px;   --lh-annexe:1.7;
  --fs-cote:12px;     --lh-cote:1.5;
}
body.scene{font-size:var(--fs-body);line-height:var(--lh-body);}
body.scene p{font-size:var(--fs-body);line-height:var(--lh-body);}
body.scene h1,body.scene .h1-page,body.scene .h1-page-dark{font-size:var(--fs-h1);line-height:var(--lh-h1);}
body.scene h2,body.scene .h2,body.scene .implant-title,body.scene .affiliations-title,body.scene .founder-name{font-size:var(--fs-h2);line-height:var(--lh-h2);}
body.scene h3,body.scene .engagement-title{font-size:var(--fs-h3);line-height:var(--lh-h3);}
body.scene .founder-bio{font-size:var(--fs-lead);line-height:var(--lh-lead);}
body.scene .ft-addr,body.scene .news-date,body.scene .photo-credit,body.scene .engagement-desc,body.scene .implant-intro,body.scene .implant-desc,body.scene .founder-fact-text,body.scene .affiliation-desc{font-size:var(--fs-annexe);line-height:var(--lh-annexe);}
body.scene .tag,body.scene .section-label,body.scene .card-sub,body.scene .lang-panel-title,body.scene .affiliation-badge,body.scene .implant-tag,body.scene .implant-badge,body.scene .bc-sep,body.scene .bc-current,body.scene .ft-legal-btn,body.scene .founder-fact-badge,body.scene .founder-role{font-size:var(--fs-cote);line-height:var(--lh-cote);}

/* Lot 1 — corps courant force a 17 sur les selecteurs de contenu du site (chrome/nav/boutons intacts) */
body.scene .page-sec p,body.scene .hero-page ~ .sec p,body.scene .about-text p,body.scene .cd p,body.scene .expert-card p,body.scene .hero-intro,body.scene .implant-intro,body.scene .founder-bio{font-size:var(--fs-body);line-height:var(--lh-body);}
body.scene .engagement-desc,body.scene .affiliation-desc,body.scene .affiliation-name,body.scene .implant-desc,body.scene .implant-name,body.scene .founder-fact-text{font-size:var(--fs-annexe);line-height:var(--lh-annexe);}


/* ============================================================
   LOT 2 — Rythme vertical (multiples de 8)  2026-07-31
   ============================================================ */
:root{--space-3xl:64px;--space-4xl:80px;--space-5xl:96px;--space-6xl:112px;--space-7xl:128px;}
body.scene .about-text p,body.scene .page-sec p,body.scene .hero-page ~ .sec p,body.scene .cd p,body.scene .expert-card p,body.scene .hero-intro,body.scene .founder-bio,body.scene .implant-intro,body.scene .engagement-desc{margin-bottom:24px;}
body.scene .sec,body.scene .page-sec{padding-top:var(--space-6xl);padding-bottom:var(--space-6xl);}
body.scene .h2{margin-bottom:24px;}
body.scene .cd h3,body.scene .engagement-title{margin-bottom:16px;}

/* ============================================================
   LOT 3 — Mesure & alignement (largeur de lecture + fin du justifie)
   ============================================================ */
:root{--w-lecture:640px;--w-colonne:560px;--w-pleine:1152px;}
body.scene .about-text p,body.scene .page-sec p,body.scene .hero-page ~ .sec p,body.scene .cd p,body.scene .expert-card p,body.scene .hero-intro,body.scene .founder-bio,body.scene .implant-intro,body.scene .engagement-desc{max-width:var(--w-lecture);text-align:left;text-wrap:pretty;hyphens:none;}
body.scene p,body.scene li{text-align:left;}

/* ============================================================
   LOT 4 — Interlettrage (3 valeurs : 0 / -0.3px / +2px)
   ============================================================ */
body.scene .about-text p,body.scene .page-sec p,body.scene .hero-page ~ .sec p,body.scene .cd p,body.scene .expert-card p,body.scene .hero-intro,body.scene .founder-bio,body.scene .implant-intro,body.scene .engagement-desc{letter-spacing:0;}
body.scene h1,body.scene .h1-page,body.scene .h1-page-dark,body.scene h2,body.scene .h2{letter-spacing:-0.3px;}
body.scene .tag,body.scene .section-label,body.scene .card-sub{letter-spacing:2px;}

/* Correctif M2 (2026-07-31) — les titres des cartes publications passent de
   h4 a h2 (la page n'avait qu'un h1 puis des h4 : saut de hierarchie).
   Cette regle reprend a l'identique l'apparence de l'ancien .pub-card h4,
   pour que RIEN ne change visuellement. */
.pub-card .pub-title{font-family:var(--serif);font-size:1.25rem;font-weight:700;font-style:normal;line-height:var(--leading-tight);color:var(--black);margin-bottom:var(--space-md);hyphens:none;-webkit-hyphens:none;letter-spacing:normal}

/* ============================================================
   Correctifs 2026-07-31 (matin) — logos sociaux + page contact
   ============================================================ */

/* 2. PAGE CONTACT — placeholders quasi illisibles (opacite 50 %) : remontes a 78 %. */
body.scene .f-grp input::placeholder,
body.scene .f-grp textarea::placeholder,
body.page-contact .contact-form input::placeholder,
body.page-contact .contact-form textarea::placeholder{color:rgba(96,86,78,.78) !important;font-style:normal !important;}
html[data-theme="dark"] body.scene .f-grp input::placeholder,
html[data-theme="dark"] body.scene .f-grp textarea::placeholder{color:rgba(235,228,220,.62) !important;}

/* 3. PAGE CONTACT — le bouton ENVOYER etait en filet alors que le CTA principal
      du site est une pilule PLEINE. Mise en coherence. */
body.page-contact .contact-form-submit,
body.page-contact .contact-form button[type="submit"],
body.scene .contact-form-submit{background:var(--fl-link) !important;color:#FFF7F0 !important;border:1px solid var(--fl-link) !important;border-radius:999px !important;font-weight:600 !important;}
body.page-contact .contact-form-submit:hover,
body.scene .contact-form-submit:hover{background:#9E2E15 !important;border-color:#9E2E15 !important;box-shadow:0 0 28px rgba(244,120,56,.30) !important;}

/* 4. PAGE CONTACT — le formulaire faisait 720 px, le chapo 640 px : deux largeurs
      differentes dans la meme colonne, d'ou l'impression de decalage et de vide a
      droite. Aligne sur la largeur de lecture. */
body.page-contact .contact-form{max-width:var(--w-lecture);}

/* ============================================================
   CORRECTIFS AUDIT — 2026-07-31 (matin)
   ============================================================ */

/* B1 — le « fin du justifié » du Lot 3 etait inoperant au-dessus de 768 px :
   deux blocs @media posaient text-align:justify !important sur les memes
   selecteurs. On desarme la justification, sauf le hero centre. */
@media (min-width:768px){
  body.scene p, body.scene .hero-intro, body.scene .cd p, body.scene .about-text p,
  body.scene .sub, body.scene .news-subtitle,
  body.scene .affiliations-section p, body.scene .affiliations-card p,
  body.scene .faq-a, body.scene .faq-a p, body.scene .page-sec p,
  body.scene details p, body.scene .f-side p{
    text-align:left !important; hyphens:none !important; -webkit-hyphens:none !important;
  }
  body.scene .hero-scene p{ text-align:center !important; }
}

/* I1 — le Lot 2 (padding 112px hors media query) ecrasait toutes les reductions
   mobiles : +128 px par section, ~+770 px de defilement sur l'accueil. */
@media (max-width:768px){
  body.scene .sec, body.scene .page-sec{
    padding-top:var(--space-3xl) !important; padding-bottom:var(--space-3xl) !important;
  }
}

/* B2 + B3 — bouton ENVOYER : --fl-link vaut #E68056 en nuit, prevu pour du TEXTE
   sur fond sombre, pas pour un aplat -> 2,61:1. Aplat fixe et contraste tenu. */
body.page-contact .contact-form-submit,
body.page-contact .contact-form button[type="submit"],
body.scene .contact-form-submit{background:#B8371A !important;color:#FFF7F0 !important;border:1px solid #B8371A !important;}
html[data-theme="dark"] body.page-contact .contact-form-submit,
html[data-theme="dark"] body.scene .contact-form-submit{background:#C8431E !important;border-color:#C8431E !important;color:#FFF7F0 !important;}
body.page-contact .contact-form-submit:hover,
body.scene .contact-form-submit:hover{background:#9E2E15 !important;border-color:#9E2E15 !important;color:#FFF7F0 !important;}

/* I2 — adresse du pied de page a 2,21:1 (oubliee par le correctif v53). */
body.scene .ft-addr{color:var(--fl-text-muted) !important;}

/* I3 — legendes des chiffres du hero a 4,24:1 en jour. */
[data-theme="light"]{--fl-mono:rgba(66,56,48,.80);}

/* I4 — bordures des champs a 1,64:1 : la limite du champ etait imperceptible. */
[data-theme="light"]{--fl-field-border:rgba(40,28,22,.55);}
[data-theme="dark"]{--fl-field-border:rgba(255,255,255,.42);}
body.scene .f-grp input, body.scene .f-grp select, body.scene .f-grp textarea{
  border:1px solid var(--fl-field-border) !important;
}

/* I5 — placeholders encore a 3,92:1 apres le premier correctif. */
body.scene .f-grp input::placeholder, body.scene .f-grp textarea::placeholder,
body.page-contact .contact-form input::placeholder,
body.page-contact .contact-form textarea::placeholder{color:rgba(88,78,70,.92) !important;font-style:normal !important;}
html[data-theme="dark"] body.scene .f-grp input::placeholder,
html[data-theme="dark"] body.scene .f-grp textarea::placeholder{color:rgba(235,228,220,.72) !important;}

/* I7 — grilles : `1fr` = `minmax(auto,1fr)`, le minimum auto empeche la colonne
   de descendre sous la largeur du contenu -> debordement. min-width:0 le leve. */
body.scene .grid-joint-2 > *, body.scene .grid-joint-3 > *,
body.scene .page-cards-3 > *, body.scene .page-cards-4 > *,
body.scene .affiliations-grid > *, body.scene .engagements-grid > *,
body.scene .interventions-grid > *, body.scene .news-grid > *, body.scene .pub-grid > *{min-width:0;}

/* M5 — le passage h4 -> h2 des cartes publications avait rendu morte la regle
   d'impression a 11pt. */
@media print{ .pub-card .pub-title{font-size:11pt;} }

/* I6 — les sous-menus ne s'ouvraient qu'au survol souris ou au clic JS :
   aucune regle :focus-within. Navigation au clavier impossible. */
body.scene .nav-drop:focus-within .nav-drop-menu{opacity:1;pointer-events:auto;visibility:visible;transform:translate(-50%,0);}

/* M2 — un line-height:1.7 !important anterieur bloquait l'interligne 1.8 du chapô. */
body.scene .hero-intro{line-height:var(--lh-body) !important;}

/* ============================================================
   QUI SOMMES-NOUS — bloc PRÉSENTATION avec photo (2026-07-31)
   Les regles .founder-* de style.min.css sont toutes portees par
   body.page-cabinet : rien ne s'appliquait ici. On redeclare la
   grille. La photo reprend le traitement editorial de l'accueil
   (.about-img : cadre reticule rouge, duotone braise, credit mono),
   on ne redefinit donc ni le filtre ni les equerres.
   ============================================================ */
body.page-qsn .qsn-intro-grid{
  display:grid; grid-template-columns:38% 1fr; gap:52px; align-items:center;
}
body.page-qsn .qsn-photo{ width:100%; }
body.page-qsn .qsn-photo picture,
body.page-qsn .qsn-photo img{
  display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover;
}

/* --- Photo deja cadree par Stephane (2026-07-31) ---------------
   Le fichier livre porte DEJA son cadre blanc, ses equerres rouges,
   sa reglette de mesure et son credit. On neutralise donc tout ce
   que .about-img ajoute d'habitude : equerres CSS, bordure, arrondi
   et duotone braise. Sans cela, deux cadres se superposeraient et
   l'image serait re-etalonnee une seconde fois.
   L'aspect 3/4 est conserve AUSSI sur mobile : passer en 16/9 ou 4/3
   rognerait le cadre et les mentions incrustees. */
body.page-qsn .qsn-photo-cadree{ border:0 !important; border-radius:0 !important; }
body.page-qsn .qsn-photo-cadree::before,
body.page-qsn .qsn-photo-cadree::after{ content:none !important; }
body.page-qsn .qsn-photo-cadree img{
  filter:none !important; border-radius:0 !important;
}
@media (max-width:768px){
  body.page-qsn .qsn-intro-grid{ grid-template-columns:1fr; gap:32px; }
  body.page-qsn .qsn-photo-cadree picture,
  body.page-qsn .qsn-photo-cadree img{ aspect-ratio:3 / 4; max-height:none; }
}

/* ============================================================
   MARQUE EN TEXTE COURANT — .fl-wordmark (2026-07-31)
   Reprend l'ordre du logo de la nav : Fire en degrade, Lab en
   sombre, Pyrenees en normal. On ne reutilise pas .fl-brand,
   qui force font-size:17px !important et casserait la marque
   dans les titres. Ici la taille suit le texte qui l'entoure.
   Les variantes fond sombre (.hero-page, footer, .ft, .cd-dark)
   sont deja portees par .fl-fire / .fl-lab : rien a redeclarer.
   ============================================================ */
body.scene .fl-wordmark{
  font-family:inherit; font-size:inherit; font-style:normal;
  text-transform:uppercase; letter-spacing:.06em;
}
body.scene .fl-wordmark .fl-fire,
body.scene .fl-wordmark .fl-lab{ font-weight:700; font-style:normal; white-space:nowrap; }
body.scene .fl-wordmark .brand-pyr{
  font-family:inherit !important; font-style:normal !important;
  font-weight:300 !important; color:var(--fl-text) !important;
}

/* ============================================================
   QUI SOMMES-NOUS — H1 du bandeau sur une seule ligne (2026-07-31)
   La regle generale bride les bandeaux a max-width:52% pour ne pas
   heurter le visuel de droite. Sur ce bandeau precis, le logo
   commence a 62,6% de la largeur (mesure sur l'image) : on peut
   monter a 61% sans l'approcher. Le titre passe alors sur une
   ligne au-dela de ~1290px, et se replie normalement en dessous.
   Aucune autre page n'est touchee.
   ============================================================ */
@media (min-width: 1290px){
  body.scene.page-qsn-index .hero-page .h1-page-dark{
    max-width: 61% !important; text-wrap: nowrap;
  }
}

/* TM de la marque en texte courant : discret, jamais espace par
   l'interlettrage du wordmark, aligne en exposant haut. */
body.scene .fl-wordmark .tm{
  font-size:.34em; vertical-align:1.15em; letter-spacing:0;
  font-weight:400; font-style:normal; top:0;
  color:var(--fl-mono-dim) !important;
}

/* ============================================================
   QUI SOMMES-NOUS — lisibilite du bloc de presentation (2026-07-31)
   1. Chapo : la phrase d'accroche passe en corps de tete (18px),
      la question elle-meme est mise en avant.
   2. Liens en texte courant : ils n'etaient signales QUE par la
      couleur rouge. Un lecteur daltonien ne les distinguait pas
      d'un simple mot en gras (WCAG 1.4.1). On ajoute un souligne
      discret, decale sous la ligne de base.
   3. Respiration : 24px entre paragraphes, c'etait serre pour un
      interligne de 30,6px.
   ============================================================ */
body.page-qsn .p-chapo{
  font-size:var(--fs-lead); line-height:var(--lh-lead);
  color:var(--fl-text-strong); margin-bottom:var(--space-lg);
}
body.page-qsn .founder-text p + p,
body.page-qsn .page-sec p + p{ margin-top:6px; }
body.page-qsn .founder-text p,
body.page-qsn .page-sec > .w > p{ margin-bottom:28px; }

body.page-qsn .founder-text p a,
body.page-qsn .page-sec p a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(184,55,26,.45);
}
body.page-qsn .founder-text p a:hover,
body.page-qsn .page-sec p a:hover{ text-decoration-color:currentColor; }

/* ============================================================
   QUI SOMMES-NOUS — justification du corps de texte (2026-07-31)
   Demande de Stephane, qui revient sur la consigne du LOT 3
   (drapeau a gauche). La justification n'est appliquee QU'ICI et
   seulement au-dela de 768px : justifier une colonne etroite sur
   mobile creuse des rivieres blanches entre les mots.
   La cesure reste desactivee (charte : pas de mots coupes).
   ============================================================ */
@media (min-width:769px){
  body.page-qsn .founder-text p,
  body.page-qsn .page-sec p{
    text-align:justify !important;
    text-justify:inter-word;
    hyphens:none !important; -webkit-hyphens:none !important;
  }
}

/* ============================================================
   QUI SOMMES-NOUS — resserrage vertical (2026-07-31)
   La page respirait trop : 112px de padding au-dessus et en
   dessous de chaque section, et un interligne de 1,8 sur du 17px
   (30,6px de hauteur de ligne). On reste sur la grille de 8 du
   LOT 2 : 112 -> 88, interligne 1,8 -> 1,7.
   ============================================================ */
body.page-qsn .sec,
body.page-qsn .page-sec{ padding-top:88px; padding-bottom:88px; }
body.page-qsn .founder-text p,
body.page-qsn .page-sec p,
body.page-qsn .situation{ line-height:1.7 !important; }
/* 20px d'ecart pour 28,9px d'interligne : les paragraphes se
   touchaient presque, on ne voyait plus ou l'un finissait. Un
   paragraphe doit etre separe d'AU MOINS une ligne pleine. */
body.page-qsn .founder-text p{ margin-bottom:36px !important; }
body.page-qsn .founder-text p + p{ margin-top:0 !important; }
@media (max-width:768px){
  body.page-qsn .sec,
  body.page-qsn .page-sec{ padding-top:56px !important; padding-bottom:56px !important; }
}

/* ============================================================
   PIED DE PAGE — marque lisible (2026-07-31)
   Trois regles heritees peignaient la marque pour un pied de page
   NOIR (epoque --footer:#2a2724) :
     footer .fl-lab      -> #F4ECE2  (creme)
     footer .fl-fire     -> degrade clair
     footer .brand-pyr   -> #E4DBD0 !important
   Le pied de page de la charte scene est CLAIR : LAB et PYRENEES
   ressortaient donc en blanc sur blanc. On rétablit exactement les
   couleurs de la nav, en jour comme en nuit.
   ============================================================ */
[data-theme="light"] body.scene .ft .fl-wordmark .fl-lab,
[data-theme="light"] body.scene footer .fl-wordmark .fl-lab{
  color: var(--fl-text-strong) !important;
}
[data-theme="light"] body.scene .ft .fl-wordmark .brand-pyr,
[data-theme="light"] body.scene footer .fl-wordmark .brand-pyr{
  color: var(--fl-text) !important;
}
[data-theme="light"] body.scene .ft .fl-wordmark .fl-fire,
[data-theme="light"] body.scene footer .fl-wordmark .fl-fire{
  background: linear-gradient(180deg,#E0791F 0,#CE3D18 50%,#9E230E 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
/* En nuit le pied de page redevient sombre : la marque s'eclaircit. */
[data-theme="dark"] body.scene .ft .fl-wordmark .fl-lab,
[data-theme="dark"] body.scene footer .fl-wordmark .fl-lab{ color:#F4ECE2 !important; }
[data-theme="dark"] body.scene .ft .fl-wordmark .brand-pyr,
[data-theme="dark"] body.scene footer .fl-wordmark .brand-pyr{ color:rgba(228,219,208,.9) !important; }

/* ============================================================
   RESEAUX SOCIAUX — reconstruction complete (2026-07-31)
   Les anciens `.ft-soc-link` etaient pris dans un empilement de
   regles contradictoires (fill force sur tous les svg, tailles en
   !important dans trois feuilles, couleurs prevues pour un pied de
   page noir). Resultat chez Stephane : six disques pleins rouges,
   les logos invisibles.
   On repart d'une classe neuve, `.fl-soc`, qu'aucune ancienne regle
   ne cible. Tout est declare ici, une seule fois, sans !important
   sauf la ou il faut battre les selecteurs generiques du pied de page.
   Les traces sont les glyphes officiels des six marques.
   ============================================================ */
body.scene .ft-social{ display:flex; gap:10px; align-items:center; }

body.scene a.fl-soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 38px;
  border-radius:50%; box-sizing:border-box; padding:0;
  background:transparent;
  border:1px solid rgba(40,28,22,.34);
  color:#2E2521 !important;
  text-decoration:none !important;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
body.scene a.fl-soc .fl-soc-i{
  width:20px; height:20px; display:block; overflow:visible;
  fill:currentColor; stroke:none;
}
body.scene a.fl-soc .fl-soc-i path{ fill:currentColor; stroke:none; }

/* couleurs officielles au survol : le logo devient reconnaissable */
body.scene a.fl-soc-linkedin:hover { color:#0A66C2 !important; border-color:#0A66C2; }
body.scene a.fl-soc-instagram:hover{ color:#C13584 !important; border-color:#C13584; }
body.scene a.fl-soc-x:hover        { color:#000000 !important; border-color:#000000; }
body.scene a.fl-soc-facebook:hover { color:#1877F2 !important; border-color:#1877F2; }
body.scene a.fl-soc-youtube:hover  { color:#FF0000 !important; border-color:#FF0000; }
body.scene a.fl-soc-whatsapp:hover { color:#25D366 !important; border-color:#25D366; }

/* pied de page sombre en thème nuit */
[data-theme="dark"] body.scene a.fl-soc{
  color:#F2ECE4 !important; border-color:rgba(255,255,255,.30);
}

/* ============================================================
   PIED DE PAGE — sceau et marque alignes comme dans la nav
   (2026-07-31). Le lien de marque etait en display:block : le
   sceau se posait AU-DESSUS du mot, 60px plus haut que son centre.
   Dans la nav les deux sont cote a cote, centres verticalement.
   On applique la meme regle, jour et nuit, sur toutes les pages.
   ============================================================ */
body.scene .ft .ft-brand-link,
body.scene footer .ft-brand-link{
  display:inline-flex !important;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
body.scene .ft .ft-brand-link .ft-sceau,
body.scene footer .ft-brand-link .ft-sceau{
  flex:0 0 auto; margin:0 !important; display:block;
}
body.scene .ft .ft-brand-link .fl-wordmark,
body.scene footer .ft-brand-link .fl-wordmark{
  display:inline-block; line-height:1;
}
@media (max-width:480px){
  body.scene .ft .ft-brand-link{ gap:10px; }
}

/* ============================================================
   MARQUE EN TEXTE COURANT — bascule jour / nuit (2026-07-31)
   `.fl-lab` valait #201915 en dur, quel que soit le theme : en nuit
   la marque disparaissait dans le fond. On la fait basculer partout
   ou elle apparait (texte, cartes, modales, pied de page), une seule
   regle pour les 821 occurrences du site.
   ============================================================ */
[data-theme="dark"] body.scene .fl-wordmark .fl-lab{ color:#F4ECE2 !important; }
[data-theme="dark"] body.scene .fl-wordmark .brand-pyr{ color:rgba(228,219,208,.90) !important; }
[data-theme="dark"] body.scene .fl-wordmark .fl-fire{
  background:linear-gradient(180deg,#FFD48C 0,#F4772E 46%,#D6431A 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important;
}
[data-theme="light"] body.scene .fl-wordmark .fl-lab{ color:#201915 !important; }
[data-theme="light"] body.scene .fl-wordmark .brand-pyr{ color:#7A6F66 !important; }

/* ============================================================
   QUI SOMMES-NOUS — section « Quand nous appeler » (2026-07-31)
   Quatre cartes identiques a celles d'EXPLORER, en grille a deux
   colonnes. Le gros numero (52px) est verrouille dans le CSS sur
   `.grid-joint-3` : en `grid-joint-2` il retombait a 13px et les
   deux blocs de cartes n'avaient plus le meme aspect. On reporte
   le reglage ici.
   ============================================================ */
/* ============================================================
   SUR-TITRES — la cible remplace le tiret (2026-07-31)
   Le filet rouge de 36x1,5px devient un reticule : cercle, croix
   et point central. C'est le motif de reperage du secteur d'origine,
   deja present aux angles des photos editoriales.
   Technique : on garde `background` comme SOURCE DE COULEUR et on
   applique la forme en `mask`. Toutes les regles existantes qui
   repeignent `.tag::before` (hero-page, #missions, thème nuit)
   continuent donc de fonctionner sans etre reecrites.
   ============================================================ */
body.scene .tag::before{
  width:22px !important; height:22px !important;
  border-radius:0 !important;
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='10' cy='10' r='1.7' fill='%23000'/%3E%3Cpath d='M10 1.2v3.1M10 15.7v3.1M1.2 10h3.1M15.7 10h3.1' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='10' cy='10' r='1.7' fill='%23000'/%3E%3Cpath d='M10 1.2v3.1M10 15.7v3.1M1.2 10h3.1M15.7 10h3.1' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}

/* Meme reticule sur les sur-titres de cartes et les libelles de
   section. Le masque est identique a celui de `.tag::before` : la
   couleur reste portee par `background`, donc chaque contexte garde
   sa teinte (rouge brique, orange du bandeau, clair en nuit). */
body.scene .card-sub::before,
body.scene .section-label::before,
body.scene .implant-tag::before,
body.scene .founder-role::before{
  width:18px !important; height:18px !important; border-radius:0 !important;
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='%23000'/%3E%3Cpath d='M10 1.2v3.1M10 15.7v3.1M1.2 10h3.1M15.7 10h3.1' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='%23000'/%3E%3Cpath d='M10 1.2v3.1M10 15.7v3.1M1.2 10h3.1M15.7 10h3.1' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}

/* ============================================================
   BANDEAU DE PAGE — hauteur RETABLIE (2026-07-31)
   Tentative de reduction abandonnee, mesures a l'appui.
   Analyse pixel du bandeau : le fond est du noir pur (0,0,0) et,
   des qu'on descend le seuil de detection a un ecart de 12/255,
   du contenu apparait de 0,0% a 99,8% de la hauteur. Les petits
   carres et traits fins du graphisme touchent donc les deux bords
   de l'image : TOUT recadrage vertical en supprime.
   On garde le format brut 2560/640. La hauteur du bandeau est une
   consequence du visuel, pas un reglage.
   ============================================================ */
/* Sceau du pied de page : meme rendu que celui de la nav.
   Le box-shadow (liseré blanc + ombre portee) datait du sceau
   OPAQUE. Sur un logo detoure il cerne la boite, pas le dessin :
   on obtenait un disque blanc ombre au lieu du sceau. */
body.scene .ft-sceau{ box-shadow:none !important; }

/* ============================================================
   SUR-TITRES — cible agrandie + degrade de la marque (2026-07-31)
   1. La cible du bandeau passe a 26px, a l'echelle du mot
      FIRELAB PYRENEES qui lui fait face.
   2. Le texte des sur-titres reprend le degrade de `.fl-fire`
      (orange -> rouge), au lieu d'un aplat. La cible garde sa
      couleur propre : c'est un element ::before, son `background`
      lui sert de source de couleur et n'est pas affecte par le
      background-clip:text du parent.
   ============================================================ */
body.scene .hero-page .tag::before{ width:26px !important; height:26px !important; }
body.scene .hero-page .tag{ gap:14px; }

body.scene .tag{
  background-image: linear-gradient(180deg,#E0791F 0,#CE3D18 52%,#9E230E 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}
body.scene .hero-page .tag,
[data-theme="light"] body.scene .hero-page .tag,
[data-theme="dark"] body.scene .hero-page .tag{
  background-image: linear-gradient(180deg,#FFD48C 0,#F4772E 46%,#E8552A 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;   /* une regle du bandeau imposait #F4926A */
}
[data-theme="dark"] body.scene .tag{
  background-image: linear-gradient(180deg,#FFD48C 0,#F4772E 46%,#E8552A 100%);
}

/* ============================================================
   QUI SOMMES-NOUS — titre EXPLORER sur une seule ligne (2026-07-31)
   « Une equipe pluridisciplinaire, sur tous les domaines
   d'intervention. » demande 1122px en 34px, pour 1088px
   disponibles : il manquait 34px et le titre passait a la ligne.
   On le ramene a 32px (1056px) au-dela de 1200px de fenetre, avec
   nowrap pour verrouiller. En dessous, il se replie normalement.
   ============================================================ */
@media (min-width:1200px){
  body.page-qsn #qsn-entries > .w > h2{
    font-size:32px !important;
    white-space:nowrap;
  }
}

/* ============================================================
   ACCUEIL — photo J.-L. BORIEL deja cadree (2026-07-31)
   Meme cas que la photo de la page Qui sommes-nous : le fichier
   porte DEJA son cadre, ses equerres, sa reglette et son credit.
   On neutralise donc tout ce que `.about-img` ajoute, et on
   verrouille le format 3/4 y compris sur mobile, sinon le cadre
   incruste serait rogne.
   ============================================================ */
body.scene .acc-photo-cadree{ border:0 !important; border-radius:0 !important; }
body.scene .acc-photo-cadree::before,
body.scene .acc-photo-cadree::after{ content:none !important; }
body.scene .acc-photo-cadree > picture{ position:static; display:block; }
body.scene .acc-photo-cadree img{
  filter:none !important; border-radius:0 !important;
  position:static !important; display:block; width:100%; height:auto;
  aspect-ratio:3 / 4; object-fit:cover;
}
@media (max-width:768px){
  body.scene .acc-photo-cadree img{ aspect-ratio:3 / 4; max-height:none; }
}


/* ============================================================
   PIED DE PAGE — la cible devant les titres de colonne (2026-07-31)
   « Nos compétences », « Nos services », « Nous contacter » sont des
   sur-titres comme les autres : ils portent le même réticule que
   `.tag` et `.card-sub`, en 16px pour l'échelle du footer.
   Même technique : `background` porte la couleur, `mask` la forme.
   ============================================================ */
body.scene .ft-col-t{
  display:inline-flex !important; align-items:center !important; gap:10px !important;
}
body.scene .ft-col-t::before{
  content:""; flex:0 0 16px; width:16px; height:16px; border-radius:0;
  background: var(--fl-reticle-dot);
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='10' cy='10' r='1.7' fill='%23000'/%3E%3Cpath d='M10 1.2v3.1M10 15.7v3.1M1.2 10h3.1M15.7 10h3.1' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='10' cy='10' r='1.7' fill='%23000'/%3E%3Cpath d='M10 1.2v3.1M10 15.7v3.1M1.2 10h3.1M15.7 10h3.1' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
[data-theme="dark"] body.scene .ft-col-t::before{ background:#F4926A; }

/* ============================================================
   PAGES DE RUBRIQUE — /competences/ et /services/ (2026-07-31)
   Mêmes réglages de lecture que les pages « Qui sommes-nous ».
   ============================================================ */
@media (min-width:769px){
  body.page-rub .sec p{ text-align:justify !important; hyphens:none !important; }
}
body.page-rub .sec p{ line-height:1.7 !important; margin-bottom:36px !important; }
body.page-rub .sec{ padding-top:88px; padding-bottom:88px; }
body.page-rub .p-chapo{ font-size:18px !important; color:var(--fl-text-strong) !important; }
body.page-rub .sec p a{
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:rgba(184,55,26,.45);
}
body.page-rub .sec p a:hover{ text-decoration-color:#B8371A; }
/* le numéro de 52px est verrouillé sur .grid-joint-3 : on le reporte */
body.page-rub .grid-joint-2 .card-num{
  font-size:52px !important; top:16px !important; right:18px !important;
}


/* ============================================================
   LIENS DE SECTION — la cible devant « Découvrir le cabinet »
   (2026-08-01). `style.min.css` neutralisait ::before avec
   `content:none !important` : on le rétablit explicitement.
   ============================================================ */
body.scene .section-link{
  display:inline-flex !important; align-items:center !important; gap:10px !important;
}
body.scene .section-link::before{
  content:"" !important; flex:0 0 16px; width:16px; height:16px; border-radius:0;
  background: var(--fl-reticle-dot);
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='10' cy='10' r='1.7' fill='%23000'/%3E%3Cpath d='M10 1.2v3.1M10 15.7v3.1M1.2 10h3.1M15.7 10h3.1' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='10' cy='10' r='1.7' fill='%23000'/%3E%3Cpath d='M10 1.2v3.1M10 15.7v3.1M1.2 10h3.1M15.7 10h3.1' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
body.scene .section-link:hover::before{ transform: rotate(90deg); }
[data-theme="dark"] body.scene .section-link::before{ background:#F4926A; }

/* ============================================================
   PAGES DE RUBRIQUE — H1 du bandeau sur une seule ligne
   Le fond « Expertise NOIR complet reduit » ne porte aucun dessin
   avant 63,1 % de sa largeur (mesuré sur l'image 2560x640).
   Le titre peut donc occuper jusqu'à 60 % sans rien chevaucher.
   ============================================================ */
@media (min-width:1290px){
  body.page-rub .hero-page .tag,
  body.page-rub .hero-page .h1-page-dark,
  body.page-rub .hero-page .hero-sub{ max-width:60% !important; }
  body.page-rub .hero-page .h1-page-dark{ text-wrap:nowrap; }
}





/* ============================================================
   HARMONIE TYPOGRAPHIQUE — 2026-08-01
   Le titre de colonne du pied de page sortait à 17px alors que
   TOUS les autres libellés mono du site sont à 11px (--fl-size-eyebrow).
   On le ramène dans la famille : .tag, .card-sub, .section-link,
   .ft-col-t et les titres de badge partagent désormais le même corps.
   ============================================================ */
/* Le titre de colonne doit DOMINER ses liens (Manrope 14px). A 11px il
   passait dessous : inversion hierarchique corrigee le 2026-08-01. */
body.scene .ft-col-t{
  font-size: 14px !important;
  letter-spacing: .2em !important;
  margin-bottom: 18px !important;
}
body.scene .ft-col-t::before{ width:17px !important; height:17px !important; flex:0 0 17px; }
body.scene .section-link{
  font-size: var(--fl-size-eyebrow) !important;
  letter-spacing: var(--fl-track-eyebrow) !important;
}


/* ============================================================
   MISE EN VALEUR DANS LES H2 — 2026-08-01
   <em> est deja le vocabulaire des H1 de bandeau. On l'etend aux
   H2 de section : braise, souligne, jamais en italique.
   ============================================================ */
/* <em> dans un H2 : jamais d'italique, jamais de couleur a part.
   Les titres du site sont d'une seule couleur, comme les H1 de bandeau. */
body.scene .h2 em{ font-style: normal !important; color: inherit !important;
  text-decoration: none !important; }


/* ============================================================
   BOUTON DE PERMANENCE — animation d'appel (2026-08-01)
   Validé par Stéphane. Le cadre ne change pas : c'est le
   vocabulaire du bouton JOUR · NUIT, avec ses quatre équerres.
   Seuls la cible et le halo bougent, pour que l'appel à l'action
   se remarque sans trahir la charte.
   ============================================================ */
@keyframes fl-cta-halo{
  0%,100%{ box-shadow: 0 0 0 0 rgba(184,55,26,0); }
  50%    { box-shadow: 0 0 0 9px rgba(184,55,26,.14), 0 0 26px rgba(184,55,26,.30); }
}
@keyframes fl-cta-halo-nuit{
  0%,100%{ box-shadow: 0 0 0 0 rgba(244,146,106,0); }
  50%    { box-shadow: 0 0 0 9px rgba(244,146,106,.16), 0 0 30px rgba(244,146,106,.34); }
}
/* le reticule fait un tour NET puis marque un temps : symetrique, il ne se
   voit tourner que si le mouvement est rapide et suivi d'une pause */
@keyframes fl-cta-cible{
  0%       { transform: rotate(0deg); }
  18%,100% { transform: rotate(360deg); }
}
/* l'aiguille balaye en continu : asymetrique, elle rend le mouvement lisible */
@keyframes fl-cta-radar{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
body.scene .hs-cta .cta-cible .cta-aiguille{
  transform-origin: 10px 10px;
  animation: fl-cta-radar 2.6s linear infinite;
}
body.scene .hs-cta{ animation: fl-cta-halo 2.8s ease-in-out infinite; }
[data-theme="dark"] body.scene .hs-cta{ animation: fl-cta-halo-nuit 2.8s ease-in-out infinite; }
body.scene .hs-cta .cta-cible{ animation: fl-cta-cible 6s cubic-bezier(.5,0,.15,1) infinite; }
/* au survol, la rotation au clic reprend la main */
body.scene .hs-cta:hover .cta-cible{ animation: none; }
@media (prefers-reduced-motion: reduce){
  body.scene .hs-cta,
  [data-theme="dark"] body.scene .hs-cta,
  body.scene .hs-cta .cta-cible,
  body.scene .hs-cta .cta-cible .cta-aiguille{ animation: none !important; }
}


/* ============================================================
   HARMONISATION SUR LA PAGE D'ACCUEIL — 2026-08-01
   Décision de Stéphane (option A) : l'accueil devient la page
   de référence. Deux réglages s'alignent sur elle pour tout le site.

   1. Les H2 de section passent de 34 à 29 px. C'est la taille
      atteinte sur l'accueil quand il a fallu faire tenir le titre
      « Cinq métiers, de la Sensibilisation à l'Investigation
      Incendie » sur une seule ligne.

   2. Le premier paragraphe (chapô) n'est plus renforcé : il prend
      la même couleur que les suivants. L'écart se voyait et
      n'apportait rien. Sa taille de 18 px reste, elle est discrète.
   ============================================================ */
body.scene .h2{ font-size: 29px !important; }

body.scene .p-chapo,
body.page-qsn .p-chapo,
body.page-rub .p-chapo{ color: var(--fl-text) !important; }