/* ============================================================
   JUNA — feuille de style partagée
   Direction artistique : "Riviera éditorial"
   ============================================================ */

:root {
  --cream: #F6F1E6;
  --cream-deep: #ECE0C7;
  --kaki: #767953;
  --kaki-deep: #565A3C;
  --brown: #3B2A1E;
  --brown-soft: #79573F;
  --ink: #2A2318;
  --ink-soft: #5C5041;
  --white: #FFFFFF;
  --line: rgba(59, 42, 30, 0.16);
  --line-soft: rgba(59, 42, 30, 0.09);
  --shadow: 0 18px 40px -22px rgba(43, 30, 18, 0.35);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --content-w: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 10vw, 128px);
  --header-h: 72px;

  /* Palette "piliers" (issue de la charte fournie) */
  --terracotta: #C97C5D;
  --peach: #F5B18C;
  --blush: #FBDDC3;
  --sage: #95B392;
  --umber: #854730;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Angles droits sur tout le site. Ces quatre valeurs pilotent chaque coin
     arrondi : les repasser à 16px / 22px / 999px / 50% suffit à revenir aux
     formes adoucies, sans toucher au reste de la feuille. */
  --radius: 0;       /* cartes, champs, vignettes, images */
  --radius-lg: 0;    /* grands panneaux et encarts */
  --radius-pill: 0;  /* boutons et pastilles d'icônes */
  --radius-round: 0; /* pastilles numérotées de la méthode */

  /* Les deux aplats voisins de l'accueil. Valeurs littérales et non
     var(--blush) / var(--cream-deep) : le thème chaud redéfinit ces deux
     jetons, les sections se retrouveraient de la même couleur. */
  --band-piliers: #FBDDC3; /* blush clair — rosé */
  --band-methode: #95B392; /* sauge de la charte (identique à --sage) */
}

/* Riviera éditorial est une identité volontairement unique (fond crème chaud,
   pas de variante sombre) : les tokens ci-dessus s'appliquent identiquement
   quel que soit le thème du visiteur. */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

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

/* -------------------- Accessibilité de base -------------------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--brown); color: var(--cream);
  padding: 0.8em 1.2em; border-radius: 0;
}
.skip-link:focus { left: 0; }

/* Anneau de focus visible partout : il n'en existait aucun auparavant. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--radius);
}
.is-overlay :focus-visible, .section-brown :focus-visible { outline-color: var(--cream); }

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

/* -------------------- Typographie -------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brown);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  font-weight: 500;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.6rem, 2rem + 3.6vw, 5rem); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); font-weight: 500; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); font-weight: 600; }

p { margin: 0; }
a { color: inherit; text-decoration: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kaki-deep);
}
/* Un SVG sans width/height retombe sur sa taille par défaut (300 × 150 px) :
   il faut le contraindre partout où il est posé dans du texte. */
.eyebrow svg { width: 1em; height: 1em; flex: none; }

.wrap {
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 62ch;
}

.prose p { max-width: 66ch; }
.prose p + p { margin-top: 1.1em; }

/* -------------------- Boutons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn-primary { background: var(--brown); color: var(--cream); }
.btn-primary:hover { background: var(--kaki-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--brown); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brown); background: rgba(59,42,30,0.05); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

/* -------------------- Logo texte (wordmark) -------------------- */
.brand-word {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-word strong { font-weight: 800; }
.brand-word span { font-weight: 400; opacity: 0.88; margin-left: 0.32em; }

/* -------------------- Header / nav -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: var(--content-w);
  margin-inline: auto;
  padding: 1.1em var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav-links a {
  position: relative;
  padding-block: 0.3em;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.25s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }

.brand { display: flex; align-items: center; gap: 0.6em; color: inherit; }

.nav-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Cibles tactiles de 44 px minimum (WCAG 2.5.5). */
.icon-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  transition: background 0.2s ease;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: rgba(127, 110, 90, 0.16); }

.nav-burger { display: none; color: inherit; }

/* Quatre entrées seulement : le menu tient largement, on peut revenir au
   point de bascule habituel vers le menu burger. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger {
    display: inline-flex;
    background: none; border: none; cursor: pointer;
  }
}

/* -------------------- Header en surimpression sur photo -------------------- */
/* Fixe (et non plus absolu) : la navigation reste accessible sur toute la page
   et prend un fond crème dès que l'on quitte le hero. */
