/* Polices chargées par l'extension (Google Fonts, Barlow et Barlow Condensed). */

/* ==========================================================================
   SAGRAMAT SA — Feuille de style principale
   Direction artistique : minimalisme suisse + signalétique industrielle
   Typo : Barlow Condensed (titres) / Barlow (texte)
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Marque */
  --jaune:        #FFC72C;
  --jaune-fonce:  #F2A900;
  --jaune-pale:   #FFF4D6;
  --rouge:        #D8232A;
  --rouge-fonce:  #A81419;
  /* Variante pour le petit texte : #D8232A tombe à 4,47:1 sur fond gris clair.
     Celle-ci passe 4,5:1 partout tout en restant visuellement identique. */
  --rouge-texte:  #C41E25;
  --rouge-pale:   #FDECEC;

  /* Neutres */
  --noir:      #0E0F11;
  --noir-800:  #17191C;
  --noir-700:  #22262A;
  --noir-600:  #33383E;
  /* #6B7075 ne donnait que 3,9:1 sur le noir (pied de page, mentions).
     #8A9096 monte à 5,9:1 en gardant le même rôle de gris secondaire. */
  --gris:      #8A9096;
  --gris-300:  #C9CCCF;
  --gris-200:  #E3E5E6;
  --gris-100:  #F2F2F0;
  --blanc:     #FFFFFF;

  /* Sémantique */
  --bg:            var(--blanc);
  --bg-alt:        var(--gris-100);
  --texte:         #1B1D20;
  --texte-doux:    #55595E;
  --bordure:       var(--gris-200);
  --focus:         var(--rouge);

  /* Espacement */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10: 128px;

  /* Typo */
  --titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --corps: 'Barlow', system-ui, -apple-system, sans-serif;

  /* Divers */
  --contenu: 1240px;
  --etroit: 760px;
  --transition: 220ms cubic-bezier(.4, 0, .2, 1);
  --ombre: 0 1px 2px rgba(14,15,17,.06), 0 8px 24px rgba(14,15,17,.08);
  --ombre-forte: 0 2px 4px rgba(14,15,17,.08), 0 18px 48px rgba(14,15,17,.14);
}

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }
h4 { font-size: 1.15rem; letter-spacing: 0.01em; }

p  { margin: 0 0 var(--e-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--rouge); text-underline-offset: 3px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--jaune); color: var(--noir); }

/* --- 3. Utilitaires ----------------------------------------------------- */
.contenu   { width: 100%; max-width: var(--contenu); margin-inline: auto; padding-inline: var(--e-5); }
.etroit    { max-width: var(--etroit); }
.section   { padding-block: clamp(var(--e-8), 9vw, var(--e-10)); }
.section--serre { padding-block: clamp(var(--e-7), 6vw, var(--e-9)); }
.sombre    { background: var(--noir); color: var(--gris-300); }
.sombre h1, .sombre h2, .sombre h3, .sombre h4 { color: var(--blanc); }
.claire    { background: var(--bg-alt); }
.centre    { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: var(--e-4); top: -80px; z-index: 200;
  background: var(--jaune); color: var(--noir); padding: var(--e-3) var(--e-5);
  font-family: var(--titre); font-weight: 700; text-transform: uppercase;
  transition: top var(--transition);
}
.lien-evitement:focus { top: var(--e-4); }

/* Bandes de danger jaune/noir — motif signature */
.hazard {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg, var(--jaune) 0 14px, var(--noir) 14px 28px
  );
}
.hazard--fin { height: 5px; }
.hazard--rouge {
  background: repeating-linear-gradient(
    -45deg, var(--rouge) 0 14px, var(--noir) 14px 28px
  );
}

/* Surtitre : barre rouge + label capitales */
.surtitre {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-family: var(--titre); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rouge-texte); margin-bottom: var(--e-4);
}
.surtitre::before {
  content: ''; width: 34px; height: 3px; background: var(--rouge); flex: none;
}
.sombre .surtitre { color: var(--jaune); }
.sombre .surtitre::before { background: var(--jaune); }

.chapo {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55; color: var(--texte-doux); max-width: 62ch;
}
.sombre .chapo { color: var(--gris-300); }

/* --- 4. Boutons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 52px; padding: var(--e-3) var(--e-6);
  font-family: var(--titre); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--rouge  { background: var(--rouge); color: var(--blanc); }
.btn--rouge:hover  { background: var(--rouge-fonce); }
.btn--jaune  { background: var(--jaune); color: var(--noir); }
.btn--jaune:hover  { background: var(--jaune-fonce); }
.btn--contour { background: transparent; color: var(--texte); border-color: currentColor; }
.btn--contour:hover { background: var(--texte); color: var(--blanc); }
.sombre .btn--contour { color: var(--blanc); }
.sombre .btn--contour:hover { background: var(--blanc); color: var(--noir); }

.btn .fleche { transition: transform var(--transition); }
.btn:hover .fleche { transform: translateX(4px); }

.groupe-btn { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* --- 5. En-tête --------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14,15,17,.94);
  backdrop-filter: blur(10px);
  transition: box-shadow var(--transition);
}
.entete.est-collee { box-shadow: 0 8px 32px rgba(0,0,0,.35); }

.entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4) var(--e-5); min-height: 76px; flex-wrap: wrap;
}

.logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.logo__image {
  height: 46px; width: auto; display: block;
  transition: opacity var(--transition);
}
.logo:hover .logo__image { opacity: .82; }
.logo--pied .logo__image { height: 54px; }

.nav { display: flex; align-items: center; gap: var(--e-5); }
.nav__liste { display: flex; align-items: center; gap: var(--e-5); list-style: none; margin: 0; padding: 0; }
.nav__lien {
  font-family: var(--titre); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris-300);
  text-decoration: none; padding: var(--e-2) 0; position: relative;
  transition: color var(--transition);
}
.nav__lien::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--jaune); transition: width var(--transition);
}
.nav__lien:hover, .nav__lien[aria-current="page"] { color: var(--blanc); }
.nav__lien:hover::after, .nav__lien[aria-current="page"]::after { width: 100%; }

.entete__cta { flex: none; }

/* --- 6. Héros ----------------------------------------------------------- */
.heros {
  position: relative; min-height: min(88vh, 860px);
  display: flex; align-items: flex-end;
  background: var(--noir); color: var(--blanc); overflow: hidden;
  padding-block: clamp(var(--e-8), 12vw, var(--e-10));
}
.heros__media { position: absolute; inset: 0; z-index: 0; }
.heros__media video,
.heros__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.heros__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* Voile allégé : sombre sous le texte à gauche, le décor reste bien visible à droite */
  background:
    linear-gradient(to top, rgba(14,15,17,.45) 0%, rgba(14,15,17,0) 34%),
    linear-gradient(to right, rgba(14,15,17,.88) 0%, rgba(14,15,17,.5) 36%, rgba(14,15,17,0) 64%);
}
.heros__contenu { position: relative; z-index: 2; width: 100%; }

