/* ==========================================================================
   Orezia — maquette privée V0.4 (spec Alex V0.1, V0.2, V0.4 du 03/10/2026)
   Feuille unique, mobile d'abord, aucune dépendance.
   DA : docs/visual-system.md + assets/INVENTAIRE.md — palette et polices existantes.

   1. Polices            2. Jetons            3. Base
   4. Typographie        5. Boutons et liens  6. En-tête et menu
   7. Ouvertures de page 8. Libellés de schéma
   9. Film, questions                        10. Conversion
  11. Équipe            12. Nous découvrir    13. Contact et formulaires
  14. Espace membre     15. Pages secondaires 16. Pied de page, bandeau
  17. Panneau « lien à confirmer », accès bas d'écran
  18. Apparitions       19. Mouvement réduit
   ========================================================================== */

/* 1. Polices ------------------------------------------------------------- */
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/EBGaramond-latin-normal.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/EBGaramond-latin-italic.woff2") format("woff2");
  font-weight: 400 800; font-style: italic; font-display: swap;
}

/* 2. Jetons -------------------------------------------------------------- */
:root {
  /* Couleurs existantes (docs/visual-system.md) */
  --ivoire: #F7F6F1;        /* fond */
  --blanc: #FCFCFA;         /* surface */
  --vert-profond: #12351F;  /* marque : bouton principal, bandeau de conversion, pied */
  --vert: #18452C;
  --vert-clair: #326C4D;    /* liens, états actifs */
  --or: #BCA785;            /* filets 1px, sur-titres sur vert uniquement */
  --or-texte: #7D6437;      /* sur-titres sur fond clair */
  --encre: #202622;         /* texte principal */
  --mousse: #737A75;        /* texte secondaire, jamais sous 16px */
  --bordure: #DDDCD5;
  --vert-doux: #EAF0EB;     /* sections teintées */
  --erreur: #8A2B1F;

  --f-titre: "EB Garamond", Garamond, "Adobe Garamond Pro", Georgia, serif;
  --f-texte: "EB Garamond", Garamond, "Adobe Garamond Pro", Georgia, serif;
  --f-ui: "EB Garamond", Garamond, "Adobe Garamond Pro", Georgia, serif; /* V0.4 : Garamond partout, interface comprise */

  /* Grille (spec §4.3) : 1200px, marges 20 / 32 / 64, sections 56 / 96 */
  --largeur: 75rem;
  --gouttiere: 1.25rem;
  --section: clamp(3.5rem, 2.29rem + 4.94vw, 6rem);
  --entete: 4.25rem;        /* 68px */
  --rayon: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 40rem) { :root { --gouttiere: 2rem; } }
@media (min-width: 64rem) { :root { --gouttiere: 4rem; --entete: 5rem; } }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 1.1875rem;           /* 19px — Garamond, œil plus petit */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 48rem) { body { font-size: 1.25rem; } }   /* 20px */
main { flex: 1 0 auto; padding-top: var(--entete); }
main:focus { outline: none; }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

a { color: var(--vert-clair); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--vert-profond); }

:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 3px; }
.sur-vert :focus-visible, .pied :focus-visible { outline-color: var(--or); }

::selection { background: var(--vert-profond); color: var(--ivoire); }

[id] { scroll-margin-top: calc(var(--entete) + 1.5rem); }

.cadre { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.cadre--texte { width: min(100% - 2 * var(--gouttiere), 48rem); margin-inline: auto; }

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

.evitement {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 200;
  padding: .85rem 1.25rem;
  background: var(--vert-profond);
  color: var(--ivoire);
  font-family: var(--f-ui);
  font-size: 1rem;
  text-decoration: none;
  transform: translateY(-250%);
}
.evitement:focus { transform: none; color: var(--ivoire); }

.section { padding-block: var(--section); }
.section--blanc { background: var(--blanc); }
.section--doux { background: var(--vert-doux); }
.sur-vert { background: var(--vert-profond); color: var(--ivoire); }

/* 4. Typographie --------------------------------------------------------- */
.h1, .h2, .h3 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 400;
  color: var(--vert-profond);
  text-wrap: balance;
  font-optical-sizing: auto;
}
.h1 { font-size: clamp(2.375rem, 1.59rem + 3.21vw, 4rem); line-height: 1.08; letter-spacing: -.015em; }
.h2 { font-size: clamp(1.875rem, 1.51rem + 1.48vw, 2.625rem); line-height: 1.15; letter-spacing: -.01em; }
.h3 { font-size: clamp(1.4375rem, 1.35rem + .37vw, 1.625rem); line-height: 1.2; }
.sur-vert .h1, .sur-vert .h2, .sur-vert .h3 { color: var(--ivoire); }

.label {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1.25rem;
  font-family: var(--f-ui);
  font-size: .875rem;                 /* 14px, minimum spec */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-texte);
}
.label::before { content: ""; width: 2rem; height: 1px; background: var(--or); flex: none; }
.sur-vert .label { color: var(--or); }

.texte { max-width: 36em; }
.texte > * + * { margin-top: 1em; }
.micro {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--encre);
  max-width: 32em;
}
.sur-vert .micro { color: rgba(247, 246, 241, .8); }
.accroche {
  font-style: italic;
  font-size: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
  line-height: 1.5;
  color: var(--encre);
  max-width: 30em;
}
.prudence {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  padding-top: 1rem;
  border-top: 1px solid var(--bordure);
  font-size: 1rem;
  color: var(--encre);
  max-width: 34em;
}
.prudence::before {
  content: "";
  flex: none;
  width: .5rem; height: .5rem;
  border: 1px solid var(--vert-clair);
  border-radius: 50%;
}

/* Placeholder interne explicite (donnée ou média manquant) */
.a-integrer {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border: 1px dashed var(--vert-clair);
  background: var(--blanc);
  font-family: var(--f-ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--vert-profond);
}

/* 5. Boutons et liens ---------------------------------------------------- */
/* Deux styles : plein vert profond (inversé ivoire sur vert) et lien souligné. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 3.25rem;
  padding: .75rem 1.75rem;
  border: 1px solid var(--vert-profond);
  border-radius: var(--rayon);
  background: var(--vert-profond);
  color: var(--ivoire);
  font-family: var(--f-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover { background: var(--vert); border-color: var(--vert); color: var(--ivoire); }
.btn--petit { min-height: 3rem; padding: .6rem 1.25rem; font-size: .9375rem; }
.sur-vert .btn { background: var(--ivoire); border-color: var(--ivoire); color: var(--vert-profond); }
.sur-vert .btn:hover { background: var(--blanc); border-color: var(--blanc); color: var(--vert-profond); }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }

.lien {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--vert-profond);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.lien:hover { color: var(--vert-clair); text-decoration-color: currentColor; }
.lien--discret { font-size: .9375rem; color: var(--vert-clair); }
.sur-vert .lien { color: var(--ivoire); }
.sur-vert .lien:hover { color: var(--ivoire); text-decoration-color: var(--ivoire); }

.fleche {
  display: inline-block;
  position: relative;
  width: 1rem; height: 1px;
  background: currentColor;
  flex: none;
  transition: transform .3s var(--ease);
}
.fleche::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .fleche, .lien:hover .fleche { transform: translateX(3px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 2rem;
}

/* 6. En-tête et menu ----------------------------------------------------- */
.entete-site {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--ivoire);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.entete-site.is-defile, .menu-ouvert .entete-site { border-bottom-color: var(--bordure); }
.entete-site__barre {
  height: var(--entete);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.marque { flex: none; display: block; margin-right: auto; padding-block: .25rem; }
.marque { padding-block: .75rem; }
.marque img { height: 1.375rem; width: auto; }
@media (min-width: 64rem) { .marque img { height: 1.625rem; } }

.nav, .entete-site__actions { display: none; }
@media (min-width: 70rem) {
  .nav { display: block; }
  .entete-site__actions { display: flex; align-items: center; gap: 1.75rem; }
}
.nav__liste { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.nav__liste a, .nav__membre {
  position: relative;
  display: inline-block;
  padding-block: .75rem;
  font-family: var(--f-ui);
  font-size: .9375rem;
  font-weight: 450;
  letter-spacing: .01em;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
.nav__liste a::after, .nav__membre::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .45rem;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__liste a:hover::after, .nav__membre:hover::after { transform: scaleX(1); }
.nav__liste a[aria-current="page"], .nav__membre[aria-current="page"] { color: var(--vert-profond); }
.nav__liste a[aria-current="page"]::after, .nav__membre[aria-current="page"]::after { transform: scaleX(1); background: var(--vert-profond); }
.nav__membre { color: var(--vert-clair); }
.nav__membre:hover { color: var(--vert-profond); }
.entete-site__actions::before {
  content: "";
  width: 1px; height: 1.5rem;
  background: var(--bordure);
}

.bouton-menu {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 3rem;
  padding: 0 .25rem 0 .75rem;
  margin-right: -.25rem;
  border: 0;
  background: none;
  font-family: var(--f-ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert-profond);
}
.bouton-menu__traits { position: relative; width: 1.5rem; height: 9px; }
.bouton-menu__traits::before, .bouton-menu__traits::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.bouton-menu__traits::before { top: 0; }
.bouton-menu__traits::after { top: 8px; }
.bouton-menu[aria-expanded="true"] .bouton-menu__traits::before { top: 4px; transform: rotate(45deg); }
.bouton-menu[aria-expanded="true"] .bouton-menu__traits::after { top: 4px; transform: rotate(-45deg); }
@media (min-width: 70rem) { .bouton-menu { display: none; } }

.menu-mobile {
  position: fixed;
  inset: var(--entete) 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--gouttiere) max(1.5rem, env(safe-area-inset-bottom));
  background: var(--ivoire);
  overflow-y: auto;
}
.menu-mobile__liste { border-top: 1px solid var(--bordure); }
.menu-mobile__liste li { border-bottom: 1px solid var(--bordure); }
.menu-mobile__liste a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--f-titre);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  color: var(--vert-profond);
  text-decoration: none;
}
.menu-mobile__liste a[aria-current="page"] { font-style: normal; }
.menu-mobile__liste a[aria-current="page"]::after {
  content: "";
  align-self: center;
  flex: 1;
  max-width: 3rem;
  height: 1px;
  background: var(--vert-profond);
}
.menu-mobile__bas { margin-top: auto; padding-top: 2rem; display: grid; gap: .5rem; }
.menu-mobile__bas .btn { width: 100%; }
.menu-mobile__bas .lien { justify-content: center; }
.menu-mobile__bas .lien[aria-current="page"] { font-style: normal; }
.menu-ouvert body { overflow: hidden; }

/* 7. Ouvertures de page -------------------------------------------------- */
/* H01 — texte ~55 % / photo ~45 % ; mobile : titre, sous-titre, paragraphe, actions, puis photo (V0.4) */
.ouverture {
  display: grid;
  padding-block: 2.25rem var(--section);
  grid-template-areas: "label" "titre" "sous" "para" "actions" "photo";
}
.ouverture__label { grid-area: label; }
.ouverture__titre { grid-area: titre; }
.ouverture__sous { grid-area: sous; margin-top: 1.25rem; }
.ouverture__para { grid-area: para; margin-top: 1.25rem; }
.ouverture__actions { grid-area: actions; margin-top: 1.75rem; }
.ouverture__photo { grid-area: photo; margin-top: 2.25rem; }
.ouverture__photo .photo { aspect-ratio: 5 / 4; }
@media (max-width: 29.99rem) {
  .ouverture__actions { flex-direction: column; align-items: stretch; gap: .25rem; }
  .ouverture__actions .lien { justify-content: center; }
}
@media (min-width: 52rem) {
  .ouverture {
    padding-top: clamp(2.5rem, 4vw, 4rem);
    column-gap: clamp(3rem, 6vw, 6rem);
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas:
      ".       photo"
      "label   photo"
      "titre   photo"
      "sous    photo"
      "para    photo"
      "actions photo"
      ".       photo";
  }
  .ouverture__photo { margin-top: 0; }
  .ouverture__photo .photo { aspect-ratio: 4 / 5; }
  .ouverture__sous { margin-top: 1.5rem; }
  .ouverture__para { margin-top: 1.25rem; }
  .ouverture__actions { margin-top: 2.25rem; }
}
.ouverture__sous {
  font-size: clamp(1.1875rem, 1.08rem + .45vw, 1.4375rem);
  line-height: 1.45;
  color: var(--encre);
  max-width: 30em;
}
.ouverture__para { max-width: 34em; }

/* En-tête de page avec ou sans média */
.tete-page {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section);
  align-items: center;
}
.tete-page__texte > * + * { margin-top: 1.25rem; }
.tete-page__texte .label + .h1 { margin-top: 0; }
.tete-page__texte .actions { margin-top: 2rem; }
.tete-page--compacte { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 52rem) {
  .tete-page--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); }
}

/* Photos : conteneur à ratio fixe, cadrage par object-position */
.photo { position: relative; overflow: hidden; background: var(--bordure); }
.photo img, .photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos-m, var(--pos, 50% 50%));
}
@media (min-width: 52rem) {
  .photo img, .photo video { object-position: var(--pos, 50% 50%); }
}
.photo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 4rem; height: 1px;
  background: var(--or);
}
.legende {
  margin-top: .85rem;
  font-family: var(--f-ui);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--encre);
}

/* 8. Libellés de schéma (contact) ---------------------------------------- */
.schema__libelle {
  font-family: var(--f-titre);
  font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  line-height: 1.2;
  color: var(--vert-profond);
}

/* 9. Film, questions      ---------------------------------------------- */

/* E08 — film Orezia (lecteur réel) */
.film { margin: 0; }
.film__cadre { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vert-profond); box-shadow: 0 30px 60px -30px rgba(18, 53, 31, .45); }
.film__cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film__cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,53,31,0) 45%, rgba(18,53,31,.55) 100%); pointer-events: none; transition: opacity .5s var(--ease); }
.film.is-lecture .film__cadre::after { opacity: 0; }
.film__lecture {
  position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .9rem 1.5rem .9rem .95rem; border: 1px solid rgba(247, 246, 241, .55); border-radius: 999px;
  background: rgba(18, 53, 31, .55); color: var(--ivoire, #F7F6F1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 1.0625rem/1 var(--f-ui); letter-spacing: .02em; cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease), opacity .4s var(--ease);
}
.film__lecture:hover { background: rgba(18, 53, 31, .8); transform: translate(-50%, -50%) scale(1.03); }
.film__lecture:focus-visible { outline: 2px solid #F7F6F1; outline-offset: 3px; }
.film__icone { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #BCA785; flex: none; }
.film__icone::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .45rem 0 .45rem .72rem; border-color: transparent transparent transparent #12351F; }
.film.is-lecture .film__lecture { opacity: 0; pointer-events: none; }
.film__legende { margin-top: .85rem; color: var(--texte-doux, #5b625d); }
@media (prefers-reduced-motion: reduce) { .film__lecture, .film__cadre::after { transition: none; } }


/* E10 — accordéons */
.questions { display: grid; gap: 2rem; }
.page-accueil .section--blanc:has(> .questions) { background: var(--ivoire); }
@media (min-width: 52rem) {
  .questions { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); }
}
.accordeon { border-top: 1px solid var(--bordure); }
.accordeon__item { border-bottom: 1px solid var(--bordure); }
.accordeon__titre { margin: 0; font: inherit; }
.accordeon__bouton {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
  padding: 1.25rem 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--f-titre);
  font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem);
  line-height: 1.25;
  color: var(--vert-profond);
}
.accordeon__bouton:hover { color: var(--vert-clair); }
.accordeon__signe { position: relative; flex: none; width: 1rem; height: 1rem; }
.accordeon__signe::before, .accordeon__signe::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.accordeon__signe::after { transform: rotate(90deg); }
.accordeon__bouton[aria-expanded="true"] .accordeon__signe::after { transform: rotate(0deg); }
.accordeon__panneau { padding: 0 0 1.75rem; max-width: 38em; }

/* 10. Conversion --------------------------------------------------------- */
/* Bandeau sombre unique par page, contenu dans la grille (séparé du pied vert) */
.conversion { padding-bottom: var(--section); }
.conversion__panneau {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 6vw, 5.5rem);
  background: var(--vert-profond);
  color: var(--ivoire);
  overflow: hidden;
}
.conversion__panneau::before {
  content: "";
  position: absolute;
  top: 0; left: clamp(1.5rem, 6vw, 5.5rem);
  width: 4rem; height: 1px;
  background: var(--or);
}
.conversion__grille { display: grid; gap: 2rem; }
@media (min-width: 52rem) {
  .conversion__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); align-items: end; }
}
.conversion__texte > * + * { margin-top: 1.25rem; }
.conversion__actions { display: grid; gap: .5rem; justify-items: start; }
.conversion__actions .btn { margin-bottom: .5rem; }
@media (max-width: 29.99rem) { .conversion__actions, .conversion__actions .btn { justify-items: stretch; width: 100%; } }
.conversion__tertiaire {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(188, 167, 133, .45);
}
.conversion__embleme {
  position: absolute;
  right: clamp(1.5rem, 6vw, 5.5rem);
  top: clamp(2rem, 5vw, 4.5rem);
  width: 1.75rem;
}
@media (max-width: 51.99rem) { .conversion__embleme { display: none; } }

/* Pont clair (D04) */
.pont {
  display: grid;
  gap: 1.5rem;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--vert-doux);
}
@media (min-width: 52rem) {
  .pont { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; }
}
.pont__texte > * + * { margin-top: 1rem; }

/* 11. Équipe ------------------------------------------------------------- */
.equipe-tete {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(2.25rem, 5vw, 4.5rem) var(--section);
}
.equipe-tete__texte > * + * { margin-top: 1.25rem; }
.equipe-tete__texte .label + .h1 { margin-top: 0; }
.equipe-tete__texte .actions { margin-top: 2rem; }


.portraits { display: grid; gap: clamp(4rem, 8vw, 5rem); }
@media (min-width: 52rem) {
  .portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}
