/* ============================================================================
   RSOARES CONSTRUCTION Sàrl — système de design
   Concept : « Ce qui tient debout ». Thème sombre, angles vifs, matière béton.
   Palette dérivée du logo : slate #353E48 · vert #5E963F (convertis en OKLCH).
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Ancres du logo */
  --slate:        oklch(0.3596 0.0211 251.2);
  --green:        oklch(0.6144 0.1335 135.8);

  /* Fonds : teintés vers la teinte du slate (251), jamais vers le beige */
  --bg:           oklch(0.17 0.012 251);
  --surface:      oklch(0.22 0.016 251);
  --surface-2:    oklch(0.27 0.019 251);
  --line:         oklch(0.32 0.018 251);
  --line-soft:    oklch(0.26 0.016 251);

  /* Encre */
  --ink:          oklch(0.97 0.004 251);
  --body:         oklch(0.78 0.012 251);
  --muted:        oklch(0.62 0.014 251);

  /* Accent */
  --green-bright: oklch(0.72 0.150 136);
  --green-deep:   oklch(0.50 0.115 136);

  /* Typo */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rythme */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --max: 78rem;
  --sec: clamp(5rem, 11vw, 9.5rem);

  /* Motion */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-menu:  220ms;
  --t-reveal: 600ms;

  /* Empilement sémantique */
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Repli pour les navigateurs sans OKLCH */
@supports not (color: oklch(0.5 0.1 250)){
  :root{
    --slate:#353E48; --green:#5E963F;
    --bg:#15191E; --surface:#1D222A; --surface-2:#262C35;
    --line:#2F3742; --line-soft:#242A33;
    --ink:#F4F6F7; --body:#B8C0C9; --muted:#8892A0;
    --green-bright:#7FBE58; --green-deep:#4A7832;
  }
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* `clip` et non `hidden` : `overflow-x:hidden` transformerait l'élément en
     conteneur de défilement, ce qui casse le scroll du document et sticky. */
  overflow-x:clip;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

/* L'attribut `hidden` ne pose qu'un `display:none` dans la feuille du
   navigateur : n'importe quelle règle d'auteur posant un `display` le bat.
   On le rend non négociable. */
[hidden]{display:none !important}

img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--ink);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-0.03em;
  text-wrap:balance;
}
h1{font-size:clamp(2.75rem, 7vw, 5.5rem)}
h2{font-size:clamp(2rem, 4.5vw, 3.25rem)}
h3{font-size:1.375rem;letter-spacing:-0.02em;line-height:1.2}
p{text-wrap:pretty}

::selection{background:var(--green);color:var(--bg)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--green-bright);
  outline-offset:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-toast);
  background:var(--green);color:var(--bg);padding:.75rem 1.25rem;font-weight:700;
}
.skip:focus{left:0}

