/* =========================================================
   Les Volcans Numériques — feuille de style principale
   Palette dérivée du logo : bleu volcan, vert sapin, crème.
   ========================================================= */

/* ---------- 1. Jetons de design ---------- */
:root {
  --navy-900: #16232f;
  --navy-800: #1e3247;
  --navy-700: #2b4560;
  --navy-600: #3d5d7c;
  --navy-200: #b7c6d4;

  --green-700: #145c37;
  --green-600: #1d7346;
  --green-500: #248b55;
  --green-300: #7cc39b;
  --green-100: #e3f0e8;

  /* Accents réservés aux trois piliers. Assombris par rapport aux teintes
     vives d'origine pour rester lisibles sur le crème et le sable. */
  --teal-600: #0e6b78;
  --orange-600: #9c4a08;

  --cream: #f8f5ee;
  --sand: #efe9dc;
  --white: #ffffff;

  --ink: #16232f;
  --ink-soft: #4a5a68;
  --line: rgba(30, 50, 71, .12);

  --font-title: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  --shadow-s: 0 2px 8px rgba(22, 35, 47, .06);
  --shadow-m: 0 12px 32px rgba(22, 35, 47, .10);
  --shadow-l: 0 24px 60px rgba(22, 35, 47, .16);

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 84px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .4em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Marqueur d'information à compléter par l'association */
.todo {
  background: #fff3cd;
  border-bottom: 2px dotted #b98900;
  color: #6b4e00;
  padding: 0 .25em;
  border-radius: 3px;
}

/* ---------- 3. Boutons ---------- */
.btn {
  --btn-bg: var(--green-600);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .85em 1.6em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 92, 55, .28); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .75);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .14); box-shadow: none; }

.btn--dark { --btn-bg: var(--navy-800); }
.btn--dark:hover { box-shadow: 0 10px 24px rgba(30, 50, 71, .3); }

.btn--sm { padding: .6em 1.2em; font-size: .95rem; }

/* Lien fléché */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: gap .25s var(--ease);
}
.arrow-link:hover { gap: .85em; }

/* ---------- 4. En-tête ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.header.is-stuck {
  box-shadow: 0 4px 24px rgba(22, 35, 47, .08);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
  transition: min-height .3s var(--ease);
}
.header.is-stuck .header__inner { min-height: 68px; }

/* Le nom est écrit en HTML plutôt qu'incrusté dans l'image : l'ancienne
   logo_texte.webp portait un aplat blanc opaque (76 % de sa surface) qui
   tranchait sur l'en-tête translucide. Le blanc fait aussi partie du dessin
   de la marque, un détourage par la couleur l'aurait donc troué. */
.header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy-900);
}
.header__logo img {
  height: 52px;
  width: auto;
  transition: height .3s var(--ease);
}
.header.is-stuck .header__logo img { height: 42px; }

.header__logo strong {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.header__logo span { color: var(--green-600); }

/* Sous 420 px, le nom et le bouton de menu se disputent la largeur. */
@media (max-width: 420px) {
  .header__logo { gap: 9px; }
  .header__logo img { height: 42px; }
  .header__logo strong { font-size: .92rem; }
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  font-size: .98rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--navy-800);
  padding: 6px 0;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--green-600);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--green-600); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--green-600); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Bouton burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 28px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 18px; justify-content: center; }
}

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(76vh, 660px);
  padding: calc(var(--header-h) + clamp(44px, 7vw, 88px)) 0 clamp(44px, 7vw, 88px);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(22, 35, 47, .86) 0%, rgba(22, 35, 47, .62) 42%, rgba(22, 35, 47, .18) 72%, rgba(22, 35, 47, .32) 100%),
    linear-gradient(to top, rgba(22, 35, 47, .55), transparent 45%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  color: #fff;
}

/* Élargi pour que le titre en petites capitales, nettement plus
   large qu'un texte en bas-de-casse, tienne sur deux lignes. */
.hero__content { max-width: 50rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.4em;
}
.hero .eyebrow { color: var(--green-300); }
.eyebrow::before {
  content: "";
  width: 32px; height: 2px;
  background: currentColor;
  flex: none;
}

