/* ─────────────────────────────────────────
   SATOYAMA FORGE — Design System v2
   ───────────────────────────────────────── */

/* Google Fonts chargées via <link> dans le HTML (preconnect + stylesheet direct) */

:root {
  --green-dark:   #1a4020;
  --green-mid:    #2d6e30;
  --green-light:  #4a9e4e;
  --lime:         #7bc547;
  --lime-bright:  #9ed63c;
  --charcoal:     #141614;
  --charcoal-mid: #1e201e;
  --gold:         #b8963a;
  --cream:        #f7f4ee;
  --cream-dark:   #ede9e0;
  --white:        #ffffff;
  --text:         #181a18;
  --text-muted:   #5a6055;
  --border:       rgba(123,197,71,0.14);
  --radius:       14px;
  --radius-sm:    8px;
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.06);
  --shadow:       0 6px 30px rgba(0,0,0,0.10);
  --shadow-lg:    0 16px 60px rgba(0,0,0,0.14);
  --transition:   0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── SCROLL PROGRESS BAR ── */
#scroll-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--green-dark) 0%, var(--lime) 60%, #c0f060 100%);
  z-index: 300; border-radius: 0 2px 2px 0;
  pointer-events: none; will-change: width;
  transition: width 0.08s linear;
}

/* ── SKIP LINK (accessibilité clavier — WCAG 2.4.1) ── */
/*
  Le lien "Passer au contenu principal" doit être invisible par défaut
  mais visible au focus clavier (touche Tab). Sans ce CSS, il apparaît
  visuellement sur toutes les pages avant la navigation — régression visuelle.
  Conforme WCAG 2.4.1 Bypass Blocks (niveau A).
*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  padding: 8px 22px;
  background: var(--lime);
  color: var(--charcoal);
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: none; /* pas d'animation pour ce lien d'urgence */
}
.skip-link:focus {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  overflow: visible;
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

/* ── ANNOUNCEMENT BAR ── */
/*
  Barre d'annonce contextuelle injectée dynamiquement par JS (main.js).
  Affichée une seule fois par visiteur (localStorage dismiss).
  Signale le statut R&D actif et le CTA liste d'intérêt — crucial pour
  l'audience investisseurs/partenaires dès le premier contact avec le site.
  Positionnée avant la nav (dans le flux), zéro layout shift.
*/
#announce-bar {
  background: var(--charcoal);
  border-bottom: 1px solid rgba(123,197,71,0.22);
  padding: 10px 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  z-index: 201;
  overflow: hidden;
  max-height: 60px;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1),
              opacity 0.35s ease,
              padding 0.4s ease;
}
#announce-bar.hiding {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
#announce-bar-text {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.1px;
}
#announce-bar-text strong {
  color: var(--lime);
  font-weight: 700;
}
#announce-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--lime);
  color: var(--charcoal);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
#announce-bar-link:hover {
  background: var(--lime-bright);
  transform: translateY(-1px);
}
#announce-bar-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  font-size: 1rem;
  line-height: 1;
  padding: 6px;
  border-radius: 50%;
  transition: color var(--transition), background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