.site-header.is-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--cream);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-overlay::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,10,5,0.45) 0%, transparent 100%);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.site-header.is-overlay.is-solid {
  background: var(--cream);
  color: var(--ink);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px -26px rgba(43, 30, 18, 0.6);
}
.site-header.is-overlay.is-solid::before { opacity: 0; }
.site-header.is-overlay.is-solid .brand-word strong { color: var(--brown); }
.site-header.is-overlay .nav-links a[aria-current="page"]::after { background: currentColor; }

/* -------------------- Menu mobile -------------------- */
#mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--cream);
  padding: 1.4em var(--gutter);
  display: flex; flex-direction: column; gap: 1.6rem;
  overflow-y: auto;
}
#mobile-menu[hidden] { display: none; }
#mobile-menu .close-row { display: flex; justify-content: flex-end; }
#mobile-menu nav { display: flex; flex-direction: column; gap: 1.3rem; font-family: var(--font-display); font-size: 1.7rem; }
#mobile-menu nav a[aria-current="page"] { color: var(--kaki-deep); }
.mobile-menu-foot {
  margin-top: auto; padding-top: 2rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.92rem; color: var(--ink-soft);
}

/* -------------------- Recherche (modale) -------------------- */
#search-modal {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(43, 30, 18, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 1.2rem;
  overflow-y: auto;
}
#search-modal[hidden] { display: none; }
.search-panel {
  background: var(--cream);
  width: min(560px, 100%);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.search-panel input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.3rem;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.5em 0.1em;
  color: var(--brown);
}
.search-panel input:focus { outline: none; border-color: var(--brown); }
.search-results { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; }
.search-results li a {
  display: flex; flex-direction: column; gap: 0.15em;
  padding: 0.7em 0.3em;
  border-radius: var(--radius);
}
.search-results li a:hover,
.search-results li a.is-active { background: var(--cream-deep); }
.search-results .r-title { font-weight: 600; color: var(--brown); }
.search-results .r-desc { font-size: 0.85rem; color: var(--ink-soft); }
.search-empty { padding: 1.1em 0.3em; color: var(--ink-soft); font-size: 0.92rem; }
.search-hint { font-size: 0.78rem; color: var(--ink-soft); margin-top: 1rem; }
@media (max-width: 640px) { .search-hint { display: none; } }

/* -------------------- Hero photo -------------------- */
.photo-hero {
  position: relative;
  overflow: hidden;
  min-height: min(94svh, 860px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brown);
}
/* Sélecteur descendant et non enfant direct : certaines images de hero sont
   enveloppées dans un <picture> pour servir l'AVIF avec un repli JPEG. */
.photo-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* L'affiche porte le LCP ; la vidéo se superpose ensuite, en fondu. */
.photo-hero img.hero-poster { object-position: center 42%; z-index: 1; }
.hero-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero-video.is-playing { opacity: 1; }
.photo-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(20,14,8,0.5) 0%, rgba(20,14,8,0.22) 30%, rgba(20,14,8,0.24) 66%, rgba(20,14,8,0.52) 100%);
  z-index: 2;
}
/* Hero de l'accueil : le plan de la vidéo est très lumineux (murs et
   bibliothèque blancs). Le voile est renforcé au centre, là où se pose le
   titre en crème, sans quoi le contraste devient insuffisant. */
.photo-hero.is-deep::before {
  background:
    linear-gradient(0deg, rgba(20,14,8,0.58) 0%, rgba(20,14,8,0.42) 30%, rgba(20,14,8,0.44) 66%, rgba(20,14,8,0.60) 100%);
}

.photo-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
  padding: clamp(5rem, 13vh, 7.5rem) var(--gutter) clamp(3.5rem, 10vh, 6rem);
  text-align: center;
  color: var(--cream);
}
.photo-hero-content h1 {
  color: var(--cream);
  /* 27ch coupait en deux des titres courts comme « Un projet en tête ?
     Parlons-en. ». Assez large pour les tenir sur une ligne, assez étroit
     pour que les titres longs restent lisibles. */
  max-width: 34ch;
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.9rem);
  text-shadow: 0 4px 30px rgba(15,10,5,0.4);
}
.photo-hero-content .btn-primary { background: var(--cream); color: var(--brown); }
.photo-hero-content .btn-primary:hover { background: var(--white); }
.photo-hero-content .btn-ghost { color: var(--cream); border-color: rgba(246,241,230,0.5); }
.photo-hero-content .btn-ghost:hover { border-color: var(--cream); background: rgba(246,241,230,0.14); }
/* Indicateur de défilement : le pictogramme seul, sans libellé.
   La couleur reste définie ici, le tracé SVG l'hérite via currentColor. */
