/* ============================================================
   KiS — KeepItSimple · Variant C « Vert affirmé »
   Deep-green color blocking · gold primary CTA · bold type
   Palette sampled from the brand logotype (gold + deep green)
   ============================================================ */

:root {
  /* Greens */
  --green-1000: #0a2b1c;
  --green-900:  #0f3d27;
  --green-800:  #11522f;
  --green-700:  #166a40;

  /* Golds */
  --gold-400: #d8b35a;  /* text/accents on dark green — 6.1:1 on green-900 */
  --gold-500: #c39a36;  /* primary CTA fill */
  --gold-600: #9a7a26;  /* large display numerals on cream — 3.7:1 */
  --gold-700: #7e631d;  /* small gold text on cream — 5.2:1 */

  /* Neutrals */
  --cream:    #f7f3ea;
  --cream-2:  #efe6d2;
  --paper:    #fffdf8;
  --ink:      #1c2a21;
  --ink-soft: #415147;
  --line:     #ddd3bc;

  /* On-dark text */
  --light:      #f3eedf;
  --light-soft: #cdd9cd;

  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, serif;

  --radius: 10px;
  --header-h: 4rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

ul, ol { list-style: none; }

a { color: var(--green-700); }

/* ---------- Utilities ---------- */
.container {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

.narrow { max-width: 44rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold-500);
  color: var(--green-1000);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* Honeypot — hidden from everyone, still in the DOM for Netlify */
.hp-field { position: absolute !important; left: -9999px !important; }

/* ============================================================
   Logo — official vector paths supplied by the brand owner
   ============================================================ */
.logo {
  display: inline-block;
  width: clamp(14rem, 24vw, 18rem);
  text-decoration: none;
  line-height: 1;
}
.logo img { display: block; width: 100%; height: auto; }

/* On light backgrounds (footer keeps the dark version) */

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.site-header.is-compact {
  background: rgba(15, 61, 39, 0.97);
  border-bottom-color: rgba(216, 179, 90, 0.25);
  box-shadow: 0 10px 30px rgba(10, 43, 28, 0.16);
  backdrop-filter: blur(12px);
}

.header-inner {
  position: relative;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
  transition: min-height 320ms ease, padding 320ms ease;
}

.site-header:not(.is-compact) .logo {
  opacity: 0;
  transform: translateY(-0.5rem) scale(1.08);
  pointer-events: none;
}

.site-header .logo {
  transition: opacity 260ms ease, transform 320ms ease;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  background: rgba(10, 43, 28, 0.2);
  border: 1px solid rgba(243, 238, 223, 0.32);
  border-radius: 999px;
  color: var(--light);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem 0.5rem 0.8rem;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
  color: var(--gold-400);
  border-color: rgba(216, 179, 90, 0.72);
  background: rgba(10, 43, 28, 0.52);
}
.nav-toggle-icon {
  position: relative;
  width: 1.2rem;
  height: 0.9rem;
}
.nav-toggle-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease, top 280ms cubic-bezier(.2,.8,.2,1);
}
.nav-toggle-icon span:nth-child(1) { top: 0; }
.nav-toggle-icon span:nth-child(2) { top: calc(50% - 1px); }
.nav-toggle-icon span:nth-child(3) { top: calc(100% - 2px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; transform: scaleX(0.25); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }
.nav-toggle:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
}

.nav-list {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  width: min(20rem, calc(100vw - 2.5rem));
  padding: 0.7rem;
  background: rgba(10, 43, 28, 0.98);
  border: 1px solid rgba(216, 179, 90, 0.3);
  border-radius: 0.8rem;
  box-shadow: 0 1.5rem 3.5rem rgba(6, 30, 18, 0.32);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.65rem) scale(0.97);
  transform-origin: top right;
  transition: opacity 220ms ease, visibility 220ms ease, transform 300ms cubic-bezier(.2,.8,.2,1);
}
.nav-list.open { opacity: 1; visibility: visible; transform: none; }
.nav-list li { opacity: 0; transform: translateX(0.55rem); transition: opacity 180ms ease, transform 260ms cubic-bezier(.2,.8,.2,1); }
.nav-list.open li { opacity: 1; transform: none; }
.nav-list.open li:nth-child(2) { transition-delay: 35ms; }
.nav-list.open li:nth-child(3) { transition-delay: 70ms; }
.nav-list.open li:nth-child(4) { transition-delay: 105ms; }
.nav-list.open li:nth-child(5) { transition-delay: 140ms; }
.nav-list a {
  display: block;
  padding: 0.72rem 0.85rem;
  color: var(--light);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: 0.45rem;
}
.nav-list a:hover, .nav-list a:focus-visible { color: var(--gold-400); background: rgba(243, 238, 223, 0.07); }