/* ---------- 3. MISE EN PAGE ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{width:100%;max-width:96rem;margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.lede{font-size:clamp(1.0625rem,1.6vw,1.25rem);color:var(--body);max-width:60ch}
.prose{max-width:68ch}
.prose p + p{margin-top:1.15em}
/* En-tête de section : titre seul, empilé. Pas de label majuscule au-dessus. */
.s-head{max-width:56ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.s-head p{margin-top:1.25rem;color:var(--muted);max-width:56ch}

/* ---------- 4. BOUTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.75rem;border:1px solid transparent;
  font-family:var(--f-body);font-weight:700;font-size:.975rem;
  letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  transition:background var(--t-hover) var(--ease-out),
             color var(--t-hover) var(--ease-out),
             border-color var(--t-hover) var(--ease-out),
             transform var(--t-press) var(--ease-out);
}
.btn:active{transform:scale(0.97)}

.btn-primary{background:var(--green);color:var(--bg)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line)}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--green-bright)}
  .btn-secondary:hover{border-color:var(--ink);background:rgba(255,255,255,.05)}
}

.btn-text{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--green-bright);font-weight:700;font-size:.95rem;
}
.btn-text .arw{transition:transform var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn-text:hover .arw{transform:translateX(4px)}
}

/* ---------- 5. NAVIGATION ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:var(--z-sticky);
  height:72px;display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--t-menu) var(--ease-out),
             border-color var(--t-menu) var(--ease-out);
}
.nav.is-solid{background:var(--bg);border-bottom-color:var(--line)}
.nav .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
/* Lockup horizontal : le logo d'origine est empilé (pictogramme au-dessus du
   texte) et devient illisible sous 60px. On recompose donc à l'horizontale,
   pictogramme SVG + nom en Archivo, calé sur la graisse du logo. */
.lockup{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.lockup img{height:26px;width:auto;flex:0 0 auto}
.lockup-txt{display:flex;flex-direction:column;line-height:1;gap:.16em}
.lockup-name{
  font-family:var(--f-display);font-weight:800;font-size:1rem;
  letter-spacing:.02em;color:var(--ink);white-space:nowrap;
}
.lockup-sub{
  font-family:var(--f-display);font-weight:700;font-size:.5rem;
  letter-spacing:.30em;color:var(--green-bright);white-space:nowrap;
}
.foot-logo .lockup img{height:34px}
.foot-logo .lockup-name{font-size:1.25rem}
.foot-logo .lockup-sub{font-size:.6rem}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{
  font-size:.95rem;font-weight:600;color:var(--body);
  transition:color var(--t-hover) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{color:var(--ink)} }
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.nav-tel{
  font-family:var(--f-mono);font-size:.875rem;color:var(--body);
  transition:color var(--t-hover) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .nav-tel:hover{color:var(--ink)} }
.nav .btn{padding:.7rem 1.35rem;font-size:.9rem}

.burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span{
  display:block;width:22px;height:2px;background:var(--ink);position:relative;
  transition:background var(--t-menu) var(--ease-out);
}
.burger span::before,.burger span::after{
  content:'';position:absolute;left:0;width:22px;height:2px;background:var(--ink);
  transition:transform var(--t-menu) var(--ease-out);
}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed;inset:72px 0 0;z-index:var(--z-overlay);
  background:var(--bg);padding:2.5rem var(--gut) 3rem;
  display:flex;flex-direction:column;gap:.25rem;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-menu) var(--ease-out), visibility var(--t-menu);
  overflow-y:auto;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--f-display);font-size:1.75rem;font-weight:700;
  color:var(--ink);letter-spacing:-0.02em;padding:.75rem 0;
  border-bottom:1px solid var(--line-soft);
}
.drawer .btn{margin-top:2rem;align-self:flex-start}

@media (max-width:960px){
  .nav-links,.nav-tel{display:none}
  .burger{display:flex}
  .nav .btn{display:none}
}

/* ---------- 5b. ÉCRAN DE CHARGEMENT ----------
   Uniquement sur l'accueil, le temps de précharger les frames du hero.
   Le pictogramme s'assemble : les deux pans de toiture viennent se poser
   chacun le long de son propre axe, la fenêtre arrive en dernier, puis le
   nom se remplit du bas vers le haut comme le reste du site.

   Sécurité : une animation CSS pure masque l'écran au bout de 6 secondes,
   même si le JavaScript ne s'exécute jamais. La page n'est donc jamais
   bloquée derrière ce voile. */
.boot{
  position:fixed;inset:0;z-index:var(--z-toast);
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  animation:bootFailsafe 0s linear 6s forwards;
}
@keyframes bootFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none } }

.boot.is-done{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 520ms var(--ease-out), visibility 520ms;
}

/* Déjà vu dans cette session : pas d'assemblage, pas d'attente. */
.boot.is-instant,
.boot.is-instant *{animation:none !important;transition:none !important}
.boot.is-instant{opacity:0;visibility:hidden;pointer-events:none}

.boot-in{display:flex;flex-direction:column;align-items:center;gap:1.75rem}