/* Le héros est un fond sombre sans porter la classe .sombre : il lui faut
   explicitement le traitement clair, sinon le bouton contour et le surtitre
   restent en couleurs « fond blanc » et deviennent illisibles. */
.heros .surtitre { color: var(--jaune); }
.heros .surtitre::before { background: var(--jaune); }
.heros .btn--contour { color: var(--blanc); border-color: currentColor; }
.heros .btn--contour:hover { background: var(--blanc); color: var(--noir); }
.heros h1 { color: var(--blanc); max-width: 16ch; margin-bottom: var(--e-5); }
.heros h1 .accent { color: var(--jaune); }
.heros .chapo { color: rgba(255,255,255,.82); max-width: 54ch; margin-bottom: var(--e-6); }

/* Scène animée de secours (si aucune vidéo n'est fournie) */
.scene {
  position: absolute; inset: 0; background:
    radial-gradient(120% 100% at 78% 92%, #6a5a48 0%, #3a3633 40%, #18191c 76%, #0E0F11 100%);
  overflow: hidden;
}
/* Chaque strate = une crête claire (le fond) + la masse de roche (::after, décalée de quelques px) */
.scene__strate {
  --roche: #3a3a3f; --crete: rgba(255,199,44,.55);
  position: absolute; left: -5%; width: 110%; background: var(--crete);
  clip-path: polygon(0 42%, 12% 30%, 26% 38%, 41% 22%, 58% 33%, 72% 18%, 86% 30%, 100% 20%, 100% 100%, 0 100%);
}
.scene__strate::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 4px; background: var(--roche);
  clip-path: inherit;
}
.scene__strate--1 { bottom: -2%;  height: 66%; --roche: #3d3d44; --crete: rgba(255,199,44,.5); }
.scene__strate--2 { bottom: -8%;  height: 50%; --roche: #57504a; --crete: rgba(255,199,44,.75); }
.scene__strate--3 { bottom: -14%; height: 36%; --roche: #7d6b56; --crete: #FFC72C; }
.scene__poussiere {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 74% 72%, rgba(255,199,44,.32) 0%, transparent 44%),
              radial-gradient(circle at 88% 92%, rgba(216,35,42,.24) 0%, transparent 40%),
              radial-gradient(circle at 30% 96%, rgba(255,255,255,.08) 0%, transparent 34%);
}
.scene__trou {
  position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(to bottom, rgba(255,199,44,.9), rgba(255,199,44,0));
  transform-origin: bottom center;
}

/* Écusson 50 ans — grand, à droite du texte */
.heros__grille {
  display: grid; grid-template-columns: minmax(0, 640px) auto; justify-content: start;
  gap: clamp(var(--e-6), 3.4vw, var(--e-7)); align-items: center;
}
.sceau { width: clamp(300px, 36vw, 500px); aspect-ratio: 1; flex: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
.sceau svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sceau__arc {
  font-family: var(--titre); font-weight: 700; font-size: 25px; letter-spacing: 3px; fill: var(--noir);
}
.sceau__nombre {
  font-family: var(--titre); font-weight: 700; font-size: 150px; letter-spacing: -2px; fill: var(--jaune);
}
.sceau__mot {
  font-family: var(--titre); font-weight: 700; font-size: 30px; letter-spacing: 12px; fill: #FFFFFF;
}
.sceau__ruban {
  font-family: var(--titre); font-weight: 700; font-size: 30px; letter-spacing: 3px; fill: #FFFFFF;
}
@media (max-width: 900px) {
  .heros__grille { grid-template-columns: 1fr; gap: var(--e-6); }
  .sceau { width: min(300px, 72vw); }
}
@keyframes tourne { to { transform: rotate(360deg); } }

.heros__pied {
  display: flex; align-items: center; gap: var(--e-6);
  flex-wrap: wrap; margin-top: var(--e-7);
  padding-top: var(--e-5); border-top: 1px solid rgba(255,255,255,.14);
}
.heros__fait { display: flex; flex-direction: column; }
.heros__fait dt {
  font-family: var(--titre); font-weight: 600; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--jaune); margin-bottom: 2px;
}
.heros__fait dd { margin: 0; font-size: 1.02rem; color: rgba(255,255,255,.9); }

.defilement {
  position: absolute; right: var(--e-5); bottom: var(--e-5); z-index: 3;
  display: flex; align-items: center; gap: var(--e-2);
  font-family: var(--titre); font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.55); text-decoration: none;
}
.defilement__ligne {
  display: block; width: 1px; height: 42px; background: rgba(255,255,255,.3); position: relative; overflow: hidden;
}
.defilement__ligne::after {
  content: ''; position: absolute; inset: 0; background: var(--jaune);
  animation: descend 2.2s ease-in-out infinite;
}
@keyframes descend {
  0%   { transform: translateY(-100%); }
  60%,100% { transform: translateY(100%); }
}

/* --- 7. Bandeau défilant ------------------------------------------------ */
.bandeau {
  background: var(--jaune); color: var(--noir); overflow: hidden;
  padding-block: var(--e-3); border-block: 3px solid var(--noir);
}
.bandeau__piste { display: flex; width: max-content; animation: glisse 38s linear infinite; }
.bandeau__groupe { display: flex; align-items: center; gap: var(--e-6); padding-right: var(--e-6); }
.bandeau__item {
  font-family: var(--titre); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.bandeau__sep { width: 9px; height: 9px; background: var(--rouge); transform: rotate(45deg); flex: none; }
@keyframes glisse { to { transform: translateX(-50%); } }
.bandeau:hover .bandeau__piste { animation-play-state: paused; }

/* --- 8. Grilles & cartes ------------------------------------------------ */
.grille { display: grid; gap: var(--e-5); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.duo {
  display: grid; gap: clamp(var(--e-6), 5vw, var(--e-9));
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: center;
}

.carte {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: 2px;
  padding: var(--e-6); position: relative;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px;
  background: var(--jaune); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--gris-300); }
.carte:hover::before { transform: scaleX(1); }
.carte__icone {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--noir); color: var(--jaune); border-radius: 2px; margin-bottom: var(--e-4);
}
.carte h3 { margin-bottom: var(--e-3); }
.carte p { color: var(--texte-doux); font-size: 1rem; margin-bottom: 0; }
.carte__liste { list-style: none; margin: var(--e-4) 0 0; padding: 0; }
.carte__liste li {
  position: relative; padding-left: var(--e-5); margin-bottom: var(--e-2);
  font-size: .97rem; color: var(--texte-doux);
}
.carte__liste li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; background: var(--rouge); transform: rotate(45deg);
}
.sombre .carte { background: var(--noir-800); border-color: var(--noir-600); }
.sombre .carte p, .sombre .carte__liste li { color: var(--gris-300); }
.sombre .carte__icone { background: var(--jaune); color: var(--noir); }