/* ============================================================
   Hero — the deep-green statement block
   ============================================================ */
.hero {
  position: relative;
  background: var(--green-900);
  color: var(--light);
  overflow: hidden;
  padding-block: 0 clamp(5rem, 12vw, 9.5rem);
}

.hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(22, 106, 64, 0.4), transparent 34%),
    linear-gradient(315deg, rgba(17, 82, 47, 0.42), transparent 38%);
}
.hero-deco::before,
.hero-deco::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
}
.hero-deco::before {
  width: min(58rem, 72vw);
  height: min(37rem, 50vw);
  right: -11rem;
  top: -8rem;
  opacity: 0.3;
  animation: network-drift-right 13s ease-in-out infinite alternate;
  background-image: url("data:image/svg+xml,%3Csvg width='720' height='460' viewBox='0 0 720 460' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d8b35a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.34'%3E%3Cpath d='M36 112 168 42 276 126 412 54 548 142 690 74M168 42 210 214 412 54 462 234 690 74M36 112 210 214 92 356 276 126 462 234 548 142 624 332 690 74M210 214 338 338 462 234 624 332 338 338 92 356M276 126 338 338 548 142'/%3E%3C/g%3E%3Cg fill='%23d8b35a' opacity='.56'%3E%3Ccircle cx='36' cy='112' r='4'/%3E%3Ccircle cx='168' cy='42' r='5'/%3E%3Ccircle cx='276' cy='126' r='4'/%3E%3Ccircle cx='412' cy='54' r='4'/%3E%3Ccircle cx='548' cy='142' r='5'/%3E%3Ccircle cx='690' cy='74' r='4'/%3E%3Ccircle cx='210' cy='214' r='4'/%3E%3Ccircle cx='462' cy='234' r='4'/%3E%3Ccircle cx='92' cy='356' r='4'/%3E%3Ccircle cx='338' cy='338' r='5'/%3E%3Ccircle cx='624' cy='332' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-deco::after {
  width: min(52rem, 68vw);
  height: min(40rem, 54vw);
  left: -10rem;
  top: 24%;
  opacity: 0.3;
  animation: network-drift-left 16s ease-in-out infinite alternate;
  background-image: url("data:image/svg+xml,%3Csvg width='520' height='400' viewBox='0 0 520 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23f3eedf' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.42'%3E%3Cpath d='M14 86 116 32 216 96 312 38 486 112M116 32 154 178 312 38 364 190 486 112M14 86 154 178 78 318 216 96 364 190 438 330 486 112M154 178 278 310 364 190 438 330 278 310 78 318M216 96 278 310 486 112'/%3E%3C/g%3E%3Cg fill='%23f3eedf' opacity='.52'%3E%3Ccircle cx='14' cy='86' r='3.5'/%3E%3Ccircle cx='116' cy='32' r='4.5'/%3E%3Ccircle cx='216' cy='96' r='3.5'/%3E%3Ccircle cx='312' cy='38' r='4'/%3E%3Ccircle cx='486' cy='112' r='4'/%3E%3Ccircle cx='154' cy='178' r='3.5'/%3E%3Ccircle cx='364' cy='190' r='3.5'/%3E%3Ccircle cx='78' cy='318' r='4'/%3E%3Ccircle cx='278' cy='310' r='4.5'/%3E%3Ccircle cx='438' cy='330' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes network-drift-right {
  from { transform: translate3d(0, 0, 0) rotate(-2deg); }
  to { transform: translate3d(-2.25rem, 1.75rem, 0) rotate(2deg); }
}

@keyframes network-drift-left {
  from { transform: translate3d(0, 0, 0) rotate(6deg); }
  to { transform: translate3d(2.5rem, -1.5rem, 0) rotate(10deg); }
}

.hero-inner { position: relative; max-width: 52rem; }

.hero-brand-stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: clamp(5.5rem, 10vh, 8rem) clamp(6.5rem, 12vh, 8rem);
}

.hero-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 44rem);
}

