/* =====================================================================
   Feuille de style : « forge noire »
   ---------------------------------------------------------------------
   Identité : acier noir, braise de forge, gris acier froid. Titres en
   capitales condensées, boutons et étiquettes arrondis, plaques rivetées,
   repères de plan technique. Rien de décoratif qui ne vienne du métier.
   Pour changer une couleur, modifiez les variables de :root.
   Tout est en « rem » : le texte et les espaces grandissent avec l'écran.
   Police auto-hébergée (aucune requête vers un autre site).
   ===================================================================== */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/assets/fonts/archivo.woff2") format("woff2"); }

:root {
  /* Acier */
  --noir: #0a0b0d;          /* fond principal : acier noirci */
  --noir-2: #0f1114;        /* bandes alternées */
  --plaque: #16191d;        /* plaques (cartes) */
  --plaque-2: #1e2227;      /* plaques survolées, champs */
  --plaque-3: #2a3036;
  --blanc: #f3f5f7;         /* titres, texte principal */
  --acier-clair: #d3d9df;   /* texte secondaire (très lisible) */
  --acier: #9aa5b0;         /* texte tertiaire (contraste 7:1) */
  --acier-fonce: #5d6872;
  --clair: #e8ebee;         /* fonds clairs (acier brossé) */
  --clair-texte: #3b434b;
  /* Feu */
  --braise: #ff5a14;        /* accent principal */
  --braise-2: #ff8a24;
  --chaud: #ffd28f;         /* blanc-chaud */
  --braise-sur-clair: #c4400a;
  --rouille: #b5532b;
  --chaleur: linear-gradient(100deg, #ffb23f 0%, #ff7a1a 48%, #ff4210 100%);
  --ligne: rgba(173, 185, 196, 0.2);
  --ligne-forte: rgba(173, 185, 196, 0.38);
  --erreur: #b3261e;

  --r: 1.4rem;              /* arrondi des plaques */
  --r-s: 0.9rem;            /* arrondi des champs */
  --pilule: 999px;          /* boutons et étiquettes */
  --entete-h: clamp(68px, 4.6vw, 92px);
  --police: "Archivo", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 0.55vw + 11px, 21px); -webkit-text-size-adjust: 100%; background: var(--noir); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; font-family: var(--police); font-stretch: 100%; font-size: 1.04rem; font-weight: 400; line-height: 1.7;
  color: rgba(243, 245, 247, 0.9); background: var(--noir); padding-bottom: 76px; overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--chaud); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blanc); }
h1, h2, h3, h4 {
  font-family: var(--police); font-stretch: 66%; font-weight: 800; text-transform: uppercase; line-height: 0.94; margin: 0 0 0.5em;
  color: var(--blanc); letter-spacing: 0.005em; overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.3rem, 0.8rem + 3.8vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 1rem + 3.2vw, 4.8rem); }
h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.7rem); line-height: 1; }
h1 em, h2 em, h3 em, .accent { font-style: normal; color: var(--braise); }
p, ul, ol, table { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 600; color: var(--blanc); }
button { font: inherit; }
::selection { background: var(--braise); color: var(--noir); }
:focus-visible { outline: 2px solid var(--braise-2); outline-offset: 3px; }
[id] { scroll-margin-top: 96px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.conteneur { width: min(100% - 2.5rem, 78rem); margin-inline: auto; }
.section { padding: clamp(3.5rem, 2rem + 5.5vw, 8rem) 0; position: relative; }
.prose p, .prose li { max-width: 62ch; }
.sous-titre { color: var(--acier-clair); font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.4rem); line-height: 1.6; max-width: 56ch; }

/* Étiquettes arrondies */
.surtitre, .hero__surtitre, .eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; margin: 0 0 1.4rem; padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acier-clair);
  border: 1px solid var(--ligne-forte); border-radius: var(--pilule); background: rgba(10, 11, 13, 0.45); backdrop-filter: blur(6px);
}
.surtitre::before, .hero__surtitre::before, .eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--braise); box-shadow: 0 0 0.8rem 0.1rem rgba(255, 90, 20, 0.8); flex: none; }
.eyebrow b { color: var(--braise-2); font-weight: 700; margin-right: 0.2rem; }

/* Grain métal */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Règle graduée : séparateur de plan technique (se trace au défilement) */
.ornement { width: min(100% - 2.5rem, 78rem); margin: 0 auto; padding: 1.4rem 0; color: var(--acier); }
.ornement svg { width: 100%; height: auto; overflow: visible; }
.ornement__trace { fill: none; stroke: currentColor; stroke-width: 1; }
.ornement__rivet { fill: var(--braise); }
.sep { height: 1px; width: min(100% - 2.5rem, 78rem); margin: 0 auto; background: var(--ligne); }

/* Repères de cadrage aux quatre coins (viseur de plan technique) */
.reperes { position: absolute; inset: clamp(0.8rem, 1.8vw, 1.8rem); z-index: 3; pointer-events: none; }
.reperes i { position: absolute; width: 1.7rem; height: 1.7rem; border: 0 solid rgba(243, 245, 247, 0.55); }
.reperes i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; border-top-left-radius: 0.5rem; }
.reperes i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; border-top-right-radius: 0.5rem; }
.reperes i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; border-bottom-left-radius: 0.5rem; }
.reperes i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; border-bottom-right-radius: 0.5rem; }

.lien-evitement { position: absolute; left: 12px; top: -120px; z-index: 3000; background: var(--braise); color: var(--noir); padding: 12px 18px; font-weight: 600; border-radius: var(--pilule); }
.lien-evitement:focus { top: 12px; }
.progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: var(--chaleur); box-shadow: 0 0 1rem rgba(255, 90, 20, 0.8); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- Boutons (pilules) ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 3.5rem; padding: 0 2.1rem; border: 1px solid var(--ligne-forte); border-radius: var(--pilule); background: transparent; color: var(--blanc);
  font-family: var(--police); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.3; cursor: pointer;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blanc); border-radius: inherit; transform: scale(0.4, 0.2); opacity: 0; transition: transform 0.55s var(--ease), opacity 0.4s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; opacity: 1; }
