/* ==========================================================================
   VALET — Feuille de style principale
   Direction artistique : maison entrepreneuriale premium.
   Palette minérale, typographie éditoriale, animations discrètes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --noir:        #0D0D0C;
  --noir-doux:   #161614;
  --encre:       #22221F;
  --blanc:       #F7F5F0;
  --blanc-chaud: #EFEBE2;
  --gris:        #86857D;
  --gris-clair:  #B9B6AE;
  --pierre:      #A28D6B;   /* bronze / pierre — usage extrêmement parcimonieux */

  --fond:        var(--blanc);
  --texte:       var(--noir);

  --ligne:       rgba(13, 13, 12, 0.14);
  --ligne-forte: rgba(13, 13, 12, 0.28);
  --ligne-inv:   rgba(247, 245, 240, 0.18);
  --ligne-inv-forte: rgba(247, 245, 240, 0.38);

  /* Typographie */
  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rythme */
  --gouttiere: clamp(1.5rem, 5vw, 5rem);
  --max:       1440px;
  --max-texte: 62ch;

  --sect-y:    clamp(5rem, 11vw, 10.5rem);
  --sect-y-sm: clamp(3.5rem, 7vw, 6.5rem);

  /* Mouvement */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-doux: cubic-bezier(0.4, 0, 0.2, 1);

  --entete-h: 92px;
}

@media (max-width: 900px) {
  :root { --entete-h: 68px; }
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.68;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menu-ouvert { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--noir); color: var(--blanc); }

:focus-visible {
  outline: 1px solid var(--pierre);
  outline-offset: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--noir);
  color: var(--blanc);
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.saut-contenu:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
.affiche,
.titre-1, .titre-2, .titre-3, .titre-4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.affiche {
  font-size: clamp(3.4rem, 11.5vw, 10rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
}

.titre-1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1.03; }
.titre-2 { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.08; }
.titre-3 { font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1.16; }
.titre-4 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.25; }

.italique { font-style: italic; }

.etiquette {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
  line-height: 1.4;
}

.etiquette--pierre { color: var(--pierre); }

.chapeau {
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.375rem);
  line-height: 1.62;
  font-weight: 300;
  color: rgba(13, 13, 12, 0.78);
  max-width: 52ch;
}

.texte { max-width: var(--max-texte); color: rgba(13, 13, 12, 0.76); }
.texte + .texte { margin-top: 1.1em; }
.texte--large { max-width: 72ch; }

.petit {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gris);
}

.mesure-serree { max-width: 44ch; }

/* --------------------------------------------------------------------------
   4. Structure
   -------------------------------------------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.enveloppe--etroite { max-width: 1080px; }

.section {
  padding-block: var(--sect-y);
  position: relative;
}
.section--serree { padding-block: var(--sect-y-sm); }
.section--haut-seul { padding-bottom: 0; }
.section--bas-seul { padding-top: 0; }

.sombre {
  background: var(--noir);
  color: var(--blanc);
  --ligne: var(--ligne-inv);
  --ligne-forte: var(--ligne-inv-forte);
}
.sombre .texte { color: rgba(247, 245, 240, 0.7); }
.sombre .chapeau { color: rgba(247, 245, 240, 0.78); }
.sombre .etiquette { color: var(--gris-clair); }
.sombre .etiquette--pierre { color: var(--pierre); }
.sombre .petit { color: rgba(247, 245, 240, 0.55); }
.sombre ::selection { background: var(--blanc); color: var(--noir); }

.creme { background: var(--blanc-chaud); }

.filet { height: 1px; background: var(--ligne); border: 0; margin: 0; }

/* En-tête de section : étiquette + titre en grille éditoriale */
.entete-section {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: start;
}
.entete-section__aside { padding-top: 0.6rem; }
@media (max-width: 860px) {
  .entete-section { grid-template-columns: 1fr; gap: 1.25rem; }
  .entete-section__aside { padding-top: 0; }
}

.grille {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
}
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.grille--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grille--alignee { align-items: center; }

@media (max-width: 1000px) {
  .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grille--2, .grille--3, .grille--7-5, .grille--5-7 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grille--4 { grid-template-columns: 1fr; }
}

.pile > * + * { margin-top: 1.25rem; }
.pile-l > * + * { margin-top: 2rem; }
.pile-xl > * + * { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

/* --------------------------------------------------------------------------
   5. Boutons & liens
   -------------------------------------------------------------------------- */
.bouton {
  --b-fond: transparent;
  --b-texte: var(--noir);
  --b-bord: var(--ligne-forte);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.05rem 1.9rem;
  background: var(--b-fond);
  color: var(--b-texte);
  border: 1px solid var(--b-bord);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
  isolation: isolate;
}
.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noir);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.bouton:hover { color: var(--blanc); border-color: var(--noir); }
.bouton:hover::before { transform: scaleY(1); }

.bouton--plein {
  --b-fond: var(--noir);
  --b-texte: var(--blanc);
  --b-bord: var(--noir);
}
.bouton--plein::before { background: var(--blanc); }
.bouton--plein:hover { color: var(--noir); border-color: var(--noir); }

.sombre .bouton { --b-texte: var(--blanc); --b-bord: var(--ligne-inv-forte); }
.sombre .bouton::before { background: var(--blanc); }
.sombre .bouton:hover { color: var(--noir); border-color: var(--blanc); }
.sombre .bouton--plein { --b-fond: var(--blanc); --b-texte: var(--noir); --b-bord: var(--blanc); }
.sombre .bouton--plein::before { background: var(--noir); }
.sombre .bouton--plein:hover { color: var(--blanc); border-color: var(--blanc); }

.bouton--large { width: 100%; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
}

/* Lien souligné progressif */
.lien {
  position: relative;
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
}
.lien::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: right;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.lien:hover::after { opacity: 1; transform: scaleX(0.35); transform-origin: left; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lien-fleche span:last-child { transition: transform 0.5s var(--ease); }
.lien-fleche:hover span:last-child { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   6. En-tête / navigation
   -------------------------------------------------------------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--entete-h);
  display: flex;
  align-items: center;
  color: var(--blanc);
  transition: height 0.5s var(--ease), background-color 0.5s var(--ease),
              color 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,13,12,0.55), rgba(13,13,12,0));
  opacity: 1;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.entete--fixe {
  height: calc(var(--entete-h) - 24px);
  background: rgba(247, 245, 240, 0.94);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  color: var(--noir);
  border-bottom-color: var(--ligne);
}
.entete--fixe::before { opacity: 0; }
.entete--clair { color: var(--noir); }
.entete--clair::before { opacity: 0; }

