/* ============================
   INTRO ANIMATION 3D LOGO
============================ */
.intro-overlay {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
  perspective: 1200px;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.intro-overlay.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(232,102,26,0.18) 0%, transparent 60%);
  opacity: 0;
  animation: introGlow 2.8s var(--ease) forwards;
}
@keyframes introGlow {
  0% { opacity: 0; transform: scale(0.5); }
  40% { opacity: 1; }
  100% { opacity: 0.6; transform: scale(1); }
}

.intro-stage {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: stageRotate 2.8s var(--ease) forwards;
}
@keyframes stageRotate {
  0% { transform: rotateX(60deg) rotateY(-30deg) rotateZ(15deg) scale(0.5); }
  60% { transform: rotateX(15deg) rotateY(-10deg) rotateZ(5deg) scale(1.05); }
  100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
}

.intro-logo-3d {
  width: 100%;
  height: 100%;
  background: var(--orange);
  border-radius: 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  transform-style: preserve-3d;
  box-shadow:
    0 30px 80px -10px rgba(232,102,26,0.6),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.15);
  opacity: 0;
  animation: logoAppear 0.6s var(--ease) 0.2s forwards;
}
@keyframes logoAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.intro-cube {
  border-radius: 6px;
  position: relative;
  transform-style: preserve-3d;
  opacity: 0;
  animation: cubeIn 0.7s var(--ease) forwards;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.intro-cube:nth-child(1) { background: #FFFFFF; animation-delay: 0.6s; }
.intro-cube:nth-child(2) { background: #9A9A9A; animation-delay: 0.75s; }
.intro-cube:nth-child(3) { background: var(--anis); animation-delay: 0.9s; }
.intro-cube:nth-child(4) {
  background: #FFFFFF;
  animation-delay: 1.05s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.04em;
}
.intro-cube:nth-child(4)::after { content: 'JH'; }

@keyframes cubeIn {
  0% { opacity: 0; transform: translateZ(80px) rotateX(-90deg) scale(0.5); }
  60% { opacity: 1; transform: translateZ(20px) rotateX(0deg) scale(1.08); }
  100% { opacity: 1; transform: translateZ(0) rotateX(0deg) scale(1); }
}

.intro-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.04em;
  color: var(--text);
  opacity: 0;
  transform: translateY(20px);
  animation: wordmarkIn 0.8s var(--ease) 1.4s forwards;
  text-align: center;
  line-height: 1.1;
}
.intro-wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 8px;
}
@keyframes wordmarkIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.intro-loader {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  opacity: 0;
  animation: loaderShow 0.4s ease 0.5s forwards;
}
.intro-loader::after {
  content: '';
  display: block;
  height: 100%;
  background: var(--orange);
  width: 0;
  animation: loaderFill 2s var(--ease) 0.6s forwards;
}
@keyframes loaderShow { to { opacity: 1; } }
@keyframes loaderFill { to { width: 100%; } }

/* Bloque le scroll pendant l'intro */
body.intro-active {
  overflow: hidden;
  height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
}

/* ============================
   FIN INTRO 3D
============================ */


:root {
  --ink: #0B0B0B;
  --ink-2: rgba(19,19,19,0.78);
  --ink-3: rgba(28,28,28,0.78);
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);
  --paper: #F7F4EF;
  --paper-2: #EFE9DF;
  --bone: #E8E2D5;
  --text: #F4F1EB;
  --text-dim: #A8A39A;
  --text-muted: #6E6A62;
  --orange: #E8661A;
  --orange-bright: #FF7A28;
  --orange-soft: rgba(232,102,26,0.12);
  --anis: #A4D818;
  --anis-soft: rgba(164,216,24,0.16);
  --anis-deep: #A4D818;

  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;

  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background-color: var(--ink);
  background-image: linear-gradient(180deg, #0B0B0B 0%, #0E0E10 40%, #090909 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  line-height: 1.55;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--orange); color: #fff; }

/* HALOS COLORÉS ANIMÉS (couche de fond) */
.bg-glows {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-glows .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.glow-1 {
  width: 62vw; height: 62vw;
  top: -18vw; left: -10vw;
  background: radial-gradient(circle, rgba(232,102,26,0.42) 0%, transparent 70%);
  animation: glowDrift1 42s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.glow-2 {
  width: 55vw; height: 55vw;
  top: -6vw; right: -12vw; left: auto;
  background: radial-gradient(circle, rgba(255,138,61,0.34) 0%, transparent 70%);
  animation: glowDrift2 50s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.glow-3 {
  width: 66vw; height: 66vw;
  bottom: -24vw; left: 30vw;
  background: radial-gradient(circle, rgba(232,102,26,0.38) 0%, transparent 70%);
  animation: glowDrift3 58s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.glow-4 {
  width: 48vw; height: 48vw;
  top: 40vh; left: -8vw;
  background: radial-gradient(circle, rgba(255,138,61,0.30) 0%, transparent 70%);
  animation: glowDrift2 46s cubic-bezier(0.45, 0, 0.55, 1) infinite reverse;
}
.glow-5 {
  width: 52vw; height: 52vw;
  top: 30vh; right: -10vw; left: auto;
  background: radial-gradient(circle, rgba(232,102,26,0.32) 0%, transparent 70%);
  animation: glowDrift3 54s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.glow-6 {
  width: 56vw; height: 56vw;
  top: 70vh; left: 20vw;
  background: radial-gradient(circle, rgba(255,170,90,0.28) 0%, transparent 70%);
  animation: glowDrift1 64s cubic-bezier(0.45, 0, 0.55, 1) infinite reverse;
}
@keyframes glowDrift1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.85; }
  20%  { transform: translate(5vw, 4vw) scale(1.08); opacity: 1; }
  40%  { transform: translate(9vw, 8vw) scale(1.14); opacity: 0.9; }
  60%  { transform: translate(2vw, 11vw) scale(1.02); opacity: 1; }
  80%  { transform: translate(-4vw, 6vw) scale(0.95); opacity: 0.88; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
}
@keyframes glowDrift2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
  25%  { transform: translate(-5vw, 6vw) scale(1.1); opacity: 1; }
  50%  { transform: translate(-8vw, 10vw) scale(1.16); opacity: 0.85; }
  75%  { transform: translate(-2vw, 3vw) scale(1.04); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
}
@keyframes glowDrift3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.88; }
  22%  { transform: translate(-6vw, -4vw) scale(1.07); opacity: 1; }
  44%  { transform: translate(-9vw, -7vw) scale(1.12); opacity: 0.9; }
  66%  { transform: translate(-3vw, -10vw) scale(1.01); opacity: 1; }
  88%  { transform: translate(4vw, -5vw) scale(0.96); opacity: 0.9; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.88; }
}

/* GRILLE FINE — texture moderne plus prononcée */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 1px, transparent 1.5px);
  background-size: 48px 48px, 48px 48px, 24px 24px;
  mask-image: radial-gradient(ellipse 130% 110% at 50% 0%, #000 45%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 130% 110% at 50% 0%, #000 45%, transparent 92%);
}

/* GRAIN plus marqué */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) {
  .bg-glows .glow { animation: none; }
}

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

/* ============================
   TYPOGRAPHY
============================ */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.italic { font-style: normal; font-weight: 300; letter-spacing: -0.045em; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; }
h1 { font-weight: 700; }
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.02; }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1; font-weight: 600; }

/* ===== Titres en vert et orange (charte premium) ===== */
h1, h2 { color: var(--anis); }
h1 .accent, h2 .accent,
h1 .italic, h2 .italic { color: var(--orange); }
/* Sections à fond clair : titres en sombre (pas de vert) */
.zone h1, .zone h2,
.enquete h1, .enquete h2 { color: var(--ink); }
.zone h2 .accent, .zone h2 .italic,
.enquete h2 .accent, .enquete h2 .italic { color: var(--orange); }
/* CTA final : fond orange → titre blanc (on n'y met pas de vert/orange) */
.final-cta h2, .final-cta h2 .italic, .final-cta h2 .accent { color: #fff; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--orange);
}

/* ============================
   HEADER
============================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: all 0.4s var(--ease);
  background: linear-gradient(180deg, rgba(11,11,11,0.85) 0%, rgba(11,11,11,0) 100%);
  backdrop-filter: blur(0px);
}
.header.scrolled {
  padding: 12px 0;
  background: rgba(11,11,11,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  font-weight: 600;
  flex-shrink: 0;
}
.logo-mark {
  width: 56px; height: 56px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  background: var(--orange);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  padding: 7px;
}
.logo-mark span { background: rgba(255,255,255,0.95); border-radius: 2px; }
.logo-mark span:nth-child(2) { background: #9A9A9A; }
.logo-mark span:nth-child(3) { background: var(--anis); }
.logo-mark span:nth-child(4) { background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 8px; color: var(--orange); font-weight: 900; font-family: var(--font-body); }
.logo-mark span:nth-child(4)::after { content: 'JH'; }
.logo-text { font-weight: 600; white-space: nowrap; line-height: 1.1; }
.logo-text small { display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.24em; color: var(--text-dim); text-transform: uppercase; margin-top: 4px; font-weight: 500; }

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 100px;
  padding: 4px;
  backdrop-filter: blur(8px);
}
.nav-links a {
  font-size: 0.82rem;
  color: var(--anis);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 9px 18px;
  border-radius: 100px;
  transition: color 0.25s ease, background-color 0.25s ease;
  display: inline-block;
  white-space: nowrap;
}
.nav-links a:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.nav-links a.active {
  color: var(--ink);
  background: var(--anis);
  font-weight: 600;
}

@media (max-width: 1180px) {
  .nav-links { gap: 2px; padding: 3px; }
  .nav-links a { padding: 8px 13px; font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a { transition: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: #C0530F;
  color: #fff;
}
.btn-primary:hover {
  background: #AD4A0C;
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(232,102,26,0.5);
}
.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--text);
  background: var(--text);
  color: var(--ink);
}
.btn .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* Bouton Devis du header — toujours visible, jamais compressé */
.btn-devis-header {
  padding: 13px 24px;
  font-size: 0.88rem;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(232,102,26,0.5);
}
.btn-devis-header:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(232,102,26,0.65);
}

.menu-toggle { display: none; }

/* Lien Adresse dans la nav */
.nav-adresse {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.nav-adresse svg { flex-shrink: 0; }

/* ============================
   HERO — DIAPORAMA
============================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
  overflow: hidden;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  image-rendering: -webkit-optimize-contrast;
  transition: opacity 1.4s var(--ease);
  will-change: opacity;
}
.hero-slide.active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none !important; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,11,11,0.82) 0%, rgba(11,11,11,0.58) 45%, rgba(11,11,11,0.22) 100%),
    linear-gradient(180deg, rgba(11,11,11,0.5) 0%, transparent 30%, transparent 60%, rgba(11,11,11,0.8) 100%),
    radial-gradient(ellipse at 70% 40%, rgba(232,102,26,0.15) 0%, transparent 55%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
}
.hero h1 {
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 0.92;
  margin-bottom: 30px;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: var(--anis);
  animation: heroFadeUp 0.9s var(--ease) both;
}
.hero h1 .accent {
  color: var(--anis);
  font-weight: 300;
  letter-spacing: -0.05em;
  display: inline-block;
  position: relative;
}
.hero h1 .accent::after {
  content: '';
  position: absolute;
  bottom: 0.05em;
  left: -0.05em;
  right: -0.05em;
  height: 0.08em;
  background: var(--anis);
  opacity: 0.3;
  z-index: -1;
}
.hero h1 .accent-orange {
  color: var(--orange);
  font-weight: 300;
  letter-spacing: -0.05em;
  display: inline-block;
  position: relative;
}
.hero h1 .accent-orange::after {
  content: '';
  position: absolute;
  bottom: 0.05em;
  left: -0.05em;
  right: -0.05em;
  height: 0.08em;
  background: var(--orange);
  opacity: 0.3;
  z-index: -1;
}
.hero-eyebrow {
  margin-bottom: 26px;
  color: var(--anis) !important;
  animation: heroFadeUp 0.7s var(--ease) both;
}
.hero-eyebrow::before { background: var(--anis) !important; }
.hero p.lead {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: rgba(255,255,255,0.8);
  max-width: 560px;
  margin-bottom: 40px;
  line-height: 1.65;
  animation: heroFadeUp 1.1s var(--ease) both;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  animation: heroFadeUp 1.3s var(--ease) both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn-ghost-light {
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  transform: translateY(-2px);
}

/* Indicateurs du diaporama */
.hero-dots {
  display: flex;
  gap: 10px;
  margin-top: 56px;
  align-items: center;
  animation: heroFadeUp 1.5s var(--ease) both;
}
.hero-dot {
  width: 14px; height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1), background 0.4s;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: none;
}
.hero-dot:hover { background: rgba(255,255,255,0.55); }
.hero-dot.active {
  width: 56px;
  background: rgba(255,255,255,0.25);
}
.hero-dot.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  border-radius: 100px;
  transform-origin: left;
  animation: dotProgress 6s linear;
}
@keyframes dotProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Indice de scroll */
.hero-scroll-hint {
  position: absolute;
  bottom: 90px; right: var(--gutter);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.5);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll-hint .scroll-line {
  width: 1px; height: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll-hint .scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 30%;
  background: var(--orange);
  animation: scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}
@media (max-width: 760px) {
  .hero-scroll-hint { display: none; }
}

/* Marquee bottom */
.hero-marquee {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  z-index: 3;
}
.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-dim);
  width: max-content;
}
.marquee-track span { display: flex; align-items: center; gap: 60px; }
.marquee-track .dot { color: var(--orange); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============================
   PARTNERS
============================ */
.partners {
  padding: 56px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.42);
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 -1px 0 rgba(255,255,255,0.03);
}
.partners-label {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 52px;
  align-items: center;
}
@media (max-width: 860px) {
  .partners-grid {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .partners-grid::-webkit-scrollbar { display: none; }
  .partners-grid .partner { flex: 0 0 auto; min-width: 90px; }
}
.partner {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  opacity: 0.6;
  transition: all 0.3s;
  padding: 10px 4px;
  border-radius: var(--r-md);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  display: block;
}
.partner:hover {
  opacity: 1;
  color: var(--text);
  transform: scale(1.05);
}
.partner small { display: block; font-size: 0.56rem; letter-spacing: 0.24em; color: var(--text-muted); font-family: var(--font-body); margin-top: 4px; text-transform: uppercase; }

/* ============================
   PILLARS
============================ */
.pillars {
  padding: 140px 0;
  position: relative;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
  align-items: end;
}
@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; gap: 32px; }
}
.section-head h2 { max-width: 600px; }
.section-head .intro {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 460px;
  margin-left: auto;
}
@media (max-width: 860px) {
  .section-head .intro { margin-left: 0; }
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 980px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars-grid { grid-template-columns: 1fr; } }

.pillar {
  background: var(--ink-2);
  padding: 44px 36px;
  transition: background 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.pillar:hover { background: var(--ink-3); }
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.5s var(--ease);
}
.pillar:hover::before { width: 100%; }
.pillar-num {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--orange);
  margin-bottom: 60px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.pillar h3 {
  font-size: 1.3rem;
  margin-bottom: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.pillar p {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.6;
}
.pillar-icon {
  width: 48px; height: 48px;
  margin-bottom: 32px;
  color: var(--orange);
}

/* ============================
   PRODUITS — NOS GAMMES (premium)
============================ */
.produits {
  padding: 160px 0;
  background: rgba(11,11,11,0.72);
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.produits::before {
  content: '';
  position: absolute;
  top: -10%; right: -5%;
  width: 50vw; height: 50vw;
  max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(232,102,26,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.produits::after {
  content: '';
  position: absolute;
  bottom: -10%; left: -10%;
  width: 40vw; height: 40vw;
  max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(164,216,24,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.produits .eyebrow { color: var(--orange); }
.produits .eyebrow::before { background: var(--orange); }
.produits h2 { color: var(--anis); }
.produits .section-head { position: relative; z-index: 2; }
.produits .section-head .intro { color: var(--text-dim); }

.gammes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
}
@media (max-width: 980px) { .gammes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .gammes-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px) { .gammes-grid { grid-template-columns: 1fr; } }

.gamme-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--ink-3);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.4s;
  opacity: 0;
  transform: translateY(40px);
}
.gamme-card.in {
  opacity: 1;
  transform: translateY(0);
}
.gamme-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  border-color: rgba(232,102,26,0.4);
}

/* Toutes les cartes égales */
.gamme-card.feat, .gamme-card.tall, .gamme-card.std, .gamme-card.wide {
  grid-column: span 1;
  grid-row: span 1;
  min-height: 320px;
}
@media (max-width: 600px) {
  .gamme-card.feat, .gamme-card.tall, .gamme-card.std, .gamme-card.wide { min-height: 260px; }
}

.gamme-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1.6s var(--ease-out), filter 0.7s var(--ease);
  filter: saturate(0.9) brightness(0.82);
  transform: scale(1.02);
  will-change: transform;
}
.gamme-card:hover img {
  transform: scale(1.16);
  filter: saturate(1.15) brightness(1.04);
}
.gamme-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,11,0.1) 0%, transparent 35%, rgba(11,11,11,0.55) 70%, rgba(11,11,11,0.95) 100%);
  transition: background 0.5s;
}
.gamme-card:hover::after {
  background: linear-gradient(180deg, rgba(232,102,26,0.15) 0%, transparent 40%, rgba(11,11,11,0.7) 75%, rgba(11,11,11,0.97) 100%);
}

.gamme-content {
  position: relative;
  z-index: 2;
  padding: 26px;
  color: #fff;
}
.gamme-mat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.5s var(--ease) 0.05s;
}
.gamme-card:hover .gamme-mat { transform: translateY(0); opacity: 1; }
.gamme-mat .led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}
.gamme-mat.green .led { background: var(--anis); box-shadow: 0 0 8px var(--anis); }

.gamme-content h3 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 8px;
}

.gamme-brands {
  font-size: 0.8rem;
  color: var(--orange);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.gamme-content p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  max-width: 380px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s var(--ease);
}
.gamme-card:hover .gamme-content p {
  max-height: 120px;
  opacity: 1;
  margin-top: 4px;
}

.gamme-plus {
  position: absolute;
  top: 22px; right: 22px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  color: #fff;
  font-size: 1.3rem;
  transition: all 0.4s var(--ease);
}
.gamme-card:hover .gamme-plus {
  background: var(--orange);
  border-color: var(--orange);
  transform: rotate(90deg) scale(1.1);
}

/* Bouton "Voir les marques" sur la carte gamme */
.gamme-brands-btn {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  width: fit-content;
  transition: all 0.3s var(--ease);
}
.gamme-brands-btn svg { width: 14px; height: 14px; }
.gamme-brands-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: translateX(3px);
}

/* ============================
   PAGE GAMME (marques)
============================ */
.gamme-page { padding: 40px 0 140px; position: relative; z-index: 2; }
.gamme-page-head { max-width: 720px; margin-bottom: 56px; }
.gamme-page-head h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin: 16px 0 20px;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.gamme-page-head p { color: var(--text-muted); font-size: 1.05rem; max-width: 600px; }
.brand-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.brand-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.025);
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
  min-height: 180px;
}
.brand-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(232,102,26,0.12) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.brand-card:hover {
  border-color: var(--orange);
  transform: translateY(-6px);
  background: rgba(255,255,255,0.045);
  box-shadow: 0 24px 50px -22px rgba(0,0,0,0.7);
}
.brand-card:hover::after { opacity: 1; }
.brand-card .brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  position: relative;
}
.brand-card .brand-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.5;
  flex: 1;
  position: relative;
}
.brand-card .brand-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--orange-bright);
  position: relative;
  transition: gap 0.3s var(--ease);
}
.brand-card .brand-go svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.brand-card:hover .brand-go { gap: 12px; }
.brand-card:hover .brand-go svg { transform: translate(2px,-2px); }
.gamme-page-cta { margin-top: 50px; }
@media (max-width: 600px) {
  .gamme-page { padding: 20px 0 90px; }
  .brand-cards { grid-template-columns: 1fr; }
}

/* ============================
   MÉTHODE
============================ */
.methode {
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.methode-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
}
.methode-track::before {
  content: '';
  position: absolute;
  top: 32px; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  z-index: 0;
}
@media (max-width: 860px) {
  .methode-track { grid-template-columns: 1fr; }
  .methode-track::before { display: none; }
}

.step {
  position: relative;
  padding-top: 80px;
  z-index: 1;
}
.step-num {
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--orange);
  transition: all 0.4s var(--ease);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.step:hover .step-num {
  background: var(--orange);
  color: #fff;
  transform: scale(1.1);
}
.step h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 500;
}
.step p {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ============================
   REALISATIONS
============================ */
.realisations {
  padding: 140px 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery { grid-template-columns: 1fr; } }

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--ink-3);
}
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }

.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,11,11,0.7));
  opacity: 0;
  transition: opacity 0.4s;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-caption {
  position: absolute;
  bottom: 16px; left: 16px;
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s var(--ease);
  z-index: 2;
}
.gallery-item:hover .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}
.gallery-caption span {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}

/* ============================
   KPI
============================ */
.kpi {
  padding: 120px 0;
  background: rgba(11,11,11,0.72);
  border-bottom: 1px solid var(--line);
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 760px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-item {
  text-align: center;
  padding: 20px;
  position: relative;
}
.kpi-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -20px; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--line);
}
@media (max-width: 760px) { .kpi-item::after { display: none !important; } }
.kpi-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--orange);
  line-height: 1;
  margin-bottom: 14px;
  font-weight: 300;
  letter-spacing: -0.04em;
}
.kpi-num .sup {
  font-size: 0.5em;
  vertical-align: super;
  color: var(--text-dim);
  margin-left: 4px;
}
.kpi-label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============================
   TESTIMONIAL
