/* =========================================================
   Nadia Manteau — feuille de style unique
   Tout le site utilise ce seul fichier.

   Direction artistique : un seul vert, décliné du lavis le plus dilué au
   vert profond, posé en dégradés section après section pour qu'il ne reste
   nulle part de blanc franc. Angles arrondis, ombres douces.
   Pour changer une couleur, une taille ou une marge :
   tout se règle dans le bloc « :root » ci-dessous.
   ========================================================= */

:root {

  /* ---------- Une seule couleur, du plus pâle au plus profond ----------
     Tout le site tient sur ce vert. Ce qui fait le rythme, ce n'est pas
     un changement de teinte, c'est un changement de densité : le lavis se
     resserre ou se relâche d'une section à l'autre, et les blocs appuyés
     descendent jusqu'au vert profond. */

  --brume:        #F7FAF5;   /* fond général — blanc à peine verdi */
  --brume-2:      #EDF4E9;   /* fond des encarts clairs */
  --brume-3:      #DAE7D4;   /* filets, bordures */

  --sauge:        #A8C6A1;   /* le vert pastel — décoratif */
  --sauge-clair:  #CBE0C4;
  --sauge-pale:   #E2EEDD;
  --sauge-profond:#40603D;   /* le même vert, assez foncé pour être lu */

  /* ---------- Texte ---------- */
  --foret:        #2E4137;   /* texte principal — un vert si sombre qu'il lit noir */
  --foret-doux:   #4E635A;   /* texte secondaire — tient sur le lavis le plus dense */

  /* Densité courante d'une section : étiquettes, échos de photo et petits
     repères la suivent. Redéfinie par .teinte-claire / -douce / -soutenue. */
  --voix:         var(--sauge);
  --voix-clair:   var(--sauge-clair);
  --voix-pale:    var(--sauge-pale);
  --voix-profond: var(--sauge-profond);
  --fond-carte:   var(--deg-carte);

  /* ---------- Fonds appuyés ---------- */
  --nuit:         #2F473C;
  --nuit-2:       #3F5C4D;
  --sur-nuit:     #EAF2E7;   /* texte sur fond profond */
  --sur-nuit-doux:#BDD1C3;
  --sur-nuit-tres-doux:#C2D5C8;

  /* ---------- Dégradés ---------- */
  --deg-profond:  linear-gradient(152deg, #47665A 0%, #33493D 52%, #2A4035 100%);
  --deg-tendre:   linear-gradient(158deg, #E9F3E4 0%, #F2F8EF 32%, #DDEDD7 68%, #E9F3E4 100%);
  --deg-carte:    linear-gradient(160deg, #F3F8F0 0%, #E9F3E5 100%);
  --deg-carte-dense: linear-gradient(160deg, #EAF4E5 0%, #DCEBD6 100%);
  --deg-bouton:   linear-gradient(135deg, #4C6F48 0%, #38534A 100%);

  /* Les filets ne sont pas d'un vert plat : ils se densifient au milieu
     et se dissipent aux deux bouts. */
  --deg-filet:    linear-gradient(90deg,
                    transparent, var(--sauge-clair) 12%, var(--sauge) 50%,
                    var(--sauge-clair) 84%, transparent);
  /* le même filet, interrompu au milieu pour laisser passer le monogramme */
  --deg-filet-coupe: linear-gradient(90deg,
                       transparent, var(--sauge-clair) 12%, var(--sauge) 42%,
                       transparent 46.5%, transparent 53.5%,
                       var(--sauge) 58%, var(--sauge-clair) 88%, transparent);

  /* ---------- Ombres ---------- */
  --ombre-douce:  0 1px 2px rgba(46, 65, 55, 0.04), 0 12px 30px -22px rgba(46, 65, 55, 0.30);
  --ombre-levee:  0 2px 4px rgba(46, 65, 55, 0.06), 0 22px 48px -26px rgba(46, 65, 55, 0.40);

  /* ---------- Typographie ---------- */
  --serif: "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------- Rythme ---------- */
  --page:     min(1180px, 100% - 2.5rem);
  --texte:    min(680px, 100%);
  --section:  clamp(4.5rem, 10vw, 8rem);
  --radius:   16px;
  --radius-s: 10px;
  --radius-l: 28px;

}

/* ---------- Réglages de base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  color: var(--foret);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.98rem + 0.38vw, 1.1875rem);
  line-height: 1.65;
  font-weight: 350;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Le fond n'est jamais blanc : un dégradé vertical très lent traverse
     toute la page, du vert le plus dilué au vert franc et retour, plusieurs
     fois. Il défile avec la page — pas de « background-attachment: fixed »,
     qui se repeint mal et ne tient pas sur iOS. */
  background-color: var(--brume);
  background-image: linear-gradient(
    180deg,
    #E5F0E0 0%,
    #F1F7EE 14%,
    #E7F1E2 30%,
    #F3F8F0 44%,
    #E4EFDE 60%,
    #F1F7ED 76%,
    #E7F1E1 90%,
    #E1EDDB 100%
  );
  background-repeat: no-repeat;
}

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

a { color: inherit; }

::selection { background: var(--sauge-clair); color: var(--foret); }

/* ---------- Titres ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.65rem + 4.4vw, 4.65rem); }
h2 { font-size: clamp(2.05rem, 1.45rem + 2.55vw, 3.15rem); }
h3 { font-size: clamp(1.35rem, 1.18rem + 0.72vw, 1.68rem); line-height: 1.22; }

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

/* Étiquette en petites capitales, au-dessus des titres */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--voix-profond);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  max-width: 3.5rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: 0.6;
}

.lede {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.45;
  color: var(--foret);
  font-weight: 350;
  letter-spacing: -0.015em;
}

.chapeau {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.12rem + 1.15vw, 1.95rem);
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: var(--voix-profond);
}

.muted { color: var(--foret-doux); }
.small { font-size: 0.9375rem; line-height: 1.6; }

/* ---------- Structure ---------- */

.wrap { width: var(--page); margin-inline: auto; }
.narrow { width: var(--texte); }

section { padding-block: var(--section); position: relative; }

/* ---------- Les lavis de section ----------
   Chaque section porte un voile de vert, plus ou moins dense. Le voile
   s'éteint en haut et en bas, si bien qu'on passe d'une section à la
   suivante par un dégradé et jamais par du blanc. Trois densités, qui
   alternent : c'est ce qui donne le rythme, puisque la teinte, elle,
   ne change jamais.

   « teinte-* » sur une section : la densité ET le lavis de fond.
   « t-soutenue » sur une carte : la densité seulement — pour faire
   alterner deux cartes côte à côte à l'intérieur d'une même section. */

.teinte-claire, .teinte-douce, .teinte-soutenue {
  background-repeat: no-repeat;
}

.teinte-claire {
  background-image:
    radial-gradient(46rem 28rem at 84% 8%, rgba(168, 198, 161, 0.20), transparent 68%),
    linear-gradient(180deg, transparent, rgba(210, 232, 204, 0.42) 13%, rgba(210, 232, 204, 0.42) 87%, transparent);
}
.teinte-douce {
  background-image:
    radial-gradient(46rem 28rem at 12% 12%, rgba(168, 198, 161, 0.24), transparent 68%),
    linear-gradient(180deg, transparent, rgba(203, 228, 196, 0.55) 13%, rgba(203, 228, 196, 0.55) 87%, transparent);
}
/* la plus dense : calée pour que le texte secondaire y reste à 4,5:1 */
.teinte-soutenue {
  background-image:
    radial-gradient(46rem 28rem at 86% 14%, rgba(179, 207, 172, 0.26), transparent 68%),
    linear-gradient(180deg, transparent, rgba(199, 224, 193, 0.58) 13%, rgba(199, 224, 193, 0.58) 87%, transparent);
}
.teinte-soutenue, .t-soutenue { --fond-carte: var(--deg-carte-dense); }
.t-claire { --fond-carte: var(--deg-carte); }

/* Le filet de séparation porte le monogramme en son milieu.
   Le logo est un PNG noir sur fond transparent : on ne l'affiche pas
   tel quel, on se sert de sa transparence comme d'un pochoir (mask),
   ce qui permet de le colorer à la couleur qu'on veut. */
.rule {
  border: 0;
  height: 36px;
  margin: 0;
  position: relative;
  background-image: var(--deg-filet-coupe);
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
}
.rule::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 42px; height: 42px;
  transform: translate(-50%, -50%);
  background-color: #93BA8B;
  -webkit-mask: url("../img/logo-240.png") center / contain no-repeat;
          mask: url("../img/logo-240.png") center / contain no-repeat;
}