.entete__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.marque {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  line-height: 1;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.6rem); }
.nav a {
  position: relative;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.82;
  transition: opacity 0.4s var(--ease);
  padding-block: 0.4rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { opacity: 1; }

.entete__actions { display: flex; align-items: center; gap: 1rem; }

.bouton--entete {
  padding: 0.85rem 1.4rem;
  border-color: currentColor;
  opacity: 0.9;
}
.bouton--entete:hover { opacity: 1; }

.bascule-menu {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-right: -10px;
}
.bascule-menu span {
  display: block;
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
  transition: background-color 0.3s var(--ease);
}
.bascule-menu span::before,
.bascule-menu span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease);
}
.bascule-menu span::before { top: -6px; }
.bascule-menu span::after  { top: 6px; }
body.menu-ouvert .bascule-menu span { background: transparent; }
body.menu-ouvert .bascule-menu span::before { transform: translateY(6px) rotate(45deg); }
body.menu-ouvert .bascule-menu span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav, .entete__actions .bouton { display: none; }
  .bascule-menu { display: flex; }
  body.menu-ouvert .entete { color: var(--blanc); background: transparent; border-bottom-color: transparent; }
  body.menu-ouvert .entete::before { opacity: 0; }
}

/* Menu plein écran */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--noir);
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--entete-h) + 2rem) var(--gouttiere) 6rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), visibility 0.55s;
}
.menu[data-ouvert="true"] { opacity: 1; visibility: visible; transform: none; }

.menu__liste > li { border-bottom: 1px solid var(--ligne-inv); }
.menu__liste a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.75rem, 2.2vw, 1.1rem) 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 6.5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  transition: opacity 0.4s var(--ease), padding-left 0.5s var(--ease);
}
.menu__liste a:hover { padding-left: 0.75rem; opacity: 0.6; }
.menu__liste .num {
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--gris);
}
.menu__pied {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

/* Barre CTA mobile permanente */
.barre-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none;
  padding: 0.6rem var(--gouttiere) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(13, 13, 12, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(110%);
  transition: transform 0.5s var(--ease);
}
.barre-mobile[data-visible="true"] { transform: none; }
.barre-mobile .bouton {
  --b-texte: var(--blanc);
  --b-bord: var(--ligne-inv-forte);
  width: 100%;
  padding-block: 0.95rem;
}
.barre-mobile .bouton::before { background: var(--blanc); }
.barre-mobile .bouton:hover { color: var(--noir); }

@media (max-width: 1100px) {
  .barre-mobile { display: block; }
  body { padding-bottom: 0; }
}
body.menu-ouvert .barre-mobile { transform: translateY(110%); }

/* --------------------------------------------------------------------------
   7. Zones photographiques (placeholders explicites)
   -------------------------------------------------------------------------- */
/*
   IMPORTANT — Chaque .photo est un EMPLACEMENT PHOTOGRAPHIQUE à remplacer.
   Le brief de prise de vue est porté par l'attribut data-brief.
   Pour remplacer : insérer <img> dans .photo__cadre et supprimer .photo--vide.
   Pour masquer les libellés de brief avant une présentation client :
   ajouter `.photo__brief{display:none}` dans une surcharge CSS.
*/
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--encre);
}
.photo__cadre {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.6s var(--ease-doux);
}
.photo:hover img { transform: scale(1.06); }

.ratio-3-4  { aspect-ratio: 3 / 4; }
.ratio-4-5  { aspect-ratio: 4 / 5; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-21-9 { aspect-ratio: 21 / 9; }
@media (max-width: 700px) {
  .ratio-21-9 { aspect-ratio: 16 / 10; }
}

/* Rendu du placeholder : matière minérale + trame architecturale */
.photo--vide .photo__cadre {
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(162, 141, 107, 0.16) 0%, rgba(162, 141, 107, 0) 62%),
    linear-gradient(168deg, #23231F 0%, #191917 46%, #121211 100%);
}
.photo--vide .photo__cadre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(247,245,240,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,245,240,0.055) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 10%, transparent 88%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 10%, transparent 88%);
}
.photo--vide .photo__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.photo--vide .photo__marque {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(247, 245, 240, 0.2);
}
.photo--vide .photo__marque svg { width: 46%; max-width: 340px; height: auto; }

.photo__brief {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.85rem 1rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.5);
  background: linear-gradient(to top, rgba(13,13,12,0.72), rgba(13,13,12,0));
}
.photo__brief b {
  display: block;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--pierre);
  margin-bottom: 0.25rem;
}

.legende {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: flex;
  align-items: flex-end;
  color: var(--blanc);
  background: var(--noir);
  overflow: hidden;
  padding-block: calc(var(--entete-h) + 3rem) clamp(3rem, 7vw, 6rem);
}
.hero--court { min-height: min(78svh, 760px); }

.hero__fond {
  position: absolute;
  inset: -6% 0 0 0;
  height: 112%;
  z-index: 0;
  will-change: transform;
}
.hero__fond .photo,
.hero__fond .photo__cadre { height: 100%; }
.hero__fond .photo { aspect-ratio: auto; }
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(13,13,12,0.86) 0%, rgba(13,13,12,0.34) 46%, rgba(13,13,12,0.5) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__brief {
  position: absolute;
  z-index: 3;
  right: var(--gouttiere);
  top: calc(var(--entete-h) + 1.5rem);
  max-width: 20rem;
  text-align: right;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.42);
}
.hero__brief b { display: block; color: var(--pierre); font-weight: 400; letter-spacing: 0.22em; }
@media (max-width: 900px) { .hero__brief { display: none; } }

.titre-hero { margin: 0; font-weight: 300; }
.titre-hero > span { display: block; }
.titre-hero .signature { margin-top: clamp(1rem, 2.4vw, 2rem); }

.signature {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 4.6vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
}
.signature em { font-style: italic; }

/* --------------------------------------------------------------------------
   9. Chaîne de valeur (ACTIF → PERFORMANCE)
   -------------------------------------------------------------------------- */
.chaine {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--ligne);
}
.chaine__maillon {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.4rem) clamp(0.75rem, 1.5vw, 1.5rem) clamp(1.75rem, 3vw, 2.75rem) 0;
  border-right: 1px solid var(--ligne);
}
.chaine__maillon:last-child { border-right: 0; }
.chaine__num {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--gris);
  display: block;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.chaine__mot {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}
.chaine__note { margin-top: 0.6rem; font-size: 0.75rem; color: var(--gris); line-height: 1.5; }

@media (max-width: 1000px) { .chaine { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .chaine { grid-template-columns: repeat(2, 1fr); }
  .chaine__num { margin-bottom: 1.75rem; }
}

/* --------------------------------------------------------------------------
   10. Pôles / blocs éditoriaux
   -------------------------------------------------------------------------- */
.pole {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--ligne);
}
.pole:last-child { border-bottom: 1px solid var(--ligne); }
.pole--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pole--inverse .pole__visuel { order: 2; }
@media (max-width: 900px) {
  .pole, .pole--inverse { grid-template-columns: 1fr; }
  .pole--inverse .pole__visuel { order: 0; }
}
.pole__corps > * + * { margin-top: 1.35rem; }