============================ */
.testimonial {
  padding: 140px 0;
  position: relative;
}
.testimonial-card {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 8rem;
  color: var(--orange);
  line-height: 0.5;
  margin-bottom: 30px;
  opacity: 0.4;
  font-weight: 700;
}
.testimonial-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin-bottom: 40px;
  font-weight: 400;
}
.testimonial-text .italic { color: var(--orange); font-weight: 600; }
.testimonial-author {
  font-size: 0.86rem;
  color: var(--text-dim);
}
.testimonial-author strong { color: var(--text); font-weight: 500; display: block; margin-bottom: 4px; font-size: 0.95rem; }

/* ============================
   ZONE
============================ */
.zone {
  padding: 140px 0;
  background: var(--paper);
  color: var(--ink);
}
.zone .section-head .intro { color: var(--text-muted); }
.zone h2 { color: var(--ink); }
.zone-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 860px) { .zone-grid { grid-template-columns: 1fr; } }

.zone-villes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
  list-style: none;
}
.zone-villes li {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 14px;
}
.zone-villes li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.zone-villes li:hover {
  color: var(--orange);
  padding-left: 8px;
}

.zone-map {
  aspect-ratio: 1/1;
  position: relative;
  background: var(--bone);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zone-map svg { width: 100%; height: 100%; }

/* ============================
   FAQ
============================ */
.faq {
  padding: 140px 0;
}
.faq-list {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 28px 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  transition: color 0.3s;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.faq-question:hover { color: var(--orange); }
.faq-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.faq-icon::before { width: 14px; height: 1px; }
.faq-icon::after { width: 1px; height: 14px; }
.faq-item.open .faq-icon {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: rotate(180deg);
}
.faq-item.open .faq-icon::after { transform: scaleY(0); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.7;
}
.faq-answer-inner { padding-bottom: 28px; max-width: 700px; }
.faq-item.open .faq-answer { max-height: 400px; }

/* ============================
   FORM
============================ */
.form-section {
  padding: 140px 0;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  position: relative;
  overflow: hidden;
}
.form-section::before {
  content: '';
  position: absolute;
  top: 50%; right: -20%;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(232,102,26,0.15) 0%, transparent 70%);
  transform: translateY(-50%);
  pointer-events: none;
}
.form-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) { .form-wrap { grid-template-columns: 1fr; gap: 50px; } }

.form-intro h2 { margin-bottom: 24px; }
.form-intro p { color: var(--text-dim); margin-bottom: 36px; font-size: 1.05rem; max-width: 460px; }
.form-contacts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-contacts li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
}
.form-contacts li .ic {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  flex-shrink: 0;
}
.form-contacts li strong { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; font-weight: 500; }

.devis-form {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 44px;
  position: relative;
}
@media (max-width: 560px) { .devis-form { padding: 28px; } }

.form-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}
.form-progress span {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 100px;
  transition: background 0.4s;
}
.form-progress span.active { background: var(--orange); }

.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn 0.4s var(--ease); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-step-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.form-step h3 { font-size: 1.5rem; margin-bottom: 28px; font-weight: 500; }

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.choice {
  padding: 20px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.3s;
  text-align: left;
  background: transparent;
}
.choice:hover { border-color: var(--text-dim); background: rgba(255,255,255,0.02); }
.choice.selected {
  border-color: var(--orange);
  background: var(--orange-soft);
}
.choice strong { display: block; font-size: 0.95rem; margin-bottom: 4px; font-weight: 500; }
.choice small { color: var(--text-dim); font-size: 0.78rem; }

/* Sélection de marque (étape 2) */
.brand-block {
  margin: -8px 0 26px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.015);
  animation: fadeIn 0.4s var(--ease);
}
.brand-block[hidden] { display: none; }
.brand-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.brand-label em { font-style: normal; color: var(--text-muted); }
.brand-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.brand-chip {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.brand-chip:hover { border-color: var(--text-dim); color: var(--text); background: rgba(255,255,255,0.03); }
.brand-chip.selected {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: var(--orange-bright);
}
.brand-chip.skip { font-style: italic; color: var(--text-muted); }

/* ===== Sélecteur RAL (couleurs) ===== */
.ral-block {
  margin: 0 0 26px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.015);
}
.ral-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.ral-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-align: left;
  font-family: inherit;
}
.ral-chip:hover { border-color: var(--text-dim); background: rgba(255,255,255,0.03); transform: translateY(-1px); }
.ral-chip.selected {
  border-color: var(--orange);
  background: var(--orange-soft);
  box-shadow: 0 0 0 1px var(--orange);
}
.ral-sw {
  width: 100%;
  height: 30px;
  border-radius: 4px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
  margin-bottom: 4px;
}
.ral-sw.textured {
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    var(--c);
  background-size: 4px 4px, 100% 100%;
}
.ral-code {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}
.ral-name {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.2;
}
.ral-chip.selected .ral-code { color: var(--orange-bright); }
@media (max-width: 480px) {
  .ral-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-weight: 500;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border 0.3s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--orange);
}
.field textarea { resize: vertical; min-height: 100px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 20px 0;
  line-height: 1.5;
}
.consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--orange); }

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 20px;
}
.btn-back {
  padding: 14px 22px;
  border-radius: 100px;
  color: var(--text-dim);
  font-size: 0.86rem;
  transition: color 0.3s;
}
.btn-back:hover { color: var(--text); }

.form-success {
  display: none;
  text-align: center;
  padding: 40px 0;
}
.form-success.show { display: block; }
.success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--anis-soft);
  color: var(--anis);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================
   FINAL CTA
============================ */
.final-cta {
  padding: 120px 0;
  background: var(--orange);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,122,40,0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(164,216,24,0.2) 0%, transparent 50%);
}
.final-cta-inner {
  position: relative;
  text-align: center;
  z-index: 1;
}
.final-cta h2 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  margin-bottom: 30px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.final-cta .italic { font-style: normal; font-weight: 300; opacity: 0.85; }
.final-cta p {
  font-size: 1.1rem;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}
.btn-white {
  background: #fff;
  color: var(--ink);
  padding: 18px 36px;
  font-size: 0.95rem;
}
.btn-white:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

/* ============================
   FOOTER
============================ */
.footer {
  padding: 80px 0 30px;
  background: var(--ink);
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 22px;
  font-weight: 500;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
  font-size: 0.92rem;
  color: var(--text);
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--orange); }
.footer-tag {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 18px;
  max-width: 320px;
}
.footer-showroom {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 340px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--orange-soft);
  color: var(--text-dim);
  transition: border-color 0.3s, transform 0.3s;
}
.footer-showroom:hover { border-color: var(--orange); transform: translateY(-2px); }
.footer-showroom svg { color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.footer-showroom span { font-size: 0.84rem; line-height: 1.5; }
.footer-showroom strong { display: block; color: var(--anis); font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 4px; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 16px;
}

/* ============================
   ANIMATIONS REVEAL
============================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.35s; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ============================
   SYSTÈME DE PAGES (ONGLETS)
============================ */
.page {
  display: none;
  position: relative;
  z-index: 2;
  animation: pageIn 0.5s var(--ease);
}
.page.active { display: block; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-links a.active {
  color: #C5E63A;
}
.nav-links a.active::after { width: 100%; }

/* ============================
   PAGE MARCHÉ (hero compact + projets)
============================ */
.market-hero {
  padding: 160px 0 80px;
  position: relative;
  overflow: hidden;
}
.market-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(232,102,26,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(164,216,24,0.06) 0%, transparent 55%);
  pointer-events: none;
}
.market-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 980px) { .market-hero-inner { grid-template-columns: 1fr; gap: 40px; } }

.market-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.95;
  margin: 22px 0 26px;
  letter-spacing: -0.045em;
  font-weight: 700;
}
.market-hero h1 .accent { color: var(--orange); font-weight: 300; }
.market-hero p.lead {
  font-size: 1.1rem;
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 32px;
}
.market-hero-visual {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.6), 0 0 0 1px var(--line);
  position: relative;
}
.market-hero-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s var(--ease); }
.market-hero-visual:hover img { transform: scale(1.06); }

.market-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.market-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.86rem;
  color: var(--text);
}
.market-feature::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--anis);
  flex-shrink: 0;
}

.market-projects { padding: 100px 0; }
.project-feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
}
.project-feature:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.project-feature.reverse .project-feature-visual { order: 2; }
.project-feature.no-visual { grid-template-columns: 1fr; max-width: 760px; }
@media (max-width: 860px) {
  .project-feature { grid-template-columns: 1fr; gap: 30px; }
  .project-feature.reverse .project-feature-visual { order: 0; }
}

.project-feature-visual {
  aspect-ratio: 16/11;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.5);
}
.project-feature-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.project-feature-visual:hover img { transform: scale(1.08); }

/* Galerie de photos (page public) */
.public-gallery {
  margin-top: 70px;
}
.public-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.public-gallery-grid .pg-item {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--ink-3);
}
.public-gallery-grid .pg-item.tall { grid-row: span 2; }
.public-gallery-grid .pg-item.wide { grid-column: span 2; }
.public-gallery-grid .pg-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.public-gallery-grid .pg-item:hover img { transform: scale(1.08); }
.public-gallery-grid .pg-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,11,11,0.45) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.public-gallery-grid .pg-item:hover::after { opacity: 1; }
@media (max-width: 860px) {
  .public-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .public-gallery-grid .pg-item.wide { grid-column: span 2; }
}
@media (max-width: 520px) {
  .public-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .public-gallery-grid .pg-item.wide, .public-gallery-grid .pg-item.tall { grid-column: auto; grid-row: auto; }
}

/* GALERIE PROMOTION (groupée) + MOSAÏQUE PROJETS */
.promo-gallery { margin-top: 90px; }
.promo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.promo-item {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
}
.promo-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.promo-item:hover img { transform: scale(1.07); }

.mosaic-section { padding: 40px 0 130px; position: relative; z-index: 2; }
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mosaic-item {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
}
.mosaic-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.4s var(--ease);
}
.mosaic-item:hover img { transform: scale(1.08); }
.mosaic-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(232,102,26,0.25), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.mosaic-item:hover::after { opacity: 1; }
@media (max-width: 860px) {
  .promo-grid, .mosaic-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .promo-grid, .mosaic-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.project-feature-content .project-tag {
  display: inline-block;
  padding: 6px 14px;
  background: var(--orange-soft);
  color: var(--orange);
  border-radius: 100px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}
.project-feature-content h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 18px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.project-meta { list-style: none; margin: 22px 0; }
.project-meta li {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.project-meta li strong {
  min-width: 130px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 2px;
}
.project-meta li span { color: var(--text); flex: 1; }
.project-spec {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--ink-3);
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.project-spec strong { color: var(--orange); }

/* ============================
   QUI SOMMES-NOUS (ABOUT)
============================ */
.about {
  padding: 140px 0;
  background: rgba(11,11,11,0.72);
  position: relative;
  overflow: hidden;
}
.about::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232,102,26,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; gap: 50px; }
}
.about-aside {
  position: sticky;
  top: 120px;
}
@media (max-width: 980px) { .about-aside { position: static; } }
.about-aside h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.98;
  margin: 18px 0 32px;
}
.about-aside h2 .accent {
  color: var(--orange);
  font-weight: 300;
}
.about-portrait {
  margin: 22px 0 26px;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  padding: 7px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.10);
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
@media (max-width: 980px) {
  .about-portrait { max-width: 260px; margin-left: auto; margin-right: auto; }
}
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.about-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--orange);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.03em;
}
.about-stat span {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.about-content {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-dim);
}
.about-content p {
  margin-bottom: 22px;
}
.about-content p strong {
  color: var(--text);
  font-weight: 500;
}
.about-content .lead {
  font-size: 1.15rem;
  color: var(--text);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 30px;
  padding-left: 18px;
  border-left: 2px solid var(--orange);
}

.engagement-card {
  margin-top: 40px;
  padding: 36px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.engagement-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--orange), var(--anis));
}
.engagement-card .label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 14px;
}
.engagement-card h3 {
  font-size: 1.4rem;
  margin-bottom: 16px;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.engagement-card p {
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0;
}

.values-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.value-chip {
  padding: 8px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 500;
  transition: all 0.3s;
}
.value-chip:hover {
  background: var(--orange-soft);
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-2px);
}

/* ============================
   ENQUETE (SURVEY)
============================ */
.enquete {
  padding: 140px 0;
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.enquete::before {
  content: '';
  position: absolute;
  top: 50%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(232,102,26,0.08) 0%, transparent 70%);
  transform: translateY(-50%);
}
.enquete .eyebrow { color: var(--orange); }
.enquete .eyebrow::before { background: var(--orange); }
.enquete h2 { color: var(--ink); }
.enquete .intro { color: var(--text-muted); }

.enquete-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .enquete-wrap { grid-template-columns: 1fr; gap: 40px; }
}

.enquete-aside h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 18px 0 24px;
  line-height: 0.98;
}
.enquete-aside p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.enquete-aside .perks {
  list-style: none;
  margin-top: 28px;
}
.enquete-aside .perks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 0.95rem;
}
.enquete-aside .perks li::before {
  content: '✓';
  width: 24px; height: 24px;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 700;
}

.enquete-form {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r-lg);
  padding: 44px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.1);
}
@media (max-width: 560px) { .enquete-form { padding: 28px; } }

.enquete-form h3 {
  font-size: 1.3rem;
  margin-bottom: 28px;
  color: var(--ink);
  letter-spacing: -0.025em;
}

.rating-group {
  margin-bottom: 26px;
}
.rating-group .rating-label {
  display: block;
  font-size: 0.86rem;
  color: var(--ink);
  margin-bottom: 12px;
  font-weight: 500;
}
.rating-stars {
  display: flex;
  gap: 8px;
}
.rating-stars button {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: rgba(0,0,0,0.25);
  font-size: 1.2rem;
  transition: all 0.25s var(--ease);
  cursor: pointer;
  font-weight: 500;
}
.rating-stars button:hover {
  border-color: var(--orange);
  color: var(--orange);
  transform: scale(1.1);
}
.rating-stars button.selected,
.rating-stars button.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.enquete-form .field label {
  color: rgba(0,0,0,0.55);
}
.enquete-form .field input,
.enquete-form .field textarea,
.enquete-form .field select {
  background: #FAF8F4;
  border-color: rgba(0,0,0,0.08);
  color: var(--ink);
}
.enquete-form .field input:focus,
.enquete-form .field textarea:focus,
.enquete-form .field select:focus {
  border-color: var(--orange);
  background: #fff;
}

.enquete-form .btn-primary {
  width: 100%;
  justify-content: center;
}

/* ============================
   CONTACT FORM
============================ */
.contact-section {
  padding: 140px 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(164,216,24,0.06) 0%, transparent 70%);
}

.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 50px; }
}

.contact-info h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 18px 0 24px;
  line-height: 0.98;
}
.contact-info > p {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 460px;
}
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  transition: all 0.3s;
}
.contact-card:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
}
.contact-card .ic-wrap {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.contact-card strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.contact-card span {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
}

.contact-hours {
  margin-top: 26px;
  padding: 22px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 18px;
}
.contact-hours .pulse {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--anis);
  position: relative;
  flex-shrink: 0;
}
.contact-hours .pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--anis);
  animation: pulse 2s infinite;
  opacity: 0.5;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-hours .pulse::after,
  .open-status .dot::after { animation: none; }
}

/* ============================
   BOUTON TÉLÉPHONE FLOTTANT
============================ */
.fab-phone {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0;
}
.fab-phone .fab-label {
  background: var(--ink-3);
  color: var(--text);
  border: 1px solid var(--line-strong);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 12px 18px;
  border-radius: 100px;
  margin-right: 12px;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.6);
}
.fab-phone .fab-label strong {
  display: block;
  color: var(--orange-bright);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.fab-phone .fab-label small {
  color: var(--text-dim);
  font-size: 0.72rem;
}
.fab-phone:hover .fab-label {
  opacity: 1;
  transform: translateX(0);
}
.fab-btn {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px -8px rgba(232,102,26,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
  animation: fabFloat 3s ease-in-out infinite;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  flex-shrink: 0;
}
.fab-btn svg {
  width: 28px;
  height: 28px;
  animation: fabRing 2.6s ease-in-out infinite;
  transform-origin: center;
}
/* Ondes concentriques */
.fab-btn::before,
.fab-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--orange);
  animation: fabWave 2.4s ease-out infinite;
}
.fab-btn::after { animation-delay: 1.2s; }
.fab-phone:hover .fab-btn {
  background: var(--orange-bright);
  transform: scale(1.08);
  animation-play-state: paused;
}
.fab-phone:hover .fab-btn svg { animation-play-state: paused; }

@keyframes fabFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes fabRing {
  0%, 60%, 100% { transform: rotate(0); }
  62% { transform: rotate(-14deg); }
  66% { transform: rotate(12deg); }
  70% { transform: rotate(-10deg); }
  74% { transform: rotate(8deg); }
  78% { transform: rotate(-5deg); }
  82% { transform: rotate(0); }
}
@keyframes fabWave {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 720px) {
  .fab-phone { bottom: 20px; right: 18px; }
  .fab-btn { width: 58px; height: 58px; }
  .fab-btn svg { width: 25px; height: 25px; }
  .fab-phone .fab-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-btn, .fab-btn svg { animation: none; }
  .fab-btn::before, .fab-btn::after { animation: none; opacity: 0; }
}

/* ============================
   BOUTON RECOMMENCER (SUCCÈS FORMULAIRE)
============================ */
.form-hidden { display: none !important; }
.btn-restart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 24px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.3s var(--ease);
}
.btn-restart svg {
  width: 17px; height: 17px;
  transition: transform 0.5s var(--ease);
}
.btn-restart:hover {
  border-color: var(--orange);
  color: var(--orange-bright);
  background: var(--orange-soft);
}
.btn-restart:hover svg { transform: rotate(-180deg); }
/* Variante claire pour le formulaire enquête (fond clair) */
.enquete .btn-restart {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
  color: var(--ink);
}
.enquete .btn-restart:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-soft);
}

/* ============================
   ANIMATIONS LÉGÈRES DES ICÔNES
============================ */
/* Piliers — flottement doux décalé */
.pillar-icon {
  animation: iconFloat 4s ease-in-out infinite;
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
  will-change: transform;
}
.pillar:nth-child(1) .pillar-icon { animation-delay: 0s; }
.pillar:nth-child(2) .pillar-icon { animation-delay: 0.5s; }
.pillar:nth-child(3) .pillar-icon { animation-delay: 1s; }
.pillar:nth-child(4) .pillar-icon { animation-delay: 1.5s; }
.pillar:hover .pillar-icon { transform: translateY(-4px) scale(1.12) rotate(-3deg); }

/* Certifications — léger balancement */
.certif-icon svg {
  animation: iconSway 5s ease-in-out infinite;
  transform-origin: center;
}
.certif-card:nth-child(2) .certif-icon svg { animation-delay: 0.6s; }
.certif-card:nth-child(3) .certif-icon svg { animation-delay: 1.2s; }
.certif-card:nth-child(4) .certif-icon svg { animation-delay: 1.8s; }

/* Icônes contact (cartes) — petite pulsation */
.contact-card .ic-wrap svg {
  animation: iconPulse 3.5s ease-in-out infinite;
  transform-origin: center;
}
.contact-card:nth-child(2) .ic-wrap svg { animation-delay: 0.4s; }
.contact-card:nth-child(3) .ic-wrap svg { animation-delay: 0.8s; }
.contact-card:hover .ic-wrap svg { animation-play-state: paused; }

/* Icônes liste de contact (footer formulaire) */
.form-contacts li .ic svg {
  animation: iconPulse 3.5s ease-in-out infinite;
  transform-origin: center;
}
.form-contacts li:nth-child(2) .ic svg { animation-delay: 0.5s; }
.form-contacts li:nth-child(3) .ic svg { animation-delay: 1s; }
.form-contacts li:nth-child(4) .ic svg { animation-delay: 1.5s; }

/* Icônes des cartes contact (page contact, .ic) */
.contact-info .ic svg {
  animation: iconFloat 4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes iconSway {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(4deg); }
  75% { transform: rotate(-4deg); }
}
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-icon,
  .certif-icon svg,
  .contact-card .ic-wrap svg,
  .form-contacts li .ic svg,
  .contact-info .ic svg { animation: none; }
}

/* ============================
   ANIMATION "SWOOSH" DES GROS TITRES
============================ */
.title-swoosh {
  opacity: 0;
}
.title-swoosh.swoosh-in {
  animation: titleSwoosh 1s var(--ease-out) forwards;
}
@keyframes titleSwoosh {
  0% {
    opacity: 0;
    transform: translateX(-46px) skewX(8deg);
    filter: blur(8px);
    letter-spacing: 0.04em;
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
    filter: blur(0);
    letter-spacing: -0.035em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .title-swoosh { opacity: 1; }
  .title-swoosh.swoosh-in { animation: none; }
}
.contact-hours .info { flex: 1; }
.contact-hours strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 3px;
  font-weight: 500;
}
.contact-hours span {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ============================
   BADGE OUVERT/FERMÉ (HEADER)
============================ */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}
@media (max-width: 1280px) {
  .open-status { display: none; }
}
.open-status .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--anis);
  position: relative;
  flex-shrink: 0;
}
.open-status .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--anis);
  animation: pulse 2s infinite;
  opacity: 0.5;
}
.open-status .label { color: var(--text); }
.open-status .sub { color: var(--text-muted); font-size: 0.72rem; }
/* État fermé */
.open-status.closed .dot { background: var(--text-muted); }
.open-status.closed .dot::after { border-color: var(--text-muted); animation: none; opacity: 0; }
.open-status.closed .label { color: var(--text-dim); }
@media (max-width: 1080px) {
  .open-status { display: none; }
}

/* ============================
   FLÈCHE RETOUR (PAGES)
============================ */
.page-back {
  position: relative;
  z-index: 5;
}
.page-back .container {
  padding-top: 110px;
  padding-bottom: 4px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 16px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: rgba(255,255,255,0.02);
  transition: all 0.3s var(--ease);
}
.back-link svg {
  width: 18px; height: 18px;
  transition: transform 0.3s var(--ease);
}
.back-link:hover {
  color: var(--text);
  border-color: var(--text);
  background: rgba(255,255,255,0.05);
}
.back-link:hover svg { transform: translateX(-4px); }
@media (max-width: 720px) {
  .page-back .container { padding-top: 92px; }
  .back-link { font-size: 0.8rem; padding: 9px 16px 9px 13px; }
}