#announce-bar-close:hover {
  color: white;
  background: rgba(255,255,255,0.08);
}
/* Pas d'animation de transition sur prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #announce-bar { transition: none !important; }
  #announce-bar-link:hover { transform: none; }
}
@media (max-width: 600px) {
  #announce-bar { gap: 10px; padding: 10px 40px 10px 4%; }
  #announce-bar-text { font-size: 0.72rem; }
  #announce-bar-link { display: none; }
}

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(248,244,238,0.97);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  padding: 0 5%;
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
  border-bottom: 2px solid rgba(123,197,71,0.25);
  transition: height var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
/* Nav compacte au scroll */
nav.scrolled {
  height: 58px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.13);
  background: rgba(248,244,238,0.99);
}
.nav-brand {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
}
.nav-brand img {
  height: 58px; width: auto; object-fit: contain;
  border-radius: 0; background: transparent;
  padding: 0; transition: transform var(--transition), height var(--transition);
}
nav.scrolled .nav-brand img { height: 44px; }
.nav-brand:hover img { transform: rotate(-8deg) scale(1.05); }
.nav-brand span {
  font-size: 0.88rem; font-weight: 800; color: var(--charcoal);
  letter-spacing: 2px; text-transform: uppercase;
}
.nav-brand span em { font-style: normal; color: var(--green-dark); }
.nav-links { display: flex; gap: 8px; list-style: none; align-items: center; }
.nav-links a {
  color: rgba(30,32,30,0.65); text-decoration: none;
  font-size: 0.83rem; font-weight: 500; letter-spacing: 0.3px;
  padding: 6px 12px; border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.nav-links a:hover { color: var(--green-dark); background: rgba(123,197,71,0.1); }
.nav-links a.active { color: var(--green-dark); font-weight: 700; }
.nav-cta {
  background: var(--lime) !important; color: var(--charcoal) !important;
  font-weight: 700 !important; padding: 8px 20px !important;
  border-radius: 20px !important; letter-spacing: 0.5px !important;
  transition: all var(--transition) !important;
}
.nav-cta:hover {
  background: var(--lime-bright) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(123,197,71,0.35) !important;
}

/* Hamburger */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 6px; border-radius: 6px;
  transition: background var(--transition);
}
.nav-toggle:hover { background: rgba(255,255,255,0.06); }
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--charcoal); border-radius: 2px; transition: var(--transition);
}
.nav-mobile { display: none; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile {
    position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
    background: rgba(20,22,20,0.98); backdrop-filter: blur(20px);
    z-index: 199; flex-direction: column; align-items: center;
    justify-content: center; gap: 28px; list-style: none;
  }
  .nav-mobile.open { display: flex; }
  .nav-mobile a {
    color: white; text-decoration: none; font-size: 1.4rem;
    font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    transition: color var(--transition);
  }
  .nav-mobile a:hover { color: var(--lime); }
}

/* ── SECTIONS ── */
section { padding: 90px 5%; }

.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--lime); margin-bottom: 14px;
}
.section-label::before {
  content: ''; width: 20px; height: 2px;
  background: var(--lime); border-radius: 2px; display: inline-block;
}
.section-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 900; color: var(--charcoal); line-height: 1.15;
  letter-spacing: -0.03em; margin-bottom: 18px;
}
.section-title em { font-style: normal; color: var(--green-dark); }
.section-subtitle {
  font-size: 1.05rem; color: var(--text-muted);
  max-width: 560px; line-height: 1.75; font-weight: 300;
}

/* ── HERO ── */
.hero {
  min-height: calc(100vh - 68px);
  background: linear-gradient(145deg, #0b1d0e 0%, var(--green-dark) 50%, #243f28 100%);
  display: flex; align-items: center;
  padding: 80px 5%; position: relative; overflow: hidden;
}
/* Photo de fond hero */
.hero-bg-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  opacity: 0.18;
  pointer-events: none;
}

/* Motif points subtils */
.hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(123,197,71,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}
/* Halo lumineux */
.hero::after {
  content: '';
  position: absolute; bottom: -150px; right: -100px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(123,197,71,0.10) 0%, transparent 70%);
  pointer-events: none;
  animation: hero-pulse 6s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.12); opacity: 1; }
}

.hero-content { max-width: 720px; position: relative; z-index: 1; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(123,197,71,0.12); border: 1px solid rgba(123,197,71,0.28);
  color: var(--lime); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 7px 16px; border-radius: 100px; margin-bottom: 28px;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 900; color: white; line-height: 1.12;
  letter-spacing: -0.03em; margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: var(--lime); }
.hero-desc {
  font-size: 1.1rem; color: rgba(255,255,255,0.68);
  line-height: 1.75; margin-bottom: 40px; max-width: 540px; font-weight: 300;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 700; text-decoration: none;
  letter-spacing: 0.3px; transition: all var(--transition);
  cursor: pointer; border: none; position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0); transition: background var(--transition);
}
.btn:hover::after { background: rgba(255,255,255,0.08); }
.btn-primary {
  background: var(--lime); color: var(--charcoal);
  box-shadow: 0 4px 20px rgba(123,197,71,0.25);
}
.btn-primary:hover {
  background: var(--lime-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(123,197,71,0.45);
}
.btn-outline {
  background: transparent; color: white;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.btn-outline:hover { border-color: var(--lime); color: var(--lime); }

.hero-pills {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 52px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-pill {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.72); font-size: 0.76rem;
  padding: 5px 14px; border-radius: 100px; font-weight: 400;
  transition: all var(--transition); cursor: default;
}
.hero-pill:hover { background: rgba(123,197,71,0.12); border-color: rgba(123,197,71,0.3); color: var(--lime); }

/* ── PILIERS ── */
.pillars { background: var(--cream-dark); }
.pillars-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; margin-top: 52px;
}
.pillar-card {
  background: white; border-radius: var(--radius);
  padding: 36px 32px; box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--lime);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative; overflow: hidden;
}
.pillar-card::before {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at 100% 100%, rgba(123,197,71,0.08) 0%, transparent 70%);
}
.pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pillar-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, var(--green-dark), var(--green-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(30,64,32,0.3);
}
.pillar-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--charcoal); margin-bottom: 10px; letter-spacing: -0.01em; }
.pillar-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; font-weight: 300; }