/* Liste numérotée de méthode */
.methode { border-top: 1px solid var(--ligne); }
.etape {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--ligne);
  align-items: baseline;
  transition: background-color 0.6s var(--ease);
}
.etape:hover { background: rgba(13, 13, 12, 0.02); }
.sombre .etape:hover { background: rgba(247, 245, 240, 0.03); }
.etape__num {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--gris);
}
.etape__titre {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 300;
  line-height: 1.12;
}
.etape__texte { color: rgba(13, 13, 12, 0.72); font-size: 0.9375rem; }
.sombre .etape__texte { color: rgba(247, 245, 240, 0.66); }
@media (max-width: 860px) {
  .etape { grid-template-columns: 4rem minmax(0, 1fr); }
  .etape__texte { grid-column: 2; }
}

/* Colonnes de service */
.service { border-top: 1px solid var(--ligne); padding-top: 1.5rem; }
.service h3 { margin-bottom: 0.75rem; }
.service p { font-size: 0.9375rem; color: rgba(13, 13, 12, 0.72); }
.sombre .service p { color: rgba(247, 245, 240, 0.66); }

/* Liste à puces minérales */
.liste-filet li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ligne);
  font-size: 0.9375rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.liste-filet li::before {
  content: "";
  flex: none;
  width: 14px; height: 1px;
  background: var(--pierre);
  transform: translateY(-4px);
}
.liste-filet li:first-child { border-top: 1px solid var(--ligne); }

.mots-cles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.mots-cles li {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--ligne);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Citation / manifeste */
.manifeste {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.85rem, 4.4vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   11. Propriétés
   -------------------------------------------------------------------------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.filtre {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ligne);
  background: transparent;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.filtre[aria-pressed="true"] { color: var(--noir); border-color: var(--ligne-forte); }
.sombre .filtre[aria-pressed="true"] { color: var(--blanc); }
.filtre:disabled { opacity: 0.45; cursor: not-allowed; }

.fiche { display: block; }
.fiche__media { position: relative; }
.fiche__statut {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  padding: 0.4rem 0.75rem;
  background: rgba(13, 13, 12, 0.7);
  backdrop-filter: blur(6px);
  color: var(--blanc);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.fiche__corps { padding-top: 1.25rem; }
.fiche__corps h3 { margin-bottom: 0.35rem; }
.fiche__lieu { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
.fiche__resume { margin-top: 0.9rem; font-size: 0.9375rem; color: rgba(13,13,12,0.72); }
.sombre .fiche__resume { color: rgba(247,245,240,0.66); }
.fiche__meta {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.75rem;
  color: var(--gris);
}

/* État vide assumé */
.etat-vide {
  border: 1px solid var(--ligne);
  padding: clamp(2rem, 5vw, 4.5rem);
  text-align: center;
}
.etat-vide .titre-3 { margin-bottom: 1rem; }
.etat-vide .texte { margin-inline: auto; }

/* Gabarit de fiche (démonstration de structure, sans donnée réelle) */
.gabarit {
  border: 1px dashed var(--ligne-forte);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.gabarit__tag {
  display: inline-block;
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pierre);
  border: 1px solid currentColor;
  padding: 0.3rem 0.6rem;
  margin-bottom: 1.25rem;
}
.gabarit dl { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0.65rem 1.5rem; }
.gabarit dt { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); }
.gabarit dd { margin: 0; font-size: 0.9375rem; color: rgba(13,13,12,0.7); }
.sombre .gabarit dd { color: rgba(247,245,240,0.66); }
@media (max-width: 640px) { .gabarit dl { grid-template-columns: 1fr; gap: 0.15rem 0; } .gabarit dd { margin-bottom: 0.85rem; } }

/* --------------------------------------------------------------------------
   12. Formulaires
   -------------------------------------------------------------------------- */
.formulaire { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); }
.formulaire__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
@media (max-width: 720px) { .formulaire__grille { grid-template-columns: 1fr; } }

.champ { display: flex; flex-direction: column; gap: 0.55rem; }
.champ--plein { grid-column: 1 / -1; }
.champ > label {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}
.champ > label .req { color: var(--pierre); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.75rem 0 0.85rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ligne-forte);
  border-radius: 0;
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.4s var(--ease);
  appearance: none;
}
.champ textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.champ select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2386857D' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  padding-right: 2rem;
  cursor: pointer;
}
.sombre .champ select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B9B6AE' stroke-width='1'/%3E%3C/svg%3E");
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: none; border-bottom-color: var(--pierre); }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(134,133,125,0.7); }
.sombre .champ input, .sombre .champ select, .sombre .champ textarea { color: var(--blanc); }
.sombre .champ select option { color: var(--noir); }