.contact-form {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 44px;
}
@media (max-width: 560px) { .contact-form { padding: 28px; } }

.contact-form h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  letter-spacing: -0.025em;
}
.contact-form > p.subtitle {
  font-size: 0.92rem;
  color: var(--text-dim);
  margin-bottom: 32px;
}

.subject-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.subject-tag {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.25s;
}
.subject-tag:hover {
  border-color: var(--text);
  color: var(--text);
}
.subject-tag.selected {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.contact-form .btn-primary { width: 100%; justify-content: center; margin-top: 8px; }


@media (max-width: 1100px) {
  .nav-links, .header .btn-primary { display: none; }
  .menu-toggle {
    display: flex;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    align-items: center;
    justify-content: center;
    z-index: 102;
  }
  .menu-toggle span {
    width: 18px; height: 1px;
    background: currentColor;
    position: relative;
    transition: background 0.2s;
  }
  .menu-toggle span::before, .menu-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px; height: 1px;
    background: currentColor;
    transition: transform 0.3s var(--ease);
  }
  .menu-toggle span::before { top: -6px; }
  .menu-toggle span::after { top: 6px; }
  body.menu-open .menu-toggle span { background: transparent; }
  body.menu-open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
  body.menu-open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--ink);
    z-index: 101;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
  }
  body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
  .mobile-menu a {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    transition: color 0.2s, padding-left 0.3s;
  }
  .mobile-menu a:hover, .mobile-menu a.active { color: var(--orange); padding-left: 12px; }
  .mobile-menu .mm-cta {
    margin-top: 30px;
    border: none;
    background: var(--orange);
    color: #fff;
    border-radius: 100px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 18px;
  }
}
@media (min-width: 1101px) {
  .mobile-menu { display: none; }
}

/* ============================
   PROJETS À ONGLETS (catégories)
============================ */
.projets-tabs {
  padding: 140px 0;
  background: rgba(19,19,19,0.7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Grille catégories sur accueil */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-3);
  display: block;
  transition: transform 0.5s var(--ease);
}
.cat-card:hover { transform: translateY(-8px); }
.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.cat-card:hover img { transform: scale(1.1); }
.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,11,11,0.9) 100%);
  z-index: 1;
}
.cat-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 26px;
  z-index: 2;
  color: #fff;
}
.cat-card-info h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  line-height: 1.15;
}
.cat-card-arrow {
  font-size: 0.82rem;
  color: var(--orange);
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s var(--ease);
  display: inline-block;
}
.cat-card:hover .cat-card-arrow { opacity: 1; transform: translateY(0); }

/* PAGE PROJETS HUB */
.projets-hub {
  padding: 160px 0 120px;
  min-height: 100vh;
}
.projets-hub-head {
  max-width: 700px;
  margin-bottom: 70px;
}
.projets-hub-head h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 18px 0 28px;
}
.projets-hub-head h1 .accent { color: var(--orange); font-weight: 300; }
.projets-hub-head .lead {
  font-size: 1.1rem;
  color: var(--text-dim);
  line-height: 1.7;
}

.hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  position: relative;
  aspect-ratio: 16/11;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink-3);
  display: block;
  transition: transform 0.5s var(--ease);
}
.hub-card:hover { transform: translateY(-6px); }
.hub-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.hub-card:hover img { transform: scale(1.08); }
.hub-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(11,11,11,0.2) 0%, transparent 30%, rgba(11,11,11,0.92) 100%);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hub-num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.hub-card-bottom h2 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  color: #fff;
}
.hub-card-bottom p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 90%;
}
.hub-arrow {
  font-size: 0.88rem;
  color: var(--orange);
  font-weight: 600;
  transition: transform 0.3s var(--ease);
  display: inline-block;
}
.hub-card:hover .hub-arrow { transform: translateX(6px); }


.tabs-nav {
  display: flex;
  gap: 8px;
  margin: 50px auto;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  width: fit-content;
}
@media (max-width: 720px) {
  .tabs-nav { border-radius: var(--r-lg); width: 100%; }
}
.tab-btn {
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(232,102,26,0.5);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabFade 0.5s var(--ease); }
@keyframes tabFade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 50px;
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.7;
}
.projets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .projets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .projets-grid { grid-template-columns: 1fr; } }
.projet-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-3);
  cursor: pointer;
  aspect-ratio: 4/3;
  transition: transform 0.5s var(--ease);
}
.projet-card:hover { transform: translateY(-6px); }
.projet-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.projet-card:hover img { transform: scale(1.08); }
.projet-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(11,11,11,0.92) 100%);
  z-index: 1;
}
.projet-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px;
  z-index: 2;
  color: #fff;
}
.projet-info .cat {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(232,102,26,0.9);
  border-radius: 100px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
}
.projet-info h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.projet-info .meta {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s var(--ease);
}
.projet-card:hover .projet-info .meta {
  max-height: 120px;
  opacity: 1;
  margin-top: 4px;
}
.projet-info .specs {
  font-size: 0.76rem;
  color: var(--anis);
  margin-top: 8px;
  font-weight: 500;
}

/* ============================
   SHOWCASE AVANT/APRÈS
============================ */
.showcase {
  padding: 140px 0;
  background: var(--paper);
  color: var(--ink);
}
.showcase .eyebrow { color: var(--orange); }
.showcase .eyebrow::before { background: var(--orange); }
.showcase h2 { color: var(--anis); }
.showcase .section-head .intro { color: var(--text-muted); }

/* Actualités : fond sombre (cohérent avec le reste du site) */
.showcase.actus { background: var(--ink-2); color: var(--text); }
.showcase.actus .section-head .intro { color: var(--text-dim); }

/* ===== Actualités (accueil) ===== */
.actus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 12px;
}
@media (max-width: 900px) { .actus-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.actus-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(11,11,11,0.06);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.actus-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.45);
}
.actus-media { aspect-ratio: 16/10; overflow: hidden; }
.actus-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.actus-card:hover .actus-media img { transform: scale(1.05); }
.actus-body { padding: 24px 24px 28px; }
.actus-date {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 10px;
}
.actus-body h3 {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.18;
  margin-bottom: 10px;
}
.actus-body p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }
.actus-cta { text-align: center; margin-top: 48px; }
.map-link { color: var(--orange); font-weight: 600; font-size: 0.85em; display: inline-block; margin-top: 4px; transition: opacity 0.2s; }
.map-link:hover { opacity: 0.75; }

/* ===== Page FAQ (thèmes / fiches) ===== */
.faq-topics-section { padding: 30px 0 130px; }
.faq-topics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .faq-topics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .faq-topics { grid-template-columns: 1fr; } }
.faq-topic {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  min-height: 168px;
  text-decoration: none;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.faq-topic:hover { transform: translateY(-4px); border-color: var(--orange); }
.ft-ic { color: var(--orange); line-height: 0; }
.faq-topic h3 { color: var(--text); font-size: 1.15rem; line-height: 1.15; }
.faq-pdf {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}
.faq-pdf svg { width: 15px; height: 15px; }
.faq-topic:hover .faq-pdf { color: var(--orange); }

/* ===== Page Finition ===== */
.finition-section { padding: 30px 0 130px; }
.finition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 760px) { .finition-grid { grid-template-columns: 1fr; } }
.finition-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 32px;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.finition-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.finition-card .ft-ic { margin-bottom: 16px; }
.finition-card h3 { color: var(--text); font-size: 1.3rem; margin-bottom: 12px; }
.finition-card p { color: var(--text-dim); line-height: 1.7; font-size: 0.95rem; }

/* ===== Carte Facebook (page Actualités) — version attractive ===== */
.fb-visual {
  background: #1877F2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
@keyframes fb-shake {
  0%, 88%, 100% { transform: translate(0,0) rotate(0); }
  89% { transform: translate(-2px,1px) rotate(-1deg); }
  90% { transform: translate(2px,-1px) rotate(1deg); }
  91% { transform: translate(-2px,-1px) rotate(-1deg); }
  92% { transform: translate(2px,1px) rotate(1deg); }
  93% { transform: translate(-2px,1px) rotate(-1deg); }
  94% { transform: translate(2px,-1px) rotate(1deg); }
  95% { transform: translate(-1px,1px) rotate(0); }
  96% { transform: translate(1px,-1px) rotate(0); }
}
@keyframes fb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0), 0 8px 28px rgba(0,0,0,0.18); }
  50%      { box-shadow: 0 0 0 14px rgba(255,255,255,0.10), 0 12px 36px rgba(0,0,0,0.25); }
}
@keyframes fb-halo {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}
@keyframes fb-badge-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.05); }
}
@keyframes fb-arrow-go {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
.fb-visual .fb-card {
  position: relative;
  text-decoration: none;
  width: 380px;
  max-width: 100%;
  background: #1877F2;
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: Arial, Helvetica, sans-serif;
  transition: transform .3s ease, box-shadow .3s ease;
  animation: fb-shake 3s ease-in-out infinite, fb-pulse 3s ease-in-out infinite;
}
/* halo lumineux permanent autour de la carte */
.fb-visual .fb-card::before {
  content: '';
  position: absolute;
  inset: -18px;
  background: radial-gradient(ellipse, rgba(24,119,242,0.55) 0%, transparent 70%);
  border-radius: 28px;
  filter: blur(18px);
  z-index: -1;
  animation: fb-halo 3s ease-in-out infinite;
}
.fb-visual .fb-card:hover {
  animation-play-state: paused;
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 18px 44px rgba(0,0,0,0.32), 0 0 0 4px rgba(255,255,255,0.10);
}
.fb-visual .fb-card:hover .fb-icon { transform: rotate(-12deg) scale(1.2); }
.fb-visual .fb-card:hover .fb-cta-arrow { animation-play-state: paused; transform: translateX(8px) scale(1.2); }

/* Badge LIVE en haut à droite */
.fb-visual .fb-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ff3a3a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 11px 5px 9px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(255,58,58,0.5), 0 0 0 3px #1877F2;
  animation: fb-badge-blink 1.8s ease-in-out infinite;
}
.fb-visual .fb-badge-dot {
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff;
}

.fb-visual .fb-head { display: flex; align-items: center; justify-content: space-between; }
.fb-visual .fb-head-left { display: flex; align-items: center; gap: 8px; }
.fb-visual .fb-icon { transition: transform .4s ease; }
.fb-visual .fb-label { color: #fff; font-size: 17px; font-weight: 500; }
.fb-visual .fb-sub { color: #cfe0fb; font-size: 15px; }
.fb-visual .fb-logo {
  background: #EC691B;
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.fb-visual .fb-squares {
  display: grid;
  grid-template-columns: 32px 32px;
  grid-template-rows: 32px 32px;
  gap: 5px;
}
.fb-visual .fb-squares > div { border-radius: 4px; }
.fb-visual .fb-jh {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #EC691B; background: #fff;
}
.fb-visual .fb-text { display: flex; flex-direction: column; line-height: 1; color: #fff; }
.fb-visual .fb-text .l1 { font-size: 24px; font-weight: 600; }
.fb-visual .fb-text .l2 { font-size: 24px; font-weight: 300; }
.fb-visual .fb-text .srl { font-size: 11px; vertical-align: super; }

/* Ligne stats (note + abonnés) — social proof juste avant le CTA */
.fb-visual .fb-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.10);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  margin-top: 4px;
}
.fb-visual .fb-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.fb-visual .fb-stat-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.fb-visual .fb-stat-stars svg {
  filter: drop-shadow(0 1px 2px rgba(255,193,7,0.4));
}
.fb-visual .fb-stat-num {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.fb-visual .fb-stat-label {
  font-size: 12px;
  color: #cfe0fb;
  font-weight: 400;
}
.fb-visual .fb-stat-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.2);
}

/* CTA "Suivez-nous →" en bas de la carte */
.fb-visual .fb-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  margin-top: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255,255,255,0.2);
  transition: background 0.3s ease;
}
.fb-visual .fb-card:hover .fb-cta { background: rgba(255,255,255,0.25); }
.fb-visual .fb-cta-arrow {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  animation: fb-arrow-go 1.6s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.ba-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.25);
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ba-after { z-index: 1; }
.ba-before-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 50%;
  overflow: hidden;
  border-right: 3px solid #fff;
  transition: width 0.45s var(--ease-out);
}
.ba-wrap.dragging .ba-before-wrap,
.ba-wrap.dragging .ba-handle {
  transition: none;
}
/* L'image du côté gauche garde la taille du conteneur complet pour rester alignée */
.ba-before-wrap .ba-img {
  width: var(--ba-w, 1000px);
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.ba-label {
  position: absolute;
  top: 20px;
  z-index: 4;
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(10px);
}
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
  transition: left 0.45s var(--ease-out);
}
.ba-handle::after {
  content: '⟷';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 46px; height: 46px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* --- EFFET THERMIQUE CHAUD / FROID --- */
.thermal-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.thermal-overlay.hot {
  background:
    radial-gradient(circle at 75% 18%, rgba(255,210,60,0.4) 0%, transparent 40%),
    linear-gradient(135deg, rgba(255,94,0,0.32) 0%, rgba(220,30,30,0.34) 60%, rgba(150,10,40,0.3) 100%);
}
.thermal-overlay.cold {
  background:
    linear-gradient(135deg, rgba(60,170,255,0.22) 0%, rgba(30,90,200,0.24) 60%, rgba(20,40,120,0.2) 100%);
}
.ba-before-wrap .thermal-overlay.hot { z-index: 1; }

/* Rayons de soleil (côté chaud) */
.sun-rays {
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,225,120,0.9) 0%, rgba(255,180,40,0.4) 18%, transparent 45%);
  border-radius: 50%;
  animation: sunPulse 3.5s ease-in-out infinite;
}
.sun-rays::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,210,80,0.45) 0deg 6deg,
      transparent 6deg 24deg);
  border-radius: 50%;
  animation: sunSpin 22s linear infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes sunSpin {
  to { transform: rotate(360deg); }
}

/* Étiquette avec température */
.ba-temp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  margin-right: 6px;
  letter-spacing: -0.02em;
}
.ba-label.before { left: 20px; background: rgba(190,30,30,0.85); color: #fff; }
.ba-label.after { right: 20px; background: rgba(30,110,210,0.9); color: #fff; }

/* Légende thermique */
.thermal-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
}
.leg-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}
.leg-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.leg-dot.hot { background: linear-gradient(135deg, #ff7a28, #d11e1e); }
.leg-dot.cold { background: linear-gradient(135deg, #3caaff, #1e5ac8); }
@media (max-width: 560px) {
  .sun-rays { width: 180px; height: 180px; top: -40px; right: -40px; }
  .thermal-legend { gap: 16px; }
  .leg-item { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-rays, .sun-rays::before { animation: none; }
}

/* ============================
   TÉMOIGNAGES MULTIPLES
============================ */
.avis {
  padding: 140px 0;
  background: rgba(19,19,19,0.7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.avis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .avis-grid { grid-template-columns: 1fr; } }

/* Bloc avis Google */
.avis-google {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 44px;
}
.avis-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.025);
}
.avis-google-badge .g-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.avis-google-badge .g-logo .b { color: #4285F4; }
.avis-google-badge .g-logo .r { color: #EA4335; }
.avis-google-badge .g-logo .y { color: #FBBC05; }
.avis-google-badge .g-logo .g { color: #34A853; }
.avis-google-badge .g-stars { color: var(--orange); font-size: 0.95rem; letter-spacing: 1px; }
.avis-google-badge .g-meta { font-size: 0.8rem; color: var(--text-dim); }
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.3s var(--ease);
}
.btn-google svg { width: 17px; height: 17px; }
.btn-google:hover { background: var(--orange-bright); transform: translateY(-2px); }
.btn-google-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.3s var(--ease);
}
.btn-google-ghost:hover { border-color: var(--orange); color: var(--orange-bright); }
.avis-card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  transition: all 0.4s var(--ease);
}
.avis-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232,102,26,0.35);
}
.avis-stars {
  color: var(--orange);
  font-size: 1rem;
  letter-spacing: 3px;
  margin-bottom: 18px;
}
.avis-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 22px;
}
.avis-author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.avis-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--anis));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}
.avis-author strong { display: block; font-size: 0.92rem; }
.avis-author span { font-size: 0.8rem; color: var(--text-dim); }

/* ============================
   CERTIFICATIONS / GARANTIES
============================ */
.certif {
  padding: 120px 0;
  background: rgba(11,11,11,0.72);
}
.certif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .certif-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .certif-grid { grid-template-columns: 1fr; } }
.certif-card {
  text-align: center;
  padding: 38px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-2);
  transition: all 0.4s var(--ease);
}
.certif-card:hover {
  transform: translateY(-6px);
  border-color: rgba(164,216,24,0.4);
  background: var(--ink-3);
}
.certif-icon {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-soft);
  border-radius: 16px;
}
.certif-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.certif-card p {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 40px;
}
.lightbox.show { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--r-md);
}
.lightbox-close {
  position: absolute;
  top: 30px; right: 30px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox img { cursor: pointer; }
.lightbox-counter {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
@media (max-width: 640px) {
  .lightbox-nav { width: 46px; height: 46px; font-size: 1.6rem; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
}
/* ============================================
   OPTIMISATIONS MOBILE — clarté & lisibilité
   ============================================ */
@media (max-width: 560px) {
  /* Titres géants : éviter débordement et garder lisible */
  .hero h1 { font-size: clamp(2.2rem, 11vw, 3.2rem); line-height: 1.05; }
  .market-hero h1 { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.06; }
  .section-head h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.1; }
  .hero p.lead { font-size: 1rem; }

  /* Boutons d'action hero : empilés et pleine largeur pour le pouce */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; text-align: center; }

  /* Cartes gammes : bouton "Voir les marques" bien visible et tappable */
  .gamme-brands-btn {
    margin-top: 12px;
    padding: 10px 14px;
    min-height: 40px;
    font-size: 0.9rem;
  }
  .gamme-card .gamme-content { padding: 18px; }
  .gamme-card h3 { font-size: 1.25rem; }

  /* Galerie publique : 1 colonne nette, items pas trop hauts */
  .public-gallery-grid { grid-template-columns: 1fr !important; }
  .public-gallery-grid .pg-item,
  .public-gallery-grid .pg-item.wide,
  .public-gallery-grid .pg-item.tall { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4/3; }

  /* Réduire les paddings de section pour moins de scroll inutile */
  section { padding-left: 4px; padding-right: 4px; }
  .container { padding-left: 18px; padding-right: 18px; }

  /* Page marque : cartes en 1 colonne */
  .brand-grid { grid-template-columns: 1fr !important; }

  /* Bouton flottant téléphone : pas trop gros */
  .fab-btn, .floating-call { transform: scale(0.92); }
}

/* Cibles tactiles confortables (tous mobiles/tablettes) */
@media (max-width: 1100px) {
  .gamme-brands-btn,
  .brand-card,
  .hero-dot,
  .nav-adresse,
  .cat-card,
  .hub-card { -webkit-tap-highlight-color: rgba(232,102,26,0.2); }
  /* Élargir la zone tappable du bouton marques */
  .gamme-brands-btn { cursor: pointer; }
}
/* ============================================
   PAGE CONCOURS — timeline événements
   ============================================ */
.concours-section {
  padding: 80px 0 100px;
  background: rgba(4,4,4,0.92);
  position: relative;
}
.concours-timeline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.concours-item {
  background: rgba(11,11,11,0.72);
  padding: 32px 36px;
  transition: background 0.3s;
}
.concours-item:hover { background: rgba(20,20,20,0.85); }
.concours-date {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 12px;
}
.concours-item h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 12px;
}
.concours-item p {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 820px;
}
/* Mise en page avec photo principale à côté du texte */
.concours-item.has-media {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}
.concours-media {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.3);
}
.concours-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.5s var(--ease);
}
.concours-item.has-media:hover .concours-media img { transform: scale(1.04); }
.concours-body { min-width: 0; }
/* Galerie miniatures (formation) */
.concours-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 18px;
  max-width: 820px;
}
.concours-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), border-color 0.3s;
}
.concours-gallery img:hover { transform: scale(1.05); border-color: var(--orange); }
.concours-gallery img { cursor: pointer; }
@media (max-width: 720px) {
  .concours-item.has-media {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .concours-media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .concours-item { padding: 24px 20px; }
  .concours-item h3 { font-size: 1.2rem; }
}

/* ===== Pages légales (Mentions, RGPD, Cookies) ===== */
.legal-section {
  padding: 40px 0 100px;
  position: relative;
}
.legal-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 38px 0 14px;
  color: var(--anis);
  letter-spacing: -0.02em;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  margin-bottom: 14px;
  color: var(--text-dim);
}
.legal-content ul {
  margin: 10px 0 18px 0;
  padding-left: 22px;
  color: var(--text-dim);
}
.legal-content ul li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.legal-content ul li::marker { color: var(--orange); }
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-content em { color: var(--text-muted); }
.legal-update {
  margin-top: 42px !important;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-muted) !important;
  font-size: 0.85rem;
}

/* ============================
   OPTIMISATIONS FINALES (PC + mobile)
   Aucune modification visuelle, juste des correctifs invisibles
============================ */

/* Sécurité : pas de scroll horizontal accidentel sur aucun écran */
html, body { overflow-x: hidden; }

/* Sécurité : images jamais plus larges que leur conteneur */
img { max-width: 100%; height: auto; }

/* Désactive le flash gris au tap sur les boutons (iOS / Android) */
.btn, .nav-links a, .menu-toggle, .partner,
.subject-tag, .ral-chip, .brand-chip, .mat-chip, .product-chip,
.pg-item, .gamme-card, .pillar, .market-card {
  -webkit-tap-highlight-color: transparent;
}

/* Anti-bug iOS : empêche le zoom auto sur focus des champs */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Respect du choix utilisateur "reduced motion" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .bg-glows { display: none; }
}