/* ── STATS ── */
.stats { background: var(--charcoal); }
.stats .section-title { color: white; }
.stats .section-subtitle { color: rgba(255,255,255,0.5); }
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2px; margin-top: 52px;
  background: rgba(255,255,255,0.05); border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.stat-item {
  background: rgba(255,255,255,0.02); padding: 40px 28px; text-align: center;
  transition: background var(--transition);
}
.stat-item:hover { background: rgba(123,197,71,0.06); }
.stat-number {
  font-size: 2.6rem; font-weight: 900; color: var(--lime);
  line-height: 1; display: block; margin-bottom: 10px;
  letter-spacing: -0.04em;
  text-shadow: 0 0 30px rgba(123,197,71,0.2);
}
.stat-label {
  font-size: 0.76rem; color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;
}

/* ── INNOVATION ── */
.innovation-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px; align-items: start;
}
@media (max-width: 768px) { .innovation-grid { grid-template-columns: 1fr; } }
.innovation-card {
  background: white; border-radius: var(--radius); padding: 38px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.innovation-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.innovation-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green-dark), var(--lime));
}
.innovation-emoji {
  width: 60px; height: 60px; border-radius: 14px; font-size: 2rem;
  background: linear-gradient(135deg, rgba(30,64,32,0.08), rgba(74,158,78,0.08));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.innovation-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--charcoal); margin-bottom: 12px; letter-spacing: -0.01em; }
.innovation-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.75; font-weight: 300; }
.innovation-tag {
  display: inline-block; background: var(--green-dark); color: rgba(255,255,255,0.85);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 1px;
  padding: 5px 14px; border-radius: 100px; margin-top: 18px; text-transform: uppercase;
}