.btn:hover, .btn:focus-visible { color: var(--noir); border-color: var(--blanc); }
.btn--principal { background: linear-gradient(100deg, #ffa733, #ff5a14); color: var(--noir); border-color: transparent; box-shadow: 0 0.6rem 2.2rem -0.4rem rgba(255, 90, 20, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn--principal::before { background: var(--chaud); }
.btn--principal:hover, .btn--principal:focus-visible { color: var(--noir); border-color: transparent; box-shadow: 0 0.9rem 3rem -0.2rem rgba(255, 138, 36, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn--contour { color: var(--blanc); }
.btn--secondaire { min-height: 3rem; padding: 0 1.4rem; letter-spacing: 0.1em; font-size: 0.76rem; border-color: var(--ligne-forte); color: var(--acier-clair); }
.btn--secondaire::before { background: var(--braise); }
.btn--secondaire:hover, .btn--secondaire:focus-visible { color: var(--noir); border-color: var(--braise); }
.btn--lien { min-height: 2.8rem; padding: 0 0.8rem; border: 0; background: none; text-decoration: underline; letter-spacing: 0.08em; color: var(--braise-sur-clair); box-shadow: none; }
.btn--lien::before { display: none; }
.btn--large { width: 100%; }
.btn--magnet { will-change: transform; }
.icone { width: 1.1rem; height: 1.1rem; flex: none; fill: currentColor; }

/* ---------- En-tête ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 200; transition: transform 0.7s var(--ease), background-color 0.5s ease, border-color 0.5s ease; border-bottom: 1px solid transparent; }
.entete--solide { background: rgba(10, 11, 13, 0.8); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom-color: var(--ligne); }
.entete--cache { transform: translateY(-101%); }
.entete__barre { display: flex; align-items: center; gap: 1rem; height: var(--entete-h); width: min(100% - 2.5rem, 84rem); }
.logo { display: inline-flex; align-items: center; gap: 0.7rem; margin-right: auto; min-height: 2.8rem; color: var(--blanc); text-decoration: none; font-stretch: 70%; font-weight: 800; font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.55rem); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.logo__enclume { width: 1.9rem; height: 1.9rem; fill: var(--braise); filter: drop-shadow(0 0 0.5rem rgba(255, 90, 20, 0.6)); }
.logo:hover { color: var(--chaud); }
.menu-btn { position: relative; z-index: 260; display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.9rem; padding: 0 1.1rem; background: rgba(10, 11, 13, 0.5); color: var(--blanc); border: 1px solid var(--ligne-forte); border-radius: var(--pilule); cursor: pointer; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.menu-btn__barres { position: relative; width: 1.2rem; height: 2px; background: currentColor; display: block; border-radius: 2px; }
.menu-btn__barres::before, .menu-btn__barres::after { content: ""; position: absolute; left: 0; width: 1.2rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.5s var(--ease), top 0.5s var(--ease); }
.menu-btn__barres::before { top: -6px; } .menu-btn__barres::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-btn__barres { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__barres::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__barres::after { top: 0; transform: rotate(-45deg); }
.nav { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; gap: 2.2rem; align-items: center; justify-content: center; background: var(--noir); clip-path: circle(0% at calc(100% - 3.2rem) 2.4rem); visibility: hidden; transition: clip-path 0.8s var(--ease), visibility 0s 0.8s; }
.menu-ouvert .nav { clip-path: circle(150% at calc(100% - 3.2rem) 2.4rem); visibility: visible; transition: clip-path 0.9s var(--ease), visibility 0s; }
.nav__liste { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav__liste li { overflow: hidden; }
.nav__liste a { display: block; padding: 0.2rem 1.2rem; color: var(--blanc); text-decoration: none; font-stretch: 66%; font-weight: 800; text-transform: uppercase; font-size: clamp(3rem, 12vw, 4.6rem); line-height: 1; transform: translateY(110%); transition: transform 0.8s var(--ease), color 0.3s; }
.menu-ouvert .nav__liste a { transform: none; }
.menu-ouvert .nav__liste li:nth-child(1) a { transition-delay: 0.15s; } .menu-ouvert .nav__liste li:nth-child(2) a { transition-delay: 0.2s; }
.menu-ouvert .nav__liste li:nth-child(3) a { transition-delay: 0.25s; } .menu-ouvert .nav__liste li:nth-child(4) a { transition-delay: 0.3s; }
.menu-ouvert .nav__liste li:nth-child(5) a { transition-delay: 0.35s; } .menu-ouvert .nav__liste li:nth-child(6) a { transition-delay: 0.4s; }
.nav__liste a:hover, .nav__liste a[aria-current="page"] { color: var(--braise); }
.nav__tel { opacity: 0; transition: opacity 0.8s 0.5s; }
.menu-ouvert .nav__tel { opacity: 1; }
.entete__appel { display: none; white-space: nowrap; min-height: 2.9rem; padding: 0 1.1rem; border-color: rgba(255, 90, 20, 0.7); }
.entete__appel-texte { display: none; }

/* ---------- Fil d'Ariane ---------- */
.fil-ariane { margin-bottom: 1.4rem; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--acier); }
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.fil-ariane li + li::before { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--braise); margin-right: 0.6rem; vertical-align: middle; }
.fil-ariane a { color: var(--acier-clair); }

/* ---------- Héros des pages de prestation ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(94svh, 62rem); background: var(--noir); color: var(--blanc); }
.hero__media { position: absolute; inset: -9% 0; z-index: -3; will-change: transform; }
.hero__img, .hero__media canvas { width: 100%; height: 100%; object-fit: cover; }
.hero__img { filter: saturate(1) contrast(1.05) brightness(0.96); animation: kenburns 10s var(--ease) both; }
.hero__media canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero__media.fx-pret canvas { opacity: 1; }
.hero__media.fx-pret .hero__img { opacity: 0; animation: none; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
.hero__voile { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(10, 11, 13, 0.8) 0%, rgba(10, 11, 13, 0.46) 46%, rgba(10, 11, 13, 0.04) 86%), linear-gradient(180deg, rgba(10, 11, 13, 0.62) 0%, rgba(10, 11, 13, 0) 24%, rgba(10, 11, 13, 0.34) 62%, var(--noir) 100%); }
.hero__contenu { flex: none; padding-top: calc(var(--entete-h) + 3.5rem); padding-bottom: clamp(3.2rem, 6vw, 6.5rem); }
.hero h1 { font-size: clamp(2.2rem, 0.5rem + 3.3vw, 4.6rem); max-width: 26ch; text-shadow: 0 2px 50px rgba(0, 0, 0, 0.5); }
.hero__sous-titre { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.5rem); color: var(--blanc); max-width: 48ch; font-weight: 400; line-height: 1.55; opacity: 0.95; }
.hero__actions { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.8rem 0; max-width: 30rem; }
.confiance { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.9rem; }
.confiance li { position: relative; padding-left: 1.6rem; color: var(--blanc); font-size: 1rem; line-height: 1.45; max-width: 34ch; opacity: 0.92; }
.confiance li::before { content: ""; position: absolute; left: 0.1rem; top: 0.5em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--braise); box-shadow: 0 0 0.7rem rgba(255, 90, 20, 0.8); }
.hero__definition { color: var(--acier-clair); font-size: 1rem; max-width: 60ch; }
.mention-relation { font-size: 0.9rem; color: var(--acier); margin: 0; max-width: 70ch; line-height: 1.6; }

/* Étincelles (braises qui montent) */
.etincelles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.etincelle { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--braise-2); box-shadow: 0 0 8px 2px rgba(255, 110, 30, 0.85); opacity: 0; will-change: transform, opacity; }

/* ---------- Bandeau défilant (marquee) ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--ligne); background: var(--noir-2); padding: 1.2rem 0; user-select: none; }
.marquee__piste { display: flex; width: max-content; will-change: transform; }
.marquee__groupe { display: flex; align-items: center; flex: none; }
.marquee__mot { font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(2.8rem, 1.4rem + 4.4vw, 6.2rem); line-height: 0.95; color: transparent; -webkit-text-stroke: 1.5px rgba(211, 217, 223, 0.6); padding: 0 clamp(1.2rem, 2.4vw, 3rem); white-space: nowrap; }
.marquee__mot:nth-child(4n+3) { color: var(--blanc); -webkit-text-stroke: 0; }
.marquee__rivet { width: 0.9rem; height: 0.9rem; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff 0%, #aab3bc 35%, #4a525a 75%); box-shadow: 0 0 0.6rem rgba(255, 90, 20, 0.5); }

/* ---------- Disposition : contenu + formulaire latéral ---------- */
.disposition { display: block; }
.disposition__formulaire { margin: 2rem 0; }
.disposition__avant > .section:first-child { padding-top: clamp(2.2rem, 3vw, 3.6rem); }

/* ---------- Puces de navigation (étiquettes) ---------- */
.puces { padding: 2.2rem 0 0; }
.puces ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.puces a { display: inline-flex; align-items: center; min-height: 2.8rem; padding: 0 1.3rem; border: 1px solid var(--ligne-forte); border-radius: var(--pilule); color: var(--acier-clair); text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s; }
.puces a:hover { background: var(--braise); color: var(--noir); border-color: var(--braise); }

/* ---------- Texte courant ---------- */
.prose h2 { margin-top: 0; }
.prose h3 { margin-top: 1.7em; color: var(--braise-2); font-stretch: 70%; }
.prose a { color: var(--chaud); }
.prose ul:not(.points) li { margin-bottom: 0.45em; }
.prose > p:first-of-type { font-size: 1.12em; color: var(--blanc); }
.avertissement-photos { border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 0.9rem 1.3rem; background: rgba(255, 255, 255, 0.03); font-size: 0.95rem; color: var(--acier-clair); max-width: 62ch; }
.section + .section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ligne), transparent); }

/* ---------- Galerie : plaques-photos ---------- */
.galerie__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.4rem; margin: 2rem 0 0.6rem; }
.carte-photo { position: relative; margin: 0; display: flex; flex-direction: column; background: var(--plaque); border: 1px solid var(--ligne); border-radius: var(--r); padding: 0.6rem 0.6rem 0; overflow: hidden; transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); transform-style: preserve-3d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.carte-photo:hover { border-color: rgba(255, 90, 20, 0.5); box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.95), 0 0 2.4rem -0.6rem rgba(255, 90, 20, 0.35); }
.carte-photo__lien { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--plaque-2); border-radius: calc(var(--r) - 0.6rem); }
.carte-photo__lien img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1) contrast(1.04) brightness(1); transition: transform 1.2s var(--ease), filter 0.8s var(--ease); will-change: transform; }
.carte-photo__lien::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 115%, rgba(10, 11, 13, 0.55), transparent 55%); pointer-events: none; }
.carte-photo:hover .carte-photo__lien img { transform: scale(1.06); }
.carte-photo__legende { padding: 1rem 0.5rem 0.2rem; font-stretch: 85%; font-weight: 500; font-size: 1.1rem; line-height: 1.3; color: var(--acier-clair); flex: 1; }
.carte-photo__btn { margin: 0.7rem 0.3rem 0.9rem; }
.glare { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; border-radius: inherit; }
.glare::before { content: ""; position: absolute; left: -50%; top: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 190, 120, 0.2), transparent 60%); opacity: 0; transform: translate(var(--gx, 0), var(--gy, 0)); transition: opacity 0.4s; }
.tilt-actif .glare::before { opacity: 1; }

/* Révélation à la torche : la couleur n'apparaît que sous la lumière de la forge */
.torche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 1; filter: saturate(1.18) contrast(1.06) brightness(1.1) !important; -webkit-mask-image: radial-gradient(circle var(--r, 0px) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.75) 40%, transparent 100%); mask-image: radial-gradient(circle var(--r, 0px) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.75) 40%, transparent 100%); transform: none !important; }
html.torche-actif .carte-photo__lien img:not(.torche), html.torche-actif .horizon__arche img:not(.torche) { filter: saturate(0.88) brightness(0.92) contrast(1.05); }
html.torche-actif .carte-photo:hover .carte-photo__lien img:not(.torche), html.torche-actif .horizon__carte:hover .horizon__arche img:not(.torche) { transform: none; }