/* Filet de sécurité : si un navigateur ne sait pas découper au pochoir,
   on retire les monogrammes plutôt que d'afficher des carrés verts. */
@supports not ((-webkit-mask-image: url("../img/logo-240.png")) or (mask-image: url("../img/logo-240.png"))) {
  .rule { height: 1px; background-image: var(--deg-filet); }
  .rule::after,
  .choeur::after,
  .sombre::after,
  .site-footer::before { display: none; }
}

/* Lien d'évitement clavier */
.skip {
  position: absolute; left: -9999px;
  background: var(--nuit); color: var(--sur-nuit);
  padding: 0.75rem 1.25rem; z-index: 100;
  border-radius: var(--radius-s);
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--voix-profond);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* ---------- En-tête ---------- */

.site-header {
  /* un vert dilué, qui se resserre vers la droite */
  background:
    linear-gradient(102deg,
      rgba(242, 248, 239, 0.92) 0%,
      rgba(233, 243, 228, 0.90) 45%,
      rgba(222, 237, 216, 0.92) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 50;
}
/* le filet du bas reprend le dégradé du vert pâle au vert franc */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--deg-filet);
  opacity: 0.75;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  line-height: 1;
}
.wordmark img {
  width: 48px; height: 48px;
  flex: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.wordmark:hover img { transform: rotate(-12deg); }
.wordmark > span {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.wordmark em {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--foret-doux);
  margin-top: 0.4rem;
}
.site-footer .wordmark img { width: 52px; height: 52px; }
.site-footer .wordmark em { color: var(--sur-nuit-tres-doux); }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.75rem; }
.site-nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--foret-doux);
  padding-block: 0.15rem;
  transition: color 0.2s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--voix-profond), var(--voix));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav a:hover { color: var(--foret); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--foret); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Sur téléphone, les trois liens tiennent sur une seule ligne sous le nom. */