/* ── CTA BAND ── */
.cta-band {
  background: linear-gradient(135deg, #0f2614 0%, var(--green-dark) 50%, #1e3d22 100%);
  text-align: center; padding: 100px 5%; position: relative; overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(123,197,71,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.cta-band h2 {
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900;
  color: white; margin-bottom: 18px; letter-spacing: -0.03em; position: relative;
}
.cta-band p {
  color: rgba(255,255,255,0.65); font-size: 1.05rem;
  margin-bottom: 36px; max-width: 500px;
  margin-left: auto; margin-right: auto;
  line-height: 1.75; font-weight: 300; position: relative;
}
.cta-band .btn-primary { font-size: 0.95rem; padding: 16px 38px; position: relative; }

/* ── PAGE HERO (sous-pages) ── */
.page-hero {
  background: linear-gradient(145deg, #0b1d0e 0%, var(--green-dark) 100%);
  padding: 90px 5% 70px; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(123,197,71,0.06) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 600px; height: 300px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(123,197,71,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .section-label { justify-content: center; }
.page-hero .section-label::before { display: none; }
.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900;
  color: white; margin-bottom: 18px; letter-spacing: -0.03em; position: relative;
}
.page-hero p {
  color: rgba(255,255,255,0.62); font-size: 1.08rem;
  max-width: 580px; margin: 0 auto; line-height: 1.75; font-weight: 300; position: relative;
}

/* ── VISION PAGE ── */
.vision-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
  margin-bottom: 80px; padding: 60px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.vision-block:last-child { border-bottom: none; }
@media (max-width: 768px) { .vision-block { grid-template-columns: 1fr; gap: 36px; } }
.vision-block.reverse { direction: rtl; }
.vision-block.reverse > * { direction: ltr; }

/* Visuels vision : remplacés par des blocs riches */
.vision-visual {
  border-radius: 24px; height: 360px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.vision-visual-origin {
  background: linear-gradient(145deg, #0f2614, #2d6e30);
}
.vision-visual-origin .vision-visual-bg,
.vision-visual-forge .vision-visual-bg,
.vision-visual-solarpunk .vision-visual-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0.55;
  transition: opacity 0.4s ease, transform 0.6s ease;
  border-radius: 24px;
}
.vision-visual:hover .vision-visual-bg {
  opacity: 0.75;
  transform: scale(1.04);
}

.vision-visual-forge {
  background: linear-gradient(145deg, #1a0a04, #4a2810);
}
.vision-visual-forge .vision-visual-bg { opacity: 0.45; }

.vision-visual-solarpunk {
  background: linear-gradient(145deg, #0d1e0a, #1e4a20);
}
.vision-visual-solarpunk .vision-visual-bg { opacity: 0.5; }
.vision-visual-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(123,197,71,0.15) 0%, transparent 60%);
}
.vision-visual-icon {
  font-size: 7rem; position: relative; z-index: 1;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,0.3));
  animation: icon-float 5s ease-in-out infinite;
}
@keyframes icon-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.vision-visual-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}
.vision-visual-badge {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(10px);
  border: 1px solid rgba(123,197,71,0.25);
  color: var(--lime); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px;
}

.vision-text .section-label { margin-bottom: 10px; }
.vision-text h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800;
  color: var(--charcoal); margin-bottom: 20px; letter-spacing: -0.02em; line-height: 1.2;
}
.vision-text p {
  color: var(--text-muted); line-height: 1.85; margin-bottom: 18px;
  font-size: 0.97rem; font-weight: 300;
}
.vision-text p:last-child { margin-bottom: 0; }
.vision-text p strong { color: var(--charcoal); font-weight: 600; }
.vision-highlight {
  margin-top: 24px; padding: 18px 20px;
  background: rgba(30,64,32,0.06); border-left: 3px solid var(--lime);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.95rem; color: var(--green-dark); font-weight: 500; line-height: 1.6;
  font-style: italic;
}

/* ── CONTACT PAGE ── */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 52px; margin-top: 52px;
}
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 18px; letter-spacing: -0.01em; }
.contact-item { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-icon { font-size: 1.3rem; margin-top: 2px; }
.contact-item strong {
  display: block; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 4px; font-weight: 600;
}
.contact-item a, .contact-item span { color: var(--green-dark); font-weight: 500; text-decoration: none; }
.contact-item a:hover { color: var(--lime); }
.contact-form {
  background: white; border-radius: var(--radius); padding: 44px;
  box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,0.06);
}
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: var(--charcoal); margin-bottom: 7px; letter-spacing: 0.3px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid #dddad2;
  border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit;
  background: var(--cream); transition: border-color var(--transition), box-shadow var(--transition);
  outline: none; color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--lime); box-shadow: 0 0 0 3px rgba(123,197,71,0.12);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* ── FOOTER ── */
footer { background: var(--charcoal); padding: 56px 5% 28px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 52px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }
.footer-brand img {
  height: 54px; width: auto; margin-bottom: 14px;
  background: transparent; border-radius: 0; padding: 0;
}
.footer-brand p {
  color: rgba(255,255,255,0.4); font-size: 0.85rem;
  line-height: 1.7; max-width: 280px; margin-top: 10px; font-weight: 300;
}
.footer-col h4 {
  color: white; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul a {
  color: rgba(255,255,255,0.42); text-decoration: none;
  font-size: 0.875rem; transition: color var(--transition); font-weight: 300;
}
.footer-col ul a:hover { color: var(--lime); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { color: rgba(255,255,255,0.25); font-size: 0.78rem; }
.footer-lime { color: var(--lime) !important; }

/* ── PROOF SECTION (réalisations accueil) ── */
.proof-section {
  padding: 90px 5%;
  background: var(--charcoal);
}
.proof-section .section-label { color: rgba(123,197,71,0.8); }
.proof-section .section-title { color: white; }
.proof-section .section-subtitle { color: rgba(255,255,255,0.5); }

/* Hero cabane 1 */
.proof-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  margin-top: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.proof-hero-img {
  position: relative; overflow: hidden; min-height: 480px;
}
.proof-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.6s ease;
  display: block;
}
.proof-hero:hover .proof-hero-img img { transform: scale(1.04); }
.proof-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 50%);
}
.proof-live-badge {
  position: absolute; top: 20px; left: 20px;
  background: var(--lime); color: var(--charcoal);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 100px;
  box-shadow: 0 2px 12px rgba(123,197,71,0.4);
}
.proof-soon-badge {
  position: absolute; top: 20px; left: 20px;
  background: rgba(255,255,255,0.15); color: white;
  backdrop-filter: blur(6px);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.25);
}