/* ---------- Visionneuse ---------- */
.visionneuse { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.visionneuse::backdrop { background: rgba(6, 7, 8, 0.97); }
.visionneuse__cadre { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4.2rem 1rem 1.4rem; color: var(--blanc); }
.visionneuse__img { max-width: 100%; max-height: calc(100vh - 10rem); width: auto; height: auto; border: 1px solid var(--ligne); border-radius: var(--r); background: #000; }
.visionneuse__legende { margin: 1rem 0 0; text-align: center; font-stretch: 85%; font-weight: 500; font-size: 1.2rem; color: var(--acier-clair); max-width: 70ch; }
.visionneuse__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; background: rgba(10, 11, 13, 0.7); color: var(--blanc); border: 1px solid var(--ligne-forte); border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1; transition: background-color 0.3s, color 0.3s; }
.visionneuse__btn:hover { background: var(--braise); color: var(--noir); }
.visionneuse__fermer { top: 0.9rem; right: 0.9rem; } .visionneuse__prec { left: 0.7rem; top: 50%; transform: translateY(-50%); } .visionneuse__suiv { right: 0.7rem; top: 50%; transform: translateY(-50%); }

/* ---------- Bandeaux d'appel à l'action ---------- */
.bandeau-cta { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; margin: clamp(2.4rem, 5vw, 4.5rem) 0; padding: clamp(1.8rem, 4vw, 3.4rem); border: 1px solid rgba(255, 90, 20, 0.4); border-radius: calc(var(--r) * 1.3); background: radial-gradient(90% 140% at 0% 100%, rgba(255, 90, 20, 0.22), transparent 70%), var(--plaque); position: relative; overflow: hidden; }
.bandeau-cta__texte { margin: 0; font-stretch: 70%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.4rem); line-height: 1; color: var(--blanc); max-width: 22ch; }
.bandeau-cta .btn { width: 100%; }

/* ---------- Étapes ---------- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; counter-reset: etape; }
.etapes li { position: relative; padding: 2rem 1.7rem; border: 1px solid var(--ligne); border-radius: var(--r); background: var(--plaque); }
.etapes h3 { margin: 0 0 0.5rem; }
.etapes p { margin: 0; color: var(--acier-clair); font-size: 1rem; }
.etapes__num { display: block; margin-bottom: 0.8rem; font-stretch: 62%; font-weight: 800; font-size: 4.4rem; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px var(--braise); }

/* ---------- Listes de points ---------- */
.points { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 1rem; }
.points li { position: relative; padding-left: 2rem; max-width: 62ch; }
.points li::before { content: ""; position: absolute; left: 0.2rem; top: 0.6em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--braise); box-shadow: 0 0 0.7rem rgba(255, 90, 20, 0.8); }

/* ---------- Tableau des budgets ---------- */
.tableau { overflow-x: auto; margin: 0 0 1rem; }
.tableau-budgets { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.tableau-budgets caption { text-align: left; font-stretch: 70%; font-weight: 700; text-transform: uppercase; font-size: 1.3rem; padding: 0 0 0.8rem; color: var(--acier-clair); caption-side: top; }
.tableau-budgets th, .tableau-budgets td { padding: 1.4rem 1rem 1.4rem 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ligne); transition: background-color 0.4s; }
.tableau-budgets th { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acier); border-bottom-color: var(--ligne-forte); }
.tableau-budgets td:first-child { font-stretch: 70%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); line-height: 1.05; }
.tableau-budgets td:last-child { white-space: nowrap; font-stretch: 70%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); color: var(--braise-2); }
.tableau-budgets tbody tr:hover td { background: rgba(255, 90, 20, 0.07); }
.tableau-budgets a { color: var(--blanc); text-decoration: none; }
.tableau-budgets a:hover { color: var(--braise-2); }
.note-source { font-size: 0.9rem; color: var(--acier); }

/* ---------- FAQ ---------- */
.faq__item { border: 1px solid var(--ligne); border-radius: var(--r); margin-bottom: 0.8rem; background: var(--plaque); transition: border-color 0.4s; }
.faq__item[open] { border-color: rgba(255, 90, 20, 0.45); }
.faq__item summary { cursor: pointer; padding: 1.3rem 4rem 1.3rem 1.6rem; list-style: none; position: relative; min-height: 3.6rem; font-weight: 600; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem); line-height: 1.3; color: var(--blanc); transition: color 0.3s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--braise-2); }
.faq__item summary::before { content: ""; position: absolute; right: 1.2rem; top: 50%; width: 2rem; height: 2rem; margin-top: -1rem; border-radius: 50%; border: 1px solid var(--ligne-forte); transition: background-color 0.4s, border-color 0.4s; }
.faq__item summary::after { content: ""; position: absolute; right: 1.7rem; top: 50%; width: 1rem; height: 2px; margin-top: -1px; background: var(--blanc); border-radius: 2px; box-shadow: 0 0 0 0 transparent; transition: transform 0.5s var(--ease); }
.faq__item summary { background-image: linear-gradient(var(--blanc), var(--blanc)); background-size: 2px 1rem; background-repeat: no-repeat; background-position: right 2.2rem top 50%; background-origin: padding-box; transform-origin: right; }
.faq__item[open] summary { background-size: 0 0; }
.faq__item[open] summary::before { background: var(--braise); border-color: var(--braise); }
.faq__item[open] summary::after { background: var(--noir); }
.faq__reponse { padding: 0 1.6rem 1.5rem; color: var(--acier-clair); max-width: 66ch; }
.faq__reponse p:last-child { margin-bottom: 0; }

/* ---------- Zone d'intervention : étiquettes arrondies ---------- */
.communes { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.communes li { display: inline-flex; align-items: center; padding: 0.55rem 1.2rem; border: 1px solid var(--ligne-forte); border-radius: var(--pilule); font-stretch: 80%; font-weight: 600; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem); letter-spacing: 0.04em; color: var(--acier-clair); background: rgba(255, 255, 255, 0.02); transition: background-color 0.4s var(--ease), color 0.4s, border-color 0.4s, transform 0.4s var(--ease); }
.communes li:hover { background: var(--braise); border-color: var(--braise); color: var(--noir); transform: translateY(-3px); }