@media (max-width: 600px) {
  .site-header .wrap { padding-block: 0.85rem; }
  .site-nav {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.35rem;
  }
  .site-nav a { font-size: 0.8125rem; }
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.9rem 1.7rem;
  border-radius: 100px;
  border: 1px solid transparent;
  background-image: var(--deg-bouton);
  color: var(--sur-nuit);
  box-shadow: var(--ombre-douce);
  transition: box-shadow 0.25s, transform 0.25s, filter 0.25s, color 0.2s, background-color 0.2s, border-color 0.2s;
}
.btn:hover {
  filter: saturate(1.05) brightness(1.08);
  transform: translateY(-2px);
  box-shadow: var(--ombre-levee);
}
.btn::after { content: "→"; font-size: 1.05em; line-height: 1; transition: transform 0.25s; }
.btn:hover::after { transform: translateX(4px); }

.btn-ghost {
  background-image: none;
  background-color: rgba(255, 255, 255, 0.55);
  color: var(--voix-profond);
  border-color: var(--voix);
  box-shadow: none;
}
.btn-ghost:hover {
  background-color: #fff;
  color: var(--foret);
  border-color: var(--voix-profond);
  filter: none;
}

.btn-light {
  background-image: none;
  background-color: var(--brume);
  color: #2A3F34;
  border-color: var(--brume);
}
.btn-light:hover { background-color: #fff; color: #2A3F34; filter: none; }

/* Lien texte souligné */
.lien {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 450;
  color: var(--voix-profond);
  text-decoration: none;
  border-bottom: 2px solid var(--voix);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.lien:hover { color: var(--foret); border-bottom-color: var(--voix-profond); }
.lien::after { content: "→"; transition: transform 0.2s; }
.lien:hover::after { transform: translateX(3px); }

/* ---------- Bandeau d'ouverture ---------- */

/* Un halo vert, très large et très pâle, sur tout le premier écran.
   Il est posé directement sur la section : pas de pseudo-élément en
   z-index négatif, qui se compose mal dans certains navigateurs. */
.hero {
  padding-block: clamp(3rem, 7vw, 6rem) var(--section);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

/* La photo d'ouverture : un rectangle doublé d'un écho vert décalé —
   comme une impression en deux passages, légèrement désalignés —
   et signée d'un médaillon au monogramme.
   La forme est dans « --forme » pour que l'écho la reprenne exactement. */
.hero-figure {
  position: relative;
  margin: 0;
  --forme: var(--radius-l);
}
.hero-figure .media-cadre { box-shadow: var(--ombre-levee); }
.hero-figure img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--voix-pale);
}
/* l'écho */
.hero-figure::before {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border-radius: var(--forme);
  background: linear-gradient(150deg, var(--voix), var(--voix-pale));
  opacity: 0.6;
  pointer-events: none;
}
/* le médaillon, à cheval sur le bas de la photo */
.hero-figure::after {
  content: "";
  position: absolute;
  left: -1.6rem;
  bottom: 2.75rem;
  z-index: 2;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--brume) url("../img/logo-240.png") center / 60px 60px no-repeat;
  box-shadow: 0 0 0 1px rgba(218, 231, 212, 0.9), var(--ombre-douce);
  pointer-events: none;
}