/* Léger boost perf : halos animés ralentis sur petit écran (économie batterie) */
@media (max-width: 560px) {
  .bg-glows .glow {
    animation-duration: 90s !important;
  }
}

/* ============================
   FINITIONS MOBILES (lisibilité + tactile)
   Ajout : ne s'active que sur petits écrans, n'altère pas le design desktop
============================ */
@media (max-width: 760px) {
  /* Empêche tout débordement horizontal résiduel */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, iframe, table { max-width: 100%; height: auto; }

  /* Confort de lecture : corps de texte un peu plus grand */
  body { font-size: 16px; line-height: 1.6; }
  p { font-size: 1rem; }

  /* Évite les mots qui débordent (longs noms, e-mails, URLs) sans couper brutalement */
  p, h1, h2, h3, h4, li, a { overflow-wrap: break-word; }

  /* Zones cliquables confortables au doigt (min 44px recommandé) */
  a.btn, button, .actus-card, .nav-link, .lightbox-nav, .lightbox-close {
    min-height: 44px;
  }

  /* Galerie des actualités : photos plus grandes et lisibles sur mobile */
  .concours-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .concours-gallery img { aspect-ratio: 4 / 3; }

  /* Lightbox : flèches bien visibles et atteignables au pouce */
  .lightbox-nav { width: 52px; height: 52px; }
  .lightbox-close { width: 48px; height: 48px; font-size: 2rem; }
  .lightbox-counter { font-size: 1rem; bottom: 18px; }

  /* L'image de la lightbox ne dépasse jamais l'écran */
  .lightbox img { max-width: 94vw; max-height: 82vh; }
}

/* Très petits écrans : galerie en 1 seule colonne pour un maximum de clarté */
@media (max-width: 420px) {
  .concours-gallery { grid-template-columns: 1fr !important; }
}



/* ===== BARRE DE NAVIGATION : bande blanche arrondie brillante, texte vert lime ===== */
.nav-links{
  background: linear-gradient(180deg, #ffffff 0%, #f3f3ee 100%) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  border-radius: 100px !important;
  padding: 5px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.95),
              inset 0 -2px 6px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(8px);
}
.nav-links a{
  color: #A4D818 !important;            /* vert lime */
  font-weight: 600 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.nav-links a:hover{
  color: #A4D818 !important;
  background: rgba(164,216,24,0.12) !important;
}
.nav-links a.active{
  color: #ffffff !important;
  background: linear-gradient(180deg, #A4D818 0%, #A4D818 100%) !important;
  box-shadow: 0 2px 8px rgba(164,216,24,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
  font-weight: 700 !important;
}


/* =====================================================
   ÉCLAIRCISSEMENT DU FOND + PLUS DE VIE GRAPHIQUE
===================================================== */
/* Fond de base : anthracite plus clair et lumineux (au lieu du quasi-noir) */
:root{
  --ink: #15161A;          /* gris-anthracite, plus doux que #0B0B0B */
  --ink-2: rgba(34,36,42,0.72);
  --ink-3: rgba(44,46,54,0.72);
}
body{ background: radial-gradient(140% 120% at 50% -10%, #232530 0%, #15161A 55%, #101116 100%) !important; }

/* Halos orange/anis nettement plus présents et lumineux */
.bg-glows .glow{ filter: blur(110px) !important; opacity:.9 !important; }
.glow-1{ width:560px; height:560px; background: rgba(232,102,26,0.55) !important; top:-8%; left:-6%; animation: floatA 18s ease-in-out infinite !important; }
.glow-2{ width:480px; height:480px; background: rgba(164,216,24,0.42) !important; top:30%; right:-8%; animation: floatB 22s ease-in-out infinite !important; }
.glow-3{ width:520px; height:520px; background: rgba(255,122,40,0.40) !important; bottom:-12%; left:25%; animation: floatC 20s ease-in-out infinite !important; }
.glow-4{ width:360px; height:360px; background: rgba(232,102,26,0.30) !important; top:55%; left:8%; animation: floatA 26s ease-in-out infinite reverse !important; }

@keyframes floatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.12)}}
@keyframes floatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,60px) scale(1.08)}}
@keyframes floatC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-50px) scale(1.15)}}

/* Grain/texture subtile pour casser l'aplat (élément graphique discret) */
body::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sections : fonds un peu plus clairs pour respirer */
.produits{ background: rgba(28,30,36,0.55) !important; }
.about{ background: rgba(24,26,32,0.5) !important; }
.partners{ background: rgba(20,21,26,0.4) !important; }

/* Micro-animations : liens de nav et cartes plus vivants */
.gamme-card{ transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s !important; }
.gamme-card:hover{ transform: translateY(-8px) !important; box-shadow: 0 20px 50px rgba(232,102,26,0.18) !important; }
.btn-primary{ transition: transform .3s var(--ease), box-shadow .3s !important; }
.btn-primary:hover{ transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 12px 36px rgba(232,102,26,0.45) !important; }

/* Ligne lumineuse animée sous les titres de section (élément graphique) */
.section-head .eyebrow::after{
  content:''; display:inline-block; width:0; height:1px; background:linear-gradient(90deg,var(--orange),transparent);
  margin-left:10px; vertical-align:middle; animation: lineGrow 1.2s var(--ease) forwards;
}
@keyframes lineGrow{to{width:60px}}


/* ============================================================
   THÈME CLAIR v2 — blanc lumineux, vert renforcé, néon orange,
   bande d'onglets arrondie, animations spectaculaires,
   grille quadrillée étendue, correctifs lisibilité.
   (bloc final : prioritaire)
   ============================================================ */
:root{
  --ink:    #F4F5F7;
  --ink-2:  rgba(255,255,255,0.82);
  --ink-3:  rgba(255,255,255,0.88);
  --text:      #16181C;
  --text-dim:  #3D4148;
  --text-muted:#5C616B;
  --line:        rgba(20,22,28,0.10);
  --line-strong: rgba(20,22,28,0.18);
  --anis: #A4D818;          /* vert un peu plus profond, lisible sur blanc */
  --anis-bright: #A4D818;
}

/* ---------- FOND : blanc lumineux ---------- */
body{
  background: radial-gradient(150% 130% at 50% -10%, #FFFFFF 0%, #F5F6F8 55%, #ECEEF2 100%) !important;
  color: var(--text) !important;
}

/* ---------- GRILLE QUADRILLÉE (fond global, lignes sombres) ---------- */
body::after{
  content:'' !important; position:fixed !important; inset:0 !important;
  pointer-events:none !important; z-index:0 !important;
  background-image:
    linear-gradient(rgba(20,22,28,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,28,0.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(20,22,28,0.03) 1px, transparent 1.5px) !important;
  background-size: 46px 46px, 46px 46px, 23px 23px !important;
  mask-image: radial-gradient(ellipse 150% 130% at 50% 0%, #000 60%, transparent 96%) !important;
  -webkit-mask-image: radial-gradient(ellipse 150% 130% at 50% 0%, #000 60%, transparent 96%) !important;
  opacity:1 !important;
}
body::before{ opacity:0 !important; }

/* ---------- TEXTURE QUADRILLÉE SUR PLUS DE SECTIONS ----------
   On pose la même grille en pseudo-élément local sur plusieurs sections */
.pillars, .produits, .methode, .kpi, .about, .partners, .final-cta,
.zone, .avis, .faq, .concours, .enquete{
  position: relative;
}
.pillars::before, .produits::before, .methode::before, .kpi::before,
.about::before, .partners::before, .zone::before, .avis::before,
.faq::before, .concours::before, .enquete::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,22,28,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,28,0.04) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, #000 55%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, #000 55%, transparent 90%);
  opacity:.7;
}
/* le contenu passe au-dessus de la grille locale */
.pillars > *, .produits > *, .methode > *, .kpi > *, .about > *,
.partners > *, .zone > *, .avis > *, .faq > *, .concours > *, .enquete > *{
  position: relative; z-index: 1;
}

/* ---------- HALOS NÉON ORANGE (plus présents, effet lumineux) ---------- */
.bg-glows{ opacity:.85 !important; }
.bg-glows .glow{ filter: blur(90px) saturate(150%) !important; mix-blend-mode: multiply !important; }
.glow-1{ width:620px;height:620px; background: radial-gradient(circle, rgba(255,106,0,0.55), rgba(255,106,0,0) 70%) !important; top:-8%; left:-6%;  animation: neonDrift1 16s ease-in-out infinite !important; }
.glow-2{ width:520px;height:520px; background: radial-gradient(circle, rgba(164,216,24,0.45), rgba(164,216,24,0) 70%) !important; top:28%; right:-8%; animation: neonDrift2 20s ease-in-out infinite !important; }
.glow-3{ width:560px;height:560px; background: radial-gradient(circle, rgba(255,138,40,0.50), rgba(255,138,40,0) 70%) !important; bottom:-12%; left:22%; animation: neonDrift3 18s ease-in-out infinite !important; }
.glow-4{ width:420px;height:420px; background: radial-gradient(circle, rgba(255,80,0,0.40), rgba(255,80,0,0) 70%) !important; top:55%; left:6%; animation: neonDrift1 24s ease-in-out infinite reverse !important; }
.glow-5{ width:480px;height:480px; background: radial-gradient(circle, rgba(164,216,24,0.38), rgba(164,216,24,0) 70%) !important; top:12%; left:40%; animation: neonDrift2 22s ease-in-out infinite !important; }
.glow-6{ width:500px;height:500px; background: radial-gradient(circle, rgba(255,122,40,0.42), rgba(255,122,40,0) 70%) !important; top:72%; left:55%; animation: neonDrift3 26s ease-in-out infinite reverse !important; }

@keyframes neonDrift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,50px) scale(1.18)}66%{transform:translate(-30px,30px) scale(.95)}}
@keyframes neonDrift2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-60px,40px) scale(1.12)}66%{transform:translate(40px,-30px) scale(1.05)}}
@keyframes neonDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-60px) scale(1.2)}}

/* ---------- SECTIONS : fonds blancs translucides ---------- */
.produits{ background: rgba(255,255,255,0.50) !important; }
.about{    background: rgba(255,255,255,0.42) !important; }
.partners{ background: rgba(255,255,255,0.38) !important; }

/* ---------- CARTES / PANNEAUX clairs ---------- */
.gamme-card, .pillar, .market-card, .kpi-item, .actus-card, .pg-item,
.certif-item, .avis-card, .faq-item, .zone-card, .cat-card{
  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(20,22,28,0.08) !important;
  box-shadow: 0 10px 34px rgba(20,22,28,0.07) !important;
}