/* ---------- Formulaire ---------- */
.form-carte { position: relative; background: var(--clair); color: var(--noir); padding: 2rem 1.6rem; border-radius: calc(var(--r) * 1.3); box-shadow: 0 3rem 6rem -2rem rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.form-carte::before { content: ""; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--chaleur); }
.form-carte h2, .form-carte h3 { color: var(--noir); }
.form-carte__titre { font-size: clamp(2rem, 1.5rem + 1.3vw, 3rem); line-height: 0.98; margin-bottom: 0.7rem; color: var(--noir); }
.form-carte__intro { color: var(--clair-texte); font-size: 1rem; margin-bottom: 1.3rem; }
.form-carte a { color: var(--braise-sur-clair); }
.form-carte strong { color: var(--noir); }
.form { display: grid; gap: 1.15rem; }
.champ { display: grid; gap: 0.4rem; }
.champ label { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #20262c; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 3.3rem; padding: 0.7rem 1rem; font-size: 1rem; font-family: var(--police); font-weight: 400; color: var(--noir); background: #fff; border: 1px solid #b5bec7; border-radius: var(--r-s); }
.champ textarea { resize: vertical; min-height: 6rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--braise-sur-clair); outline-offset: 1px; border-color: var(--braise-sur-clair); }
.form-carte :focus-visible { outline-color: var(--braise-sur-clair); }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--erreur); }
.champ__aide { margin: 0; font-size: 0.88rem; color: #46505a; }
.champ__erreur { margin: 0; font-size: 0.92rem; color: var(--erreur); font-weight: 600; }
.champ__erreur:empty { display: none; }
.ligne { display: grid; gap: 1.15rem; grid-template-columns: minmax(0, 1fr) 7.5rem; }
.ligne--egal { grid-template-columns: 1fr 1fr; }
.champ--case { grid-template-columns: 1.5rem minmax(0, 1fr); align-items: start; column-gap: 0.8rem; }
.champ--case input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0.1rem 0 0; padding: 0; border: 1.5px solid #8b97a3; border-radius: 0.5rem; background: #fff; cursor: pointer; transition: background-color 0.3s, border-color 0.3s; }
.champ--case input::before { content: ""; width: 0.8rem; height: 0.45rem; margin-top: -0.12rem; border-left: 2.4px solid var(--braise); border-bottom: 2.4px solid var(--braise); transform: rotate(-45deg) scale(0); transition: transform 0.25s var(--ease); }
.champ--case input:checked { background: var(--noir); border-color: var(--noir); }
.champ--case input:checked::before { transform: rotate(-45deg) scale(1); }
.champ--case label { font-weight: 400; font-size: 0.94rem; letter-spacing: 0; text-transform: none; line-height: 1.5; color: #20262c; }
.champ--case .champ__erreur { grid-column: 1 / -1; }
.precisions { border: 1px dashed #aab3bc; border-radius: var(--r-s); }
.precisions summary { cursor: pointer; padding: 0.9rem 1rem; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--braise-sur-clair); list-style: none; min-height: 3.2rem; display: flex; align-items: center; gap: 0.6rem; }
.precisions summary::-webkit-details-marker { display: none; }
.precisions summary::before { content: "+"; font-size: 1.4rem; line-height: 1; }
.precisions[open] summary::before { content: "–"; }
.precisions__contenu { display: grid; gap: 1.15rem; padding: 0.3rem 1rem 1rem; }
/* Puces de choix : remplacent les listes déroulantes du système */
.champ--puces { border: 0; padding: 0; margin: 0; min-width: 0; }
.champ--puces legend { padding: 0; margin: 0 0 0.6rem; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #20262c; }
.puces-choix { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.champ .puce { position: relative; display: inline-flex; font-weight: 500; font-size: 0.93rem; letter-spacing: 0; text-transform: none; color: #20262c; cursor: pointer; }
.champ .puce input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; border: 0; }
.champ .puce span { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.8rem; padding: 0 1.1rem 0 0.95rem; border: 1px solid #b5bec7; border-radius: var(--pilule); background: #fff; line-height: 1.2; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.champ .puce span::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid #8b97a3; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.champ .puce:hover span { border-color: var(--braise-sur-clair); transform: translateY(-1px); }
.champ .puce input:checked + span { background: var(--noir); border-color: var(--noir); color: #fff; box-shadow: 0 0.5rem 1.2rem -0.5rem rgba(10, 11, 13, 0.7); }
.champ .puce input:checked + span::before { background: var(--braise); border-color: var(--braise); box-shadow: 0 0 0.7rem rgba(255, 90, 20, 0.9); }
.champ .puce input:focus-visible + span { outline: 2px solid var(--braise-sur-clair); outline-offset: 2px; }
.champ .puce--petite span { min-height: 2.45rem; padding: 0 0.95rem 0 0.8rem; font-size: 0.86rem; }
.champ--erreur .puces-choix .puce span { border-color: var(--erreur); }
.piege { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Bouton d'appel direct, en tête du formulaire */
.form-carte .appel-direct { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.5rem; padding: 0.55rem 1.3rem 0.55rem 0.55rem; border: 1px solid rgba(196, 64, 10, 0.5); border-radius: var(--pilule); background: rgba(255, 90, 20, 0.09); color: var(--noir); text-decoration: none; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease); }
.form-carte .appel-direct:hover { background: rgba(255, 90, 20, 0.2); border-color: var(--braise-sur-clair); transform: translateY(-2px); color: var(--noir); }
.appel-direct__icone { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(100deg, #ffa733, #ff5a14); color: var(--noir); box-shadow: 0 0.4rem 1.2rem -0.3rem rgba(255, 90, 20, 0.7); }
.appel-direct__icone svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.appel-direct__texte { display: grid; line-height: 1.2; }
.appel-direct__texte small { font-size: 0.8rem; color: var(--clair-texte); }
.appel-direct__texte strong { color: var(--noir); font-stretch: 78%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.2rem; }
.btn[disabled] { opacity: 0.65; cursor: progress; }
.form__actions { display: grid; gap: 0.7rem; }
.form-carte .btn--principal { background: var(--noir); color: var(--blanc); border-color: var(--noir); box-shadow: none; }
.form-carte .btn--principal::before { background: var(--braise); }
.form-carte .btn--principal:hover, .form-carte .btn--principal:focus-visible { color: var(--noir); border-color: var(--braise); box-shadow: 0 0.8rem 2rem -0.6rem rgba(255, 90, 20, 0.7); }
.form-carte .btn--contour { color: var(--noir); border-color: #20262c; }
.form-carte .btn--contour::before { background: var(--noir); }
.form-carte .btn--contour:hover, .form-carte .btn--contour:focus-visible { color: var(--blanc); border-color: var(--noir); }
.form__erreur-globale { margin: 0; padding: 0.8rem 1rem; background: #fdecea; color: var(--erreur); font-weight: 600; font-size: 0.95rem; border-radius: var(--r-s); }
.form__note { font-size: 0.92rem; color: var(--clair-texte); margin: 0; }
.form-carte .mention-relation { color: #46505a; font-size: 0.85rem; }
.form-carte.est-envoyee .form-carte__titre, .form-carte.est-envoyee .form-carte__intro, .form-carte.est-envoyee .appel-direct { display: none; }
.confirmation:focus { outline: none; }
.confirmation { display: grid; gap: 0.9rem; justify-items: start; padding-top: 0.4rem; }
.confirmation__coche { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--noir); color: var(--braise); box-shadow: 0 0 1.6rem rgba(255, 90, 20, 0.45); }
.confirmation__coche svg { width: 1.7rem; height: 1.7rem; }
.confirmation__titre { font-size: 2.4rem; color: var(--noir); margin: 0; }
.confirmation p { margin: 0; color: var(--clair-texte); }
.confirmation__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.form-carte .confirmation .btn--principal { color: var(--blanc); }

/* ---------- Cartes de prestations ---------- */
.prestations { display: grid; gap: 1.3rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
.carte-presta { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--blanc); background: var(--plaque); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; transition: border-color 0.5s var(--ease); transform-style: preserve-3d; }
.carte-presta:hover { border-color: rgba(255, 90, 20, 0.5); color: var(--blanc); }
.carte-presta__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--plaque-2); filter: saturate(0.9) contrast(1.08) brightness(0.92); transition: transform 1.3s var(--ease); }
.carte-presta:hover .carte-presta__img { transform: scale(1.06); }
.carte-presta__corps { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem 1.5rem 1.7rem; }
.carte-presta__titre { margin: 0; font-size: 1.9rem; }
.carte-presta__texte { color: var(--acier-clair); font-size: 1rem; }
.carte-presta__lien { align-self: flex-start; margin-top: 0.6rem; padding: 0.55rem 1.2rem; border: 1px solid var(--ligne-forte); border-radius: var(--pilule); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blanc); transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
.carte-presta:hover .carte-presta__lien { background: var(--braise); border-color: var(--braise); color: var(--noir); }

/* ---------- Barre fixe mobile ---------- */
.barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 180; height: 76px; display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 11, 13, 0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--ligne); transition: transform 0.5s var(--ease); }
.barre-mobile .btn { min-height: 3.2rem; padding: 0 0.6rem; font-size: 0.74rem; letter-spacing: 0.1em; }
.barre-mobile--cachee { transform: translateY(110%); }

/* ---------- Pied de page ---------- */
.pied { position: relative; overflow: hidden; background: var(--noir-2); border-top: 1px solid var(--ligne); padding: clamp(4rem, 8vw, 8rem) 0 2rem; }
.pied a { color: var(--acier-clair); text-decoration: none; background: linear-gradient(var(--braise), var(--braise)) 0 100% / 0 2px no-repeat; transition: background-size 0.5s var(--ease), color 0.3s; }
.pied a:hover { color: var(--blanc); background-size: 100% 2px; }
.pied__grille { display: grid; gap: 2.6rem; }
.pied__titre { font-family: var(--police); font-stretch: 100%; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--braise-2); margin-bottom: 1.1rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.pied p { color: var(--acier); font-size: 1rem; }
.pied__logo { display: inline-flex; align-items: center; gap: 0.7rem; font-stretch: 70%; font-weight: 800; font-size: 1.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blanc) !important; margin-bottom: 1rem; }
.pied__logo svg { width: 1.8rem; height: 1.8rem; fill: var(--braise); }
.pied .mention-relation { color: var(--acier); }
.pied .pied__geant { position: relative; margin: clamp(2.6rem, 6vw, 6rem) 0 0; font-stretch: 62%; font-weight: 800; font-size: min(11.4vw, 15rem); line-height: 0.9; letter-spacing: 0; text-transform: uppercase; text-align: center; color: transparent; -webkit-text-stroke: 1.5px rgba(173, 185, 196, 0.45); white-space: nowrap; overflow: hidden; }
.pied__geant span { position: absolute; inset: 0; background: var(--chaleur); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; clip-path: inset(0 100% 0 0); }
.pied__bas { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--ligne); font-size: 0.9rem; color: var(--acier); }
.pied__bas p { margin: 0; font-size: 0.9rem; }

/* ---------- Pages simples (légales, 404) ---------- */
.page-simple-corps main { padding-top: calc(var(--entete-h) + 1.6rem); }
.page-simple { padding: 1.6rem 0 4rem; }
.page-simple h1 { font-size: clamp(2.4rem, 1rem + 3.8vw, 4.6rem); margin-top: 0.5rem; }
.page-simple h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); margin-top: 2em; color: var(--braise-2); }
.page-simple li { margin-bottom: 0.5em; }

/* =====================================================================
   EFFETS : curseur, lueur, étincelles, rideau, préchargeur
   ===================================================================== */
.curseur, .lueur { display: none; }
.curseur-actif .curseur { display: block; position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; }
.curseur__point { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--braise-2); box-shadow: 0 0 1rem 0.2rem rgba(255, 110, 30, 0.85); }
.curseur__anneau { position: absolute; left: 0; top: 0; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; border: 1px solid rgba(255, 150, 80, 0.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: width 0.45s var(--ease), height 0.45s var(--ease), margin 0.45s var(--ease), background-color 0.4s, border-color 0.4s; }
.curseur__texte { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--noir); opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
.curseur--lien .curseur__anneau { width: 4.4rem; height: 4.4rem; margin: -2.2rem 0 0 -2.2rem; background: rgba(255, 90, 20, 0.14); border-color: rgba(255, 150, 80, 0.9); }
.curseur--texte .curseur__anneau { width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; background: var(--braise-2); border-color: var(--braise-2); }
.curseur--texte .curseur__texte { opacity: 1; }
.curseur--texte .curseur__point { opacity: 0; }
.curseur-actif, .curseur-actif a, .curseur-actif button, .curseur-actif summary, .curseur-actif label, .curseur-actif select { cursor: none; }
.curseur-actif input, .curseur-actif textarea { cursor: text; }
.curseur-actif .visionneuse, .curseur-actif .visionneuse * { cursor: auto !important; }
.curseur-actif .visionneuse button { cursor: pointer !important; }
.curseur-actif .form-carte, .curseur-actif .form-carte * { cursor: auto; }
.curseur-actif .form-carte button, .curseur-actif .form-carte summary, .curseur-actif .form-carte label, .curseur-actif .form-carte select { cursor: pointer; }
.curseur-actif .lueur { display: block; position: fixed; left: 0; top: 0; z-index: 85; width: 52rem; height: 52rem; margin: -26rem 0 0 -26rem; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 100, 28, 0.17), rgba(255, 70, 10, 0.07) 38%, transparent 66%); will-change: transform; }
.fx-etincelles { position: fixed; inset: 0; z-index: 1900; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.onde { position: fixed; left: 0; top: 0; z-index: 1950; width: 8rem; height: 8rem; margin: -4rem 0 0 -4rem; border-radius: 50%; border: 2px solid rgba(255, 150, 80, 0.9); box-shadow: 0 0 2rem rgba(255, 90, 20, 0.6); pointer-events: none; opacity: 0; }

.rideau { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; background: var(--noir); transform: translateY(100%); pointer-events: none; }
.rideau::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--chaleur); box-shadow: 0 0 2rem rgba(255, 90, 20, 0.9); }
.rideau__logo { width: 3.4rem; height: 3.4rem; fill: var(--braise); filter: drop-shadow(0 0 0.8rem rgba(255, 90, 20, 0.7)); }
.anim .rideau { display: flex; }
.anim.arrivee .rideau { transform: none; animation: rideauSecours 0.6s 3.5s forwards; }
@keyframes rideauSecours { to { transform: translateY(-100%); } }