.hero h1 { margin-bottom: 1rem; }

@media (min-width: 800px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
  .hero-figure { order: 2; }
  .hero-figure img { max-height: 660px; }
}

@media (max-width: 560px) {
  .hero-figure::after { width: 68px; height: 68px; background-size: 48px 48px; left: -0.75rem; }
}

/* ---------- Les deux chemins ---------- */

.chemins {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 760px) {
  .chemins { grid-template-columns: 1fr 1fr; }
}

.chemin {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-l);
  border: 1px solid rgba(218, 231, 212, 0.9);
  background-image: var(--fond-carte);
  box-shadow: var(--ombre-douce);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}
.chemin:hover { transform: translateY(-3px); box-shadow: var(--ombre-levee); }
.chemin h3 { margin-bottom: 0.75rem; }
.chemin p { flex: 1; color: var(--foret-doux); }
.chemin .btn { margin-top: 1.75rem; align-self: flex-start; }


/* ---------- Bloc texte + image ---------- */

.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo-inverse .duo-media { order: -1; }
}

/* Les photos sont des rectangles aux angles arrondis, comme les cartes.
   Chacune est doublée d'un écho vert décalé, qui bascule d'un bloc à
   l'autre : à droite, puis à gauche, puis à droite. */
.duo-media {
  position: relative;
  --forme: var(--radius-l);
  --decalage: 1.05rem -1.05rem -1.05rem 1.05rem;
}
.duo-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--voix-pale);
}
.duo-media.portrait img { aspect-ratio: 2 / 3; }
.duo-media::before {
  content: "";
  position: absolute;
  inset: var(--decalage);
  border-radius: var(--forme);
  background: linear-gradient(150deg, var(--voix), var(--voix-pale));
  opacity: 0.55;
  pointer-events: none;
}
.duo-inverse .duo-media { --decalage: 1.05rem 1.05rem -1.05rem -1.05rem; }

/* Bande photo pleine largeur */
.bande-media {
  position: relative;
  --forme: var(--radius-l);
}
.bande-media img { background: var(--voix-pale); }

/* ---------- Le cadre des photos ----------
   Le cadre porte la forme découpée et l'ombre ; au survol, il se soulève
   de quelques pixels pendant que la photo, elle, avance à l'intérieur.
   Les photos ne sont pas cliquables : le cadre est un simple conteneur. */
