/* ==========================================================================
   Site Margot Dandieu — feuille de style principale
   Étape 1 : variables (palette, typographie) + reset minimal.
   Aucun style de page pour l'instant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */

:root {
  /* --- Polices ---------------------------------------------------------- */
  --font-titre: "Cormorant Garamond", Georgia, serif;            /* titres, citations, corps Accueil et Méthode */
  --font-texte: "EB Garamond", Georgia, serif;                   /* paragraphes d'intro de la page Offres */
  --font-ui:    "Helvetica Neue", Helvetica, Arial, sans-serif;  /* menu, sur-titres, boutons, listes, accordéons */
  --font-mono:  "Roboto Mono", "Courier New", monospace;         /* grands numéros 01. 02. 03. 04. */

  /* --- Fonds ------------------------------------------------------------ */
  --blanc:       #FFFFFF;   /* fond des sections texte */
  --creme:       #F9F8F3;   /* fond principal, alternance avec le blanc */
  --gris-hero:   #F0EFEF;   /* PAS le hero (son panneau est en crème) : à confirmer ailleurs */
  --sable:       #EDE9D9;   /* fond des colonnes d'offres, bandeau « le coût de l'inaction » */
  --beige-photo: #E5DFD3;   /* fond derrière certaines photos */
  --creme-chaud: #FAF6ED;   /* fond des sections « n'est pas », « postuler » et FAQ */
  --sable-fonce: #E0DAC7;   /* fond du P.S. en bas de la page Offres */

  /* --- Textes ----------------------------------------------------------- */
  --brun:       #483419;    /* texte courant page Accueil */
  --brun-fonce: #221A0A;    /* texte page Offres, filets des accordéons, boutons sombres */
  --noir:       #000000;    /* certains titres et paragraphes de l'Accueil, titre du hero */
  --gris-menu:  #948776;    /* liens du menu principal */
  --brun-numero: #443A31;   /* grands numéros 01. 02. 03. 04. de la roue */

  /* --- Accents ---------------------------------------------------------- */
  --or:    #CB9E00;   /* nom MARGOT DANDIEU, sur-titres, italiques mis en avant, chiffres +15 +100 +1 */
  --ocre:  #B97808;   /* titres FONDATIONS / TERRITOIRES / PATRIMOINE */
  --jaune: #FFDE59;   /* boutons CTA (RDV APPEL STRATÉGIQUE, DÉCOUVRIR LES OFFRES) */

  /* --- Mise en page ----------------------------------------------------- */
  --largeur-max: 1440px;    /* conteneur desktop centré */
}

/* --------------------------------------------------------------------------
   2. Reset minimal
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

body {
  min-height: 100vh;
  font-family: var(--font-titre);
  color: var(--brun);
  background-color: var(--blanc);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  text-wrap: balance;
}

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

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

/* Respect de la préférence système « moins d'animations » */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. Grille de page

   La maquette Canva fait 842 pt de large. Pour en conserver les proportions
   exactes sans en figer les pixels, toutes les dimensions sont exprimées en
   multiples de --u, où 1u = 1 pt de la maquette. La page est un conteneur de
   requête : --u suit donc sa largeur réelle, plafonnée à --largeur-max.
   -------------------------------------------------------------------------- */

html {
  background-color: var(--blanc);
  scroll-behavior: smooth;
}

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

body {
  max-width: var(--largeur-max);
  margin-inline: auto;
  container-type: inline-size;
}

.page {
  --u: calc(100cqi / 842);
}

/* --------------------------------------------------------------------------
   4. En-tête
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  height: calc(103.25 * var(--u));
  background-color: var(--blanc);
}

/* Les ancres s'arrêtent sous l'en-tête collant. */
main > section[id] {
  scroll-margin-top: calc(103.25 * var(--u));
}

/* Section visible : le lien du menu correspondant est souligné en or. */
.entete__lien[aria-current="true"] {
  box-shadow: 0 calc(2 * var(--u)) 0 -1px var(--or);
}

.entete__inner {
  display: flex;
  align-items: center;
  height: calc(23 * var(--u));          /* hauteur du bouton, sur laquelle tout s'aligne */
  padding-top: calc(27 * var(--u));
  padding-left: calc(20.75 * var(--u));
  padding-right: calc(6.5 * var(--u));
  box-sizing: content-box;
}

/* En desktop la <nav> ne forme pas de boîte : ses liens redeviennent des
   éléments flex de .entete__inner, comme avant son introduction. L'ordre
   visuel de la maquette est rétabli par `order`. */
.entete__nav {
  display: contents;
}

.entete__burger {
  display: none;
}

.entete__lien--accompagnements { order: 1; }
.entete__lien--methode         { order: 2; }
.entete__marque                { order: 3; }
.entete__lien--apropos         { order: 4; }
.entete__lien--faq             { order: 5; }
.entete__cta                   { order: 6; }

.entete__lien,
.entete__marque,
.entete__cta {
  font-family: var(--font-ui);
  text-transform: uppercase;
  white-space: nowrap;
}

.entete__lien {
  font-size: calc(10.15 * var(--u));
  letter-spacing: 0.09em;
  padding-top: calc(0.8 * var(--u));   /* descend le texte de 0,4 u */
  color: var(--gris-menu);
}

.entete__marque {
  margin-left: calc(70 * var(--u));
  font-size: calc(18.72 * var(--u));
  font-weight: 700;
  letter-spacing: 0.0825em;
  padding-bottom: calc(1.6 * var(--u));   /* remonte le texte de 0,8 u */
  color: var(--jaune);
}

.entete__lien--methode  { margin-left: calc(29.05 * var(--u)); }
.entete__lien--apropos  { margin-left: calc(66 * var(--u)); }
.entete__lien--faq      { margin-left: calc(26.35 * var(--u)); }

.entete__cta {
  margin-left: calc(27.95 * var(--u));
}

/* --------------------------------------------------------------------------
   5. Composants récurrents
   -------------------------------------------------------------------------- */

.bouton-jaune {
  display: inline-flex;
  align-items: center;
  height: calc(23 * var(--u));
  padding-left: calc(9.5 * var(--u));
  padding-right: calc(7 * var(--u));
  padding-bottom: calc(2 * var(--u));   /* remonte le texte de 1 u */
  background-color: var(--jaune);
  color: var(--brun-fonce);
  font-family: var(--font-ui);
  font-size: calc(8 * var(--u));
  letter-spacing: 0.0185em;
  text-transform: uppercase;
}

.lien-decouvrir {
  font-family: var(--font-ui);
  font-size: calc(8.72 * var(--u));
  font-style: italic;
  font-weight: 700;
  color: var(--brun-fonce);
}

/* --------------------------------------------------------------------------
   6. Accueil — section 1 : hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: calc(441.25 * var(--u)) 1fr;
  height: calc(430.75 * var(--u));
}

.hero__photo {
  position: relative;
  overflow: hidden;
}

/* Recadrage relevé sur la maquette : la photo y est agrandie à 261 % de la
   largeur du bloc et cadrée sur le buste (source visible : x 497-1110,
   y 68-666 de margot-hero-nb.jpg). */
.hero__photo img {
  position: absolute;
  left: 50.3%;
  top: 22.5%;
  width: 261%;
  max-width: none;
  transform: translate(-50.3%, -22.5%);
}

.hero__panneau {
  padding-left: calc(52.75 * var(--u));
  padding-top: calc(227.6 * var(--u));
  background-color: var(--creme);
}

.hero__titre {
  font-family: var(--font-titre);
  font-size: calc(30.1 * var(--u));
  font-weight: 700;
  line-height: calc(41.3 * var(--u));
  color: var(--noir);
}

.hero__titre em {
  font-style: italic;
}

.hero .lien-decouvrir {
  display: inline-block;
  margin-top: calc(14.9 * var(--u));
}

/* --------------------------------------------------------------------------
   7. Accueil — section 2 : bandeau briques
   -------------------------------------------------------------------------- */

.bandeau-briques {
  position: relative;
  height: calc(359.25 * var(--u));
  overflow: hidden;
}

/* La photo est affichée sur toute la largeur de la page et rognée en hauteur.
   58,2 % cadre les briques comme dans la maquette. */
.bandeau-briques img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58.2%;
}