.photo-hero-scroll {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(1.4rem, 4vw, 2.4rem); transform: translateX(-50%);
  display: flex; align-items: center;
  color: #E6DEC2;
}
.photo-hero-scroll svg { width: 14px; height: 22px; animation: scrolldrop 2.2s ease-in-out infinite; }
@keyframes scrolldrop { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } }
@media (max-width: 640px) { .photo-hero-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .photo-hero-scroll svg { animation: none; } }

/* Hero raccourci sur les pages secondaires et légales : une page de mentions
   légales n'a pas besoin d'un plein écran de photo avant son premier mot. */
.photo-hero.is-compact { min-height: min(62svh, 580px); }
.photo-hero.is-short { min-height: min(46svh, 420px); }

/* -------------------- Hero sur photo claire -------------------- */
/* Une photo très lumineuse ne supporte pas le texte crème : plutôt que de
   l'assombrir sous un voile opaque, on inverse le texte en brun et on pose
   un voile clair. La photo garde sa lumière, le texte reste lisible. */
body.hero-light .photo-hero::before {
  background: linear-gradient(0deg, rgba(255,251,244,0.58) 0%, rgba(255,251,244,0.26) 42%, rgba(255,251,244,0.30) 70%, rgba(255,251,244,0.62) 100%);
}
body.hero-light .photo-hero-content { color: var(--brown); }
body.hero-light .photo-hero-content h1 {
  color: var(--brown);
  text-shadow: 0 2px 24px rgba(255,251,244,0.8);
}
body.hero-light .photo-hero-content .lede { color: var(--ink); opacity: 1; }
body.hero-light .photo-hero-content .eyebrow { color: var(--umber); opacity: 1; }
body.hero-light .photo-hero-content .btn-primary { background: var(--brown); color: var(--cream); }
body.hero-light .photo-hero-content .btn-primary:hover { background: var(--umber); }
body.hero-light .photo-hero-content .btn-ghost { color: var(--brown); border-color: rgba(59,42,30,0.35); }
body.hero-light .photo-hero-content .btn-ghost:hover { border-color: var(--brown); background: rgba(59,42,30,0.06); }
body.hero-light .photo-hero-scroll { color: var(--umber); }
/* La navigation en surimpression suit le même sort tant qu'elle est sur la photo. */
body.hero-light .site-header.is-overlay { color: var(--brown); }
body.hero-light .site-header.is-overlay::before {
  background: linear-gradient(180deg, rgba(255,251,244,0.8) 0%, transparent 100%);
}
body.hero-light .site-header.is-overlay.is-solid { color: var(--ink); }
body.hero-light .is-overlay :focus-visible { outline-color: var(--brown); }

/* -------------------- Rupture éditoriale plein cadre -------------------- */
.image-break { position: relative; margin: 0; }
.image-break img { width: 100%; height: min(78svh, 720px); object-fit: cover; display: block; }
/* Légende sur une seule ligne : elle court sous l'image plutôt que de
   s'empiler en bloc. En dessous de 820 px il n'y a plus la place, on laisse
   le retour à la ligne reprendre la main. */
.image-break figcaption {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.4rem; z-index: 2;
  color: var(--cream);
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(20,14,8,0.55);
}
@media (max-width: 820px) {
  .image-break figcaption { white-space: normal; max-width: 34ch; }
}
.image-break::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,14,8,0.62) 0%, transparent 42%);
  pointer-events: none;
}
/* .short cadre une image de petite définition sans l'étirer au-delà du net. */
.image-break.short img { height: min(56svh, 480px); }
/* Une photo verticale recadrée en bandeau : on descend le point de visée
   pour garder la zone qui porte le sujet plutôt que le haut de l'image. */
.image-break img.focus-low { object-position: center 58%; }

/* -------------------- Portrait de la fondatrice -------------------- */
/* Le dégradé de fond reste visible tant que la vidéo n'est pas chargée :
   pas de rectangle noir pendant l'attente. */
.portrait-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(165deg, var(--cream-deep) 0%, #DDCFA6 45%, var(--kaki) 100%);
  isolation: isolate;
}
.portrait-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.portrait-media video.is-ready { opacity: 1; }