.hero h1 {
  /* Petites capitales. Montserrat n'embarque pas de vraies petites
     capitales : le navigateur les synthétise à partir des majuscules.
     Elles ont besoin d'un peu d'air, d'où l'interlettrage positif qui
     annule le resserrement appliqué aux titres. */
  font-variant-caps: small-caps;
  letter-spacing: .015em;
  font-size: clamp(1.75rem, 4.4vw, 4rem);
  margin-bottom: .35em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
}
/* Seul le mot « numérique » est en vert, au fil de la ligne. */
.hero h1 .accent { color: var(--green-300); }

.hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  max-width: 34rem;
  color: rgba(255, 255, 255, .92);
  margin-bottom: 2em;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Colonne de droite : le sceau, puis le territoire dessous */
.hero__aside {
  display: grid;
  justify-items: center;
  gap: 24px;
}

.hero__place {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: .9rem;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .82);
}

/* Sceau circulaire */
.seal {
  position: relative;
  width: clamp(180px, 20vw, 260px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.seal__ring {
  position: absolute;
  inset: 0;
  animation: seal-spin 56s linear infinite;
}
.seal__ring text {
  font-family: var(--font-body);
  font-size: 6.6px;
  font-weight: 600;
  /* Interlettrage calé pour que la mention fasse exactement le tour
     du cercle (circonférence 245 unités du viewBox). */
  letter-spacing: .635em;
  fill: rgba(255, 255, 255, .9);
  text-transform: uppercase;
}
/* Le texte court sur un cercle de rayon 39 (unités du viewBox) et
   les lettres montent vers l'extérieur jusqu'à ~43,6. Le trait est
   donc placé à 36,5 (inset 13,5%) pour passer sous le texte au lieu
   de le traverser. */
.seal__border {
  position: absolute;
  inset: 13.5%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
}
.seal__logo {
  width: 52%;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, .3));
  opacity: .95;
}
@keyframes seal-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* Le sceau disparaît, mais le territoire reste et s'aligne
     à gauche comme le reste du contenu. */
  .seal { display: none; }
  .hero__aside { justify-items: start; gap: 0; }
}

/* ---------- 6. Sections génériques ---------- */
.section { padding: clamp(64px, 9vw, 118px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--sand { background: var(--sand); }
.section--white { background: var(--white); }

/* Section posée directement sous le hero : le bas de l'image tient déjà lieu
   de respiration en haut, et les colonnes d'étapes se terminent à des hauteurs
   inégales, ce qui creuse le vide en bas. Les deux côtés sont donc resserrés,
   le bas davantage que le haut. */
.section--flush { padding: clamp(36px, 4.6vw, 62px) 0 clamp(32px, 4vw, 54px); }

.section__head {
  max-width: 46rem;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.section__head .eyebrow { color: var(--green-600); justify-content: center; }
.section__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.section__head p { color: var(--ink-soft); font-size: 1.06rem; }

/* ---------- 7. Aiguillage pro / particulier ---------- */
.audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}

.card-aud {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3.6vw, 46px);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card-aud:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }

.card-aud--pro {
  background: linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff;
}
.card-aud--pro::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(124, 195, 155, .16), transparent 68%);
  pointer-events: none;
}
.card-aud--part {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
}

.tag {
  display: inline-block;
  align-self: flex-start;
  padding: .45em 1.1em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  margin-bottom: 1.4em;
}
.card-aud--pro .tag { background: rgba(124, 195, 155, .18); color: var(--green-300); }
.card-aud--part .tag { background: var(--green-100); color: var(--green-700); }

.card-aud h3 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-bottom: .5em; }
.card-aud__intro { margin-bottom: 1.8em; }
.card-aud--pro .card-aud__intro { color: rgba(255, 255, 255, .8); }
.card-aud--part .card-aud__intro { color: var(--ink-soft); }

.points { list-style: none; margin: 0 0 2em; padding: 0; display: grid; gap: 22px; }
.points li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.points .ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  flex: none;
}
.card-aud--pro .ico { background: rgba(255, 255, 255, .1); color: var(--green-300); }
.card-aud--part .ico { background: var(--green-100); color: var(--green-700); }
.points b { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: .15em; }
.points span.txt { font-size: .96rem; line-height: 1.55; }
.card-aud--pro span.txt { color: rgba(255, 255, 255, .76); }
.card-aud--part span.txt { color: var(--ink-soft); }