.bandeau-briques__legende {
  position: absolute;
  left: calc(137.5 * var(--u));
  top: calc(270 * var(--u));
  width: calc(572.75 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(15.9 * var(--u));
  line-height: calc(21.75 * var(--u));
  letter-spacing: -0.011em;
  text-align: justify;
  color: var(--brun-fonce);
}

/* --------------------------------------------------------------------------
   8. Accueil — section 3 : « Saviez-vous » et sa roue
   -------------------------------------------------------------------------- */

.saviez-vous {
  position: relative;
  height: calc(867 * var(--u));
  margin-top: calc(20 * var(--u));      /* filet blanc entre les deux sections */
  background-color: var(--gris-hero);
}

.saviez-vous__texte {
  position: absolute;
  font-family: var(--font-titre);
  font-size: calc(14 * var(--u));
  line-height: calc(19.5 * var(--u));
  text-align: justify;
  color: var(--brun-fonce);
}

.saviez-vous__num {
  font-weight: 700;
}

.saviez-vous__texte--01 { left: calc(84.25 * var(--u));  top: calc(95.95 * var(--u));  width: calc(213.5 * var(--u)); }
.saviez-vous__texte--02 { left: calc(568.75 * var(--u)); top: calc(95.95 * var(--u));  width: calc(203 * var(--u)); }
.saviez-vous__texte--03 { left: calc(570.75 * var(--u)); top: calc(600.45 * var(--u)); width: calc(202.5 * var(--u)); }
.saviez-vous__texte--04 { left: calc(85.25 * var(--u));  top: calc(600.45 * var(--u)); width: calc(200.25 * var(--u)); }

/* Roue : quatre quarts d'anneau. Chacun affiche son quadrant de la même image
   (cadrée sur la roue) et se découpe au border-radius : rayon extérieur 100 %
   sur le coin externe, rayon intérieur 107,3 u sur le coin central. Les
   interstices entre les quarts sont dans l'image, comme dans la maquette. */
.roue {
  position: absolute;
  left: calc(224.5 * var(--u));
  top: calc(216.25 * var(--u));
  width: calc(362 * var(--u));
  height: calc(362 * var(--u));
}

.roue__quart {
  position: absolute;
  width: calc(181 * var(--u));
  height: calc(181 * var(--u));
  background-image: url("../images/roue-4-photos.jpg");
  background-size: calc(362 * var(--u)) calc(362 * var(--u));
  background-repeat: no-repeat;
}

.roue__quart--01 { top: 0; left: 0;     background-position: 0 0;       border-radius: 100% 0 calc(107.6 * var(--u)) 0; }
.roue__quart--02 { top: 0; right: 0;    background-position: 100% 0;    border-radius: 0 100% 0 calc(107.6 * var(--u)); }
.roue__quart--03 { bottom: 0; right: 0; background-position: 100% 100%; border-radius: calc(107.6 * var(--u)) 0 100% 0; }
.roue__quart--04 { bottom: 0; left: 0;  background-position: 0 100%;    border-radius: 0 calc(107.6 * var(--u)) 0 100%; }

.roue__numero {
  position: absolute;
  font-family: var(--font-mono);
  font-size: calc(33.05 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--brun-numero);
}

/* Positions en pourcentage du diamètre : les numéros suivent la roue
   quelle que soit sa taille. */
.roue__numero--01 { left:  6.685%; top:  8.218%; }
.roue__numero--02 { left: 87.000%; top: 18.854%; }
.roue__numero--03 { left: 82.376%; top: 82.804%; }
.roue__numero--04 { left: -6.643%; top: 69.199%; }

.saviez-vous__cta {
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% - 0.9 * var(--u)));
  top: calc(812.25 * var(--u));
  /* la maquette donne à ce bouton des marges intérieures plus larges qu'à celui de l'en-tête */
  padding-left: calc(14.75 * var(--u));
  padding-right: calc(12 * var(--u));
}

/* --------------------------------------------------------------------------
   9. Sur-titre de section
   -------------------------------------------------------------------------- */

.surtitre {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.057em;
  color: var(--or);
}

.filet-or {
  display: block;
  background-color: var(--or);
}

/* --------------------------------------------------------------------------
   10. Accueil — section 4 : Ma vision
   -------------------------------------------------------------------------- */

.ma-vision {
  position: relative;
  height: calc(476.75 * var(--u));
  margin-top: calc(20.5 * var(--u));     /* filet blanc entre les deux sections */
  background-color: var(--creme);
}

.ma-vision__surtitre {
  position: absolute;
  left: calc(135.25 * var(--u));
  top: calc(79.2 * var(--u));
  font-size: calc(10.85 * var(--u));
  letter-spacing: 0.0795em;
}

