/* =========================================================
   VAROL MAÇONNERIE — Feuille de style principale
   Palette « Anthracite & Orange » : anthracite et noir pour la
   structure, blanc pour respirer, et un orange chaud employé avec
   parcimonie — uniquement sur ce qui appelle à l'action.

   Typographie sans empattement : Poppins en gras pour les
   titres, Lato pour le texte courant.

   Approche : mobile-first. Toutes les animations reposent
   exclusivement sur transform et opacity, les deux seules
   propriétés que le navigateur peut composer sur le GPU —
   c'est ce qui garantit les 60 fps, y compris sur mobile.
   ========================================================= */

:root{
  /* --- Structure : anthracite, noir --- */
  --anthracite:   #262626;   /* fonds des sections sombres */
  --anthracite-2: #303030;
  --noir:         #191919;   /* le plus sombre — pied de page */
  --gris-fonce:   #333333;
  --gris-moyen:   #4A4A4A;

  /* --- Accent : l'orange des engins, version lumineuse ---
     Sur les aplats, le texte passe en presque-noir : à cette
     luminosité, du blanc sur orange tomberait à 2,8:1 et deviendrait
     pénible à lire. Le noir monte à 6,0:1 et donne au bouton
     l'aspect d'une plaque de signalisation de chantier.

     >>> Version précédente, plus sourde, si l'on veut y revenir :
         --orange #DF6B14 · --orange-fonce #A34A0C
         --orange-clair #F08A3C · --orange-pale #FDF1E7
         --on-orange #FFFFFF · survol #C55C0D <<< */
  --orange:         #F27B1E;   /* accent signature, aplats de boutons */
  --orange-fonce:   #B25109;   /* texte accent sur fond clair (5,2:1 sur blanc) */
  --orange-clair:   #F79445;   /* accent sur fond sombre (6,8:1 sur anthracite) */
  --orange-pale:    #FEF3EA;   /* fonds de pastille très clairs */
  --on-orange:      #1A1A1A;   /* texte posé sur les aplats orange */

  /* --- Blancs --- */
  --white:        #FFFFFF;
  --blanc-casse:  #F4F5F6;   /* fond clair */
  --blanc-doux:   #FAFAFB;   /* fond clair alterné */

  --ink:          #1D1D1D;   /* titres sur fond clair */
  --ink-soft:     #555555;   /* texte courant */
  --gris-clair:   #AAAAAA;   /* texte secondaire sur fond sombre */
  --line:         rgba(0,0,0,0.10);
  --line-light:   rgba(255,255,255,0.12);

  /* Typographie */
  --font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rythme — valeurs mobiles, réhaussées plus bas par media queries */
  --container: 1220px;
  --gutter: 18px;
  --sec-y: 64px;
  --ridge-h: 74px;
  --trust-overlap: 132px;
  /* Angles francs : la maçonnerie est un métier d'arêtes droites */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --header-h: 62px;

  /* Ombres — discrètes, jamais dures */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.12);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.18);
  --shadow-orange: 0 8px 22px rgba(242,123,30,0.34);

  /* Courbes et durées */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .25s;
  --dur-med: .55s;
  --dur-slow: .9s;
}

@media (min-width: 640px){
  :root{ --gutter: 24px; --sec-y: 84px; --ridge-h: 86px; --trust-overlap: 84px; --header-h: 70px; }
}
@media (min-width: 960px){
  :root{ --gutter: 28px; --sec-y: 104px; --ridge-h: 110px; --trust-overlap: 74px; --header-h: 78px; }
}
@media (min-width: 1280px){
  :root{ --gutter: 32px; --sec-y: 120px; --ridge-h: 132px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: .94rem;
  color: var(--ink);
  background: var(--blanc-casse);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (min-width: 960px){ body{ font-size: 1rem; } }

img, svg, video{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea{ font: inherit; }
h1, h2, h3, h4, p{ margin: 0; }

.svg-sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap{ white-space: nowrap; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Respect des utilisateurs sensibles au mouvement */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Empêche tout scroll horizontal fantôme (parallaxe, SVG pleine largeur) */
main, section, header, footer{ overflow-x: clip; }

#accueil, #entreprise, #prestations, #location, #realisations, #galerie, #zone, #contact{
  scroll-margin-top: var(--header-h);
}

/* ---------- Typo utilitaires ----------
   Le chapeau est très espacé, sans filet : c'est lui qui donne
   le ton « chantier propre » avant même le titre. */
.eyebrow{
  display: inline-block;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange-fonce);
}
.eyebrow.light{ color: var(--orange); }
@media (min-width: 960px){
  .eyebrow{ font-size: 13px; letter-spacing: .38em; }
}

/* Titres : Poppins très gras, interlignage serré, aucune italique */
h1, .h1{
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 8.6vw, 4.6rem);
  color: var(--white);
}
h2, .h2{
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 5.8vw, 3rem);
  color: var(--ink);
}
h3, .h3{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  color: var(--ink);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.lead{
  font-size: clamp(.9rem, 3.3vw, 1.05rem);
  color: var(--ink-soft);
  line-height: 1.8;
}
/* Les mots-clés en gras dans les paragraphes passent en orange :
   l'œil accroche les prestations sans lire toute la phrase. */
.lead b, .lead strong{ color: var(--orange-fonce); font-weight: 700; }
.section-head{ max-width: 640px; margin-bottom: 34px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{ margin-top: 12px; }
.section-head p{ margin-top: 12px; }
.section-head.center .eyebrow{ justify-content: center; }
@media (min-width: 960px){
  .section-head{ margin-bottom: 52px; }
  .section-head h2{ margin-top: 16px; }
  .section-head p{ margin-top: 16px; }
}
.br-lg{ display: none; }
.section-head--wide{ max-width: 720px; }
@media (min-width: 1200px){
  .br-lg{ display: inline; }
  .section-head--wide{ max-width: none; }
  .section-head--wide h2{ white-space: nowrap; font-size: min(2.7rem, 3.9vw); }
}

/* ---------- Crêtes de séparation entre sections ----------
   Même silhouette réutilisée via <use>, chaque instance choisit
   ses couleurs (--sky au-dessus, --rock en dessous). */
.ridge{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--ridge-h);
  z-index: 3;
  pointer-events: none;
  line-height: 0;
}
.ridge svg{ width: 100%; height: 100%; display: block; }
.ridge--flip svg{ transform: scaleX(-1); }

/* ---------- Boutons ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn svg{ width: 16px; height: 16px; flex: none; }
.btn:active{ transform: scale(.96); }
@media (min-width: 960px){
  .btn{ padding: 18px 34px; font-size: .84rem; gap: 10px; }
  .btn svg{ width: 18px; height: 18px; }
}

/* Un seul bouton orange plein par écran : c'est lui qu'on veut voir cliquer. */
.btn-primary{
  background: var(--orange);
  color: var(--on-orange);
  box-shadow: var(--shadow-orange);
}
.btn-outline{
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.55);
}
.btn-dark{
  background: var(--anthracite);
  color: var(--white);
}
.btn-ghost{
  color: var(--ink);
  border: 1.5px solid var(--ink);
  background: transparent;
}
/* WhatsApp reprend la couleur de la marque : c'est un repère
   universel, et l'orange du site reste réservé au devis. */