.media-cadre {
  display: block;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--forme);
  box-shadow: var(--ombre-douce);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;
}
.media-cadre img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.media-cadre:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-levee);
}
/* Le sélecteur long est nécessaire : il doit l'emporter sur la règle
   d'apparition, qui remet « transform: none » sur les photos une fois
   qu'elles sont entrées à l'écran. */
.js-anim.prete .reveal.vu .media-cadre:hover .anim-img,
.media-cadre:hover img {
  transform: scale(1.055);
}

@media (prefers-reduced-motion: reduce) {
  .media-cadre, .media-cadre img { transition: none; }
  .media-cadre:hover { transform: none; }
  .js-anim.prete .reveal.vu .media-cadre:hover .anim-img,
  .media-cadre:hover img { transform: none; }
}

/* ---------- Le Chœur ---------- */

.choeur {
  background-image:
    radial-gradient(40rem 28rem at 12% 8%, rgba(168, 198, 161, 0.42), transparent 65%),
    var(--deg-tendre);
  background-repeat: no-repeat;
  color: var(--foret);
  position: relative;
  overflow: hidden;
}
/* le monogramme en filigrane, très grand, débordant du bord droit */
.choeur::after {
  content: "";
  position: absolute;
  right: -9rem; bottom: -8.5rem;
  width: 28rem; height: 28rem;
  z-index: 0;
  opacity: 0.22;
  pointer-events: none;
  background-color: var(--voix);
  -webkit-mask: url("../img/logo-240.png") center / contain no-repeat;
          mask: url("../img/logo-240.png") center / contain no-repeat;
}
.choeur > * { position: relative; z-index: 1; }
.choeur h2 { margin-bottom: 0.15em; }
.choeur .sous {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-style: italic;
  color: var(--voix-profond);
  margin: 0 0 1.5rem;
}
.choeur p { color: var(--foret-doux); }
.choeur .eyebrow { color: var(--voix-profond); }
.choeur .media-cadre { box-shadow: var(--ombre-levee); }
.choeur .btn-light {
  background-image: var(--deg-bouton);
  color: var(--sur-nuit);
  border-color: transparent;
  box-shadow: var(--ombre-douce);
}
.choeur .btn-light:hover {
  filter: saturate(1.05) brightness(1.08);
  box-shadow: var(--ombre-levee);
}

/* ---------- Listes ---------- */

.liste-nue { list-style: none; margin: 0; padding: 0; }

.principes { counter-reset: p; }
.principes > li {
  counter-increment: p;
  padding: 1.75rem 0;
  border-top: 1px solid var(--brume-3);
  display: grid;
  gap: 0.35rem 1.5rem;
}
.principes > li:last-child { border-bottom: 1px solid var(--brume-3); }
.principes > li::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--voix-profond);
  letter-spacing: 0.05em;
}
@media (min-width: 720px) {
  .principes > li { grid-template-columns: 3.5rem 1fr; }
  .principes > li::before { grid-row: span 2; padding-top: 0.35rem; }
}
.principes h3 { margin-bottom: 0.4rem; }
.principes p { color: var(--foret-doux); }

/* Listes à filets (certifications, limites) */
.limites li {
  padding: 0.85rem 0 0.85rem 1.75rem;
  border-bottom: 1px solid var(--brume-3);
  position: relative;
  color: var(--foret-doux);
}
.limites li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--voix-profond);
}
.limites li:first-child { border-top: 1px solid var(--brume-3); }

/* ---------- Les dispositifs ---------- */

.famille { margin-top: 3.5rem; }
.famille > h3 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--voix-profond);
  padding-bottom: 0.85rem;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--voix-profond), var(--voix) 45%, transparent) 1;
  margin-bottom: 0;
}