.boot-mark{
  position:relative;
  width:clamp(190px,26vw,290px);
  aspect-ratio:721/339;
}
.boot-l{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* Chaque pan glisse le long de son propre axe, pas en diagonale générique. */
.boot-l-toit{
  opacity:0;transform:translate(-74px,96px);
  animation:bootToit 760ms var(--ease-out) 120ms forwards;
}
.boot-l-accent{
  opacity:0;transform:translate(82px,89px);
  animation:bootAccent 760ms var(--ease-out) 230ms forwards;
}
.boot-l-fenetre{
  opacity:0;transform:scale(0.86);
  animation:bootFenetre 420ms var(--ease-out) 620ms forwards;
}
@keyframes bootToit{ to{ opacity:1;transform:none } }
@keyframes bootAccent{ to{ opacity:1;transform:none } }
@keyframes bootFenetre{ to{ opacity:1;transform:none } }

.boot-word{
  display:flex;flex-direction:column;align-items:center;gap:.3em;
  overflow:hidden;
}
.boot-name,.boot-sub{
  font-family:var(--f-display);font-weight:800;color:var(--ink);
  line-height:1;display:block;
  clip-path:inset(100% 0 0 0);
  animation:bootWord 700ms var(--ease-out) 700ms forwards;
}
.boot-name{font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:.02em}
.boot-sub{
  font-size:clamp(.5rem,1vw,.62rem);letter-spacing:.30em;
  color:var(--green-bright);animation-delay:800ms;
}
@keyframes bootWord{ to{ clip-path:inset(0 0 0 0) } }

.boot-bar{
  width:clamp(150px,20vw,220px);height:2px;
  background:var(--line);overflow:hidden;
}
.boot-bar span{
  display:block;height:100%;width:0%;
  background:var(--green);
  transition:width 240ms var(--ease-out);
}

/* Moins d'animation : le logo est simplement là, l'écran s'efface vite. */
@media (prefers-reduced-motion: reduce){
  .boot-l,.boot-name,.boot-sub{
    animation:none !important;opacity:1;transform:none;clip-path:none;
  }
}

/* ---------- 6. HERO ---------- */

/* Séquence pilotée au scroll.
   .hero-seq est la piste de défilement ; .hero y reste collé et joue les
   frames sur un canvas. Sans JS, sans frames ou sous prefers-reduced-motion,
   .hero-seq retombe à 100dvh et l'image fixe du hero s'affiche : le bloc
   fonctionne exactement comme avant. */
.hero-seq{position:relative;height:100dvh}
.hero-seq.is-live{height:320vh}
.hero-seq.is-live .hero{position:sticky;top:0;height:100dvh;min-height:0}

.hero{
  position:relative;min-height:100dvh;display:flex;align-items:flex-end;
  padding-top:6rem;padding-bottom:clamp(3rem,7vw,5.5rem);
  overflow:hidden;
}
.hero-canvas{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;display:none;
}
.hero-seq.is-live .hero-canvas{display:block}
/* Le canvas remplace l'image fixe une fois la séquence prête */
.hero-seq.is-live .hero-media img{opacity:0}

/* Le bloc de texte s'efface sur la fin de la séquence, pour livrer
   l'image entière avant d'enchaîner sur le manifeste. */
.hero .wrap{transition:opacity 260ms var(--ease-out)}
.hero-seq.is-live .hero.is-fading .wrap{opacity:0;pointer-events:none}

/* Repère de progression discret, à droite. Il indique où l'on en est dans
   la séquence ; il disparaît dès qu'elle est terminée. */
.seq-rail{
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  z-index:4;width:2px;height:120px;background:rgb(255 255 255 / .16);
  display:none;
}
.hero-seq.is-live .seq-rail{display:block}
.seq-rail span{
  position:absolute;inset:0 0 auto;height:0;background:var(--green);
  transition:height 120ms linear;
}
@media (max-width:820px){ .seq-rail{display:none !important} }
.hero-media{position:absolute;inset:0;z-index:0;background:var(--bg)}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
/* Voile de lisibilité : concentré en bas à gauche, là où vivent le titre et
   les CTA. Le haut-droite reste clair pour que la matière du béton se lise. */
.hero-media::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to top,
      rgb(21 25 30 / .96) 0%,
      rgb(21 25 30 / .72) 24%,
      rgb(21 25 30 / 0)   64%),
    linear-gradient(to right,
      rgb(21 25 30 / .58) 0%,
      rgb(21 25 30 / .18) 38%,
      rgb(21 25 30 / 0)   62%);
}