.champ[data-erreur="true"] input,
.champ[data-erreur="true"] select,
.champ[data-erreur="true"] textarea { border-bottom-color: #A3402F; }
.champ__erreur { font-size: 0.6875rem; color: #A3402F; letter-spacing: 0.04em; }
.sombre .champ__erreur { color: #D98D7E; }

.consentement {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--gris);
}
.consentement input {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 0.25rem;
  accent-color: var(--noir);
}
.sombre .consentement input { accent-color: var(--blanc); }

.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; }

.formulaire__retour {
  border: 1px solid var(--ligne-forte);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.formulaire__retour .titre-3 { margin-bottom: 0.75rem; }

[hidden] { display: none !important; }

/* Sélecteur de profil (page contact) */
.profils {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--ligne);
  border-left: 1px solid var(--ligne);
}
@media (max-width: 1000px) { .profils { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .profils { grid-template-columns: 1fr; } }
.profil {
  position: relative;
  text-align: left;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.1rem, 2vw, 1.6rem) clamp(2.5rem, 4vw, 3.5rem);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  cursor: pointer;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.profil__num { display: block; font-size: 0.625rem; letter-spacing: 0.2em; color: var(--gris); margin-bottom: 2rem; }
.profil__nom { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 300; line-height: 1.15; }
.profil::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--noir);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.sombre .profil::after { background: var(--blanc); }
.profil[aria-selected="true"]::after { transform: scaleX(1); }
.profil[aria-selected="true"] { background: rgba(13,13,12,0.03); }
.sombre .profil[aria-selected="true"] { background: rgba(247,245,240,0.05); }
.profil:hover .profil__nom { opacity: 0.65; }

/* --------------------------------------------------------------------------
   13. Bandeau d'appel & pied de page
   -------------------------------------------------------------------------- */
.bandeau-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
@media (max-width: 860px) { .bandeau-cta { grid-template-columns: 1fr; } }

.pied { background: var(--noir); color: var(--blanc); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--ligne-inv);
}
@media (max-width: 1000px) { .pied__haut { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pied__haut { grid-template-columns: 1fr; } }

.pied .marque { font-size: 1.75rem; margin-bottom: 1.25rem; }
.pied h4 {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 1.25rem;
}
.pied__liste li + li { margin-top: 0.6rem; }
.pied__liste a {
  font-size: 0.875rem;
  color: rgba(247, 245, 240, 0.72);
  transition: color 0.4s var(--ease);
}
.pied__liste a:hover { color: var(--blanc); }

.pied__bas {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: rgba(247, 245, 240, 0.42);
}
.pied__bas a:hover { color: var(--blanc); }
@media (max-width: 1100px) { .pied { padding-bottom: 6.5rem; } }

/* --------------------------------------------------------------------------
   14. Mouvement
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.05s var(--ease-doux), transform 1.05s var(--ease-doux);
  transition-delay: var(--retard, 0ms);
}
[data-reveal].vu { opacity: 1; transform: none; }

.js-off [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__fond { transform: none !important; }
}

/* --------------------------------------------------------------------------
   15. Utilitaires
   -------------------------------------------------------------------------- */
/* Pages sans hero : compenser l'en-tête fixe */
body.page-simple main { padding-top: calc(var(--entete-h) + clamp(2.5rem, 6vw, 5rem)); }
body.page-simple .entete { color: var(--noir); }
body.page-simple .entete::before { opacity: 0; }

.doc-legal h2 { margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: 0.75rem; }
.doc-legal p, .doc-legal li { max-width: var(--max-texte); color: rgba(13,13,12,0.76); font-size: 0.9375rem; }
.doc-legal ul { list-style: disc; padding-left: 1.25rem; }
.doc-legal li { margin-top: 0.4rem; }

.tres-discret { color: var(--gris); }
.pierre { color: var(--pierre); }
.centre { text-align: center; }
.centre .texte, .centre .chapeau { margin-inline: auto; }
.nowrap { white-space: nowrap; }
.mt-s { margin-top: 1rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: clamp(2.5rem, 5vw, 4rem); }
.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;
}

/* Note de production visible en développement */
.note-prod {
  border-left: 1px solid var(--pierre);
  padding: 0.85rem 0 0.85rem 1.25rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--gris);
}
.note-prod b { color: var(--pierre); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.625rem; display: block; margin-bottom: 0.3rem; }

/* Impression */
@media print {
  .entete, .menu, .barre-mobile, .photo, .bouton { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ==========================================================================
   V2 — Composants ajoutés lors de la refonte
   Le design system ci-dessus est conservé intégralement ; cette section
   n'ajoute que ce qui manquait à la nouvelle narration de la home.
   ========================================================================== */

/* --------------------------------------------------------------------------
   V2.1 Hero plein écran
   -------------------------------------------------------------------------- */
.hero--plein {
  min-height: 100svh;
  align-items: center;
  padding-block: calc(var(--entete-h) + 4rem) clamp(5rem, 12vh, 9rem);
}
.hero--plein .hero__voile {
  background:
    linear-gradient(to top, rgba(13,13,12,0.82) 0%, rgba(13,13,12,0.30) 44%, rgba(13,13,12,0.58) 100%);
}
.hero--plein .affiche {
  font-size: clamp(4rem, 15vw, 13rem);
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}
@media (max-width: 620px) {
  .hero--plein .affiche { font-size: clamp(3.6rem, 22vw, 6rem); }
}

.hero__descendre {
  position: absolute;
  left: var(--gouttiere);
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.6);
  transition: color 0.5s var(--ease);
}
.hero__descendre:hover { color: var(--blanc); }
.hero__descendre span:last-child { animation: descendre 3.2s var(--ease-doux) infinite; }
@keyframes descendre {
  0%, 68%, 100% { transform: translateY(0); opacity: 0.75; }
  82% { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__descendre span:last-child { animation: none; }
}
@media (max-height: 680px) { .hero__descendre { display: none; } }

/* --------------------------------------------------------------------------
   V2.2 Séquence typographique (IDENTIFIER → ANALYSER → …)
   -------------------------------------------------------------------------- */
.flux {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.flux__mot {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.75rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.flux__lien {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  height: 1px;
  background: var(--ligne-forte);
  position: relative;
  opacity: 0.6;
}
.flux__lien::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  border-top: 1px solid var(--ligne-forte);
  border-right: 1px solid var(--ligne-forte);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 720px) {
  .flux { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
  .flux__lien { flex: none; width: 1px; height: 1.5rem; margin-left: 0.5rem; }
  .flux__lien::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
}

/* --------------------------------------------------------------------------
   V2.3 Bandes photographiques pleine largeur
   -------------------------------------------------------------------------- */
.bande {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--noir);
}
.bande .photo, .bande .photo__cadre { height: 100%; }
.bande--haute { height: clamp(360px, 62vh, 720px); }
.bande--basse { height: clamp(260px, 42vh, 480px); }
.bande .photo { aspect-ratio: auto; height: 100%; }
.bande__legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gouttiere);
  background: linear-gradient(to top, rgba(13,13,12,0.7), rgba(13,13,12,0));
  color: var(--blanc);
}
.bande__legende .manifeste { max-width: 26ch; }

/* --------------------------------------------------------------------------
   V2.4 La preuve — études de cas
   -------------------------------------------------------------------------- */
.cas { display: flex; flex-direction: column; }
.cas__media { margin-bottom: 1.5rem; }
.cas__lieu {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.5rem;
}
.cas__mission {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}
.cas__mission li {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.cas__mission li + li::before { content: "· "; }

.kpis {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  border-top: 1px solid var(--ligne);
  padding-top: 1.25rem;
}
.kpi__valeur {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gris-clair);
  font-variant-numeric: tabular-nums;
}
.sombre .kpi__valeur { color: rgba(247,245,240,0.45); }
.kpi__label {
  margin-top: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  line-height: 1.35;
}
.kpi__note {
  margin-top: 0.35rem;
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pierre);
}

/* --------------------------------------------------------------------------
   V2.5 Portes d'entrée (Propriétaires / Investisseurs / Exploitation)
   -------------------------------------------------------------------------- */
.portes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ligne);
}
@media (max-width: 900px) { .portes { grid-template-columns: 1fr; } }