.portrait .photo { aspect-ratio: 4 / 5; }
.portrait__nom { margin-top: 2rem; }
.portrait__role {
  margin-top: .5rem;
  font-style: italic;
  font-size: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
  color: var(--encre);
}
.portrait .texte { margin-top: 1.5rem; }
.portrait .lien { margin-top: 1.25rem; }

.trois-colonnes { display: grid; margin-top: clamp(2.5rem, 5vw, 4rem); }
.trois-colonnes li {
  position: relative;
  padding: 1.25rem 0 1.25rem 2.25rem;
  border-left: 1px solid var(--vert-profond);
}
.trois-colonnes li::before {
  content: "";
  position: absolute;
  left: -.35rem; top: 1.6rem;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: var(--ivoire);
  border: 1px solid var(--vert-profond);
}
.section--blanc .trois-colonnes li::before { background: var(--blanc); }
.section--doux .trois-colonnes li::before { background: var(--vert-doux); }
.trois-colonnes .schema__libelle { display: block; max-width: 14em; }
@media (min-width: 48rem) {
  .trois-colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .trois-colonnes li { padding: 2.25rem 0 0; border-left: 0; border-top: 1px solid var(--vert-profond); }
  .trois-colonnes li::before { left: 0; top: -.35rem; }
}

.bloc-texte-titre { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) {
  .bloc-texte-titre { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}

.societes { display: grid; margin-top: 2rem !important; border-top: 1px solid var(--bordure); }
.societe { display: grid; gap: .25rem; padding: 1.25rem 0 1rem; border-bottom: 1px solid var(--bordure); }
.societe__nom { font-family: var(--f-titre); font-size: 1.375rem; line-height: 1.2; color: var(--encre); }
.societe__note { font-family: var(--f-ui); font-size: .875rem; color: var(--or-texte); }
.societe .lien { justify-self: start; }
.societe { grid-template-columns: 7rem 1fr; column-gap: 1.25rem; align-items: center; }
.societe__logo { grid-row: 1 / span 2; width: 7rem; height: 7rem; aspect-ratio: 1; object-fit: contain; border-radius: 2px; }
@media (min-width: 48rem) { .societe { grid-template-columns: 8.5rem 1fr; } .societe__logo { width: 8.5rem; height: 8.5rem; } }

/* 12. Nous découvrir ---------------------------------------------------- */
.decouvrir-photo .photo { aspect-ratio: 16 / 9; }
@media (min-width: 52rem) { .decouvrir-photo .photo { aspect-ratio: 4 / 3; } }

.lettres { display: grid; gap: 2.5rem; grid-template-areas: "texte" "form" "apercu"; }
.lettres__texte { grid-area: texte; }
.lettres .formulaire { grid-area: form; }
.lettres .apercu-lettre { grid-area: apercu; }
@media (min-width: 52rem) {
  .lettres {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "texte form" "apercu form";
    gap: 2.5rem clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}
.lettres__texte > * + * { margin-top: 1.25rem; }
.lettres__phrase {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.625rem);
  line-height: 1.3;
  color: var(--vert-profond);
  max-width: 22em;
}
.apercu-lettre {
  max-width: 24rem;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
}
.apercu-lettre .a-integrer { margin-bottom: 1.25rem; }
.apercu-lettre__embleme { width: 1.25rem; margin-bottom: 1rem; }
.apercu-lettre__ligne { height: .5rem; background: var(--bordure); margin-top: .55rem; }
.apercu-lettre__ligne--titre { height: .9rem; width: 72%; background: var(--bordure); margin-top: 0; margin-bottom: 1rem; }
.apercu-lettre__ligne--courte { width: 60%; }

.reseaux { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 52rem) {
  .reseaux { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 1.5rem 2rem; }
  .reseau--principal { grid-row: span 2; }
}
.reseau { display: grid; background: var(--blanc); border: 1px solid var(--bordure); align-content: start; }
.reseau--secondaire { grid-template-columns: 7rem 1fr; }
@media (min-width: 30rem) { .reseau--secondaire { grid-template-columns: 9rem 1fr; } }
.reseau .photo { aspect-ratio: 16 / 9; }
.reseau--secondaire .photo { aspect-ratio: auto; height: 100%; min-height: 12rem; }
.reseau--secondaire .photo::after { display: none; }
.reseau__corps { padding: 1.5rem 1.25rem 1.25rem; display: grid; gap: .6rem; align-content: start; }
@media (min-width: 30rem) { .reseau__corps { padding: 1.5rem 1.5rem 1.25rem; } }
.reseau--principal .reseau__corps { padding: 2rem; }
.reseau__corps .h3 { font-size: clamp(1.3125rem, 1.2rem + .4vw, 1.625rem); }
.reseau--principal .reseau__corps .h3 { font-size: clamp(1.4375rem, 1.3rem + .6vw, 1.875rem); }
.reseau__corps p { font-size: 1rem; }

/* 13. Contact et formulaires -------------------------------------------- */

.rdv { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) {
  .rdv { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .rdv__texte { position: sticky; top: calc(var(--entete) + 2rem); }
}
.rdv__texte > * + * { margin-top: 1.25rem; }

.formulaire {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--blanc);
  border: 1px solid var(--bordure);
}
.formulaire::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 4rem; height: 1px;
  background: var(--or);
}
.champs { display: grid; gap: 1.75rem; }
.champ { display: grid; gap: .5rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.champ__label, .champ legend {
  padding: 0;
  font-family: var(--f-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--encre);
}
.champ legend { margin-bottom: .75rem; }
.champ__option { font-weight: 400; font-style: italic; color: var(--encre); }
.champ input[type="text"], .champ input[type="email"], .champ textarea, .panneau-lien textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: .8rem 1rem;
  border: 1px solid var(--mousse);
  border-radius: var(--rayon);
  background: var(--ivoire);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.45;
  transition: border-color .25s, background-color .25s;
}
.champ textarea { min-height: 6.5rem; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--mousse); opacity: 1; }
.champ input:hover, .champ textarea:hover { border-color: var(--mousse); }
.champ input:focus, .champ textarea:focus, .panneau-lien textarea:focus { border-color: var(--vert-profond); background: var(--blanc); }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 1px; }
.champ [aria-invalid="true"] { border-color: var(--erreur) !important; }
.erreur {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin: 0;
  font-family: var(--f-ui);
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--erreur);
}
.erreur:empty { display: none; }

.options { display: grid; gap: .5rem; }
@media (min-width: 36rem) { .options--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.option { position: relative; display: block; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option span {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 3.25rem;
  height: 100%;
  padding: .7rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--ivoire);
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.option span::before {
  content: "";
  flex: none;
  width: 1.1rem; height: 1.1rem;
  border: 1px solid var(--mousse);
  border-radius: 50%;
  background: var(--blanc);
  transition: box-shadow .25s, border-color .25s, background-color .25s;
}
.option:hover span { border-color: var(--vert-clair); }
.option input:checked + span { border-color: var(--vert-profond); background: var(--vert-doux); }
.option input:checked + span::before { border-color: var(--vert-profond); background: var(--vert-profond); box-shadow: inset 0 0 0 3px var(--vert-doux); }
.option input:focus-visible + span { outline: 2px solid var(--vert-clair); outline-offset: 2px; }
.options.is-invalide .option span { border-color: rgba(138, 43, 31, .55); }

.case { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; font-size: 1rem; line-height: 1.5; cursor: pointer; }
.case input {
  width: 1.375rem; height: 1.375rem;
  margin: .1rem 0 0;
  accent-color: var(--vert-profond);
  cursor: pointer;
}
.case input[aria-invalid="true"] { outline: 2px solid var(--erreur); outline-offset: 2px; }
.formulaire__pied { display: grid; gap: 1rem; margin-top: 2rem; }
.formulaire__pied .btn { justify-self: start; }
@media (max-width: 29.99rem) { .formulaire__pied .btn { justify-self: stretch; } }

.etat {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bordure);
  border-left: 2px solid var(--vert-profond);
  background: var(--ivoire);
  font-family: var(--f-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--encre);
}
.etat:empty { display: none; }
.etat--erreur { border-left-color: var(--erreur); }
.etat--chargement::before {
  content: "";
  flex: none;
  width: 1rem; height: 1rem;
  margin-top: .2rem;
  border: 1px solid var(--bordure);
  border-top-color: var(--vert-profond);
  border-radius: 50%;
  animation: tourne 1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.etat .lien { min-height: 0; margin-top: .25rem; }
.etat__corps { display: grid; gap: .25rem; }

.apercu-calendrier { display: grid; gap: 1rem; margin-top: 1.5rem; }
.apercu-calendrier > div { display: grid; gap: 1rem; }
.apercu-calendrier__cadre {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: 1.5rem;
  border: 1px dashed var(--bordure);
  background: var(--blanc);
}

.interlocuteurs { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 52rem) { .interlocuteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.interlocuteur {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  align-items: start;
}
@media (min-width: 30rem) { .interlocuteur { grid-template-columns: 8.5rem 1fr; gap: 1.75rem; padding: 1.75rem; } }
.interlocuteur .photo { aspect-ratio: 4 / 5; }
.interlocuteur .photo::after { display: none; }
.interlocuteur__corps { display: grid; gap: .75rem; align-content: start; }
.interlocuteur__corps .h3 { font-size: clamp(1.375rem, 1.25rem + .5vw, 1.75rem); }
.interlocuteur__corps p { font-size: 1rem; }
.interlocuteur__action { grid-column: 1 / -1; }
.interlocuteur__action .btn { width: 100%; }
@media (min-width: 30rem) { .interlocuteur__action { grid-column: 2; } .interlocuteur__action .btn { width: auto; } }
.whatsapp-note { margin-top: 1.75rem; }

/* 14. Espace membre ------------------------------------------------------ */
.membre { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section); }
@media (min-width: 56rem) {
  .membre { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}
.membre__texte > * + * { margin-top: 1.25rem; }
.membre__texte .label + .h1 { margin-top: 0; }
.membre__texte .actions { margin-top: 2.25rem; }
.blocs-membre { display: grid; gap: 1rem; margin-top: 2.25rem !important; }
@media (min-width: 40rem) { .blocs-membre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bloc-membre { padding: 1.5rem; background: var(--blanc); border: 1px solid var(--bordure); }
.bloc-membre .h3 { font-size: clamp(1.3125rem, 1.2rem + .4vw, 1.5rem); margin-top: .85rem; }
.bloc-membre p { margin-top: .5rem; font-size: 1rem; }
.badge {
  display: inline-block;
  padding: .25rem .6rem;
  border: 1px solid var(--vert-clair);
  border-radius: var(--rayon);
  background: var(--vert-doux);
  font-family: var(--f-ui);
  font-size: .875rem;
  font-weight: 500;
  color: var(--vert-profond);
}
.badge--attente { border-style: dashed; background: var(--ivoire); }

.apercu-membre { border: 1px solid var(--bordure); background: var(--blanc); }
.apercu-membre__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--bordure);
}
.apercu-membre__points { display: flex; gap: .35rem; }
.apercu-membre__points span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bordure); }
.apercu-membre__corps { display: grid; grid-template-columns: 4rem 1fr; min-height: 20rem; }
.apercu-membre__cote { padding: 1rem .75rem; border-right: 1px solid var(--bordure); display: grid; gap: .6rem; align-content: start; }
.apercu-membre__cote img { width: 1.1rem; margin-bottom: .5rem; }
.apercu-membre__cote span { height: .45rem; background: var(--bordure); }
.apercu-membre__cote span:first-of-type { background: var(--bordure); }
.apercu-membre__zone { padding: 1.25rem; }
.apercu-membre__titre { height: .75rem; width: 45%; background: var(--bordure); margin-bottom: 1.25rem; }
.apercu-membre__tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.apercu-membre__tuile { display: grid; gap: .4rem; }
.apercu-membre__image { position: relative; aspect-ratio: 16 / 10; background: var(--vert-doux); border: 1px solid var(--bordure); }
.apercu-membre__image::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent rgba(18, 53, 31, .4);
}
.apercu-membre__tuile span { height: .4rem; background: var(--bordure); }
.apercu-membre__tuile span + span { width: 60%; }
.apercu-membre__verrou { margin-top: 1rem; padding: .75rem; border: 1px dashed var(--bordure); display: grid; gap: .4rem; }
.apercu-membre__verrou span { height: .4rem; background: var(--bordure); }
.apercu-membre__verrou span + span { width: 70%; }
.apercu-membre + .legende { margin-top: .85rem; }

/* 15. Pages secondaires -------------------------------------------------- */
.reglementaire { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section); }
.reglementaire > * + * { margin-top: 1.5rem; }
.reglementaire .label + .h1 { margin-top: 0; }
.rubriques { margin-top: 2.5rem !important; border-top: 1px solid var(--bordure); }
.rubriques li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--bordure);
}
.rubriques strong { font-family: var(--f-titre); font-weight: 400; font-size: 1.25rem; line-height: 1.3; color: var(--vert-profond); }
.rubriques span { font-family: var(--f-ui); font-size: .875rem; color: var(--or-texte); }
@media (max-width: 29.99rem) { .rubriques li { grid-template-columns: 1fr; gap: .25rem; } }
.reglementaire .micro { margin-top: 2rem; }

.introuvable { padding-block: clamp(4rem, 12vw, 9rem) var(--section); }
.introuvable > * + * { margin-top: 1.5rem; }
.introuvable .label + .h1 { margin-top: 0; }
.introuvable .actions { margin-top: 2.25rem; }

/* 16. Pied de page et bandeau ------------------------------------------- */
.pied {
  background: var(--vert-profond);
  color: var(--ivoire);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.25rem;
}
.pied a { color: var(--ivoire); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .35em; }
.pied__haut { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(188, 167, 133, .35); }
@media (min-width: 48rem) {
  .pied__haut { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 3rem; }
}
.pied__logo { width: 10.5rem; height: auto; margin-bottom: 1.5rem; }
.pied__signature {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.35;
  max-width: 16em;
}
.pied__titre {
  margin: 0 0 .75rem;
  font-family: var(--f-ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
}
.pied__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--f-ui);
  font-size: 1rem;
}
.pied__liste a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .35em; }
.pied__bas { display: grid; gap: 1rem; padding-top: 2rem; max-width: 48rem; }
.pied__bas p { font-size: 1rem; color: rgba(247, 246, 241, .85); }
.pied__identite {
  font-family: var(--f-ui);
  font-size: 1rem !important;
  letter-spacing: .01em;
  line-height: 1.65;
  color: rgba(247, 246, 241, .82) !important;
}

.bandeau-maquette {
  margin: 0;
  padding: .85rem var(--gouttiere);
  background: var(--vert);
  color: rgba(247, 246, 241, .88);
  font-family: var(--f-ui);
  font-size: .875rem;
  line-height: 1.4;
  text-align: center;
}

/* 17. Panneau « lien à confirmer » et accès bas d'écran ---------------- */
.panneau-lien {
  width: min(100% - 2.5rem, 33rem);
  max-height: calc(100% - 2.5rem);
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--ivoire);
  color: var(--encre);
  box-shadow: 0 30px 80px -30px rgba(18, 53, 31, .5);
}
.panneau-lien::backdrop { background: rgba(18, 53, 31, .55); }
.panneau-lien__corps { position: relative; padding: 2rem 1.5rem 1.5rem; }
@media (min-width: 30rem) { .panneau-lien__corps { padding: 2.5rem 2.25rem 2rem; } }
.panneau-lien__corps::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4rem; height: 1px;
  background: var(--or);
}
.panneau-lien__corps > * + * { margin-top: 1rem; }
.panneau-lien .label { margin-bottom: 0; }
.panneau-lien .h2 { font-size: clamp(1.5rem, 1.35rem + .8vw, 1.875rem); padding-right: 2.5rem; }
.panneau-lien__cible { font-size: 1rem; }
.panneau-lien__fermer-x {
  position: absolute;
  top: .75rem; right: .75rem;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin: 0 !important;
  border: 0;
  background: none;
  color: var(--vert-profond);
}
.panneau-lien__fermer-x svg { width: 1rem; height: 1rem; }
.panneau-lien__message { display: grid; gap: .5rem; margin-top: 1.5rem !important; }
.panneau-lien__message label { font-family: var(--f-ui); font-size: 1rem; font-weight: 500; }
.panneau-lien textarea { min-height: 7.5rem; resize: vertical; }
.panneau-lien__actions { margin-top: 1.75rem !important; }