/* Composition d'attente : deux pans diagonaux repris du pictogramme du logo.
   Elle disparaît d'elle-même dès que la vidéo ou une image est placée dans
   .hero-media, puisqu'elle est portée par .shot (voir §20). */
.hero-media .shot{
  background-image:
    linear-gradient(196deg, transparent 0 34%, oklch(0.245 0.018 251) 34% 61%, transparent 61%),
    linear-gradient(-196deg, transparent 0 46%, oklch(0.285 0.035 136) 46% 68%, transparent 68%),
    linear-gradient(160deg, oklch(0.21 0.014 251) 0%, oklch(0.155 0.010 251) 100%);
}
@supports not (color: oklch(0.5 0.1 250)){
  .hero-media .shot{
    background-image:
      linear-gradient(196deg, transparent 0 34%, #21272F 34% 61%, transparent 61%),
      linear-gradient(-196deg, transparent 0 46%, #2C3A28 46% 68%, transparent 68%),
      linear-gradient(160deg, #1A1F25 0%, #12161A 100%);
  }
}
/* Le hero doit paraître fini, pas annoté : pas de repère visible ici.
   Le brief de la vidéo est en commentaire dans index.html et dans
   MEDIAS-A-FOURNIR.md (emplacement 01). */
.hero-media .shot::after{content:none}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero h1{max-width:14ch}
.hero-sub{
  margin-top:1.5rem;max-width:46ch;
  font-size:clamp(1.0625rem,1.7vw,1.3rem);color:var(--ink);opacity:.92;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}

/* ---- Révélation « la coulée » ----
   Principe : le contenu est TOUJOURS visible par défaut. L'état masqué n'existe
   que sous l'attribut [data-pending], posé par le JS sur les seuls éléments
   situés sous la ligne de flottaison. Si le JS ne s'exécute pas, si un onglet
   reste en arrière-plan ou si le rendu est headless, la page reste lisible. */
.pour{display:block;overflow:hidden}
.pour > span{
  display:block;
  clip-path:inset(0 0 0 0);
  transition:clip-path 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.pour > span[data-pending]{
  clip-path:inset(100% 0 0 0);
  transform:translateY(0.12em);
}

.rise{
  transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}
.rise[data-pending]{opacity:0;transform:translateY(12px)}

/* Hero : entrée au chargement en CSS pur via @starting-style. Aucune
   dépendance au JS, donc aucun risque de hero vide. */
@starting-style{
  .hero .pour > span{clip-path:inset(100% 0 0 0);transform:translateY(0.12em)}
  .hero .hero-sub,.hero .hero-cta{opacity:0;transform:translateY(12px)}
}
.hero .pour:nth-of-type(2) > span{transition-delay:70ms}
.hero .hero-sub,.hero .hero-cta{
  opacity:1;transform:none;
  transition:opacity 520ms var(--ease-out) 260ms, transform 520ms var(--ease-out) 260ms;
}
.hero .hero-cta{transition-delay:340ms}

/* ---------- 7. MANIFESTE ---------- */
.manifest{background:var(--surface);border-block:1px solid var(--line)}
.manifest p{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.75rem,4.2vw,3rem);line-height:1.14;letter-spacing:-0.03em;
  color:var(--ink);max-width:22ch;text-wrap:balance;
}
.manifest .accent{color:var(--green-bright)}

/* ---------- 8. PARCOURS (5 étapes) ---------- */
.steps{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:900px){ .steps{grid-template-columns:repeat(5,1fr)} }

/* Grille à 6 entrées : 3 colonnes au desktop, 2 en tablette, 1 en mobile.
   Les trois cas tombent juste sur 6, donc aucune cellule vide. */
.steps-6{grid-template-columns:1fr}
@media (min-width:620px){ .steps-6{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .steps-6{grid-template-columns:repeat(3,1fr)} }
.step{
  background:var(--bg);padding:2.25rem 1.75rem 2.5rem;
  display:flex;flex-direction:column;gap:.85rem;
  transition:background var(--t-hover) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .step:hover{background:var(--surface)} }
/* Numéro réservé aux vraies séquences ordonnées (les cinq phases d'un chantier).
   Ailleurs, une simple marque verte : une liste n'est pas une suite d'étapes. */
.step .num{
  font-family:var(--f-mono);font-size:.8125rem;color:var(--green-bright);
  letter-spacing:.06em;
}
.step .tick{display:block;width:14px;height:3px;background:var(--green)}
.step h3{font-size:1.25rem}
.step p{font-size:.95rem;color:var(--muted);line-height:1.55}

/* ---------- 9. PRESTATIONS (liste éditoriale) ---------- */
.plist{border-top:1px solid var(--line)}
.prow{
  position:relative;display:block;border-bottom:1px solid var(--line);
  padding-block:clamp(1.75rem,3.2vw,2.5rem);
  transition:padding-inline var(--t-hover) var(--ease-out);
}
.prow-in{
  position:relative;z-index:1;
  display:grid;gap:.5rem 2rem;align-items:baseline;
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .prow-in{grid-template-columns:minmax(0,22rem) minmax(0,1fr) auto}
}
.prow h3{
  font-size:clamp(1.5rem,2.6vw,2rem);
  transition:color var(--t-hover) var(--ease-out);
}
.prow p{color:var(--muted);font-size:.975rem;max-width:52ch}
.prow .go{
  color:var(--green-bright);font-weight:700;font-size:.9rem;
  display:inline-flex;align-items:center;gap:.4rem;
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
/* Visuel qui se révèle depuis la droite au survol.
   Sélecteur descendant volontaire : .shot (§20) est déclaré plus bas avec la
   même spécificité et écraserait sinon `position`. */
.prow .prow-shot{
  position:absolute;top:50%;right:2rem;transform:translateY(-50%);
  width:min(21rem,30vw);aspect-ratio:16/10;z-index:0;
  clip-path:inset(0 0 0 100%);
  transition:clip-path 420ms var(--ease-out);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .prow:hover{padding-inline:1.25rem}
  .prow:hover h3{color:var(--green-bright)}
  .prow:hover .go{opacity:1;transform:none}
  .prow:hover .prow-shot{clip-path:inset(0 0 0 0%)}
}
@media (max-width:819px){
  .prow-shot{display:none}
  .prow .go{opacity:1;transform:none}
}

/* ---------- 10b. GALERIE ----------
   Grille d'images seules, sans légende ni donnée de chantier. Le rythme vient
   des formats : quelques vignettes occupent deux colonnes ou deux rangées. */
.gallery{
  display:grid;gap:clamp(.75rem,1.4vw,1.25rem);
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:minmax(0,auto);
  /* Les vignettes larges (span 2) laissaient une case vide quand une image
     seule les précédait : le calage dense remonte l'image suivante dans le
     trou, chaque rangée occupe alors toute la largeur. La galerie est sans
     légende ni ordre imposé, ce réagencement est sans effet sur le propos. */
  grid-auto-flow:dense;
}
@media (min-width:760px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1200px){ .gallery{grid-template-columns:repeat(4,1fr)} }

.gallery .shot{aspect-ratio:4/3;background:var(--surface-2)}
.gallery .g-wide{grid-column:span 2}
.gallery .g-wide .shot{aspect-ratio:16/9}
@media (max-width:759px){
  .gallery .g-wide{grid-column:span 2}
  .gallery .g-wide .shot{aspect-ratio:16/10}
}

/* Léger rapprochement au survol : l'image respire, rien ne bouge autour. */
@media (hover:hover) and (pointer:fine){
  .gallery .shot img{transition:transform 520ms var(--ease-out)}
  .gallery .shot:hover img{transform:scale(1.03)}
}

/* ---------- 10c. COMPARATIF DE TECHNIQUES ----------
   Trois options mises côte à côte pour être comparées d'un regard. Pas de
   cartouche ni de bordure : la photo porte l'information, le texte la nomme. */
.techs{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:820px){ .techs{grid-template-columns:repeat(3,1fr)} }
.tech .shot{aspect-ratio:4/3;margin-bottom:1.25rem}
.tech h3{font-size:1.25rem;margin-bottom:.5rem}
.tech p{color:var(--muted);font-size:.95rem;line-height:1.55;max-width:38ch}
.tech .quand{
  display:block;margin-top:.75rem;font-family:var(--f-mono);font-size:.8125rem;
  color:var(--green-bright);line-height:1.5;
}

/* ---------- 11. BANDE DÉFILANTE (parc machines) ---------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);
  background:var(--surface);padding-block:1.5rem;
}
.marquee-track{
  display:flex;gap:3.5rem;width:max-content;
  animation:slide 42s linear infinite;
}
.marquee-track span{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-0.02em;
  color:var(--muted);white-space:nowrap;
  display:flex;align-items:center;gap:3.5rem;
}
.marquee-track span::after{
  content:'';width:7px;height:7px;background:var(--green);flex:0 0 auto;
}
@keyframes slide{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto}
}

/* ---------- 12. SPLIT texte / visuel ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
/* Colonnes de hauteurs très différentes (formulaire face aux coordonnées) :
   on aligne sur le haut, sinon les deux titres ne sont pas sur la même ligne. */
.split.top{align-items:start}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.rev > *:first-child{order:2}
}
/* ---------- 13. CTA FINAL ---------- */
.cta-final{background:var(--surface);border-block:1px solid var(--line);text-align:center}
.cta-final h2{max-width:18ch;margin-inline:auto}
.cta-final .hero-cta{justify-content:center;margin-top:2.5rem}

/* ---------- 14. FORMULAIRE ---------- */
.form{display:grid;gap:1.25rem}
.field{display:grid;gap:.5rem}
.field label{font-size:.9rem;font-weight:600;color:var(--ink)}
.field .hint{font-size:.8125rem;color:var(--muted)}
.field input,.field select,.field textarea{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:.9rem 1rem;font-size:1rem;width:100%;border-radius:0;
  transition:border-color var(--t-hover) var(--ease-out);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green-bright);outline:none;
}
.field textarea{min-height:9rem;resize:vertical}
.field .err{font-size:.8125rem;color:#F0876A;display:none}
.field.is-err input,.field.is-err select,.field.is-err textarea{border-color:#F0876A}
.field.is-err .err{display:block}
.form-row{display:grid;gap:1.25rem}
@media (min-width:640px){ .form-row{grid-template-columns:1fr 1fr} }
.form-status{padding:1rem 1.25rem;border:1px solid var(--line);font-size:.95rem;display:none}
.form-status.ok{display:block;border-color:var(--green-deep);color:var(--green-bright)}
.form-status.ko{display:block;border-color:#F0876A;color:#F0876A}
.form-status a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* Envoi en cours : anneau qui tourne dans le bouton. */
.btn:disabled,.btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.btn .spinner{
  display:inline-block;width:14px;height:14px;flex:0 0 auto;
  border:2px solid rgb(21 25 30 / .30);
  border-top-color:currentColor;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
/* Moins d'animation : on ralentit plutôt que d'arrêter. Un indicateur de
   chargement immobile ne renseigne plus sur rien. */
@media (prefers-reduced-motion: reduce){
  .btn .spinner{animation-duration:1.6s}
}

/* ---------- 14b. ACCUSÉ DE RÉCEPTION ----------
   Le panneau remplace le formulaire une fois la demande partie. Il se remplit
   du bas vers le haut, comme le reste du site, et la coche se dessine. */
.sent{
  border:1px solid var(--line);border-top:3px solid var(--green);
  background:var(--surface);padding:clamp(2rem,4vw,3rem);
  clip-path:inset(100% 0 0 0);
}
.sent.is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path 620ms var(--ease-out);
}
.sent-check{width:52px;height:52px;margin-bottom:1.5rem;overflow:visible}
.sent-check circle,.sent-check path{
  fill:none;stroke:var(--green-bright);stroke-width:3;
  stroke-linecap:square;stroke-linejoin:miter;
}
.sent-check circle{stroke-dasharray:151;stroke-dashoffset:151}
.sent-check path{stroke-dasharray:36;stroke-dashoffset:36}
.sent.is-in .sent-check circle{
  animation:drawRing 620ms var(--ease-out) 180ms forwards;
}
.sent.is-in .sent-check path{
  animation:drawTick 320ms var(--ease-out) 640ms forwards;
}
@keyframes drawRing{ to{stroke-dashoffset:0} }
@keyframes drawTick{ to{stroke-dashoffset:0} }

.sent h3{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.85rem}
.sent p{color:var(--body);max-width:46ch}
.sent p + p{margin-top:.85rem}
.sent .rappel{
  margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.8125rem;color:var(--muted);line-height:1.7;
}
.sent .rappel b{color:var(--green-bright);font-weight:500}
.sent .btn{margin-top:1.75rem}

@media (prefers-reduced-motion: reduce){
  .sent{clip-path:none}
  .sent-check circle,.sent-check path{stroke-dashoffset:0;animation:none}
}

/* ---------- 15. COORDONNÉES ---------- */
.contact-list{display:grid;gap:1.5rem}
.contact-item{display:grid;gap:.25rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line-soft)}
.contact-item dt{font-size:.8125rem;color:var(--muted);letter-spacing:.04em}
.contact-item dd{font-size:1.0625rem;color:var(--ink);font-weight:600}
.contact-item dd a{transition:color var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .contact-item dd a:hover{color:var(--green-bright)} }

/* ---------- 15b. CARTE ---------- */
.map{
  position:relative;border:1px solid var(--line);background:var(--surface-2);
  aspect-ratio:4/3;overflow:hidden;
  /* Leaflet empile ses panneaux et contrôles jusqu'à z-index 1000, ce qui
     passerait au-dessus de la navbar (100). En ouvrant ici un contexte
     d'empilement propre, toute cette échelle reste confinée dans la carte. */
  z-index:0;
  isolation:isolate;
}
.map .leaflet-container{width:100%;height:100%;background:var(--surface-2)}
/* Le fond CARTO dark est très sombre : léger relèvement pour que le réseau
   routier reste lisible sans sortir du thème. */
.map .leaflet-tile-pane{filter:brightness(1.35) contrast(1.05)}
/* Attribution obligatoire, mais discrète et lisible */
.map .leaflet-control-attribution{
  background:rgba(21,25,30,.82);color:var(--muted);
  font-family:var(--f-body);font-size:10px;border-radius:0;
}
.map .leaflet-control-attribution a{color:var(--muted)}
.map .leaflet-control-zoom a{
  background:var(--surface);color:var(--ink);border-color:var(--line);
  border-radius:0;
}
.map .leaflet-control-zoom a:hover{background:var(--surface-2)}
/* Repère : le pictogramme du toit, en vert de marque */
.map-pin{
  width:34px;height:34px;background:var(--green);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(94,150,63,.22);
}
.map-pin svg{width:20px;height:20px;display:block}
.map-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.75rem;padding:2rem;text-align:center;
  color:var(--muted);font-size:.9375rem;
}
.map-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.map-actions .btn{padding:.8rem 1.35rem;font-size:.9rem}

/* ---------- 16. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-size:1.125rem;font-weight:700;color:var(--ink);
  letter-spacing:-0.01em;line-height:1.3;
}
.faq-q .chev{
  flex:0 0 auto;width:14px;height:14px;margin-top:.35rem;
  border-right:2px solid var(--green-bright);border-bottom:2px solid var(--green-bright);
  transform:rotate(45deg);
  transition:transform var(--t-menu) var(--ease-out);
}
.faq-q[aria-expanded="true"] .chev{transform:rotate(-135deg)}
.faq-a{display:none;padding-bottom:1.75rem;color:var(--muted);max-width:66ch}
.faq-a.is-open{display:block}

/* ---------- 17. FIL D'ARIANE ---------- */
.crumb{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.8125rem;color:var(--muted);padding-top:7rem;
}
.crumb a{transition:color var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .crumb a:hover{color:var(--ink)} }
.crumb .sep{color:var(--line)}

/* ---------- 18. EN-TÊTE DE PAGE INTÉRIEURE ---------- */
.phead{padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(2.25rem,5.5vw,4rem);max-width:18ch}
.phead .lede{margin-top:1.5rem}

/* ---------- 18b. PAGE 404 ---------- */
.e404{
  min-height:100dvh;display:flex;align-items:center;
  padding-block:8rem clamp(4rem,8vw,7rem);
}
.e404-code{
  font-size:.8125rem;color:var(--green-bright);letter-spacing:.08em;
  margin-bottom:1.5rem;
}
.e404 h1{max-width:14ch}
.e404 .lede{margin-top:1.5rem}
.e404-liens{
  display:flex;flex-wrap:wrap;gap:1.75rem;
  margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--line);
}
.e404-liens a{
  font-size:.95rem;font-weight:600;color:var(--body);
  transition:color var(--t-hover) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .e404-liens a:hover{color:var(--green-bright)} }

/* ---------- 19. PIED DE PAGE ---------- */
.foot{background:var(--surface);border-top:1px solid var(--line);padding-block:4rem 2.5rem}
.foot-grid{display:grid;gap:2.5rem;margin-bottom:3rem}
@media (min-width:820px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr} }
.foot-logo img{height:44px;width:auto;margin-bottom:1.25rem}
.foot h4{
  font-family:var(--f-body);font-size:.8125rem;font-weight:700;color:var(--ink);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem;
}
.foot ul{display:grid;gap:.6rem}
.foot li a,.foot p{font-size:.9375rem;color:var(--muted)}
.foot li a{transition:color var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .foot li a:hover{color:var(--ink)} }
/* Bas de page en trois lignes, centrées : confidentialité, mention légale,
   signature de l'agence. Empilé à toutes les tailles pour garder cet ordre
   de lecture. */
.foot-bar{
  padding-top:2rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  text-align:center;font-size:.8125rem;color:var(--muted);
}
.foot-bar a{transition:color var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .foot-bar a:hover{color:var(--ink)}
}
/* Signature de l'agence : discrète, mais l'unique lien sortant du site. */
.foot-bar .credit a{color:var(--body);font-weight:600}
@media (hover:hover) and (pointer:fine){
  .foot-bar .credit a:hover{color:var(--green-bright)}
}

/* Mobile : tout le pied de page se centre, colonnes comprises. */
@media (max-width:819px){
  .foot{text-align:center}
  .foot-grid{justify-items:center}
  .foot-logo .lockup{justify-content:center}
  .foot p{margin-inline:auto;max-width:34ch}
  .foot ul{justify-items:center}
}
.foot-bar a{transition:color var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .foot-bar a:hover{color:var(--ink)} }

/* ---------- 20. EMPLACEMENTS VISUELS ----------
   Surface « béton » procédurale, en attendant les photos réelles du client.
   Dès qu'une <img> est placée dans .shot, elle recouvre la texture.
   Voir MEDIAS-A-FOURNIR.md pour le brief de chaque emplacement.          */
.shot{
  position:relative;overflow:hidden;background:var(--surface-2);
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.045) 0 38%, rgba(0,0,0,.10) 38% 100%),
    linear-gradient(to bottom, rgba(255,255,255,.03), rgba(0,0,0,.14));
  isolation:isolate;
}
.shot::before{
  content:'';position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.shot::after{
  content:attr(data-shot);
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  font-family:var(--f-mono);font-size:.6875rem;line-height:1.4;
  color:var(--muted);letter-spacing:.03em;
  border-left:2px solid var(--green);padding-left:.6rem;max-width:80%;
}
.shot img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
}
/* Dès qu'une image réelle est présente, le repère disparaît */
.shot:has(img)::after,.shot:has(img)::before{display:none}

/* ---------- 21. ACCESSIBILITÉ MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .prow-shot{display:none}
}

/* ---------- 22. UTILITAIRES ---------- */
.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;
}
.mono{font-family:var(--f-mono)}
.accent{color:var(--green-bright)}