/* --- 9. Chiffres clés --------------------------------------------------- */
.chiffre { border-top: 4px solid var(--jaune); padding-top: var(--e-4); }
.chiffre__val {
  font-family: var(--titre); font-weight: 700; font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  line-height: .92; letter-spacing: -0.02em; display: block;
}
.chiffre__unite { color: var(--rouge); }
.chiffre__lib {
  font-family: var(--titre); font-weight: 600; font-size: .88rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux);
  margin-top: var(--e-2); display: block;
}
.sombre .chiffre__lib { color: var(--gris); }
.sombre .chiffre__unite { color: var(--jaune); }

/* --- 10. Étapes du processus ------------------------------------------- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: etape; }
.etape {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--e-5);
  padding: var(--e-6) 0; border-top: 1px solid var(--bordure); position: relative;
}
.etape:last-child { border-bottom: 1px solid var(--bordure); }
.sombre .etape { border-color: var(--noir-600); }
.etape__num {
  counter-increment: etape;
  font-family: var(--titre); font-weight: 700; font-size: 3rem; line-height: .9;
  color: var(--gris-300); transition: color var(--transition);
}
.sombre .etape__num { color: var(--noir-600); }
.etape__num::before { content: counter(etape, decimal-leading-zero); }
.etape:hover .etape__num { color: var(--rouge); }
.sombre .etape:hover .etape__num { color: var(--jaune); }
.etape h3 { margin-bottom: var(--e-2); }
.etape p { color: var(--texte-doux); margin-bottom: 0; max-width: 68ch; }
.sombre .etape p { color: var(--gris-300); }
.etape__meta {
  display: inline-flex; align-items: center; gap: var(--e-2); margin-top: var(--e-3);
  font-family: var(--titre); font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rouge);
}
.sombre .etape__meta { color: var(--jaune); }

/* --- 11. Frise 50 ans --------------------------------------------------- */
.frise { position: relative; padding-left: var(--e-6); }
.frise__rail {
  position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--noir-600);
}
.frise__progression {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--jaune);
  transform-origin: top;
}
.frise__jalon { position: relative; padding-bottom: var(--e-7); }
.frise__jalon:last-child { padding-bottom: 0; }
.frise__point {
  position: absolute; left: calc(-1 * var(--e-6) + 1px); top: 6px;
  width: 15px; height: 15px; background: var(--noir); border: 3px solid var(--jaune);
  border-radius: 50%; z-index: 2;
}
.frise__point { transition: background 300ms ease, box-shadow 300ms ease; }
.frise__jalon.est-atteint .frise__point { background: var(--jaune); box-shadow: 0 0 0 6px rgba(255,199,44,.18); }
.frise__an {
  font-family: var(--titre); font-weight: 700; font-size: 1.9rem; line-height: 1;
  color: var(--jaune); display: block; margin-bottom: var(--e-2);
}
.frise__jalon h3 { font-size: 1.3rem; margin-bottom: var(--e-2); }
.frise__jalon p { color: var(--gris-300); font-size: 1rem; margin: 0; max-width: 58ch; }

/* --- 12. Signaux sonores (page voisinage) ------------------------------ */
.signaux { display: grid; gap: var(--e-4); margin: var(--e-6) 0 0; padding: 0; list-style: none; }
.signal {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-5); align-items: start;
  padding: var(--e-5); background: var(--blanc); border: 1px solid var(--bordure);
  border-left: 5px solid var(--jaune); border-radius: 2px;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.signal.est-actif {
  border-left-color: var(--rouge); box-shadow: var(--ombre-forte);
  background: var(--rouge-pale);
}
.signal--detonation { border-left-color: var(--rouge); }
.signal--fin { border-left-color: #2E7D32; }
/* Le motif doit pouvoir aligner jusqu'à cinq coups longs sans déborder. */
.signal__motif {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--e-1); min-width: 164px; padding-top: 4px;
}
.impulsion { height: 19px; background: var(--noir); border-radius: 2px; flex: none; }
.impulsion--court { width: 9px; }
.impulsion--long  { width: 38px; }
.signal.est-actif .impulsion { background: var(--rouge); }
.signal__titre {
  font-family: var(--titre); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; margin: 0 0 var(--e-1); letter-spacing: .01em;
}
.signal__quand {
  font-family: var(--titre); font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rouge); display: block; margin-bottom: var(--e-2);
}
.signal p { font-size: 1rem; color: var(--texte-doux); margin: 0; }

.lecteur {
  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
  padding: var(--e-5); background: var(--noir); border-radius: 2px; margin-top: var(--e-5);
}
.lecteur p {
  margin: 0; font-size: .95rem; color: var(--gris-300); flex: 1 1 260px;
}
.lecteur__etat {
  font-family: var(--titre); letter-spacing: .12em; text-transform: uppercase;
  font-size: .82rem; color: var(--jaune);
}

/* --- 13. Capteur / vibrations ------------------------------------------ */
.jauge {
  --pct: 18%;
  position: relative; height: 46px; background: var(--gris-100);
  border: 1px solid var(--bordure); border-radius: 2px; overflow: hidden; margin: var(--e-5) 0 var(--e-3);
}
.jauge__zone { position: absolute; top: 0; bottom: 0; }
.jauge__zone--ok    { left: 0;   width: 60%; background: rgba(46,125,50,.14); }
.jauge__zone--seuil { left: 60%; width: 22%; background: rgba(255,199,44,.30); }
.jauge__zone--haut  { left: 82%; width: 18%; background: rgba(216,35,42,.18); }
.jauge__curseur {
  position: absolute; top: -6px; bottom: -6px; left: var(--pct); width: 4px;
  background: var(--noir); z-index: 3;
}
.jauge__curseur::after {
  content: attr(data-val); position: absolute; top: -26px; left: 50%;
  transform: translateX(-50%); background: var(--noir); color: var(--blanc);
  font-family: var(--titre); font-size: .78rem; letter-spacing: .08em;
  padding: 2px 7px; white-space: nowrap; border-radius: 2px;
}
.jauge__legende {
  display: flex; justify-content: space-between; font-family: var(--titre);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux);
}
/* La jauge peut vivre dans une carte sur fond noir : la légende doit suivre. */
.sombre .jauge__legende { color: var(--gris-300); }