.btn-wa{
  background: #25D366;
  color: #08331A;
}
@media (hover: hover){
  .btn-primary:hover{ transform: translateY(-3px); background: #E06D12; box-shadow: 0 14px 32px rgba(242,123,30,0.44); }
  .btn-outline:hover{ background: var(--white); color: var(--ink); border-color: var(--white); transform: translateY(-3px); }
  .btn-dark:hover{ transform: translateY(-3px); background: var(--orange); }
  .btn-ghost:hover{ transform: translateY(-3px); background: var(--ink); color: var(--white); }
  .btn-wa:hover{ transform: translateY(-3px); background: #1FBE5A; }
}
.btn-block{ width: 100%; }
.btn-sm{ padding: 11px 18px; font-size: .8rem; }

/* ================= HEADER ================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease),
              height var(--dur-med) var(--ease);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header.is-scrolled{
  background: rgba(25,25,25,0.94);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0,0,0,0.22);
  height: calc(var(--header-h) - 8px);
}

/* Fine ligne bronze qui suit la progression de lecture */
.read-progress{
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--orange), var(--orange-pale));
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
}
.site-header.is-scrolled .read-progress{ opacity: 1; }

/* Logo officiel : hexagone bronze + mot-symbole blanc, ratio 3:1.
   La hauteur suffit à le dimensionner, la largeur suit. */
.brand{ display: flex; align-items: center; flex: none; min-width: 0; }
.brand img{
  height: 36px;
  width: auto;
  transition: height var(--dur-med) var(--ease);
}
.site-header.is-scrolled .brand img{ height: 30px; }
@media (min-width: 960px){
  .brand img{ height: 46px; }
  .site-header.is-scrolled .brand img{ height: 38px; }
}

.nav-desktop{ display: none; }
.nav-desktop ul{ display: flex; align-items: center; gap: 24px; }
.nav-desktop a{
  position: relative;
  font-size: .86rem;
  font-weight: 500;
  color: rgba(255,255,255,0.84);
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease);
}
.nav-desktop a::after{
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: var(--orange-clair);
  transition: right var(--dur-med) var(--ease);
}
.nav-desktop a:hover, .nav-desktop a.is-current{ color: var(--white); }
.nav-desktop a:hover::after, .nav-desktop a.is-current::after{ right: 0; }

.header-cta{ display: flex; align-items: center; gap: 8px; }
.header-cta .btn{ padding: 12px 22px; font-size: .85rem; }
.header-cta > a.btn-primary{ display: none; }
.icon-call{
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.24);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.icon-call svg{ width: 18px; height: 18px; }
.icon-call:hover{ background: var(--orange); border-color: var(--orange); transform: translateY(-2px); }

.burger{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0;
  z-index: 1200;
}
.burger span{
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease);
}
body.nav-open .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity: 0; }
body.nav-open .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- Menu mobile plein écran ---- */
.nav-mobile{
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: linear-gradient(160deg, var(--anthracite) 0%, #141414 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px 26px calc(28px + env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  overflow-y: auto;
  transition: opacity var(--dur-med) var(--ease),
              transform var(--dur-med) var(--ease),
              visibility 0s linear var(--dur-med);
}
body.nav-open .nav-mobile{
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--dur-med) var(--ease),
              transform var(--dur-med) var(--ease),
              visibility 0s;
}
.nav-mobile ul{ display: flex; flex-direction: column; }
.nav-mobile li{ border-bottom: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.nav-mobile a{
  display: block;
  padding: 13px 2px;
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--white);
  opacity: 0;
  transform: translateY(16px);
  transition: transform var(--dur-med) var(--ease),
              opacity var(--dur-med) var(--ease),
              color var(--dur-fast);
}
body.nav-open .nav-mobile a{ opacity: 1; transform: translateY(0); }
.nav-mobile a:hover{ color: var(--orange-clair); }
.nav-mobile-foot{ margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.nav-mobile-foot a.btn{ display: inline-flex; }
.nav-mobile-foot .socials{ display: flex; justify-content: center; gap: 14px; }
body.nav-open{ overflow: hidden; }

/* ================= HERO ================= */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--anthracite);
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero-media{
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--anthracite);
}
.hero-media picture,
.hero-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Le cadrage est calé pour que les deux mini-pelles restent au premier
     plan, juste au-dessus de la crête, quelle que soit la hauteur d'écran. */
  object-position: center 34%;
}
@media (min-width: 700px){
  .hero-media picture,
  .hero-media img{ object-position: center 46%; }
}
/* Zoom lent et continu — uniquement du transform, donc composé par le GPU */
.hero-media img{
  transform: scale(1.06);
  animation: heroDrift 26s var(--ease-soft) infinite alternate;
  will-change: transform;
}
@keyframes heroDrift{
  from{ transform: scale(1.06) translate3d(0, 0, 0); }
  to  { transform: scale(1.16) translate3d(-1.2%, -1.6%, 0); }
}
.hero-media-overlay{
  position: absolute; inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(242,123,30,0.16), transparent 55%),
    /* Sombre en haut pour le titre, presque transparent au niveau des
       machines, puis retour au graphite pour rejoindre la crête. */
    linear-gradient(180deg, rgba(17,17,17,0.80) 0%, rgba(20,20,20,0.56) 26%,
                    rgba(20,20,20,0.26) 52%, rgba(20,20,20,0.54) 78%, #191919 100%);
}
/* Grain fin : casse les aplats du dégradé et masque la montée en résolution */
.hero-media-grain{
  position: absolute; inset: -50%;
  z-index: 3;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: grainShift 7s steps(6) infinite;
  will-change: transform;
}
@keyframes grainShift{
  0%{ transform: translate3d(0,0,0); }
  20%{ transform: translate3d(-4%,3%,0); }
  40%{ transform: translate3d(3%,-4%,0); }
  60%{ transform: translate3d(-3%,-2%,0); }
  80%{ transform: translate3d(4%,2%,0); }
  100%{ transform: translate3d(0,0,0); }
}