.proof-hero-content {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: none;
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.proof-number {
  font-size: 5rem; font-weight: 900; color: rgba(123,197,71,0.12);
  line-height: 1; letter-spacing: -0.05em; margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
}
.proof-hero-content h3 {
  font-size: 1.7rem; font-weight: 800; color: white;
  letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px;
}
.proof-hero-content p {
  color: rgba(255,255,255,0.55); line-height: 1.8; font-weight: 300;
  font-size: 0.97rem; margin-bottom: 0;
}
.proof-features {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px;
}
.proof-features span {
  background: rgba(123,197,71,0.1); border: 1px solid rgba(123,197,71,0.2);
  color: var(--lime); font-size: 0.76rem; font-weight: 500;
  padding: 5px 12px; border-radius: 100px;
}

/* Secondaire : yourte */
.proof-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.proof-secondary-img {
  position: relative; overflow: hidden; min-height: 300px;
}
.proof-secondary-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.6s ease; display: block;
}
.proof-secondary:hover .proof-secondary-img img { transform: scale(1.04); }
.proof-secondary-content {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: none; padding: 36px 32px;
  display: flex; flex-direction: column; justify-content: center;
}
.proof-secondary-content h3 {
  font-size: 1.25rem; font-weight: 800; color: white;
  letter-spacing: -0.02em; margin-bottom: 12px;
}
.proof-secondary-content p {
  color: rgba(255,255,255,0.45); font-size: 0.88rem;
  line-height: 1.75; font-weight: 300;
}
.proof-thumbs {
  display: flex; flex-direction: column; gap: 0; overflow: hidden;
}
.proof-thumbs img {
  width: 100%; height: 100px;
  object-fit: cover; object-position: center;
  transition: transform 0.4s ease; display: block;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.proof-thumbs img:hover { transform: scale(1.05); }

.proof-header { margin-bottom: 0; }

@media (max-width: 900px) {
  .proof-hero { grid-template-columns: 1fr; }
  .proof-hero-img { min-height: 320px; }
  .proof-secondary { grid-template-columns: 1fr; }
  .proof-secondary-img { min-height: 260px; }
  .proof-thumbs { flex-direction: row; }
  .proof-thumbs img { height: 120px; flex: 1; }
}

/* ── BACK TO TOP ── */
#back-to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 150;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--lime); color: var(--charcoal);
  border: none; cursor: pointer; font-size: 1.1rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(14px) scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none; box-shadow: 0 4px 20px rgba(123,197,71,0.4);
}
#back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#back-to-top:hover { background: var(--lime-bright); box-shadow: 0 6px 28px rgba(123,197,71,0.55); transform: translateY(-3px) scale(1); }

/* ── RÉALISATIONS PHOTO CARDS (index.html) ── */
.real-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.real-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: white;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.real-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.real-img-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
}
.real-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.5s ease;
  display: block;
}
.real-card:hover .real-img-wrap img {
  transform: scale(1.06);
}

.real-badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 12px; border-radius: 100px;
}
.real-badge--open { background: var(--lime); color: var(--charcoal); }
.real-badge--soon { background: var(--charcoal); color: white; }

.real-body {
  padding: 22px 24px 26px;
}
.real-body h3 {
  font-size: 1.05rem; font-weight: 700; color: var(--charcoal);
  letter-spacing: -0.01em; margin-bottom: 8px;
}
.real-body p {
  font-size: 0.875rem; color: var(--text-muted);
  line-height: 1.7; font-weight: 300;
}

@media (max-width: 640px) {
  .real-grid { grid-template-columns: 1fr; }
  .real-img-wrap { height: 200px; }
}