.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  line-height: 0.82;
  transform-origin: center;
  transition: opacity 220ms ease, transform 380ms cubic-bezier(.2,.8,.2,1);
}

.hero-arrival {
  opacity: 0;
  transform: translateY(1.1rem);
  animation: hero-arrival 0.85s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes hero-arrival {
  to { opacity: 1; transform: none; filter: blur(0); }
}

.hero-arrival-kis {
  filter: blur(8px);
  transform: translateY(2rem) scale(0.9);
  animation-duration: 1.35s;
  animation-delay: 0.12s;
}

.hero-arrival-signature { animation-delay: 1.05s; }
.hero-arrival-actions { animation-delay: 1.9s; }

.hero-brand-logo-wrap {
  display: block;
  width: min(88vw, 44rem);
  filter: drop-shadow(0 1.25rem 1.5rem rgba(6, 30, 18, 0.2));
}

.hero-brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.hero-brand-slogan {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--gold-400);
  font-size: clamp(0.75rem, 1.8vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-ctas-welcome {
  width: min(100%, 23rem);
  margin-top: clamp(2.75rem, 6vh, 4.5rem);
  flex-direction: column;
}

.hero-ctas-welcome .btn { width: 100%; }

.hero-scroll-cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: max-content;
  margin-inline: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  color: var(--light-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero-scroll-arrow {
  width: 1.15rem;
  height: 1.15rem;
  border-right: 1.5px solid var(--gold-400);
  border-bottom: 1.5px solid var(--gold-400);
  transform: rotate(45deg);
  animation: scroll-pulse 1.8s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.45; transform: translateY(-0.2rem) rotate(45deg); }
  50% { opacity: 1; transform: translateY(0.2rem) rotate(45deg); }
}

body.has-scrolled .hero-brand {
  opacity: 0;
  transform: translateY(-2rem) scale(0.82);
}

body.has-scrolled .hero-scroll-cue {
  opacity: 0;
  pointer-events: none;
}

.hero-slogan {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--gold-400);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@media (max-width: 759px) {
  .site-header:not(.is-compact) .site-nav { opacity: 0; pointer-events: none; }
  .site-header .site-nav { transition: opacity 220ms ease; }
  .hero-brand-stage { padding-top: 6rem; }
  .logo { width: clamp(11.5rem, 52vw, 14rem); }
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-toggle { width: 2.75rem; padding: 0; justify-content: center; }
  .hero-ctas-welcome { width: min(100%, 20rem); }
  .hero-deco::before {
    width: 47rem;
    height: 30rem;
    right: -25rem;
    top: -3rem;
  }
  .hero-deco::after {
    width: 43rem;
    height: 33rem;
    left: -24rem;
    top: 28%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .logo,
  .site-header .site-nav,
  .hero-brand { transition: none; }
  .hero-arrival {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
  .hero-scroll-arrow { animation: none; }
  .hero-deco::before,
  .hero-deco::after { animation: none; }
}
.hero-slogan::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--gold-500);
}

.hero-title {
  margin-top: 1.5rem;
  font-weight: 900;
  font-size: clamp(2.25rem, 6.2vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.accent-word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-400);
  letter-spacing: 0;
}

.hero-location {
  display: block;
  margin-top: 0.22em;
  font-family: var(--font-display);
  font-size: 0.72em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.015em;
  color: var(--gold-400);
}

.hero-sub {
  margin-top: 1.75rem;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--light-soft);
}

.hero-ctas {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 1rem 1.9rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; }

.btn-gold {
  background: var(--gold-500);
  color: var(--green-1000);
  box-shadow: 0 8px 24px -10px rgba(195, 154, 54, 0.7);
}
.btn-gold:hover { background: var(--gold-400); }

.btn-outline-light {
  background: transparent;
  color: var(--light);
  border-color: rgba(243, 238, 223, 0.65);
}
.btn-outline-light:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
}

.btn-green {
  background: var(--green-800);
  color: var(--light);
}
.btn-green:hover { background: var(--green-700); }

.btn-submit { width: 100%; }
.btn-submit[disabled] { opacity: 0.7; cursor: wait; transform: none; }

@media (min-width: 560px) {
  .btn-submit { width: auto; min-width: 16rem; }
}