/* Préchargeur : frappe d'enclume, flash de forge, puis deux volets d'acier qui s'ouvrent */
.loader { position: fixed; inset: 0; z-index: 1000; display: none; pointer-events: none; }
.anim .loader { display: block; animation: loaderSecours 0.5s 5.5s forwards; }
.anim.arrivee .loader { display: none; }
@keyframes loaderSecours { to { opacity: 0; visibility: hidden; } }
.loader__moitie { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--noir); }
.loader__moitie--haut { top: 0; border-bottom: 1px solid var(--ligne); } .loader__moitie--bas { bottom: 0; }
.loader__flash { position: absolute; inset: 0; z-index: 3; background: radial-gradient(circle at 50% 50%, #fff2dc, #ff8a24 40%, transparent 75%); opacity: 0; }
.loader__centre { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; color: var(--blanc); }
.loader__logo { width: 7.5rem; height: 7.5rem; fill: none; stroke: var(--blanc); stroke-width: 0.45; overflow: visible; }
.loader__nom { font-stretch: 66%; font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); letter-spacing: 0.3em; text-transform: uppercase; }
.loader__compteur { font-stretch: 100%; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.2em; color: var(--acier); min-width: 4ch; text-align: center; }
.loader__fil { width: min(18rem, 60vw); height: 2px; border-radius: 2px; background: var(--ligne); overflow: hidden; }
.loader__fil i { display: block; height: 100%; background: var(--chaleur); box-shadow: 0 0 1rem rgba(255, 90, 20, 0.9); transform: scaleX(0); transform-origin: 0 50%; }

/* Mots en masque (titres animés mot par mot) */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0.06em 0.1em 0; margin: -0.1em -0.06em -0.1em 0; }
.mot > span { display: inline-block; vertical-align: top; will-change: transform; }

/* =====================================================================
   ACCUEIL IMMERSIF
   ===================================================================== */
.accueil-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; background: var(--noir); }
.accueil-hero__media { position: absolute; inset: -6% 0 -6%; z-index: -4; will-change: transform; }
.accueil-hero__video, .accueil-hero__poster, .accueil-hero__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.accueil-hero__video, .accueil-hero__poster { filter: saturate(1.08) contrast(1.1) brightness(0.98); }
.accueil-hero__video { opacity: 0; transition: opacity 1.6s ease; }
.accueil-hero__video.lecture { opacity: 1; }
/* Étincelles réelles (vidéo sur fond noir) mélangées en « screen » par-dessus la forge */
.accueil-hero__etincelles { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: 0; transition: opacity 2s ease; pointer-events: none; }
.accueil-hero__etincelles.lecture { opacity: 0.85; }
.accueil-hero__etincelles { z-index: 2; }
.accueil-hero__media canvas { opacity: 0; transition: opacity 1.2s ease; }
.accueil-hero__media.fx-pret canvas { opacity: 1; }
.accueil-hero__media.fx-pret .accueil-hero__video { opacity: 0; }
.accueil-hero__voile { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(10, 11, 13, 0.74) 0%, rgba(10, 11, 13, 0.36) 46%, rgba(10, 11, 13, 0) 82%), linear-gradient(180deg, rgba(10, 11, 13, 0.6) 0%, rgba(10, 11, 13, 0) 24%, rgba(10, 11, 13, 0.18) 60%, var(--noir) 100%); }
.accueil-hero__media.fx-pret ~ .accueil-hero__voile { opacity: 0.92; }
.accueil-hero h1, .accueil-hero .hero__sous-titre { text-shadow: 0 2px 34px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.35); }
.accueil-hero__vertical { display: none; position: absolute; left: clamp(1.4rem, 3.2vw, 3.2rem); top: 50%; z-index: 3; writing-mode: vertical-rl; transform: rotate(180deg) translateY(50%); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--acier-clair); }
.accueil-hero__contenu { position: relative; flex: none; padding-top: calc(var(--entete-h) + 1.6rem); padding-bottom: 1.4rem; }
.accueil-hero h1 { font-size: clamp(2.2rem, min(0.4rem + 3.5vw, 7.4vh), 4.9rem); max-width: 30ch; line-height: 0.94; text-shadow: 0 2px 60px rgba(0, 0, 0, 0.55); margin-bottom: 0.4em; }
.accueil-hero .hero__sous-titre { max-width: 46ch; }
.accueil-hero__bas { position: relative; z-index: 3; padding-bottom: clamp(1.4rem, 2.6vw, 2.6rem); }
.accueil-hero__bas .conteneur { display: grid; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--ligne-forte); }
.accueil-hero__bas .confiance { margin: 0; }
.accueil-hero__ctrl { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.accueil-hero__pause { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 2.6rem; padding: 0 1.1rem 0 0.9rem; border: 1px solid var(--ligne-forte); border-radius: var(--pilule); background: rgba(10, 11, 13, 0.5); backdrop-filter: blur(6px); color: var(--acier-clair); font-family: var(--police); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
.accueil-hero__pause:hover { background: var(--braise); border-color: var(--braise); color: var(--noir); }
.accueil-hero__pause-ico { display: block; width: 0.7rem; height: 0.8rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.accueil-hero__pause.est-en-pause .accueil-hero__pause-ico { width: 0; height: 0; border-style: solid; border-width: 0.4rem 0 0.4rem 0.7rem; border-color: transparent transparent transparent currentColor; }
.accueil-hero__defile { display: none; align-items: center; gap: 0.9rem; padding: 0.55rem 1.2rem 0.55rem 0.7rem; border: 1px solid var(--ligne-forte); border-radius: var(--pilule); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acier-clair); background: rgba(10, 11, 13, 0.45); backdrop-filter: blur(6px); }
.accueil-hero__defile i { position: relative; display: block; width: 2rem; height: 2rem; border-radius: 50%; background: var(--braise); }
.accueil-hero__defile i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.5rem; height: 0.5rem; margin: -0.35rem 0 0 -0.25rem; border-right: 2px solid var(--noir); border-bottom: 2px solid var(--noir); transform: rotate(45deg); }
.accueil-hero__coord { display: none; position: absolute; right: clamp(1.4rem, 3.2vw, 3.2rem); top: calc(var(--entete-h) + 2rem); z-index: 3; text-align: right; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--acier-clair); line-height: 1.9; }
.accueil-hero__coord b { display: block; color: var(--blanc); font-weight: 700; }
.bandeau-info { padding: 2.2rem 0 1.6rem; text-align: center; }
.bandeau-info .hero__definition { margin: 0 auto 1rem; max-width: 62ch; font-size: 1.08rem; }
.bandeau-info .mention-relation { font-size: 0.95rem; text-align: center; margin-inline: auto; }