.acces-contact {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 1.5rem var(--gouttiere) max(.85rem, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(247, 246, 241, 0), rgba(247, 246, 241, .97) 45%);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .35s var(--ease), visibility 0s linear .35s;
}
.acces-contact.is-visible { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
.acces-contact .btn { min-height: 3rem; padding-inline: 2.25rem; box-shadow: 0 12px 30px -16px rgba(18, 53, 31, .6); }
@media (min-width: 64rem) { .acces-contact { display: none; } }

/* 18. Apparitions -------------------------------------------------------- */
/* Seulement si JS actif : sans JS, tout reste visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* 19. Mouvement réduit --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .entete-site, .acces-contact, .panneau-lien, .passage, .passage-rappel { display: none !important; }
  main { padding-top: 0; }
}

/* 20. V0.4 — Garamond partout (spec Alex 03/10) ------------------------- */
/* EB Garamond porte aussi l'interface : œil plus petit qu'un sans-serif,
   donc tailles d'interface légèrement remontées, poids 500, capitales espacées. */
.btn { font-size: 1.0625rem; font-weight: 500; letter-spacing: .01em; }
.btn--petit { font-size: 1rem; }
.lien { font-size: 1.0625rem; font-weight: 500; letter-spacing: .005em; }
.lien--discret { font-size: 1rem; font-weight: 400; font-style: italic; }
.nav__liste a, .nav__membre { font-size: 1.0625rem; font-weight: 500; letter-spacing: .005em; }
.label, .pied__titre, .bouton-menu { font-size: .875rem; font-weight: 500; letter-spacing: .16em; }
.champ__label, .champ legend, .panneau-lien__message label { font-size: 1.0625rem; }
.option span, .case { font-size: 1.0625rem; }
.pied__liste a { font-size: 1.0625rem; }
.legende, .erreur, .badge, .societe__note, .rubriques span,
.bandeau-maquette, .a-integrer, .etat { font-size: 1rem; }
.badge, .a-integrer { letter-spacing: .01em; }
.evitement { font-size: 1.0625rem; }

/* 21. V0.4 — Accueil ------------------------------------------------------ */
/* H01 mobile : titre, sous-titre, paragraphe et action avant la photo */
@media (min-width: 52rem) { .ouverture__para { max-width: 30em; } }
@media (max-width: 51.99rem) {
  /* Colonne unique : on neutralise tout placement hérité de l'ordinateur (spec Alex 03/10 17:24) */
  .ouverture {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "label" "titre" "sous" "para" "actions" "photo";
  }
  .ouverture > * { grid-column: 1 / -1; min-width: 0; }
  .ouverture__para { margin-top: 1.25rem; }
  .ouverture__photo { margin-top: 2.25rem; }
}

/* Récit : texte + photo de travail, alternance (H02, H04) */
.recit__grille { display: grid; gap: clamp(2.5rem, 6vw, 3.5rem); align-items: center; }
.recit__texte > * + * { margin-top: 1.5rem; }
.recit__texte .h2 { max-width: 17em; }
.recit__texte .texte { max-width: 29em; }
.recit__texte .lien { margin-top: 1rem; }
.recit__photo .photo { aspect-ratio: 4 / 3; }
/* H04 : cadre complet (Peter + geste + écran), aucun recadrage serré */
.recit__photo--ecran .photo { aspect-ratio: 3 / 2; }
@media (min-width: 52rem) {
  .recit__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 8vw, 8rem); }
  .recit__photo--vertical { justify-self: end; width: min(100%, 26rem); }
  .recit__photo--vertical .photo { aspect-ratio: 4 / 5; }
  .recit--inverse .recit__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .recit--inverse .recit__photo { order: -1; }
}

/* Phrase de chute : italique, filet or court */
.chute {
  position: relative;
  max-width: 26em;
  padding-top: 1.25rem;
  font-style: italic;
  font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  line-height: 1.4;
  color: var(--vert-profond);
}
.chute::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 1px; background: var(--or); }

/* H03 — méthode : texte + détail typographique investir / ajuster / attendre */
.methode__grille { display: grid; gap: clamp(3rem, 7vw, 4rem); }
@media (min-width: 52rem) {
  .methode__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(3rem, 8vw, 8rem); align-items: center; }
}
.methode__texte > * + * { margin-top: 1.5rem; }
.methode__texte .h2 { max-width: 16em; }
.methode__texte .texte { max-width: 29em; }
.methode strong { font-weight: 600; color: var(--vert-profond); }
.methode .prudence { margin-top: 2rem; }

/* H03 — schéma : éléments examinés → décision expliquée → trois possibilités de même rang */
.decision { border-top: 1px solid var(--vert-profond); padding-top: 1.5rem; text-align: center; }
.decision__titre { font-family: var(--f-titre); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); line-height: 1.2; color: var(--vert-profond); }
.decision__entrees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.decision__entrees li { display: flex; flex-direction: column; gap: .375rem; }
.decision__terme { font-family: var(--f-titre); font-size: 1.25rem; line-height: 1.1; color: var(--vert-profond); }
.decision__sens { font-size: 1rem; line-height: 1.35; color: var(--encre); }
.decision__traits { display: block; width: 100%; height: 3rem; overflow: visible; }
.decision__traits path { fill: none; stroke: var(--or); stroke-width: 1; vector-effect: non-scaling-stroke; }
.decision__entrees + .decision__traits { margin-top: .75rem; }
.decision__centre {
  display: table;
  margin: 0 auto;
  padding: .625rem 1.25rem;
  border: 1px solid var(--vert-profond);
  background: var(--blanc);
  font-family: var(--f-titre);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.2;
  color: var(--vert-profond);
}
.decision__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.decision__options li {
  padding-top: .75rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--f-titre);
  font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.1;
  color: var(--vert-profond);
}
/* Mobile : entrées compactes en lignes, un seul trait vers le point central */
@media (max-width: 39.99rem) {
  .decision__entrees { grid-template-columns: 1fr; gap: 0; text-align: left; margin-top: 1.25rem; }
  .decision__entrees li { flex-direction: row; align-items: baseline; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--bordure); }
  .decision__terme { flex: 0 0 4.25rem; }
  .decision__traits--entree { width: 1px; height: 2rem; margin: 0 auto; background: var(--or); }
  .decision__traits--entree path { display: none; }
  .decision__entrees + .decision__traits { margin-top: 0; }
  .decision__options li { font-size: 1.3125rem; }
}

/* H05 — pont vers l'équipe, typographique */
.pont-equipe__grille { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) {
  .pont-equipe__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 8vw, 8rem); align-items: start; }
}
.pont-equipe__texte > * + * { margin-top: 1.25rem; }
.pont-equipe__texte .texte { max-width: 29em; }

/* Conclusion accueil */
.conversion__question { margin: 0; color: rgba(247, 246, 241, .88); }

/* 22. V0.4 — Équipe ------------------------------------------------------- */
.portraits-section { padding-top: clamp(1rem, 3vw, 2rem); }
.portrait .texte { max-width: 29em; }
.btn--contour { background: transparent; color: var(--vert-profond); }
.btn--contour:hover, .btn--contour:focus-visible { background: var(--vert-profond); color: var(--ivoire); }
.portrait__action { margin-top: 1.75rem; }
.bloc-texte-titre__action { margin-top: 1.75rem; }
.liant .texte { max-width: 29em; }

/* Organisation et groupe (secondaire) : deux photos décalées, deux blocs */
.groupe__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.groupe__photo .photo { aspect-ratio: 4 / 5; }
.groupe__photo--decale { margin-top: 2.5rem; }
@media (min-width: 52rem) {
  .groupe__photos { gap: clamp(1.5rem, 3vw, 2.5rem); width: 83.333%; }
  .groupe__photo .photo { aspect-ratio: 4 / 3; }
  .groupe__photo--decale { margin-top: clamp(3rem, 6vw, 5rem); }
}
.groupe__grille { display: grid; gap: 3rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 52rem) {
  .groupe__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 8vw, 8rem); align-items: start; }
}
.groupe__bloc > * + * { margin-top: 1rem; }
.groupe__bloc .h3 { max-width: 16em; }
.liant__back-office { margin-top: 1.5rem; font-size: .9375rem; color: rgba(32, 38, 34, .78); }
@media (min-width: 52rem) { .groupe__bloc--societes { grid-column: 1 / -1; max-width: 40rem; } }

/* 23. V0.4 — Contact et Nous découvrir ----------------------------------- */
.tete-page--typo .tete-page__texte { max-width: 44rem; }
.interlocuteur { grid-template-columns: 4.5rem 1fr; align-items: center; }
@media (min-width: 30rem) { .interlocuteur { grid-template-columns: 4.5rem 1fr; } }
.avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; background: var(--bordure); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.3); transform-origin: 50% 38%; }

.reseaux--typo .reseau { background: none; border: 0; border-top: 1px solid var(--vert-profond); }
.reseaux--typo .reseau--secondaire { grid-template-columns: 1fr; }
.reseaux--typo .reseau__corps, .reseaux--typo .reseau--principal .reseau__corps { padding: 1.5rem 0 0; }

/* 24. Planche médias (document interne) ----------------------------------- */
.planche__tete { padding-block: 2rem clamp(2rem, 4vw, 3rem); }
.planche__tete > * + * { margin-top: 1.25rem; }
.planche__tete .marque { display: inline-block; margin-bottom: 1.5rem; }
.planche__tete .h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 22em; }
.planche__grille { display: grid; gap: 2.5rem 2rem; padding-bottom: var(--section); }
@media (min-width: 40rem) { .planche__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .planche__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.planche__item { border-top: 1px solid var(--vert-profond); padding-top: 1rem; }
.planche__item--non { border-top-color: var(--bordure); }
.planche__item--non .planche__media { opacity: .7; }
.planche__media { aspect-ratio: 3 / 2; background: var(--bordure); }
.planche__media img, .planche__media video { width: 100%; height: 100%; object-fit: contain; background: var(--blanc); }
.planche__fiche { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1rem 0 0; font-size: 1rem; line-height: 1.45; }
.planche__fiche dt { font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or-texte); padding-top: .15rem; }
.planche__fiche dd { margin: 0; }
.planche__fiche code, .planche__tete code { font-family: var(--f-ui); font-size: 1rem; color: var(--vert-profond); }

/* Film : bouton de lecture sur une ligne, compact sur petit écran */
.film__lecture { white-space: nowrap; }
@media (max-width: 29.99rem) {
  .film__lecture { gap: .7rem; padding: .6rem 1.15rem .6rem .6rem; font-size: 1rem; }
  .film__icone { width: 2.2rem; height: 2.2rem; }
}

/* Pages réglementaires : textes longs sur plusieurs lignes */
.rubriques li { grid-template-columns: minmax(11rem, 15rem) 1fr; }
.rubriques span { white-space: normal; line-height: 1.55; }

/* Logos des sociétés : présentés en cartouche ivoire à filet doré, sans retoucher les logos */
.societe { grid-template-columns: 6.5rem 1fr; column-gap: 1.5rem; padding: 1.5rem 0 1.25rem; }
.societe__logo {
  width: 6.5rem; height: 6.5rem; padding: .375rem; box-sizing: border-box;
  background: var(--blanc, #FCFCFA);
  border: 1px solid rgba(188, 167, 133, .55);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 24px -14px rgba(18, 53, 31, .35);
  transition: transform .4s ease, box-shadow .4s ease;
}
.societe:hover .societe__logo { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 16px 30px -16px rgba(18, 53, 31, .45); }
@media (min-width: 48rem) { .societe { grid-template-columns: 7.5rem 1fr; } .societe__logo { width: 7.5rem; height: 7.5rem; } }
@media (prefers-reduced-motion: reduce) { .societe__logo { transition: none; } .societe:hover .societe__logo { transform: none; } }

@media (max-width: 47.99rem) {
  .rubriques li { grid-template-columns: 1fr; gap: .375rem; }
  .reglementaire .h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); overflow-wrap: anywhere; hyphens: auto; }
  .rubriques span { overflow-wrap: anywhere; }
}