/* ============================================================
   Sections — shared rhythm
   ============================================================ */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }

/* Gold rule above section titles — visual rhythm without extra copy */
.has-rule::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  background: var(--gold-500);
  margin-bottom: 1.1rem;
}

.section-title {
  font-weight: 800;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--green-900);
  text-wrap: balance;
}
.section-title-on-dark { color: var(--light); }

.section-lede {
  margin-top: 1.25rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.section-lede p + p { margin-top: 0.9rem; }
.section-lede-on-dark { color: var(--light-soft); }

/* ============================================================
   2 · Présentation
   ============================================================ */
.section-intro { text-align: center; }
.section-intro .has-rule::before { margin-inline: auto; }
.section-intro .section-title { margin-bottom: 1.5rem; }
.intro-body { font-size: 1.15rem; color: var(--ink-soft); }
.intro-body p + p { margin-top: 1rem; }

/* ============================================================
   3 · Recrutement agile
   ============================================================ */
.steps {
  counter-reset: step;
  border-top: 2px solid var(--green-900);
  max-width: 52rem;
}

.step {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.step-num {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--gold-600);
  letter-spacing: -0.02em;
}

.step-body h3 {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--green-900);
  margin-bottom: 0.35rem;
}
.step-body p { color: var(--ink-soft); }

@media (min-width: 760px) {
  .step { grid-template-columns: 6rem 18rem 1fr; }
  .step-body { display: contents; }
  .step-num { font-size: 2.4rem; }
}

.pricing-note {
  margin-top: 2.5rem;
  max-width: 52rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--gold-500);
  background: var(--cream-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
  color: var(--green-900);
}

/* Premium option — dark green color-block card */
.premium-card {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  background: var(--green-900);
  color: var(--light-soft);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(2rem, 5vw, 3.25rem);
  position: relative;
  overflow: hidden;
}
.premium-card::after {
  content: "";
  position: absolute;
  width: 24rem;
  height: 17rem;
  right: -5rem;
  bottom: -3rem;
  opacity: 0.28;
  background: url("data:image/svg+xml,%3Csvg width='560' height='390' viewBox='0 0 560 390' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d8b35a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 104 118 38 226 96 332 46 512 118M118 38 152 170 332 46 384 184 512 118M28 104 152 170 82 318 226 96 384 184 472 324 512 118M152 170 286 306 384 184 472 324 286 306 82 318M226 96 286 306 512 118'/%3E%3C/g%3E%3Cg fill='%23d8b35a'%3E%3Ccircle cx='28' cy='104' r='3.5'/%3E%3Ccircle cx='118' cy='38' r='4.5'/%3E%3Ccircle cx='226' cy='96' r='3.5'/%3E%3Ccircle cx='332' cy='46' r='4'/%3E%3Ccircle cx='512' cy='118' r='4'/%3E%3Ccircle cx='152' cy='170' r='3.5'/%3E%3Ccircle cx='384' cy='184' r='3.5'/%3E%3Ccircle cx='82' cy='318' r='4'/%3E%3Ccircle cx='286' cy='306' r='4.5'/%3E%3Ccircle cx='472' cy='324' r='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.premium-eyebrow {
  color: var(--gold-400);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.premium-title {
  color: var(--light);
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin-bottom: 1.25rem;
}
.premium-card p + p { margin-top: 1rem; }
.premium-goal {
  font-weight: 600;
  color: var(--light);
  border-top: 1px solid rgba(216, 179, 90, 0.3);
  padding-top: 1.25rem;
  margin-top: 1.5rem !important;
}

/* ============================================================
   4 · Conseil RH — warm neutral block
   ============================================================ */
.section-conseil { background: var(--cream-2); }

.conseil-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 700px) {
  .conseil-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1020px) {
  .conseil-grid { grid-template-columns: repeat(4, 1fr); }
}

.conseil-item {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.75rem;
  border-top: 4px solid var(--green-800);
}
.conseil-item h3 {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--green-900);
  margin-bottom: 0.5rem;
}
.conseil-item p { color: var(--ink-soft); }

.conseil-item .conseil-label {
  color: var(--gold-700);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.conseil-closer {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--green-900);
  max-width: 38rem;
}
.conseil-closer em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-700);
}

/* ============================================================
   5 & 6 · Forms — layout
   ============================================================ */