/* ── FAQ ACCORDION ── */
.faq-list {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.faq-item {
  border-bottom: 1px solid rgba(123,197,71,0.18);
  overflow: hidden;
}
.faq-item:first-child {
  border-top: 1px solid rgba(123,197,71,0.18);
}
.faq-question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  user-select: none;
  transition: color var(--transition);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(123,197,71,0.1);
  border: 1.5px solid rgba(123,197,71,0.25);
  color: var(--green-dark);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
  line-height: 1;
}
.faq-item[open] .faq-question {
  color: var(--green-dark);
}
.faq-item[open] .faq-question::after {
  content: '−';
  background: var(--lime);
  border-color: var(--lime);
  color: var(--charcoal);
  transform: rotate(180deg);
}
.faq-question:hover {
  color: var(--green-dark);
}
.faq-question:hover::after {
  background: rgba(123,197,71,0.18);
  border-color: rgba(123,197,71,0.45);
}
.faq-answer {
  padding: 0 0 22px 0;
  animation: faqOpen 0.25s ease;
}
.faq-answer p {
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.8;
  font-weight: 300;
}
.faq-answer p + p { margin-top: 12px; }
.faq-answer a {
  color: var(--green-dark);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.faq-answer a:hover { color: var(--lime); }
.faq-answer strong { color: var(--charcoal); font-weight: 600; }

@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── UTILITIES ── */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-48 { margin-top: 48px; }
.max-600 { max-width: 600px; margin-left: auto; margin-right: auto; }

/* ── FORM FEEDBACK ── */
.form-msg {
  margin-top: 14px; padding: 13px 18px; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500; line-height: 1.5;
  animation: fadeSlideIn 0.35s ease;
}
.form-msg-success {
  background: rgba(45,110,48,0.1); border: 1px solid rgba(45,110,48,0.3); color: var(--green-mid);
}
.form-msg-warn {
  background: rgba(184,150,58,0.1); border: 1px solid rgba(184,150,58,0.3); color: var(--gold);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ANIMATIONS ── */
.fade-in {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Stagger pour les grilles */
.pillars-grid .fade-in:nth-child(2) { transition-delay: 0.1s; }
.pillars-grid .fade-in:nth-child(3) { transition-delay: 0.2s; }
.stats-grid .fade-in:nth-child(2) { transition-delay: 0.08s; }
.stats-grid .fade-in:nth-child(3) { transition-delay: 0.16s; }
.stats-grid .fade-in:nth-child(4) { transition-delay: 0.24s; }
.stats-grid .fade-in:nth-child(5) { transition-delay: 0.32s; }
.stats-grid .fade-in:nth-child(6) { transition-delay: 0.40s; }

/* ── ACCESSIBILITÉ : prefers-reduced-motion ── */
/*
  Les utilisateurs ayant un système vestibulaire sensible, une épilepsie,
  ou une préférence OS pour réduire les animations reçoivent une version
  sans mouvements amples. Les transitions fonctionnelles (fade, focus) sont
  conservées mais raccourcies. Les animations continues (pulse, float) sont
  stoppées. Conforme WCAG 2.1 AA — critère 2.3.3.
*/
@media (prefers-reduced-motion: reduce) {
  /* Désactiver toutes les animations continues */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Fade-in : rendre les éléments immédiatement visibles sans translation */
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Scroll progress : désactiver la transition de largeur (flicker inutile) */
  #scroll-progress-bar {
    transition: none !important;
  }

  /* Bouton retour en haut : montrer/masquer sans transition */
  #back-to-top {
    transition: none !important;
  }

  /* Nav brand : pas de rotation au hover */
  .nav-brand:hover img {
    transform: none;
  }

  /* Boutons : pas de translateY au hover */
  .btn:hover,
  .btn-primary:hover,
  .nav-cta:hover,
  .pillar-card:hover,
  .innovation-card:hover,
  #back-to-top:hover {
    transform: none !important;
  }

  /* html scroll-behavior: auto déjà couvert par * ci-dessus,
     mais on l'explicite pour compatibilité Firefox */
  html {
    scroll-behavior: auto !important;
  }
}

/* ── ACCESSIBILITÉ : focus visible (navigation clavier) ── */
/*
  :focus-visible cible uniquement la navigation clavier (Tab), pas le clic souris.
  Sans cela, les liens et boutons n'ont aucun indicateur visuel pour les
  utilisateurs naviguant sans souris (motricité réduite, power users).
  Conforme WCAG 2.1 AA — critère 2.4.7.
*/
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Suppression du focus souris sur les éléments interactifs (confort visuel) */
:focus:not(:focus-visible) {
  outline: none;
}