.card-aud .arrow-link { margin-top: auto; align-self: flex-start; }
.card-aud--pro .arrow-link { color: var(--green-300); }
.card-aud--part .arrow-link { color: var(--green-700); }

/* ---------- 8. Étapes ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(24px, 3vw, 36px);
  position: relative;
}
.step { position: relative; text-align: center; }

.step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  margin: 0 auto 22px;
  background: var(--green-100);
  border-radius: 50%;
  color: var(--green-700);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.step:hover .step__num { transform: translateY(-5px) scale(1.04); background: var(--green-300); }
.step__num::after {
  content: attr(data-num);
  position: absolute;
  right: -2px; bottom: -2px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--navy-800);
  color: #fff;
  font-family: var(--font-title);
  font-size: .85rem;
  font-weight: 700;
  border-radius: 50%;
  border: 3px solid var(--sand);
}
.section--white .step__num::after { border-color: var(--white); }

.step h3 { font-size: 1.08rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .55em; }
.step p { font-size: .95rem; color: var(--ink-soft); }

/* Liaison pointillée entre les étapes */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 46px;
  left: calc(50% + 62px);
  right: calc(-50% + 62px);
  height: 2px;
  background-image: linear-gradient(90deg, var(--green-300) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  opacity: .8;
}
@media (max-width: 700px) { .step:not(:last-child)::before { display: none; } }

/* ---------- 9. Piliers ---------- */
.pillars {
  --icon-size: clamp(58px, 5vw, 68px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}

/* L'apparition au défilement porte sur la grille, pas sur chaque carte :
   la règle .reveal (section 14) déclare un `transition` raccourci qui,
   posée sur .pillar, écraserait la transition de survol ci-dessous. */
.pillar {
  display: flex;
  flex-direction: column;
  background: var(--sand);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* focus-within : le survol doit aussi se déclencher à la navigation clavier,
   sinon la carte reste inerte pour qui n'utilise pas la souris. */
.pillar:hover,
.pillar:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-m); }

/* Deux rôles séparés : __frame découpe l'image (indispensable au zoom du
   survol), __media ne découpe rien pour que la pastille puisse déborder
   sous le cadre sans être coupée en deux. */
.pillar__media { position: relative; }

.pillar__frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
/* Les trois images n'ont pas le même rapport (2,73 / 1,72 / 2,78) :
   le recadrage par object-fit les aligne sur une hauteur commune. */
.pillar__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.pillar:hover .pillar__frame img,
.pillar:focus-within .pillar__frame img { transform: scale(1.06); }

/* Pastille à cheval sur le bas de l'image, comme le sceau du hero */
.pillar__icon {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 2.4vw, 28px);
  bottom: calc(var(--icon-size) / -2);
  width: var(--icon-size);
  height: var(--icon-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pillar-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(22, 35, 47, .22);
  transition: transform .4s var(--ease);
}
.pillar:hover .pillar__icon,
.pillar:focus-within .pillar__icon { transform: scale(1.08) rotate(-6deg); }

.pillar__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: calc(var(--icon-size) / 2 + 22px) clamp(22px, 2.4vw, 30px) clamp(26px, 2.6vw, 32px);
}
.pillar h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--pillar-accent);
  margin-bottom: .6em;
}
.pillar p { color: var(--ink-soft); font-size: .97rem; }
.pillar .arrow-link { margin-top: auto; align-self: flex-start; color: var(--pillar-accent); }

/* Lien dont la cible n'est pas encore arrêtée : trait pointillé pour le
   signaler à la relecture sans dénaturer la carte. */
.arrow-link.is-todo { border-bottom-style: dotted; }

.pillar--obsolescence { --pillar-accent: var(--green-600); }
.pillar--fracture     { --pillar-accent: var(--teal-600); }
.pillar--reparation   { --pillar-accent: var(--orange-600); }

/* ---------- 10. Bandeau association ---------- */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.about h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.about p { color: var(--ink-soft); }
.about .eyebrow { color: var(--green-600); }