/* --- 14. FAQ ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--bordure); }
.faq__item { border-bottom: 1px solid var(--bordure); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5) 0; cursor: pointer; list-style: none;
  font-family: var(--titre); font-weight: 600; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: .01em;
  transition: color var(--transition);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--rouge); }
.faq__item summary::after {
  content: ''; flex: none; width: 15px; height: 15px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--transition);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-5px, -5px); }
.faq__reponse { padding: 0 0 var(--e-5); max-width: 72ch; color: var(--texte-doux); }
.faq__reponse p:last-child { margin-bottom: 0; }

/* --- 15. Chantiers / blog ---------------------------------------------- */
.chantiers { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.chantier {
  display: flex; flex-direction: column; background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: 2px; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.chantier:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); }
.chantier__visuel {
  position: relative; aspect-ratio: 16 / 10; background: var(--noir); overflow: hidden;
}
.chantier__visuel img, .chantier__visuel svg { width: 100%; height: 100%; object-fit: cover; }
.chantier__etiquette {
  position: absolute; left: 0; top: var(--e-4);
  background: var(--jaune); color: var(--noir); padding: 5px var(--e-4);
  font-family: var(--titre); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; z-index: 2;
}
.chantier__corps { padding: var(--e-5); display: flex; flex-direction: column; flex: 1; }
.chantier__meta {
  display: flex; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-3);
  font-family: var(--titre); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-doux);
}
.chantier h3 { font-size: 1.4rem; margin-bottom: var(--e-3); }
.chantier h3 a { text-decoration: none; background-image: linear-gradient(var(--jaune), var(--jaune));
  background-size: 0 100%; background-repeat: no-repeat; transition: background-size var(--transition);
  box-decoration-break: clone; }
.chantier:hover h3 a { background-size: 100% 100%; }
.chantier p { font-size: 1rem; color: var(--texte-doux); flex: 1; }
.chantier__lien {
  display: inline-flex; align-items: center; gap: var(--e-2); margin-top: var(--e-4);
  font-family: var(--titre); font-weight: 700; font-size: .92rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rouge); text-decoration: none;
}
.chantier__lien .fleche { transition: transform var(--transition); }
.chantier:hover .chantier__lien .fleche { transform: translateX(5px); }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-7); }
.filtre {
  padding: var(--e-2) var(--e-4); background: transparent;
  border: 2px solid var(--bordure); border-radius: 2px; cursor: pointer;
  font-family: var(--titre); font-weight: 600; font-size: .92rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux);
  transition: all var(--transition); min-height: 44px;
}
.filtre:hover { border-color: var(--noir); color: var(--texte); }
.filtre[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: var(--jaune); }

/* Article */
.article { max-width: var(--etroit); margin-inline: auto; }
.article h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: var(--e-7); }
.article ul { padding-left: var(--e-5); }
.article li { margin-bottom: var(--e-2); }
.fiche {
  background: var(--gris-100); border-left: 5px solid var(--jaune);
  padding: var(--e-5); margin: var(--e-6) 0; border-radius: 2px;
}
.fiche dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--e-4); margin: 0; }
.fiche dt {
  font-family: var(--titre); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-doux); margin-bottom: 2px;
}
.fiche dd { margin: 0; font-weight: 600; }

/* --- 16. Encart QR / voisinage ----------------------------------------- */
.encart-qr {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-6); align-items: center;
  background: var(--jaune); color: var(--noir); padding: var(--e-6);
  border-radius: 2px; border: 3px solid var(--noir);
}
.encart-qr h3 { margin-bottom: var(--e-2); }
.encart-qr p { margin-bottom: var(--e-4); max-width: 58ch; }
.encart-qr__cadre {
  width: 118px; height: 118px; background: var(--blanc); border: 3px solid var(--noir);
  display: grid; place-items: center; padding: var(--e-2); flex: none;
}

/* --- 17. Alerte / rassurance ------------------------------------------- */
.alerte {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-4);
  padding: var(--e-5); border-radius: 2px; border: 1px solid var(--bordure);
  background: var(--blanc); align-items: start;
}
.alerte--info   { border-left: 5px solid var(--jaune); background: var(--jaune-pale); }
.alerte--urgent { border-left: 5px solid var(--rouge); background: var(--rouge-pale); }
.alerte__icone { color: var(--noir); flex: none; }
.alerte h4 { margin-bottom: var(--e-2); }
.alerte p { margin: 0; font-size: 1rem; }

/* --- 18. Contact -------------------------------------------------------- */
.contact-bloc { display: grid; gap: var(--e-4); }
.contact-item {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--e-4); align-items: start;
  padding: var(--e-4) 0; border-bottom: 1px solid var(--noir-600);
}
.contact-item:last-child { border-bottom: 0; }
.contact-item__icone { color: var(--jaune); }
.contact-item dt {
  font-family: var(--titre); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gris); margin-bottom: 2px;
}
.contact-item dd { margin: 0; font-size: 1.15rem; color: var(--blanc); }
.contact-item dd a { text-decoration: none; }
.contact-item dd a:hover { color: var(--jaune); }

.formulaire { display: grid; gap: var(--e-4); }
.champ { display: grid; gap: var(--e-2); }
.champ label {
  font-family: var(--titre); font-weight: 600; font-size: .88rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.champ input, .champ select, .champ textarea {
  font-family: var(--corps); font-size: 1rem; padding: var(--e-3) var(--e-4);
  border: 2px solid var(--bordure); border-radius: 2px; background: var(--blanc);
  min-height: 50px; color: var(--texte); transition: border-color var(--transition);
}
.champ textarea { min-height: 148px; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--gris-300); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--rouge); outline: none; }
.champ__aide { font-size: .88rem; color: var(--texte-doux); }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }

/* --- 19. Pied de page --------------------------------------------------- */
.pied { background: var(--noir); color: var(--gris-300); padding-block: var(--e-8) var(--e-5); }
.pied__grille {
  display: grid; gap: var(--e-6);
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(170px, 1fr));
  padding-bottom: var(--e-7); border-bottom: 1px solid var(--noir-700);
}
.pied h4 {
  color: var(--blanc); font-size: .88rem; letter-spacing: .16em; margin-bottom: var(--e-4);
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: var(--e-2); }
.pied a { text-decoration: none; font-size: .98rem; transition: color var(--transition); }
.pied a:hover { color: var(--jaune); }
.pied__bas {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e-3);
  padding-top: var(--e-5); font-size: .88rem; color: var(--gris);
}
.pied__zone { font-size: .94rem; line-height: 1.7; color: var(--gris); }