.form-layout {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 920px) {
  .form-layout {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
    align-items: start;
  }
}

/* Entreprises — deep green block */
.section-entreprises {
  background: var(--green-900);
  position: relative;
  overflow: hidden;
}
.section-entreprises::before {
  content: "";
  position: absolute;
  width: min(34rem, 70vw);
  height: min(24rem, 56vw);
  left: -9rem;
  bottom: -5rem;
  opacity: 0.18;
  background: url("data:image/svg+xml,%3Csvg width='560' height='390' viewBox='0 0 560 390' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d8b35a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 104 118 38 226 96 332 46 512 118M118 38 152 170 332 46 384 184 512 118M28 104 152 170 82 318 226 96 384 184 472 324 512 118M152 170 286 306 384 184 472 324 286 306 82 318M226 96 286 306 512 118'/%3E%3C/g%3E%3Cg fill='%23d8b35a'%3E%3Ccircle cx='28' cy='104' r='3.5'/%3E%3Ccircle cx='118' cy='38' r='4.5'/%3E%3Ccircle cx='226' cy='96' r='3.5'/%3E%3Ccircle cx='332' cy='46' r='4'/%3E%3Ccircle cx='512' cy='118' r='4'/%3E%3Ccircle cx='152' cy='170' r='3.5'/%3E%3Ccircle cx='384' cy='184' r='3.5'/%3E%3Ccircle cx='82' cy='318' r='4'/%3E%3Ccircle cx='286' cy='306' r='4.5'/%3E%3Ccircle cx='472' cy='324' r='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

/* Candidats — back to warm light */
.section-candidats {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.section-candidats::before {
  content: "";
  position: absolute;
  width: min(32rem, 72vw);
  height: min(22rem, 54vw);
  right: -8rem;
  top: 3.5rem;
  opacity: 0.11;
  background: url("data:image/svg+xml,%3Csvg width='560' height='390' viewBox='0 0 560 390' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23166a40' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 104 118 38 226 96 332 46 512 118M118 38 152 170 332 46 384 184 512 118M28 104 152 170 82 318 226 96 384 184 472 324 512 118M152 170 286 306 384 184 472 324 286 306 82 318M226 96 286 306 512 118'/%3E%3C/g%3E%3Cg fill='%23166a40'%3E%3Ccircle cx='28' cy='104' r='3.5'/%3E%3Ccircle cx='118' cy='38' r='4.5'/%3E%3Ccircle cx='226' cy='96' r='3.5'/%3E%3Ccircle cx='332' cy='46' r='4'/%3E%3Ccircle cx='512' cy='118' r='4'/%3E%3Ccircle cx='152' cy='170' r='3.5'/%3E%3Ccircle cx='384' cy='184' r='3.5'/%3E%3Ccircle cx='82' cy='318' r='4'/%3E%3Ccircle cx='286' cy='306' r='4.5'/%3E%3Ccircle cx='472' cy='324' r='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.section-entreprises .form-layout,
.section-candidats .form-layout {
  position: relative;
  z-index: 1;
}

.form-card {
  background: var(--paper);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 5px solid var(--gold-500);
  box-shadow: 0 24px 48px -24px rgba(10, 43, 28, 0.45);
}
.form-card-light {
  border-top-color: var(--green-800);
  box-shadow: 0 24px 48px -32px rgba(10, 43, 28, 0.35);
}

/* Fields */
.field { margin-bottom: 1.25rem; }

.field-row {
  display: grid;
  gap: 0 1.25rem;
}
@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--green-900);
  margin-bottom: 0.4rem;
}

.req { color: var(--gold-700); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 6.5rem; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(22, 106, 64, 0.18);
}

.field input::placeholder,
.field textarea::placeholder { color: #79857c; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23166a40' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.5rem;
}

/* Error states */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #a93226;
}
.field-error {
  display: none;
  color: #a93226;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.35rem;
}
.field-error.visible { display: block; }

.form-error {
  display: none;
  color: #a93226;
  font-weight: 700;
  margin-bottom: 1rem;
}
.form-error.visible { display: block; }

/* File upload */
.file-field { position: relative; }
.file-field input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-label {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--green-800);
  background: var(--cream);
  border: 1.5px dashed var(--green-700);
  border-radius: 8px;
  padding: 0.8rem 1.4rem;
  pointer-events: none;
}
.file-field:hover .file-label,
.file-field input:focus-visible ~ .file-label {
  background: #ece5d2;
  box-shadow: 0 0 0 3px rgba(22, 106, 64, 0.18);
}
.file-name {
  margin-left: 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  pointer-events: none;
}

.form-privacy {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.form-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 0.16em; }

.field-consent { margin-top: 0.25rem; }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.55;
  cursor: pointer;
}
.checkbox-label input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; flex: 0 0 auto; accent-color: var(--green-700); }