.porte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.5rem) clamp(2rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--ligne);
  border-right: 1px solid var(--ligne);
  transition: background-color 0.6s var(--ease);
}
.porte:last-child { border-right: 0; }
@media (max-width: 900px) { .porte { border-right: 0; } }
.porte:hover { background: rgba(13, 13, 12, 0.025); }
.sombre .porte:hover { background: rgba(247, 245, 240, 0.035); }
.porte__num {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  color: var(--gris);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.porte__titre {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.porte__accroche {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-style: italic;
  color: var(--gris);
}
.porte__texte {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: rgba(13, 13, 12, 0.72);
  flex: 1;
}
.sombre .porte__texte { color: rgba(247, 245, 240, 0.66); }
.porte .lien-fleche { margin-top: 1.75rem; align-self: flex-start; }

/* --------------------------------------------------------------------------
   V2.6 Notre modèle — six temps, traitement éditorial
   -------------------------------------------------------------------------- */
.modele {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 6rem);
  border-top: 1px solid var(--ligne);
}
@media (max-width: 860px) { .modele { grid-template-columns: 1fr; } }

.temps {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem);
  border-bottom: 1px solid var(--ligne);
}
.temps__num {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 0.85;
  color: var(--ligne-forte);
  font-variant-numeric: tabular-nums;
}
.sombre .temps__num { color: rgba(247, 245, 240, 0.3); }
.temps__titre {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.temps__texte {
  margin-top: 0.65rem;
  font-size: 0.9375rem;
  color: rgba(13, 13, 12, 0.72);
  max-width: 46ch;
}
.sombre .temps__texte { color: rgba(247, 245, 240, 0.66); }

/* --------------------------------------------------------------------------
   V2.7 Nous recherchons — fiche de critères
   -------------------------------------------------------------------------- */
.criteres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 4rem);
}
@media (max-width: 900px) { .criteres { grid-template-columns: 1fr; } }
.critere > h3 {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ligne);
}
.critere ul { margin-top: 0.5rem; }
.critere li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 300;
  letter-spacing: 0.01em;
}
.critere--texte li {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: rgba(13, 13, 12, 0.74);
}
.sombre .critere--texte li { color: rgba(247, 245, 240, 0.68); }

/* --------------------------------------------------------------------------
   V2.8 Chaîne verticale (Actif → Management → Yes in Provence → Clients)
   -------------------------------------------------------------------------- */
.cascade { display: grid; gap: 0; }
.cascade__etage {
  padding: clamp(1rem, 2.2vw, 1.5rem) 0;
  border-top: 1px solid var(--ligne);
}
.cascade__etage:last-child { border-bottom: 1px solid var(--ligne); }
.cascade__mot {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
}
.cascade__note { margin-top: 0.4rem; font-size: 0.8125rem; color: var(--gris); }
.cascade__fleche {
  display: block;
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--pierre);
}

/* --------------------------------------------------------------------------
   V2.9 Équipe
   -------------------------------------------------------------------------- */
.membre__media { margin-bottom: 1.25rem; }
.membre__nom {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.1;
}
.membre__role {
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pierre);
}
.membre__champs {
  margin-top: 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.membre__bio { margin-top: 1rem; font-size: 0.9375rem; color: rgba(13,13,12,0.72); }
.sombre .membre__bio { color: rgba(247,245,240,0.66); }

.poste-ouvert {
  border: 1px dashed var(--ligne-forte);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.poste-ouvert .etiquette { margin-bottom: auto; }
.poste-ouvert h3 { margin-top: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   V2.10 Scénarios (page investisseurs)
   -------------------------------------------------------------------------- */
.scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ligne);
}
@media (max-width: 800px) { .scenarios { grid-template-columns: 1fr; } }
.scenario {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.1rem, 2vw, 1.75rem) clamp(2rem, 3vw, 2.5rem);
  border-right: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.scenario:last-child { border-right: 0; }
@media (max-width: 800px) { .scenario { border-right: 0; } }
.scenario__nom {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scenario__texte { margin-top: 0.75rem; font-size: 0.9375rem; color: rgba(13,13,12,0.72); }
.sombre .scenario__texte { color: rgba(247,245,240,0.66); }

/* --------------------------------------------------------------------------
   V2.11 Quatre voies (page propriétaires)
   -------------------------------------------------------------------------- */
.voies {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ligne);
}
@media (max-width: 1000px) { .voies { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .voies { grid-template-columns: 1fr; } }
.voie {
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1rem, 1.8vw, 1.5rem) clamp(2rem, 3vw, 2.75rem);
  border-right: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.voie:last-child { border-right: 0; }
@media (max-width: 1000px) { .voie:nth-child(2n) { border-right: 0; } }
@media (max-width: 560px) { .voie { border-right: 0; } }
.voie__num { font-size: 0.625rem; letter-spacing: 0.22em; color: var(--gris); }
.voie__titre {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.05;
}
.voie__texte { margin-top: 0.75rem; font-size: 0.9375rem; color: rgba(13,13,12,0.72); }
.sombre .voie__texte { color: rgba(247,245,240,0.66); }

/* --------------------------------------------------------------------------
   V2.12 Réalisation détaillée (page Réalisations)
   -------------------------------------------------------------------------- */
.realisation { border-top: 1px solid var(--ligne); padding-top: clamp(2rem, 4vw, 3.5rem); }
.realisation__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 5vw, 5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) { .realisation__grille { grid-template-columns: 1fr; } }
.bloc-recit > h3 {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.6rem;
}
.bloc-recit p { font-size: 0.9375rem; color: rgba(13,13,12,0.74); max-width: 52ch; }
.sombre .bloc-recit p { color: rgba(247,245,240,0.68); }

/* Texte de remplacement clairement identifié */
.a-renseigner {
  color: var(--pierre);
  font-style: italic;
}

/* Mobile — CTA du hero en pleine largeur, plus faciles à atteindre */
@media (max-width: 560px) {
  .hero .groupe-boutons { width: 100%; }
  .hero .groupe-boutons .bouton { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Correctif — boutons posés sur un hero photographique
   Le hero n'est pas une section .sombre : sans cette règle, le bouton plein
   s'affichait noir sur fond noir et le bouton secondaire avait une bordure
   sombre invisible.
   -------------------------------------------------------------------------- */
.hero .bouton { --b-texte: var(--blanc); --b-bord: rgba(247, 245, 240, 0.42); }
.hero .bouton::before { background: var(--blanc); }
.hero .bouton:hover { color: var(--noir); border-color: var(--blanc); }
.hero .bouton--plein { --b-fond: var(--blanc); --b-texte: var(--noir); --b-bord: var(--blanc); }
.hero .bouton--plein::before { background: var(--noir); }
.hero .bouton--plein:hover { color: var(--blanc); border-color: var(--blanc); }

/* Le brief photo du hero reste lisible pour l'équipe sans peser sur l'image */
.hero__brief { color: rgba(247, 245, 240, 0.34); }
.hero__brief b { color: rgba(162, 141, 107, 0.85); }

/* Le bloc Résultats occupe toute la largeur : les indicateurs ont besoin d'air */
.bloc-recit--resultats { grid-column: 1 / -1; }
.bloc-recit .kpis { margin-top: 0.75rem; }
.kpi__label, .kpi__note { overflow-wrap: anywhere; }
@media (max-width: 500px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   Directions du propriétaire — page Propriétaires uniquement
   Séquence éditoriale interactive : rail numéroté à gauche, contenu à droite
   sur desktop ; accordéon vertical sur mobile. Aucune carte, aucun arrondi.
   ========================================================================== */
.directions {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  border-top: 1px solid var(--ligne);
}
.direction { display: contents; }

.direction__tete {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  width: 100%;
  padding: clamp(1rem, 2.2vw, 1.5rem) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ligne);
  text-align: left;
  cursor: pointer;
  transition: padding-left 0.5s var(--ease);
}
.direction__tete:hover { padding-left: 0.5rem; }
.direction__num {
  flex: none;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}
.direction__nom {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.42;
  transition: opacity 0.5s var(--ease);
}
.direction__tete:hover .direction__nom { opacity: 0.75; }
.direction__tete[aria-selected="true"] .direction__nom { opacity: 1; }
.direction__tete[aria-selected="true"] .direction__num { color: var(--pierre); }

.direction__corps {
  grid-column: 2;
  grid-row: 1 / span 5;
  align-self: start;
  padding-top: clamp(1rem, 2.2vw, 1.5rem);
}
.direction__corps > * + * { margin-top: 1.1rem; }
.direction__corps:not([hidden]) { animation: paraitre 0.6s var(--ease-doux) both; }
@keyframes paraitre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .direction__corps:not([hidden]) { animation: none; }
}

@media (max-width: 900px) {
  .directions { display: block; }
  .direction { display: block; }
  .direction__tete { padding-right: 2rem; position: relative; }
  .direction__tete:hover { padding-left: 0; }
  .direction__tete::after {
    content: "";
    position: absolute;
    right: 0.35rem; top: 50%;
    width: 8px; height: 8px;
    border-right: 1px solid var(--gris);
    border-bottom: 1px solid var(--gris);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.45s var(--ease);
  }
  .direction__tete[aria-selected="true"]::after { transform: translateY(-20%) rotate(-135deg); }
  .direction__corps {
    padding: 0 0 clamp(1.5rem, 4vw, 2rem);
    border-bottom: 1px solid var(--ligne);
  }
}

/* --------------------------------------------------------------------------
   Choix éditorial du formulaire (objectif principal)
   Alternative au menu déroulant : intitulé + explication, en filets.
   -------------------------------------------------------------------------- */
.choix-liste { border-top: 1px solid var(--ligne); }
.choix {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ligne);
  cursor: pointer;
  transition: background-color 0.4s var(--ease);
}
.choix:hover { background: rgba(13, 13, 12, 0.02); }
.sombre .choix:hover { background: rgba(247, 245, 240, 0.03); }
.choix input {
  flex: none;
  width: 15px; height: 15px;
  margin-top: 0.3rem;
  accent-color: var(--noir);
}
.sombre .choix input { accent-color: var(--blanc); }
.choix__nom {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.2;
  display: block;
}
.choix__note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gris);
}
.choix input:checked ~ span .choix__nom { color: var(--pierre); }