/* Adresse e-mail en simple information sous chaque portrait */
.portrait__mail { margin: .75rem 0 0; font-family: "Inter Tight", system-ui, sans-serif; font-size: .8125rem; letter-spacing: .02em; color: var(--texte-doux, #5c6b60); }

/* Contact V0.5 : marque « requis » des champs (formulaire de rendez-vous retiré) */
.champ__option--requis { color: var(--or-texte); font-style: normal; margin-left: .15em; }

.interlocuteur__mail { margin: 0; font-size: 1rem; letter-spacing: .01em; color: var(--or-texte); overflow-wrap: anywhere; }

.reassurance__texte {
  max-width: 34em;
  margin: 0 auto;
  padding-top: 1.75rem;
  border-top: 1px solid var(--or);
  font-family: var(--f-titre);
  font-size: clamp(1.3125rem, 1.15rem + .7vw, 1.75rem);
  line-height: 1.4;
  text-align: center;
  color: var(--vert-profond);
  text-wrap: pretty;
}

.contacts-generaux { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.contacts-generaux__grille { display: grid; gap: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--bordure); }
@media (min-width: 52rem) { .contacts-generaux__grille { grid-template-columns: 1fr 1.6fr 1fr; gap: clamp(2rem, 4vw, 4rem); } }
.contacts-generaux__item { display: grid; gap: .35rem; align-content: start; font-style: normal; font-size: 1rem; line-height: 1.5; color: var(--encre); }
.contacts-generaux__item p { margin: 0; max-width: 30em; }
.contacts-generaux__adresse { color: var(--or-texte); letter-spacing: .01em; overflow-wrap: anywhere; }

/* Logos registres / autorités — rangée centrée, cases égales sans cadre,
   hauteurs ajustées à l'œil selon la forme de chaque logo (jamais déformés). */
.regulateurs {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem; align-items: center;
  max-width: 46rem; margin: 3rem auto 1rem; padding: 0;
}
.regulateurs li { display: flex; justify-content: center; }
.regulateurs a { display: flex; align-items: center; justify-content: center; height: 4.5rem; padding: .25rem; }
.regulateurs img { display: block; width: auto; max-width: 100%; height: var(--h-logo, 46px); object-fit: contain; opacity: .92; transition: opacity .3s ease; }
.regulateurs a:hover img, .regulateurs a:focus-visible img { opacity: 1; }
.regulateur--orias { --h-logo: 46px; }
.regulateur--cncef { --h-logo: 40px; }
.regulateur--amf   { --h-logo: 38px; }
.regulateur--acpr  { --h-logo: 62px; }
@media (max-width: 47.99rem) {
  .regulateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; max-width: 22rem; }
  .regulateurs a { height: 3.75rem; }
  .regulateur--orias { --h-logo: 38px; }
  .regulateur--cncef { --h-logo: 34px; }
  .regulateur--amf   { --h-logo: 32px; }
  .regulateur--acpr  { --h-logo: 52px; }
}

/* Contacts généraux — centrés PC et mobile ; e-mails = vraies ancres, rendu identique au texte */
.contacts-generaux__grille { text-align: center; justify-items: center; align-items: start; }
.contacts-generaux__item { justify-items: center; width: 100%; }
.contacts-generaux__item p { margin-inline: auto; }
@media (min-width: 52rem) { .contacts-generaux__grille { grid-template-columns: repeat(3, 1fr); } }
.contacts-generaux__adresse a, .interlocuteur__mail a, a.mail-sobre {
  font: inherit; color: inherit; letter-spacing: inherit; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.contacts-generaux__adresse a:hover, .interlocuteur__mail a:hover, a.mail-sobre:hover { color: inherit; border-bottom-color: currentColor; }
.contacts-generaux__adresse a:focus-visible, .interlocuteur__mail a:focus-visible, a.mail-sobre:focus-visible {
  color: inherit; outline: 2px solid var(--vert-clair); outline-offset: 3px; border-radius: 2px;
}


/* === Restauration première version accueil / Nous découvrir (demande Peter 03/10) === */
.intro-piliers { display: grid; gap: 1.25rem; padding-bottom: clamp(1rem, 3vw, 2.5rem); }
@media (min-width: 52rem) {
  .intro-piliers { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: end; }
  .intro-piliers .label { grid-column: 1 / -1; }
  .intro-piliers .texte { padding-bottom: .4rem; }
}
.pilier {
  display: grid;
  gap: 2rem;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--bordure);
  grid-template-areas: "tete" "visuel" "lien";
}
.pilier__tete { grid-area: tete; }
.pilier__visuel { grid-area: visuel; }
.pilier__lien { grid-area: lien; display: flex; flex-wrap: wrap; gap: .25rem 2rem; align-items: center; }
@media (min-width: 52rem) {
  .pilier {
    column-gap: clamp(3rem, 7vw, 7rem);
    row-gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "tete visuel" "lien visuel";
    align-items: start;
  }
}
.pilier__num {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-family: var(--f-titre);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--or-texte);
}
.pilier__num::after { content: ""; width: 3rem; height: 1px; background: var(--or); }
.pilier__tete .h3 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.15; max-width: 18em; }
.pilier__tete .accroche { margin-top: 1.25rem; }
.pilier__tete .texte { margin-top: 1rem; }
.pilier__tete .prudence { margin-top: 1.5rem; }
.dirigeant { background: var(--vert-doux); }
.dirigeant .pilier { border-top: 0; padding-block: var(--section); }
.dirigeant .photo { aspect-ratio: 4 / 3; }
@media (min-width: 52rem) {
  .dirigeant .pilier { align-items: center; }
  .dirigeant .pilier__tete { align-self: end; }
  .dirigeant .photo { aspect-ratio: 5 / 4; }
}
.schema .trait { fill: none; stroke: var(--vert-profond); stroke-width: 1; vector-effect: non-scaling-stroke; }
.schema .trait-or { fill: none; stroke: var(--or); stroke-width: 1; vector-effect: non-scaling-stroke; }
.schema .plein { fill: var(--vert-profond); }
.schema .vide { fill: var(--blanc); stroke: var(--vert-profond); stroke-width: 1; vector-effect: non-scaling-stroke; }
.etages { position: relative; display: grid; gap: 2.25rem; }
.etages::before {
  content: "";
  position: absolute;
  left: 1.75rem; top: 1.75rem; bottom: 1.75rem;
  width: 1px;
  background: var(--vert-profond);
  opacity: .4;
}
.etage { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem; align-items: center; }
.etage__signe { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--blanc); }
.etage__signe svg { width: 3.5rem; height: 3.5rem; }
.cadre-decision {
  position: relative;
  margin-top: .75rem;
  padding: 2.25rem .75rem 1rem;
  border: 1px solid var(--vert-profond);
}
.cadre-decision__titre {
  position: absolute;
  top: 0; left: .75rem;
  transform: translateY(-50%);
  max-width: calc(100% - 1.5rem);
  padding: 0 .6rem;
  background: var(--blanc);
  font-family: var(--f-ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or-texte);
  white-space: nowrap;
}
.triptyque { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.triptyque li {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: .5rem .25rem 1rem;
  text-align: center;
}
.triptyque li + li { border-left: 1px solid var(--bordure); }
.triptyque svg { width: 3.5rem; height: 3.5rem; }
.triptyque .schema__libelle { font-size: clamp(1.125rem, 1rem + .5vw, 1.4375rem); }
.convergence {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(2rem, .55fr) minmax(0, 1fr);
  align-items: center;
}
.convergence__points li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  min-height: 4.5rem;
  text-align: right;
}
.convergence__points li::after, .convergence__cible::before {
  content: "";
  flex: none;
  border-radius: 50%;
}
.convergence__points li::after {
  width: .7rem; height: .7rem;
  border: 1px solid var(--vert-profond);
  background: var(--blanc);
  margin-right: -.35rem;
  position: relative;
  z-index: 1;
}
.convergence__lignes { width: 100%; height: 13.5rem; align-self: center; }
.convergence__cible { display: flex; align-items: center; gap: .85rem; margin: 0; }
.convergence__cible::before {
  width: .9rem; height: .9rem;
  margin-left: -.45rem;
  background: var(--vert-profond);
  box-shadow: 0 0 0 5px var(--blanc), 0 0 0 6px var(--or);
}
.convergence .schema__libelle { font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem); }
.vignette {
  position: absolute;
  right: 1rem; bottom: 0;
  width: min(15.5rem, 64%);
  padding: 1rem 1rem 1.1rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  box-shadow: 0 18px 40px -24px rgba(18, 53, 31, .35);
}
@media (min-width: 52rem) {
  .vignette { right: auto; left: -2rem; }
}
.vignette__etat {
  display: inline-block;
  margin-bottom: .85rem;
  padding: .2rem .5rem;
  border: 1px solid var(--vert-clair);
  background: var(--vert-doux);
  font-family: var(--f-ui);
  font-size: .875rem;
  font-weight: 500;
  color: var(--vert-profond);
}
.vignette__barre { display: flex; gap: .3rem; margin-bottom: .85rem; }
.vignette__barre span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--bordure); }
.vignette__ligne { height: .45rem; background: var(--bordure); margin-top: .45rem; }
.vignette__ligne--titre { width: 55%; height: .6rem; background: var(--bordure); margin-top: 0; }
.vignette__ligne--courte { width: 70%; }
.vignette__tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .75rem; }
.vignette__tuiles span { aspect-ratio: 16 / 10; background: var(--vert-doux); border: 1px solid var(--bordure); }
.presentation__texte > * + * { margin-top: 1.25rem; }
.presentation__texte .actions { margin-top: 1.75rem; }
.duo__photo .photo { aspect-ratio: 4 / 3; }
@media (min-width: 40rem) {
  .duo__photo .photo { aspect-ratio: 2 / 1; }
}
.duo__texte { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 52rem) {
  .duo__texte { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}
.duo__texte .lien { margin-top: .75rem; }

/* Réseaux — cartes épurées : petit avatar, identifiant, pictogramme discret */
.reseaux-sobres { list-style: none; margin: clamp(2rem,5vw,3rem) 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 52rem) { .reseaux-sobres { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.reseaux-sobres li { display: flex; }
.reseaux-sobres a { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; padding: clamp(1.5rem, 3vw, 2rem); background: var(--blanc); border: 1px solid var(--bordure); color: inherit; text-decoration: none; transition: border-color .3s ease, box-shadow .3s ease; }
.reseaux-sobres a:hover, .reseaux-sobres a:focus-visible { border-color: var(--or); box-shadow: 0 18px 40px -28px rgba(18,53,31,.35); }
.reseaux-sobres__tete { display: flex; align-items: center; gap: .875rem; }
.reseaux-sobres__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none; box-shadow: 0 0 0 1px var(--bordure), 0 0 0 3px var(--blanc), 0 0 0 4px rgba(188,167,133,.55); }
.reseaux-sobres__avatar--marque { object-fit: contain; object-position: center; padding: 8px; background: var(--vert-profond); }
.reseaux-sobres__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.reseaux-sobres__qui { font-family: var(--f-titre); font-size: 1.25rem; line-height: 1.2; color: var(--vert-profond); }
.reseaux-sobres__handle { font-size: .8125rem; letter-spacing: .02em; color: var(--or-texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reseaux-sobres__reseau { flex: none; width: 1.25rem; height: 1.25rem; color: var(--vert-profond); opacity: .55; transition: opacity .3s ease; }
.reseaux-sobres__reseau svg { width: 100%; height: 100%; display: block; }
.reseaux-sobres a:hover .reseaux-sobres__reseau { opacity: 1; }
.reseaux-sobres__desc { font-size: 1rem; line-height: 1.55; opacity: .85; flex: 1; }
.reseaux-sobres__cta { font-size: .875rem; letter-spacing: .04em; color: var(--vert-profond); padding-top: 1rem; border-top: 1px solid var(--bordure); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .reseaux-sobres a, .reseaux-sobres__reseau { transition: none; } }

/* Réseaux sociaux (nous-decouvrir/) : trois grandes cartes, logos officiels en couleur.
   YouTube en premier et plus large ; empilées sur mobile. */
.reseaux-grands { list-style: none; margin: clamp(2rem,5vw,3rem) 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .reseaux-grands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .reseaux-grands__youtube { grid-column: 1 / -1; } }
@media (min-width: 64rem) { .reseaux-grands { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); } .reseaux-grands__youtube { grid-column: auto; } }
.reseaux-grands li { display: flex; }
.reseau-carte { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: clamp(1.75rem, 3.5vw, 2.5rem); background: var(--blanc); border: 1px solid var(--or); border-radius: var(--rayon); color: inherit; text-decoration: none; transition: box-shadow .3s ease, border-color .3s ease; }
.reseau-carte:hover, .reseau-carte:focus-visible { border-color: var(--or-texte); box-shadow: 0 18px 40px -28px rgba(18,53,31,.35); }
.reseau-carte__logo { display: block; flex: none; height: 4.5rem; width: auto; margin-bottom: 1.5rem; }
.reseau-carte__logo--youtube { height: 4rem; margin-block: .25rem 1.75rem; }
@media (max-width: 39.99rem) { .reseau-carte__logo { height: 4rem; } .reseau-carte__logo--youtube { height: 3.5rem; } }
.reseau-carte__logos { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.reseau-carte__logos .reseau-carte__logo { margin: 0; }
.reseau-carte__embleme { flex: none; height: 6rem; width: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 50%; border: 1px solid #BCA785; }
/* Réseaux (retour Benjamin 04/10) : pictogrammes YouTube/Instagram un peu plus discrets */
.reseau-carte__logos .reseau-carte__logo { height: 3.5rem; }
.reseau-carte__logos .reseau-carte__logo--youtube { height: 2.75rem; }
@media (max-width: 39.99rem) { .reseau-carte__logos .reseau-carte__logo { height: 3rem; } .reseau-carte__logos .reseau-carte__logo--youtube { height: 2.375rem; } }
.reseau-carte__portrait { flex: none; height: 6rem; width: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 1px solid #BCA785; }
@media (max-width: 39.99rem) { .reseau-carte__embleme, .reseau-carte__portrait { height: 5rem; } }
.reseau-carte__nom { font-family: var(--f-titre); font-size: clamp(1.5rem, 1.35rem + .3vw, 1.625rem); white-space: nowrap; line-height: 1.15; color: var(--vert-profond); }
.reseaux-grands__youtube .reseau-carte__nom { font-size: clamp(1.625rem, 1.35rem + .9vw, 2.25rem); }
.reseau-carte__handle { margin-top: .35rem; font-size: .9375rem; letter-spacing: .02em; color: var(--or-texte); }
.reseau-carte__desc { margin-top: 1rem; font-size: 1rem; line-height: 1.55; opacity: .85; flex: 1; }
.reseau-carte__cta { align-self: stretch; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bordure); font-size: 1.0625rem; font-weight: 500; letter-spacing: .02em; color: var(--vert-profond); }
.reseau-carte__cta span { display: inline-block; transition: transform .3s var(--ease); }
.reseau-carte:hover .reseau-carte__cta span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .reseau-carte, .reseau-carte__cta span { transition: none; } .reseau-carte:hover .reseau-carte__cta span { transform: none; } }

/* Les Lettres d'Orezia (lettres/) : la section porte l'en-tête de page */
.page-lettres .lettres__texte .label + .h1 { margin-top: 0; }
.page-lettres .lettres { grid-template-areas: "visuel" "texte" "form"; }
.lettres__visuel { grid-area: visuel; margin: 0; }
.lettres__visuel img { display: block; width: 100%; height: auto; border: 1px solid #BCA785; border-radius: var(--rayon); }
@media (min-width: 52rem) {
  .page-lettres .lettres {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "texte visuel" "form visuel";
  }
  .lettres__visuel { align-self: center; }
  .lettres__visuel img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 50%; }
}

/* Contact : contacts directs nominatifs, zone du bas (présentations sans CTA) */
.contacts-directs { display: grid; gap: 1.75rem; padding-top: 1.75rem; margin-bottom: 1.75rem; border-top: 1px solid var(--bordure); text-align: center; justify-items: center; }
@media (min-width: 52rem) { .contacts-directs { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 4rem); } }
.contacts-directs__nom { margin: 0; font-size: 1.25rem; color: var(--vert-profond); }
.contacts-directs__wa { margin-top: .6rem; }
.contacts-directs__liens { display: grid; gap: .1rem; justify-items: center; margin: 0; }
.contacts-directs__liens a {
  display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1rem; letter-spacing: .01em; color: var(--vert-profond);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(188, 167, 133, .8); transition: text-decoration-color .2s ease;
}
.contacts-directs__liens a:hover { color: var(--vert-profond); text-decoration-color: currentColor; }
.contacts-directs__liens a:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .contacts-directs__liens a { transition: none; } }

/* 25. Passage vers la page suivante (Accueil → Équipe → Nous découvrir → Contact) */
.passage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--section) * 1.25) var(--gouttiere) calc(var(--section) * 1.5);
  background: var(--ivoire);
}
.passage__label { justify-content: center; margin-bottom: 1rem; }
.passage__label::after { content: ""; width: 2rem; height: 1px; background: var(--or); flex: none; }
.passage__titre {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.passage__titre a {
  color: var(--vert-profond);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.passage__titre a:hover { border-bottom-color: var(--or); }
.passage__titre a:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 4px; border-radius: var(--rayon); }
.passage__filet {
  position: relative;
  display: block;
  width: 6rem;
  height: 1px;
  margin-top: 1.75rem;
  background: rgba(188, 167, 133, .35);
  overflow: hidden;
}
.passage__jauge {
  position: absolute;
  inset: 0;
  background: var(--or);
  transform: scaleX(var(--passage, 0));
  transform-origin: left center;
  transition: transform .18s linear;
}
.passage__chevron {
  display: block;
  width: .7rem;
  height: .7rem;
  margin-top: 1.5rem;
  border-right: 1px solid var(--or);
  border-bottom: 1px solid var(--or);
  transform: rotate(45deg);
  animation: passage-chevron 2.8s var(--ease) infinite;
}
@keyframes passage-chevron {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .55; }
  50% { transform: translateY(5px) rotate(45deg); opacity: 1; }
}
body.is-sortie { opacity: 0; transition: opacity .3s var(--ease); }
.passage-rappel {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .85rem 1.75rem 1rem;
  background: var(--ivoire);
  border: 1px solid rgba(188, 167, 133, .55);
  border-radius: var(--rayon);
  box-shadow: 0 14px 34px -18px rgba(18, 53, 31, .55);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, .75rem);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.passage-rappel.is-actif { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s; }
.passage-rappel__label {
  font-family: var(--f-ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or-texte);
}
.passage-rappel__titre { font-family: var(--f-titre); font-size: 1.375rem; line-height: 1.15; color: var(--vert-profond); }
.passage-rappel .passage__filet { width: 5rem; margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) {
  .passage__chevron { animation: none; opacity: .8; }
  .passage__jauge { transition: none; }
  .passage-rappel, .passage-rappel.is-actif { transform: translate(-50%, 0); transition: none; }
  body.is-sortie { opacity: 1; transition: none; }
}

/* Contact — canaux directs dans les cartes Peter/Benjamin (e-mail sobre + lien WhatsApp discret) */
.interlocuteur__canaux { display: grid; gap: .35rem; justify-items: start; margin-top: .25rem; padding-top: .75rem; border-top: 1px solid var(--bordure); }
.interlocuteur__corps .interlocuteur__mail { font-size: 1rem; color: var(--encre); }
.interlocuteur__wa {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
  font-size: 1rem; color: var(--vert-profond); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.interlocuteur__wa span:not(.sr-only) { border-bottom: 1px solid rgba(18, 53, 31, .25); transition: border-color .2s ease; }
.interlocuteur__wa:hover span:not(.sr-only) { border-bottom-color: currentColor; }
.interlocuteur__wa:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 3px; border-radius: 2px; }
.interlocuteur__wa-ico { flex: none; width: 1rem; height: 1rem; color: var(--vert-clair); }
@media (prefers-reduced-motion: reduce) { .interlocuteur__wa, .interlocuteur__wa span { transition: none; } }