.dispositif {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--brume-3);
  display: grid;
  gap: 0.5rem 2.5rem;
  transition: background 0.3s;
}
@media (min-width: 820px) {
  .dispositif { grid-template-columns: 17rem 1fr; align-items: start; }
}
.dispositif h4 {
  font-size: 1.25rem;
  margin: 0;
  letter-spacing: -0.015em;
}
.dispositif .formats {
  font-size: 0.875rem;
  color: var(--voix-profond);
  letter-spacing: 0.01em;
  margin: 0.4rem 0 0;
}
.dispositif p:not(.formats) { color: var(--foret-doux); margin: 0; }
.dispositif .reserve {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--foret-doux);
  padding: 0.6rem 0 0.6rem 0.9rem;
  border-left: 3px solid var(--voix);
  background: linear-gradient(90deg, rgba(226, 238, 221, 0.65), transparent 70%);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

/* ---------- Encart appuyé ---------- */

.encart {
  background-image: var(--fond-carte);
  border: 1px solid rgba(218, 231, 212, 0.9);
  border-radius: var(--radius-l);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--ombre-douce);
}
/* ---------- Deux colonnes de texte ---------- */

.colonnes { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .colonnes { grid-template-columns: 1fr 1fr; } }

.carte {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(218, 231, 212, 0.9);
  border-radius: var(--radius-l);
  background-image: var(--fond-carte);
  box-shadow: var(--ombre-douce);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-levee); }
.carte .num {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--voix-profond);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.85rem;
}
.carte h3 { margin-bottom: 0.75rem; }
.carte p { color: var(--foret-doux); }

/* ---------- Récit (Qui je suis) ---------- */

.recit > .temps {
  display: grid;
  gap: 0.5rem 3rem;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--brume-3);
}
@media (min-width: 860px) {
  .recit > .temps { grid-template-columns: 14rem 1fr; }
}
.temps > h3 {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--voix-profond);
  margin: 0.4rem 0 0;
  align-self: start;
}
.temps .corps { max-width: 42rem; }

/* ---------- Publics ---------- */

.publics li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--brume-3);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.publics li:first-child { border-top: 1px solid var(--brume-3); }
.publics li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--voix), var(--voix-profond));
  transform: translateY(-2px);
}

/* ---------- Contact ---------- */

.coordonnees {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  font-family: var(--serif);
  font-size: clamp(1.22rem, 1rem + 0.92vw, 1.65rem);
  letter-spacing: -0.012em;
  margin-top: 1.75rem;
}
.coordonnees a {
  text-decoration: none;
  border-bottom: 2px solid var(--voix);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.coordonnees a:hover { border-bottom-color: var(--voix-profond); color: var(--voix-profond); }

/* ---------- Le rectangle vert profond ----------
   Le même modificateur pour une carte, un chemin ou un encart : en
   descendant la page, les rectangles alternent clair / foncé, et dans
   une rangée de deux, les deux sont opposés. */

.sombre {
  background-image: var(--deg-profond);
  border-color: transparent;
  color: var(--sur-nuit);
  position: relative;
  overflow: hidden;
}
/* le monogramme en filigrane, dans l'angle bas droit */
.sombre::after {
  content: "";
  position: absolute;
  right: -3.5rem; bottom: -4.5rem;
  width: 17rem; height: 17rem;
  opacity: 0.08;
  pointer-events: none;
  background-color: var(--sur-nuit);
  -webkit-mask: url("../img/logo-creme-240.png") center / contain no-repeat;
          mask: url("../img/logo-creme-240.png") center / contain no-repeat;
}
.sombre > * { position: relative; z-index: 1; }
.sombre p, .sombre li { color: var(--sur-nuit-doux); }
.sombre .eyebrow { color: var(--sauge-clair); }
.sombre .chapeau { color: var(--sauge-clair); }
.sombre h2, .sombre h3, .sombre h4 { color: var(--sur-nuit); }
.sombre .num { color: var(--sauge-clair); }
.sombre .coordonnees a { border-bottom-color: rgba(234, 242, 231, 0.45); }
.sombre .coordonnees a:hover { color: var(--sur-nuit); border-bottom-color: var(--sur-nuit); }
.sombre .btn {
  background-image: none;
  background-color: var(--sur-nuit);
  color: #2A3F34;
  border-color: var(--sur-nuit);
}
.sombre .btn:hover { background-color: #fff; color: #2A3F34; filter: none; }

/* ---------- Pied de page ---------- */

.site-footer {
  background-image: var(--deg-profond);
  color: var(--sur-nuit-doux);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  font-size: 0.9375rem;
  position: relative;
  overflow: hidden;
}
/* le monogramme en filigrane, à peine visible, sur le bord droit */
.site-footer::before {
  content: "";
  position: absolute;
  right: -5rem; top: 50%;
  transform: translateY(-50%);
  width: 24rem; height: 24rem;
  opacity: 0.07;
  pointer-events: none;
  background-color: var(--sur-nuit);
  -webkit-mask: url("../img/logo-creme-240.png") center / contain no-repeat;
          mask: url("../img/logo-creme-240.png") center / contain no-repeat;
}
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer .wordmark { color: var(--sur-nuit); }
.site-footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(234, 242, 231, 0.16);
}
@media (min-width: 720px) {
  .site-footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
.site-footer h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--voix-clair);
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer a { text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--sur-nuit); }
.site-footer .bas {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--sur-nuit-tres-doux);
}