/* Massif du hero : la crête est dessinée par-dessus la photo, puis un socle
   plein descend jusqu'au bas de la section pour qu'aucun interstice
   n'apparaisse quand le parallaxe fait descendre l'ensemble. */
.hero-ridge{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  pointer-events: none;
  will-change: transform;
  z-index: 4;
  line-height: 0;
}
/* Crête volontairement basse : elle referme la bannière sans masquer
   les machines qui sont le sujet de la photo. */
.hero-ridge svg{ width: 100%; height: clamp(64px, 8.5vw, 130px); display: block; }
.hero-ridge-base{ display: block; height: 60px; margin-top: -1px; background: var(--rock); }
@media (min-width: 960px){ .hero-ridge-base{ height: 90px; } }

.hero-content{
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 24px var(--gutter) 120px;
  text-align: center;
}
.hero-content .eyebrow{ color: rgba(255,255,255,0.92); }

.hero-slogan{
  margin: 16px auto 0;
  max-width: 900px;
  text-align: center;
  text-wrap: balance;
}
.hero-slogan em{
  font-style: normal;
  color: var(--white);
}
/* Révélation ligne par ligne : chaque ligne remonte derrière son propre masque */
.line-mask{ display: block; overflow: hidden; padding-bottom: .06em; }
.line-mask > span{
  display: block;
  transform: translateY(104%);
  transition: transform 1s var(--ease);
}
.is-loaded .line-mask > span{ transform: translateY(0); }
.is-loaded .line-mask:nth-child(2) > span{ transition-delay: .12s; }

.hero-content .lead{
  color: rgba(255,255,255,0.78);
  max-width: 640px;
  margin: 16px auto 0;
}
.hero-actions{
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-actions .btn{ flex: 1 1 100%; max-width: 320px; }

.hero-badges{
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 10px;
  max-width: 430px;
  margin-left: auto; margin-right: auto;
}
.hero-badge{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: rgba(255,255,255,0.84);
  font-size: .64rem;
  line-height: 1.25;
  text-align: left;
}
.hero-badge svg{ width: 15px; height: 15px; color: var(--orange-clair); flex: none; }

.scroll-cue{ display: none; }

@media (min-width: 640px){ .hero-actions .btn{ flex: 0 0 auto; } }
@media (min-width: 960px){
  .hero-content{ padding: 50px var(--gutter) 190px; }
  .hero-slogan{ margin-top: 22px; }
  .hero-content .lead{ margin-top: 22px; }
  .hero-actions{ margin-top: 40px; gap: 16px; }
  .hero-badges{
    margin-top: 54px;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 30px;
    max-width: none;
  }
  .hero-badge{ font-size: .82rem; }
  .hero-badge svg{ width: 20px; height: 20px; }
  .scroll-cue{
    position: absolute;
    left: 50%; bottom: 128px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.6);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .scroll-cue .line{
    width: 1px; height: 34px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.75), transparent);
    animation: scrollcue 2.2s var(--ease) infinite;
  }
}
@media (min-width: 1180px){ .hero-content{ padding-bottom: 215px; } }
@keyframes scrollcue{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ================= BANDEAU DE RÉASSURANCE =================
   Hauteur nulle : le bloc ne prend pas de place dans le flux,
   il est ancré sur la ligne hero / prestations. */
.trust-strip{ position: relative; z-index: 6; height: 0; }
.trust-card{
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: 0;
  transform: translateY(-50%);
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 22px 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 10px;
}
.trust-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.trust-item .ico{
  flex: none;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-pale);
  color: var(--orange-fonce);
}
.trust-item .ico svg{ width: 18px; height: 18px; }
.trust-item strong{ display: block; font-size: .78rem; color: var(--anthracite); font-weight: 700; line-height: 1.25; }
.trust-item .txt > span{ display: block; font-size: .68rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.3; }

@media (min-width: 640px){
  .trust-card{ grid-template-columns: repeat(4, 1fr); padding: 26px 22px; gap: 20px; left: 0; right: 0; }
}
@media (min-width: 960px){
  .trust-card{ padding: 34px 40px; gap: 26px; }
  .trust-item{ flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .trust-item .ico{ width: 48px; height: 48px; }
  .trust-item .ico svg{ width: 22px; height: 22px; }
  .trust-item strong{ font-size: .92rem; }
  .trust-item .txt > span{ font-size: .78rem; }
}

/* ================= L'ENTREPRISE / HISTOIRE ================= */
.story{
  position: relative;
  padding: calc(var(--sec-y) + var(--trust-overlap)) 0 var(--sec-y);
  background: var(--blanc-casse);
}
.story .container{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}
/* Trame de points en écho au visuel : elle déborde de la photo
   en haut à gauche et en bas à droite, comme un calque de plan. */
.story-visual{ position: relative; }
.story-visual::before,
.story-visual::after{
  content: "";
  position: absolute;
  z-index: 0;
  width: 118px; height: 118px;
  background-image: url("../images/pointilles.svg");
  background-size: 12px;
  pointer-events: none;
}
.story-visual::before{ top: -22px; left: -22px; }
.story-visual::after{ right: -22px; bottom: -22px; }
.story-photo{
  z-index: 1;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  max-height: 62vh;
  background: var(--gris-fonce);
  box-shadow: var(--shadow-lg);
}
.story-photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-soft);
}
.story-visual:hover .story-photo img{ transform: scale(1.07); }
/* Vignette secondaire : l'enseigne de l'atelier */
.story-inset{
  position: absolute;
  z-index: 2;
  right: -6px; bottom: -26px;
  width: 44%;
  max-width: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 5px solid var(--blanc-casse);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
}
.story-inset img{ width: 100%; height: 100%; object-fit: cover; }
.story-since{
  position: absolute;
  z-index: 2;
  left: -6px; top: 18px;
  background: var(--anthracite);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.story-since strong{
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--orange-clair);
  line-height: 1;
}
.story-since span{
  display: block;
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 5px;
}