/* Cases à cocher multiples (activité actuelle) */
.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem 1.25rem;
}
@media (max-width: 860px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cases { grid-template-columns: 1fr; } }
.case {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.3rem 0;
}
.case input { width: 15px; height: 15px; accent-color: var(--noir); flex: none; }
.sombre .case input { accent-color: var(--blanc); }

/* Champ révélé par une réponse précédente */
.champ--revele:not([hidden]) { animation: paraitre 0.5s var(--ease-doux) both; }
.champ__aide {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--pierre);
  text-transform: none;
}

/* Phrase de réassurance avant le formulaire */
.reassurance {
  border-left: 1px solid var(--pierre);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}
.reassurance p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(13, 13, 12, 0.74);
  max-width: 58ch;
}
.sombre .reassurance p { color: rgba(247, 245, 240, 0.7); }
.reassurance p + p { margin-top: 0.75rem; }
.reassurance .etiquette { margin-top: 0.75rem; }

/* Groupe de champs (radios, cases) dans un formulaire */
.champ fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.champ legend {
  padding: 0;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}
.champ legend .req { color: var(--pierre); }

/* --------------------------------------------------------------------------
   Voile du hero lorsqu'une photographie est en place
   Dégradé du bas et léger assombrissement à gauche, là où se pose le texte :
   la signature reste lisible sur un ciel de fin de journée sans éteindre l'image.
   -------------------------------------------------------------------------- */
.hero__voile--photo {
  background:
    linear-gradient(to right, rgba(13,13,12,0.62) 0%, rgba(13,13,12,0.30) 42%, rgba(13,13,12,0) 68%),
    linear-gradient(to top, rgba(13,13,12,0.72) 0%, rgba(13,13,12,0.12) 38%, rgba(13,13,12,0.42) 100%);
}
@media (max-width: 900px) {
  .hero__voile--photo {
    background: linear-gradient(to top, rgba(13,13,12,0.80) 0%, rgba(13,13,12,0.30) 46%, rgba(13,13,12,0.55) 100%);
  }
}

/* Lisibilité de l'en-tête et du hero par-dessus une photographie claire */
.hero .etiquette { color: rgba(247, 245, 240, 0.82); }
.hero .hero__descendre { color: rgba(247, 245, 240, 0.78); }