.ma-vision__texte {
  position: absolute;
  left: calc(133.25 * var(--u));
  top: calc(140.3 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(17.5 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: -0.0068em;
  color: var(--brun);
}

.chiffres__item {
  position: absolute;
}

.chiffres__item--1 { left: calc(137 * var(--u)); }
.chiffres__item--2 { left: calc(300.5 * var(--u)); }
.chiffres__item--3 { left: calc(489.5 * var(--u)); }

.chiffres__nombre,
.chiffres__libelle {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
}

.chiffres__nombre {
  position: absolute;
  top: calc(340.2 * var(--u));
  font-size: calc(32.34 * var(--u));
  letter-spacing: 0.0028em;
  line-height: 1;
  color: var(--brun);
}

.chiffres__libelle {
  position: absolute;
  top: calc(381.8 * var(--u));
  font-size: calc(9.92 * var(--u));
  line-height: 1;
  letter-spacing: 0.038em;
  white-space: nowrap;
  color: var(--or);
}

/* --------------------------------------------------------------------------
   11. Accueil — section 5 : Ce que vous vivez peut-être
   -------------------------------------------------------------------------- */

.ce-que-vous-vivez {
  position: relative;
  height: calc(557.25 * var(--u));
  background-color: var(--blanc);
}

.ce-que-vous-vivez__surtitre {
  position: absolute;
  left: calc(62 * var(--u));
  top: calc(78.8 * var(--u));
  font-size: calc(8.05 * var(--u));
  letter-spacing: 0.2245em;   /* la maquette espace très largement ce sur-titre */
}

.ce-que-vous-vivez__titre {
  position: absolute;
  left: calc(62 * var(--u));
  top: calc(128.3 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: calc(36 * var(--u));
  letter-spacing: 0.0546em;
  color: var(--brun-fonce);
}

.ce-que-vous-vivez__titre em {
  font-style: italic;
  color: var(--or);
}

.ce-que-vous-vivez__accroche {
  position: absolute;
  left: calc(62 * var(--u));
  top: calc(257.2 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(12 * var(--u));
  letter-spacing: 0.148em;
  color: var(--brun-fonce);
}

.ce-que-vous-vivez .filet-or {
  position: absolute;
  left: calc(313.25 * var(--u));
  top: calc(268.25 * var(--u));
  width: calc(113.25 * var(--u));
  height: calc(1.75 * var(--u));
}

.ce-que-vous-vivez__texte {
  position: absolute;
  left: calc(467.25 * var(--u));
  top: calc(29 * var(--u));
  width: calc(331.75 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(12 * var(--u));
  line-height: calc(16.5 * var(--u));
  text-align: justify;
  color: var(--brun);
}

.ce-que-vous-vivez__texte p + p {
  margin-top: calc(16.5 * var(--u));     /* une ligne vide entre les blocs */
}

.ce-que-vous-vivez__cta {
  position: absolute;
  left: calc(129.25 * var(--u));
  top: calc(503.75 * var(--u));
  padding-left: calc(14.75 * var(--u));
  padding-right: calc(12 * var(--u));
}

/* --------------------------------------------------------------------------
   12. Accueil — section 6 : Ce dont il est question
   -------------------------------------------------------------------------- */

.ce-dont {
  display: grid;
  grid-template-columns: calc(442 * var(--u)) 1fr;
  height: calc(469.75 * var(--u));
}

.ce-dont__texte {
  padding-left: calc(64.25 * var(--u));
  padding-top: calc(41.8 * var(--u));
  background-color: var(--creme);
}

.ce-dont__surtitre {
  margin-bottom: calc(29 * var(--u));
  font-size: calc(8.4 * var(--u));
  letter-spacing: 0.216em;
}

.ce-dont__texte p:not(.surtitre) {
  width: calc(226 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(12.76 * var(--u));
  line-height: calc(16.5 * var(--u));
  color: var(--noir);
}

.ce-dont__texte p + p {
  margin-top: calc(16.5 * var(--u));     /* une ligne vide entre les blocs */
}

.ce-dont__photo {
  overflow: hidden;
}

/* Cadrage relevé : la photo remplit la hauteur du bloc et se recentre sur
   Margot, à 57,4 % de la largeur disponible. */
.ce-dont__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57.4% center;
}

/* --------------------------------------------------------------------------
   13. Accueil — section 7 : Le coût de l'inaction
   -------------------------------------------------------------------------- */

.cout-inaction {
  position: relative;
  height: calc(547.75 * var(--u));
  background-color: var(--blanc);
}

.cout-inaction__surtitre {
  position: absolute;
  left: calc(64.5 * var(--u));
  top: calc(48 * var(--u));
  font-size: calc(9 * var(--u));
  letter-spacing: 0.164em;
}

.cout-inaction__titre {
  position: absolute;
  left: calc(64.75 * var(--u));
  top: calc(109.4 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(18.3 * var(--u));
  font-weight: 700;
  line-height: calc(24.75 * var(--u));
  letter-spacing: -0.01em;
  color: var(--brun-fonce);
}

.cout-inaction__titre em {
  font-style: italic;
  color: var(--or);
}

/* L'encart n'est pas sur fond sable comme l'annonçait CONTENU.md : il est en crème. */
.cout-inaction__encart {
  position: absolute;
  left: calc(26.25 * var(--u));
  top: calc(287 * var(--u));
  width: calc(394.5 * var(--u));
  height: calc(200 * var(--u));
  padding-left: calc(25 * var(--u));
  padding-top: calc(39.8 * var(--u));
  background-color: var(--creme);
}

.cout-inaction__encart p {
  font-family: var(--font-ui);
  font-size: calc(10.76 * var(--u));
  line-height: calc(30 * var(--u));
  white-space: nowrap;
  color: var(--or);
}

.cout-inaction__texte {
  position: absolute;
  left: calc(456.25 * var(--u));
  top: calc(28.5 * var(--u));
  width: calc(372 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(12 * var(--u));
  line-height: calc(16.38 * var(--u));
  color: var(--brun);
}

.cout-inaction__texte p + p {
  margin-top: calc(16.38 * var(--u));
}

/* --------------------------------------------------------------------------
   14. Accueil — sections 8 et 10 : blocs photo + citation
   -------------------------------------------------------------------------- */

.citation {
  display: grid;
  height: calc(431.5 * var(--u));
}

.citation--8  { grid-template-columns: calc(430.75 * var(--u)) 1fr; }
.citation--10 { grid-template-columns: calc(442 * var(--u)) 1fr;
                margin-top: calc(27.75 * var(--u)); }

.citation__photo {
  overflow: hidden;
}

.citation__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cadrage relevé sur la maquette : la photo y est agrandie à 216,8 % de la
   largeur du bloc (soit 1,25 fois plus qu'un simple « cover ») et recentrée
   sur le visage et le carnet. */
.citation--10 .citation__photo {
  position: relative;
}

.citation--10 .citation__photo img {
  position: absolute;
  left: 63.2%;
  top: 66.9%;
  width: 216.8%;
  height: auto;
  max-width: none;
  object-fit: fill;
  transform: translate(-63.2%, -66.9%);
}

/* <picture> ne forme pas de boîte : l'<img> reste l'enfant direct du bloc. */
.citation__photo picture {
  display: contents;
}

.citation__panneau {
  background-color: var(--creme);
}

.citation__texte {
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--noir);
}

.citation__texte em {
  font-style: italic;
}

.citation--8 .citation__panneau  { padding-left: calc(33 * var(--u)); padding-top: calc(245 * var(--u)); }
.citation--10 .citation__panneau { padding-left: calc(27.75 * var(--u)); padding-top: calc(242.3 * var(--u)); }

.citation__texte {
  font-size: calc(26.07 * var(--u));
  line-height: calc(36 * var(--u));
}

.citation .lien-decouvrir {
  display: inline-block;
  margin-top: calc(15 * var(--u));
  margin-left: calc(3 * var(--u));       /* la maquette le décale légèrement du texte */
}

/* --------------------------------------------------------------------------
   15. Accueil — section 9 : Le constat
   -------------------------------------------------------------------------- */

.le-constat {
  position: relative;
  height: calc(541.5 * var(--u));
  background-color: var(--creme);
}

.le-constat__surtitre {
  position: absolute;
  left: calc(64.5 * var(--u));
  top: calc(37 * var(--u));
  font-size: calc(9 * var(--u));
  letter-spacing: 0.19em;
}

.le-constat__titre {
  position: absolute;
  left: calc(65 * var(--u));
  top: calc(85 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(24.75 * var(--u));
  font-weight: 700;
  line-height: calc(36.75 * var(--u));
  letter-spacing: 0.027em;
  color: var(--brun-fonce);
}

.le-constat__liste {
  position: absolute;
  left: calc(56.25 * var(--u));
  top: calc(229.8 * var(--u));
  width: calc(326 * var(--u));
  list-style: decimal inside;
  font-family: var(--font-ui);
  font-size: calc(11.5 * var(--u));
  line-height: calc(21 * var(--u));
  color: var(--or);
}

.le-constat__liste li {
  text-indent: calc(-10.5 * var(--u));
  padding-left: calc(10.5 * var(--u));
}

.le-constat__photo {
  position: absolute;
  left: calc(448.5 * var(--u));
  top: calc(40.25 * var(--u));
  width: calc(393.5 * var(--u));
  height: calc(454.75 * var(--u));
  overflow: hidden;
}

.le-constat__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.citation--10 .lien-decouvrir {
  margin-top: calc(6.7 * var(--u));
}

.citation--8 .lien-decouvrir {
  margin-top: calc(8.7 * var(--u));
}

/* --------------------------------------------------------------------------
   16. Composants partagés ajoutés avec la page Méthode
   -------------------------------------------------------------------------- */

.bouton-sombre {
  display: inline-flex;
  align-items: center;
  height: calc(24 * var(--u));
  padding-inline: calc(13 * var(--u));
  margin-top: calc(22 * var(--u));    /* espace uniforme entre un texte et le bouton d'action qui le suit */
  background-color: var(--brun-fonce);
  color: var(--blanc);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(8 * var(--u));
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Accordéon : intitulé, filet fin en bas, « + » à droite qui devient « − ». */
.accordeon {
  border-bottom: 1px solid var(--brun-fonce);
}

.accordeons > .accordeon:first-child {
  border-top: 1px solid var(--brun-fonce);
}

.accordeon__tete {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  width: 100%;
  padding: calc(9 * var(--u)) 0 calc(9.5 * var(--u));
  text-align: left;
  color: var(--brun-fonce);
}

.accordeon__intitule {
  flex: 1;
  font-family: var(--font-ui);
  font-size: calc(9.5 * var(--u));
  line-height: calc(13 * var(--u));
  text-transform: uppercase;
}

.accordeon__desc {
  display: block;
  margin-top: calc(2 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(9.5 * var(--u));
  font-style: italic;
  text-transform: none;
}

.accordeon__signe {
  flex: none;
  align-self: center;
  font-family: var(--font-ui);
  font-size: calc(11 * var(--u));
  line-height: 1;
}

.accordeon__signe::before { content: "+"; }
.accordeon__tete[aria-expanded="true"] .accordeon__signe::before { content: "\2212"; }

.accordeon__contenu {
  padding-bottom: calc(10 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(12 * var(--u));
  line-height: calc(16.5 * var(--u));
  color: var(--brun);
}

/* --------------------------------------------------------------------------
   17. Méthode — section 1 : le changement de paradigme
   -------------------------------------------------------------------------- */

.paradigme {
  display: grid;
  grid-template-columns: calc(378.25 * var(--u)) 1fr;
  height: calc(541.25 * var(--u));
}

.paradigme__photo { overflow: hidden; }
.paradigme__photo picture,
.offre__photo picture,
.bandeau-briques picture,
.hero__photo picture,
.le-constat__photo picture,
.ce-dont__photo picture { display: contents; }

.paradigme__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.paradigme__panneau {
  padding-left: calc(51.75 * var(--u));
  padding-top: calc(32 * var(--u));
  background-color: var(--creme);
}

.paradigme__surtitre {
  font-size: calc(8 * var(--u));
  letter-spacing: 0.215em;
}

.paradigme__texte {
  margin-top: calc(37.6 * var(--u));
  width: calc(346 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(16.1 * var(--u));
  line-height: calc(21 * var(--u));
  color: var(--noir);
}

.paradigme__texte p + p { margin-top: calc(21 * var(--u)); }

.paradigme__signature {
  margin-top: calc(17 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(20.4 * var(--u));
  font-weight: 700;
  color: var(--or);
}

.paradigme__signature em { font-style: italic; }

/* --------------------------------------------------------------------------
   18. Méthode — section 2 : la Pédagogie de l'Espace
   -------------------------------------------------------------------------- */

.ma-methode {
  display: grid;
  grid-template-columns: calc(492.75 * var(--u)) 1fr;
  height: calc(515.5 * var(--u));
  background-color: var(--creme);
}

.ma-methode__gauche {
  padding-left: calc(53.75 * var(--u));
  padding-top: calc(58 * var(--u));
}

.ma-methode__surtitre {
  font-size: calc(8 * var(--u));
  letter-spacing: 0.19em;
}

.ma-methode__titre {
  margin-top: calc(33 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: calc(30 * var(--u));
  color: var(--brun-fonce);
}

.ma-methode__accroche {
  margin-top: calc(24 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  color: var(--brun-fonce);
}

.ma-methode__accroche em { font-style: italic; }

.ma-methode__texte {
  margin-top: calc(18 * var(--u));
  width: calc(290 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(12 * var(--u));
  line-height: calc(16.5 * var(--u));
  text-align: justify;
  color: var(--brun-fonce);
}

.ma-methode__texte p + p { margin-top: calc(16.5 * var(--u)); }

.ma-methode__etapes {
  padding-top: calc(133 * var(--u));
  padding-right: calc(77.25 * var(--u));
}

.ma-methode__etapes-titre {
  margin-bottom: calc(44 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(20.6 * var(--u));
  font-weight: 700;
  color: var(--or);
}

/* --------------------------------------------------------------------------
   19. Méthode — section 3 : bandeau
   -------------------------------------------------------------------------- */

.bandeau-offres {
  position: relative;
  height: calc(244.75 * var(--u));
  background-color: var(--blanc);
}

.bandeau-offres__surtitre {
  position: absolute;
  left: calc(82.25 * var(--u));
  top: calc(41.4 * var(--u));
  font-size: calc(8 * var(--u));
  letter-spacing: 0.208em;
}

.bandeau-offres__note {
  position: absolute;
  left: calc(81 * var(--u));
  top: calc(59.4 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(11.5 * var(--u));
  color: var(--brun-fonce);
}

.bandeau-offres__note em { font-style: italic; }

.bandeau-offres__titre {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(159.6 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  text-align: center;
  color: var(--brun-fonce);
}

.bandeau-offres__titre em { font-style: italic; }

/* --------------------------------------------------------------------------
   20. Méthode — section 4 : les trois accompagnements
   -------------------------------------------------------------------------- */

.offres-apercu {
  display: grid;
  grid-template-columns: repeat(3, calc(257 * var(--u)));
  justify-content: center;
  gap: calc(17.5 * var(--u));
  padding-bottom: calc(28 * var(--u));
}

.offre {
  display: flex;
  flex-direction: column;
}

.offre__photo {
  position: relative;
  height: calc(359.75 * var(--u));
  overflow: hidden;
}

.offre__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offre__nom {
  position: absolute;
  left: calc(14 * var(--u));
  bottom: calc(74 * var(--u));
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #F4E9B8;
}

.offre__panneau {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: calc(11.5 * var(--u));
  padding: calc(19 * var(--u)) calc(13.5 * var(--u)) calc(20 * var(--u));
}

.offre--fondations  .offre__panneau { background-color: var(--creme); }
.offre--territoires .offre__panneau { background-color: var(--sable); }
.offre--patrimoine  .offre__panneau { background-color: var(--beige-photo); }

.offre__titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: calc(6 * var(--u));
  border-bottom: 1px solid var(--brun-fonce);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(12 * var(--u));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ocre);
}

.offre__duree {
  font-size: calc(8.5 * var(--u));
  color: var(--brun-fonce);
}

.offre__duree em { font-style: italic; }

.offre__format {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: calc(6 * var(--u)) 0;
  border-bottom: 1px solid var(--brun-fonce);
  font-family: var(--font-ui);
  font-size: calc(8.5 * var(--u));
  color: var(--brun-fonce);
}

.offre__ligne em { font-style: italic; }

.offre__corps {
  margin-top: calc(16 * var(--u));
  font-family: var(--font-ui);
  font-size: calc(8.5 * var(--u));
  line-height: calc(12.5 * var(--u));
  color: var(--brun-fonce);
}

.offre__corps p + p,
.offre__corps p + ul { margin-top: calc(12.5 * var(--u)); }

.offre__liste { list-style: disc outside; padding-left: calc(11 * var(--u)); }
.offre__liste li + li { margin-top: calc(1 * var(--u)); }

.offre__cta {
  align-self: center;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   21. Offres — les deux parcours détaillés
   -------------------------------------------------------------------------- */

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

.parcours {
  display: grid;
  grid-template-columns: repeat(2, calc(389.5 * var(--u)));
  justify-content: center;
  gap: calc(15.25 * var(--u));
  padding: calc(30 * var(--u)) 0 calc(40 * var(--u));
}

.parcours__colonne {
  display: flex;
  flex-direction: column;
  padding: calc(42 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u));
}

.parcours__colonne--fondations  { background-color: var(--creme); }
.parcours__colonne--territoires { background-color: var(--sable); }

.parcours__titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(17 * var(--u));
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ocre);
}

.parcours__duree {
  font-size: calc(9 * var(--u));
  letter-spacing: 0.02em;
  color: var(--brun-fonce);
}

.parcours__duree em { font-style: italic; }

.parcours__intro {
  margin-top: calc(26 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(11.5 * var(--u));
  line-height: calc(17.5 * var(--u));
  text-align: justify;
  color: var(--brun-fonce);
}

.parcours__intro p + p { margin-top: calc(17.5 * var(--u)); }

.etape { margin-top: calc(52 * var(--u)); }

.etape__numero {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(38 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brun-fonce);
}

.etape__intitule {
  margin-top: calc(9 * var(--u));
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(9.5 * var(--u));
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brun-fonce);
}

.etape__note {
  padding: calc(6 * var(--u)) 0 calc(8 * var(--u));
  font-family: var(--font-ui);
  font-size: calc(8.5 * var(--u));
  line-height: calc(12 * var(--u));
  color: var(--ocre);
}

.accordeons--offre { margin-top: calc(14 * var(--u)); }

.accordeons--offre .accordeon__intitule {
  font-size: calc(8.5 * var(--u));
  line-height: calc(12 * var(--u));
  letter-spacing: 0.02em;
}

.accordeons--offre .accordeon__intitule--fort { font-weight: 700; }
.accordeons--offre .accordeon__intitule em { font-style: italic; }

.parcours__cta {
  align-self: center;
}

/* --------------------------------------------------------------------------
   22. Offres — A : ce que vous allez vivre
   -------------------------------------------------------------------------- */

.vivre {
  padding: calc(46 * var(--u)) calc(28 * var(--u)) calc(52 * var(--u));
  background-color: var(--sable);
}

.vivre__surtitre,
.cadre-clair__surtitre,
.pour-qui__surtitre,
.postuler__surtitre,
.faq__surtitre {
  font-size: calc(8 * var(--u));
  letter-spacing: 0.2em;
}

.vivre__titre,
.pour-qui__titre,
.postuler__titre {
  margin-top: calc(26 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: calc(30 * var(--u));
  color: var(--brun-fonce);
}

.vivre__titre em,
.pour-qui__titre em,
.postuler__titre em {
  font-style: italic;
  color: var(--or);
}

.vivre__colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(18 * var(--u));
  margin-top: calc(30 * var(--u));
}

.cadre {
  padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(24 * var(--u));
  border: 1px solid var(--rule-offres, #D8D0BB);
}

.cadre__titre {
  font-size: calc(7.5 * var(--u));
  letter-spacing: 0.2em;
}

.liste-filets {
  margin-top: calc(16 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(9.5 * var(--u));
  line-height: calc(14 * var(--u));
  color: var(--brun-fonce);
}

.liste-filets li {
  padding: calc(11 * var(--u)) 0;
  border-bottom: 1px solid var(--rule-offres, #D8D0BB);
}

.liste-filets li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   23. Offres — B : ce que cet accompagnement n'est pas
   -------------------------------------------------------------------------- */

.cadre-clair {
  padding: calc(46 * var(--u)) calc(28 * var(--u)) calc(50 * var(--u));
  background-color: var(--creme-chaud);
}

.cadre-clair__intro {
  margin-top: calc(24 * var(--u));
  max-width: calc(330 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(11 * var(--u));
  line-height: calc(17 * var(--u));
  color: var(--brun-fonce);
}

.cadre-clair__colonnes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(18 * var(--u));
  margin-top: calc(26 * var(--u));
}

.liste-barres {
  margin-top: calc(16 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(10 * var(--u));
  line-height: calc(14 * var(--u));
  color: var(--brun-fonce);
}

.liste-barres li {
  padding: calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(12 * var(--u));
  border-left: 1px solid var(--or);
}

.liste-barres li + li { margin-top: calc(6 * var(--u)); }

.cadre-clair__note {
  margin-top: calc(26 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(10 * var(--u));
  line-height: calc(15 * var(--u));
  color: var(--or);
}

.cadre-clair__note em { font-style: italic; }

/* --------------------------------------------------------------------------
   24. Offres — C : pour qui
   -------------------------------------------------------------------------- */

.pour-qui {
  padding: calc(46 * var(--u)) calc(28 * var(--u)) calc(52 * var(--u));
  background-color: var(--sable);
}

.pour-qui__colonnes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(18 * var(--u));
  margin-top: calc(30 * var(--u));
}

.encart { padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u)); }
.encart--oui { background-color: var(--creme-chaud); }
.encart--non { background-color: var(--sable-fonce); }

.encart__titre {
  font-family: var(--font-titre);
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: var(--brun-fonce);
}

.encart__titre em { font-style: italic; color: var(--or); }

.liste-coches,
.liste-puces {
  margin-top: calc(16 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(9.5 * var(--u));
  line-height: calc(14 * var(--u));
  color: var(--brun-fonce);
}

.liste-coches li,
.liste-puces li {
  position: relative;
  padding-left: calc(14 * var(--u));
}

.liste-coches li + li,
.liste-puces li + li { margin-top: calc(9 * var(--u)); }

.liste-coches li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--or);
}

.liste-puces li::before {
  content: "\00B7";
  position: absolute;
  left: calc(3 * var(--u));
  color: var(--brun-fonce);
}

/* --------------------------------------------------------------------------
   25. Offres — D : comment postuler
   -------------------------------------------------------------------------- */

.postuler {
  padding: calc(46 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u));
  background-color: var(--creme-chaud);
}

.postuler__tete {
  display: grid;
  grid-template-columns: calc(430 * var(--u)) 1fr;
  gap: calc(28 * var(--u));
}

.postuler__intro {
  align-self: end;
  font-family: var(--font-texte);
  font-size: calc(10 * var(--u));
  line-height: calc(15 * var(--u));
  color: var(--brun-fonce);
}

/* --------------------------------------------------------------------------
   26. Offres — E : FAQ
   -------------------------------------------------------------------------- */

.faq {
  padding: calc(30 * var(--u)) calc(28 * var(--u)) calc(52 * var(--u));
  background-color: var(--creme-chaud);
}

.faq__titre {
  margin: calc(20 * var(--u)) 0 calc(28 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(26 * var(--u));
  font-weight: 700;
  color: var(--brun-fonce);
}

.accordeons--faq .accordeon,
.accordeons--faq > .accordeon:first-child {
  border-color: var(--rule-offres, #D8D0BB);
}

.accordeons--faq .accordeon__tete { padding: calc(13 * var(--u)) 0; }

.accordeons--faq .accordeon__intitule {
  font-family: var(--font-titre);
  font-size: calc(12.5 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: 0;
  text-transform: none;
}

.accordeons--faq .accordeon__contenu {
  max-width: calc(620 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(10.5 * var(--u));
  line-height: calc(15.5 * var(--u));
}

/* --------------------------------------------------------------------------
   27. Offres — F : le post-scriptum
   -------------------------------------------------------------------------- */

.post-scriptum {
  padding: calc(52 * var(--u)) calc(150 * var(--u)) calc(56 * var(--u));
  text-align: center;
  background-color: var(--sable-fonce);
  font-family: var(--font-texte);
  font-size: calc(10 * var(--u));
  line-height: calc(15.5 * var(--u));
  color: var(--brun-fonce);
}

.post-scriptum p + p { margin-top: calc(15.5 * var(--u)); }

.post-scriptum__ps {
  font-family: var(--font-ui);
  font-size: calc(7 * var(--u));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brun-fonce);
}

.post-scriptum__accroche {
  margin-top: calc(22 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(17 * var(--u));
  font-weight: 700;
}

.post-scriptum__accroche em { font-style: italic; }

.post-scriptum__or { color: var(--or); }
.post-scriptum__or em { font-style: italic; }

.post-scriptum__limite {
  margin-top: calc(24 * var(--u));
  font-family: var(--font-ui);
  font-size: calc(8 * var(--u));
  letter-spacing: 0.13em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   28. Section 10 — photo pleine largeur, citation superposée
   -------------------------------------------------------------------------- */

.citation-pleine {
  position: relative;
  background-color: var(--noir);
}

.citation-pleine picture { display: contents; }

.citation-pleine img {
  display: block;
  width: 100%;
  height: calc(490.5 * var(--u));
  object-fit: cover;
  object-position: center 42%;
}

.citation-pleine__texte {
  position: absolute;
  left: calc(34.9 * var(--u));
  bottom: calc(60 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: calc(25 * var(--u));
  color: var(--blanc);
}

.citation-pleine__texte em { font-style: italic; }

/* --------------------------------------------------------------------------
   29. V3 — témoignages, résultats, tableaux « pour qui » et « postuler »
   -------------------------------------------------------------------------- */

.temoignages {
  padding: calc(46 * var(--u)) calc(28 * var(--u)) calc(52 * var(--u));
  background-color: var(--creme);
}

.temoignages__surtitre { font-size: calc(8 * var(--u)); letter-spacing: 0.2em; }

/* Grille en maçonnerie : trois colonnes, hauteurs libres, comme la maquette. */
.temoignages__grille {
  margin-top: calc(28 * var(--u));
  column-count: 3;
  column-gap: calc(18 * var(--u));
}

.temoignage {
  break-inside: avoid;
  margin: 0 0 calc(18 * var(--u));
  padding: calc(6 * var(--u));
  background-color: var(--blanc);
  border-radius: calc(3 * var(--u));
}

.temoignage picture { display: contents; }
.temoignage img { display: block; width: 100%; height: auto; }

.resultats {
  padding: calc(46 * var(--u)) calc(28 * var(--u)) calc(52 * var(--u));
  background-color: var(--creme-chaud);
}

.resultats__surtitre { font-size: calc(8 * var(--u)); letter-spacing: 0.2em; }

.resultats__corps {
  display: grid;
  grid-template-columns: calc(200 * var(--u)) 1fr;
  gap: calc(34 * var(--u));
  margin-top: calc(30 * var(--u));
}

.resultats__photo picture { display: contents; }
.resultats__photo img { display: block; width: 100%; height: auto; }

.resultats__texte {
  font-family: var(--font-texte);
  font-size: calc(11 * var(--u));
  line-height: calc(16.5 * var(--u));
  color: var(--brun-fonce);
}

.resultats__texte p + p { margin-top: calc(16.5 * var(--u)); }


.vivre__chapeau {
  margin-top: calc(20 * var(--u));
  max-width: calc(700 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(10.5 * var(--u));
  line-height: calc(15.5 * var(--u));
  color: var(--brun-fonce);
}

.vivre__cta { display: block; width: fit-content; margin-inline: auto; }

.pour-qui__titre {
  margin-top: calc(24 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: calc(30 * var(--u));
  color: var(--brun-fonce);
}

.pour-qui__titre em { font-style: italic; color: var(--or); }

.pour-qui--non { background-color: var(--creme-chaud); }

.encart--sens { background-color: var(--sable); }
.encart--non  { background-color: var(--creme-chaud); }

.liste-fleches,
.liste-croix {
  margin-top: calc(16 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(9.5 * var(--u));
  line-height: calc(14 * var(--u));
  color: var(--brun-fonce);
}

.liste-fleches li,
.liste-croix li { position: relative; padding-left: calc(15 * var(--u)); }
.liste-fleches li + li,
.liste-croix li + li { margin-top: calc(9 * var(--u)); }

.liste-fleches li::before { content: "\2192"; position: absolute; left: 0; color: var(--or); }
.liste-croix li::before   { content: "\00D7"; position: absolute; left: 0; color: var(--or); }

.pour-qui__note {
  margin-top: calc(26 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(10 * var(--u));
  line-height: calc(15 * var(--u));
  text-align: center;
  color: var(--brun-fonce);
}

.pour-qui__cta { display: block; width: fit-content; margin-inline: auto; }

.postuler__intro {
  margin-top: calc(20 * var(--u));
  max-width: calc(700 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(10 * var(--u));
  line-height: calc(15 * var(--u));
  color: var(--brun-fonce);
}

.processus {
  width: 100%;
  margin-top: calc(30 * var(--u));
  border-collapse: collapse;
  text-align: left;
}

.processus th,
.processus td {
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(13 * var(--u)) 0;
  border-bottom: 1px solid var(--rule-offres, #D8D0BB);
  vertical-align: top;
}

.processus thead th {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(7.5 * var(--u));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brun-fonce);
}

.processus tbody th {
  width: calc(210 * var(--u));
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(8.5 * var(--u));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brun-fonce);
}

.processus__numero {
  margin-right: calc(8 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(13 * var(--u));
  color: var(--or);
}

.processus tbody td {
  font-family: var(--font-texte);
  font-size: calc(9.5 * var(--u));
  line-height: calc(14 * var(--u));
  color: var(--brun-fonce);
}

.postuler__cta { display: block; width: fit-content; margin-inline: auto; }

.post-scriptum__accroche { line-height: calc(24 * var(--u)); }

/* --------------------------------------------------------------------------
   30. À propos
   -------------------------------------------------------------------------- */

.apropos picture { display: contents; }
.apropos img { display: block; width: 100%; height: auto; }

.apropos__hero {
  display: grid;
  grid-template-columns: calc(430 * var(--u)) 1fr;
}

.apropos__hero-photo { overflow: hidden; }
.apropos__hero-photo img { height: 100%; object-fit: cover; object-position: 50% 30%; }

.apropos__hero-texte {
  padding: calc(56 * var(--u)) calc(60 * var(--u)) calc(50 * var(--u)) calc(40 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(11 * var(--u));
  line-height: calc(17 * var(--u));
  color: var(--brun-fonce);
}

.apropos__hero-texte p + p { margin-top: calc(17 * var(--u)); }

.apropos__nom {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(14 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brun-fonce);
}

.apropos__role {
  margin-top: calc(30 * var(--u));
  font-family: var(--font-titre);
  font-size: calc(13 * var(--u));
  font-weight: 700;
}

.apropos__format { margin-top: calc(8 * var(--u)); }
.apropos__format em { font-style: italic; }

.apropos__hero-texte .lien-decouvrir { display: inline-block; margin-top: calc(20 * var(--u)); }

.apropos__accroche {
  padding: calc(34 * var(--u)) calc(40 * var(--u));
  text-align: center;
  background-color: var(--sable);
  font-family: var(--font-titre);
  font-size: calc(15 * var(--u));
  color: var(--brun-fonce);
}

.apropos__accroche em { font-style: italic; }

.apropos__parcours,
.apropos__compris,
.apropos__methode {
  padding: calc(46 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u));
  background-color: var(--blanc);
}

.apropos__compris { background-color: var(--creme); }

.apropos__surtitre { font-size: calc(8 * var(--u)); letter-spacing: 0.2em; }

.apropos__deux-colonnes {
  margin-top: calc(24 * var(--u));
  column-count: 2;
  column-gap: calc(40 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(10.5 * var(--u));
  line-height: calc(15.5 * var(--u));
  text-align: justify;
  color: var(--brun-fonce);
}

.apropos__deux-colonnes p { break-inside: avoid; margin-bottom: calc(11 * var(--u)); }

.apropos__photo-large img,
.apropos__portrait img { height: calc(400 * var(--u)); object-fit: cover; object-position: center 40%; }

.apropos__compris-corps {
  display: grid;
  grid-template-columns: 1fr calc(300 * var(--u));
  gap: calc(40 * var(--u));
  margin-top: calc(24 * var(--u));
  align-items: start;
}

.apropos__compris-texte {
  font-family: var(--font-texte);
  font-size: calc(11 * var(--u));
  line-height: calc(17 * var(--u));
  color: var(--brun-fonce);
}

.apropos__compris-texte p + p { margin-top: calc(13 * var(--u)); }

.apropos__memoire img { height: auto; }

.apropos__faire {
  display: grid;
  grid-template-columns: calc(380 * var(--u)) 1fr;
  background-color: var(--creme-chaud);
}

.apropos__faire-photo { overflow: hidden; }
.apropos__faire-photo img { height: 100%; object-fit: cover; }

.apropos__faire-texte {
  padding: calc(46 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(11 * var(--u));
  line-height: calc(17 * var(--u));
  color: var(--brun-fonce);
}

.apropos__faire-texte p { margin-top: calc(13 * var(--u)); }

.apropos__methode-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--u));
  margin-top: calc(22 * var(--u));
}

/* Le conteneur porte déjà l'espace commun au-dessus du texte ; les boutons
   qu'il contient ne le répètent pas (sinon la ligne se désaligne en rangée,
   et le passage en colonne mobile le cumule avec le `gap`). */
.apropos__methode-boutons .bouton-sombre { margin-top: 0; }

/* --------------------------------------------------------------------------
   31. Pied de page et page simple
   -------------------------------------------------------------------------- */

.pied-de-page {
  padding: calc(34 * var(--u)) calc(40 * var(--u));
  text-align: center;
  background-color: var(--brun-fonce);
  color: var(--creme);
  font-family: var(--font-ui);
  font-size: calc(9 * var(--u));
  line-height: calc(16 * var(--u));
}

.pied-de-page__nom { letter-spacing: 0.08em; }
.pied-de-page__ligne { margin-top: calc(6 * var(--u)); color: var(--sable); }
.pied-de-page a { text-decoration: underline; text-underline-offset: 0.2em; }

.page-simple {
  min-height: 50vh;
  padding: calc(70 * var(--u)) calc(40 * var(--u)) calc(80 * var(--u));
  font-family: var(--font-texte);
  font-size: calc(12 * var(--u));
  line-height: calc(18 * var(--u));
  color: var(--brun-fonce);
}

.page-simple p { margin-top: calc(18 * var(--u)); }
.page-simple a { text-decoration: underline; text-underline-offset: 0.2em; }

.page-simple__titre {
  font-family: var(--font-titre);
  font-size: calc(26 * var(--u));
  font-weight: 700;
  color: var(--brun-fonce);
}

/* ==========================================================================
   32. Sous 900 px

   La cliente n'a fourni que le desktop. En dessous de 900 px le modèle
   proportionnel de --u donnerait un corps de texte de 5 px : on l'abandonne
   au profit d'une échelle typographique propre au mobile et d'un empilement
   en une seule colonne, selon les règles de CLAUDE.md.
   ========================================================================== */

@media (max-width: 899px) {

  .page {
    --marge: clamp(20px, 6vw, 40px);

    --t-corps:       clamp(15px, 4.1vw, 17px);
    --t-petit:       clamp(13px, 3.6vw, 15px);
    --t-hero:        clamp(28px, 7.6vw, 40px);
    --t-citation:    clamp(24px, 6.6vw, 34px);
    --t-titre:       clamp(23px, 6.2vw, 32px);
    --t-titre-petit: clamp(20px, 5.2vw, 26px);
    --t-vision:      clamp(17px, 4.7vw, 22px);
    --t-surtitre:    clamp(10px, 2.9vw, 12px);
    --t-nombre:      clamp(30px, 8.6vw, 42px);
    --t-roue-numero: clamp(17px, 4.8vw, 24px);
  }

  /* --- En-tête et menu ---------------------------------------------------- */

  .entete {
    position: relative;
    height: auto;
    z-index: 10;
  }

  .entete__inner {
    position: relative;
    justify-content: center;
    height: auto;
    padding: 16px var(--marge);
    box-sizing: border-box;
  }

  .entete__burger {
    display: block;
    position: absolute;
    left: var(--marge);
    top: 50%;
    width: 26px;
    height: 18px;
    margin-top: -9px;
  }

  .entete__burger-trait {
    display: block;
    height: 2px;
    background-color: var(--gris-menu);
  }

  .entete__burger-trait + .entete__burger-trait {
    margin-top: 6px;
  }

  .entete__marque {
    margin-left: 0;
    padding-bottom: 0;
    font-size: clamp(15px, 4.4vw, 20px);
  }

  .entete__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 8px var(--marge) 24px;
    border-top: 1px solid var(--gris-hero);
    background-color: var(--blanc);
  }

  .menu-ouvert .entete__nav {
    display: flex;
  }

  .entete__nav .entete__lien {
    margin-left: 0;
    padding: 14px 0;
    font-size: var(--t-petit);
  }

  .entete__cta {
    align-self: flex-start;
    height: auto;
    margin-left: 0;
    margin-top: 10px;
    padding: 12px 18px;
    font-size: var(--t-petit);
  }

  /* --- Section 1 : hero --------------------------------------------------- */

  .hero {
    grid-template-columns: 1fr;
    height: auto;
  }

  .hero__photo {
    aspect-ratio: 1 / 1;
  }

  .hero__photo img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;      /* le visage reste dans le cadre */
    transform: none;
  }

  .hero__panneau {
    padding: 40px var(--marge) 48px;
  }

  .hero__titre {
    font-size: var(--t-hero);
    line-height: 1.32;
  }

  .lien-decouvrir {
    font-size: var(--t-petit);
  }

  .hero .lien-decouvrir {
    margin-top: 20px;
  }

  /* --- Section 2 : bandeau briques ---------------------------------------- */

  .bandeau-briques {
    height: auto;
    background-color: var(--gris-hero);
  }

  .bandeau-briques img {
    aspect-ratio: 3 / 2;
  }

  .bandeau-briques__legende {
    position: static;
    width: auto;
    padding: 24px var(--marge) 36px;
    font-size: var(--t-corps);
    line-height: 1.55;
    letter-spacing: 0;
    text-align: left;
  }

  /* --- Section 3 : Saviez-vous ------------------------------------------- */

  .saviez-vous {
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top: 0;
    padding: 48px var(--marge);
  }

  .saviez-vous__texte {
    position: static;
    width: auto;
    margin-bottom: 24px;
    font-size: var(--t-corps);
    line-height: 1.55;
    text-align: left;
  }

  /* Ordre de lecture de la maquette : 01, 02, la roue, 03, 04, puis le bouton. */
  .saviez-vous__texte--01 { order: 1; }
  .saviez-vous__texte--02 { order: 2; }
  .roue                   { order: 3; }
  .saviez-vous__texte--03 { order: 4; }
  .saviez-vous__texte--04 { order: 5; }
  .saviez-vous__cta       { order: 6; }

  .roue {
    position: relative;          /* les quarts et les numéros s'y accrochent */
    left: auto;                  /* neutralise le calage absolu du desktop */
    top: auto;
    width: min(92%, 400px);   /* laisse respirer les numéros, qui débordent de l'anneau */
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 8px auto 40px;
  }

  .roue__quart {
    width: 50%;
    height: 50%;
    background-size: 200% 200%;
  }

  .roue__quart--01 { border-radius: 100% 0 59.45% 0; }
  .roue__quart--02 { border-radius: 0 100% 0 59.45%; }
  .roue__quart--03 { border-radius: 59.45% 0 100% 0; }
  .roue__quart--04 { border-radius: 0 59.45% 0 100%; }

  .roue__numero {
    font-size: var(--t-roue-numero);
  }

  .saviez-vous__cta {
    align-self: center;
    height: auto;
    padding: 13px 20px;
    font-size: var(--t-petit);
    transform: none;
    position: static;
  }

  /* --- Section 4 : Ma vision --------------------------------------------- */

  .ma-vision {
    height: auto;
    margin-top: 0;
    padding: 48px var(--marge);
  }

  .surtitre {
    font-size: var(--t-surtitre);
    letter-spacing: 0.16em;
  }

  .ma-vision__surtitre,
  .ma-vision__texte {
    position: static;
    font-size: var(--t-surtitre);
  }

  .ma-vision__texte {
    margin-top: 28px;
    font-size: var(--t-vision);
    line-height: 1.5;
    letter-spacing: 0;
  }

  /* Les retours forcés servent la mise en page desktop ; ici le texte coule. */
  .ma-vision__texte br {
    display: none;
  }

  .chiffres {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 36px;
  }

  .chiffres__item,
  .chiffres__nombre,
  .chiffres__libelle {
    position: static;
  }

  .chiffres__nombre {
    font-size: var(--t-nombre);
    letter-spacing: 0;
  }

  .chiffres__libelle {
    margin-top: 4px;
    font-size: var(--t-petit);
    white-space: normal;
    line-height: 1.4;
  }

  /* --- Section 5 : Ce que vous vivez peut-être --------------------------- */

  .ce-que-vous-vivez {
    height: auto;
    padding: 48px var(--marge);
  }

  .ce-que-vous-vivez__surtitre,
  .ce-que-vous-vivez__titre,
  .ce-que-vous-vivez__accroche,
  .ce-que-vous-vivez__texte,
  .ce-que-vous-vivez__cta,
  .ce-que-vous-vivez .filet-or {
    position: static;
    width: auto;
  }

  .ce-que-vous-vivez__surtitre { font-size: var(--t-surtitre); }

  .ce-que-vous-vivez__titre {
    margin-top: 26px;
    font-size: var(--t-titre);
    line-height: 1.35;
    letter-spacing: 0;
  }

  .ce-que-vous-vivez__accroche {
    margin-top: 26px;
    font-size: var(--t-corps);
    letter-spacing: 0.09em;
  }

  .ce-que-vous-vivez .filet-or {
    width: 116px;
    height: 2px;
    margin-top: 14px;
  }

  .ce-que-vous-vivez__texte {
    margin-top: 32px;
    font-size: var(--t-corps);
    line-height: 1.6;
    text-align: left;
  }

  .ce-que-vous-vivez__texte p + p { margin-top: 18px; }

  .ce-que-vous-vivez__cta {
    height: auto;
    margin-top: 32px;
    padding: 13px 20px;
    font-size: var(--t-petit);
  }

  /* --- Section 6 : Ce dont il est question ------------------------------- */

  .ce-dont {
    grid-template-columns: 1fr;
    height: auto;
  }

  .ce-dont__photo { order: 1; aspect-ratio: 4 / 5; }
  .ce-dont__texte { order: 2; padding: 44px var(--marge) 48px; }

  .ce-dont__photo img {
    object-position: 57% 28%;     /* le visage reste dans le cadre */
  }

  .ce-dont__surtitre {
    margin-bottom: 26px;
    font-size: var(--t-surtitre);
  }

  .ce-dont__texte p:not(.surtitre) {
    width: auto;
    font-size: var(--t-corps);
    line-height: 1.55;
  }

  .ce-dont__texte p + p { margin-top: 18px; }

  /* --- Section 7 : Le coût de l'inaction --------------------------------- */

  .cout-inaction {
    height: auto;
    padding: 48px var(--marge);
  }

  .cout-inaction__surtitre,
  .cout-inaction__titre,
  .cout-inaction__encart,
  .cout-inaction__texte {
    position: static;
    width: auto;
  }

  .cout-inaction__surtitre { font-size: var(--t-surtitre); letter-spacing: 0.16em; }

  .cout-inaction__titre {
    margin-top: 26px;
    font-size: var(--t-titre-petit);
    line-height: 1.4;
    letter-spacing: 0;
  }

  .cout-inaction__encart {
    height: auto;
    margin-top: 32px;
    padding: 24px var(--marge);
    margin-inline: calc(var(--marge) * -1);
  }

  .cout-inaction__encart p {
    font-size: var(--t-petit);
    line-height: 1.7;
    white-space: normal;
  }

  .cout-inaction__texte {
    margin-top: 32px;
    font-size: var(--t-corps);
    line-height: 1.6;
  }

  .cout-inaction__texte p + p { margin-top: 18px; }

  /* --- Sections 8 et 10 : blocs photo + citation ------------------------- */

  .citation,
  .citation--8,
  .citation--10 {
    grid-template-columns: 1fr;
    height: auto;
    margin-top: 0;
  }

  .citation__photo { order: 1; aspect-ratio: 1 / 1; }
  .citation__panneau { order: 2; padding: 40px var(--marge) 48px; }

  .citation--10 .citation__photo img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;      /* le visage reste dans le cadre */
    transform: none;
  }

  .citation--8 .citation__panneau,
  .citation--10 .citation__panneau {
    padding: 40px var(--marge) 48px;
  }

  .citation__texte {
    font-size: var(--t-citation);
    line-height: 1.35;
  }

  .citation--8 .lien-decouvrir,
  .citation--10 .lien-decouvrir {
    margin-top: 20px;
    margin-left: 0;
  }

  /* --- Section 11 : le changement de paradigme ---------------------------- */

  .paradigme {
    grid-template-columns: 1fr;
    height: auto;
  }

  .paradigme__photo { order: 1; aspect-ratio: 1 / 1; }
  .paradigme__panneau { order: 2; padding: 40px var(--marge) 48px; }
  .paradigme__surtitre { font-size: var(--t-surtitre); }
  .paradigme__texte { font-size: var(--t-corps); line-height: 1.6; }
  .paradigme__signature { font-size: var(--t-vision); margin-top: 24px; }

  /* --- Section 12 : ma méthode --------------------------------------------- */

  .ma-methode {
    grid-template-columns: 1fr;
    height: auto;
    padding: 44px var(--marge) 48px;
  }

  .ma-methode__titre { font-size: var(--t-titre); line-height: 1.32; margin-top: 18px; }
  .ma-methode__accroche { font-size: var(--t-vision); }
  .ma-methode__texte { font-size: var(--t-corps); line-height: 1.6; }
  .ma-methode__etapes { margin-top: 32px; }

  /* --- Section 13-14 : bandeau offres + aperçu des 3 accompagnements ------ */

  .bandeau-offres {
    height: auto;
    padding: 44px var(--marge) 40px;
    text-align: center;
  }

  .bandeau-offres__surtitre {
    position: static;
    font-size: var(--t-surtitre);
  }

  .bandeau-offres__note {
    position: static;
    margin-top: 14px;
    font-size: var(--t-corps);
  }

  .bandeau-offres__titre {
    position: static;
    margin-top: 14px;
    font-size: var(--t-titre-petit);
    line-height: 1.3;
  }

  .offres-apercu {
    grid-template-columns: 1fr;
    padding: 0 var(--marge) 40px;
    gap: 24px;
  }

  .offre__photo { height: clamp(200px, 55vw, 320px); }
  .offre__titre { font-size: var(--t-titre-petit); }
  .offre__duree { font-size: var(--t-petit); }
  .offre__format,
  .offre__corps,
  .offre__liste { font-size: var(--t-corps); line-height: 1.5; }

  /* Sur tablette, la pleine largeur donnerait des lignes de 95 caractères :
     on borne les blocs de texte courant à une justification confortable.
     Sans effet sur téléphone, où la colonne est déjà plus étroite. */
  .saviez-vous__texte,
  .bandeau-briques__legende,
  .ce-que-vous-vivez__texte,
  .ce-dont__texte p:not(.surtitre),
  .cout-inaction__texte,
  .ma-vision__texte,
  .le-constat__liste {
    max-width: 32em;
  }

  /* --- Section 9 : Le constat -------------------------------------------- */

  .le-constat {
    height: auto;
    margin-top: 0;
    padding: 48px var(--marge);
  }

  .le-constat__surtitre,
  .le-constat__titre,
  .le-constat__liste,
  .le-constat__photo {
    position: static;
    width: auto;
  }

  .le-constat__surtitre { font-size: var(--t-surtitre); letter-spacing: 0.16em; }

  .le-constat__titre {
    margin-top: 26px;
    font-size: var(--t-titre);
    line-height: 1.35;
    letter-spacing: 0;
  }

  .le-constat__liste {
    margin-top: 32px;
    font-size: var(--t-petit);
    line-height: 1.6;
  }

  .le-constat__liste li + li { margin-top: 12px; }

  .le-constat__photo {
    height: auto;
    margin-top: 36px;
    aspect-ratio: 4 / 5;
  }

  /* --- Sections V3 : parcours, témoignages, tableaux, À propos ------------ */

  .parcours, .vivre__colonnes, .cadre-clair__colonnes, .pour-qui__colonnes,
  .resultats__corps, .apropos__hero, .apropos__faire, .apropos__compris-corps {
    grid-template-columns: 1fr;
  }

  .parcours { gap: 28px; padding: 28px var(--marge) 40px; }
  .parcours__colonne { padding: 28px 22px 32px; }
  .parcours__titre { font-size: clamp(19px, 5vw, 24px); }
  .parcours__duree { font-size: var(--t-petit); }
  .parcours__intro { font-size: var(--t-corps); line-height: 1.55; text-align: left; }
  .parcours__intro p + p { margin-top: 14px; }
  .etape { margin-top: 34px; }
  .etape__numero { font-size: clamp(30px, 8vw, 40px); }
  .etape__intitule { font-size: var(--t-petit); margin-top: 8px; }
  .etape__note { font-size: var(--t-petit); line-height: 1.55; padding: 8px 0 10px; }

  .accordeon__tete { padding: 12px 0; gap: 12px; }
  .accordeon__intitule { font-size: var(--t-petit); line-height: 1.4; }
  .accordeon__desc { font-size: var(--t-petit); }
  .accordeon__signe { font-size: 16px; }
  .accordeon__contenu { font-size: var(--t-corps); line-height: 1.6; padding-bottom: 14px; }
  .accordeons--offre .accordeon__intitule { font-size: var(--t-petit); line-height: 1.4; }

  .temoignages, .resultats, .vivre, .cadre-clair, .pour-qui, .postuler, .faq {
    padding: 44px var(--marge) 48px;
  }

  .temoignages__grille { column-count: 2; column-gap: 12px; margin-top: 22px; }
  .temoignage { margin-bottom: 12px; padding: 5px; }

  .resultats__corps { gap: 26px; margin-top: 24px; }
  .resultats__photo { max-width: 260px; }
  .resultats__texte { font-size: var(--t-corps); line-height: 1.6; }
  .resultats__texte p + p { margin-top: 14px; }

  .vivre__titre, .pour-qui__titre, .postuler__titre {
    font-size: var(--t-titre); line-height: 1.35; margin-top: 22px;
  }

  .vivre__chapeau, .cadre-clair__intro, .postuler__intro, .pour-qui__note {
    font-size: var(--t-corps); line-height: 1.6; max-width: none; margin-top: 18px;
  }

  .vivre__colonnes, .cadre-clair__colonnes, .pour-qui__colonnes { gap: 16px; margin-top: 24px; }
  .cadre, .encart { padding: 18px 16px 20px; }
  .cadre__titre { font-size: var(--t-surtitre); }
  .encart__titre { font-size: clamp(15px, 4.4vw, 19px); }

  .liste-filets, .liste-barres, .liste-coches, .liste-puces,
  .liste-fleches, .liste-croix {
    font-size: var(--t-petit); line-height: 1.5; margin-top: 14px;
  }

  .faq__titre { font-size: clamp(24px, 7vw, 32px); margin: 16px 0 20px; }
  .accordeons--faq .accordeon__intitule { font-size: var(--t-corps); line-height: 1.45; }
  .accordeons--faq .accordeon__contenu { max-width: none; font-size: var(--t-petit); line-height: 1.6; }

  /* Le tableau « comment postuler » devient une suite de blocs. */
  .processus, .processus tbody, .processus tr, .processus th, .processus td { display: block; width: auto; }
  .processus thead { display: none; }
  .processus tr { padding: 14px 0; border-bottom: 1px solid var(--rule-offres, #D8D0BB); }
  .processus th, .processus td { border: 0; padding: 0; }
  .processus tbody th { font-size: var(--t-petit); }
  .processus tbody td { margin-top: 6px; font-size: var(--t-petit); line-height: 1.55; }
  .processus__numero { font-size: clamp(15px, 4.4vw, 19px); }

  .post-scriptum { padding: 44px var(--marge) 48px; font-size: var(--t-corps); line-height: 1.6; }
  .post-scriptum__accroche { font-size: clamp(19px, 5.4vw, 26px); line-height: 1.35; }
  .post-scriptum__limite { font-size: var(--t-petit); }

  .citation-pleine img { height: clamp(300px, 70vw, 480px); }
  .citation-pleine__texte {
    left: var(--marge); right: var(--marge); bottom: 26px;
    font-size: clamp(17px, 4.8vw, 24px); line-height: 1.35;
  }

  .apropos__hero-photo { aspect-ratio: 3 / 4; }
  .apropos__hero-texte, .apropos__parcours, .apropos__compris,
  .apropos__methode, .apropos__faire-texte {
    padding: 40px var(--marge) 44px; font-size: var(--t-corps); line-height: 1.6;
  }
  .apropos__nom { font-size: clamp(17px, 4.8vw, 22px); }
  .apropos__role { font-size: clamp(15px, 4.2vw, 19px); margin-top: 20px; }
  .apropos__accroche { padding: 28px var(--marge); font-size: clamp(15px, 4.4vw, 20px); }
  .apropos__deux-colonnes { column-count: 1; font-size: var(--t-corps); line-height: 1.6; text-align: left; }
  .apropos__compris-texte { font-size: var(--t-corps); line-height: 1.6; }
  .apropos__faire-photo { aspect-ratio: 4 / 3; }
  .apropos__photo-large img, .apropos__portrait img { height: clamp(260px, 65vw, 420px); }
  .apropos__methode-boutons { flex-direction: column; align-items: flex-start; margin-top: 24px; }

  .bouton-sombre {
    height: auto;
    max-width: 100%;
    padding: 12px 18px;
    margin-top: 24px;
    font-size: var(--t-petit);
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }

  .apropos__methode-boutons .bouton-sombre { margin-top: 0; }
  .pied-de-page { padding: 30px var(--marge); font-size: var(--t-petit); line-height: 1.6; }
  .page-simple { padding: 50px var(--marge) 60px; font-size: var(--t-corps); line-height: 1.6; }
  .page-simple__titre { font-size: clamp(24px, 7vw, 32px); }
}