/* --- 19b. Vidéos (façade : YouTube chargé au clic seulement) ------------ */
.videos { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.video {
  position: relative; aspect-ratio: 16 / 9; background: var(--noir-800);
  border: 1px solid var(--noir-600); border-radius: 2px; overflow: hidden;
  cursor: pointer; padding: 0; width: 100%; display: block; text-align: left;
  transition: transform var(--transition), border-color var(--transition);
}
.video:hover { transform: translateY(-4px); border-color: var(--jaune); }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__voile {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(14,15,17,.92) 0%, rgba(14,15,17,.25) 55%, rgba(14,15,17,.35) 100%);
  transition: background var(--transition);
}
.video:hover .video__voile { background: linear-gradient(to top, rgba(14,15,17,.94) 0%, rgba(14,15,17,.35) 55%, rgba(14,15,17,.45) 100%); }
.video__lecture {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%; background: var(--rouge);
  display: grid; place-items: center; color: var(--blanc);
  transition: transform var(--transition), background var(--transition);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.video:hover .video__lecture { transform: translate(-50%, -50%) scale(1.09); background: var(--jaune); color: var(--noir); }
.video__legende { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: var(--e-5); }
.video__titre {
  font-family: var(--titre); font-weight: 700; font-size: 1.3rem; text-transform: uppercase;
  color: var(--blanc); margin: 0 0 var(--e-1); line-height: 1.08;
}
.video__meta {
  font-family: var(--titre); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--jaune); margin: 0;
}
.video.est-lancee .video__voile,
.video.est-lancee .video__lecture,
.video.est-lancee .video__legende,
.video.est-lancee img { display: none; }

/* --- 20. Animations ----------------------------------------------------- */
/* Rien n'est masqué en CSS : c'est GSAP qui pose opacity:0 en inline au moment
   de créer le tween, puis le retire (clearProps).
   NE PAS réintroduire de règle du type `.anim { opacity: 0 }` : gsap.from() lit
   la valeur courante comme état d'arrivée, il animerait donc 0 → 0 et le contenu
   resterait invisible pour toujours. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .anim, .anim-enfants > * { opacity: 1 !important; transform: none !important; }
  .bandeau__piste, .sceau__anneau { animation: none !important; }
  .frise__point { background: var(--jaune); }
}

/* --- 21. Responsive ----------------------------------------------------- */
/* Pas de menu burger : la navigation reste visible et passe simplement
   sur une deuxième ligne quand la largeur ne suffit plus. */
@media (max-width: 1100px) {
  .entete__interieur { padding-block: var(--e-3); row-gap: var(--e-3); }
  .nav { order: 3; width: 100%; }
  .nav__liste {
    width: 100%; gap: var(--e-5);
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav__liste::-webkit-scrollbar { display: none; }
  .nav__lien { white-space: nowrap; }
}

/* Sous ~520 px, les colonnes du pied de page ne tiennent plus côte à côte :
   elles débordaient vers la droite et la page se décalait au défilement sur iPhone. */
@media (max-width: 520px) {
  .pied__grille { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .logo__image { height: 38px; }
  .entete__cta { font-size: .92rem; padding-inline: var(--e-4); }
  .nav__liste { gap: var(--e-4); }
  .nav__lien { font-size: .95rem; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .heros { min-height: auto; padding-block: var(--e-8); }
  .heros__pied { gap: var(--e-5); }
  .defilement { display: none; }
  .etape { grid-template-columns: 1fr; gap: var(--e-3); }
  .etape__num { font-size: 2.25rem; }
  .encart-qr { grid-template-columns: 1fr; }
  .signal { grid-template-columns: 1fr; gap: var(--e-3); }
  .champ--duo { grid-template-columns: 1fr; }
  .fiche dl { grid-template-columns: 1fr 1fr; }
  /* Cibles tactiles : les liens du pied ne faisaient que 19px de haut. */
  .pied li { margin-bottom: 0; }
  .pied li a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media print {
  .entete, .pied, .defilement, .bandeau, .lecteur { display: none; }
  body { font-size: 12pt; color: #000; }
  .anim, .anim-enfants > * { opacity: 1 !important; }
}

/* --- 23. Photos de chantier ----------------------------------------------
   Le client a demandé moins de texte et plus d'images : les explications
   s'appuient désormais sur les photos de ses propres chantiers.
   ------------------------------------------------------------------------ */
.photo { margin: 0; border-radius: 2px; overflow: hidden; background: var(--noir-800); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Une fiche prestation peut montrer une vidéo plutôt qu'une photo. */
.photo video { width: 100%; height: auto; display: block; background: var(--noir); }
.photo figcaption {
  font-family: var(--titre); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-doux); padding: var(--e-2) 0 0; background: var(--bg);
}

/* Cartes avec photo en tête */
.carte--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
.carte--photo:hover .carte__photo { transform: scale(1.04); }
.carte__corps { padding: var(--e-5); }
.carte--photo h3 { font-size: 1.3rem; margin-bottom: var(--e-2); }
/* Le titre renvoie vers sa fiche ; son ::after couvre la carte, qui devient cliquable. */
.carte--photo h3 a { color: inherit; text-decoration: none; }
.carte--photo h3 a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.carte--photo:hover h3 a { color: var(--rouge); }
.carte--photo::before { z-index: 2; }

/* Méthode : grand titre, puis quatre étapes en affiches (texte posé sur la photo) */
.titre-xl { font-size: clamp(2.75rem, 7vw, 5.75rem); line-height: .95; margin: 0; }
.methode__tete {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--e-6) var(--e-8); align-items: end; margin-bottom: var(--e-8);
}
.methode__tete .surtitre { font-size: 1rem; }
.methode__intro {
  margin: 0; color: var(--gris-300); font-size: 1.1rem; max-width: 42ch;
  padding-left: var(--e-5); border-left: 3px solid var(--jaune);
}
.procede {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-5); grid-template-columns: repeat(2, minmax(0, 1fr));
}
.procede__etape {
  display: grid; grid-template-columns: minmax(150px, 38%) 1fr; min-height: 230px;
  background: var(--noir-800); border: 1px solid var(--noir-600); border-radius: 2px; overflow: hidden;
  transition: border-color var(--transition);
}
.procede__etape:hover { border-color: var(--jaune); }
.procede__photo { position: relative; overflow: hidden; }
.procede__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.procede__etape:hover .procede__photo img { transform: scale(1.06); }
.procede__texte { padding: var(--e-6); display: flex; flex-direction: column; justify-content: center; }
.procede__num {
  font-family: var(--titre); font-weight: 700; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--jaune); margin-bottom: var(--e-3); display: flex; align-items: center; gap: var(--e-3);
}
.procede__num::after { content: ""; flex: 1; max-width: 48px; height: 2px; background: var(--rouge); }
.procede__num span { color: var(--gris-300); opacity: .6; margin-left: -.5em; }
.procede h3 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1; margin: 0 0 var(--e-3); color: var(--blanc); }
.procede p { color: var(--gris-300); font-size: 1rem; line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
  .procede { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .methode__tete { grid-template-columns: 1fr; margin-bottom: var(--e-6); }
  .procede__etape { grid-template-columns: 34% 1fr; min-height: 170px; }
  .procede__texte { padding: var(--e-4); }
  .procede h3 { font-size: 1.5rem; margin-bottom: var(--e-2); }
  .procede p { font-size: .92rem; }
}

/* En images : carrousel centré — une grande photo, les voisines en retrait */
.galerie { overflow: hidden; }
.galerie__tete { text-align: center; margin-bottom: var(--e-7); }
.galerie__tete .surtitre { justify-content: center; }
.galerie__tete h2 { margin: 0; }
.galerie__scene { position: relative; overflow-x: auto; outline: none; }
.galerie__scene:focus-visible { box-shadow: inset 0 0 0 2px var(--jaune); }
.galerie__piste {
  list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-5); width: max-content;
}
.galerie__diapo { width: min(780px, 78vw); flex: none; }
.galerie__diapo figure {
  margin: 0; position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; background: var(--noir-800);
}
.galerie__diapo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie__diapo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--e-8) var(--e-6) var(--e-5);
  background: linear-gradient(to top, rgba(14,15,17,.9), rgba(14,15,17,0));
  font-family: var(--titre); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.75rem); text-transform: uppercase;
  color: var(--blanc); display: flex; gap: var(--e-4); align-items: baseline;
}
.galerie__diapo figcaption span { color: var(--jaune); font-size: .7em; letter-spacing: .12em; }