/* -------------------- Apparition à l'entrée dans le champ de vision -------- */
/* Sans JS, tout reste visible : aucun risque de contenu invisible. */
[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s var(--ease-out);
  }
  html.js [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* -------------------- Sections génériques -------------------- */
.section { padding-block: var(--section-y); }
.section-alt { background: var(--cream-deep); }
.section-brown { background: var(--brown); color: var(--cream); }
.section-brown h2, .section-brown h3 { color: var(--cream); }
.section-brown .eyebrow { color: #C9C79E; }

.photo-hero-content .eyebrow { color: var(--cream); opacity: 0.92; }
.photo-hero-content .lede { color: var(--cream); opacity: 0.92; max-width: 48ch; }

/* -------------------- Grilles -------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); }
.grid-2-offers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: stretch; }
.grid-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }

@media (max-width: 900px) {
  .grid-2, .grid-2-offers { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-why { grid-template-columns: 1fr; }
}

/* -------------------- Nos piliers -------------------- */
/* Aplats unis, sans photo de fond ni panneau rapporté : les cartes reposent
   directement sur la couleur de la section. Les deux sections se suivant, on
   les dissocie par l'alternance plutôt que par un trait — les piliers sur le
   blush de la charte, la méthode sur le crème de la page. L'espacement vient
   de la classe .section, comme partout ailleurs. */
.section-piliers { background: var(--band-piliers); }
.section-etapes { background: var(--band-methode); }
/* Ces deux sections sont centrées, mais leur titre suit l'échelle des autres
   h2 du site : casse normale, graisse 500, même taille. Ils étaient les seuls
   en capitales et en graisse 800. */
.piliers-title {
  text-align: center;
  color: var(--brown);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.piliers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
}
.pilier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}
.pilier-media {
  width: 100%;
  height: clamp(150px, 18vw, 220px);
  border-radius: var(--radius);
  overflow: hidden;
}
.pilier-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Intitulé et soulignement en brun, identiques à ceux de la méthode. */
.pilier-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brown);
  border-bottom: 2px solid var(--brown);
  padding-bottom: 0.3em;
}
.pilier-card p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 30ch;
}
@media (max-width: 860px) {
  .piliers-grid { grid-template-columns: 1fr; }
  .pilier-media { height: clamp(180px, 46vw, 260px); }
}

.etapes-title {
  text-align: center;
  color: var(--brown);
  margin-bottom: 0.6rem;
}
.etapes-subtitle {
  text-align: center;
  color: var(--brown);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.etapes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
.etape-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
}
/* Le chiffre seul, sans bloc de fond : il tient par sa taille et sa graisse
   plutôt que par un contenant. */
.etape-badge {
  color: var(--brown);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.7rem + 1.5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Sur le sauge, l'umber tombe à 3,1:1 et le terracotta à 1,4:1 : les deux
   passent en brun, seul assez sombre pour tenir sur ce fond. */
.etape-label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brown);
  border-bottom: 2px solid var(--brown);
  padding-bottom: 0.3em;
}
.etape-card p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--brown);
  max-width: 26ch;
}
@media (max-width: 1160px) {
  .etapes-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .etapes-grid { grid-template-columns: 1fr; }
}

/* -------------------- Notre mission : texte + photo -------------------- */
/* Le texte passe à gauche, la photo verticale à droite. Sur l'accueil, cela
   alterne avec le portrait de la fondatrice, placé à gauche plus haut. */
.mission-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.mission-points {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.mission-points p { color: #E3DCC7; }
.mission-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.mission-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .mission-split { grid-template-columns: 1fr; }
  /* Sur petit écran la photo passe au-dessus du texte : elle annonce la
     section au lieu de la clore. */
  .mission-media { order: -1; aspect-ratio: 3 / 2; }
}

/* -------------------- Pourquoi JUNA -------------------- */
.why-item { padding: 2.1rem 1.9rem; background: var(--cream); }
.why-item h3 { margin-bottom: 0.6rem; font-size: 1.2rem; }
.why-item p { color: var(--ink-soft); font-size: 0.97rem; }

/* -------------------- Offres (services) -------------------- */
.offer {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.2rem;
  background: var(--white);
}
/* Étiquette pleine, inversée d'une carte à l'autre : le surtitre discret
   ne distinguait pas assez les deux offres. */
.offer-badge {
  align-self: flex-start;
  background: var(--umber);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6em 1.15em;
  margin-bottom: 1.3rem;
}
.offer.featured .offer-badge { background: var(--cream); color: var(--umber); }

.offer h3 { font-size: 1.5rem; }
.offer .offer-tag { margin-top: 0.5rem; color: var(--ink-soft); }
.offer ul { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.offer li { display: flex; align-items: flex-start; gap: 0.7em; font-size: 0.96rem; }
.offer li svg { flex: none; width: 1.05em; height: 1.05em; margin-top: 0.2em; color: var(--kaki-deep); }
.offer .btn { margin-top: 2rem; align-self: flex-start; }
.offer.featured { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.offer.featured h3, .offer.featured .offer-tag { color: var(--cream); }
.offer.featured .offer-tag { opacity: 0.8; }
.offer.featured li svg { color: #C9C79E; }
.offer.featured .btn-primary { background: var(--cream); color: var(--brown); }
.offer.featured .btn-primary:hover { background: var(--kaki); color: var(--cream); }

/* -------------------- FAQ -------------------- */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 0.2rem;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--brown);
}
.faq-q .plus { font-size: 1.4rem; transition: transform 0.25s var(--ease-out); color: var(--kaki-deep); flex: none; }
.faq-item[data-open="true"] .plus { transform: rotate(45deg); }
/* Panneau à hauteur automatique : une réponse longue n'est plus tronquée
   (l'ancien max-height figé à 320 px coupait le texte). */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease-out); }