/* Manifeste : le texte chauffe à blanc puis refroidit au défilement */
.manifeste { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 3rem + 10vw, 13rem) 0; background: var(--noir); }
.manifeste__fond { position: absolute; inset: -12% 0; z-index: -2; opacity: 0.35; will-change: transform; }
.manifeste__fond img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) contrast(1.2) brightness(0.55); }
.manifeste::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--noir), rgba(10, 11, 13, 0.5) 35%, rgba(10, 11, 13, 0.5) 65%, var(--noir)), radial-gradient(70% 60% at 85% 20%, rgba(255, 90, 20, 0.16), transparent 70%); }
.manifeste__texte { font-size: clamp(2.1rem, 1rem + 3.9vw, 5.4rem); line-height: 0.96; max-width: 20ch; color: var(--blanc); margin: 0 0 2.4rem; }
.manifeste__pied { display: grid; gap: 1.8rem; align-items: end; }
.manifeste__pied p { color: var(--acier-clair); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem); line-height: 1.6; max-width: 50ch; margin: 0; }

/* Services : plaques en défilement horizontal piloté par le défilement vertical */
.horizon { position: relative; border-top: 1px solid var(--ligne); overflow: hidden; background: var(--noir-2); }
.horizon__tete { padding: clamp(4rem, 8vw, 8rem) 0 2.4rem; }
.horizon__tete h2 { max-width: 14ch; }
.horizon__tete .sous-titre { margin-top: 0.8rem; }
.horizon__piste { display: flex; gap: 1.6rem; padding: 0 1.25rem 4rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.horizon__piste::-webkit-scrollbar { display: none; }
.horizon__carte { position: relative; flex: 0 0 min(78vw, 22rem); scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: var(--blanc); padding: 0.7rem 0.7rem 1.4rem; background: linear-gradient(160deg, var(--plaque-2), var(--plaque)); border: 1px solid var(--ligne-forte); border-radius: calc(var(--r) * 1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2rem 4rem -2rem rgba(0, 0, 0, 0.9); transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.horizon__carte::before, .horizon__carte::after { content: ""; position: absolute; top: 1.15rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; z-index: 4; background: radial-gradient(circle at 35% 30%, #fff 0%, #aab3bc 35%, #3d444b 80%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.horizon__carte::before { left: 1.15rem; } .horizon__carte::after { right: 1.15rem; }
.horizon__carte:hover { color: var(--blanc); border-color: rgba(255, 90, 20, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2rem 4rem -2rem rgba(0, 0, 0, 0.9), 0 0 3rem -0.6rem rgba(255, 90, 20, 0.45); }
.horizon__arche { position: relative; overflow: hidden; border-radius: 8rem 8rem 1rem 1rem; aspect-ratio: 3 / 4; background: var(--plaque); transform-style: preserve-3d; }
.horizon__arche img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.08) brightness(0.9); transition: transform 1.3s var(--ease); }
.horizon__carte:hover .horizon__arche img { transform: scale(1.07); }
.horizon__num { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 3; font-stretch: 62%; font-weight: 800; font-size: 3rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85); text-shadow: 0 0 1.4rem rgba(0, 0, 0, 0.6); }
.horizon__corps { padding: 1.4rem 0.8rem 0; }
.horizon__corps h3 { margin-bottom: 0.6rem; }
.horizon__corps p { color: var(--acier-clair); font-size: 1rem; margin-bottom: 1rem; }
.horizon__lien { display: inline-block; padding: 0.55rem 1.2rem; border: 1px solid var(--ligne-forte); border-radius: var(--pilule); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
.horizon__carte:hover .horizon__lien { background: var(--braise); border-color: var(--braise); color: var(--noir); }

/* Du plan à la pose : plan technique d'un portail qui se trace pendant le défilement */
.recit { position: relative; background: var(--noir); border-top: 1px solid var(--ligne); }
.recit__intro { padding: clamp(4rem, 8vw, 8rem) 0 1.6rem; }
.recit__intro h2 { max-width: 16ch; }
.recit__grille { display: grid; gap: 3rem; padding-bottom: clamp(4rem, 8vw, 7rem); }
.recit__progression { display: none; }
.recit__plan { position: relative; border: 1px solid var(--ligne); border-radius: calc(var(--r) * 1.3); background: radial-gradient(80% 70% at 50% 40%, rgba(255, 90, 20, 0.06), transparent 70%), repeating-linear-gradient(0deg, transparent 0, transparent 2.4rem, rgba(173, 185, 196, 0.06) 2.4rem, rgba(173, 185, 196, 0.06) calc(2.4rem + 1px)), repeating-linear-gradient(90deg, transparent 0, transparent 2.4rem, rgba(173, 185, 196, 0.06) 2.4rem, rgba(173, 185, 196, 0.06) calc(2.4rem + 1px)), var(--plaque); padding: 1.2rem; overflow: hidden; }
.recit__plan::before { content: "PLAN · ÉCHELLE 1:20"; position: absolute; left: 1.4rem; top: 1.1rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; color: var(--acier); }
.plan svg { width: 100%; height: auto; overflow: visible; }
.plan__trait { fill: none; stroke: var(--acier-clair); stroke-width: 1.6; stroke-linecap: butt; stroke-linejoin: round; }
.plan__trait--fin { stroke-width: 1; stroke: var(--acier); }
.plan__cote { fill: none; stroke: var(--braise-2); stroke-width: 1.2; stroke-linecap: butt; }
.plan__texte { fill: var(--braise-2); font-family: var(--police); font-stretch: 100%; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; }
.recit__etape { display: grid; gap: 1rem; }
.recit__num { display: block; font-stretch: 62%; font-weight: 800; font-size: clamp(6rem, 15vw, 13rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--braise); margin-bottom: 0.6rem; }
.recit__texte h3 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 4rem); margin-bottom: 0.4em; }
.recit__texte p { color: var(--acier-clair); font-size: clamp(1.08rem, 1rem + 0.3vw, 1.3rem); max-width: 42ch; }

/* Bande image en parallaxe avec citation */
.bande-image { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(80svh, 46rem); border-block: 1px solid var(--ligne); }
.bande-image__media { position: absolute; inset: -14% 0; z-index: -2; will-change: transform; }
.bande-image__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.1) brightness(0.66); }
.bande-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 11, 13, 0.82), rgba(10, 11, 13, 0.2) 70%), linear-gradient(0deg, rgba(10, 11, 13, 0.7), transparent 40%); }
.bande-image__texte { font-stretch: 66%; font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 1rem + 4.1vw, 5.6rem); line-height: 0.96; max-width: 18ch; color: var(--blanc); margin: 0; }
.bande-image__texte em { font-style: normal; color: var(--braise); }

/* Chiffres clés : plaque d'acier brossé claire */
.chiffres { background: linear-gradient(180deg, #eef0f2, var(--clair)); color: var(--noir); padding: clamp(4rem, 8vw, 8rem) 0; position: relative; }
.chiffres__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 1rem; }
.chiffre { padding: 1.6rem 1rem; border-top: 1px solid rgba(10, 11, 13, 0.22); }
.chiffre__valeur { display: block; font-stretch: 62%; font-weight: 800; font-size: clamp(4rem, 2rem + 7.6vw, 9rem); line-height: 0.85; color: var(--noir); }
.chiffre__valeur sup { font-size: 0.4em; color: var(--braise-sur-clair); vertical-align: top; margin-left: 0.2rem; }
.chiffre__libelle { display: block; margin-top: 1rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clair-texte); max-width: 22ch; line-height: 1.5; }
.chiffres__titre { color: var(--noir); max-width: 15ch; margin-bottom: 1.4rem; }
.chiffres__titre em { color: var(--braise-sur-clair); }
.chiffres .eyebrow { color: var(--clair-texte); border-color: rgba(10, 11, 13, 0.3); background: rgba(10, 11, 13, 0.04); backdrop-filter: none; }

/* Mosaïque immersive */
.mosaique { padding: clamp(4rem, 8vw, 8rem) 0; background: var(--noir); }
.mosaique__grille { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; margin-top: 2.6rem; }
.mosaique__item { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--plaque); border: 1px solid var(--ligne); border-radius: var(--r); transform-style: preserve-3d; }
.mosaique__item img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: saturate(0.9) contrast(1.08) brightness(0.88); }
.mosaique__item a { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: 1.2rem; text-decoration: none; color: var(--blanc); background: linear-gradient(0deg, rgba(10, 11, 13, 0.9), transparent 55%); }
.mosaique__legende { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--ligne-forte); border-radius: var(--pilule); background: rgba(10, 11, 13, 0.6); backdrop-filter: blur(6px); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; transform: translateY(0.6rem); opacity: 0.92; transition: transform 0.7s var(--ease), opacity 0.5s, background-color 0.4s, color 0.4s; }
.mosaique__item:hover .mosaique__legende { transform: none; opacity: 1; background: var(--braise); border-color: var(--braise); color: var(--noir); }
.mosaique__note { margin-top: 1.4rem; }