/* Mode carrousel, activé par le script */
.galerie--active .galerie__scene { overflow: hidden; touch-action: pan-y; }
.galerie--active .galerie__piste { transition: transform 900ms cubic-bezier(.65,0,.25,1); will-change: transform; }
.galerie--active .galerie__diapo {
  opacity: .35; transform: scale(.86); transition: opacity 900ms ease, transform 900ms cubic-bezier(.65,0,.25,1);
  cursor: pointer;
}
.galerie--active .galerie__diapo.est-active { opacity: 1; transform: none; cursor: default; }
.galerie__diapo figcaption { transition: opacity 500ms ease 300ms; }
.galerie--active .galerie__diapo:not(.est-active) figcaption { opacity: 0; transition-delay: 0ms; }

.galerie__fleche {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 56px; height: 56px; place-items: center; cursor: pointer; border-radius: 50%;
  background: var(--jaune); color: var(--noir); border: 0; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform var(--transition), background var(--transition);
}
.galerie--active .galerie__fleche { display: grid; }
.galerie__fleche:hover { background: var(--blanc); }
.galerie__fleche--prec { left: calc(50% - min(390px, 39vw) - 28px); }
.galerie__fleche--suiv { right: calc(50% - min(390px, 39vw) - 28px); }

.galerie__points { display: none; justify-content: center; gap: var(--e-2); margin-top: var(--e-6); }
.galerie--active .galerie__points { display: flex; }
.galerie__point {
  width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center;
}
.galerie__point span { display: block; height: 3px; background: var(--noir-600); position: relative; overflow: hidden; }
.galerie__point span::after {
  content: ""; position: absolute; inset: 0; background: var(--jaune); transform: scaleX(0); transform-origin: left;
}
.galerie__point.est-vu span::after { transform: scaleX(1); }
.galerie__point.est-actif span::after { transform: scaleX(1); }
.galerie--auto .galerie__point.est-actif span::after { animation: galerie-temps var(--galerie-duree, 5s) linear both; }
.galerie--pause .galerie__point.est-actif span::after { animation-play-state: paused; }
@keyframes galerie-temps { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 760px) {
  .galerie__diapo { width: 84vw; }
  .galerie__fleche { width: 42px; height: 42px; }
  .galerie__fleche--prec { left: var(--e-2); }
  .galerie__fleche--suiv { right: var(--e-2); }
  .galerie__point { width: 26px; }
}

/* Petit carrousel de vidéos verticales (fiche « milieu confiné ») */
.mini-carrousel { position: relative; max-width: 340px; margin-inline: auto; overflow: hidden; }
.mini-carrousel__piste { display: flex; transition: transform 500ms cubic-bezier(.65, 0, .25, 1); }
.mini-carrousel__vue { margin: 0; flex: 0 0 100%; min-width: 0; }
.mini-carrousel__vue video,
.mini-carrousel__vue img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  background: var(--noir); border-radius: 2px;
}
.mini-carrousel__vue figcaption {
  font-family: var(--titre); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-doux); padding: var(--e-2) 0 0;
}
.mini-carrousel__fleche {
  position: absolute; top: 46%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--jaune); color: var(--noir);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: background var(--transition);
}
.mini-carrousel__fleche:hover { background: var(--blanc); }
.mini-carrousel__fleche--prec { left: var(--e-2); }
.mini-carrousel__fleche--suiv { right: var(--e-2); }
.mini-carrousel__points { display: flex; justify-content: center; gap: var(--e-2); margin-top: var(--e-3); }
.mini-carrousel__points span { width: 28px; height: 3px; background: var(--bordure); }
.mini-carrousel__points span.est-actif { background: var(--jaune); }

/* Vidéo verticale d'un vrai tir */
.video-tir { margin: 0; max-width: 340px; border-radius: 2px; overflow: hidden; background: var(--noir); }
.video-tir video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.video-tir figcaption {
  font-family: var(--titre); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-300); padding: var(--e-3) var(--e-4);
}

/* Protection de la maison : quatre lignes numérotées */
.etapes-courtes { margin: 0 0 var(--e-6); padding-left: 1.4em; }
.etapes-courtes li { margin-bottom: var(--e-3); color: var(--gris-300); }
.etapes-courtes li::marker { color: var(--jaune); font-family: var(--titre); font-weight: 700; }
.sombre .etapes-courtes b { color: var(--blanc); }