.story-text h2{ margin-top: 12px; }
.story-text p{ margin-top: 14px; font-size: .9rem; line-height: 1.78; color: var(--ink-soft); }
.story-text p.first::first-letter{
  float: left;
  font-family: var(--font-head);
  font-size: 3.1rem;
  line-height: .82;
  padding: 6px 10px 0 0;
  color: var(--orange);
}
.story-motto{ text-align: center; }
.story-sign{
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
}
.story-sign .avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--anthracite);
  color: var(--orange-clair);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  flex: none;
}
.story-sign strong{ display: block; font-size: .9rem; color: var(--anthracite); }
.story-sign span{ display: block; font-size: .74rem; color: var(--ink-soft); margin-top: 2px; }

.story-stats{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.story-stat{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
}
.story-stat b{
  display: block;
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--orange-fonce);
  line-height: 1;
}
.story-stat span{
  display: block;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 7px;
  line-height: 1.35;
}

@media (min-width: 960px){
  .story .container{ grid-template-columns: .9fr 1.1fr; gap: 72px; }
  .story-photo{ aspect-ratio: 3/4; max-height: none; }
  .story-inset{ right: -34px; bottom: -34px; width: 52%; }
  .story-since{ left: -22px; top: 26px; padding: 14px 20px; }
  .story-since strong{ font-size: 1.7rem; }
  .story-since span{ font-size: .6rem; }
  .story-text h2{ margin-top: 16px; }
  .story-text p{ margin-top: 18px; font-size: .98rem; }
  .story-stats{ margin-top: 34px; gap: 14px; }
  .story-stat{ padding: 20px 14px; }
  .story-stat b{ font-size: 1.9rem; }
  .story-stat span{ font-size: .68rem; }
}

/* ================= BANDEAU DÉFILANT ================= */
.marquee{
  position: relative;
  background: var(--anthracite);
  color: rgba(255,255,255,0.72);
  padding: 15px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-group{ display: flex; align-items: center; flex: none; }
.marquee-group span{
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-group span::after{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
@keyframes marquee{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}
@media (min-width: 960px){
  .marquee{ padding: 19px 0; }
  .marquee-group span{ font-size: .82rem; padding: 0 28px; gap: 28px; }
}

/* ================= PRESTATIONS =================
   Bandeau anthracite, colonnes nues : pas de carte, pas de
   bordure, pas d'ombre. Seuls l'icône orange et le titre en gras
   structurent la lecture — le fond sombre fait le reste. */
.services{
  position: relative;
  padding: calc(var(--sec-y) + var(--ridge-h)) 0 var(--sec-y);
  background: var(--anthracite);
}
.services .section-head h2{ color: var(--white); }
.services .section-head p{ color: var(--gris-clair); }
.services-grid{ display: grid; grid-template-columns: 1fr; gap: 30px; }
.service-card{
  position: relative;
  padding: 0 0 0 44px;
  transition: transform var(--dur-med) var(--ease-soft);
  will-change: transform;
}
.service-card .ico{
  position: absolute;
  left: 0; top: 2px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  transition: transform var(--dur-med) var(--ease-soft);
}
.service-card .ico svg{ width: 26px; height: 26px; }
.service-card h3{ color: var(--white); }
.service-card p{
  margin-top: 9px;
  font-size: .88rem;
  color: var(--gris-clair);
  line-height: 1.72;
}
.service-card .tag{
  display: inline-flex;
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--orange);
  transition: color var(--dur-med);
}
@media (hover: hover){
  .service-card:hover{ transform: translateY(-4px); }
  .service-card:hover .ico{ transform: scale(1.12); }
  .service-card:hover .tag{ color: var(--orange-clair); }
}
@media (min-width: 640px){ .services-grid{ grid-template-columns: repeat(2, 1fr); gap: 36px 30px; } }
@media (min-width: 960px){
  .services-grid{ grid-template-columns: repeat(4, 1fr); gap: 46px 34px; }
  .service-card{ padding: 0; }
  .service-card .ico{ position: static; width: 34px; height: 34px; margin-bottom: 18px; }
  .service-card .ico svg{ width: 30px; height: 30px; }
  .service-card p{ margin-top: 12px; font-size: .9rem; }
  .service-card .tag{ margin-top: 16px; font-size: .66rem; }
}

.services-note{
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  font-size: .88rem;
  color: var(--gris-clair);
  line-height: 1.7;
}
.services-note b{ color: var(--white); }

/* ================= LOCATION DE MATÉRIEL ================= */
.rental{
  position: relative;
  padding: var(--sec-y) 0;
  background: var(--noir);
  color: var(--white);
  overflow: hidden;
}
.rental::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("../images/beton-texture.svg");
  background-size: 420px;
  opacity: .5;
  mix-blend-mode: soft-light;
}
.rental .container{ position: relative; z-index: 2; }
.rental .section-head{ max-width: 920px; }
.rental .section-head h2{ color: #fff; }
.rental .section-head p{ color: rgba(255,255,255,0.72); }

.rental-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.rental-list{ display: flex; flex-direction: column; gap: 10px; }
.rental-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform var(--dur-med) var(--ease-soft),
              background var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease);
  will-change: transform;
}
.rental-thumb{
  flex: none;
  width: 74px; height: 74px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--noir);
}
.rental-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.rental-item .txt{ min-width: 0; }
.rental-item h3{ color: #fff; font-size: 1rem; }
.rental-item p{
  margin-top: 4px;
  font-size: .76rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
}
.rental-item .chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange-clair);
}
.rental-item .chip::before{
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--orange-clair);
}
@media (hover: hover){
  .rental-item:hover{
    transform: translateX(6px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(242,123,30,0.38);
  }
  .rental-item:hover .rental-thumb img{ transform: scale(1.1); }
}

/* ---------- Colonne de droite : le carrousel du matériel ----------
   Les fiches sont toutes empilées au même endroit ; c'est le script
   qui leur donne une position par un simple transform. Rien ne bouge
   dans le flux, donc aucun recalcul de mise en page pendant l'animation. */
.rental-aside{ display: flex; flex-direction: column; gap: 16px; }

.deck{
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  /* Le débordement est masqué : les fiches voisines sont coupées par
     les bords, ce qui produit l'effet de pile qui se poursuit. */
  overflow: hidden;
  padding-bottom: 34px;   /* place pour les puces */
}
/* La fiche occupe 76 % de la largeur et doit rester en 9/16.
   On donne donc à la scène le rapport 1 / (0,76 × 16/9) = 37/50,
   pour que la hauteur suive toujours la largeur de la fiche.
   C'est ce calcul qui manquait : la vidéo se retrouvait rognée. */
.deck-stage{
  position: relative;
  aspect-ratio: 37/50;
}
.deck-card{
  position: absolute;
  top: 0;
  left: 50%;
  width: 76%;
  height: 100%;
  margin-left: -38%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--noir);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  /* Position de départ : au fond de la pile, le script prend le relais */
  transform: translate3d(0,0,0) scale(.78);
  opacity: 0;
  transition: transform .62s var(--ease), opacity .62s var(--ease);
  will-change: transform, opacity;
}
.deck-card.is-active{ cursor: default; }
.deck-media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Les fiches en arrière-plan sont assombries pour que l'œil aille au centre */
.deck-card::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(12,12,12,0.55);
  opacity: 1;
  transition: opacity .62s var(--ease);
  pointer-events: none;
}
.deck-card.is-active::after{ opacity: 0; }