.facts { list-style: none; margin: 2em 0 0; padding: 0; display: grid; gap: 14px; }
.facts li { display: flex; align-items: center; gap: 12px; font-size: .98rem; font-weight: 500; }
.facts svg { color: var(--green-600); flex: none; }

.about__media {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  aspect-ratio: 4 / 3;
}
.about__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.about__media:hover img { transform: scale(1.05); }

/* ---------- 11. Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.contact__aside h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.contact__aside p { color: var(--ink-soft); }
.contact__aside .eyebrow { color: var(--green-600); }

.contact__ways { list-style: none; margin: 2em 0 0; padding: 0; display: grid; gap: 18px; }
.contact__ways li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.contact__ways .ico {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--green-100);
  color: var(--green-700);
  border-radius: 50%;
}
.contact__ways b { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.contact__ways a, .contact__ways span.val { font-size: 1.05rem; font-weight: 600; text-decoration: none; color: var(--navy-800); }

.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(24px, 3.4vw, 40px);
  box-shadow: var(--shadow-s);
}
/* Formulaire seul dans sa section, sans colonne latérale à côté : sur la page
   Particuliers il suivrait sinon toute la largeur du conteneur, illisible.
   Même largeur que .section__head, pour rester dans l'axe du titre. */
.form--solo {
  max-width: 46rem;
  margin: clamp(40px, 5vw, 64px) auto 0;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: .88rem; font-weight: 600; color: var(--navy-800); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .8em 1em;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--green-500);
  background: var(--white);
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 139, 85, .14);
}

/* Choix pro / particulier en segments */
.segmented { display: flex; gap: 10px; flex-wrap: wrap; }
/* Radios masqués : dimensions forcées à 1px, sinon la règle
   « .field input { width: 100% } » les fait déborder de la page. */
.segmented input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.segmented label {
  padding: .65em 1.3em;
  font-size: .95rem;
  font-weight: 600;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.segmented input:checked + label {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}
.segmented input:focus-visible + label { outline: 3px solid var(--green-500); outline-offset: 2px; }

.form__note { font-size: .85rem; color: var(--ink-soft); margin-top: 14px; }
.form__status {
  margin-top: 16px;
  padding: .8em 1em;
  font-size: .92rem;
  border-radius: var(--radius-s);
  background: var(--green-100);
  color: var(--green-700);
  display: none;
}
.form__status.is-visible { display: block; }


/* ---------- 12. Bandeau chiffres ---------- */
.stats {
  /* Au-dessus du paysage du pied de page, qui remonte jusqu'ici. */
  position: relative;
  z-index: 1;
  background: var(--navy-900);
  border-radius: var(--radius-l);
  padding: clamp(28px, 3.4vw, 44px) clamp(22px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  box-shadow: var(--shadow-m);
}

.stat {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
}
/* Filets de séparation, comme sur le modèle. Portés par l'élément lui-même
   plutôt que par un pseudo-élément : ils disparaissent proprement dès que
   la grille se réorganise sur les petits écrans. */
.stat + .stat {
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding-left: clamp(20px, 2.6vw, 34px);
}

.stat__icon {
  flex: 0 0 auto;
  color: #fff;
  opacity: .9;
}

.stat__num {
  display: block;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--green-300);
  margin-bottom: .18em;
}
.stat__label {
  display: block;
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
  line-height: 1.35;
}

@media (max-width: 940px) {
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: clamp(26px, 4vw, 36px); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 540px) {
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; padding-left: 0; }
}

/* ---------- 13. Pied de page ---------- */
.footer {
  /* De combien le paysage remonte au-dessus du pied de page, pour rejoindre
     le bandeau de chiffres et donner l'impression qu'il en fait partie. */
  --hills-rise: clamp(56px, 7vw, 100px);
  position: relative;
  background: var(--navy-900);
  color: rgba(255, 255, 255, .8);
  /* Doit rester supérieur à la hauteur des collines ci-dessous,
     sinon le texte du footer se superpose au paysage clair. */
  padding-top: clamp(170px, 21vw, 310px);
  /* Pas de découpe ici : les collines débordent volontairement vers le haut. */
}
.footer__hills {
  position: absolute;
  inset: calc(var(--hills-rise) * -1) 0 auto 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
}
/* Ancrage par le haut : les crêtes et les sapins ne sont plus tranchés net.
   C'est désormais le bas de l'image qui est rogné, et il disparaît de toute
   façon sous le dégradé vers le navy. */