.faq-a > p { overflow: hidden; visibility: hidden; padding: 0 0.2rem 1.6rem; color: var(--ink-soft); max-width: 62ch; }
.faq-item[data-open="true"] .faq-a { grid-template-rows: 1fr; }
.faq-item[data-open="true"] .faq-a > p { visibility: visible; }

/* -------------------- Cartes contact / infos -------------------- */
.info-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.info-card .eyebrow { margin-bottom: 0.2rem; }
.info-card .value { font-family: var(--font-display); font-size: 1.25rem; color: var(--brown); }
.info-card a.value:hover { color: var(--kaki-deep); }

/* -------------------- Formulaire de contact -------------------- */
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.field .req { color: var(--terracotta); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75em 0.9em;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brown);
  background: var(--white);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #B4472F; }
.field .hint { font-size: 0.8rem; color: var(--ink-soft); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.form-note { font-size: 0.82rem; color: var(--ink-soft); max-width: 48ch; }
.form-status { font-size: 0.9rem; color: var(--umber); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* -------------------- Footer -------------------- */
.site-footer { background: var(--brown); color: var(--cream); }
.footer-top {
  max-width: var(--content-w); margin-inline: auto; padding: var(--section-y) var(--gutter) 3rem;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 2.6rem;
}
.footer-word { display: inline-block; margin-bottom: 1.2rem; font-size: 1.4rem; }
.footer-brand p { color: #D9D2BC; max-width: 34ch; }
.footer-col h2 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #C9C79E; margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a:hover { color: var(--cream-deep); text-decoration: underline; }
.footer-col .linkish {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.footer-col .linkish:hover { color: var(--cream-deep); text-decoration: underline; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.3rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(246,241,230,0.3); border-radius: var(--radius-pill); }
.footer-social svg { width: 17px; height: 17px; }
.footer-social a:hover { background: rgba(246,241,230,0.12); }
.footer-bottom {
  border-top: 1px solid rgba(246,241,230,0.16);
  padding: 1.4rem var(--gutter);
  font-size: 0.82rem;
  color: #C7BFA6;
  text-align: center;
}
@media (max-width: 1000px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* -------------------- Journal : liste -------------------- */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.journal-card {
  display: flex; flex-direction: column; gap: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--white);
  transition: border-color 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}
.journal-card:hover { border-color: var(--brown); transform: translateY(-2px); box-shadow: var(--shadow); }
.journal-card.featured { grid-column: 1 / -1; }
.journal-card :is(h2, h3) { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.7rem); }
.journal-card .excerpt { color: var(--ink-soft); font-size: 0.96rem; max-width: 62ch; }
.journal-card .meta { font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.journal-card .more { font-weight: 600; color: var(--umber); margin-top: auto; }
.journal-card:hover .more { text-decoration: underline; }
@media (max-width: 760px) { .journal-grid { grid-template-columns: 1fr; } }

/* -------------------- Journal : article -------------------- */
/* Pas de hero photo ici : un article s'ouvre sur son titre. Le décalage
   compense la hauteur de l'en-tête fixe. */
.journal-head {
  background: var(--cream);
  padding-block: calc(var(--header-h) + clamp(2.4rem, 6vw, 4.5rem)) clamp(1.6rem, 3vw, 2.4rem);
}
/* Même échelle que les titres des pages à hero photo : sans cette règle, le
   h1 du Journal retombe sur le h1 global, qui monte jusqu'à 5 rem. */
.journal-head h1 { font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.9rem); }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 1.4rem;
  list-style: none; padding: 0;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.journal-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  font-size: 0.85rem; color: var(--ink-soft);
  margin-top: 1.4rem;
}
.article { max-width: 720px; margin-inline: auto; padding-inline: var(--gutter); }
.article > * + * { margin-top: 1.3em; }
.article p { max-width: 68ch; }
.article .lead { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); color: var(--ink); }
.article h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  margin-top: 2.4em;
  text-wrap: balance;
}
.article h2 + p { margin-top: 0.9em; }
.article ul, .article ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 0.6rem; color: var(--ink-soft); }
.article li { max-width: 64ch; }
.article li strong { color: var(--ink); }
.article figure { margin: 2.4em 0; }
.article figure img { border-radius: var(--radius); }
.article figcaption { font-size: 0.84rem; color: var(--ink-soft); margin-top: 0.7rem; }
/* Respiration éditoriale : une reformulation qu'on veut voir ressortir.
   Traitée en typographie plutôt qu'en encadré, dans la même langue que les
   légendes des ruptures photo. */