/* Success state */
.form-success { text-align: center; padding: 2.5rem 1rem; }
.form-success:focus { outline: none; }
.success-check {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--green-800);
  color: var(--light);
  font-size: 1.5rem;
  font-weight: 800;
}
.success-title {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--green-900);
  margin-bottom: 0.6rem;
}
.form-success p:last-child { color: var(--ink-soft); max-width: 28rem; margin-inline: auto; }

/* ============================================================
   7 · Pourquoi KiS
   ============================================================ */
.section-pourquoi { background: var(--cream); }

.pourquoi-statement {
  max-width: 50rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
  border-left: 4px solid var(--gold-500);
  padding-left: clamp(1.25rem, 4vw, 2rem);
}
.pourquoi-statement p {
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--green-900);
  text-wrap: balance;
}
.pourquoi-statement em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-700);
}

.atouts-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 600px) {
  .atouts-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 920px) {
  .atouts-grid { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }
  .atout { grid-column: span 2; }
}

.atout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  position: relative;
}
.atout::before {
  content: "";
  position: absolute;
  top: 0; left: 1.75rem;
  width: 2.5rem; height: 4px;
  background: var(--gold-500);
}
.atout h3 {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--green-900);
  margin-bottom: 0.5rem;
}
.atout p { color: var(--ink-soft); font-size: 0.98rem; }

/* ============================================================
   8 · Footer
   ============================================================ */
.site-footer {
  background: var(--green-1000);
  color: var(--light-soft);
  padding-top: clamp(3rem, 7vw, 4.5rem);
}

.footer-inner {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(216, 179, 90, 0.2);
}
@media (min-width: 700px) {
  .footer-inner { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer-meta { text-align: right; }
}

.logo-footer { width: min(100%, 17rem); }

.footer-slogan {
  margin-top: 0.75rem;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
}

.footer-meta p { margin-bottom: 0.4rem; font-size: 0.95rem; }
.footer-meta p:first-child { font-weight: 700; color: var(--light); }
.footer-meta a { color: inherit; text-decoration-color: rgba(216, 179, 90, 0.65); text-underline-offset: 0.2em; }
.footer-meta a:hover { color: var(--gold-400); }

.legal-page { background: #f7f4ec; color: var(--ink); }
.legal-main { padding-block: clamp(8rem, 13vw, 11rem) 5rem; }
.legal-content { max-width: 48rem; }
.legal-eyebrow { color: var(--gold-700); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; }
.legal-title { color: var(--green-900); font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1; margin: 0.55rem 0 1.2rem; }
.legal-updated { color: var(--ink-soft); margin-bottom: 3rem; }
.legal-content h2 { color: var(--green-900); font-size: 1.25rem; margin: 2.5rem 0 0.75rem; }
.legal-content h3 { color: var(--green-900); font-size: 1rem; margin: 1.5rem 0 0.45rem; }
.legal-content p, .legal-content li { line-height: 1.75; }
.legal-content ul { padding-left: 1.25rem; }
.legal-content a { color: var(--green-800); text-underline-offset: 0.2em; }
.legal-note { border-left: 4px solid var(--gold-500); padding: 1rem 1.2rem; background: #fff; }
.legal-back { display: inline-block; margin-top: 3rem; font-weight: 700; }

.footer-bottom { padding-block: 1.5rem; }
.footer-bottom p { font-size: 0.85rem; color: #9fb3a3; }

/* ============================================================
   Motion — restrained, premium
   ============================================================ */
.reveal-load {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0) * 130ms + 80ms);
}
@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* Scroll reveals only activate when JS confirms IntersectionObserver
   support (html.js-reveal) — content stays visible otherwise. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* No-JS and reduced-motion: everything visible, nothing moves */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-load, .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .btn { transition: none; }
}