.footer__hills img {
  width: 100%;
  height: calc(clamp(130px, 17vw, 250px) + var(--hills-rise));
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Fondu haut : le ciel de l'image (#fcf4ec) frôle le crème du site sans lui
   être identique. Ce dégradé dissout la limite au lieu de laisser une arête. */
.footer__hills::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--hills-rise) + 40px);
  background: linear-gradient(to bottom, var(--cream), rgba(248, 245, 238, 0));
}
.footer__hills::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 62%;
  background: linear-gradient(to bottom, transparent, var(--navy-900) 88%);
}

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 48px;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer__brand img { height: 52px; width: auto; }
.footer__brand strong {
  font-family: var(--font-title);
  font-size: 1.15rem;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -.01em;
}
.footer__brand span { display: block; color: var(--green-300); font-weight: 600; }
.footer p { font-size: .95rem; color: rgba(255, 255, 255, .68); max-width: 30rem; }

.footer h3 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.2em;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { color: rgba(255, 255, 255, .74); text-decoration: none; font-size: .95rem; transition: color .2s var(--ease); }
.footer a:hover { color: var(--green-300); }

.footer__bar {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 22px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: .86rem;
  color: rgba(255, 255, 255, .55);
}

/* ---------- 14. Gabarit des pages secondaires ---------- */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(52px, 7vw, 90px)) 0 clamp(52px, 7vw, 90px);
  background: linear-gradient(155deg, var(--navy-800), var(--navy-900));
  color: #fff;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -6%; top: -30%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(124, 195, 155, .16), transparent 68%);
  pointer-events: none;
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: .3em; }
.page-hero .eyebrow { color: var(--green-300); }
.page-hero p { color: rgba(255, 255, 255, .82); max-width: 42rem; font-size: 1.06rem; }

.breadcrumb { font-size: .85rem; color: rgba(255, 255, 255, .6); margin-bottom: 1.6em; }
.breadcrumb a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-300); }

.placeholder-note {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 48px);
  background: var(--white);
  border: 1px dashed var(--navy-200);
  border-radius: var(--radius-l);
  text-align: center;
}
.placeholder-note .ico {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  background: var(--green-100);
  color: var(--green-700);
  border-radius: 50%;
}
.placeholder-note h2 { font-size: 1.4rem; }
.placeholder-note p { color: var(--ink-soft); }

/* ---------- 15. Prestations particuliers (menu vertical + rubriques) ----------
   Le menu n'est qu'un jeu d'ancres internes : sans JavaScript les liens
   fonctionnent toujours, seul le surlignage de la rubrique en cours de
   lecture disparaît.
   ---------------------------------------------------------------------- */
.presta {
  display: grid;
  grid-template-columns: minmax(190px, 244px) 1fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

/* min-width:0 sur les deux colonnes : sans cela, le menu devenu défilable
   horizontalement sous 860 px impose sa largeur min-content à la grille,
   et c'est toute la page qui déborde vers la droite. */
.presta__nav { position: sticky; top: calc(var(--header-h) + 22px); min-width: 0; }
.presta__body { min-width: 0; }
.presta__nav > p {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 1.1em;
  padding-left: 19px;
}
.presta__nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.presta__link {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: .7em 1em;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -.01em;
  color: var(--navy-700);
  text-decoration: none;
  border-left: 3px solid var(--line);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.presta__link i { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--navy-200); }
.presta__link:hover { color: var(--green-700); background: var(--green-100); }
.presta__link.is-active {
  color: var(--green-700);
  background: var(--green-100);
  border-left-color: var(--green-600);
}
.presta__link.is-active i { color: var(--green-600); }

/* html porte déjà scroll-padding-top : header + 16px. Sur mobile, le menu
   devenu horizontal ajoute sa propre hauteur, d'où la marge supplémentaire
   dans la requête média plus bas. */
.presta__item { scroll-margin-top: 0; }
.presta__item + .presta__item {
  margin-top: clamp(48px, 6vw, 86px);
  padding-top: clamp(44px, 5vw, 74px);
  border-top: 1px solid var(--line);
}
.presta__item h2 { font-size: clamp(1.5rem, 2.9vw, 2.15rem); }
.presta__item h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy-800);
  margin: 2em 0 .8em;
}
.presta__item p { color: var(--ink-soft); }