.article-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.4;
  color: var(--brown);
  max-width: 46ch;
  margin-block: 2.2em;
}
.article-cta {
  margin-top: 3.5em;
  padding-top: 2.4em;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start;
}
.article-sign { font-size: 0.9rem; color: var(--ink-soft); }

/* -------------------- Galerie de réalisations -------------------- */
.project-head { max-width: 62ch; display: flex; flex-direction: column; gap: 1rem; }
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  background: var(--cream-deep);
}
.gallery-item.is-wide { grid-column: 1 / -1; }
.gallery-item.is-wide img { aspect-ratio: 16 / 9; }
.gallery figcaption {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin-top: 0.7rem;
  letter-spacing: 0.01em;
}
/* L'agrandissement n'existe que si le JS a pris la main : sans lui, la
   galerie reste une suite d'images, sans commande morte. */
html.js .gallery img { cursor: zoom-in; transition: opacity 0.25s ease; }
html.js .gallery img:hover { opacity: 0.9; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }

/* -------------------- Agrandissement (lightbox) -------------------- */
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(20, 14, 8, 0.93); }
.lightbox-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(3.5rem, 8vw, 5rem) clamp(1rem, 4vw, 4.5rem);
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-caption {
  color: #D9D2BC;
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}
.lightbox button {
  position: absolute;
  background: rgba(246, 241, 230, 0.12);
  border: 1px solid rgba(246, 241, 230, 0.28);
  color: var(--cream);
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox button:hover { background: rgba(246, 241, 230, 0.26); }
.lightbox button svg { width: 20px; height: 20px; }
.lightbox-close { top: clamp(1rem, 3vw, 1.8rem); right: clamp(1rem, 3vw, 1.8rem); }
.lightbox-prev { left: clamp(0.6rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(0.6rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox-prev { left: 50%; top: auto; bottom: 1rem; transform: translateX(-120%); }
  .lightbox-next { right: 50%; top: auto; bottom: 1rem; transform: translateX(120%); }
}

/* -------------------- Bandeau "bientôt disponible" -------------------- */
.soon-box {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1.6rem, 5vw, 3rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
}

/* -------------------- Utilitaires -------------------- */
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.mt-lg { margin-top: clamp(2rem, 5vw, 3.5rem); }
.rounded { border-radius: var(--radius); }
.caption { color: var(--ink-soft); font-size: 0.85rem; margin-top: 1.2rem; }
.underlined { text-decoration: underline; text-underline-offset: 0.25em; }
.underlined:hover { color: var(--brown); }
.legal h2 { margin-top: 2.4rem; font-size: 1.35rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.2em; }
.legal .prose { max-width: 72ch; }

/* -------------------- Thème "piliers" (toutes les pages, accueil compris) -- */
body.theme-warm {
  --kaki: var(--terracotta);
  --kaki-deep: var(--umber);
  --cream-deep: var(--blush);
}
body.theme-warm .portrait-media {
  background: linear-gradient(165deg, var(--blush) 0%, var(--peach) 45%, var(--terracotta) 100%);
}
body.theme-warm .section-brown { background: var(--umber); }
body.theme-warm .section-brown .eyebrow { color: var(--peach); }
body.theme-warm .offer.featured { background: var(--umber); border-color: var(--umber); }
body.theme-warm .offer.featured li svg { color: var(--peach); }