.portrait__mail { margin-top: 1.5rem; }
.portrait__mail a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1em; }
.portrait__mail a:hover, .portrait__mail a:focus-visible { color: var(--texte, #1f2a22); }

/* Sépia sur toutes les photographies du site (fichiers inchangés).
   Les photos vivent dans assets/img/ ; logos, emblèmes et icônes dans assets/brand/ ne sont pas touchés. */
/* Illustration de la Lettre exclue : ce n'est pas une photographie. */

/* Contact — emplacement de l'agenda en ligne (widget Calendly à venir) */
.agenda {
  display: grid;
  height: 26rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--ivoire);
  border: 1px solid rgba(188, 167, 133, .6);
}
@media (min-width: 52rem) { .agenda { height: 32rem; } }
.agenda .calendly-inline-widget { height: 100%; }
.agenda__attente { display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem; text-align: center; }
.agenda__ico { width: 2.25rem; height: 2.25rem; color: var(--or-texte); }
.agenda__attente p { margin: 0; font-size: 1.0625rem; font-style: italic; color: var(--or-texte); letter-spacing: .01em; }

/* Contact — trois interlocuteurs WhatsApp (Peter, Benjamin, Support) */
.interlocuteurs--trois .interlocuteur { align-items: start; }
.interlocuteurs--trois .interlocuteur__corps { gap: .5rem; }
.interlocuteurs--trois .interlocuteur__corps p { margin: 0; }
.interlocuteurs--trois .interlocuteur__wa { margin-top: .25rem; justify-self: start; }
@media (min-width: 60rem) {
  .interlocuteurs--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .interlocuteurs--trois .interlocuteur { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1.25rem; padding: 2rem 1.75rem; }
  .interlocuteurs--trois .interlocuteur__corps { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
  .interlocuteurs--trois .interlocuteur__wa, .interlocuteurs--trois .interlocuteur__corps .interlocuteur__bientot { margin-top: auto; padding-top: .75rem; }
}
.avatar--embleme { display: grid; place-items: center; background: var(--vert-profond); }
.avatar--embleme img { width: 46%; height: auto; object-fit: contain; transform: none; }
.interlocuteurs--trois .interlocuteur__corps .interlocuteur__bientot { margin-top: .25rem; font-size: .9375rem; font-style: italic; color: var(--or-texte); min-height: 2.75rem; display: flex; align-items: center; }

/* 27. Citation posée sur le portrait de Benjamin (Équipe) */
.photo__citation {
  position: absolute; inset: auto 0 0 0; z-index: 2; margin: 0;
  padding: 5rem 2rem 1.75rem;
  background: linear-gradient(to top, rgba(18,53,31,.82) 0%, rgba(18,53,31,.55) 55%, rgba(18,53,31,0) 100%);
  color: #F7F6F1;
}
.photo__citation blockquote { margin: 0; }
.photo__citation p {
  margin: 0; font-family: "EB Garamond", Garamond, serif; font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.4; max-width: 24em;
}
.photo__citation figcaption {
  margin-top: .75rem; font-family: "EB Garamond", Garamond, serif; font-size: .8125rem;
  letter-spacing: .14em; text-transform: uppercase; color: #BCA785;
}
.photo__citation figcaption::before { content: "— "; }
@media (max-width: 40em) { .photo__citation { padding: 4rem 1.25rem 1.25rem; } }
/* Logos réseaux plus imposants (demande Benjamin) */
.reseau-carte__logo { height: 6rem; }
.reseau-carte__logo--youtube { height: 6rem; margin-block: 0 1.5rem; }
@media (max-width: 39.99rem) { .reseau-carte__logo, .reseau-carte__logo--youtube { height: 5rem; } }
/* Réseaux : pictogrammes plus discrets, emblème rond comme les portraits (retour Benjamin) */
.reseau-carte__logo, .reseau-carte__logo--youtube { height: 3rem; }
.reseau-carte__logo--youtube { height: 2.4rem; }
.reseau-carte__embleme, .reseau-carte__portrait { height: 4.5rem; }
.reseau-carte__embleme { border-radius: 50%; object-fit: cover; border: 1px solid #BCA785; }
@media (max-width: 39.99rem) {
  .reseau-carte__logo { height: 2.6rem; } .reseau-carte__logo--youtube { height: 2.1rem; }
  .reseau-carte__embleme, .reseau-carte__portrait { height: 4rem; }
}

/* 28. Contact — WhatsApp d'abord (demande Benjamin) : premier écran compact, cartes visibles sans défiler à 1440×900 */
.tete-page--contact { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 2.5rem); }
.tete-page--contact .tete-page__texte > * + * { margin-top: 1rem; }
.tete-page--contact .tete-page__texte .label + .h1 { margin-top: 0; }
.tete-page--contact .tete-page__ancre { margin-top: .5rem; }
.tete-page__ancre .lien { min-height: 2.75rem; }
.tete-page__ancre .lien span { transition: transform .3s var(--ease); }
.tete-page__ancre .lien:hover span { transform: translateY(2px); }

.whatsapp-direct { padding-bottom: clamp(2rem, 4vw, 3rem); }
.whatsapp-direct + #rendez-vous { padding-top: clamp(2.5rem, 5vw, 4rem); }
.whatsapp-direct__titre { margin-bottom: 0; }
.whatsapp-direct .interlocuteurs { margin-top: 1.25rem; }
.interlocuteurs--trois .interlocuteur--wa { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.interlocuteur__visuels { display: flex; align-items: center; gap: .875rem; }
.interlocuteur--wa .avatar { width: 4rem; height: 4rem; flex: none; }
.logo-wa {
  display: grid; place-items: center; flex: none;
  width: 4rem; height: 4rem; border-radius: 50%;
  background: #25D366;
}
.logo-wa svg { width: 2.25rem; height: 2.25rem; }
.btn-wa { justify-self: start; gap: .65rem; padding-inline: 1.5rem; }
.btn-wa__ico { flex: none; width: 1.25rem; height: 1.25rem; color: #fff; }
.interlocuteurs--trois .interlocuteur--wa .interlocuteur__corps .interlocuteur__bientot { min-height: 3.25rem; }
@media (max-width: 29.99rem) { .btn-wa { justify-self: stretch; } }
@media (min-width: 60rem) {
  .interlocuteurs--trois .interlocuteur--wa { grid-template-rows: auto 1fr; padding: 1.75rem; }
  .interlocuteurs--trois .interlocuteur--wa .btn-wa,
  .interlocuteurs--trois .interlocuteur--wa .interlocuteur__corps .interlocuteur__bientot { margin-top: auto; }
  .interlocuteur--wa .interlocuteur__corps > p:not(.interlocuteur__bientot) { padding-bottom: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .tete-page__ancre .lien span { transition: none; } .tete-page__ancre .lien:hover span { transform: none; } }

/* 29. Lettres — première image retirée (Benjamin 04/10, fichier gardé en réserve) ;
   mobile : titre, texte et formulaire d'abord, l'image au stylo ensuite */
@media (max-width: 51.99rem) {
  .page-lettres .lettres { grid-template-areas: "texte" "form" "visuel"; }
}
/* Lettres : l'essentiel d'entrée (retour Benjamin) — visuel aligné en haut, en-tête resserré */
@media (min-width: 64rem) { .page-lettres .lettres__visuel { align-self: start; margin-top: 3.5rem; } .page-lettres.section { padding-top: 3.5rem; } }
@media (max-width: 39.99rem) { .page-lettres.section { padding-top: 2rem; } }

/* Contact — agenda Calendly (exemple de rendu) : hauteur suffisante pour le widget */
.agenda--calendly { height: 74rem; background: var(--blanc, #FCFCFA); overflow: hidden; }
@media (min-width: 52rem) { .agenda--calendly { height: 46rem; } }
.agenda__secours { margin: 1rem 0 0; text-align: center; font-size: .9375rem; color: var(--or-texte); }
.agenda__secours a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(188, 167, 133, .7); }

/* Équipe : sociétés de Peter et photos de travail sous chaque description (retour Benjamin) */
.societes--portrait { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.societes--portrait .societe { display: block; margin: 0; }
.societe__lien { display: inline-flex; align-items: center; gap: .875rem; color: var(--vert, #12351F); text-decoration: none; }
.societe__lien .societe__logo { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; border: 1px solid #BCA785; }
.societe__lien .societe__nom { font-size: 1.0625rem; border-bottom: 1px solid rgba(188,167,133,.7); padding-bottom: .1em; }
.societe__lien:hover .societe__nom, .societe__lien:focus-visible .societe__nom { border-bottom-color: currentColor; }
.portrait__photo-travail { margin: 2rem 0 0; }
.portrait__photo-travail .photo { aspect-ratio: 3 / 2; }
.portrait__photo-travail img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (max-width: 51.99rem) {
  article[aria-labelledby="nom-peter"] { display: flex; flex-direction: column; }
  article[aria-labelledby="nom-peter"] > .societes--portrait { order: 1; }
}
@media (min-width: 52rem) {
  .portraits-section .portraits { align-items: stretch; }
  .portraits-section .portrait { display: flex; flex-direction: column; }
  .portraits-section .portrait__photo-travail { margin-top: auto; padding-top: 2rem; }
}

/* Expérience : récit en trois temps (texte Alex validé par Benjamin) */
.lecture-experience{padding-top:2rem;padding-bottom:1rem}.lecture-ligne{display:grid;grid-template-columns:1fr .95fr;gap:clamp(2rem,6vw,6rem);align-items:center;padding:3rem 0;border-top:1px solid rgba(18,53,31,.12)}.lecture-texte{font-size:clamp(1rem,1.4vw,1.17rem);line-height:1.8;max-width:35rem}.lecture-texte>p+p{margin-top:1.25rem}.lecture-images{display:grid;gap:1rem}.lecture-images figure{margin:0}.lecture-ligne--inverse .lecture-texte{order:2}.lecture-ligne--inverse .lecture-images{order:1}.ouverture__photo{margin-top:2rem}.ouverture__photo .photo{max-height:420px}.lecture-texte .prudence{font-size:.78rem;line-height:1.5}
@media(max-width:760px){.lecture-ligne{grid-template-columns:1fr;padding:2rem 0;gap:1.5rem}.lecture-ligne--inverse .lecture-texte,.lecture-ligne--inverse .lecture-images{order:initial}.lecture-images{grid-template-columns:1fr}.ouverture__photo .photo{max-height:280px}.lecture-experience{padding-top:1rem}.lecture-texte{max-width:none}}


/* 30. Retours Peter/Benjamin 04/10 : logos WhatsApp et YouTube plus discrets ; Contact = 2 cartes (Peter, Benjamin) avec e-mail */
.logo-wa { width: 3rem; height: 3rem; }
.logo-wa svg { width: 1.65rem; height: 1.65rem; }
.reseau-carte__logo--youtube, .reseau-carte__logos .reseau-carte__logo--youtube { height: 2.25rem; }
@media (max-width: 39.99rem) { .reseau-carte__logo--youtube, .reseau-carte__logos .reseau-carte__logo--youtube { height: 2rem; } }
.interlocuteurs--deux .interlocuteur__corps .interlocuteur__mail { margin-top: -.25rem; }
@media (min-width: 52rem) { .interlocuteurs--trois.interlocuteurs--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; } }
/* Contact : e-mail discret sous le bouton WhatsApp (Peter 04/10, plus épuré) */
.interlocuteurs--deux .interlocuteur__corps .interlocuteur__mail { margin-top: .5rem; font-size: .875rem; letter-spacing: .02em; color: var(--or-texte); }

/* 31. Contact — cartes Peter/Benjamin validées par Peter (aperçu Alex, 04/10) : sous-titre, cartes ivoire arrondies,
   portrait rectangulaire couleur, bouton WhatsApp vert sombre avec petit logo, e-mail discret dessous */
.tete-page--contact .tete-page__sous-titre { margin-top: .9rem; max-width: 46rem; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.6; color: var(--texte-doux, #5c6b60); }
.tete-page--contact .tete-page__texte .h1 + .tete-page__sous-titre { margin-top: .9rem; }
.whatsapp-direct .interlocuteurs--deux { margin-top: 0; gap: 1.5rem; }
@media (min-width: 52rem) { .whatsapp-direct .interlocuteurs--trois.interlocuteurs--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 1.5rem; } }
.interlocuteurs--deux .interlocuteur--wa {
  display: grid; grid-template-columns: 5.875rem minmax(0, 1fr); grid-template-rows: none; gap: 1.5rem;
  align-items: start; padding: 2rem 1.75rem; min-width: 0;
  background: #FFFEF9; border: 1px solid #DCE0D5; border-radius: 18px; box-shadow: 0 8px 28px rgba(25, 60, 41, .024);
}
.interlocuteurs--deux .interlocuteur--wa .interlocuteur__visuels { display: block; }
.interlocuteurs--deux .interlocuteur--wa .avatar { width: 5.875rem; height: 7rem; border-radius: 12px; overflow: hidden; background: #ECECE3; box-shadow: none; }
.interlocuteurs--deux .interlocuteur--wa .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transform: none; }
.interlocuteurs--deux .interlocuteur--wa .interlocuteur__corps { display: block; height: auto; min-width: 0; }
.interlocuteurs--deux .interlocuteur--wa .h3 { margin: 0 0 1.375rem; font-weight: 400; font-size: clamp(2.125rem, 1.9rem + .8vw, 2.45rem); line-height: 1.1; letter-spacing: -.02em; }
.interlocuteurs--deux .interlocuteur--wa .btn-wa {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: .55rem; margin: 0;
  min-height: 2.875rem; padding: .85rem .8rem; border-radius: 9px;
  background: #193C29; border: 1px solid #193C29; color: #FFFDF7; white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.interlocuteurs--deux .interlocuteur--wa .btn-wa:hover { background: #285239; border-color: #285239; color: #FFFDF7; transform: translateY(-1px); }
.interlocuteurs--deux .interlocuteur--wa .btn-wa:focus-visible { outline: 2px solid #193C29; outline-offset: 5px; }
.interlocuteurs--deux .interlocuteur--wa .btn-wa__ico { width: 1rem; height: 1rem; color: currentColor; }
.interlocuteurs--deux .interlocuteur--wa .interlocuteur__corps .interlocuteur__mail { margin: 1rem 0 0; padding: 0; text-align: center; font-size: .875rem; letter-spacing: .01em; color: #65735F; }
@media (max-width: 44.99rem) {
  .interlocuteurs--deux .interlocuteur--wa { grid-template-columns: 5rem minmax(0, 1fr); gap: 1.3rem; padding: 1.55rem 1.375rem; }
  .interlocuteurs--deux .interlocuteur--wa .avatar { width: 5rem; height: 6.125rem; }
  .interlocuteurs--deux .interlocuteur--wa .h3 { font-size: 2.125rem; margin-bottom: 1.125rem; }
  .interlocuteurs--deux .interlocuteur--wa .btn-wa { white-space: normal; text-align: center; font-size: .9375rem; padding: .75rem .5rem; }
  .interlocuteurs--deux .interlocuteur--wa .interlocuteur__corps .interlocuteur__mail { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) { .interlocuteurs--deux .interlocuteur--wa .btn-wa { transition: none; } .interlocuteurs--deux .interlocuteur--wa .btn-wa:hover { transform: none; } }

/* Contact : adresse sous Contact / Back-office (Peter 04/10) */
@media (min-width: 52rem) { .contacts-generaux__grille { grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: center; } }
.contacts-generaux__grille > address.contacts-generaux__item { grid-column: 1 / -1; color: var(--mousse, #737A75); font-size: .95rem; }
/* Pied de page : colonne Contact, adresse dessous */
.pied__contact { font-style: normal; }
.pied__contact .pied__liste a { overflow-wrap: anywhere; }
.pied__contact-role { display: block; font-size: .8em; opacity: .7; letter-spacing: .02em; }
.pied__adresse { margin-top: 1rem; font-size: .9em; opacity: .8; line-height: 1.5; }
@media (min-width: 52rem) { .pied__haut { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr); } }
/* Pied de page bas : centré, ligne légale plus lisible (Peter 04/10) */
.pied__bas { text-align: center; max-width: none; justify-items: center; }
.pied__bas p { margin-inline: auto; max-width: 52rem; }
.pied__bas .pied__identite { font-size: .95rem; line-height: 1.6; opacity: .9; }
/* Contact : phrase Back-office discrète sous l'e-mail, titres et e-mails alignés (Peter 04/10) */
.contacts-generaux__note { font-size: .875rem; color: var(--mousse, #737A75); margin-top: .15rem !important; }
/* Ligne légale du pied de page : plus lisible, retour à la ligne équilibré sur mobile (Peter 04/10) */
.pied__bas .pied__identite { font-size: .875rem !important; line-height: 1.65; opacity: .95; text-wrap: balance; }
@media (max-width: 40rem) { .pied__bas .pied__identite { font-size: .875rem !important; } }

/* V2 (05/10) : naissance d'Orezia, moins d'espace avant Suite */
.equipe-tete__texte .label + .equipe-naissance__titre { margin-top: .5rem; }
.passage--serre { padding-top: calc(var(--section) * .5); }

/* Confidentialité V2 : brouillon « proposition à valider » */
.reglementaire .proposition { padding: 1rem 1.25rem; border-left: 3px solid var(--or-texte); background: rgba(176, 141, 87, .08); font-family: var(--f-ui); font-size: .9375rem; line-height: 1.6; }
.reglementaire .h2 { margin-top: 2.75rem; }
.reglementaire p, .liste-confid li { line-height: 1.7; }
.liste-confid { padding-left: 1.25rem; list-style: disc; }
.liste-confid li + li { margin-top: .625rem; }
.a-valider { font-family: var(--f-ui); font-size: .8125rem; color: var(--or-texte); }

/* Accueil V2 : titres des trois blocs, légèrement plus grands que le texte */
.lecture-titre{font-family:var(--f-titre, inherit);font-weight:400;font-size:clamp(1.2rem,1.75vw,1.45rem);line-height:1.35;color:var(--vert, #12351F);margin:0 0 1rem}

/* V2 — Fin de l'accueil : tout le bloc « Suite / L'Équipe » est cliquable
   (zone du lien étendue, visuel inchangé). */
.passage--lien-bloc { position: relative; }
.passage--lien-bloc .passage__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* V2 — Expérience : titres de blocs plus visibles (Benjamin 06/10) */
.page-accueil .ouverture__label { font-size: 1rem; }
.lecture-titre { font-size: clamp(1.5625rem, 2.1vw, 1.875rem); line-height: 1.25; }

/* V2 — Expérience : titres des trois blocs en capitales (Benjamin 06/10) */
.lecture-titre { text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.375rem, 1.85vw, 1.65rem); line-height: 1.3; }

/* V2 — Accueil : titres 1 et 2 en casse naturelle (Garamond), sans capitales. */
#lecture-titre-1, #lecture-titre-2 { text-transform: none; letter-spacing: normal; font-size: clamp(1.125rem, 2.3vw, 1.625rem); }
@media (max-width: 760px) {
  #lecture-titre-1, #lecture-titre-2 { font-size: clamp(1.125rem, calc(5.714vw - 0.286px), 1.375rem); }
}

/* V2 — Expérience : les trois titres en capitales, chacun sur une seule ligne, même taille (Benjamin 06/10) */
.lecture-texte { container-type: inline-size; }
.lecture-titre, #lecture-titre-1, #lecture-titre-2 {
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  font-size: min(1.65rem, calc(100cqi / 22.4)); line-height: 1.3;
}

/* V2 — Expérience mobile : titres sur une ligne, au plus près de la taille du texte (Benjamin 06/10) */
@media (max-width: 760px) {
  .lecture-titre, #lecture-titre-1, #lecture-titre-2 { letter-spacing: .01em; font-size: min(1.375rem, calc(100cqi / 20.6)); }
}

/* V2 — Harmonisation validée Alex/Peter (06/10).
   Global (toutes largeurs) : uniquement la casse naturelle des titres et surtitres.
   Tout le reste (tailles, en-tête, médias, « Suite ») est réservé au PC : mobile inchangé. */
.ouverture__label, .tete-page .label, .equipe-tete__texte .label, .lettres__texte .label,
.passage__label, .lecture-titre, #lecture-titre-1, #lecture-titre-2 { text-transform: none; }

@media (min-width: 64rem) {
  :root {
    --titre-grand: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);   /* 34 → 52px */
    --titre-section: clamp(1.375rem, 1.1rem + 1vw, 2rem);      /* 22 → 32px */
    --texte-courant: clamp(1.125rem, 1.08rem + .2vw, 1.25rem); /* 18 → 20px */
    --media-ouverture: 30rem;                                  /* 480px, largeur de référence */
  }
  /* Grands titres d'ouverture : Accueil, Naissance d'Orezia, Nous découvrir, Lettres (et Contact) */
  .ouverture__titre, .tete-page .h1, .page-lettres .lettres__texte .h1, .equipe-tete .equipe-naissance__titre {
    font-size: var(--titre-grand); line-height: 1.1; letter-spacing: -.015em;
  }
  /* Titres de section */
  #titre-questions, #titre-reseaux, #titre-rdv { font-size: var(--titre-section); line-height: 1.2; }
  /* FAQ accueil : titre sur une seule ligne ; sa colonne prend la largeur du titre,
     l'accordéon reste à côté (même police, mobile inchangé) */
  .page-accueil .questions { grid-template-columns: max-content minmax(0, 1fr); }
  .page-accueil #titre-questions { white-space: nowrap; }
  .lecture-titre, #lecture-titre-1, #lecture-titre-2 {
    letter-spacing: normal; font-size: min(var(--titre-section), calc(100cqi / 14.6)); line-height: 1.25;
  }
  /* Surtitres en casse naturelle : interlettrage adapté */
  .ouverture__label, .tete-page .label, .equipe-tete__texte .label, .lettres__texte .label, .passage__label { letter-spacing: .02em; }
  /* Corps de texte */
  .ouverture__sous, .lecture-texte, .tete-page__texte .texte, .equipe-tete__texte .texte, .lettres__texte .texte { font-size: var(--texte-courant); }
  .lecture-texte .prudence { font-size: .78rem; }

  /* En-tête : logo et menu un peu plus présents */
  .marque img { height: 1.8125rem; }

  /* Médias d'ouverture : proportions naturelles, poids comparable, même emplacement */
  .ouverture__photo .photo, .decouvrir-photo .photo { aspect-ratio: auto !important; max-height: none; }
  .ouverture__photo .photo img, .decouvrir-photo .photo img { position: static; display: block; height: auto; object-fit: contain; }
  .lettres__visuel img { aspect-ratio: auto; object-fit: contain; }
  .ouverture__photo, .decouvrir-photo, .lettres__visuel { width: 100%; max-width: var(--media-ouverture); justify-self: end; }

  /* « Suite » : reste avant le pied de page, espace resserré, tout le bloc cliquable,
     même rendu sur les quatre pages */
  .passage, .passage--serre { position: relative; padding-top: 2rem; padding-bottom: 2rem; }
  .passage__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
}
@media (min-width: 70rem) { .nav__liste a, .nav__membre { font-size: 1.125rem; } }

/* V2 PC — « Suite » visible au vrai bas (1440×900, 1280×800) : espacements
   du bas resserrés, polices et contenus inchangés ; mobile non concerné. */
@media (min-width: 64rem) {
  .contacts-generaux { padding-block: 1.25rem; }
  .contacts-generaux__grille { gap: 1rem 2rem; padding-top: 1rem; }
  .pied { padding-block: 2rem 1.25rem; }
  .pied__haut { gap: 2rem; padding-bottom: 1.25rem; }
  .pied__logo { margin-bottom: .75rem; }
  .pied__titre { margin-bottom: .25rem; }
  .pied__liste a { min-height: 2rem; }
  .pied__bas { gap: .5rem; padding-top: 1rem; }
  .passage__filet, .passage__chevron, .passage__label { pointer-events: none; }
}

@media (min-width:64rem){ .ouverture,.equipe-tete,.tete-page,.page-lettres{padding-top:4rem;} .ouverture{grid-template-rows:0 auto auto auto auto auto 1fr;} .equipe-tete,.tete-page{align-items:start;} .ouverture__label,.equipe-tete__texte>.label,.tete-page__texte>.label,.lettres__texte>.label{margin:0 0 1rem;line-height:1.6;} .ouverture__titre,.equipe-naissance__titre,.tete-page__texte>.h1,.lettres__texte>.h1{margin-top:0;} .contacts-generaux{padding-block:.5rem;} .contacts-generaux__grille{padding-top:.5rem;} .pied{padding-block:1rem .75rem;} .pied__haut{padding-bottom:.75rem;} .pied__bas{padding-top:.5rem;gap:.25rem;} }
@media(min-width:64rem){ .ouverture__label,.equipe-tete__texte>.label,.tete-page__texte>.label,.lettres__texte>.label{font-size:1rem;line-height:1.6;margin:0 0 1rem;letter-spacing:.12em;} .section.page-lettres{padding-top:4rem;} }

/* V2 mobile/tablette — bas de page allégé (Alex 06/10) : espaces réduits,
   aucune information du pied de page retirée, apparence de « Suite » inchangée. */
@media (max-width: 63.99rem) {
  .passage, .passage--serre, .passage--lien-bloc { padding-top: 2rem; padding-bottom: 2.25rem; }
  .contacts-generaux { padding-block: 1.25rem; }
  .contacts-generaux__grille { gap: 1rem; padding-top: 1rem; }
  .pied { padding-block: 2rem 1.25rem; }
  .pied__haut { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; padding-bottom: 1.25rem; }
  .pied__haut > :first-child { grid-column: 1 / -1; }
  .pied__logo { margin-bottom: .75rem; }
  .pied__titre { margin-bottom: .25rem; }
  .pied__liste a { min-height: 2.25rem; }
  .pied__bas { gap: .5rem; padding-top: 1rem; }
}

/* Lettres : fond d’ouverture ivoire, aligné sur accueil / équipe / nous découvrir (Peter) */
.section--blanc.page-lettres { background: var(--ivoire); }

/* V2 mobile/tablette — le pied de page dépasse à lui seul la hauteur d'un écran :
   « Suite » est donc affiché en dernier, au bas réel de la page, pour rester visible
   et cliquable en fin de défilement. HTML et ordre de lecture inchangés. */
@media (max-width: 63.99rem) {
  body:has(main .passage) { --passage-m: 12.5rem; position: relative; padding-bottom: var(--passage-m); }
  body:has(main .passage) .passage {
    position: absolute; left: 0; right: 0; bottom: 0;
    block-size: var(--passage-m); justify-content: center;
    padding: 0 var(--gouttiere);
  }
  body:has(main .passage) .passage__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .passage__filet, .passage__chevron, .passage__label { pointer-events: none; }
}

/* V2 PC — menu supérieur agrandi (19px dès 1024, 20px dès 1120), écart réduit pour
   ne pas déborder ; titres d'ouverture des quatre pages alignés sur l'accueil. Mobile inchangé. */
@media (min-width: 64rem) {
  .nav__liste a, .nav__membre { font-size: 1.1875rem; }
  .nav__liste { gap: clamp(1rem, 1.6vw, 1.75rem); }
  .ouverture__titre, .equipe-naissance__titre, .tete-page .h1, .lettres__texte .h1 {
    font-size: var(--titre-grand); line-height: 1.1; font-weight: 400; text-transform: none;
  }
}
@media (min-width: 70rem) { .nav__liste a, .nav__membre { font-size: 1.25rem; } }
@media (min-width: 70rem) and (max-width: 79.99rem) { .nav__liste a, .nav__membre { font-size: 1.1875rem; } .nav__liste { gap: .75rem; } .nav { gap: .75rem; } }

/* V2 PC — ouvertures Accueil / Équipe / Nous découvrir alignées (06/10) :
   même grille (texte fluide + visuel de 480px), même écart, visuel calé en haut
   sur le surtitre et au même bord droit ; proportions naturelles conservées.
   Introduction accueil alignée sur le texte des autres ouvertures. Mobile inchangé. */
@media (min-width: 64rem) {
  main .ouverture,
  main .tete-page.tete-page--media {
    grid-template-columns: minmax(0, 1fr) var(--media-ouverture);
    column-gap: 5rem;
    align-items: start;
  }
  main .ouverture .ouverture__photo,
  main .tete-page--media .decouvrir-photo {
    width: var(--media-ouverture); max-width: none;
    margin: 0; align-self: start; justify-self: end;
  }
  main .ouverture .ouverture__sous {
    font-size: var(--texte-courant); line-height: 1.6; color: var(--encre);
    margin-top: 1.25rem; max-width: 36em;
  }
}

/* V2 téléphone/tablette — titres des trois blocs de l'accueil nettement plus grands
   que le texte, retour à la ligne autorisé (Alex 06/10). Ordinateur inchangé. */
@media (max-width: 63.99rem) {
  .lecture-titre, #lecture-titre-1, #lecture-titre-2 {
    white-space: normal; letter-spacing: normal;
    font-size: 1.5rem; line-height: 1.25; text-wrap: balance;
  }
}
.insecable { white-space: nowrap; }

/* V2 Contact ordinateur — espace cartes WhatsApp → agenda réduit à 40 px. */
@media (min-width: 64rem) {
  main:has(.tete-page--contact) #whatsapp { padding-bottom: 1.25rem; }
  main:has(.tete-page--contact) #rendez-vous { padding-top: 1.25rem; }
  main:has(.tete-page--contact) #rendez-vous .agenda { margin-top: 0; }
}

/* V2 Contact — texte courant sous le sous-titre (Benjamin 06/10) : taille du texte courant,
   jamais plus grand que le sous-titre sur téléphone. */
.tete-page__texte-courant { max-width: 44rem; }
@media (max-width: 63.99rem) {
  .tete-page__texte-courant { font-size: 1rem; line-height: 1.65; }
}

/* V2 (06/10) — repères dorés d'ouverture retirés sous le menu, toutes largeurs :
   le grand titre vert remonte dans l'espace libéré. Labels des contenus internes inchangés.
   Équipe : le repère porte le h1 de la page, masqué visuellement mais conservé pour les lecteurs d'écran. */
.ouverture__label,
.tete-page__texte > .label,
.page-lettres .lettres__texte > .label,
.vm-ouverture__texte > .label { display: none; }
.equipe-tete__texte > h1.label {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.equipe-tete__texte > h1.label + .equipe-naissance__titre { margin-top: 0; }

/* V2 Contact (06/10) — en-tête resserré à 16 px haut et bas, toutes largeurs :
   les cartes WhatsApp arrivent plus tôt. Placé après la règle ordinateur .tete-page { padding-top: 4rem }. */
.tete-page--contact { padding-block: 1rem; }

/* V2 PC (06/10) — espace menu → grands titres réduit de 24 px sur les quatre ouvertures
   (64 → 40 px), alignement conservé entre elles. Contact (16 px) et mobile inchangés (Peter). */
@media (min-width: 64rem) {
  main .ouverture,
  main .equipe-tete,
  main .tete-page--compacte,
  main .section.page-lettres { padding-top: 2.5rem; }
}

/* V2 (06/10) — film d'Orezia déplacé de l'Équipe vers l'ouverture de l'accueil, à la place
   de la photo (même emplacement) ; proportions naturelles 16:9, toutes largeurs (Peter). */
.ouverture__film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--vert-profond); }

/* V2 (06/10) — Équipe sans média d'ouverture : introduction pleine largeur, bloc centré
   lisible (64rem max), titre centré ; paragraphes centrés sous l'axe du titre, largeur lisible
   conservée, texte centré — introduction uniquement, biographies inchangées (Peter). */
.equipe-tete__texte { width: 100%; max-width: 64rem; margin-inline: auto; }
.equipe-tete .equipe-naissance__titre { text-align: center; }
.equipe-tete__texte > .texte { margin-inline: auto; text-align: center; }

/* V2 Accueil (06/10) — film d'ouverture agrandi et photos du récit harmonisées (Peter).
   Ordinateur : deux colonnes égales, film 560 × 315 à 1440 px (480 auparavant), fluide jusqu'à
   1024 px (≈ 408 × 230, colonne de texte élargie). Photos du récit : même largeur que le film,
   proportions et cadrages existants conservés. Mobile : film pleine largeur d'écran. Textes et ordre inchangés. */
@media (min-width: 64rem) {
  main .ouverture { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main .ouverture .ouverture__film { width: 100%; max-width: 35rem; }
}
@media (min-width: 761px) {
  .lecture-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lecture-images { width: 100%; max-width: 35rem; justify-self: end; }
  .lecture-ligne--inverse .lecture-images { justify-self: start; }
}
@media (min-width: 64rem) { .lecture-ligne { column-gap: 5rem; } }
.ouverture__film video { object-fit: contain; }

/* V2 PC (06/10) — ouvertures Nous découvrir et Lettres alignées sur l'accueil :
   deux colonnes égales, visuel jusqu'à 560 px (même largeur que le film), proportions
   naturelles conservées, aucun recadrage. Mobile inchangé. */
@media (min-width: 64rem) {
  main .tete-page.tete-page--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main .tete-page--media .decouvrir-photo { width: 100%; max-width: 35rem; }
  .page-lettres .lettres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; }
  .page-lettres .lettres__visuel { width: 100%; max-width: 35rem; justify-self: end; }
}

/* V2 Nous découvrir PC (06/10) — introduction → « Retrouvez-nous… » ramené à 48 px
   (bas de l'en-tête 0 + haut de la section réseaux 48 px). Titre → cartes et mobile inchangés (Peter). */
@media (min-width: 64rem) {
  main .tete-page--compacte { padding-bottom: 0; }
  main .tete-page--compacte + .section { padding-top: 3rem; }
}

/* V2 PC (06/10) — blancs harmonisés vers la section suivante : accueil → premier titre 48 px
   (padding-top de .lecture-ligne), Équipe → portraits 48 px, Lettres → Suite 48 px
   (passage 32 px). Mobile, textes et médias inchangés (Peter). */
@media (min-width: 64rem) {
  main .ouverture { padding-bottom: 0; }
  main .ouverture__sous { margin-bottom: 0; }
  main .ouverture + .lecture-experience { padding-top: 0; }
  main .equipe-tete { padding-bottom: 0; }
  main .equipe-tete + .portraits-section { padding-top: 3rem; }
  main .page-lettres { padding-bottom: 1rem; }
}

/* V2 Accueil (06/10) — introduction en deux paragraphes sous le slogan */
.ouverture__sous > p { margin: 0; }
.ouverture__sous > p + p { margin-top: 1em; }

/* V2 Accueil (06/10) — film déplacé de l'ouverture vers le premier bloc de lecture, à la place
   de la photo. Ouverture sans média : une seule colonne ; ordinateur : titre et introduction
   centrés comme Contact, largeur lisible. Mobile : ordre et alignement inchangés. */
main .ouverture { grid-template: "label" auto "titre" auto "sous" auto / minmax(0, 1fr); }
@media (min-width: 64rem) {
  main .ouverture { justify-items: center; text-align: center; }
  main .ouverture .ouverture__titre { max-width: 64rem; }
  main .ouverture .ouverture__sous { max-width: 64rem; margin-inline: auto; }
}
/* Premier bloc de lecture : pas de filet juste sous l'introduction (les suivants le gardent). */
main .ouverture + .lecture-ligne, main .lecture-experience > .lecture-ligne:first-child { border-top: 0; }

/* V2 Équipe (06/10) — photo duo (retirée du premier bloc de l'accueil) en tête de page :
   centrée, 64rem max, 16:9, cadrage 53% 50%, toutes largeurs. Portraits individuels réduits
   d'environ 20 % sur ordinateur, centrés dans leur colonne ; mobile pleine largeur (Benjamin). */
main .equipe-tete { row-gap: 0; }
.equipe-tete__photo { width: 100%; max-width: 64rem; margin: 0 auto; }
.equipe-tete__photo .photo { aspect-ratio: 16 / 9; }
@media (min-width: 52rem) {
  .portraits-section .portrait > .photo { width: 80%; margin-inline: auto; }
}

/* V2 Nous découvrir (06/10) — film d'Orezia déplacé de l'accueil à la place de la photo d'ouverture :
   texte puis film sur une seule colonne, film centré 64rem max, proportions naturelles 16:9,
   aucun recadrage, toutes largeurs. Accueil : photo duo à la place du film (Peter). */
main .tete-page.tete-page--film { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
.tete-page--film .tete-page__texte { width: 100%; max-width: 64rem; justify-self: center; }
.tete-page--film .decouvrir-film { width: 100%; max-width: 64rem; margin: 0; justify-self: center; }

/* V2 Équipe (06/10) — introduction validée par Peter : respiration avant la photo */
.equipe-tete__texte > .texte:last-child { margin-bottom: 2rem; }
@media (min-width: 64rem) { .equipe-tete__texte > .texte:last-child { margin-bottom: 2.5rem; } }

/* V2 Nous découvrir (06/10) — grande carte YouTube retirée ; lien compact vers la chaîne
   juste au-dessus du film, calé sur son bord droit, toutes largeurs. Cible tactile 44px (Benjamin). */
.tete-page--film .decouvrir-chaine { width: 100%; max-width: 64rem; justify-self: center; display: flex; justify-content: flex-end; margin: 0 0 -2.25rem; }
.decouvrir-chaine__lien { display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; padding-block: .25rem; font-size: .9375rem; letter-spacing: .02em; color: var(--vert-profond); text-decoration: none; }
.decouvrir-chaine__logo { flex: none; width: 1.5rem; height: auto; }
.decouvrir-chaine__lien > span:not(.decouvrir-chaine__fleche) { border-bottom: 1px solid var(--or); padding-bottom: 1px; transition: border-color .3s ease; }
.decouvrir-chaine__fleche { color: var(--or-texte); transition: transform .3s ease; }
.decouvrir-chaine__lien:hover > span:not(.decouvrir-chaine__fleche) { border-color: var(--vert-profond); }
.decouvrir-chaine__lien:hover .decouvrir-chaine__fleche { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .decouvrir-chaine__lien span { transition: none; } .decouvrir-chaine__lien:hover .decouvrir-chaine__fleche { transform: none; } }

/* V2 Équipe (06/10) — logos Horizon Invest / Renov Invest : rangée centrée comme un seul groupe
   dans la colonne de Peter, logos ronds agrandis (3,5 → 4,625rem, 74 px). Noms, liens et retour à la ligne mobile inchangés (Peter). */
.societes--portrait { width: 100%; align-self: stretch; justify-content: center; align-items: center; margin-inline: auto; }
.societes--portrait .societe__lien .societe__logo { flex: none; flex-shrink: 0; width: 4.625rem; height: 4.625rem; }
@media (max-width: 39.99rem) {
  .societes--portrait { flex-wrap: nowrap; gap: .5rem; }
  .societes--portrait .societe__lien { gap: .5rem; }
  .societes--portrait .societe { flex: 1; min-width: 0; }
  .societes--portrait .societe__lien { display: flex; flex-direction: column; align-items: center; }
  .societes--portrait .societe__lien .societe__nom { text-align: center; }
}

/* V2 (06/10) — retours Benjamin : lien chaîne avec emblème phénix rond et icône YouTube agrandie,
   remonté d'environ 38 px vers le texte ; Équipe : portraits remontés d'environ 38 px ;
   logos des sociétés sans cadre ni bordure. Introduction, biographies et Contact inchangés. */
.tete-page--film .decouvrir-chaine { margin-top: -2.375rem; }
.decouvrir-chaine__embleme { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; }
.decouvrir-chaine__logo { width: 2.125rem; }
main .equipe-tete + .portraits-section { margin-top: -2.375rem; }
.societes--portrait .societe__lien .societe__logo { border: 0; padding: 0; background: none; box-shadow: none; }
.portraits-section .societes { border: 0; }
.portraits-section .societe { border: 0; }

/* V2 (06/10) — Benjamin : logos Horizon Invest / Renov Invest centrés sur toute la largeur
   de la page sous les deux colonnes, agrandis, sans aucun filet. */
@media (min-width: 52rem) {
  .portraits-section .portraits > .societes--portrait { grid-column: 1 / -1; justify-self: center; width: auto; margin-top: .5rem; gap: 1.5rem 4rem; }
}
.portraits-section .societes--portrait .societe__lien .societe__logo { width: 6rem; height: 6rem; }
.portraits-section .societes--portrait .societe__lien .societe__nom { font-size: 1.1875rem; }
.portraits-section .societes--portrait, .portraits-section .societes--portrait .societe { border: 0; }
@media (max-width: 51.99rem) {
  .portraits-section .portraits > article[aria-labelledby="nom-peter"] { order: 1; }
  .portraits-section .portraits > .societes--portrait { order: 2; margin-top: -1.5rem; }
  .portraits-section .portraits > article[aria-labelledby="nom-benjamin"] { order: 3; }
}

/* V2 Nous découvrir (07/10) — Benjamin : lien « Abonnez-vous sur YouTube » agrandi et lisible.
   Emblème phénix 64 px et logo YouTube 68 px sur une ligne, libellé 20 px dessous (pseudo-élément
   de retour à la ligne), cible cliquable élargie. Ordinateur : colonne à droite des deux paragraphes,
   centrée sur leur hauteur, le titre garde la pleine ligne ; le film remonte à 48 px sous les paragraphes.
   Mobile : empilé sous le texte, aligné à gauche. Titre, textes, URL et film inchangés. */
.tete-page--film .decouvrir-chaine { justify-content: flex-start; margin: -1rem 0; }
.decouvrir-chaine__lien { flex-wrap: wrap; gap: .5rem 1rem; padding: .5rem .75rem .5rem 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: .01em; }
.decouvrir-chaine__lien::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
.decouvrir-chaine__lien > span { order: 2; }
.decouvrir-chaine__lien .decouvrir-chaine__embleme { width: 4rem; height: 4rem; }
.decouvrir-chaine__lien .decouvrir-chaine__logo { width: 4.25rem; }
.decouvrir-chaine__lien > span:not(.decouvrir-chaine__fleche) { border-bottom-width: 1.5px; padding-bottom: 2px; }
.decouvrir-chaine__fleche { margin-left: -.375rem; }
@media (min-width: 64rem) {
  main .tete-page.tete-page--film {
    grid-template-columns: minmax(0, 1fr) minmax(0, 45rem) minmax(0, 19rem) minmax(0, 1fr);
    column-gap: 0; row-gap: 0;
  }
  .tete-page--film .tete-page__texte { display: contents; }
  .tete-page--film .tete-page__texte > .h1 { grid-column: 2 / 4; grid-row: 1; }
  .tete-page--film .tete-page__texte > .texte:nth-of-type(2) { grid-column: 2; grid-row: 2; margin-bottom: 0; }
  .tete-page--film .tete-page__texte > .texte:nth-of-type(3) { grid-column: 2; grid-row: 3; }
  .tete-page--film .decouvrir-chaine {
    grid-column: 3; grid-row: 2 / 4; align-self: end;
    width: auto; max-width: none; margin: 0; padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .tete-page--film .decouvrir-chaine__lien { padding-right: 0; padding-bottom: 0; }
  .tete-page--film .decouvrir-film { grid-column: 2 / 4; grid-row: 4; max-width: none; margin-top: 2rem; }
}

/* V2 Nous découvrir (07/10) — Benjamin : emblème phénix retiré du lien chaîne ; logo YouTube doublé
   (136 px ordinateur, 104 px mobile sans débordement) ; ordinateur : lien remonté d'environ 30 px
   dans la colonne droite. Libellé, URL, textes et film inchangés. */
.decouvrir-chaine__lien .decouvrir-chaine__logo { width: 6.5rem; max-width: 100%; }
@media (min-width: 64rem) {
  .decouvrir-chaine__lien .decouvrir-chaine__logo { width: 8.5rem; }
  .tete-page--film .decouvrir-chaine { position: relative; top: -1.875rem; }
}

/* V2 Nous découvrir (07/10, Alex/Benjamin TG2764) — paragraphes raccourcis : le lien « Abonnez-vous
   sur YouTube » se cale sur le bas du texte (plus de décalage), le film suit immédiatement à 48 px
   sous les deux. Titre, logo, URL et film inchangés. */
@media (min-width: 64rem) {
  .tete-page--film .decouvrir-chaine { align-self: end; top: 0; }
}

/* V2 PC — menu horizontal : même petit filet vertical que celui placé avant « Nous contacter »,
   répété entre chaque onglet adjacent, y compris avant « Espace membre » (Benjamin).
   Filet centré dans l'écart existant, sans modifier les espacements. Menu mobile inchangé. */
@media (min-width: 70rem) {
  .nav__liste { --nav-ecart: clamp(1rem, 1.6vw, 1.75rem); }
  .nav__liste li { position: relative; }
  .nav__liste li + li::before,
  .entete-site__actions .nav__membre::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px; height: 1.5rem;
    background: var(--bordure);
    transform: translateY(-50%);
    pointer-events: none;
  }
  .nav__liste li + li::before { left: calc(var(--nav-ecart) / -2 - .5px); }
  .entete-site__actions .nav__membre::before { left: calc(-1.75rem / 2 - .5px); }
}
@media (min-width: 70rem) and (max-width: 79.99rem) { .nav__liste { --nav-ecart: .75rem; } }

/* V2 Lettres (07/10) — proposition B validée par Benjamin : titre centré, petite image de la lettre
   à gauche des deux paragraphes, inscription compacte juste dessous. Ordinateur : prénom, email et
   « Je m'inscris » sur une ligne, consentement et mentions sous les champs. Mobile : empilé.
   Textes, image, champs, attributs et JS du formulaire inchangés. Page Lettres uniquement. */
.page-lettres .lettres {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "texte" "form";
  row-gap: 1.75rem;
  width: min(100% - 2 * var(--gouttiere), 50rem);
}
.page-lettres .lettres__texte > .h1 { margin: 0; text-align: center; text-wrap: balance; }
.page-lettres .lettres__texte > .lettres__corps { display: flow-root; margin-top: 1.25rem; }
.page-lettres .lettres__corps .lettres__visuel {
  grid-area: auto; float: left; width: 6.5rem; max-width: none;
  margin: .35rem 1rem .5rem 0; justify-self: auto; align-self: auto;
}
.page-lettres .lettres__corps .lettres__visuel img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 50%; }
.page-lettres .lettres__paragraphes .texte { max-width: none; }
.page-lettres .lettres__paragraphes .texte + .texte { margin-top: .9rem; }

#form-lettres { padding: 1.25rem; }
#form-lettres .champs { gap: 1rem; }
#form-lettres .btn { width: 100%; }
#form-lettres .case { min-height: 2.75rem; align-items: center; }
#form-lettres .case input { margin-top: 0; }
#form-lettres .formulaire__pied { gap: .75rem; margin-top: .25rem; }
#form-lettres .micro { max-width: none; }

@media (min-width: 48rem) {
  .page-lettres .lettres__texte > .lettres__corps {
    display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; align-items: center;
  }
  .page-lettres .lettres__corps .lettres__visuel { float: none; width: auto; margin: 0; }
  #form-lettres { padding: 1.5rem 1.75rem; }
  /* Ligne prénom / email / bouton : sous-grille pour aligner le bouton sur les champs,
     même lorsqu'un message d'erreur apparaît sous l'un d'eux. */
  #form-lettres .champs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
    grid-template-rows: auto auto auto auto;
    gap: 0 1rem;
  }
  #form-lettres .champ--ligne { grid-row: 1 / span 3; grid-template-rows: subgrid; gap: 0; }
  #form-lettres .champ--ligne .champ__label { margin-bottom: .5rem; }
  #form-lettres .champ--ligne .erreur { margin-top: .4rem; }
  #form-lettres .btn { grid-column: 3; grid-row: 2; width: auto; }
  #form-lettres .champ--accord { grid-column: 1 / -1; grid-row: 4; margin-top: .75rem; }
}
@media (min-width: 64rem) {
  .page-lettres .lettres { width: min(100% - 2 * var(--gouttiere), 56rem); row-gap: 2rem; }
  .page-lettres .lettres__texte > .lettres__corps { margin-top: 2rem; }
}

/* V2 (07/10, Benjamin, 5271) — Expérience sans séparateurs : ni filet, ni pointillés entre les
   piliers ni entre les questions, ni phénix (5295). */
main .lecture-experience > .lecture-ligne { border-top: 0; }
.page-accueil .questions .accordeon, .page-accueil .questions .accordeon__item { border: 0; }

/* V2 (07/10) — photos aux coins légèrement arrondis (10px), toutes pages ; logos, icônes et
   vidéos exclus : les conteneurs .photo ne sont arrondis que s'ils portent une image. */
:root { --rayon-photo: 10px; }
.photo:has(> img):not(:has(video)),
.interlocuteurs--deux .interlocuteur--wa .avatar:has(> img) { border-radius: var(--rayon-photo); }
.lettres__visuel img,
.page-lettres .lettres__corps .lettres__visuel img { border: 0; border-radius: var(--rayon-photo); }
.ouverture__film, .ouverture__film video, .decouvrir-film, .decouvrir-film video { border-radius: 0; }

/* V2 Lettres (07/10, Benjamin) — formulaire adouci : plus de cadre ni de carte,
   champs et bouton légèrement arrondis ; case d'accord retirée (le clic sur « Je m'inscris » vaut demande). */
#form-lettres { padding: 0; background: none; border: 0; }
#form-lettres::before { content: none; }
#form-lettres input[type="text"], #form-lettres input[type="email"], #form-lettres .btn { border-radius: .625rem; }
#form-lettres .formulaire__pied { margin-top: .75rem; }
@media (min-width: 48rem) { #form-lettres { padding: 0; } #form-lettres .champs { grid-template-rows: auto auto auto; } }

/* V2 Contact (07/10, Benjamin) — allègement harmonisé avec Lettres : cartes Peter / Benjamin
   sans fond, cadre ni ombre (portrait, bouton WhatsApp et e-mail inchangés) ; agenda sans cadre doré,
   posé sur le même fond ivoire, coins adoucis, remonté vers les cartes. Calendly : détails de
   l'événement masqués par l'option d'URL documentée hide_event_type_details=1 (compte inchangé) ;
   le parcours reste complet, hauteur ajustée par Calendly (voir plus bas). Textes et liens inchangés. */
.interlocuteurs--deux .interlocuteur--wa { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
main:has(.tete-page--contact) #rendez-vous { background: var(--ivoire); padding-top: .75rem; }
main:has(.tete-page--contact) #whatsapp { padding-bottom: .75rem; }
/* Encadré blanc externe retiré : l'agenda se pose directement sur l'ivoire ; le fond interne de
   Calendly est aligné par l'option d'URL documentée background_color=f7f6f1 (= --ivoire). */
/* Double défilement supprimé (07/10, Benjamin) : data-resize="true" (option officielle de
   widget.js) laisse Calendly fixer lui-même la hauteur du widget à chaque étape (date, heure,
   formulaire). Le conteneur suit donc en hauteur automatique, sans recadrage ; 42rem n'est
   qu'une hauteur de départ, remplacée par celle transmise par Calendly. */
main:has(.tete-page--contact) .agenda--calendly {
  display: block; height: auto; overflow: visible; margin-top: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
}
main:has(.tete-page--contact) .agenda--calendly .calendly-inline-widget { height: 42rem; }
main:has(.tete-page--contact) .agenda--calendly .calendly-inline-widget,
main:has(.tete-page--contact) .agenda--calendly iframe { background: transparent; }
@media (min-width: 64rem) {
  main:has(.tete-page--contact) #whatsapp { padding-bottom: .5rem; }
  main:has(.tete-page--contact) #rendez-vous { padding-top: .5rem; }
}

/* V2 (07/10, Benjamin) — Expérience : version A « aérée » validée. Même alternance texte/photo,
   blanc régulier entre les piliers, filet plein et pointillés à égale distance. Textes inchangés. */
@media (min-width: 64rem) {
  main .lecture-ligne { padding-block: 4.5rem; column-gap: 5.5rem; align-items: center; }
  main .lecture-experience { padding-bottom: 2.5rem; }
  .lecture-texte { max-width: 33rem; }
  .lecture-titre, #lecture-titre-1, #lecture-titre-2 { margin-bottom: 1.5rem; }
  .lecture-texte > p + p { margin-top: 1.4rem; }
  .lecture-images { max-width: 33rem; }
}
@media (max-width: 63.99rem) {
  main .lecture-ligne { padding-block: 2.75rem; gap: 1.75rem; }
  .lecture-titre, #lecture-titre-1, #lecture-titre-2 { margin-bottom: 1.25rem; }
  .lecture-texte > p + p { margin-top: 1.35rem; }
}
/* Petits écrans (320 px) : l'agenda ne déborde pas de la page. */
main:has(.tete-page--contact) .agenda--calendly .calendly-inline-widget { min-width: 0 !important; max-width: 100%; }

/* V2 (07/10, Benjamin) — fin du centrage : titres et introductions alignés à gauche sur toutes
   les pages, au bord gauche de la grille (.cadre, même bord que le logo et les blocs de l'accueil),
   médias à droite comme sur Nous découvrir. Une seule mesure de lecture (--mesure : 42rem, ≈ 65
   caractères à 20 px) et un même départ sous le menu (40 px ordinateur, 36 px téléphone).
   Textes, liens, images et ordre inchangés. Contact : voir le style local de la page. */
:root { --mesure: 42rem; }

/* Départ commun des grands titres sous le menu */
main .ouverture, main .equipe-tete, main .tete-page, main .section.page-lettres { padding-top: 2.25rem; }
@media (min-width: 64rem) {
  main .ouverture, main .equipe-tete, main .tete-page, main .section.page-lettres { padding-top: 2.5rem; }
}

/* Accueil — slogan et introduction à gauche, sur la mesure de lecture */
main .ouverture { justify-items: start; text-align: left; }
main .ouverture .ouverture__titre { max-width: none; }
main .ouverture .ouverture__sous { max-width: var(--mesure); margin-inline: 0; }

/* Équipe — titre et introduction à gauche ; titre à la taille des autres grands titres sur téléphone */
.equipe-tete__texte { max-width: none; margin-inline: 0; }
.equipe-tete .equipe-naissance__titre { text-align: left; }
.equipe-tete__texte > .texte { max-width: var(--mesure); margin-inline: 0; text-align: left; }
@media (max-width: 63.99rem) {
  .equipe-tete .equipe-naissance__titre { font-size: clamp(2.375rem, 1.59rem + 3.21vw, 4rem); line-height: 1.08; letter-spacing: -.015em; }
}

/* Nous découvrir — même bord gauche que le logo : texte sur la mesure, logo YouTube juste à sa droite,
   film sur toute la largeur de la grille (même bord droit que le menu). */
@media (min-width: 64rem) {
  main .tete-page.tete-page--film { grid-template-columns: minmax(0, var(--mesure)) minmax(0, 1fr); }
  .tete-page--film .tete-page__texte > .h1 { grid-column: 1 / -1; }
  .tete-page--film .tete-page__texte > .texte:nth-of-type(2),
  .tete-page--film .tete-page__texte > .texte:nth-of-type(3) { grid-column: 1; max-width: none; }
  .tete-page--film .decouvrir-chaine { grid-column: 2; justify-self: start; padding-left: 5rem; }
  .tete-page--film .decouvrir-film { grid-column: 1 / -1; }
}

/* Lettres — titre à gauche ; ordinateur : titre, paragraphes et inscription sur la mesure,
   image de la lettre à droite (proportions naturelles, sans recadrage). Téléphone : empilé. */
.page-lettres .lettres__texte > .h1 { text-align: left; }
@media (min-width: 64rem) {
  .page-lettres .lettres {
    width: min(100% - 2 * var(--gouttiere), var(--largeur));
    grid-template-columns: minmax(0, var(--mesure)) minmax(0, 1fr);
    grid-template-areas: none; column-gap: 5rem; row-gap: 0;
  }
  .page-lettres .lettres__texte,
  .page-lettres .lettres__texte > .lettres__corps { display: contents; }
  .page-lettres .lettres__texte > .h1 { grid-column: 1; grid-row: 1; }
  .page-lettres .lettres__paragraphes { grid-column: 1; grid-row: 2; margin-top: 1.25rem; }
  .page-lettres #form-lettres { grid-column: 1; grid-row: 3; margin-top: 2.5rem; }
  .page-lettres .lettres__corps .lettres__visuel {
    grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end;
    width: 100%; max-width: 35rem; margin: 0;
  }
  .page-lettres .lettres__corps .lettres__visuel img { aspect-ratio: auto; object-fit: contain; }
}

/* Équipe — portraits (80 % de leur colonne) calés à gauche : photo, nom et biographie partagent
   le même bord, celui de Peter tombe sur le bord gauche de la grille. Tailles inchangées. */
@media (min-width: 52rem) {
  .portraits-section .portrait > .photo { margin-inline: 0; }
}

/* V2 (07/10, Benjamin) — Équipe : les deux paragraphes « Orezia est née… » viennent sous
   « Peter et Benjamin, à vos côtés. » (retirés de l'accueil, qui garde le titre seul). */
.equipe-tete__naissance > p { margin: 0; }
.equipe-tete__naissance > p + p { margin-top: 1em; }
@media (min-width: 64rem) { .equipe-tete__texte .equipe-tete__naissance { max-width: 44rem; } }
@media (min-width: 64rem) { main .ouverture { padding-bottom: 1rem; } }

/* V2 Lettres (07/10, Benjamin) — inscription épurée : prénom puis email l'un sous l'autre,
   champs en simple ligne (sans boîte), bouton sous les champs. Textes, attributs et JS inchangés. */
.page-lettres #form-lettres { max-width: 24rem; }
.page-lettres #form-lettres .champs { display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 1.5rem; }
.page-lettres #form-lettres .champ--ligne { display: grid; grid-row: auto; grid-template-rows: none; gap: 0; }
.page-lettres #form-lettres .champ--ligne .champ__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.page-lettres #form-lettres .champ input[type="text"],
.page-lettres #form-lettres .champ input[type="email"] {
  min-height: 3rem; padding: .65rem 0; border: 0; border-bottom: 1px solid var(--or, #BCA785); border-radius: 0;
  background: transparent; font-size: 1.125rem; color: var(--encre);
}
.page-lettres #form-lettres .champ input::placeholder { color: var(--mousse); }
.page-lettres #form-lettres .champ input:hover { border-bottom-color: var(--or, #BCA785); }
.page-lettres #form-lettres .champ input:focus { background: transparent; border-bottom-color: var(--vert-profond); outline: none; }
.page-lettres #form-lettres .champ input:focus-visible { outline: none; border-bottom-width: 2px; }
.page-lettres #form-lettres .champ [aria-invalid="true"] { border-bottom-color: var(--erreur) !important; }
.page-lettres #form-lettres .champ--ligne .erreur { margin-top: .35rem; }
.page-lettres #form-lettres .btn { grid-column: 1; grid-row: auto; width: 100%; margin-top: .5rem; min-height: 3.25rem; border-radius: .625rem; }
.page-lettres #form-lettres .formulaire__pied { margin-top: 1rem; }

/* V2 Lettres (07/10, Benjamin, 5287) — champs et placeholders en EB Garamond, encre #202622. */
.page-lettres #form-lettres .champ input[type="text"],
.page-lettres #form-lettres .champ input[type="email"],
.page-lettres #form-lettres .champ input::placeholder {
  font-family: "EB Garamond", Georgia, serif; font-style: normal; font-size: 1.25rem; color: #202622; opacity: 1;
}

/* ==========================================================================
   32. Finition « proportions et rythme vertical », toutes pages (Benjamin + Peter, 07/10)
   Une seule échelle et un seul rythme, déclarés ici et appliqués aux cinq pages.
   Textes, liens, images et ordre inchangés ; agenda Calendly du Contact non concerné.
   Échelle (téléphone → 1440) : h1 38 → 52 px · h2 26 → 32 · h3 21 → 24 · texte 18 → 20.
   Rythme : menu → h1 = 36 / 40 px ; titre → texte = 24 px ;
            texte → bloc suivant = --section / 2 (28 / 48) ; section → section = --section (56 / 96).
   Mesure de lecture : 34rem ≈ 65-70 caractères à 20 px.
   ========================================================================== */
:root {
  --t-h1: clamp(2.375rem, 1.6rem + 2.2vw, 3.25rem);
  --t-h2: clamp(1.625rem, 1.3rem + .9vw, 2rem);
  --t-h3: clamp(1.3125rem, 1.2rem + .3vw, 1.5rem);
  --t-texte: clamp(1.125rem, 1.05rem + .25vw, 1.25rem);
  --interligne: 1.65;
  --ecart-titre: 1.5rem;
  --ecart-bloc: calc(var(--section) / 2);
  --depart: 2.25rem;
  --mesure: 34rem;
}
@media (min-width: 64rem) { :root { --depart: 2.5rem; } }

/* Grands titres : une seule taille, une seule marge, sur les cinq pages */
main :is(.ouverture__titre, .equipe-tete .equipe-naissance__titre, .tete-page .h1, .page-lettres .lettres__texte > .h1) {
  margin: 0; font-size: var(--t-h1); line-height: 1.1; letter-spacing: -.015em;
}
/* Titres de section et intertitres */
main :is(.lecture-titre, #lecture-titre-1, #lecture-titre-2, #titre-questions, .portraits-section .portrait__nom) {
  font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.005em;
}
main :is(.lecture-titre, #lecture-titre-1, #lecture-titre-2) { margin: 0 0 var(--ecart-titre); }
main .portraits-section .portrait__nom { margin-top: 2rem; }
main .portraits-section .portrait__nom + .texte { margin-top: var(--ecart-titre); }
main .varA-personne .h3 { font-size: var(--t-h3); }

/* Texte courant : même corps, même interligne, même mesure */
main :is(.lecture-texte, .equipe-tete__naissance, .portrait .texte, .tete-page__texte > .texte, .lettres__paragraphes .texte, .varA-tete .tete-page__texte > p.varA-ligne) {
  font-size: var(--t-texte); line-height: var(--interligne);
}
main .varA-tete .tete-page__texte > .tete-page__sous-titre { max-width: var(--mesure); font-size: var(--t-texte); line-height: var(--interligne); }
main :is(.lecture-texte, .portrait .texte) > p + p,
main .equipe-tete__naissance > p + p { margin-top: 1em; }
main :is(.equipe-tete__texte .equipe-tete__naissance, .portrait .texte, .lettres__paragraphes) { max-width: var(--mesure); }

/* Départ commun sous le menu */
main :is(.ouverture, .equipe-tete, .tete-page, .section.page-lettres, .tete-page--contact.varA-tete) { padding-top: var(--depart); }

/* Titre → premier texte : 24 px partout */
main .equipe-tete__texte > .equipe-tete__naissance,
main .tete-page--film .tete-page__texte > .texte:nth-of-type(2),
main .varA-tete .tete-page__texte > .tete-page__sous-titre { margin-top: var(--ecart-titre); }
main .tete-page--contact .tete-page__texte .h1 + .tete-page__sous-titre { margin-top: var(--ecart-titre); }
main .tete-page--film .tete-page__texte > .texte:nth-of-type(3) { margin-top: 1em; }
main .varA-tete .tete-page__texte > .tete-page__sous-titre + p.varA-ligne { margin-top: 1em; }
main .varA-tete .tete-page__texte > p.varA-ligne + p.varA-ligne { margin-top: 1em; }

/* ---- Accueil : titre → filet or → piliers, tous à --section / 2 ---- */
main .ouverture { padding-bottom: 0; }
main .ouverture + .lecture-experience { padding-top: 0; padding-bottom: 0; }
main .lecture-ligne { padding-block: var(--ecart-bloc); }
main .section:has(> .questions) { padding-block: var(--ecart-bloc); }
/* FAQ : liste directement sous son titre (5271), rapprochée du dernier pilier (5295 : 56 / 36 px) */
.page-accueil main .section:has(> .questions) { padding-top: .5rem; }
.page-accueil main .questions { grid-template-columns: minmax(0, 1fr); gap: var(--ecart-titre); }
.page-accueil main .questions .accordeon { max-width: 52rem; }
@media (min-width: 64rem) {
  /* Texte sur 36rem, gouttière 3,5rem ; photo de 33rem (+12 %) centrée dans sa colonne
     et centrée verticalement sur son propre pavé titre + texte (5271) */
  main .lecture-ligne { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); column-gap: 3.5rem; align-items: center; }
  main .lecture-ligne--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); }
  main .lecture-texte { max-width: 36rem; }
  main .lecture-images { width: min(100%, 33rem); max-width: none; justify-self: center; margin-top: 0; }
  /* Photos 1 et 3 centrées sur les paragraphes (titre et sa marge exclus) ; camembert inchangé (5295) */
  main .lecture-ligne:not(.lecture-ligne--inverse) .lecture-images { margin-top: calc(var(--t-h2) * 1.2 + var(--ecart-titre)); }
}

/* ---- Équipe : texte → portraits = --section / 2 ---- */
main .equipe-tete { padding-bottom: 0; }
main .equipe-tete__texte > .texte:last-child { margin-bottom: 0; }
main .equipe-tete + .portraits-section { margin-top: 0; padding-top: var(--ecart-bloc); padding-bottom: var(--ecart-bloc); }

main .equipe-tete + .portraits-section + .contacts-generaux { padding-top: 0; }
main .contacts-generaux:has(+ .passage) { padding-bottom: var(--ecart-bloc); }

/* ---- Nous découvrir : texte → film = --section / 2 ---- */
main .tete-page--film { padding-bottom: var(--ecart-bloc); row-gap: var(--ecart-bloc); }
@media (max-width: 63.99rem) { main .tete-page--film .decouvrir-chaine { margin: 0; } }
@media (min-width: 64rem) {
  main .tete-page--film { row-gap: 0; }
  main .tete-page--film .decouvrir-film { margin-top: var(--ecart-bloc); }
}

/* ---- Lettres : titre → texte 24 px, texte → inscription --section / 2, image calée sur le titre ---- */
main .section.page-lettres { padding-bottom: var(--ecart-bloc); }
main .page-lettres .lettres { row-gap: var(--ecart-bloc); }
main .page-lettres .lettres__texte > .lettres__corps { margin-top: var(--ecart-titre); }
@media (min-width: 64rem) {
  main .page-lettres .lettres { row-gap: 0; }
  main .page-lettres .lettres__texte > .lettres__corps { margin-top: 0; }
  main .page-lettres .lettres__paragraphes { margin-top: var(--ecart-titre); }
  main .page-lettres #form-lettres { margin-top: var(--ecart-bloc); }
  main .page-lettres .lettres__corps .lettres__visuel { align-self: start; margin-top: .55rem; }
}

/* ---- Contact : portraits plus grands, centrés sur la hauteur du texte ---- */
main .tete-page--contact.varA-tete { padding-bottom: 0; row-gap: var(--ecart-bloc); }
main .varA-personnes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; max-width: 22rem; }
main .varA-portrait { width: 100%; max-width: 10rem; }
@media (min-width: 64rem) {
  /* Le titre tient sur une ligne ; les paragraphes restent sur la mesure */
  main .tete-page--contact.varA-tete { grid-template-columns: minmax(0, 1fr) auto; column-gap: 4.5rem; align-items: center; }
  main .varA-tete .tete-page__texte { max-width: none; }
  main .varA-tete .tete-page__texte > p.texte { max-width: var(--mesure); }
  main .varA-personnes { justify-self: end; grid-template-columns: repeat(2, 11.5rem); column-gap: 2.5rem; max-width: none; align-self: center; }
  main .varA-portrait { width: 11.5rem; max-width: none; }
}

/* ---- « Suite » : centré sur toutes les pages, ordinateur et téléphone (5297) ---- */
main .passage {
  align-items: center; text-align: center;
  padding-inline: max(var(--gouttiere), calc((100% - var(--largeur)) / 2));
}
main .passage__label { justify-content: center; }
main .passage__titre { font-size: var(--t-h2); line-height: 1.2; }
@media (min-width: 64rem) {
  main .passage, main .passage--serre, main .passage--lien-bloc { padding-block: var(--ecart-bloc); }
}

/* V2 Lettres (07/10, Benjamin 5299-5300) — ordinateur : photo réduite (-9 %) et recadrée à droite
   (≈ 7 %, plus près du stylo), centrée dans sa colonne et sur le bloc des paragraphes (marges
   négatives symétriques : la ligne de grille n'est pas agrandie). Inscription remontée de 18 px. */
main .page-lettres .lettres { row-gap: calc(var(--ecart-bloc) - 18px); }
@media (min-width: 64rem) {
  main .page-lettres .lettres { row-gap: 0; }
  main .page-lettres .lettres__corps .lettres__visuel {
    grid-row: 2; align-self: center; justify-self: center;
    width: 91%; max-width: 32rem; margin: calc(var(--ecart-titre) - 8rem) 0 -8rem; /* paragraphes : marge haute du titre */
  }
  main .page-lettres .lettres__corps .lettres__visuel img { aspect-ratio: 14.88 / 9; object-fit: cover; object-position: 0% 50%; }
  main .page-lettres #form-lettres { margin-top: calc(var(--ecart-bloc) - 18px); }
}

/* ESSAI (07/10, Benjamin 5301) — Expérience : photos en portrait 9/10 par recadrage CSS, originaux
   intacts. !important nécessaire pour surcharger l'aspect-ratio 16/9 et --pos posés en ligne.
   Réversible : supprimer ce bloc. Cadrages : deux visages + PC ; camembert ; Peter + écran. */
.page-accueil main .lecture-images .photo { aspect-ratio: 9 / 10 !important; }
.page-accueil main .lecture-images .photo img { object-position: 50% 50% !important; }
.page-accueil main .lecture-images .photo img[src*="dsc_7368"],
.page-accueil main .lecture-images .photo img[src*="peter-schema-patrimonial"] { object-position: 40% 50% !important; }
.page-accueil main .lecture-images { width: min(100%, 20rem); justify-self: center; }
@media (min-width: 64rem) { .page-accueil main .lecture-images { width: min(100%, 28rem); } }

/* V2 Équipe (07/10, Benjamin 5302) — logos Horizon Invest / Renov Invest remontés d'environ 75 px
   vers le texte (ordinateur) ; téléphone : -32 px, l'écart restant ≥ 50 px. Sans marge négative. */
.portraits-section .portraits > .societes--portrait { margin-top: 0 !important; }
@media (min-width: 52rem) { main .portraits-section .portraits { row-gap: 2.7rem; /* 86 → 43 px */ } }

/* V2 Lettres (07/10, Benjamin 5307 → 5325) — ordinateur : photo seule, rognée sur les côtés
   (x 80-880 sur 1024 : enveloppe, stylo entiers, ruban), rectangle 800/576 ≈ 400 × 288, coins 10 px,
   sans aplat. Centrée dans sa colonne et sur les paragraphes ; marges négatives : l'inscription
   n'est pas repoussée. Original intact. Téléphone : petite vignette inchangée. */
@media (min-width: 64rem) {
  main .page-lettres .lettres__corps .lettres__visuel {
    width: 25rem; max-width: 100%; justify-self: center;
    margin: calc(var(--ecart-titre) - 8rem) 0 -8rem;
  }
  main .page-lettres .lettres__corps .lettres__visuel img {
    width: 100%; height: auto; aspect-ratio: 800 / 576;
    object-fit: cover; object-position: 35.7% 50%; border-radius: 10px;
  }
}

/* Pied de page (07/10, Benjamin 5318) — ligne légale réduite de 2 px (14 → 12 px), toutes tailles */
.pied__bas .pied__identite { font-size: .75rem !important; }

/* V2 Expérience (07/10, Benjamin 5327) — 3e photo seule (Peter + écran) : cadre 4/3 élargi vers la
   droite pour montrer l'écran et le client ; position 85 % 50 % (source 1920 × 1080 : x 408-1848,
   toute la hauteur). Ordinateur 560 × 420 dans sa colonne ; centre vertical inchangé. Original intact. */
.page-accueil main .lecture-images:has(img[src*="peter-schema-patrimonial"]) .photo { aspect-ratio: 4 / 3 !important; }
.page-accueil main .lecture-images .photo img[src*="peter-schema-patrimonial"] { object-position: 85% 50% !important; }
@media (min-width: 64rem) { .page-accueil main .lecture-images:has(img[src*="peter-schema-patrimonial"]) { width: min(100%, 35rem); } }
/* Retouche Benjamin 07/10 : deux premières photos Expérience un peu plus larges, format carré */
.page-accueil main .lecture-images:has(img[src*="dsc_7283"]),
.page-accueil main .lecture-images:has(img[src*="dsc_7368"]) { width: min(100%, 21rem); }
.page-accueil main .lecture-images:has(img[src*="dsc_7283"]) .photo,
.page-accueil main .lecture-images:has(img[src*="dsc_7368"]) .photo { aspect-ratio: 1 / 1 !important; }
@media (min-width: 64rem) {
  .page-accueil main .lecture-images:has(img[src*="dsc_7283"]),
  .page-accueil main .lecture-images:has(img[src*="dsc_7368"]) { width: min(100%, 31rem); }
}

/* V2 Lettres (07/10, Benjamin 5437) — lettre détourée (lettre-orezia-detouree.png, 783 × 488,
   fond transparent ; original lettre-orezia.jpg intact). Image entière, sans cadre ni rognage,
   ombre grise discrète pour détacher l'enveloppe blanche. Ordinateur : ≈ 480 px, centrée dans la
   colonne droite et sur l'ensemble paragraphes + inscription (marge haute = celle des paragraphes) ;
   marges négatives retirées, l'inscription n'est pas repoussée. Téléphone : entière, centrée. */
.page-lettres .lettres__corps .lettres__visuel img {
  aspect-ratio: auto; height: auto; object-fit: contain; object-position: 50% 50%;
  border: 0; border-radius: 0; background: transparent;
  filter: drop-shadow(0 .6rem 1rem rgba(32, 38, 34, .14)) drop-shadow(0 1px 2px rgba(32, 38, 34, .12));
}
@media (max-width: 63.99rem) {
  .page-lettres .lettres__texte > .lettres__corps { display: flow-root; }
  .page-lettres .lettres__corps .lettres__visuel {
    float: none; width: min(100%, 26rem); max-width: 100%; margin: 0 auto var(--ecart-titre);
  }
  .page-lettres .lettres__corps .lettres__visuel img { width: 100%; }
}
@media (min-width: 64rem) {
  main .page-lettres .lettres__corps .lettres__visuel {
    grid-row: 2 / 4; align-self: center; justify-self: center;
    width: min(100%, 30rem); max-width: 100%; margin: var(--ecart-titre) 0 0;
  }
  main .page-lettres .lettres__corps .lettres__visuel img {
    width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0;
  }
}

/* V2 Lettres (07/10, Benjamin 5452) — retour à la photo originale (tissu vert) à bords fondus :
   lettre-orezia-fondue.png (1024 × 576, alpha arrondi et estompé ; original lettre-orezia.jpg intact).
   Le fondu est dans l'alpha : pas d'ombre (elle dessinerait un bord sombre), ni cadre ni rognage.
   Largeur (≈ 480 px ordinateur) et centrage texte + inscription du bloc 5437 inchangés. */
.page-lettres .lettres__corps .lettres__visuel img { filter: none; border-radius: 0; }

/* V2 Lettres (07/10, Benjamin 5461) — finition avant gel : ovale (lettre-orezia-ovale.png 984 × 576,
   inchangé) agrandi de 10 % sur ordinateur (480 → 528 px, 33rem, borné par la colonne) et centré
   sur la ligne « Notre ambition n'est pas… » (2e ligne du 2e paragraphe). La figure part du haut
   de la rangée des paragraphes : marge = écart titre + 3,5 lignes de texte courant + écart entre
   paragraphes (1,25rem) = centre de la ligne ; translateY(-50 %) aligne le centre de l'image.
   Téléphone : inchangé (empilé, 100 % max). */
@media (min-width: 64rem) {
  main .page-lettres .lettres__corps .lettres__visuel {
    grid-row: 2 / 4; align-self: start; width: min(100%, 33rem);
    margin: calc(var(--ecart-titre) + 3.5 * var(--t-texte) * var(--interligne) + 1.25rem) 0 0;
    transform: translateY(-50%);
  }
}