/* ---------- BANDE D'ONGLETS : bande nette à bords arrondis ---------- */
.nav-links{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(20,22,28,0.10) !important;
  border-radius: 50px !important;
  padding: 5px 6px !important;
  gap: 2px !important;
  box-shadow: 0 6px 22px rgba(20,22,28,0.10) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
.nav-links a{
  color: var(--text) !important;
  border-radius: 40px !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
}
.nav-links a:hover{ background: rgba(164,216,24,0.14) !important; color: var(--anis) !important; }
.nav-links a.active{ background: var(--anis) !important; color:#fff !important; box-shadow: 0 4px 14px rgba(164,216,24,0.35) !important; }

/* En-tête : voile blanc */
.header, .header.scrolled{
  background: rgba(255,255,255,0.80) !important;
  border-bottom: 1px solid rgba(20,22,28,0.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
}

/* ---------- PLUS DE VERT DANS LES TYPOS ---------- */
h1, h2, h3, h4{ color: var(--text) !important; }
.eyebrow, .partners-label, .pillar-num, .section-head .eyebrow,
.kpi-num, .hub-num, .gamme-num{ color: var(--anis) !important; }
.italic, h1 .italic, h2 .italic{ color: var(--anis) !important; }
/* l'accent vert : la phrase clé du hero */
.accent-orange, .accent-green{ color: var(--anis) !important; }
a.link-accent, .text-accent{ color: var(--anis) !important; }

/* ---------- CORRECTIFS LISIBILITÉ (blanc sur blanc / opacité) ---------- */
/* prose des sections claires -> texte foncé garanti */
.pillars p, .produits p, .methode p, .kpi p, .about p, .partners p,
.zone p, .avis p, .faq p, .faq-item p, .concours p, .enquete p,
.section-head p, .market-card p, .pillar p, .actus-body p{
  color: var(--text-dim) !important; opacity: 1 !important;
}
/* listes et petits textes */
.zone-villes li, .perks li, .faq-list li{ color: var(--text-dim) !important; opacity:1 !important; }
/* tout texte blanc translucide hors photo : on le force foncé si sur fond clair */
.kpi-item p, .kpi-item .kpi-label, .certif-item p, .avis-card p, .zone-card p{
  color: var(--text-dim) !important; opacity:1 !important;
}
/* sécurité : aucun paragraphe sous opacity < .5 sur fond clair */
p[style*="opacity"]{ opacity: 1 !important; }

/* ---------- ANIMATIONS SPECTACULAIRES ---------- */
/* Apparition au scroll : montée + léger zoom + flou qui se résorbe */
.reveal{
  opacity:0 !important;
  transform: translateY(40px) scale(.96) !important;
  filter: blur(6px) !important;
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease !important;
}
.reveal.visible{
  opacity:1 !important; transform: translateY(0) scale(1) !important; filter: blur(0) !important;
}
.reveal-stagger > *{
  opacity:0 !important;
  transform: translateY(34px) scale(.96) !important;
  filter: blur(5px) !important;
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease !important;
}
.reveal-stagger.visible > *{ opacity:1 !important; transform:none !important; filter:blur(0) !important; }
.reveal-stagger.visible > *:nth-child(1){ transition-delay:.06s !important; }
.reveal-stagger.visible > *:nth-child(2){ transition-delay:.14s !important; }
.reveal-stagger.visible > *:nth-child(3){ transition-delay:.22s !important; }
.reveal-stagger.visible > *:nth-child(4){ transition-delay:.30s !important; }
.reveal-stagger.visible > *:nth-child(5){ transition-delay:.38s !important; }
.reveal-stagger.visible > *:nth-child(6){ transition-delay:.46s !important; }
.reveal-stagger.visible > *:nth-child(7){ transition-delay:.54s !important; }
.reveal-stagger.visible > *:nth-child(8){ transition-delay:.62s !important; }

/* Cartes : survol vivant avec halo vert/orange */
.gamme-card, .pillar, .market-card, .kpi-item, .actus-card, .cat-card{
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .35s !important;
}
.gamme-card:hover, .pillar:hover, .market-card:hover, .cat-card:hover{
  transform: translateY(-10px) !important;
  box-shadow: 0 26px 60px rgba(255,106,0,0.18), 0 0 0 1px rgba(164,216,24,0.25) !important;
  border-color: rgba(164,216,24,0.4) !important;
}

/* Titre hero : entrée spectaculaire */
.hero-content h1{ animation: heroReveal 1.1s cubic-bezier(.16,1,.3,1) both !important; }
.hero-content .lead{ animation: heroReveal 1.1s cubic-bezier(.16,1,.3,1) .15s both !important; }
.hero-content .hero-actions{ animation: heroReveal 1.1s cubic-bezier(.16,1,.3,1) .3s both !important; }
@keyframes heroReveal{ from{opacity:0; transform:translateY(46px) scale(.95); filter:blur(8px);} to{opacity:1; transform:none; filter:blur(0);} }

/* Boutons : pulsation néon au survol */
.btn-primary{ transition: transform .3s var(--ease), box-shadow .3s ease, background .3s !important; }
.btn-primary:hover{ transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 14px 36px rgba(255,106,0,0.45) !important; }

/* ---------- TITRES : 1re partie en VERT, accent (fin) en ORANGE ---------- */
/* Par defaut, les grands titres passent en vert (la "premiere phrase") */
h1, h2{ color: var(--anis) !important; }
h1 br, h2 br{ }
/* La fin du titre (span d'accent / italique / em) passe en orange */
h1 .accent, h2 .accent,
h1 .accent-green, h2 .accent-green,
h1 .accent-orange, h2 .accent-orange,
h1 .italic, h2 .italic,
h1 em, h2 em{
  color: var(--orange) !important;
}
/* h3 / h4 restent en texte foncé (sous-titres de cartes) */
h3, h4{ color: var(--text) !important; }

/* ---------- HERO : texte blanc sur la photo (overlay sombre) ---------- */
.hero-content h1, .hero-content h1 *{ color: var(--anis-bright) !important; }
.hero-content h1 .accent-green, .hero-content h1 .accent-orange{ color: #FF8A28 !important; }
.hero-content .lead{ color: rgba(255,255,255,0.92) !important; opacity:1 !important; }
.hero-eyebrow{ color: var(--anis-bright) !important; }
.hero-scroll-hint, .hero .scroll-hint, .hero-content .hero-scroll{ color: rgba(255,255,255,0.7) !important; opacity:1 !important; }
/* renforcer l'overlay a droite pour garantir le contraste partout */
.hero-overlay{
  background:
    linear-gradient(90deg, rgba(11,11,11,0.85) 0%, rgba(11,11,11,0.62) 50%, rgba(11,11,11,0.40) 100%),
    linear-gradient(180deg, rgba(11,11,11,0.5) 0%, transparent 30%, transparent 55%, rgba(11,11,11,0.82) 100%),
    radial-gradient(ellipse at 70% 40%, rgba(255,106,0,0.18) 0%, transparent 55%) !important;
}

::selection{ background: var(--anis); color:#fff; }


/* ============================================================
   SECTION KPI / CHIFFRES — refonte spectaculaire
   (pas de gros blocs blancs, fond grille animé néon)
   ============================================================ */
.kpi{
  position: relative !important;
  padding: 130px 0 !important;
  background: linear-gradient(180deg, #0E1014 0%, #15181E 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
}
/* Grille animée qui défile en fond */
.kpi::before{
  content:'' !important; position:absolute !important; inset:-2px !important; z-index:0 !important;
  background-image:
    linear-gradient(rgba(164,216,24,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164,216,24,0.10) 1px, transparent 1px) !important;
  background-size: 54px 54px, 54px 54px !important;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 55%, transparent 92%) !important;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 55%, transparent 92%) !important;
  animation: kpiGridMove 12s linear infinite !important;
  opacity: 1 !important;
}
/* Balayage néon orange qui traverse la grille */
.kpi::after{
  content:'' !important; position:absolute !important; inset:0 !important; z-index:0 !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,106,0,0.22), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(164,216,24,0.18), transparent 45%) !important;
  animation: kpiGlowSweep 9s ease-in-out infinite !important;
  pointer-events:none !important;
}
@keyframes kpiGridMove{ from{ background-position: 0 0, 0 0; } to{ background-position: 54px 54px, 54px 54px; } }
@keyframes kpiGlowSweep{ 0%,100%{ opacity:.55; transform:scale(1);} 50%{ opacity:1; transform:scale(1.08);} }

.kpi .container{ position:relative !important; z-index:1 !important; }
.kpi-grid{ gap: 24px !important; }

/* Chaque chiffre : PAS de bloc blanc, juste un trait + glow */
.kpi-item{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px 16px !important;
  position: relative !important;
}
/* séparateurs verticaux fins entre les chiffres (desktop) */
.kpi-item:not(:last-child)::after{
  content:'' !important; position:absolute !important; top:18%; right:-12px; height:64%; width:1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent) !important;
}
/* Le grand chiffre : dégradé vert→orange + halo néon qui pulse */
.kpi-num{
  font-weight: 600 !important;
  background: linear-gradient(135deg, var(--anis-bright) 0%, #FFB048 55%, var(--orange) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 0 18px rgba(255,106,0,0.45)) !important;
  animation: kpiPulse 3s ease-in-out infinite !important;
}
.kpi-num .sup{
  -webkit-text-fill-color: var(--anis-bright) !important; color: var(--anis-bright) !important;
  background: none !important; filter:none !important;
}
@keyframes kpiPulse{ 0%,100%{ filter: drop-shadow(0 0 16px rgba(255,106,0,0.35)); } 50%{ filter: drop-shadow(0 0 30px rgba(255,106,0,0.65)); } }

.kpi-label{
  color: rgba(255,255,255,0.78) !important;
  margin-top: 6px !important;
}

/* Apparition spectaculaire des chiffres (montée + zoom + flou) */
.kpi-grid.reveal-stagger > *{
  opacity:0 !important; transform: translateY(40px) scale(.85) !important; filter: blur(8px) !important;
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease !important;
}
.kpi-grid.reveal-stagger.visible > *{ opacity:1 !important; transform:none !important; filter:blur(0) !important; }

@media (max-width: 768px){
  .kpi-item:not(:last-child)::after{ display:none !important; }
}


/* ============================================================
   CORRECTIFS : tout en blanc, marques en vert, matériaux en vert
   (bloc final, prioritaire)
   ============================================================ */

/* ---------- TOUS LES FONDS SOMBRES -> BLANC ---------- */
.produits{ background: rgba(255,255,255,0.55) !important; color: var(--text) !important; }
.about{    background: rgba(255,255,255,0.45) !important; }
.partners{
  background: rgba(255,255,255,0.85) !important;
  border-top: 1px solid rgba(20,22,28,0.08) !important;
  border-bottom: 1px solid rgba(20,22,28,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.certif{ background: rgba(255,255,255,0.50) !important; }
.concours-item{ background: rgba(255,255,255,0.88) !important; border: 1px solid rgba(20,22,28,0.08) !important; }

/* ---------- SECTION KPI : fond BLANC (on garde grille + néon) ---------- */
.kpi{
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%) !important;
  border-top: 1px solid rgba(20,22,28,0.08) !important;
  border-bottom: 1px solid rgba(20,22,28,0.08) !important;
}
.kpi::before{
  background-image:
    linear-gradient(rgba(164,216,24,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164,216,24,0.16) 1px, transparent 1px) !important;
}
.kpi::after{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,106,0,0.16), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(164,216,24,0.14), transparent 45%) !important;
}
.kpi-item:not(:last-child)::after{
  background: linear-gradient(180deg, transparent, rgba(20,22,28,0.14), transparent) !important;
}
.kpi-label{ color: var(--text-dim) !important; }

/* ---------- BANDE DES MARQUES : noms en VERT ---------- */
.partner{
  color: var(--anis) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
.partner small{ color: var(--text-muted) !important; }
.partner:hover{ color: var(--orange) !important; }

/* ---------- MATÉRIAUX (cartes gammes) : titres en VERT ---------- */
/* Les cartes ont une photo : on garde un voile sombre pour lire le vert clair */
.gamme-card::after{
  background: linear-gradient(180deg, transparent 30%, rgba(11,11,11,0.55) 75%, rgba(11,11,11,0.82) 100%) !important;
}
.gamme-content h3{ color: var(--anis-bright) !important; }
.gamme-content p{ color: rgba(255,255,255,0.92) !important; }
.gamme-num{ color: var(--anis-bright) !important; }


/* ============================================================
   MISSION : TOUT EN BLANC — suppression de tous les fonds
   gris/noir, sur tout le site. Textes noirs/clairs invisibles
   corrigés. (BLOC FINAL — prioritaire sur tout)
   ============================================================ */

/* ---------- SECTIONS : fond blanc partout ---------- */
.partners, .pillars, .produits, .methode, .kpi, .showcase, .showcase.actus,
.avis, .certif, .about, .zone, .form-section, .contact-section, .enquete,
.faq, .gamme-page, .projets-hub, .projets-tabs, .market-hero, .market-projects,
.concours-section, .faq-topics-section, .finition-section, .legal-section,
.realisations, .footer{
  background: #FFFFFF !important;
}
/* variantes translucides douces pour alterner subtilement le blanc */
.produits{ background: #FBFCFD !important; }
.about{    background: #FAFBFC !important; }
.certif{   background: #FBFCFD !important; }
.avis{     background: #FFFFFF !important; }
.kpi{      background: linear-gradient(180deg,#FFFFFF 0%, #F6F8FA 100%) !important; }
.footer{   background: #F4F6F8 !important; border-top: 1px solid rgba(20,22,28,0.10) !important; }

/* ---------- CARTES / PANNEAUX : fond blanc ---------- */
.pillar, .market-card, .kpi-item, .actus-card, .pg-item, .certif-item,
.certif-card, .avis-card, .faq-item, .faq-topic, .zone-card, .cat-card,
.engagement-card, .contact-card, .contact-hours, .concours-item,
.finition-card, .project-spec, .promo-item, .mosaic-item, .hub-card,
.brand-card, .devis-form, .contact-form, .enquete-form, .gallery-item{
  background: #FFFFFF !important;
}
.pillar, .market-card, .certif-card, .avis-card, .faq-item, .faq-topic,
.engagement-card, .contact-card, .contact-hours, .concours-item,
.finition-card, .zone-card{
  border: 1px solid rgba(20,22,28,0.10) !important;
  box-shadow: 0 8px 28px rgba(20,22,28,0.06) !important;
}
.pillar:hover{ background:#FFFFFF !important; }

/* champs de formulaire en blanc */
.field input, .field textarea, .field select{
  background: #FFFFFF !important;
  border: 1px solid rgba(20,22,28,0.16) !important;
  color: var(--text) !important;
}
.rating-stars button, .enquete .btn-restart{ background:#FFFFFF !important; }

/* menu mobile / nav band en blanc */
.mobile-menu{ background: #FFFFFF !important; }

/* tabs de projets en blanc */
.tabs-nav, .tab-btn{ background:#FFFFFF !important; }
.tab-btn{ color: var(--text-dim) !important; border:1px solid rgba(20,22,28,0.12) !important; }
.tab-btn.active{ background: var(--anis) !important; color:#fff !important; }

/* concours media : fond clair */
.concours-media{ background: #EEF1F4 !important; }
.concours-item:hover{ background:#FFFFFF !important; box-shadow: 0 14px 40px rgba(255,106,0,0.14) !important; }

/* ---------- TEXTES (anti noir-sur-blanc & blanc-sur-blanc) ---------- */
/* prose & labels des sections claires -> foncé lisible */
.pillar p, .market-card p, .kpi-label, .certif-card p, .certif-item p,
.avis-card p, .faq-item p, .faq-topic p, .engagement-card p, .contact-card p,
.zone-card p, .concours-item p, .finition-card p, .section-head p, .intro,
.form-intro, .about p, .zone p, .enquete p{
  color: var(--text-dim) !important; opacity: 1 !important;
}
/* sous-titres de cartes claires en foncé */
.pillar h3, .market-card h3, .certif-card h3, .faq-item h3, .faq-topic h3,
.engagement-card h3, .contact-card h3, .finition-card h3, .avis-card h4{
  color: var(--text) !important;
}
/* éléments qui étaient blancs et sont maintenant sur blanc -> foncé */
.contact-hours, .contact-hours *, .project-spec, .project-spec *,
.promo-item .promo-text, .mosaic-caption{
  color: var(--text-dim) !important;
}

/* ---------- ÉLÉMENTS SUR PHOTO : on garde texte blanc + voile sombre ---------- */
/* (cartes avec image de fond : matériaux, projets, hub, galerie) */
.gamme-card::after, .cat-card::after, .projet-card::after,
.hub-card-overlay, .gallery-item::after, .pg-item::after{
  background: linear-gradient(180deg, transparent 30%, rgba(11,11,11,0.55) 78%, rgba(11,11,11,0.85) 100%) !important;
}
.gamme-content, .gamme-content p, .cat-card-info, .hub-card-bottom h2,
.hub-card-bottom p, .projet-info, .projet-info .meta, .gallery-caption{
  /* restent clairs sur la photo */
}
.gamme-content h3, .cat-card-info h2, .hub-card-bottom h2{ color: var(--anis-bright) !important; }

/* lightbox reste sombre (visionneuse plein écran) — volontaire */

/* ============================================================
   BOUTON RETOUR — bien visible partout
   ============================================================ */
.back-link{
  background: #FFFFFF !important;
  border: 1.5px solid var(--anis) !important;
  color: var(--anis) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(164,216,24,0.18) !important;
  transition: background .25s, color .25s, box-shadow .25s, transform .25s !important;
}
.back-link:hover{
  background: var(--anis) !important;
  color: #FFFFFF !important;
  border-color: var(--anis) !important;
  box-shadow: 0 8px 24px rgba(164,216,24,0.32) !important;
  transform: translateX(-3px) !important;
}
.back-link svg{ stroke: currentColor !important; }

/* ============================================================
   SECTION AVIS — visuel amélioré + animation
   ============================================================ */
.avis-grid{ gap: 26px !important; }
.avis-card{
  position: relative !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(20,22,28,0.08) !important;
  border-radius: 20px !important;
  padding: 30px 28px 26px !important;
  box-shadow: 0 10px 30px rgba(20,22,28,0.07) !important;
  overflow: hidden !important;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .4s !important;
}
/* liseré vert→orange en haut de chaque carte */
.avis-card::before{
  content:'' !important; position:absolute !important; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--anis-bright), var(--orange)) !important;
  transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16,1,.3,1);
}
/* grosse guillemet décorative */
.avis-card::after{
  content:'\201C' !important;
  position:absolute !important; top:-18px; right:14px;
  font-family: var(--font-display); font-size: 7rem; line-height:1;
  color: rgba(164,216,24,0.10) !important; pointer-events:none;
}
.avis-grid.visible .avis-card::before{ transform: scaleX(1); }
.avis-card:hover{
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 54px rgba(255,106,0,0.16), 0 0 0 1px rgba(164,216,24,0.30) !important;
  border-color: rgba(164,216,24,0.4) !important;
}
.avis-stars{
  color: #FFB400 !important; font-size: 1.15rem !important; letter-spacing: 3px !important;
  margin-bottom: 14px !important; position: relative; z-index:1;
}
.avis-text{
  color: var(--text) !important; opacity:1 !important;
  font-size: 1rem !important; line-height: 1.6 !important; position: relative; z-index:1;
}
.avis-author{ position: relative; z-index:1; margin-top: 18px !important; }
.avis-author strong{ color: var(--text) !important; }
.avis-author span{ color: var(--text-muted) !important; }
.avis-avatar{
  background: linear-gradient(135deg, var(--anis), var(--orange)) !important;
  color: #FFFFFF !important; font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(164,216,24,0.28) !important;
}
/* animation d'apparition : cartes qui montent en cascade avec léger pivot */
.avis-grid.reveal-stagger > *{
  opacity:0 !important; transform: translateY(46px) rotate(-1.5deg) scale(.96) !important; filter: blur(6px) !important;
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1), filter .85s ease !important;
}
.avis-grid.reveal-stagger.visible > *{ opacity:1 !important; transform:none !important; filter:blur(0) !important; }


/* ============================================================
   HALOS ORANGE/VERT PARTOUT (ADN du site) + BOUTON RETOUR
   FLOTTANT + filet de sécurité textes. (BLOC FINAL)
   ============================================================ */

/* ---------- HALOS : 14 taches, vives sur blanc ---------- */
.bg-glows{ opacity: 1 !important; z-index: 0 !important; }
.bg-glows .glow{
  filter: blur(75px) saturate(150%) !important;
  mix-blend-mode: normal !important;   /* indispensable pour rester visible sur blanc */
  border-radius: 50% !important;
  will-change: transform, opacity !important;
}
/* Orange + vert alternés, répartis sur tout l'écran */
.glow-1 { width:46vw;height:46vw; top:-10vw; left:-6vw;  background: radial-gradient(circle, rgba(255,106,0,0.44), transparent 70%) !important; animation: neonDrift1 17s ease-in-out infinite !important; }
.glow-2 { width:40vw;height:40vw; top:18%;  right:-8vw; background: radial-gradient(circle, rgba(164,216,24,0.43), transparent 70%) !important; animation: neonDrift2 21s ease-in-out infinite !important; }
.glow-3 { width:42vw;height:42vw; bottom:-12vw; left:14vw; background: radial-gradient(circle, rgba(255,138,40,0.44), transparent 70%) !important; animation: neonDrift3 19s ease-in-out infinite !important; }
.glow-4 { width:32vw;height:32vw; top:52%; left:2vw;   background: radial-gradient(circle, rgba(255,80,0,0.40), transparent 70%) !important;  animation: neonDrift1 25s ease-in-out infinite reverse !important; }
.glow-5 { width:36vw;height:36vw; top:8%;  left:36%;   background: radial-gradient(circle, rgba(164,216,24,0.40), transparent 70%) !important; animation: neonDrift2 23s ease-in-out infinite !important; }
.glow-6 { width:38vw;height:38vw; top:66%; left:48%;   background: radial-gradient(circle, rgba(255,122,40,0.43), transparent 70%) !important; animation: neonDrift3 27s ease-in-out infinite reverse !important; }
.glow-7 { width:30vw;height:30vw; top:30%; left:62%;   background: radial-gradient(circle, rgba(164,216,24,0.39), transparent 70%) !important; animation: neonDrift1 22s ease-in-out infinite !important; }
.glow-8 { width:34vw;height:34vw; top:80%; right:4vw;  background: radial-gradient(circle, rgba(255,106,0,0.42), transparent 70%) !important; animation: neonDrift2 26s ease-in-out infinite reverse !important; }
.glow-9 { width:28vw;height:28vw; top:-6vw; right:24vw; background: radial-gradient(circle, rgba(164,216,24,0.39), transparent 70%) !important; animation: neonDrift3 20s ease-in-out infinite !important; }
.glow-10{ width:30vw;height:30vw; top:44%; right:-6vw; background: radial-gradient(circle, rgba(255,138,40,0.40), transparent 70%) !important; animation: neonDrift1 24s ease-in-out infinite reverse !important; }
.glow-11{ width:26vw;height:26vw; bottom:6%; left:30%; background: radial-gradient(circle, rgba(164,216,24,0.38), transparent 70%) !important; animation: neonDrift2 28s ease-in-out infinite !important; }
.glow-12{ width:32vw;height:32vw; top:14%; left:8%;    background: radial-gradient(circle, rgba(255,90,0,0.39), transparent 70%) !important;  animation: neonDrift3 23s ease-in-out infinite reverse !important; }
.glow-13{ width:24vw;height:24vw; top:58%; left:24%;   background: radial-gradient(circle, rgba(164,216,24,0.37), transparent 70%) !important; animation: neonDrift1 26s ease-in-out infinite !important; }
.glow-14{ width:28vw;height:28vw; bottom:-8vw; right:30vw; background: radial-gradient(circle, rgba(255,122,40,0.40), transparent 70%) !important; animation: neonDrift2 22s ease-in-out infinite reverse !important; }

/* ---------- BOUTON RETOUR FLOTTANT ---------- */
.float-back{
  position: fixed !important;
  left: 24px !important; bottom: 28px !important;
  z-index: 250 !important;
  display: none;                 /* caché par défaut (accueil) */
  align-items: center; gap: 9px;
  padding: 12px 20px 12px 16px;
  border-radius: 100px;
  background: #FFFFFF;
  border: 1.5px solid var(--anis);
  color: var(--anis);
  font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(164,216,24,0.28), 0 2px 8px rgba(0,0,0,0.08);
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.float-back.show{ display: inline-flex; animation: fbPop .4s cubic-bezier(.16,1,.3,1); }
.float-back svg{ width: 19px; height: 19px; transition: transform .25s; }
.float-back:hover{
  background: var(--anis); color: #FFFFFF;
  box-shadow: 0 12px 32px rgba(164,216,24,0.42);
  transform: translateY(-2px);
}
.float-back:hover svg{ transform: translateX(-3px); }
@keyframes fbPop{ from{ opacity:0; transform: translateY(14px) scale(.9); } to{ opacity:1; transform:none; } }
@media (max-width: 600px){
  .float-back{ left: 16px !important; bottom: 84px !important; padding: 10px 16px 10px 13px; font-size: 0.84rem; }
}

/* ---------- FILET DE SÉCURITÉ : textes lisibles sur fond clair ---------- */
/* tout paragraphe / liste / petit texte d'une section claire en foncé */
section p, section li, .container > p, .section-head p,
.market-card *, .pillar *, .certif-card *, .faq-item *, .faq-topic *,
.engagement-card *, .contact-card *, .zone-card *, .finition-card *{
  /* ne s'applique pas aux boutons/badges qui ont leur propre couleur */
}
.rating-stars button{ color: var(--text-dim) !important; }
.enquete-form .field label{ color: var(--text-dim) !important; }
/* labels et intitulés génériques */
.field label, .form-progress span, .step-label, .market-card .meta,
.certif-card .certif-label, .finition-card .f-label{
  color: var(--text-dim) !important;
}



/* ============================================================
   HALOS VISIBLES : sections translucides pour laisser passer
   les halos de couleur du fond. (BLOC FINAL)
   ============================================================ */
/* Sections : fond blanc TRANSLUCIDE (les halos colorés transparaissent) */
.partners, .pillars, .produits, .methode, .kpi, .showcase, .showcase.actus,
.avis, .certif, .about, .zone, .form-section, .contact-section, .enquete,
.faq, .gamme-page, .projets-hub, .projets-tabs, .market-hero, .market-projects,
.concours-section, .faq-topics-section, .finition-section, .legal-section,
.realisations{
  background: rgba(255,255,255,0.62) !important;
}
.produits{ background: rgba(255,255,255,0.55) !important; }
.about{    background: rgba(255,255,255,0.50) !important; }
.avis{     background: rgba(255,255,255,0.58) !important; }
.kpi{      background: rgba(255,255,255,0.45) !important; }
.partners{ background: rgba(255,255,255,0.70) !important; }
.footer{   background: rgba(244,246,248,0.85) !important; }

/* Le body : fond plus neutre pour que les halos ressortent (moins de blanc pur) */
body{
  background: radial-gradient(140% 120% at 50% -10%, #FBFCFE 0%, #F2F4F7 60%, #EAEDF2 100%) !important;
}

/* Halos : on les remonte en intensité ET en netteté pour qu'ils CREVENT le blanc */
.bg-glows{ opacity: 1 !important; z-index: 0 !important; }
.bg-glows .glow{ filter: blur(80px) saturate(170%) !important; mix-blend-mode: normal !important; }


/* ---------- SECTION CHIFFRES (13 ans...) : pas de bloc blanc ---------- */
/* fond transparent : on ne voit que la grille animée + les halos de couleur */
.kpi{
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}
.kpi-item{ background: transparent !important; box-shadow: none !important; border: none !important; }


/* ============================================================
   SECTION FAQ — refonte : cartes animées, texte orange
   (BLOC FINAL — prioritaire)
   ============================================================ */
.faq-list{ max-width: 860px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }

/* Chaque question = une carte arrondie (fini les blocs carrés plats) */
.faq-item{
  background: #FFFFFF !important;
  border: 1px solid rgba(20,22,28,0.10) !important;
  border-bottom: 1px solid rgba(20,22,28,0.10) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(20,22,28,0.05) !important;
  position: relative !important;
  transition: box-shadow .45s ease, border-color .4s ease, transform .45s cubic-bezier(.16,1,.3,1) !important;
}
/* liseré vert→orange à gauche qui apparaît à l'ouverture */
.faq-item::before{
  content:'' !important; position:absolute !important; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--anis-bright), var(--orange)) !important;
  transform: scaleY(0) !important; transform-origin: top;
  transition: transform .5s cubic-bezier(.16,1,.3,1) !important;
}
.faq-item:hover{
  box-shadow: 0 14px 34px rgba(255,106,0,0.12) !important;
  border-color: rgba(255,106,0,0.30) !important;
  transform: translateY(-2px) !important;
}
.faq-item.open{
  box-shadow: 0 18px 44px rgba(255,106,0,0.16), 0 0 0 1px rgba(255,106,0,0.22) !important;
  border-color: rgba(255,106,0,0.35) !important;
}
.faq-item.open::before{ transform: scaleY(1) !important; }

/* Question : TEXTE ORANGE */
.faq-question{
  width: 100% !important; text-align: left !important;
  padding: 24px 26px !important;
  color: var(--orange) !important;
  font-weight: 600 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important;
  transition: color .3s ease, background .3s ease !important;
}
.faq-question:hover{ color: var(--orange) !important; background: rgba(255,106,0,0.04) !important; }
.faq-item.open .faq-question{ color: var(--orange) !important; }

/* Icône +/- : pastille qui tourne et change de couleur */
.faq-icon{
  width: 38px !important; height: 38px !important; border-radius: 50% !important;
  border: 1.5px solid rgba(255,106,0,0.35) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; position: relative !important;
  transition: transform .45s cubic-bezier(.16,1,.3,1), background .35s, border-color .35s !important;
}
/* dessiner le + avec deux traits (robuste) */
.faq-icon::before, .faq-icon::after{
  content:'' !important; position:absolute !important;
  background: var(--orange) !important; border-radius: 2px !important;
  transition: transform .45s cubic-bezier(.16,1,.3,1), background .35s !important;
}
.faq-icon::before{ width: 14px !important; height: 2px !important; }
.faq-icon::after{ width: 2px !important; height: 14px !important; }
.faq-item.open .faq-icon{
  background: var(--orange) !important; border-color: var(--orange) !important; transform: rotate(135deg) !important;
}
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after{ background:#fff !important; }

/* Réponse : ouverture fluide + fondu du texte */
.faq-answer{
  max-height: 0 !important; overflow: hidden !important;
  transition: max-height .55s cubic-bezier(.16,1,.3,1) !important;
}
.faq-item.open .faq-answer{ max-height: 600px !important; }
.faq-answer-inner{
  padding: 0 26px 26px !important; max-width: 720px !important;
  color: var(--text-dim) !important; line-height: 1.7 !important;
  opacity: 0 !important; transform: translateY(10px) !important;
  transition: opacity .5s ease .12s, transform .5s ease .12s !important;
}
.faq-item.open .faq-answer-inner{ opacity: 1 !important; transform: none !important; }

/* Apparition au scroll : cartes en cascade (montée + flou) */
.faq-list.reveal-stagger > *{
  opacity:0 !important; transform: translateY(34px) scale(.97) !important; filter: blur(5px) !important;
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease !important;
}
.faq-list.reveal-stagger.visible > *{ opacity:1 !important; transform:none !important; filter:blur(0) !important; }


/* ---------- HERO ACCUEIL : photos plus lumineuses (vitrage visible) ---------- */
/* Les photos elles-mêmes : on booste luminosité, contraste et saturation */
.hero-slide{
  filter: brightness(1.22) contrast(1.06) saturate(1.08) !important;
}
/* Overlay très allégé : voile sombre seulement à gauche (lisibilité du texte) et léger en bas */
.hero-overlay{
  background:
    linear-gradient(90deg, rgba(11,11,11,0.58) 0%, rgba(11,11,11,0.30) 38%, rgba(11,11,11,0.06) 70%, rgba(11,11,11,0) 100%),
    linear-gradient(180deg, rgba(11,11,11,0.18) 0%, transparent 22%, transparent 70%, rgba(11,11,11,0.42) 100%),
    radial-gradient(ellipse at 72% 38%, rgba(255,138,40,0.12) 0%, transparent 58%) !important;
}
/* Renfort de lisibilité ciblé : ombre portée sur le texte du hero (au lieu d'assombrir toute la photo) */
.hero-content h1{ text-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.35) !important; }
.hero-content .lead{ text-shadow: 0 1px 10px rgba(0,0,0,0.5) !important; }
.hero-eyebrow{ text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important; }


/* ---------- SECTION AVIS : bloc d'appel à l'avis (sans faux avis) ---------- */
.avis-cta-block{
  max-width: 680px; margin: 0 auto 10px; text-align: center;
}
.avis-cta-text{
  font-size: 1.15rem; line-height: 1.6; color: var(--text); margin: 0 auto;
}


/* ---------- BOUTON AVIS GOOGLE FLOTTANT (au-dessus du téléphone) ---------- */
.fab-review{
  position: fixed; bottom: 104px; right: 28px; z-index: 200;
  display: flex; align-items: center; gap: 0; text-decoration: none;
}
.fab-review-label{
  background: #fff; color: var(--text); border: 1px solid var(--line-strong);
  font-size: 0.85rem; font-weight: 500; white-space: nowrap;
  padding: 9px 16px; border-radius: 100px; margin-right: 12px;
  display: flex; flex-direction: column; line-height: 1.15;
  opacity: 0; transform: translateX(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  box-shadow: 0 8px 24px rgba(20,22,28,0.10);
}
.fab-review-label strong{ color:#1a73e8; font-weight: 700; font-size: 0.84rem; }
.fab-review-label small{ color: var(--text-dim); font-size: 0.72rem; }
.fab-review:hover .fab-review-label{ opacity: 1; transform: translateX(0); }
.fab-review-btn{
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(20,22,28,0.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 12px 30px -8px rgba(26,115,232,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* pastille Google : on garde le fond blanc, le logo G multicolore. Ici le svg est blanc sur cercle bleu */
.fab-review-btn{
  background: #1a73e8;
}
.fab-review:hover .fab-review-btn{ transform: scale(1.08); box-shadow: 0 16px 40px -8px rgba(26,115,232,0.6); }
@media (max-width: 768px){
  .fab-review{ bottom: 90px; right: 18px; }
  .fab-review-btn{ width: 50px; height: 50px; }
  .fab-review-btn svg{ width: 23px; height: 23px; }
}



/* ============================================================
   CORRECTIF GLOBAL — v60
   Objectifs : (1) fond plus léger & aéré, (2) moins de bugs /
   meilleures performances, (3) harmonie de couleur, (4) plus
   aucun texte invisible. BLOC FINAL — prioritaire, dernier = gagnant.
   ============================================================ */

/* ------------------------------------------------------------
   1) FOND ALLÉGÉ & AÉRÉ
   On supprime le double quadrillage (global + par section) qui
   surchargeait visuellement, et on adoucit le fond.
   ------------------------------------------------------------ */

/* Fond principal : dégradé doux, légèrement chaud, beaucoup d'air */
body{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 45%, #F4F6F8 100%) !important;
  background-attachment: fixed !important;
}

/* On retire la grille fixe qui couvrait tout l'écran */
body::after{ display: none !important; content: none !important; }

/* On retire les quadrillages répétés sur chaque section */
.pillars::before, .produits::before, .methode::before, .kpi::before,
.about::before, .partners::before, .zone::before, .avis::before,
.faq::before, .showcase::before, .certif::before, .form-section::before,
.contact-section::before, .enquete::before{
  background-image: none !important;
  display: none !important;
  content: none !important;
}

/* ------------------------------------------------------------
   2) HALOS DE COULEUR — version douce et aérée
   On passe de 14 taches saturées à 5 halos diffus et discrets.
   Résultat : on garde l'ADN orange/vert, mais en touche légère,
   et on allège fortement le rendu (moins d'animations = + fluide).
   ------------------------------------------------------------ */

.bg-glows{ opacity: 1 !important; z-index: 0 !important; }

/* On masque 9 halos sur 14 (markup conservé, simplement cachés) */
.glow-6, .glow-7, .glow-8, .glow-9, .glow-10,
.glow-11, .glow-12, .glow-13, .glow-14{
  display: none !important;
}

/* Halos restants : grands, très diffus, faible opacité, peu saturés.
   Blur raisonnable (perf) et animations lentes/douces. */
.bg-glows .glow{
  filter: blur(90px) saturate(105%) !important;
  mix-blend-mode: normal !important;
  border-radius: 50% !important;
  opacity: 0.55 !important;
  will-change: auto !important;
}

/* 3 oranges + 2 verts, bien répartis, tons assortis et doux */
.glow-1{ width:42vw;height:42vw; top:-12vw; left:-10vw;
  background: radial-gradient(circle, rgba(232,102,26,0.16), transparent 68%) !important;
  animation: glowFloatA 34s ease-in-out infinite !important; }
.glow-2{ width:40vw;height:40vw; top:22%; right:-12vw;
  background: radial-gradient(circle, rgba(164,216,24,0.14), transparent 68%) !important;
  animation: glowFloatB 40s ease-in-out infinite !important; }
.glow-3{ width:38vw;height:38vw; bottom:-14vw; left:18vw;
  background: radial-gradient(circle, rgba(255,138,40,0.13), transparent 68%) !important;
  animation: glowFloatA 44s ease-in-out infinite reverse !important; }
.glow-4{ width:34vw;height:34vw; top:54%; left:-8vw;
  background: radial-gradient(circle, rgba(164,216,24,0.12), transparent 68%) !important;
  animation: glowFloatB 38s ease-in-out infinite reverse !important; }
.glow-5{ width:36vw;height:36vw; top:6%; left:42%;
  background: radial-gradient(circle, rgba(232,102,26,0.12), transparent 68%) !important;
  animation: glowFloatA 46s ease-in-out infinite !important; }

/* Mouvements très doux et de faible amplitude (anti-bug, anti-fatigue) */
@keyframes glowFloatA{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(2.5%, 3%) scale(1.06); }
}
@keyframes glowFloatB{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-3%, 2%) scale(1.05); }
}

/* Sections : fond blanc plus opaque => le contenu respire, les halos
   restent en fond léger sans noyer les textes (meilleure lisibilité). */
.partners, .pillars, .produits, .methode, .kpi, .showcase, .showcase.actus,
.avis, .certif, .about, .zone, .form-section, .contact-section, .enquete,
.faq, .gamme-page, .projets-hub, .projets-tabs, .market-hero, .market-projects,
.concours-section, .faq-topics-section, .finition-section, .legal-section,
.realisations{
  background: rgba(255,255,255,0.82) !important;
}
.produits{ background: rgba(255,255,255,0.80) !important; }
.about{    background: rgba(255,255,255,0.78) !important; }
.avis{     background: rgba(255,255,255,0.82) !important; }
.partners{ background: rgba(255,255,255,0.86) !important; }
.footer{   background: rgba(244,246,248,0.92) !important; }

/* La section chiffres garde un fond très léger (halos doux visibles) */
.kpi{ background: rgba(255,255,255,0.55) !important; border:none !important; }
.kpi-item{ background: transparent !important; box-shadow:none !important; border:none !important; }

/* ------------------------------------------------------------
   3) PERFORMANCE / MOINS DE BUGS
   - On allège les effets coûteux (gros blur, blend) sur mobile.
   - On coupe halos + animations sur petits écrans (fluidité).
   - On respecte "réduire les animations" du système.
   ------------------------------------------------------------ */

/* Tablettes / téléphones : on simplifie le fond pour la fluidité */
@media (max-width: 900px){
  .bg-glows{ display: none !important; }
  body{ background: linear-gradient(180deg,#FFFFFF 0%,#F6F8FA 100%) !important; }
  /* on réduit les flous d'arrière-plan, lourds sur mobile */
  *{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Accessibilité : si l'utilisateur a désactivé les animations */
@media (prefers-reduced-motion: reduce){
  .bg-glows .glow{ animation: none !important; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
     transition-duration: 0.05ms !important; }
}

/* ------------------------------------------------------------
   4) PLUS AUCUN TEXTE INVISIBLE (contraste)
   Tous les textes posés sur fond clair passent en couleur foncée
   lisible. Les titres verts trop clairs (anis-bright) deviennent
   un vert profond lisible. On ne touche pas aux textes qui sont
   sur photo / fond sombre (cartes, hero, boutons).
   ------------------------------------------------------------ */

/* Vert lisible sur blanc partout où il sert de couleur de TEXTE */
:root{
  --anis: #A4D818 !important;        /* vert profond, contraste OK sur blanc */
  --anis-bright: #A4D818 !important; /* on neutralise le vert trop clair en texte */
}

/* Titres de section en vert : on garde le vert mais lisible */
section h2{ color: var(--anis) !important; }
section h2 .accent, section h2 .accent-orange{ color: var(--orange) !important; }
section h2 .accent-green{ color: var(--anis) !important; }

/* Eyebrows / sur-titres : orange lisible (déjà bon), on sécurise */
.eyebrow, .partners-label{ color: var(--orange) !important; }

/* Paragraphes, listes et petits textes de section : foncés et lisibles */
section p, section li,
.container > p, .section-head p, .lead,
.market-card p, .pillar p, .certif-card p,
.faq p, .about p, .zone p, .methode p,
.engagement-card p, .contact-card p{
  color: #2A2D33 !important;
}

/* Intitulés secondaires, labels, méta : gris foncé lisible */
.field label, .form-progress span, .step-label,
.market-card .meta, .certif-card .certif-label,
.finition-card .f-label, .kpi-label, .pillar-num{
  color: #4A4E56 !important;
}

/* Le hero reste sur photo : on garde le vert clair + ombre (lisible) */
.hero-content h1{ color: var(--anis-bright) !important; }
.hero-eyebrow{ color: #B7E23A !important; text-shadow: 0 1px 10px rgba(0,0,0,0.55) !important; }

/* IMPORTANT : ne JAMAIS forcer en foncé le texte des éléments qui
   ont volontairement un fond sombre ou une photo (sinon il disparaît). */
.hero-content *, .cat-card-info *, .hub-card-bottom *,
.pillar-visual *, .market-card .market-card-img *,
.float-back, .float-back *,
.btn-primary, .btn-primary *, .nav-cta, .nav-cta *,
[class*="-img"] *{
  /* on n'applique pas le filet foncé ici : ces zones gèrent leur propre couleur */
}
/* Titres de cartes produits (sur photo sombre) : ils restent clairs */
.cat-card-info h2, .hub-card-bottom h2{ color: #B7E23A !important; }

/* ------------------------------------------------------------
   5) CORRECTIF SECTION ORANGE DU BAS (.final-cta)
   Cette bannière a un FOND ORANGE : ses textes doivent rester
   BLANCS (le filet de sécurité les avait forcés en foncé,
   rendant "votre habitat ?" invisible et le bouton délavé).
   ------------------------------------------------------------ */
.final-cta h2, .final-cta h2 .italic, .final-cta h2 .accent,
.final-cta h2 em, .final-cta p, .final-cta .eyebrow{
  color: #FFFFFF !important;
}
.final-cta .btn-white{
  color: var(--orange) !important;
  background: #FFFFFF !important;
}



/* ============================================================
   QUADRILLAGE MODERNE EN FOND — v61
   Fin, discret, fixe. Apporte une texture "plan d'architecte"
   sans alourdir ni gêner la lecture. Reste DERRIÈRE le contenu
   et les halos de couleur. BLOC FINAL — prioritaire.
   ============================================================ */

/* On réactive l'élément de fond global (il avait été désactivé) */
body::after{
  content: '' !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  /* Quadrillage fin : lignes gris-bleu très légères */
  background-image:
    linear-gradient(rgba(20,28,44,0.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,28,44,0.040) 1px, transparent 1px) !important;
  background-size: 60px 60px, 60px 60px !important;
  background-position: center center !important;
  /* Fondu sur les bords : la grille s'estompe doucement => effet moderne */
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 30%, #000 55%, transparent 100%) !important;
          mask-image: radial-gradient(ellipse 120% 90% at 50% 30%, #000 55%, transparent 100%) !important;
}

/* Les sections en blanc translucide laissent transparaître la grille
   en fond, mais restent assez opaques pour garder les textes lisibles.
   On les allège juste un poil pour mieux voir le quadrillage. */
.partners, .pillars, .produits, .methode, .kpi, .showcase, .showcase.actus,
.avis, .certif, .about, .zone, .form-section, .contact-section, .enquete,
.faq, .gamme-page, .projets-hub, .projets-tabs, .market-hero, .market-projects,
.concours-section, .faq-topics-section, .finition-section, .legal-section,
.realisations{
  background: rgba(255,255,255,0.78) !important;
}
.kpi{ background: rgba(255,255,255,0.48) !important; }

/* Sur mobile : on garde la grille mais on l'allège encore (lisibilité + perf) */
@media (max-width: 900px){
  body::after{
    background-size: 46px 46px, 46px 46px !important;
    background-image:
      linear-gradient(rgba(20,28,44,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,28,44,0.035) 1px, transparent 1px) !important;
  }
}



/* ============================================================
   RETOUCHE v62 — fond moins blanc + quadrillage bien visible
   + suppression définitive du bouton avis Google flottant.
   BLOC FINAL — prioritaire (dernier = gagnant).
   ============================================================ */

/* 1) Sécurité : on cache le bouton avis Google flottant (s'il reste) */
.fab-review{ display: none !important; }

/* 2) FOND moins blanc : dégradé gris-clair, donne du relief au quadrillage */
body{
  background: linear-gradient(180deg, #EEF1F5 0%, #E7EBF0 50%, #DFE4EA 100%) !important;
  background-attachment: fixed !important;
}

/* 3) QUADRILLAGE bien visible : lignes plus marquées, double trame
   (lignes fines + lignes plus fortes tous les 5 carreaux = effet "plan") */
body::after{
  content: '' !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    /* lignes fortes tous les 300px (trame principale) */
    linear-gradient(rgba(20,28,44,0.10) 1.4px, transparent 1.4px),
    linear-gradient(90deg, rgba(20,28,44,0.10) 1.4px, transparent 1.4px),
    /* lignes fines tous les 60px (trame secondaire) */
    linear-gradient(rgba(20,28,44,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,28,44,0.055) 1px, transparent 1px) !important;
  background-size:
    300px 300px, 300px 300px,
    60px 60px, 60px 60px !important;
  background-position: center center !important;
  /* léger fondu sur les bords pour rester élégant, mais grille bien présente */
  -webkit-mask-image: radial-gradient(ellipse 130% 100% at 50% 35%, #000 70%, transparent 100%) !important;
          mask-image: radial-gradient(ellipse 130% 100% at 50% 35%, #000 70%, transparent 100%) !important;
}

/* 4) Sections : un poil plus translucides pour bien laisser voir la grille
   en arrière-plan, tout en gardant les textes parfaitement lisibles. */
.partners, .pillars, .produits, .methode, .kpi, .showcase, .showcase.actus,
.avis, .certif, .about, .zone, .form-section, .contact-section, .enquete,
.faq, .gamme-page, .projets-hub, .projets-tabs, .market-hero, .market-projects,
.concours-section, .faq-topics-section, .finition-section, .legal-section,
.realisations{
  background: rgba(255,255,255,0.72) !important;
}
.kpi{ background: rgba(255,255,255,0.40) !important; }
.partners{ background: rgba(255,255,255,0.80) !important; }
.footer{ background: rgba(231,235,240,0.92) !important; }

/* 5) Halos de couleur : on les garde mais un peu plus présents,
   pour qu'ils ressortent sur le fond gris (au lieu de se diluer). */
.bg-glows .glow{ opacity: 0.62 !important; }

/* 6) Mobile : grille conservée mais allégée (lisibilité + fluidité) */
@media (max-width: 900px){
  body{ background: linear-gradient(180deg,#EEF1F5 0%,#E2E7EC 100%) !important; }
  body::after{
    background-image:
      linear-gradient(rgba(20,28,44,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20,28,44,0.07) 1px, transparent 1px) !important;
    background-size: 50px 50px, 50px 50px !important;
  }
}



/* ============================================================
   FINITION v63 — fond blanc cassé + touches vert/orange,
   lien "Laissez un avis" dans le header. BLOC FINAL prioritaire.
   ============================================================ */

/* ---------- 1) LIEN AVIS DANS LE HEADER (avant Devis gratuit) ---------- */
.header-avis{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  margin-right: 4px;
  border-radius: 100px;
  border: 1.5px solid var(--anis);
  color: var(--anis);
  background: rgba(255,255,255,0.9);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.header-avis svg{ color: #F5A623; transition: color .25s; }
.header-avis:hover{
  background: var(--anis);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(164,216,24,0.30);
}
.header-avis:hover svg{ color: #FFFFFF; }
/* sur petits écrans, on masque le texte et garde l'étoile (gain de place) */
@media (max-width: 1180px){
  .header-avis span{ display: none; }
  .header-avis{ padding: 9px 11px; }
}
/* en menu mobile (barre resserrée) on cache complètement le lien avis du header */
@media (max-width: 920px){
  .header-avis{ display: none !important; }
}

/* ---------- 2) FOND : blanc cassé + touches vert / orange ---------- */
/* Dégradé blanc cassé légèrement chaud (plus clair que le gris précédent),
   avec deux voiles de couleur très doux : orange en haut, vert en bas. */
body{
  background:
    radial-gradient(60% 50% at 12% 8%,  rgba(232,102,26,0.10), transparent 60%),
    radial-gradient(55% 45% at 88% 22%, rgba(164,216,24,0.10),  transparent 60%),
    radial-gradient(50% 45% at 80% 92%, rgba(232,102,26,0.08), transparent 62%),
    radial-gradient(55% 50% at 15% 80%, rgba(164,216,24,0.09),  transparent 62%),
    linear-gradient(180deg, #FBF9F5 0%, #F7F4EF 50%, #F3EFE8 100%) !important;
  background-attachment: fixed !important;
}

/* ---------- 3) QUADRILLAGE : on le garde visible, teinte légèrement chaude ---------- */
body::after{
  content: '' !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(60,46,30,0.085) 1.3px, transparent 1.3px),
    linear-gradient(90deg, rgba(60,46,30,0.085) 1.3px, transparent 1.3px),
    linear-gradient(rgba(60,46,30,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,46,30,0.05) 1px, transparent 1px) !important;
  background-size:
    300px 300px, 300px 300px,
    60px 60px, 60px 60px !important;
  background-position: center center !important;
  -webkit-mask-image: radial-gradient(ellipse 130% 100% at 50% 35%, #000 70%, transparent 100%) !important;
          mask-image: radial-gradient(ellipse 130% 100% at 50% 35%, #000 70%, transparent 100%) !important;
}

/* ---------- 4) Halos de couleur animés : un peu plus présents ---------- */
.bg-glows .glow{ opacity: 0.6 !important; }

/* ---------- 5) Sections : fond blanc cassé translucide (la couleur transparaît) ---------- */
.partners, .pillars, .produits, .methode, .kpi, .showcase, .showcase.actus,
.avis, .certif, .about, .zone, .form-section, .contact-section, .enquete,
.faq, .gamme-page, .projets-hub, .projets-tabs, .market-hero, .market-projects,
.concours-section, .faq-topics-section, .finition-section, .legal-section,
.realisations{
  background: rgba(251,249,245,0.74) !important;
}
.kpi{ background: rgba(251,249,245,0.40) !important; }
.partners{ background: rgba(251,249,245,0.82) !important; }
.footer{ background: rgba(243,239,232,0.92) !important; }

/* ---------- 6) Mobile : fond + grille allégés ---------- */
@media (max-width: 900px){
  .bg-glows{ display: none !important; }
  body{
    background:
      radial-gradient(70% 40% at 15% 6%, rgba(232,102,26,0.10), transparent 60%),
      radial-gradient(70% 40% at 85% 94%, rgba(164,216,24,0.10), transparent 60%),
      linear-gradient(180deg, #FBF9F5 0%, #F4F1EA 100%) !important;
  }
  body::after{
    background-image:
      linear-gradient(rgba(60,46,30,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(60,46,30,0.06) 1px, transparent 1px) !important;
    background-size: 50px 50px, 50px 50px !important;
  }
}



/* ============================================================
   MISE À JOUR v64
   1) Cartes "4 matières" : titre BLANC + BOLD épais
   2) Lien avis header supprimé (sécurité CSS)
   3) Fond : + de vert et d'orange, partout (toutes les pages)
   4) "fenêtres." souligné en orange dans le hero
   BLOC FINAL — prioritaire (dernier = gagnant).
   ============================================================ */

/* ---------- 1) CARTES "4 MATIÈRES" : titre blanc + bold épais ---------- */
/* Le grand titre de la matière (PVC, Aluminium, Bois, Acier) en BLANC et plus gras */
.gamme-content h3{
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45) !important; /* lisible sur photo */
}
/* Le petit label matière (pastille LED) : texte blanc + un peu plus gras aussi */
.gamme-mat{
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ---------- 2) LIEN AVIS HEADER : masqué (markup déjà retiré) ---------- */
.header-avis{ display: none !important; }

/* ---------- 3) FOND : blanc cassé + touches vert/orange RENFORCÉES ---------- */
/* Voiles de couleur plus présents (orange + vert répartis), sur blanc cassé chaud.
   position: fixed via background-attachment => identique sur TOUTES les pages. */
body{
  background:
    radial-gradient(58% 48% at 10% 6%,   rgba(232,102,26,0.16), transparent 60%),
    radial-gradient(55% 46% at 90% 16%,  rgba(164,216,24,0.16),  transparent 60%),
    radial-gradient(52% 46% at 84% 90%,  rgba(232,102,26,0.14), transparent 62%),
    radial-gradient(56% 50% at 12% 86%,  rgba(164,216,24,0.15),  transparent 62%),
    radial-gradient(45% 40% at 50% 50%,  rgba(232,102,26,0.07), transparent 65%),
    linear-gradient(180deg, #FBF9F5 0%, #F7F4EF 50%, #F3EFE8 100%) !important;
  background-attachment: fixed !important;
}

/* Quadrillage : conservé, teinte chaude, bien visible */
body::after{
  content: '' !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(60,46,30,0.085) 1.3px, transparent 1.3px),
    linear-gradient(90deg, rgba(60,46,30,0.085) 1.3px, transparent 1.3px),
    linear-gradient(rgba(60,46,30,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,46,30,0.05) 1px, transparent 1px) !important;
  background-size: 300px 300px, 300px 300px, 60px 60px, 60px 60px !important;
  background-position: center center !important;
  -webkit-mask-image: radial-gradient(ellipse 130% 100% at 50% 35%, #000 70%, transparent 100%) !important;
          mask-image: radial-gradient(ellipse 130% 100% at 50% 35%, #000 70%, transparent 100%) !important;
}

/* Halos animés : un peu plus présents pour renforcer la couleur */
.bg-glows{ opacity: 1 !important; z-index: 0 !important; }
.bg-glows .glow{ opacity: 0.68 !important; }

/* Sections (toutes pages) : fond blanc cassé translucide => couleur du fond visible */
.partners, .pillars, .produits, .methode, .kpi, .showcase, .showcase.actus,
.avis, .certif, .about, .zone, .form-section, .contact-section, .enquete,
.faq, .gamme-page, .projets-hub, .projets-tabs, .market-hero, .market-projects,
.concours-section, .faq-topics-section, .finition-section, .legal-section,
.realisations{
  background: rgba(251,249,245,0.72) !important;
}
.kpi{ background: rgba(251,249,245,0.36) !important; }
.partners{ background: rgba(251,249,245,0.80) !important; }
.footer{ background: rgba(243,239,232,0.90) !important; }

/* ---------- 4) "fenêtres." SOULIGNÉ EN ORANGE dans le hero ---------- */
.hero-content h1 .accent-green{
  position: relative !important;
  padding-bottom: 6px !important;
}
.hero-content h1 .accent-green::after{
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: 6px !important;
  border-radius: 4px !important;
  background: var(--orange) !important;
  box-shadow: 0 2px 12px rgba(232,102,26,0.55) !important;
}

/* ---------- 5) Mobile : on garde le fond coloré, grille + halos allégés ---------- */
@media (max-width: 900px){
  .bg-glows{ display: none !important; }
  body{
    background:
      radial-gradient(70% 40% at 12% 5%, rgba(232,102,26,0.15), transparent 60%),
      radial-gradient(70% 40% at 88% 95%, rgba(164,216,24,0.15), transparent 60%),
      linear-gradient(180deg, #FBF9F5 0%, #F4F1EA 100%) !important;
  }
  body::after{
    background-image:
      linear-gradient(rgba(60,46,30,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(60,46,30,0.06) 1px, transparent 1px) !important;
    background-size: 50px 50px, 50px 50px !important;
  }
}



/* ============================================================
   FOND v66 — BLANC CASSÉ + QUADRILLAGE + HALOS ORANGE/VERT VIVANTS
   AUCUN noir. On annule tout le système sombre précédent.
   BLOC FINAL — prioritaire (dernier = gagnant).
   ============================================================ */

/* ---------- 0) ANNULER LE SYSTÈME SOMBRE v65 ---------- */
/* Toutes les sections qui étaient passées en anthracite redeviennent claires */
.produits, .kpi, .certif, .market-hero{
  background: rgba(255,255,255,0.55) !important;
  border-top: none !important;
  border-image: none !important;
}
/* on enlève le quadrillage sombre des ::before de ces sections */
.produits::before, .kpi::before, .certif::before, .market-hero::before{
  display: none !important;
  content: none !important;
  background-image: none !important;
}
/* footer : on le remet clair (plus de noir) */
.footer{
  background: rgba(244,241,234,0.92) !important;
  border-top: none !important;
  border-image: none !important;
}
/* textes du footer : on repasse en foncé lisible (fond clair) */
.footer h4{ color: #1C1E26 !important; }
.footer .footer-links a{ color: #3D4148 !important; }
.footer .footer-links a:hover{ color: var(--orange) !important; }
.footer .footer-tag{ color: #5C616B !important; }
.footer .logo-text, .footer .logo-text *{ color: #1C1E26 !important; }
.footer p, .footer li, .footer span, .footer a, .footer div{ color: #3D4148; }
.footer h4, .footer strong{ color: #1C1E26 !important; }
.footer-bottom, .footer-bottom *{ color: #5C616B !important; }
.footer-showroom{
  background: rgba(232,102,26,0.06) !important;
  border-color: rgba(20,22,28,0.12) !important;
  color: #3D4148 !important;
}
.footer-showroom strong{ color: var(--anis) !important; }
.footer-showroom svg{ color: var(--orange) !important; }
.footer-bottom{ border-top-color: rgba(20,22,28,0.10) !important; }

/* textes des sections produits/kpi/certif : on repasse en foncé lisible */
.produits h2, .kpi h2, .certif h2, .market-hero h2{ color: var(--anis) !important; }
.produits .eyebrow, .kpi .eyebrow, .certif .eyebrow{ color: var(--orange) !important; }
.produits p, .kpi p, .certif p, .produits li, .kpi li, .certif li{ color: #2A2D33 !important; }
.produits .intro, .certif .intro{ color: #2A2D33 !important; }
.kpi .kpi-label, .kpi-label{ color: #4A4E56 !important; }
.kpi-item{ background: transparent !important; border:none !important; box-shadow:none !important; }
.certif-card{
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(20,22,28,0.10) !important;
}
.certif-card h3{ color: #1C1E26 !important; }
.certif-card p, .certif-card .certif-label{ color: #4A4E56 !important; }
.certif-card .certif-icon{ color: var(--anis) !important; }

/* ---------- 1) FOND : BLANC CASSÉ partout ---------- */
body{
  background: #F4F1EA !important;
  background-attachment: fixed !important;
}

/* ---------- 2) HALOS ORANGE / VERT BIEN VIVANTS ---------- */
/* On réactive les halos (markup conservé). 6 taches nettes et colorées,
   bien visibles sur le blanc cassé, réparties sur toute la hauteur. */
.bg-glows{ display: block !important; opacity: 1 !important; z-index: 0 !important; }
.bg-glows .glow{
  display: block !important;
  filter: blur(70px) saturate(135%) !important;
  mix-blend-mode: normal !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
  will-change: transform !important;
}
/* on masque les halos 7 à 14, on garde 6 bien placés et vivants */
.glow-7, .glow-8, .glow-9, .glow-10, .glow-11,
.glow-12, .glow-13, .glow-14{ display: none !important; }

.glow-1{ width:44vw;height:44vw; top:-10vw; left:-8vw;
  background: radial-gradient(circle, rgba(255,106,0,0.42), transparent 70%) !important;
  animation: gv1 26s ease-in-out infinite !important; }
.glow-2{ width:40vw;height:40vw; top:16%; right:-10vw;
  background: radial-gradient(circle, rgba(164,216,24,0.42), transparent 70%) !important;
  animation: gv2 30s ease-in-out infinite !important; }
.glow-3{ width:42vw;height:42vw; bottom:-12vw; left:16vw;
  background: radial-gradient(circle, rgba(255,138,40,0.40), transparent 70%) !important;
  animation: gv1 34s ease-in-out infinite reverse !important; }
.glow-4{ width:34vw;height:34vw; top:50%; left:-6vw;
  background: radial-gradient(circle, rgba(164,216,24,0.38), transparent 70%) !important;
  animation: gv2 28s ease-in-out infinite reverse !important; }
.glow-5{ width:38vw;height:38vw; top:6%; left:40%;
  background: radial-gradient(circle, rgba(255,106,0,0.36), transparent 70%) !important;
  animation: gv1 32s ease-in-out infinite !important; }
.glow-6{ width:32vw;height:32vw; top:64%; left:48%;
  background: radial-gradient(circle, rgba(164,216,24,0.40), transparent 70%) !important;
  animation: gv2 30s ease-in-out infinite !important; }

@keyframes gv1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(3%,4%) scale(1.08); } }
@keyframes gv2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-4%,3%) scale(1.06); } }

/* ---------- 3) QUADRILLAGE net par-dessus (clair) ---------- */
body::after{
  content: '' !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(28,30,38,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,30,38,0.06) 1px, transparent 1px) !important;
  background-size: 64px 64px, 64px 64px !important;
  background-position: -1px -1px !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%) !important;
}

/* ---------- 4) Sections : blanc cassé TRANSLUCIDE (halos visibles dessous) ---------- */
.partners, .pillars, .produits, .methode, .kpi, .showcase, .showcase.actus,
.avis, .certif, .about, .zone, .form-section, .contact-section, .enquete,
.faq, .gamme-page, .projets-hub, .projets-tabs, .market-hero, .market-projects,
.concours-section, .faq-topics-section, .finition-section, .legal-section,
.realisations{
  background: rgba(244,241,234,0.74) !important;
}
.kpi{ background: rgba(244,241,234,0.40) !important; }
.partners{ background: rgba(244,241,234,0.82) !important; }
.produits{ background: rgba(244,241,234,0.62) !important; }

/* ---------- 5) "Menuiserie sur mesure" EN ORANGE dans le hero ---------- */
.hero-eyebrow .eyebrow-orange{ color: var(--orange) !important; font-weight: 700 !important; }

/* ---------- 6) Cartes matières : titres blancs+bold (on garde) ---------- */
.gamme-content h3{ color:#FFFFFF !important; font-weight:800 !important; text-shadow:0 2px 12px rgba(0,0,0,0.45) !important; }
.gamme-mat{ color:#FFFFFF !important; font-weight:700 !important; }

/* ---------- 7) "fenêtres." souligné orange (on garde) ---------- */
.hero-content h1 .accent-green{ position: relative !important; padding-bottom: 6px !important; }
.hero-content h1 .accent-green::after{
  content:'' !important; position:absolute !important; left:0; right:0; bottom:0;
  height:6px !important; border-radius:4px !important;
  background: var(--orange) !important; box-shadow: 0 2px 12px rgba(232,102,26,0.55) !important;
}

/* ---------- 8) MOBILE : halos coupés (perf), grille allégée ---------- */
@media (max-width: 900px){
  .bg-glows{ display: none !important; }
  body{ background: #F4F1EA !important; }
  body::after{
    background-size: 48px 48px, 48px 48px !important;
  }
}


/* ============================================================
   AJUSTEMENT v66 — HALOS PLUS VIVANTS + sections plus translucides
   ============================================================ */

/* Halos : plus intenses et un peu moins flous => plus présents */
.bg-glows .glow{
  filter: blur(60px) saturate(150%) !important;
  opacity: 0.9 !important;
}

/* Sections : on baisse l'opacité du voile blanc pour laisser
   transparaître les halos colorés (textes restent lisibles). */
.partners, .pillars, .produits, .methode, .kpi, .showcase, .showcase.actus,
.avis, .certif, .about, .zone, .form-section, .contact-section, .enquete,
.faq, .gamme-page, .projets-hub, .projets-tabs, .market-hero, .market-projects,
.concours-section, .faq-topics-section, .finition-section, .legal-section,
.realisations{
  background: rgba(244,241,234,0.62) !important;
}
.kpi{ background: rgba(244,241,234,0.30) !important; }
.partners{ background: rgba(244,241,234,0.72) !important; }
.produits{ background: rgba(244,241,234,0.52) !important; }
.avis{ background: rgba(244,241,234,0.58) !important; }

/* Le fond du body : on ajoute des halos colorés FIXES intégrés au body
   (en plus des .glow animés), pour garantir de la couleur sur TOUTE la
   hauteur de page, y compris dans les zones sans .glow. */
body{
  background:
    radial-gradient(40% 30% at 8% 12%,  rgba(255,106,0,0.16),  transparent 62%),
    radial-gradient(38% 28% at 92% 30%, rgba(164,216,24,0.16),  transparent 62%),
    radial-gradient(36% 26% at 12% 55%, rgba(255,138,40,0.14), transparent 62%),
    radial-gradient(40% 30% at 88% 72%, rgba(164,216,24,0.15), transparent 62%),
    radial-gradient(36% 28% at 10% 90%, rgba(255,106,0,0.14),  transparent 62%),
    #F4F1EA !important;
  background-attachment: fixed !important;
}



/* ============================================================
   HERO — TEXTE À DROITE, POSEUR VISIBLE À GAUCHE
   Pour la photo avec le poseur Dimension Châssis à gauche.
   BLOC FINAL — prioritaire.
   ============================================================ */

/* 1) Pousser le contenu du hero vers la DROITE */
.hero{ justify-content: flex-end !important; }
.hero-content{
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;            /* texte aligné à droite */
  max-width: 680px !important;
}

/* l'eyebrow et ses traits : alignés à droite */
.hero-eyebrow{ justify-content: flex-end !important; }

/* le titre, le paragraphe : alignés à droite */
.hero-content h1{ text-align: right !important; }
.hero-content .lead{ text-align: right !important; margin-left: auto !important; }

/* les boutons : alignés à droite */
.hero-actions{ justify-content: flex-end !important; }

/* le soulignement de "fenêtres." : on l'aligne à droite du mot */
.hero-content h1 .accent-green::after{ left: auto !important; right: 0 !important; width: 100% !important; }

/* les dots : à droite aussi */
.hero-dots{ justify-content: flex-end !important; }

/* 2) INVERSER le voile sombre : clair à gauche (poseur visible),
   sombre à droite (texte lisible) */
.hero-overlay{
  background:
    linear-gradient(270deg, rgba(11,11,11,0.72) 0%, rgba(11,11,11,0.42) 42%, rgba(11,11,11,0.10) 70%, rgba(11,11,11,0) 100%),
    linear-gradient(180deg, rgba(11,11,11,0.15) 0%, transparent 30%, transparent 65%, rgba(11,11,11,0.35) 100%) !important;
}

/* 3) Cadrage de l'image : on garde le poseur à gauche bien visible */
.hero-slide{ background-position: center center !important; }

/* 4) Responsive : sur mobile, on recentre le texte (le poseur passe dessous) */
@media (max-width: 820px){
  .hero{ justify-content: center !important; }
  .hero-content{ text-align: left !important; max-width: 100% !important; margin: 0 !important; }
  .hero-content h1, .hero-content .lead{ text-align: left !important; }
  .hero-eyebrow, .hero-actions, .hero-dots{ justify-content: flex-start !important; }
  .hero-content h1 .accent-green::after{ left: 0 !important; right: auto !important; }
  .hero-overlay{
    background:
      linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.25) 40%, rgba(11,11,11,0.55) 100%) !important;
  }
}



/* ============================================================
   MAJ — Cartes piliers plus colorées + retrait des petits
   textes des cartes matières (on garde les noms).
   BLOC FINAL — prioritaire.
   ============================================================ */

/* ---------- 1) CARTES PILIERS : plus de couleur ---------- */
/* Fond légèrement teinté + bordure colorée + accent haut.
   Chaque carte prend une teinte douce (orange / vert alternés). */
.pillars-grid{
  background: rgba(232,102,26,0.18) !important;   /* le "gap" entre cartes devient coloré */
  border: 1px solid rgba(232,102,26,0.22) !important;
}
.pillar{
  background: linear-gradient(160deg, rgba(255,247,240,0.96) 0%, rgba(255,255,255,0.92) 100%) !important;
  border-top: 3px solid var(--orange) !important;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease) !important;
}
/* la 2e et 4e carte : accent vert (alternance orange/vert) */
.pillar:nth-child(2), .pillar:nth-child(4){
  background: linear-gradient(160deg, rgba(246,250,235,0.96) 0%, rgba(255,255,255,0.92) 100%) !important;
  border-top: 3px solid var(--anis) !important;
}
/* survol : la teinte se renforce */
.pillar:hover{
  background: linear-gradient(160deg, rgba(255,237,224,0.98) 0%, rgba(255,250,245,0.95) 100%) !important;
  transform: translateY(-4px) !important;
}
.pillar:nth-child(2):hover, .pillar:nth-child(4):hover{
  background: linear-gradient(160deg, rgba(238,247,220,0.98) 0%, rgba(250,253,244,0.95) 100%) !important;
}
/* le petit numéro (01/Expertise...) en orange soutenu, plus visible */
.pillar-num{ color: var(--orange) !important; font-weight: 600 !important; }
.pillar:nth-child(2) .pillar-num, .pillar:nth-child(4) .pillar-num{ color: var(--anis) !important; }

/* ---------- 2) CARTES MATIÈRES : retrait du petit texte ---------- */
/* On masque définitivement le <p> descriptif (même au survol).
   Le nom (h3) et le badge matière restent. */
.gamme-content p{
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
}
.gamme-card:hover .gamme-content p{
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
}



/* ============================================================
   OPTIMISATION MOBILE — v66
   1) Plus d'indicateur de défilement (1 seule photo)
   2) Photo d'accueil visible EN ENTIER sur mobile
   3) Tactile optimisé : zones de clic larges, swipe fluide
   BLOC FINAL — prioritaire.
   ============================================================ */

/* ---------- 1) RETIRER L'INDICATEUR DE DÉFILEMENT (dots) ---------- */
/* Il n'y a qu'une seule photo : les points et le "Découvrir" sont inutiles */
.hero-dots{ display: none !important; }
.hero-scroll-hint{ display: none !important; }

/* ====================================================================
   OPTIMISATIONS APPLIQUÉES UNIQUEMENT SUR MOBILE / TABLETTE
   ==================================================================== */
@media (max-width: 820px){

  /* ---------- 2) PHOTO D'ACCUEIL VISIBLE EN ENTIER ---------- */
  /* On transforme le hero : la PHOTO en haut (entière, ratio préservé),
     puis le TEXTE en dessous sur le fond clair. Plus de recadrage. */
  .hero{
    min-height: auto !important;
    display: block !important;
    padding: 0 0 40px !important;
    overflow: visible !important;
  }
  /* La zone photo : ratio 3:2 de l'image, largeur plein écran, image entière */
  .hero-slides{
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;     /* ratio de la photo => image entière */
    inset: auto !important;
  }
  .hero-slide{
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;   /* remplit la zone 3:2 => image entière visible */
    background-position: center !important;
  }
  /* l'overlay ne couvre que la photo, pas le texte en dessous */
  .hero-overlay{
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    bottom: auto !important;
    aspect-ratio: 3 / 2 !important;
    background: linear-gradient(180deg, rgba(11,11,11,0.10) 0%, transparent 40%, transparent 75%, rgba(11,11,11,0.20) 100%) !important;
  }
  /* le contenu texte : sous la photo, sur le fond clair, texte foncé lisible */
  .hero-content{
    position: relative !important;
    z-index: 2 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 32px 20px 0 !important;
    text-align: left !important;
  }
  .hero-content h1{
    text-align: left !important;
    font-size: clamp(2.4rem, 12vw, 3.4rem) !important;
    line-height: 1.04 !important;
    color: #A4D818 !important;             /* vert profond lisible sur fond clair */
    text-shadow: none !important;
  }
  .hero-content h1 .accent-green{ color: var(--orange) !important; }
  .hero-content h1 .accent-green::after{ left: 0 !important; right: auto !important; }
  .hero-eyebrow{
    justify-content: flex-start !important;
    color: var(--orange) !important;
    text-shadow: none !important;
  }
  .hero-eyebrow .eyebrow-orange{ color: var(--orange) !important; }
  .hero-content .lead{
    text-align: left !important;
    color: #2A2D33 !important;             /* foncé lisible sur fond clair */
    margin-left: 0 !important;
  }

  /* ---------- 3) TACTILE OPTIMISÉ ---------- */
  /* Boutons d'action : pleine largeur, hauteur confortable au pouce */
  .hero-actions{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    justify-content: flex-start !important;
  }
  .hero-actions .btn{
    width: 100% !important;
    min-height: 56px !important;           /* >= 48px = norme tactile */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.02rem !important;
  }

  /* Tous les boutons/liens cliquables : zone tactile minimale 48px */
  .btn, .nav-cta, .gamme-brands-btn, .gamme-plus, .hero-dot,
  .faq-question, .menu-toggle, .open-status, .footer-links a,
  .pillar, .gamme-card, .cat-card, .market-card, .hub-card{
    -webkit-tap-highlight-color: rgba(232,102,26,0.25) !important;
  }
  .menu-toggle{ min-width: 48px !important; min-height: 48px !important; }
  .open-status{ min-height: 44px !important; }

  /* Cartes : on garde la zone entière cliquable et un retour visuel au tap */
  .gamme-card:active, .pillar:active, .market-card:active, .cat-card:active{
    transform: scale(0.985) !important;
    transition: transform 0.1s !important;
  }

  /* Liens de menu : grande hauteur tactile */
  .mobile-nav a, .nav a, nav a{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Swipe fluide : défilement souple sur tout le site */
  html, body{
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  /* Le bouton téléphone flottant : bien accessible, pas trop bas */
  .fab-call, .float-phone, [class*="phone-float"]{
    bottom: 20px !important;
    right: 16px !important;
    width: 58px !important;
    height: 58px !important;
  }
}

/* Très petits écrans : on resserre encore un peu */
@media (max-width: 420px){
  .hero-content{ padding: 28px 16px 0 !important; }
  .hero-content h1{ font-size: clamp(2.2rem, 13vw, 3rem) !important; }
}


/* FIX fab vs boutons hero mobile */
@media (max-width: 820px){
  .hero{ padding-bottom: 80px !important; }
  .hero-actions{ margin-bottom: 8px !important; }
}


/* ============================================================
   HERO MOBILE v2 — PHOTO COMPLÈTE EN FOND + TEXTE PAR-DESSUS
   Texte clair, voile sombre dosé pour un contraste fort et une
   lisibilité parfaite. BLOC FINAL — prioritaire (écrase l'ancien).
   ============================================================ */

@media (max-width: 820px){

  /* Le hero redevient plein écran avec la photo en fond */
  .hero{
    min-height: 100svh !important;        /* hauteur écran (svh = sans la barre du navigateur) */
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* contenu ancré en bas */
    padding: 100px 0 110px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* La photo : plein hero, on garde le poseur (cadrage à gauche) */
  .hero-slides{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }
  .hero-slide{
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: 30% center !important;  /* on garde le poseur (gauche) visible */
  }

  /* VOILE SOMBRE pour le contraste : dégradé du bas (fort) vers le haut (léger) */
  .hero-overlay{
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    bottom: auto !important;
    background:
      linear-gradient(180deg,
        rgba(11,11,11,0.30) 0%,
        rgba(11,11,11,0.10) 28%,
        rgba(11,11,11,0.45) 62%,
        rgba(11,11,11,0.82) 100%) !important;
  }

  /* LE TEXTE : par-dessus la photo, en bas, clair et lisible */
  .hero-content{
    position: relative !important;
    z-index: 2 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 22px !important;
    text-align: left !important;
  }

  /* Sur-titre : orange vif + ombre pour ressortir sur la photo */
  .hero-eyebrow{
    justify-content: flex-start !important;
    color: #FFB048 !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.7) !important;
    margin-bottom: 18px !important;
  }
  .hero-eyebrow .eyebrow-orange{
    color: #FFB048 !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.7) !important;
  }
  .hero-eyebrow::before{ background: #FFB048 !important; }

  /* Titre : blanc lumineux + ombre marquée = lisible sur tout fond */
  .hero-content h1{
    text-align: left !important;
    font-size: clamp(2.4rem, 12vw, 3.6rem) !important;
    line-height: 1.04 !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.6) !important;
  }
  /* "fenêtres." en orange vif, lisible, souligné */
  .hero-content h1 .accent-green{
    color: #FF8A28 !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.8) !important;
  }
  .hero-content h1 .accent-green::after{
    left: 0 !important; right: auto !important;
    background: #FF8A28 !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.6) !important;
  }

  /* Paragraphe : blanc cassé + ombre, bien lisible */
  .hero-content .lead{
    text-align: left !important;
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.7) !important;
    margin-left: 0 !important;
    margin-top: 18px !important;
  }

  /* Boutons : pleine largeur, grands, tactiles */
  .hero-actions{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    margin-top: 28px !important;
  }
  .hero-actions .btn{
    width: 100% !important;
    min-height: 56px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 1.02rem !important;
  }
  /* le 2e bouton (ghost) : bordure claire visible sur la photo */
  .hero-actions .btn-ghost-light{
    border: 1.5px solid rgba(255,255,255,0.7) !important;
    color: #FFFFFF !important;
    background: rgba(255,255,255,0.08) !important;
  }
}

/* Très petits écrans */
@media (max-width: 420px){
  .hero-content{ padding: 0 18px !important; }
  .hero-content h1{ font-size: clamp(2.2rem, 13vw, 3.1rem) !important; }
}


@media (max-width: 820px){
  .hero-eyebrow{
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.7) !important;
    font-weight: 700 !important;
  }
  .hero-eyebrow .eyebrow-orange{
    color: #FFC266 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.7) !important;
  }
}

/* FIX swatches RAL : afficher la vraie couleur RAL */
.ral-sw{ background: var(--c) !important; }
.ral-sw.textured{ background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), var(--c) !important; background-color: var(--c) !important; }


/* ============================================================
   FIX LISIBILITÉ — enquête (en-têtes invisibles) + cartes hub
   (Bâtiment public, Rénovation...) titres en vert lisible.
   BLOC FINAL — prioritaire.
   ============================================================ */

/* ---------- 1) ENQUÊTE DE SATISFACTION : en-têtes visibles ---------- */
/* Le formulaire est sur fond blanc : on force les en-têtes en foncé.
   (Ils utilisaient var(--ink) devenu blanc clair = invisible.) */
.enquete-form h3{
  color: #16181C !important;            /* titre "Enquête de satisfaction" foncé */
}
.rating-label{
  color: #2A2D33 !important;            /* "Note globale...", "Qualité du conseil..." foncé */
}
.enquete-form label,
.enquete-form .field label{
  color: #4A4E56 !important;            /* labels des champs lisibles */
}
.enquete-form p,
.enquete-aside p,
.enquete-aside li,
.perks li{
  color: #2A2D33 !important;
}
.enquete-aside h2{ color: var(--anis) !important; }
.enquete-aside .eyebrow{ color: var(--orange) !important; }
/* les boutons étoiles : chiffre foncé visible sur fond blanc */
.rating-stars button{
  color: #3D4148 !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(20,22,28,0.18) !important;
}
.rating-stars button:hover,
.rating-stars button.active,
.rating-stars button.selected{
  background: var(--orange) !important;
  color: #FFFFFF !important;
  border-color: var(--orange) !important;
}

/* ---------- 2) CARTES HUB (Bâtiment public, Rénovation, etc.) ---------- */
/* Titres en VERT bien lisible + ombre pour ressortir sur les photos */
.hub-card-bottom h2{
  color: #A4D818 !important;             /* vert vif lisible sur photo */
  text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6) !important;
  font-weight: 800 !important;
}
/* La description sous le titre : blanc lisible + ombre */
.hub-card-bottom p{
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85) !important;
}
/* Le lien "Voir les projets →" : vert clair + ombre */
.hub-card-bottom .hub-arrow{
  color: #C5E85A !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8) !important;
  font-weight: 600 !important;
}
/* Le numéro (03, 04...) : visible */
.hub-num{
  color: rgba(255,255,255,0.9) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7) !important;
}
/* On renforce un peu le voile sombre des cartes hub pour garantir le contraste */
.hub-card-overlay{
  background: linear-gradient(180deg, rgba(11,11,11,0.15) 0%, rgba(11,11,11,0.10) 40%, rgba(11,11,11,0.78) 100%) !important;
}

/* Idem pour les market-card si présentes (même logique) */
.market-card h2, .market-card h3{
  color: #A4D818 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8) !important;
}



/* ============================================================
   FIX MOBILE — le header ne doit plus cacher le bouton "Retour"
   ============================================================ */

/* Sur mobile, le header est plus haut (logo + menu) : on augmente
   l'espace au-dessus du bouton retour pour qu'il passe en dessous. */
@media (max-width: 820px){
  .page-back .container{
    padding-top: 150px !important;     /* > hauteur du header mobile (~129px) */
    padding-bottom: 8px !important;
  }
  /* on s'assure que le bouton retour est au-dessus du fond mais sous le header */
  .page-back{ z-index: 5 !important; }
}

@media (max-width: 480px){
  .page-back .container{ padding-top: 145px !important; }
}



/* ============================================================
   FIX — carte Facebook (Actualités) coupée sur mobile
   Le conteneur avait aspect-ratio 4/3 + overflow:hidden, ce qui
   tronquait le bas de la carte. On laisse la carte prendre sa
   hauteur naturelle.
   ============================================================ */

/* Quand le visuel contient la carte Facebook : pas de ratio fixe,
   pas de découpe — la hauteur s'adapte au contenu. */
.market-hero-visual.fb-visual{
  aspect-ratio: auto !important;
  overflow: visible !important;
  height: auto !important;
}

/* Sur mobile spécifiquement, on s'assure que tout est visible */
@media (max-width: 820px){
  .market-hero-visual.fb-visual{
    aspect-ratio: auto !important;
    overflow: visible !important;
    height: auto !important;
    padding: 18px !important;
  }
  .fb-visual .fb-card{
    width: 100% !important;
    padding: 22px !important;
  }
  /* le logo FB en haut ne doit pas être coupé non plus */
  .fb-visual .fb-logo{ padding: 14px 16px !important; }
}



/* ============================================================
   FIX CONTRASTE — corrections ciblées de lisibilité
   (basé sur audit automatique de toutes les pages)
   BLOC FINAL — prioritaire.
   ============================================================ */

/* ---------- Badges orange : texte plus foncé pour contraste ---------- */
.project-tag{
  color: #C0500D !important;             /* orange foncé lisible sur fond orange clair */
  background: rgba(232,102,26,0.14) !important;
  font-weight: 700 !important;
}

/* ---------- Numéros de cartes (01, 02...) sur photos : contraste garanti ---------- */
.hub-num, .market-num, .gamme-num{
  color: #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.7) !important;
  font-weight: 700 !important;
}

/* ---------- Cartes hub : voile renforcé + titres bien lisibles ---------- */
.hub-card-overlay{
  background: linear-gradient(180deg, rgba(11,11,11,0.20) 0%, rgba(11,11,11,0.12) 35%, rgba(11,11,11,0.55) 70%, rgba(11,11,11,0.85) 100%) !important;
}
.hub-card-bottom h2{
  color: #B8E830 !important;             /* vert vif bien contrasté sur voile sombre */
  text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.8) !important;
  font-weight: 800 !important;
}
.hub-card-bottom p{
  color: #FFFFFF !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9) !important;
}

/* ---------- Cartes projet (project-feature) : titres et textes lisibles ---------- */
.project-feature-content h2, .project-feature-content h3{
  color: #B8E830 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85) !important;
}
.project-feature-content p{
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8) !important;
}

/* ---------- market-feature : pastille verte + texte foncé si sur clair ---------- */
.market-feature{
  color: #2A2D33 !important;
}



/* ============================================================
   FIX ACCESSIBILITÉ — contraste des petits textes verts
   Le vert #A4D818 est un peu juste pour les petits textes sur
   fond clair. On le fonce légèrement pour les éléments fins.
   (Les gros titres gardent le vert vif, contraste suffisant à
   leur taille.) BLOC FINAL.
   ============================================================ */

/* Noms de marques dans le nuancier (petits liens verts) : plus foncés */
.brand-card, .brand-name, .brand-list a, a.brand-card,
.gamme-brands a, .gamme-brands-list a{
  color: #A4D818 !important;             /* vert foncé, contraste OK */
}

/* Liens verts génériques de taille normale sur fond clair */
.footer-showroom strong{ color: #A4D818 !important; }

/* Petits labels/eyebrows verts sur fond clair : on garde l'orange
   (déjà bon contraste) ou on fonce le vert si présent */
.eyebrow{ font-weight: 600 !important; }

/* Les gros titres de section restent en vert profond lisible
   (déjà appliqué, on confirme la valeur foncée) */
.section-head h2, .market-projects h2, .concours-section h2,
.faq h2, .about h2, .gamme-page h2{
  color: #A4D818 !important;
}



/* ============================================================
   HERO v3 — TEXTE À GAUCHE (poseur à droite sur la nouvelle photo)
   Texte orange + vert, moderne, lisible, contrasté, souligné.
   BLOC FINAL — prioritaire (écrase "texte à droite").
   ============================================================ */

/* ===================== DESKTOP ===================== */
@media (min-width: 821px){

  /* Contenu ramené à GAUCHE */
  .hero{ justify-content: flex-start !important; }
  .hero-content{
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    max-width: 680px !important;
  }
  .hero-eyebrow{ justify-content: flex-start !important; }
  .hero-content h1{ text-align: left !important; }
  .hero-content .lead{ text-align: left !important; margin-left: 0 !important; }
  .hero-actions{ justify-content: flex-start !important; }
  .hero-content h1 .accent-green::after{ left: 0 !important; right: auto !important; width: 100% !important; }
  .hero-dots{ justify-content: flex-start !important; }

  /* VOILE inversé : sombre à GAUCHE (texte), clair à DROITE (poseur visible) */
  .hero-overlay{
    background:
      linear-gradient(90deg, rgba(11,11,11,0.62) 0%, rgba(11,11,11,0.38) 40%, rgba(11,11,11,0.10) 68%, rgba(11,11,11,0) 100%),
      linear-gradient(180deg, rgba(11,11,11,0.12) 0%, transparent 35%, transparent 70%, rgba(11,11,11,0.28) 100%) !important;
  }

  /* Cadrage : garder le poseur (à droite) bien visible */
  .hero-slide{ background-position: center center !important; }
}

/* ===================== COULEURS DU TEXTE (PC + mobile) ===================== */

/* Sur-titre : ORANGE vif lumineux + ombre */
.hero-eyebrow{
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 12px rgba(0,0,0,0.6) !important;
  font-weight: 700 !important;
}
.hero-eyebrow .eyebrow-orange{
  color: #FF7A1A !important;                  /* orange vif */
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 12px rgba(0,0,0,0.55) !important;
}
.hero-eyebrow::before{ background: #FF7A1A !important; }   /* le petit trait devant */

/* TITRE : "La clé sur vos portes et" en VERT vif, "fenêtres." en ORANGE.
   Ombres marquées pour ressortir sur la photo. Moderne et contrasté. */
.hero-content h1{
  color: #A4D818 !important;                   /* VERT vif lumineux */
  text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.55) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.02 !important;
}
.hero-content h1 .accent-green{
  color: #FF7A1A !important;                   /* "fenêtres." en ORANGE vif */
  text-shadow: 0 2px 16px rgba(0,0,0,0.75) !important;
}
/* Soulignement orange épais sous "fenêtres." */
.hero-content h1 .accent-green::after{
  content: '' !important;
  position: absolute !important;
  left: 0; bottom: 2px;
  height: 7px !important;
  border-radius: 4px !important;
  background: #FF7A1A !important;
  box-shadow: 0 2px 14px rgba(255,122,26,0.6) !important;
}

/* Paragraphe : blanc lumineux + ombre, bien lisible */
.hero-content .lead{
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.75) !important;
}

/* Boutons : le 2e (ghost) avec bordure claire visible sur photo */
.hero-actions .btn-ghost-light{
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.08) !important;
}

/* ===================== MOBILE ===================== */
@media (max-width: 820px){
  /* Le hero mobile garde : photo complète + texte par-dessus en bas.
     Cadrage pour garder le poseur (à droite) visible. */
  .hero-slide{ background-position: 70% center !important; }   /* 70% = on garde le poseur à droite */
  .hero-content{ text-align: left !important; }
  .hero-content h1{
    color: #A4D818 !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6) !important;
  }
  .hero-content h1 .accent-green{ color: #FF7A1A !important; }
  .hero-content h1 .accent-green::after{ left: 0 !important; right: auto !important; background: #FF7A1A !important; }
  .hero-eyebrow .eyebrow-orange{ color: #FF8A28 !important; }
}


/* ===== Hero : nouvelle photo d'accueil (portrait) — cadrage propre PC + mobile ===== */
.hero .hero-slide{ background-size: cover !important; background-position: center center !important; filter: none !important; }
@media (max-width: 760px){
  /* mobile prioritaire : photo plein cadre, on met en avant la fenêtre + le coucher de soleil */
  .hero{ min-height: 90vh !important; }
  .hero .hero-slides{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; }
  .hero .hero-slide{ background-position: center 42% !important; }
  /* lisibilité du texte sur la photo */
  .hero .hero-overlay{ background: linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.15) 30%, rgba(11,11,11,0.20) 55%, rgba(11,11,11,0.78) 100%) !important; }
}


.nuancier{
  /* identité dimensionchassis.be */
  --paper:#F4F1EA;
  --paper-2:#EFE9DF;
  --bone:#E8E2D5;
  --card:#FFFFFF;
  --text:#16181C;
  --text-dim:#3D4148;
  --text-muted:#5C616B;
  --line:rgba(20,22,28,.10);
  --line-strong:rgba(20,22,28,.18);
  --orange:#E8661A;
  --orange-deep:#C0530F;
  --orange-soft:rgba(232,102,26,.14);
  --anis:#A4D818;
  --anis-soft:rgba(164,216,24,.22);
  --r-md:10px;
  --r-lg:18px;
  --r-xl:28px;
  --shadow-card:0 10px 34px rgba(20,22,28,.07);
  --display:'Manrope',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --lw:clamp(232px,46vw,362px);
  --lh:clamp(46px,8.4vw,64px);
  --pivot:clamp(38px,27%,240px);
}

.nuancier *,.nuancier *::before,.nuancier *::after{box-sizing:border-box}

.nuancier{
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:clamp(34px,6vw,88px) clamp(20px,4vw,56px);
}
.nuancier :where(h1,h2,h3,p,ul,li,figure,dl,dd){margin:0}
.shell{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(22px,3vw,34px)}

/* ---------- en-tête ---------- */
.masthead{display:flex;flex-direction:column;gap:12px;max-width:64ch}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);
}
.masthead h1{
  font-family:var(--display);
  font-size:clamp(34px,5.4vw,64px);font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance;
}
.range{
  font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
  margin-top:-4px;font-variant-numeric:tabular-nums;
}
.lede{color:var(--text-dim);font-size:clamp(15px,1.5vw,17px);max-width:60ch;margin-top:4px}

/* ---------- filtres ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--body);font-size:13px;font-weight:500;color:var(--text);
  background:rgba(255,255,255,.7);border:.8px solid var(--line-strong);
  padding:9px 17px;border-radius:100px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.chip:hover{background:#fff;border-color:rgba(20,22,28,.3)}
.chip[aria-pressed="true"]{
  background:var(--orange-deep);border-color:var(--orange-deep);color:#fff;font-weight:600;
  box-shadow:0 6px 18px -6px rgba(232,102,26,.5);
}
.chip .n{opacity:.55;margin-left:7px;font-variant-numeric:tabular-nums}
.chip:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- plateau ---------- */
.board{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:stretch}
@media (max-width:940px){.board{grid-template-columns:minmax(0,1fr)}}

.stage{
  position:relative;overflow:hidden;
  background:radial-gradient(125% 95% at 30% 44%,#FCFAF6 0%,var(--paper-2) 48%,#E1D8C7 100%);
  border:.8px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  min-height:clamp(440px,64vh,620px);
  touch-action:none;cursor:grab;outline:none;
}
.stage.dragging{cursor:grabbing}
.stage:focus-visible{border-color:var(--orange);box-shadow:var(--shadow-card),0 0 0 3px rgba(232,102,26,.25)}

.fan{position:absolute;left:var(--pivot);top:47%;width:0;height:0}
.lam{
  position:absolute;
  left:calc(var(--lh) / -2);top:calc(var(--lh) / -2);
  width:var(--lw);height:var(--lh);
  transform-origin:calc(var(--lh) / 2) calc(var(--lh) / 2);
  border-radius:calc(var(--lh) / 2) 5px 5px calc(var(--lh) / 2);
  background:#ddd;display:block;padding:0;border:0;cursor:pointer;
  box-shadow:0 4px 12px rgba(20,22,28,.22);
  will-change:transform;
}
.lam canvas{display:block;width:100%;height:100%;border-radius:inherit}
.lam .ring{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:.8px solid rgba(20,22,28,.22);
}
.lam .tag{
  position:absolute;right:13px;max-width:calc(100% - 60px);
  font-family:var(--body);font-size:9.5px;font-weight:600;letter-spacing:.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
.lam .tag b{font-weight:700;font-variant-numeric:tabular-nums}
.lam.above .tag{top:5px}
.lam.below .tag{bottom:5px}
.lam:not(.above):not(.below) .tag{top:50%;transform:translateY(-50%)}
.lam.is-active{z-index:400}
.lam.is-active .tag{top:50%;bottom:auto;transform:translateY(-50%);font-size:13px;letter-spacing:-.005em}
.lam.is-active .ring{border-width:1.4px;border-color:rgba(20,22,28,.4)}
.lam:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.rivet{
  position:absolute;left:var(--pivot);top:47%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;z-index:500;pointer-events:none;
  background:conic-gradient(from 40deg,#8F949A,#E9ECEE,#6E7378,#CDD1D5,#7B8085,#E2E5E8,#8F949A);
  box-shadow:0 2px 6px rgba(20,22,28,.4),inset 0 0 0 1px rgba(20,22,28,.28);
}
.rivet::after{
  content:"";position:absolute;inset:8px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#5A5E63,#24262A);
}

.stage-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:600;
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(244,241,234,0),rgba(244,241,234,.9) 62%);
}
.nav-btn{
  width:36px;height:36px;flex:none;border-radius:50%;
  border:.8px solid var(--line-strong);background:#fff;color:var(--text);
  font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.nav-btn:hover{border-color:rgba(20,22,28,.34);box-shadow:0 4px 14px rgba(20,22,28,.10)}
.nav-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.hint{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.counter{margin-left:auto;font-size:12.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.counter b{color:var(--text);font-weight:600}
@media (max-width:600px){.hint{display:none}}
/* sur mobile la lamelle est trop étroite pour le nom : on ne garde que le code */
@media (max-width:680px){
  .lam:not(.is-active) .tag .nm{display:none}
  .lam .tag{font-size:10px}
  .lam.is-active .tag{font-size:12px}
}

/* ---------- fiche ---------- */
.detail{
  background:var(--card);border:.8px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:18px;display:flex;flex-direction:column;gap:16px;
}
.swatch{
  position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;
  box-shadow:inset 0 0 0 .8px rgba(20,22,28,.18);background:#ddd;
}
.swatch canvas{display:block;width:100%;height:100%}
.d-code{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.d-name{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.1;text-wrap:balance;margin-top:4px}
.d-alt{font-size:13.5px;color:var(--text-muted);margin-top:3px}
.flag{
  display:none;align-self:flex-start;margin-top:10px;
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;
}
.flag.on{display:inline-block}
.flag.retiree{background:rgba(20,22,28,.07);color:var(--text-muted)}
.flag.nouveau{background:var(--anis-soft);color:#4C6600}

.specs{display:flex;flex-direction:column;border-top:.8px solid var(--line)}
.specs div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0;border-bottom:.8px solid var(--line)}
.specs dt{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);flex:none}
.specs dd{font-size:14px;text-align:right;color:var(--text)}
.note{
  background:var(--orange-soft);border-radius:var(--r-md);padding:13px 15px;
  font-size:13px;line-height:1.5;color:var(--text-dim);
}
.note b{color:var(--text);font-weight:600}

/* ---------- mentions ---------- */
.legal{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px 34px;
  border-top:.8px solid var(--line);padding-top:20px;
  font-size:13px;line-height:1.55;color:var(--text-muted);
}
.legal strong{
  color:var(--text-dim);font-weight:700;display:block;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px;
}

.nuancier .stage{touch-action:pan-y;}



/* ===== Visionneuse (lightbox) : zoom + téléchargement ===== */
.lightbox img{ transition: transform .14s ease; transform-origin: center center; will-change: transform; touch-action: none; }
.lightbox.is-zoomed img{ cursor: grab; }
.lightbox-download{
  position: absolute; bottom: 24px; right: 24px; z-index: 1002;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 100px;
  background: #C0530F; color: #fff !important; text-decoration: none;
  font-family: var(--font-body); font-size: .92rem; font-weight: 600; min-height: 44px;
  box-shadow: 0 6px 22px rgba(0,0,0,.4); border: none; cursor: pointer;
}
.lightbox-download:hover{ background: #AD4A0C; }
.lightbox-download svg{ display:block; }
.lightbox-hint{
  position:absolute; bottom: 30px; left: 24px; z-index:1002;
  color: rgba(255,255,255,.7); font-size:.82rem; font-family:var(--font-body); pointer-events:none;
}
@media (max-width:760px){
  .lightbox-download{ bottom:16px; right:16px; padding:11px 16px; font-size:.86rem; }
  .lightbox-hint{ bottom:22px; left:16px; font-size:.76rem; }
  .lightbox-counter{ bottom: 64px !important; }
}