/* Photo d'équipe : cadrage paysage, sinon elle écrase la frise voisine */
#cinquante .photo img { aspect-ratio: 4 / 3; }

/* =========================================================================
   24. Adaptation WordPress / Elementor
   Tout ce qui précède est la feuille de la maquette, reprise telle quelle.
   Ce bloc ne fait que la brancher sur le balisage d'Elementor :
   - les classes de la maquette sont posées sur les conteneurs et widgets
     (champ « Classes CSS » de l'onglet Avancé) ;
   - les réglages par défaut d'Elementor sont neutralisés quand ils gênent.
   Le client peut toujours surcharger un bloc depuis l'éditeur : les réglages
   faits dans Elementor passent devant ces règles.
   ========================================================================= */

/* --- 24.1 Conteneurs : Elementor les met en colonne ; la maquette en ligne */
.e-con.heros,
.e-con.groupe-btn,
.e-con.entete__interieur { flex-direction: row; }
.e-con.groupe-btn > .elementor-element { flex: none; width: auto; }
/* Elementor limite chaque widget à 100 % de large : on rend aux blocs de texte
   la largeur de colonne de la maquette (1240 px, ou 760 px pour .etroit). */
.elementor.elementor .e-con > .elementor-widget.contenu { max-width: var(--contenu); }
.elementor.elementor .e-con > .elementor-widget.etroit { max-width: var(--etroit); }
.elementor.elementor .e-con > .elementor-widget.mini-carrousel { max-width: 340px; margin-inline: auto; }
/* Sur mobile, Elementor fait « passer à la ligne » tous ses conteneurs : leurs
   blocs ne s'étirent alors plus en largeur. La maquette n'en veut pas. */
.e-con { --flex-wrap-mobile: nowrap; }

/* Elementor remet à zéro la marge basse de chaque widget (.e-con .elementor-widget) :
   on rend aux blocs de la maquette celles qu'ils portaient. */
.elementor .elementor-widget.mb-6 { margin-block-end: var(--e-6); }
.elementor .elementor-widget.mb-7,
.elementor .elementor-widget.galerie__tete,
.elementor .elementor-widget.filtres { margin-block-end: var(--e-7); }
.elementor .elementor-widget.my-7 { margin-block: var(--e-7); }
.elementor .elementor-widget.fiche { margin-block: var(--e-6); }
/* Dans la maquette, les marges de deux blocs voisins se confondaient (on garde la
   plus grande) ; entre deux widgets Elementor elles s'additionneraient. On retire
   donc la marge basse du dernier élément d'un bloc de texte suivi d'un autre bloc.
   :where() garde cette règle très faible : une marge voulue (classe) l'emporte. */
:where(.elementor-widget-text-editor:not(:last-child)) > :last-child { margin-bottom: 0; }
:where(.elementor-widget-text-editor:not(:last-child)) > .etapes-courtes:last-child > li:last-child { margin-bottom: 0; }
.carte--contact .contact-bloc { margin-top: 0; }

/* Dans la maquette, la marge du dernier titre se confondait avec celle du bloc ;
   un widget Elementor l'empêche (il isole ses marges) : on la retire ici. */
.elementor-widget.mb-6 > :last-child,
.elementor-widget.mb-7 > :last-child { margin-bottom: 0; }
/* Un surtitre seul dans son bloc garde l'espace qui le sépare du titre. */
.elementor-widget-text-editor .surtitre:last-child { margin-bottom: var(--e-4); }

/* Éléments décoratifs positionnés par rapport à la section, pas au widget. */
.elementor-widget.defilement-bloc,
.elementor-widget.sceau-bloc { position: static; }
.elementor-widget.heros__media { position: absolute; inset: 0; z-index: 0; }
.elementor-widget.heros__media .scene { position: absolute; inset: 0; }

/* Petits utilitaires qui remplacent les styles en ligne de la maquette. */
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.my-7 { margin-block: var(--e-7); }
.mt-6 { margin-top: var(--e-6); }
.mt-7 { margin-top: var(--e-7); }
.mb-6 { margin-bottom: var(--e-6); }
.mb-7 { margin-bottom: var(--e-7); }
.pb-9 { padding-bottom: var(--e-9); }
.fond-800 { background: var(--noir-800); }
.aligne-haut { align-items: start; }
.justifie-centre { justify-content: center; }
.soi-centre { justify-self: center; }

/* --- 24.2 Liens : Elementor retire tous les soulignements --------------- */
.elementor .elementor-widget-text-editor p a:not(.btn),
.elementor .elementor-tab-content a,
.elementor .alerte a {
  text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: 3px;
}
.elementor .pied a,
.elementor .pied__bas a,
.elementor .contact-item a { text-decoration: none; }

/* --- 24.3 Flèches des boutons (dessinées en CSS : l'éditeur de texte
   supprimerait les petits SVG glissés dans les liens) ------------------- */
.btn--fleche::after,
.chantier__lien::after {
  content: ''; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition);
}
.btn--fleche:hover::after { transform: translateX(4px); }
.chantier__lien::after { width: 16px; height: 16px; }
.chantier:hover .chantier__lien::after { transform: translateX(5px); }

/* --- 24.4 Images (widget Image d'Elementor) ----------------------------- */
.elementor .photo img,
.elementor .procede__photo img { height: 100%; }
.carte__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elementor .carte__photo img { height: 100%; }
.carte--photo { overflow: hidden; }
/* Elementor pose « position: relative » sur chaque widget. L'ombre du lien du
   titre (son ::after, qui rend la carte cliquable) restait donc enfermée dans le
   bloc de texte : la photo ne renvoyait nulle part. On rend le bloc statique
   pour que l'ombre se cale sur la carte entière, photo comprise. */
.elementor .carte--photo .carte__corps { position: static; }
.photo figure { margin: 0; }
.photo figcaption.widget-image-caption { text-align: left; margin: 0; }
.photo--legende-sombre figcaption { background: var(--noir); color: var(--gris-300); }
#cinquante .photo img { aspect-ratio: 4 / 3; }

/* Logo (widget Image avec lien vers l'accueil) */
.logo a { display: flex; align-items: center; }
.logo img, .elementor .logo img { height: 46px; width: auto; display: block; transition: opacity var(--transition); }
.logo a:hover img { opacity: .82; }
.logo--pied img, .elementor .logo--pied img { height: 54px; }