/* Blocs éditoriaux (texte + image) */
.editorial { padding: clamp(3.5rem, 7vw, 8rem) 0; position: relative; }
.editorial + .editorial { padding-top: 0; }
.editorial__grille { display: grid; gap: 2.6rem; align-items: center; }
.editorial__image { position: relative; overflow: hidden; border-radius: 9rem 9rem var(--r) var(--r); aspect-ratio: 4 / 5; border: 1px solid var(--ligne); max-width: 28rem; width: 100%; justify-self: center; background: var(--plaque); }
.editorial__image img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; filter: saturate(0.95) contrast(1.1) brightness(0.9); }
.editorial__texte h2 { max-width: 12ch; }

/* Budgets indicatifs */
.prix { padding: clamp(4rem, 8vw, 8rem) 0; background: var(--noir-2); border-top: 1px solid var(--ligne); }
.prix__entete { max-width: 40ch; }

/* Avis clients (masqués tant qu'aucun vrai avis n'est renseigné) */
.avis { padding: clamp(4rem, 8vw, 8rem) 0; border-top: 1px solid var(--ligne); }
.avis__piste { display: flex; gap: 1.3rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.8rem; scrollbar-width: thin; }
.avis__carte { flex: 0 0 min(86vw, 30rem); scroll-snap-align: start; margin: 0; padding: 2rem; background: var(--plaque); border: 1px solid var(--ligne); border-radius: var(--r); }
.avis__carte blockquote { margin: 0 0 1.2rem; font-weight: 500; font-size: 1.5rem; line-height: 1.3; color: var(--blanc); }
.avis__carte figcaption { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--braise-2); }

/* Contact : grand titre sur photo de forge + formulaire */
.contact { position: relative; isolation: isolate; padding: clamp(4.5rem, 8vw, 9rem) 0; border-top: 1px solid var(--ligne); overflow: hidden; }
.contact__fond { position: absolute; inset: -10% 0; z-index: -2; will-change: transform; }
.contact__fond img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.12) brightness(0.55); }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 11, 13, 0.92), rgba(10, 11, 13, 0.5) 60%, rgba(10, 11, 13, 0.85)), linear-gradient(0deg, var(--noir), transparent 30%, transparent 70%, var(--noir)); }
.contact__grille { display: grid; gap: 3rem; }
.contact__titre { font-size: clamp(2.6rem, 1rem + 5vw, 6.6rem); max-width: 11ch; }
.contact__tel { display: inline-block; margin: 0.4rem 0 1.6rem; font-stretch: 70%; font-weight: 800; font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5rem); line-height: 1; color: var(--braise); text-decoration: none; letter-spacing: 0.02em; }
.contact__tel:hover { color: var(--chaud); }
.contact .disposition__formulaire { margin: 0; }

/* Navigation latérale par points (accueil, ordinateur) */
.points-nav { display: none; }

/* Révélations : état initial masqué seulement si les animations sont permises */
.anim [data-reveal], .anim .section > h2, .anim .prose > p, .anim .prose > ul, .anim .prose > h3, .anim .galerie > p, .anim .etapes li, .anim .faq__item, .anim .tableau, .anim .bandeau-cta, .anim .avertissement-photos, .anim .carte-presta, .anim .puces li, .anim .communes li, .anim .points li { opacity: 0; transform: translate3d(0, 2.2rem, 0); }
.anim .carte-photo:not(.vu) .carte-photo__lien { clip-path: inset(0 0 100% 0); }
.anim .carte-photo:not(.vu) .carte-photo__lien img { transform: scale(1.25); }
/* Le titre du héros est visible dès l'affichage (plus d'animation d'entrée). */
.anim .manifeste__texte { visibility: hidden; }
.anim .editorial__image { clip-path: inset(100% 0 0 0); }
.anim:not(.anim-ok) [data-reveal], .anim:not(.anim-ok) .section > h2, .anim:not(.anim-ok) .prose > p, .anim:not(.anim-ok) .prose > ul, .anim:not(.anim-ok) .prose > h3, .anim:not(.anim-ok) .galerie > p, .anim:not(.anim-ok) .etapes li, .anim:not(.anim-ok) .faq__item, .anim:not(.anim-ok) .tableau, .anim:not(.anim-ok) .bandeau-cta, .anim:not(.anim-ok) .avertissement-photos, .anim:not(.anim-ok) .carte-presta, .anim:not(.anim-ok) .puces li, .anim:not(.anim-ok) .communes li, .anim:not(.anim-ok) .points li, .anim:not(.anim-ok) .carte-photo__lien, .anim:not(.anim-ok) .hero h1, .anim:not(.anim-ok) .accueil-hero h1, .anim:not(.anim-ok) .manifeste__texte, .anim:not(.anim-ok) .editorial__image { animation: secours 0.01s 5s forwards; }
@keyframes secours { to { opacity: 1; transform: none; clip-path: none; visibility: visible; } }

/* =====================================================================
   Écrans à partir de 600 px
   ===================================================================== */
@media (min-width: 600px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; max-width: none; }
  .hero__actions .btn { min-width: 17rem; }
  .prestations { grid-template-columns: repeat(2, 1fr); }
  .bandeau-cta { flex-direction: row; align-items: center; justify-content: space-between; }
  .bandeau-cta .btn { width: auto; flex: none; }
  .etapes { grid-template-columns: repeat(3, 1fr); }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .chiffres__grille { grid-template-columns: repeat(3, 1fr); }
  .chiffre { border-top: 0; border-left: 1px solid rgba(10, 11, 13, 0.22); padding: 0.6rem 1.4rem 0.6rem 1.8rem; }
  .chiffre:first-child { border-left: 0; padding-left: 0; }
  .mosaique__grille { grid-template-columns: repeat(3, 1fr); }
  .horizon__carte { flex-basis: 22rem; }
}

/* =====================================================================
   Écrans à partir de 768 px
   ===================================================================== */
@media (min-width: 768px) {
  .confiance { grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: none; }
  .confiance li { max-width: 30ch; }
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; }
  .accueil-hero__bas .conteneur { grid-template-columns: 1fr auto; align-items: end; }
  .manifeste__pied { grid-template-columns: 1.4fr 1fr; }
}