.deck-label{
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: rgba(25,25,25,0.74);
  backdrop-filter: blur(8px);
  font-size: .7rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.deck-card.is-active .deck-label{ opacity: 1; transform: translateY(0); }
.deck-label .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #25D366;
  flex: none;
  animation: pulseDot 1.9s var(--ease) infinite;
}
@keyframes pulseDot{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.45); opacity: .55; }
}

/* Flèches : posées sur les bords, au-dessus des fiches en retrait */
.deck-nav{
  position: absolute;
  top: calc(50% - 17px);
  transform: translateY(-50%);
  z-index: 6;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  color: var(--anthracite);
  box-shadow: var(--shadow-md);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.deck-nav svg{ width: 19px; height: 19px; }
.deck-nav:hover{ background: var(--orange); color: var(--on-orange); }
.deck-nav:active{ transform: translateY(-50%) scale(.92); }
.deck-prev{ left: 4px; }
.deck-next{ right: 4px; }

.deck-dots{
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.deck-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.deck-dot.is-active{ background: var(--orange); transform: scale(1.35); }

@media (min-width: 960px){
  .deck{ max-width: 460px; }
  .deck-nav{ width: 46px; height: 46px; }
  .deck-nav svg{ width: 21px; height: 21px; }
  .deck-label{ font-size: .76rem; padding: 11px 13px; left: 12px; right: 12px; bottom: 12px; }
}
.rental-note{
  border-radius: var(--radius-md);
  border: 1px dashed rgba(242,123,30,0.38);
  background: rgba(242,123,30,0.10);
  padding: 16px;
  font-size: .8rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
}
.rental-note b{ color: var(--orange-clair); }
.rental-cta{ margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.rental-cta .btn{ width: 100%; }

@media (min-width: 640px){
  .rental-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rental-cta{ flex-direction: row; }
  .rental-cta .btn{ width: auto; }
}
@media (min-width: 960px){
  .rental-grid{ grid-template-columns: 1.1fr .9fr; gap: 46px; }
  .rental-list{ grid-template-columns: 1fr; gap: 14px; }
  .rental-item{ padding: 14px; gap: 18px; }
  .rental-thumb{ width: 104px; height: 92px; border-radius: 12px; }
  .rental-item h3{ font-size: 1.12rem; }
  .rental-item p{ font-size: .85rem; margin-top: 6px; }
}

/* ================= AVANT / APRÈS ================= */
.beforeafter{
  position: relative;
  padding: calc(var(--sec-y) + var(--ridge-h)) 0 var(--sec-y);
  background: var(--blanc-casse);
}
.beforeafter .container{ position: relative; z-index: 2; }

.ba{ margin: 0; }
.ba-stage{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--noir);
  touch-action: pan-y;
  isolation: isolate;
}
.ba-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.ba-img--before{ clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-badge{
  position: absolute; top: 12px;
  z-index: 4;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: opacity var(--dur-fast) var(--ease);
}
.ba-badge--before{ left: 12px; background: rgba(25,25,25,0.78); color: #fff; }
.ba-badge--after{ right: 12px; background: rgba(255,255,255,0.92); color: var(--anthracite); }
.ba-badge.is-hidden{ opacity: 0; }

.ba-handle{
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  z-index: 3;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.16), 0 0 22px rgba(0,0,0,0.4);
  pointer-events: none;
}
.ba-knob{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--anthracite);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ba-knob svg{ width: 17px; height: 17px; }
.ba-range{
  position: absolute; inset: 0;
  z-index: 5;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}
.ba-range::-webkit-slider-thumb{ -webkit-appearance: none; width: 56px; height: 100px; }
.ba-range::-moz-range-thumb{ width: 56px; height: 100px; border: 0; }
.ba-range:focus{ outline: none; }
.ba-range:focus-visible ~ .ba-handle .ba-knob{ box-shadow: 0 0 0 4px rgba(242,123,30,0.55), var(--shadow-md); }
.ba-range:active ~ .ba-handle .ba-knob{ transform: translate(-50%,-50%) scale(1.08); }

.ba-caption{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}
.ba-caption strong{ font-size: .95rem; color: var(--anthracite); }
.ba-caption span{ font-size: .78rem; color: var(--ink-soft); line-height: 1.55; }

@media (min-width: 640px){
  .ba-stage{ aspect-ratio: 16/10; }
  .ba-knob{ width: 52px; height: 52px; }
  .ba-knob svg{ width: 20px; height: 20px; }
  .ba-badge{ top: 18px; font-size: .69rem; padding: 7px 15px; }
  .ba-badge--before{ left: 18px; }
  .ba-badge--after{ right: 18px; }
  .ba-caption{ margin-top: 22px; }
  .ba-caption strong{ font-size: 1.05rem; }
  .ba-caption span{ font-size: .85rem; }
}
@media (min-width: 1100px){ .ba-stage{ aspect-ratio: 16/9; } }

/* ================= GALERIE DES RÉALISATIONS ================= */
/* Réalisations sur fond blanc : ce sont les photos de chantier
   qui portent la section, tout le reste s'efface. */
.gallery{
  position: relative;
  padding: var(--sec-y) 0;
  background: var(--white);
  overflow: hidden;
}
.gallery .container{ position: relative; z-index: 2; }

/* Onglets de filtre : simple texte, l'actif prend une pastille orange pâle */
.filters{
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.filters::-webkit-scrollbar{ display: none; }
.filter{
  flex: none;
  scroll-snap-align: start;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.filter:active{ transform: scale(.95); }
.filter:hover{ color: var(--orange-fonce); }
.filter.is-active{
  background: var(--orange-pale);
  color: var(--orange-fonce);
  font-weight: 700;
}
@media (min-width: 640px){
  .filters{ justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
  .filter{ padding: 12px 24px; font-size: .88rem; }
}

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.shot{
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gris-fonce);
  cursor: zoom-in;
  transform: translateZ(0) scale(1);
  transition: transform var(--dur-med) var(--ease-soft),
              opacity var(--dur-med) var(--ease-soft),
              box-shadow var(--dur-med) var(--ease-soft);
  will-change: transform, opacity;
}
.shot img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.shot .cap{
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 12px 11px;
  font-size: .7rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(180deg, rgba(25,25,25,0) 0%, rgba(25,25,25,0.88) 100%);
  transform: translateY(6px);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.shot .cap b{ display: block; font-weight: 600; }
.shot .cap em{
  display: block;
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange-clair);
  margin-top: 3px;
}
.shot .zoom{
  position: absolute;
  top: 9px; right: 9px;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(25,25,25,0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.shot .zoom svg{ width: 13px; height: 13px; }
/* Sur écran tactile, la légende reste lisible sans survol */
@media (hover: none){
  .shot .cap{ opacity: 1; transform: translateY(0); }
}
@media (hover: hover){
  .shot:hover{ box-shadow: var(--shadow-lg); }
  .shot:hover img{ transform: scale(1.08); }
  .shot:hover .cap{ opacity: 1; transform: translateY(0); }
  .shot:hover .zoom{ opacity: 1; transform: scale(1); }
}
/* Masquage filtré : on anime, puis le JS retire l'élément du flux */
.shot.is-hidden{ opacity: 0; transform: scale(.9); pointer-events: none; }
.shot.is-gone{ display: none; }

@media (min-width: 640px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 960px){
  .gallery-grid{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .shot .cap{ font-size: .78rem; padding: 30px 14px 14px; }
  .shot .zoom{ width: 30px; height: 30px; }
  .shot .zoom svg{ width: 15px; height: 15px; }
}

.gallery-more{ margin-top: 26px; display: flex; justify-content: center; }

/* ---- Visionneuse plein écran ---- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15,15,15,0.95);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
}
.lightbox.is-open{
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-med) var(--ease), visibility 0s;
}
.lightbox-figure{
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: scale(.94);
  transition: transform var(--dur-med) var(--ease);
}
.lightbox.is-open .lightbox-figure{ transform: scale(1); }
.lightbox-figure img{
  max-height: calc(100svh - 150px);
  width: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
  object-fit: contain;
  box-shadow: var(--shadow-lg);
}
.lightbox-figure figcaption{
  text-align: center;
  color: rgba(255,255,255,0.8);
  font-size: .82rem;
  line-height: 1.5;
}
.lightbox-figure figcaption em{
  display: block;
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-clair);
  margin-top: 5px;
}
.lb-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lb-btn svg{ width: 20px; height: 20px; }
.lb-btn:hover{ background: var(--orange); border-color: var(--orange); }
.lb-prev{ left: 10px; }
.lb-next{ right: 10px; }
.lb-close{
  position: absolute;
  top: 14px; right: 14px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lb-close svg{ width: 18px; height: 18px; }
.lb-close:hover{ background: var(--orange); border-color: var(--orange); transform: rotate(90deg); }
.lb-count{
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .14em;
  color: rgba(255,255,255,0.55);
}
@media (min-width: 960px){
  .lb-prev{ left: 26px; }
  .lb-next{ right: 26px; }
  .lb-btn{ width: 52px; height: 52px; }
}

/* ================= CITATION ================= */
.divider-quote{
  position: relative;
  padding: calc(var(--sec-y) * .8 + var(--ridge-h)) 0 calc(var(--sec-y) * .8);
  background: var(--blanc-casse);
  text-align: center;
}
.divider-quote .container{ position: relative; z-index: 2; }
.divider-quote blockquote{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.15rem, 4.2vw, 1.9rem);
  color: var(--ink);
  max-width: 1040px;
  margin: 0 auto;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.divider-quote cite{
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: .67rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--orange-fonce);
  line-height: 1.6;
}
@media (min-width: 960px){
  .divider-quote cite{ margin-top: 18px; font-size: .74rem; letter-spacing: .2em; }
}

/* ================= ZONE D'INTERVENTION ================= */
.zone{
  position: relative;
  padding: calc(var(--sec-y) + var(--ridge-h)) 0 var(--sec-y);
  background: var(--anthracite);
  color: var(--white);
  /* « clip » rogne comme « hidden » mais sans créer de conteneur de
     défilement : c'est ce qui permet à la carte de rester collée
     pendant la lecture de la liste des communes. */
  overflow: hidden;
  overflow: clip;
}
.zone::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("../images/beton-texture.svg");
  background-size: 420px;
  opacity: .45;
  mix-blend-mode: soft-light;
}
.zone .container{ position: relative; z-index: 2; }
.zone .section-head{ max-width: 920px; }
.zone .section-head h2{ color: #fff; }
.zone .section-head p{ color: rgba(255,255,255,0.72); }
.zone-grid{ display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.zone-groups{ display: flex; flex-direction: column; gap: 22px; }
.zone-group h4{
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--orange-clair);
  margin-bottom: 10px;
}
.zone-towns{ display: flex; flex-wrap: wrap; gap: 7px; }
.zone-towns li{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .73rem;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 6px 12px 6px 9px;
}
.zone-towns li::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.zone-note{
  margin-top: 26px;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
}
.map-frame{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(255,255,255,0.08);
  aspect-ratio: 4/3;
}
.map-frame iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }

@media (min-width: 960px){
  .zone-grid{ grid-template-columns: 1fr 1fr; gap: 60px; }
  .zone-groups{ gap: 30px; }
  .zone-group h4{ font-size: .75rem; letter-spacing: .16em; margin-bottom: 14px; }
  .zone-towns{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
  .zone-towns li{
    position: relative;
    display: flex;
    font-size: .9rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    border-radius: 0;
    padding: 10px 0 10px 18px;
  }
  .zone-towns li::before{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; }
  .zone-note{ margin-top: 40px; font-size: .85rem; text-align: center; }
  /* La liste des communes est bien plus haute que la carte : sans cela,
     la moitié droite de la section reste vide pendant tout le défilement.
     La carte suit la lecture et s'arrête au-dessus du bas de la colonne. */
  .map-frame{
    border-width: 6px;
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

/* ================= QUESTIONS FRÉQUENTES =================
   Accordéon en <details> natif : pas une ligne de JavaScript, le contenu
   des réponses reste dans le HTML et donc lisible par les moteurs même
   replié — ce qu'un panneau masqué en display:none piloté au script ne
   garantit pas. Fond anthracite, précédé de sa crête : la section reprend
   le sombre après la respiration claire du bloc citation. */
.faq{
  position: relative;
  padding: calc(var(--sec-y) + var(--ridge-h)) 0 var(--sec-y);
  background: var(--anthracite);
  color: var(--white);
}
.faq .container{ position: relative; z-index: 2; }
.faq .section-head h2{ color: #fff; }
.faq .section-head p{ color: rgba(255,255,255,0.72); }

.faq-grid{ display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }

.faq-item{
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 2px solid transparent;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.faq-item:hover{ background: rgba(255,255,255,0.075); }
.faq-item[open]{
  background: rgba(255,255,255,0.075);
  border-left-color: var(--orange);
}

.faq-item summary{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}
/* Le chevron par défaut de Safari se loge dans ::-webkit-details-marker */
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }

.faq-item summary h3{
  flex: 1;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}

/* Croix qui bascule en tiret : une seule barre pivote, l'autre reste fixe */
.faq-item .faq-sign{
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
}
.faq-item .faq-sign::before,
.faq-item .faq-sign::after{
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2px;
  background: var(--orange);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease);
}
.faq-item .faq-sign::after{ transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-sign::after{ transform: translate(-50%, -50%) rotate(0deg); }

.faq-body{
  padding: 0 50px 16px 16px;
  margin-top: -4px;
  animation: faqIn var(--dur-fast) var(--ease-soft) both;
}
.faq-body p{
  font-size: .84rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.74);
}
@keyframes faqIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.faq-more{
  margin-top: 26px;
  text-align: center;
  font-size: .78rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
}
.faq-more a{ color: var(--orange-clair); border-bottom: 1px solid rgba(247,148,69,0.4); }
.faq-more a:hover{ border-bottom-color: var(--orange-clair); }

@media (min-width: 960px){
  /* Une seule colonne, mais bridée en largeur : sur deux colonnes, une
     question qui passe à la ligne décale sa voisine et la grille se
     désaligne dès qu'un panneau s'ouvre. */
  .faq-grid{ max-width: 920px; margin: 0 auto; gap: 12px; }
  .faq-item summary{ padding: 18px 20px; gap: 16px; }
  .faq-item summary h3{ font-size: 1.02rem; }
  .faq-body{ padding: 0 56px 20px 20px; }
  .faq-body p{ font-size: .9rem; }
  .faq-more{ margin-top: 40px; font-size: .85rem; }
}

/* ================= CONTACT ================= */
.contact{
  position: relative;
  padding: calc(var(--sec-y) + var(--ridge-h)) 0 var(--sec-y);
  background: var(--blanc-casse);
}
.contact .container{ position: relative; z-index: 2; }
.contact .section-head{ max-width: 1000px; }

.contact-grid{ display: grid; grid-template-columns: 1fr; gap: 16px; }
.contact-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  box-shadow: var(--shadow-sm);
}
.contact-card .card-title{ margin-bottom: 16px; }
.contact-card .card-sub{ font-size: .8rem; color: var(--ink-soft); margin: -10px 0 4px; }
.contact-methods{ display: flex; flex-direction: column; gap: 10px; }
.contact-method{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--blanc-doux);
  border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast);
}
.contact-method .ico{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  color: #fff;
}
.contact-method .ico svg{ width: 19px; height: 19px; }
.contact-method.tel .ico{ background: linear-gradient(135deg, var(--orange-clair), var(--orange-fonce)); color: var(--on-orange); }
.contact-method.wa .ico{ background: linear-gradient(135deg, #25D366, #1FBE5A); }
.contact-method.mail .ico{ background: linear-gradient(135deg, var(--gris-fonce), var(--anthracite)); }
.contact-method .txt{ min-width: 0; }
.contact-method .txt small{
  display: block;
  font-size: .61rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-method .txt strong{ display: block; font-size: .92rem; margin-top: 3px; color: var(--anthracite); }

.contact-place{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  color: var(--ink-soft);
}
.contact-place .ico{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(242,123,30,0.13);
  color: var(--orange-fonce);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.contact-place .ico svg{ width: 18px; height: 18px; }

.contact-form{ display: flex; flex-direction: column; gap: 12px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field label{
  font-size: .69rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field textarea, .field select{
  background: var(--blanc-doux);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px;              /* évite le zoom automatique sur iOS */
  color: var(--ink);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.field input::placeholder, .field textarea::placeholder{ color: #A6ADB2; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline: none;
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(242,123,30,0.20);
}
.field textarea{ resize: vertical; min-height: 96px; }
.form-actions{ display: flex; flex-direction: column; gap: 10px; }
.form-note{ font-size: .69rem; line-height: 1.5; color: var(--ink-soft); }
.form-success{
  display: none;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: #0E7A3E;
  background: rgba(37,211,102,0.12);
  border: 1px solid rgba(37,211,102,0.35);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
}
.form-success.show{ display: flex; }

@media (hover: hover){
  .contact-method:hover{ transform: translateX(6px); background: var(--white); border-color: rgba(242,123,30,0.40); }
}
@media (min-width: 640px){
  .form-actions{ flex-direction: row; }
  .form-actions .btn{ flex: 1; }
}
@media (min-width: 960px){
  .contact-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-card{ padding: 34px 28px; }
  .contact-card .card-title{ margin-bottom: 22px; }
  .contact-methods{ gap: 14px; }
  .contact-method{ padding: 16px 18px; gap: 16px; }
  .contact-method .ico{ width: 48px; height: 48px; }
  .contact-method .ico svg{ width: 22px; height: 22px; }
  .contact-method .txt small{ font-size: .69rem; }
  .contact-method .txt strong{ font-size: 1rem; }
  .contact-place{ margin-top: 26px; padding-top: 22px; font-size: .88rem; gap: 14px; }
  .contact-place .ico{ width: 44px; height: 44px; }
  .contact-form{ gap: 16px; }
  .field{ gap: 8px; }
  .field label{ font-size: .77rem; }
  .field input, .field textarea, .field select{ padding: 14px 16px; font-size: .95rem; }
  .field textarea{ min-height: 110px; }
  .form-note{ font-size: .75rem; }
}

/* ================= FOOTER ================= */
.site-footer{
  position: relative;
  background: var(--noir);
  color: rgba(255,255,255,0.65);
  padding: calc(var(--sec-y) * .8 + var(--ridge-h)) 0 calc(90px + env(safe-area-inset-bottom));
}
.site-footer .container{ position: relative; z-index: 2; }
.footer-top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand{ grid-column: 1 / -1; }
.footer-brand .brand{ margin-bottom: 16px; }
.footer-brand .brand img{ height: 44px; }
.footer-brand p{ font-size: .8rem; line-height: 1.7; max-width: 340px; color: rgba(255,255,255,0.5); }
.footer-socials{ display: flex; gap: 10px; margin-top: 16px; }
.social-btn{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast);
}
.social-btn svg{ width: 16px; height: 16px; }
.social-btn:hover{ transform: translateY(-4px); background: var(--orange); border-color: var(--orange); color: var(--white); }

.footer-col h4{
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 9px; }
.footer-col a{ font-size: .79rem; transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--orange-clair); }
.footer-col li{ display: flex; align-items: center; gap: 8px; font-size: .79rem; }
.footer-col li svg{ width: 14px; height: 14px; color: var(--orange-clair); flex: none; }
.footer-col--contact{ grid-column: 1 / -1; }

.footer-bottom{
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .69rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}
.footer-bottom .row{ display: flex; flex-direction: column; gap: 6px; }

@media (min-width: 640px){
  .footer-top{ grid-template-columns: repeat(3, 1fr); }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-col--contact{ grid-column: auto; }
  .footer-bottom .row{ flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
}
@media (min-width: 960px){
  .site-footer{ padding-bottom: 26px; }
  .footer-top{ grid-template-columns: 1.3fr .8fr .9fr 1fr; gap: 30px; padding-bottom: 44px; }
  .footer-brand{ grid-column: auto; }
  .footer-brand .brand img{ height: 54px; }
  .footer-brand p{ font-size: .87rem; }
  .footer-socials{ gap: 12px; margin-top: 20px; }
  .social-btn{ width: 40px; height: 40px; }
  .footer-col h4{ font-size: .77rem; letter-spacing: .15em; margin-bottom: 18px; }
  .footer-col ul{ gap: 11px; }
  .footer-col a, .footer-col li{ font-size: .87rem; }
  .footer-bottom{ padding-top: 26px; font-size: .77rem; }
}

/* ================= BARRE DE CONTACT MOBILE ================= */
.mobile-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 800;
  display: flex;
  background: rgba(25,25,25,0.95);
  backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  gap: 8px;
  transform: translateY(100%);
  transition: transform var(--dur-med) var(--ease);
  will-change: transform;
}
.mobile-bar.visible{ transform: translateY(0); }
.mobile-bar a{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-bar a svg{ width: 15px; height: 15px; flex: none; }
.mobile-bar .m-call{ background: linear-gradient(135deg, var(--orange-clair), var(--orange-fonce)); color: var(--white); }
.mobile-bar .m-wa{ background: linear-gradient(135deg, #25D366, #1FBE5A); color: #fff; }
.mobile-bar .m-devis{ background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); }

/* ================= RETOUR EN HAUT ================= */
.to-top{
  position: fixed;
  right: 16px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 700;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--white);
  color: var(--anthracite);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.9);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility 0s linear .25s;
}
.to-top.show{
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s;
}
.to-top svg{ width: 19px; height: 19px; }
.to-top:hover{ background: var(--orange); color: var(--white); }

@media (min-width: 960px){
  .nav-desktop{ display: block; }
  .burger{ display: none; }
  .icon-call{ display: flex; }
  .mobile-bar{ display: none; }
  .header-cta > a.btn-primary{ display: inline-flex; }
  .to-top{ right: 22px; bottom: 26px; width: 48px; height: 48px; }
  .to-top svg{ width: 20px; height: 20px; }
}

/* ================= RÉVÉLATIONS AU SCROLL =================
   Uniquement transform + opacity : jamais de reflow pendant l'animation. */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
  will-change: transform, opacity;
}
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }
[data-reveal="scale"]{ transform: translateY(0) scale(.94); }
[data-reveal="scale"].in-view{ transform: translateY(0) scale(1); }
[data-reveal="left"]{ transform: translateX(-24px); }
[data-reveal="left"].in-view{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(24px); }
[data-reveal="right"].in-view{ transform: translateX(0); }

[data-stagger] > *{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}
[data-stagger].in-view > *{ opacity: 1; transform: translateY(0); }

/* Une fois l'animation jouée, on rend la main au navigateur */
.anim-done{ will-change: auto; }

/* ---------- Écran de chargement ---------- */
.loader{
  position: fixed; inset: 0; z-index: 3000;
  background: var(--noir);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.loader.hide{ opacity: 0; visibility: hidden; }
.loader img{ width: 54px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.08); opacity: .7; }
}

/* Très petits écrans */
@media (max-width: 360px){
  :root{ --gutter: 14px; }
  .hero-badge{ font-size: .65rem; }
  .mobile-bar{ padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }
  .mobile-bar a{ padding: 11px 4px; font-size: .69rem; gap: 4px; }
  .mobile-bar a svg{ width: 13px; height: 13px; }
  .story-stat b{ font-size: 1.2rem; }
  .story-stat span{ font-size: .56rem; }
}