/* --- 24.5 En-tête (modèle Xpro) ------------------------------------------ */
.entete::after {
  content: ''; display: block; height: 5px;
  background: repeating-linear-gradient(-45deg, var(--jaune) 0 14px, var(--noir) 14px 28px);
}
.entete { width: 100%; }
.nav .elementor-shortcode,
.nav .nav__boite { display: contents; }
.nav__liste li { margin: 0; }
/* Xpro rend l'en-tête dans son propre bloc : c'est lui qui doit coller en haut. */
.xpro-theme-builder-header,
#xpro-theme-builder-header { position: sticky; top: 0; z-index: 100; }
.admin-bar .xpro-theme-builder-header,
.admin-bar #xpro-theme-builder-header { top: 32px; }

/* --- 24.6 Pied de page (modèle Xpro) ------------------------------------- */
.e-con.pied { position: relative; }
.e-con.pied::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--jaune) 0 14px, var(--noir) 14px 28px);
}
.pied__zone strong { color: var(--blanc); }

/* --- 24.7 Frise : rail, progression et points posés par le script ;
   sans script, un rail plein et des points pleins les remplacent ---------- */
.frise:not(.frise--js)::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--jaune);
}
.frise:not(.frise--js) .frise__jalon::before {
  content: ''; position: absolute; left: calc(-1 * var(--e-6) + 1px); top: 6px;
  width: 15px; height: 15px; background: var(--jaune); border: 3px solid var(--jaune); border-radius: 50%;
}

/* --- 24.8 FAQ : widget « Accordéon » (toggle) d'Elementor ---------------- */
.faq.faq .elementor-toggle-item { border-bottom: 1px solid var(--bordure); margin: 0; }
.faq.faq .elementor-toggle .elementor-tab-title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5) 0; margin: 0; border: 0; cursor: pointer; line-height: 1.65;
  font-family: var(--titre); font-weight: 600; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: .01em; color: var(--texte);
  transition: color var(--transition);
}
.faq.faq .elementor-toggle .elementor-tab-title:hover { color: var(--rouge); }
.faq.faq .elementor-toggle .elementor-toggle-title { color: inherit; font: inherit; text-decoration: none; }
.faq.faq .elementor-toggle .elementor-toggle-icon { display: none; }
.faq.faq .elementor-toggle .elementor-tab-title::after {
  content: ''; flex: none; width: 15px; height: 15px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--transition);
}
.faq.faq .elementor-toggle .elementor-tab-title.elementor-active::after { transform: rotate(-135deg) translate(-5px, -5px); }
.faq.faq .elementor-toggle .elementor-tab-content {
  padding: 0 0 var(--e-5); border: 0; max-width: 72ch; color: var(--texte-doux);
  font-size: inherit; line-height: inherit;
}
.faq.faq .elementor-toggle .elementor-tab-content p:last-child { margin-bottom: 0; }

/* --- 24.9 Formulaire de contact (WPForms, styles d'origine désactivés) --- */
.formulaire-wp .wpforms-container { margin: 0; }
.formulaire-wp .wpforms-field-container {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4);
}
.formulaire-wp .wpforms-field { display: grid; gap: var(--e-2); padding: 0; grid-column: 1 / -1; align-content: start; }
.formulaire-wp .wpforms-field.wpforms-one-half { grid-column: auto / span 1; }
.formulaire-wp .wpforms-field-label {
  font-family: var(--titre); font-weight: 600; font-size: .88rem;
  letter-spacing: .12em; text-transform: uppercase; margin: 0; color: var(--texte);
}
.formulaire-wp .wpforms-required-label { color: inherit; font-weight: 600; }
.formulaire-wp input[type=text], .formulaire-wp input[type=email], .formulaire-wp input[type=tel],
.formulaire-wp select, .formulaire-wp textarea {
  width: 100%; max-width: none;
  font-family: var(--corps); font-size: 1rem; padding: var(--e-3) var(--e-4);
  border: 2px solid var(--bordure); border-radius: 2px; background: var(--blanc);
  min-height: 50px; color: var(--texte); transition: border-color var(--transition);
}
.formulaire-wp textarea { min-height: 148px; resize: vertical; }
.formulaire-wp input:hover, .formulaire-wp select:hover, .formulaire-wp textarea:hover { border-color: var(--gris-300); }
.formulaire-wp input:focus, .formulaire-wp select:focus, .formulaire-wp textarea:focus { border-color: var(--rouge); outline: none; }
.formulaire-wp .wpforms-field-description { font-size: .88rem; color: var(--texte-doux); margin: 0; }
.formulaire-wp .wpforms-error, .formulaire-wp label.wpforms-error { color: var(--rouge); font-size: .88rem; }
.formulaire-wp input.wpforms-error, .formulaire-wp textarea.wpforms-error { border-color: var(--rouge); }
.formulaire-wp .wpforms-submit-container { margin-top: var(--e-4); padding: 0; }
.formulaire-wp button[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 52px; padding: var(--e-3) var(--e-6);
  font-family: var(--titre); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: 2px; cursor: pointer;
  background: var(--rouge); color: var(--blanc);
  transition: background var(--transition), transform var(--transition);
}
.formulaire-wp button[type=submit]::after {
  content: ''; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition);
}
.formulaire-wp button[type=submit]:hover { background: var(--rouge-fonce); transform: translateY(-2px); }
.formulaire-wp button[type=submit]:hover::after { transform: translateX(4px); }
.formulaire-wp .wpforms-confirmation-container-full {
  background: var(--jaune-pale); border-left: 5px solid var(--jaune); padding: var(--e-5); border-radius: 2px;
}
.formulaire-wp .wpforms-field-hp, .formulaire-wp .wpforms-hidden { display: none !important; }
@media (max-width: 760px) {
  .formulaire-wp .wpforms-field-container { grid-template-columns: 1fr; }
  .formulaire-wp .wpforms-field.wpforms-one-half { grid-column: 1 / -1; }
}

/* --- 24.10 Carte « coordonnées » de la page contact ------------------------ */
.carte.carte--contact { background: var(--noir); border-color: var(--noir-600); padding: var(--e-6); }
.carte--contact h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.carte--contact .contact-intro { color: var(--gris-300); margin-bottom: var(--e-5); }

/* --- 24.11 Responsive : règles de la maquette posées sur d'autres éléments */
@media (max-width: 620px) {
  .logo:not(.logo--pied) img, .elementor .logo:not(.logo--pied) img { height: 38px; }
  .entete__cta .btn { font-size: .92rem; padding-inline: var(--e-4); }
  .elementor-widget.entete__cta { font-size: inherit; padding-inline: 0; }
}
@media (max-width: 760px) {
  .formulaire-wp .champ--duo { grid-template-columns: 1fr; }
}