.presta__kicker {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-600);
  margin-bottom: .8em;
}

/* Listes à puces cochées, communes aux deux pages */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.checklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: .97rem;
  color: var(--ink-soft);
}
.checklist svg { color: var(--green-600); margin-top: 5px; flex: none; }
.checklist--no svg { color: var(--orange-600); }

/* Encadré « cas concret » */
.case {
  margin: 1.8em 0 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-600);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  box-shadow: var(--shadow-s);
}
.case b {
  display: block;
  font-family: var(--font-title);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: .55em;
}
.case p { font-size: .97rem; color: var(--ink-soft); }

/* Emplacement réservé à une illustration, à remplacer par une <img> */
.figure-todo { margin: 0 0 clamp(24px, 3vw, 34px); }
.figure-todo .box {
  display: grid;
  place-items: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  padding: 24px;
  text-align: center;
  color: var(--navy-600);
  background:
    repeating-linear-gradient(-45deg, rgba(183, 198, 212, .16) 0 10px, transparent 10px 22px),
    var(--white);
  border: 2px dashed var(--navy-200);
  border-radius: var(--radius-m);
}
.figure-todo .box span { font-size: .9rem; font-weight: 600; max-width: 28rem; }
.figure-todo figcaption { margin-top: 10px; font-size: .83rem; color: var(--ink-soft); }

@media (max-width: 860px) {
  .presta { grid-template-columns: 1fr; gap: 24px; }
  .presta__nav {
    top: calc(var(--header-h) - 14px);
    z-index: 20;
    margin-inline: calc(var(--gutter) * -1);
    padding: 12px var(--gutter);
    background: var(--cream);
    border-bottom: 1px solid var(--line);
  }
  .presta__nav > p { display: none; }
  .presta__nav ol {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .presta__link {
    border-left: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .5em 1.1em;
    font-size: .95rem;
    white-space: nowrap;
  }
  .presta__link.is-active { border-color: var(--green-600); }
  .presta__item { scroll-margin-top: 62px; }
}

/* ---------- 16. Mots-clés dépliants (page Professionnels) ----------
   Balises <details> natives : le dépliage marche sans JavaScript,
   au clavier, et la recherche du navigateur ouvre le bon bloc.
   ------------------------------------------------------------------ */
.kw-list { display: grid; gap: 14px; max-width: 62rem; margin-inline: auto; }

.kw {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.kw[open] { border-color: var(--green-300); box-shadow: var(--shadow-m); }

.kw > summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(15px, 2.1vw, 22px) clamp(18px, 3vw, 30px);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: -.02em;
  color: var(--navy-900);
  transition: color .25s var(--ease);
}
.kw > summary::-webkit-details-marker { display: none; }
.kw > summary::marker { content: ""; }
.kw > summary:hover { color: var(--green-700); }

.kw__sign {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.kw[open] .kw__sign { transform: rotate(45deg); background: var(--green-600); color: #fff; }

.kw__hint {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.kw__hint::after { content: "Déplier"; }
.kw[open] .kw__hint { color: var(--green-700); }
.kw[open] .kw__hint::after { content: "Replier"; }
@media (max-width: 620px) { .kw__hint { display: none; } }

.kw__body {
  padding: 2px clamp(18px, 3vw, 30px) clamp(20px, 2.6vw, 30px);
  color: var(--ink-soft);
  font-size: .99rem;
}
.kw__body h3 {
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy-800);
  margin: 1.7em 0 .7em;
}
.kw[open] > .kw__body { animation: kw-in .4s var(--ease) both; }
@keyframes kw-in { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 640px) {
  .kw__body { padding-left: calc(clamp(18px, 3vw, 30px) + 56px); }
}

/* ---------- 17. Animations d'apparition ----------
   Le masquage initial n'est appliqué que si la classe « js »
   a été posée sur <html>. Sans JavaScript, tout reste visible.
   -------------------------------------------------------- */
.reveal {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__media { transform: none !important; }
}