.entete::before {
  background: linear-gradient(to bottom, rgba(13, 13, 12, 0.66), rgba(13, 13, 12, 0));
}
body:not(.page-simple) .entete:not(.entete--fixe) .bouton--entete {
  /* En-tête transparent : le libellé doit être clair. Sans cela le bouton
     héritait du texte noir du design system, invisible sur une photographie. */
  --b-texte: var(--blanc);
  --b-bord: rgba(247, 245, 240, 0.55);
  background: rgba(13, 13, 12, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(247, 245, 240, 0.55);
}
body:not(.page-simple) .entete:not(.entete--fixe) .bouton--entete:hover {
  background: rgba(13, 13, 12, 0.72);
  border-color: var(--blanc);
}

/* Correctif — textes du hero sur photographie
   .chapeau et .texte portaient la couleur sombre du design system : sur un hero
   photographique ils devenaient illisibles. Le hero est un fond sombre par nature. */
.hero .chapeau { color: rgba(247, 245, 240, 0.88); }
.hero .texte { color: rgba(247, 245, 240, 0.82); }
.hero .etiquette--pierre { color: var(--pierre); }

/* --------------------------------------------------------------------------
   Hero — tout le texte en blanc
   Sur une photographie, les nuances grises du design system perdent en
   lisibilité selon la zone de l'image. Ici, tout passe en blanc, avec une
   ombre portée très large et très douce : invisible comme effet, mais elle
   décolle le texte des zones claires (ciel, pierre au soleil).
   -------------------------------------------------------------------------- */
.hero .etiquette,
.hero .etiquette--pierre,
.hero .chapeau { color: var(--blanc); }
.hero .texte { color: rgba(247, 245, 240, 0.94); }
.hero .hero__descendre { color: rgba(247, 245, 240, 0.92); }

.hero__inner { text-shadow: 0 1px 22px rgba(13, 13, 12, 0.45); }
.hero__inner .bouton { text-shadow: none; }

/* Voile un peu plus présent côté texte */
.hero__voile--photo {
  background:
    linear-gradient(to right, rgba(13,13,12,0.80) 0%, rgba(13,13,12,0.46) 46%, rgba(13,13,12,0) 74%),
    linear-gradient(to top, rgba(13,13,12,0.80) 0%, rgba(13,13,12,0.20) 40%, rgba(13,13,12,0.50) 100%);
}
@media (max-width: 900px) {
  .hero__voile--photo {
    background: linear-gradient(to top, rgba(13,13,12,0.88) 0%, rgba(13,13,12,0.52) 52%, rgba(13,13,12,0.66) 100%);
  }
}

/* Hero d'accueil : le mot VALET occupe la zone du soleil couchant.
   Un voile radial supplémentaire, centré sur le bloc de texte, sécurise
   le contraste sans assombrir la moitié droite de la photographie. */
.hero--plein .hero__voile--photo {
  background:
    radial-gradient(120% 90% at 8% 45%, rgba(13,13,12,0.66) 0%, rgba(13,13,12,0.28) 42%, rgba(13,13,12,0) 72%),
    linear-gradient(to right, rgba(13,13,12,0.72) 0%, rgba(13,13,12,0.40) 46%, rgba(13,13,12,0) 76%),
    linear-gradient(to top, rgba(13,13,12,0.78) 0%, rgba(13,13,12,0.20) 40%, rgba(13,13,12,0.48) 100%);
}
@media (max-width: 900px) {
  .hero--plein .hero__voile--photo {
    background: linear-gradient(to top, rgba(13,13,12,0.88) 0%, rgba(13,13,12,0.52) 52%, rgba(13,13,12,0.66) 100%);
  }
}

/* --------------------------------------------------------------------------
   Notre modèle — les quatre métiers portent le nom de leur pôle
   Les descriptions n'ont pas la même longueur : le nom du pôle est aligné
   en bas de carte pour que les quatre se lisent sur une même ligne.
   -------------------------------------------------------------------------- */
.grille--metiers .service {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.grille--metiers .service__pole {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* ==========================================================================
   V3 — VALET Management : trois niveaux d'intervention
   Composants ajoutés pour la page /exploitation.html. Rien d'autre n'est
   modifié : le reste du site n'utilise pas ces classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bloc de niveau — grand numéro à gauche, contenu à droite
   -------------------------------------------------------------------------- */
.niveau {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
  gap: clamp(1rem, 4vw, 4rem);
}
@media (max-width: 900px) {
  .niveau { grid-template-columns: 1fr; gap: 0.5rem; }
}

.niveau__num {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--pierre);
  opacity: 0.55;
}
@media (max-width: 900px) {
  .niveau__num { font-size: clamp(2.75rem, 14vw, 4rem); }
}

.niveau__accroche {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-style: italic;
  font-weight: 300;
  color: var(--gris);
}
.sombre .niveau__accroche { color: var(--gris-clair); }

/* Niveau 03 — l'accroche est la signature de la maison : traitement fort. */
.niveau__signature {
  margin-top: 1.1rem;
  color: var(--blanc);
}

/* Niveau 02 — légèrement plus présent, sans badge commercial. */
.niveau--accent .niveau__corps {
  border-left: 1px solid var(--pierre);
  padding-left: clamp(1.1rem, 2.2vw, 2rem);
}
@media (max-width: 900px) {
  .niveau--accent .niveau__corps { padding-left: clamp(0.9rem, 4vw, 1.25rem); }
}

.niveau__synthese {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--ligne);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 300;
  line-height: 1.25;
}
.sombre .niveau__synthese { border-top-color: var(--ligne-inv); }

/* --------------------------------------------------------------------------
   Missions d'un niveau — grille réglée, sans effet « carte »
   -------------------------------------------------------------------------- */
.missions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--ligne);
}
@media (max-width: 1000px) { .missions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .missions { grid-template-columns: 1fr; } }
.sombre .missions { border-top-color: var(--ligne-inv); }

.mission {
  padding: clamp(1.1rem, 2vw, 1.5rem) 0 clamp(1.35rem, 2.4vw, 1.85rem);
  border-bottom: 1px solid var(--ligne);
}
.sombre .mission { border-bottom-color: var(--ligne-inv); }

.mission__nom {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pierre);
}
.mission__texte {
  margin-top: 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(13, 13, 12, 0.72);
}
.sombre .mission__texte { color: rgba(247, 245, 240, 0.66); }

/* --------------------------------------------------------------------------
   Matrice des responsabilités — tableau sobre, défilable sur petit écran
   -------------------------------------------------------------------------- */
.matrice__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(13, 13, 12, 0.72);
}
.matrice__legende li { display: flex; align-items: center; gap: 0.55rem; }

.pastille {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
/* Trois marques nettement distinctes d'un coup d'œil :
   disque plein = VALET, cercle vide = partagé, tiret = propriétaire. */
.pastille--valet   { background: var(--pierre); }
.pastille--partage { background: transparent; box-shadow: inset 0 0 0 1px var(--pierre); }
.pastille--proprio {
  width: 12px;
  height: 1px;
  border-radius: 0;
  background: var(--ligne-forte);
  vertical-align: middle;
}

/* Le tableau garde une largeur minimale et défile dans son cadre.
   Sans confinement, sa largeur intrinsèque remonte jusqu'au bloc racine et
   fait défiler toute la page horizontalement sur mobile : `contain: paint`
   sur le cadre et `overflow-x: clip` sur la section l'en empêchent, sans
   supprimer le défilement interne du tableau. */
.matrice-cadre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
  contain: paint;
  overscroll-behavior-x: contain;
}
.section--matrice { overflow-x: clip; }
.matrice-cadre:focus-visible { outline: 1px solid var(--pierre); outline-offset: 4px; }

.matrice {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
}
.matrice thead th {
  padding: 0 0.75rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  line-height: 1.6;
  vertical-align: bottom;
  border-bottom: 1px solid var(--ligne-forte);
}
.matrice thead th:first-child { padding-left: 0; }
.matrice tbody th {
  padding: 0.85rem 1.5rem 0.85rem 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--texte);
  border-bottom: 1px solid var(--ligne);
}
.matrice tbody td {
  width: 17%;
  padding: 0.85rem 0.75rem;
  text-align: center;
  border-bottom: 1px solid var(--ligne);
}
.matrice tbody tr:last-child th,
.matrice tbody tr:last-child td { border-bottom: 0; }