/* =====================================================================
   Écrans à partir de 1024 px : menu en ligne, formulaire collant, scènes épinglées
   ===================================================================== */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .barre-mobile { display: none; }
  .menu-btn { display: none; }
  .nav__tel { display: none; }
  .entete__appel { display: inline-flex; }
  .nav { position: static; inset: auto; flex-direction: row; gap: 0; display: block; background: transparent; clip-path: none; visibility: visible; transition: none; z-index: auto; }
  .menu-ouvert .nav { clip-path: none; }
  .nav__liste { display: flex; gap: 0.1rem; text-align: left; }
  .nav__liste li { overflow: visible; }
  .nav__liste a { position: relative; padding: 0.6rem 0.8rem; border-radius: var(--pilule); font-stretch: 100%; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.7; white-space: nowrap; transform: none; transition: color 0.3s, background-color 0.3s; }
  .nav__liste a:hover { background: rgba(255, 255, 255, 0.08); color: var(--blanc); }
  .nav__liste a[aria-current="page"] { background: var(--braise); color: var(--noir); }
  .logo { margin-right: 1.4rem; }

  .disposition { display: grid; grid-template-columns: minmax(0, 1fr) 24.5rem; column-gap: 3.6rem; align-items: start; }
  .disposition__avant { grid-column: 1; grid-row: 1; min-width: 0; }
  .disposition__apres { grid-column: 1; grid-row: 2; min-width: 0; }
  .disposition__formulaire { grid-column: 2; grid-row: 1 / span 2; margin: 2rem 0 0; position: sticky; top: calc(var(--entete-h) + 0.9rem); max-height: calc(100vh - var(--entete-h) - 1.8rem); overflow-y: auto; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #8b97a3 transparent; border-radius: calc(var(--r) * 1.3); }
  .form-carte { padding: 2.2rem 1.8rem; }
  .prestations { grid-template-columns: repeat(2, 1fr); }
  .galerie__grille { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .galerie__grille .carte-photo:first-child { grid-column: span 2; }
  .galerie__grille .carte-photo:first-child .carte-photo__lien { aspect-ratio: 16 / 9; }

  .accueil-hero__coord { display: block; }
  .accueil-hero__defile { display: inline-flex; }
  .contact .disposition { display: block; }

  .editorial__grille { grid-template-columns: 1.15fr 0.85fr; gap: 6rem; }
  .editorial--inverse .editorial__texte { order: 2; }
  .editorial--inverse .editorial__image { order: 1; }

  /* Du plan à la pose (activé par motion.js : classe .recit--epingle) */
  .recit--epingle .recit__scene { height: 100vh; min-height: 40rem; overflow: hidden; display: grid; align-items: center; }
  .recit--epingle .recit__intro { position: absolute; top: calc(var(--entete-h) - 1rem); left: 0; right: 0; padding: 0; z-index: 3; }
  .recit--epingle .recit__intro h2 { font-size: clamp(2rem, 1.2rem + 2vw, 3.6rem); max-width: none; margin: 0; }
  .recit--epingle .recit__intro .eyebrow { margin-bottom: 0.6rem; }
  .recit--epingle .recit__grille { position: relative; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: center; height: 62vh; min-height: 24rem; padding: 0; margin-top: 5.5rem; }
  .recit--epingle .recit__plan { max-height: 100%; display: flex; align-items: center; }
  .recit--epingle .recit__etapes { position: relative; height: 100%; }
  .recit--epingle .recit__etape { position: absolute; inset: 0; align-content: center; opacity: 0; visibility: hidden; }
  .recit--epingle .recit__etape:first-child { opacity: 1; visibility: visible; }
  .recit--epingle .recit__progression { position: absolute; left: 0; right: 0; bottom: -2.2rem; z-index: 3; display: flex; gap: 0.7rem; }
  .recit--epingle .recit__progression i { flex: 1; height: 3px; border-radius: 3px; background: var(--ligne); position: relative; overflow: hidden; }
  .recit--epingle .recit__progression i b { position: absolute; inset: 0; background: var(--chaleur); transform: scaleX(0); transform-origin: 0 50%; }
  .recit:not(.recit--epingle) .recit__grille { grid-template-columns: 1fr 1fr; align-items: start; }
  .recit:not(.recit--epingle) .recit__etapes { display: grid; gap: 3rem; }

  /* Services horizontaux : épinglés par motion.js */
  .horizon--epingle { overflow: visible; }
  .horizon--epingle .horizon__scene { height: 100vh; min-height: 40rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: calc(var(--entete-h) - 1.4rem); }
  .horizon--epingle .horizon__tete { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; padding: 0 0 1.4rem; }
  .horizon--epingle .horizon__tete .sous-titre { margin: 0; font-size: 1.05rem; }
  .horizon--epingle .horizon__tete h2 { font-size: clamp(2.4rem, 1.2rem + 3vw, 4.6rem); max-width: none; }
  .horizon--epingle .horizon__piste { overflow: visible; scroll-snap-type: none; padding: 0 0 0 max(1.25rem, calc((100vw - 78rem) / 2)); width: max-content; will-change: transform; }
  .horizon--epingle .horizon__carte { flex-basis: 20rem; }
  .horizon--epingle .horizon__arche { aspect-ratio: 4 / 4.2; max-height: 40vh; }
  .horizon--epingle .horizon__corps { padding-top: 0.9rem; }
  .horizon--epingle .horizon__corps p { display: none; }
  .horizon__carte { flex-basis: 24rem; }

  .anim .mosaique__item { clip-path: inset(100% 0 0 0 round 1.4rem); }
  .mosaique__grille { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 7.2rem; grid-auto-flow: row dense; }
  .mosaique__item { aspect-ratio: auto; }
  .mosaique__item:nth-child(1) { grid-column: span 5; grid-row: span 4; }
  .mosaique__item:nth-child(2) { grid-column: span 4; grid-row: span 4; }
  .mosaique__item:nth-child(3) { grid-column: span 3; grid-row: span 4; }
  .mosaique__item:nth-child(4) { grid-column: span 3; grid-row: span 3; }
  .mosaique__item:nth-child(5) { grid-column: span 4; grid-row: span 3; }
  .mosaique__item:nth-child(6) { grid-column: span 5; grid-row: span 3; }
  .mosaique__item:nth-child(7) { grid-column: span 5; grid-row: span 3; }
  .mosaique__item:nth-child(8) { grid-column: span 4; grid-row: span 3; }
  .mosaique__item:nth-child(9) { grid-column: span 3; grid-row: span 3; }
  .contact__grille { grid-template-columns: 1fr 28rem; gap: 6rem; align-items: start; }
  .contact .disposition__formulaire { position: sticky; top: calc(var(--entete-h) + 0.9rem); max-height: calc(100vh - var(--entete-h) - 1.8rem); overflow-y: auto; }

  .points-nav { display: none; flex-direction: column; gap: 0.7rem; position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%); z-index: 120; }
  .points-nav a { position: relative; display: block; width: 0.75rem; height: 0.75rem; border: 1.5px solid var(--acier); border-radius: 50%; background: transparent; transition: background-color 0.4s, transform 0.4s var(--ease), border-color 0.4s; }
  .points-nav a::after { content: attr(data-nom); position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); padding: 0.3rem 0.8rem; border: 1px solid var(--ligne-forte); border-radius: var(--pilule); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blanc); background: rgba(10, 11, 13, 0.9); white-space: nowrap; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
  .points-nav a:hover::after, .points-nav a:focus-visible::after { opacity: 1; }
  .points-nav a.actif { background: var(--braise); border-color: var(--braise); transform: scale(1.5); box-shadow: 0 0 0.8rem rgba(255, 90, 20, 0.8); }
}

@media (min-width: 1500px) {
  .points-nav { display: flex; }
  .accueil-hero__vertical { display: block; }
}
@media (min-width: 1360px) {
  .entete__appel-texte { display: inline; }
  .nav__liste a { padding: 0.6rem 0.95rem; font-size: 0.76rem; }
}
@media (min-width: 1280px) {
  .prestations { grid-template-columns: repeat(3, 1fr); }
  .disposition { grid-template-columns: minmax(0, 1fr) 26rem; column-gap: 4.4rem; }
}

/* Mouvement réduit : aucune animation, tout est visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .hero__img { animation: none; }
}

/* =====================================================================
   Téléphone et tablette tactile : confort et légèreté
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}
body.menu-ouvert { overflow: hidden; }
@media (max-width: 1023px), (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  a, button, summary, label, input, textarea { touch-action: manipulation; }
  /* Éléments coûteux pour un téléphone : grain plein écran et flous de fond */
  body::after { display: none; }
  .eyebrow, .hero__surtitre, .accueil-hero__pause, .accueil-hero__defile, .mosaique__legende, .menu-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .entete--solide { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 11, 13, 0.95); }
  .barre-mobile { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 11, 13, 0.97); }
}
@media (max-width: 1023px) {
  .accueil-hero__bas { padding-bottom: 6rem; }
}
@media (max-width: 767px) {
  /* Textes jamais plus petits que 13 px, zones tactiles d'au moins 44 px */
  .eyebrow, .hero__surtitre { font-size: 0.82rem; letter-spacing: 0.14em; }
  .menu-btn { font-size: 0.82rem; min-height: 2.9rem; }
  .accueil-hero__pause { font-size: 0.8rem; min-height: 2.9rem; }
  .btn { font-size: 0.86rem; min-height: 3.4rem; }
  .btn--secondaire, .horizon__lien, .carte-presta__lien { font-size: 0.84rem; }
  .horizon__lien, .carte-presta__lien { padding: 0.7rem 1.3rem; }
  .mosaique__legende { font-size: 0.84rem; }
  .puces a { min-height: 2.9rem; font-size: 0.84rem; }
  .champ legend, .champ label, .tableau-budgets th, .pied__titre { font-size: 0.84rem; }
  .champ .puce span { min-height: 3rem; font-size: 0.98rem; }
  .champ .puce--petite span { min-height: 2.9rem; font-size: 0.93rem; }
  .champ input, .champ textarea { min-height: 3.4rem; }
  .faq__item summary { min-height: 4rem; }
  .pied a { display: inline-block; padding: 0.25rem 0; }
  .fil-ariane a { display: inline-block; padding: 0.3rem 0; }
}
@media (max-width: 599px) {
  /* Galeries : on fait glisser les photos de côté au lieu de les empiler (page bien plus courte) */
  .galerie__grille { display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; margin: 1.6rem -1.25rem 0.6rem; padding: 0 1.25rem 0.8rem; }
  .galerie__grille::-webkit-scrollbar { display: none; }
  .galerie__grille .carte-photo { flex: 0 0 80%; scroll-snap-align: center; }
}
/* Impression */
@media print {
  .entete, .barre-mobile, .bandeau-cta, .carte-photo__btn, .form-carte, .loader, .progression, .marquee, .rideau, .curseur, .lueur, .points-nav, .fx-etincelles, .onde { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  body::after { display: none; }
}

/* Filet de secours du formulaire : SMS ou e-mail pré-remplis si l'envoi échoue */
.form__secours { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0 1rem; }
.form__secours[hidden] { display: none; }

/* Accueil : le titre est remplacé selon l'annonce (?g=) ; caché au plus 2 s, le temps du remplacement */
.titre-g .accueil-hero h1 { visibility: hidden; animation: titreSecours 0s 2s forwards; }
@keyframes titreSecours { to { visibility: visible; } }