/* ---------- Page mentions légales ---------- */

.legal { padding-block: clamp(3rem, 6vw, 5rem); }
.legal h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--brume-3);
}
.legal h2:first-of-type { margin-top: 2rem; }
.legal p, .legal li { color: var(--foret-doux); }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.5rem; }

/* Champ à compléter avant mise en ligne */
.acompleter {
  background: linear-gradient(135deg, #DCEBD6, #EAF4E5);
  border: 1px dashed var(--sauge-profond);
  color: var(--sauge-profond);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-s);
  font-size: 0.94em;
  font-weight: 450;
}

/* ---------- Animations à l'apparition ----------
   Trois états, dans cet ordre :
   « js-anim »  posé avant le premier affichage : les blocs animés sont masqués,
                donc aucun scintillement au chargement ;
   « prete »    posé par js/site.js une fois les éléments préparés (ou d'office au
                bout de 2,5 s si le script n'a pas pu se charger : le site reste lisible) ;
   « vu »       posé bloc par bloc quand on arrive dessus : c'est là que ça s'anime. */

.js-anim .reveal { opacity: 0; }
.js-anim.prete .reveal { opacity: 1; }

/* Textes, titres, boutons : montée douce, en cascade */
.js-anim.prete .reveal .anim {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
.js-anim.prete .reveal.vu .anim {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}

/* Photos : fondu et léger dézoom */
.js-anim.prete .reveal .anim-img {
  opacity: 0;
  transform: scale(1.06);
  will-change: opacity, transform;
}
.js-anim.prete .reveal.vu .anim-img {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s ease var(--d, 0ms),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}

/* Parallaxe très légère : le cadre de la photo glisse, jamais la photo elle-même */
.hero-figure, .duo-media {
  transform: translate3d(0, var(--py, 0px), 0);
}

/* Le filet des étiquettes se déploie */
.js-anim.prete .reveal .eyebrow::after { transform: scaleX(0); transform-origin: left center; }
.js-anim.prete .reveal.vu .eyebrow::after {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0ms) + 150ms);
}

/* Si le système demande à réduire les animations, tout est neutralisé. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal,
  .js-anim.prete .reveal .anim,
  .js-anim.prete .reveal .anim-img,
  .js-anim.prete .reveal.vu .anim,
  .js-anim.prete .reveal.vu .anim-img {
    opacity: 1; transform: none; transition: none;
  }
  .js-anim.prete .reveal .eyebrow::after { transform: none; }
  .hero-figure, .duo-media { transform: none; }
  .chemin:hover, .carte:hover { transform: none; }
  .btn:hover { transform: none; }
}

/* ---------- Impression ---------- */

@media print {
  .site-header, .site-footer, .btn { display: none; }
  body { background: #fff; color: #000; background-image: none; }
  .encart, .carte, .chemin { box-shadow: none; border: 1px solid #ccc; background-image: none; }
}