.matrice__renvoi {
  color: var(--pierre);
  font-size: 0.75em;
  vertical-align: super;
}

/* Indice de défilement : uniquement là où le tableau dépasse de son cadre. */
.matrice__indice { display: none; }
@media (max-width: 760px) {
  .matrice__indice {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--pierre);
  }
}

/* Niveau 03 — une fois la grille repliée en une colonne, le visuel 4:5
   occupe presque un écran entier : on le recadre en format paysage. */
@media (max-width: 860px) {
  .niveau .photo.ratio-4-5 { aspect-ratio: 16 / 10; }
}

/* Engagements — l'amorce en gras porte la promesse, la suite l'explique. */
.liste-filet b { font-weight: 500; }

/* Réalisations — panneau d'indicateurs en colonne, et chiffres réels en pleine
   valeur (le gris clair d'origine est réservé aux emplacements « à renseigner »). */
.kpis--pile { grid-template-columns: 1fr; gap: 1.35rem; }
.kpi__valeur--reel { color: var(--texte); }
.sombre .kpi__valeur--reel { color: var(--blanc); }

/* Mention légale publique — même traitement que les notes de production, mais
   conservée dans le HTML généré (voir retirer_notes_prod() dans build.py). */
.mention {
  border-left: 1px solid var(--pierre);
  padding: 0.85rem 0 0.85rem 1.25rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--gris);
}
.mention b { color: var(--pierre); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.625rem; display: block; margin-bottom: 0.3rem; }

/* ─────────────────────────────  LES QUESTIONS  ────────────────────────────
   Accordéon natif (<details>/<summary>), sans JavaScript : la page reste
   lisible et imprimable même script désactivé. Deux colonnes sur grand écran,
   une seule sur mobile. Le signe se retourne à l'ouverture.
   ──────────────────────────────────────────────────────────────────────── */
.questions {
  columns: 2;
  column-gap: clamp(2rem, 4vw, 4rem);
}
.question {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  border-bottom: 1px solid var(--ligne);
}
.questions .question:first-child { border-top: 1px solid var(--ligne); }

.question > summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 2rem 1rem 0;
  position: relative;
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--texte);
  transition: color 0.25s ease;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary:hover { color: var(--pierre); }
.question > summary:focus-visible {
  outline: 1px solid var(--pierre);
  outline-offset: 3px;
}
.question > summary::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 1.55rem;
  width: 11px;
  height: 11px;
  border-right: 1px solid var(--pierre);
  border-bottom: 1px solid var(--pierre);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.question[open] > summary::after { transform: rotate(-135deg); }
.question[open] > summary { color: var(--pierre); }

.question__corps { padding: 0 2rem 1.35rem 0; }
.question__corps p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(13, 13, 12, 0.74);
  max-width: 52ch;
}
.question__corps p + p { margin-top: 0.75rem; }

.sombre .question > summary { color: var(--blanc); }
.sombre .question__corps p { color: rgba(247, 245, 240, 0.7); }

@media (max-width: 900px) {
  .questions { columns: 1; }
  .question > summary { font-size: 1.0625rem; }
}

/* ═══════════════════════════  LES DOSSIERS  ═══════════════════════════════
   Refonte de la présentation des réalisations. L'ancienne grille en maçonnerie
   (six blocs de longueurs inégales sur deux colonnes) laissait des trous et
   cassait l'ordre de lecture ; la colonne d'indicateurs s'arrêtait à mi-hauteur.
   Ici, une structure identique d'un dossier à l'autre, en trois temps :
   en-tête → bandeau de chiffres → récit → note de méthode.
   ════════════════════════════════════════════════════════════════════════ */
.dossier {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--ligne-forte, var(--ligne));
}
.dossier:first-child { border-top: 0; padding-top: 0; }

.dossier__lieu {
  margin-top: 0.9rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Bandeau de chiffres — le cœur du dossier, lisible d'un coup d'œil. */
.dossier__chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.dossier__chiffres .kpi__valeur {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.dossier__chiffres .kpi__label {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--gris);
  max-width: 24ch;
}

/* Récit en trois temps, colonnes de largeur égale. */
.dossier__recit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.dossier__recit h3 {
  font-family: var(--sans, inherit);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pierre);
  margin-bottom: 0.9rem;
}
.dossier__recit p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(13, 13, 12, 0.8);
}
.dossier__recit p + p { margin-top: 0.85rem; }

.dossier__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--ligne);
}
.dossier__pied .petit { max-width: 72ch; margin: 0; }

/* Le dossier d'origine : même structure, signalé par un filet de couleur. */
.dossier--origine { border-left: 2px solid var(--pierre); padding-left: clamp(1.25rem, 2.5vw, 2rem); }

.sombre .dossier__recit p { color: rgba(247, 245, 240, 0.78); }

@media (max-width: 1000px) {
  .dossier__chiffres { grid-template-columns: repeat(2, 1fr); }
  .dossier__recit { grid-template-columns: 1fr; }
  .dossier__recit section { padding-bottom: 0.25rem; }
}
@media (max-width: 560px) {
  .dossier__chiffres { grid-template-columns: 1fr; gap: 1.5rem; }
  .dossier__chiffres .kpi__label { max-width: none; }
}

/* ───────────────────────────  TYPOLOGIE  ──────────────────────────────────
   Table d'entrée des dossiers : le visiteur doit se reconnaître d'un coup
   d'œil dans l'un des points de départ, puis sauter au dossier concerné.
   ──────────────────────────────────────────────────────────────────────── */
.typologie { display: block; }
.typologie li { border-bottom: 1px solid var(--ligne); }
.typologie li:first-child { border-top: 1px solid var(--ligne); }
.typologie a {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.4rem 2rem;
  padding: 1.15rem 2rem 1.15rem 0;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.25s ease;
}
.typologie a:hover { background: rgba(162, 141, 107, 0.07); }
.typologie a:focus-visible { outline: 1px solid var(--pierre); outline-offset: 2px; }
.typologie a::after {
  content: "→";
  position: absolute;
  right: 4px;
  top: 1.15rem;
  color: var(--pierre);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.typologie a:hover::after, .typologie a:focus-visible::after { opacity: 1; transform: none; }

.typologie__profil {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.3;
}
.typologie__cas { font-size: 0.875rem; line-height: 1.55; color: var(--gris); }
.typologie__issue {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--pierre);
}

@media (max-width: 820px) {
  .typologie a {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-right: 1.5rem;
  }
  .typologie__profil { font-size: 1rem; }
}