/* Fichier assemblé depuis 04_SITE/theme/styles/ par assembler.sh : ne pas modifier ici, modifier les sources puis relancer le script. */
/* Refonte de l'accueil mickaeljudaique.com, construite avec le skill design-taste-frontend.
   Lecture du brief : accueil d'une marque personnelle d'architecte d'intérieur, pour investisseurs immobiliers,
   langage éditorial clair et haut de gamme, CSS natif et animations pilotées par le défilement.
   Typographie (15/09, décision de Mickaël) : Marcellus pour les titres, Inter pour le texte.

   Version 2 (15/09, après-midi), retours de Mickaël et contrôle d'ergonomie (audit-ergonomie.md) :
   - angles très légèrement adoucis : 6 px pour les petits éléments, 10 px pour les zones ; images pleine largeur droites ;
   - boutons plus fins, survol en fondu de couleur (plus de remplissage qui glisse) ; soulignés en fondu ;
   - titres de section réduits d'environ un tiers ;
   - texte des cases photo sur un voile assez dense pour 4,5 pour 1 ;
   - polices en WOFF2 latin, photos en WebP en trois largeurs.

   Version 5 (15/09, soir), brainstorm des blocs avec Mickaël : constat avant le manifeste, galerie avant les offres, offres par situation avec le Programme EXCLUSIV. en grande case sombre,
   témoignages un par un, à propos ouvert par la phrase signature, clôture, menu en petit panneau, pied de page allégé.
   Version 6 : navigation en petites capitales fines, en-tête de 60 px, constat réaligné à gauche, galerie revenue au défilement simple.
   Version 7 : convictions retirées, trois offres en cartes alignées (Suivi de chantier retiré), à propos resserré.
   Version 8 : offres revenues à la répartition asymétrique en trois cartes, clôture retirée.
   Version 9 : pré-titres dorés (bronze sur fond clair) à gauche des sections, formats en capitales, témoignages en style
   éditorial, guide minimaliste sans questionnaire, pied de page en colonnes (marque, rendez-vous, contact).
   Version 10 : pré-titre puis titre en dessous partout, quatre convictions en colonnes, témoignages avec colonne défilante.

   Écarts assumés par rapport au skill, parce que la marque les impose :
   - Palette : les couleurs du pilier 4 (nude, grège, blanc cassé, noir doux) sont nommées par la marque.
   - Thème : clair uniquement ; le bloc EXCLUSIV. est le seul passage sombre, un basculement voulu et unique. */

@font-face {
  font-family: "Marcellus";
  src: url("../polices/Marcellus-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../polices/Inter-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --blanc: #fdfcfa;
  --casse: #f4f3f0;
  --grege: #eae4dd;
  --beige: #dbd3c7;
  --sable: #c4b1a2;
  --noir: #1c1c1c;
  --noir-chaud: #3a3632;  /* texte des articles, survol et attente des boutons ; nuance de travail (fiche site), nommée « noir doux » jusqu'au 24/09 */
  --gris: #55504b;
  --gris-clair: #6f6861;
  --dore: #c3a476;        /* doré EXCLUSIV., sur fond sombre */
  --dore-clair: #7d623a;  /* doré bronze pour les pré-titres sur fond clair : 5,1 à 5,6 pour 1, lisible (le doré de charte y tombe à 2,1) */
  --erreur: #9b2c1f;
  --ligne: rgb(28 28 28 / .12);
  --ligne-forte: rgb(28 28 28 / .28);

  --titres: "Marcellus", Georgia, serif;
  --texte: "Inter", "Helvetica Neue", Arial, sans-serif;

  --rayon-s: 6px;   /* boutons, champs, puces */
  --rayon-m: 10px;  /* cases, photos, formulaire */

  --marge: clamp(20px, 5vw, 72px);
  --section: clamp(96px, 12vw, 176px);
  --largeur: 1360px;
  --entete: 60px;
  --courbe: cubic-bezier(.16, 1, .3, 1);
  --doux: cubic-bezier(.4, 0, .2, 1);

  /* Couches : en-tête au-dessus du contenu, menu mobile au-dessus de l'en-tête, lien d'évitement au-dessus de tout */
  --z-entete: 10;
  --z-menu: 20;
  --z-evitement: 30;
}

*, *::before, *::after { box-sizing: border-box; }
/* Taille du texte identique en portrait et en paysage : sans cette règle, Safari sur iPhone grossit les longs paragraphes à l'horizontale (et pas les textes courts) */
html { scroll-behavior: smooth; scroll-padding-top: var(--entete); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; border-radius: var(--rayon-s); }

.conteneur { max-width: var(--largeur); margin-inline: auto; }
/* Conteneur resserré, choix de Mickaël le 16/09 : les sections qui en profitent tiennent dans les 10 colonnes du milieu.
   Accueil : Témoignages et À propos (ce qui parle de lui), la méthode et les offres restant en pleine largeur.
   Programme EXCLUSIV. : Votre expert et Rejoindre le Programme (Les formules resserrée puis remise en pleine largeur par Mickaël le 16/09).
   10 colonnes et 9 gouttières de 24 px = 5/6 du conteneur moins 4 px. Les fonds de section restent d'un bord à l'autre.
   À partir de 1 200 px seulement : en dessous, la colonne des témoignages tomberait à 250 px de large. */
@media (min-width: 1200px) {
  .conteneur--resserre { max-width: calc(min(var(--largeur), 100%) * 5 / 6 - 4px); }
}
.section { padding: var(--section) var(--marge); }
/* screen-reader-text : même rôle, classe écrite par WordPress (« Lire la suite » des articles, 17/09) */
.visuellement-cache, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: fixed; top: 8px; left: 8px; z-index: var(--z-evitement); padding: 10px 16px; border-radius: var(--rayon-s); background: var(--noir); color: var(--casse); transform: translateY(-150%); }
.evitement:focus { transform: none; }

/* ---------- Typographie ---------- */
/* Pré-titre : petites capitales espacées, couleur de « Programme EXCLUSIV. » adaptée au fond clair */
.pretitre { font-family: var(--texte); font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: var(--dore-clair); }
/* En-tête de section : le pré-titre dans la colonne de gauche, le titre et le texte à droite */
.entete-section { display: grid; justify-items: start; gap: 14px; }
.titre { font-family: var(--titres); font-size: clamp(32px, 3.3vw, 48px); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; }

/* ---------- Boutons et liens ----------
   Survol en fondu : la couleur change doucement, rien ne glisse. Appui : léger enfoncement.
   Bloc « Boutons » de WordPress (accueil aligné sur les blocs, 16/09) : le lien .wp-block-button__link prend le style de .bouton ;
   ses variantes se choisissent par le style du bouton, posé sur son enveloppe : is-style-clair (.bouton--clair), is-style-lien (.lien). */
/* « Lire la suite » des articles (bloc wp-block-read-more, 17/09) prend aussi le style du bouton */
.bouton, .wp-block-button__link, .wp-block-read-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--casse); background: var(--noir);
  border: 1px solid var(--noir); border-radius: var(--rayon-s); cursor: pointer;
  transition: background-color .35s var(--doux), border-color .35s var(--doux), color .35s var(--doux), transform .15s var(--doux);
}
.bouton:hover, .wp-block-button__link:hover, .wp-block-read-more:hover { background: var(--noir-chaud); border-color: var(--noir-chaud); }
.bouton:active, .wp-block-button__link:active, .wp-block-read-more:active { transform: scale(.985); }
.bouton--petit { min-height: 40px; padding: 0 18px; font-size: 14px; }
.entete__bouton { min-height: 34px; padding: 0 16px; font-size: 11.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.bouton--clair, .is-style-clair > .wp-block-button__link, .wp-block-read-more.is-style-clair { color: var(--noir); background: var(--casse); border-color: var(--casse); }
.bouton--clair:hover, .is-style-clair > .wp-block-button__link:hover, .wp-block-read-more.is-style-clair:hover { background: var(--blanc); border-color: var(--blanc); }
.bouton--contour { color: var(--noir); background: transparent; border-color: var(--ligne-forte); }
.bouton--contour:hover { background: rgb(28 28 28 / .04); border-color: var(--noir); }
.bouton[aria-busy="true"] { cursor: progress; background: var(--noir-chaud); border-color: var(--noir-chaud); }
.bouton[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgb(244 243 240 / .35); border-top-color: var(--casse);
  animation: tourne .8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Lien souligné : le trait est discret au repos et se renforce au survol, sans mouvement */
.lien, .is-style-lien > .wp-block-button__link {
  font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--ligne-forte);
  transition: text-decoration-color .35s var(--doux), color .35s var(--doux);
}
/* Bouton au style « lien » : rien du bouton ne reste (taille, fond, bordure, appui). En bloc en ligne : sa zone cliquable garde la hauteur de la ligne */
.is-style-lien > .wp-block-button__link {
  display: inline-block; min-height: 0; padding: 0; white-space: normal;
  font-size: inherit; letter-spacing: normal; color: inherit;
  background: none; border: 0; border-radius: 0; cursor: pointer;
}
.is-style-lien > .wp-block-button__link:hover { background: none; }
.is-style-lien > .wp-block-button__link:active { transform: none; }
.lien:hover, .is-style-lien > .wp-block-button__link:hover { text-decoration-color: currentColor; }
.lien--clair { color: var(--casse); text-decoration-color: rgb(244 243 240 / .35); }
.lien--clair:hover { text-decoration-color: var(--dore); }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: var(--z-entete);
  display: flex; align-items: center; gap: 40px;
  height: var(--entete); padding-inline: var(--marge);
  border-bottom: 1px solid transparent;
}
.entete__logo { display: block; padding-block: 6px; }
/* Signature à ses proportions exactes : pas de largeur minimale, qui l'étirait de 4 % (relevé du 16/09) */
.entete__logo img { width: auto; height: 24px; }
.entete__nav { display: flex; gap: 28px; margin-left: auto; font-size: 11.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.entete__nav a {
  padding-block: 6px; color: var(--noir);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: transparent; transition: text-decoration-color .35s var(--doux);
}
.entete__nav a:hover { text-decoration-color: var(--ligne-forte); }
/* En-tête simplifié (page Ressources, 23/09) : la signature et le bouton de la Consultation, sans menu, à toutes les largeurs */
.entete--simple .entete__bouton { margin-left: auto; }

/* L'en-tête prend un fond dès qu'on quitte le haut de la page. Piloté par le défilement, sans écouteur JavaScript. */
@supports (animation-timeline: scroll()) {
  .entete { animation: entete-fond linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  @keyframes entete-fond {
    from { background-color: rgb(253 252 250 / 0); border-bottom-color: rgb(28 28 28 / 0); backdrop-filter: blur(0); }
    to { background-color: rgb(253 252 250 / .9); border-bottom-color: var(--ligne); backdrop-filter: blur(14px); }
  }
}
@supports not (animation-timeline: scroll()) {
  .entete { background: rgb(253 252 250 / .94); border-bottom-color: var(--ligne); }
}

.burger { display: none; position: relative; width: 40px; height: 40px; margin-left: auto; margin-right: -8px; padding: 0; background: none; border: 0; border-radius: var(--rayon-s); cursor: pointer; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.25px; border-radius: 2px; background: var(--noir); transition: transform .35s var(--doux), top .35s var(--doux); }
.burger span:first-child { top: 16.5px; }
.burger span:last-child { top: 22.5px; }
.burger[aria-expanded="true"] span { top: 19.5px; }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* Menu : un petit panneau qui s'ouvre sous l'en-tête, à droite, en fondu depuis le bouton. La page reste visible. */
.menu {
  position: absolute; top: calc(100% - 6px); right: var(--marge);
  width: min(300px, calc(100vw - 2 * var(--marge)));
  display: grid; gap: 8px; padding: 8px;
  background: rgb(253 252 250 / .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ligne); border-radius: var(--rayon-m);
  box-shadow: 0 18px 44px rgb(60 50 40 / .12), 0 2px 6px rgb(60 50 40 / .06);
  transform-origin: top right;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: opacity .22s var(--doux), transform .22s var(--doux), visibility 0s linear .22s;
}
.menu[data-ouvert="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--doux), transform .22s var(--doux), visibility 0s; }
.menu nav { display: grid; }
.menu nav a { padding: 12px 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--rayon-s); transition: background-color .25s var(--doux); }
.menu nav a:hover { background: rgb(28 28 28 / .05); }
.menu .bouton { width: 100%; }

/* ---------- 1. Premier écran ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100dvh; display: flex; align-items: flex-end;
  padding: 96px var(--marge) clamp(40px, 6vw, 88px);
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 112%; object-fit: cover; object-position: 62% center; }
/* Voile clair fonctionnel à gauche et en bas, pour que le texte noir reste lisible sur la photo */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(244 243 240 / .9) 0%, rgb(244 243 240 / .72) 34%, rgb(244 243 240 / 0) 66%),
    linear-gradient(0deg, rgb(244 243 240 / .55) 0%, rgb(244 243 240 / 0) 38%);
}
.hero__contenu {
  width: 100%; max-width: var(--largeur); margin-inline: auto;
  display: grid; justify-items: start; gap: 22px;
}
.hero__titre {
  max-width: 14em; font-family: var(--titres); font-size: clamp(38px, 5vw, 74px); font-weight: 400;
  line-height: 1.05; letter-spacing: -.01em;
}
.hero__corps { max-width: 30rem; font-size: clamp(17px, 1.3vw, 18.5px); color: var(--gris); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }

/* Verbe du titre : un seul tour des quatre verbes à l'ouverture, puis il reste sur « Sublimez » */
/* « investissement immobilier. » toujours sur sa propre ligne, sous « Sublimez votre » (demande de Mickaël, 15/09) */
.hero__titre-ligne { display: block; }
.verbe { display: inline-grid; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; transition: width .6s var(--courbe); }
.verbe__mot { grid-area: 1 / 1; justify-self: start; white-space: nowrap; opacity: 0; transform: translateY(60%); transition: transform .7s var(--courbe), opacity .5s var(--doux); }
.verbe__mot.est-actif { opacity: 1; transform: none; }
.verbe__mot.est-sortant { opacity: 0; transform: translateY(-60%); }

/* ---------- 2. Le constat et le Branding Immobilier ---------- */
.methode__titre {
  max-width: 21em;
  font-family: var(--titres); font-size: clamp(28px, 3.2vw, 46px); font-weight: 400; line-height: 1.15; letter-spacing: -.005em; text-wrap: balance;
}
/* ---------- 4. Offres : répartition asymétrique, textes calés de la même façon ----------
   Consultation et Étude à gauche, de même hauteur ; Programme à droite sur toute la hauteur.
   Dans chaque carte, le bloc de texte (situation, titre, texte, format, action) est aligné en bas, avec les mêmes marges. */
.offres { background: var(--casse); }
.methode__chapeau { max-width: 62ch; margin-top: clamp(20px, 2vw, 28px); font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; color: var(--gris); text-wrap: pretty; }
.convictions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; margin-top: clamp(48px, 5.5vw, 80px); }
.convictions > * { display: grid; align-content: start; gap: 10px; padding-top: 22px; border-top: 1px solid var(--ligne-forte); }
.convictions h3 { font-family: var(--titres); font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; line-height: 1.25; }
.convictions p { font-size: 15.5px; line-height: 1.6; color: var(--gris); }

.offres__grille {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(360px, 1fr));
  gap: 14px; margin-top: clamp(36px, 4vw, 56px);
}
.carte {
  --carte-marge: clamp(24px, 2.6vw, 38px);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--carte-marge); border-radius: var(--rayon-m);
}
.carte--consultation { grid-column: 1 / 7; grid-row: 1; background: var(--grege); }
.carte--etude { grid-column: 1 / 7; grid-row: 2; }
.carte--programme { grid-column: 7 / -1; grid-row: 1 / 3; justify-content: space-between; }
.carte__contenu { display: grid; max-width: 40ch; }
.carte__situation { margin-bottom: 12px; font-size: 14.5px; color: var(--gris); }
.carte__titre { font-family: var(--titres); font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; line-height: 1.2; margin-bottom: 10px; }
.carte--programme .carte__titre { font-size: clamp(26px, 2.4vw, 34px); }
.carte__texte { font-size: 16px; line-height: 1.6; }
.carte__format { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ligne-forte); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.carte__action { margin-top: 24px; }
/* Mention sous le bouton de la Consultation : la consultation se paie, sans tarif (proposition du 17/09) */
.carte__note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--gris-clair); }
/* Sur ordinateur, le texte et le format réservent la même hauteur dans les trois cartes :
   calés en bas, les situations et les titres tombent au même niveau d'une carte à l'autre. */
@media (min-width: 1024px) {
  .carte__texte { min-height: calc(3 * 1.6em); }
  .carte__format { min-height: calc(2 * 1.7em + 13px); line-height: 1.7; }
}
/* Cartes photographiques : texte clair sur un voile d'au moins 76 % là où il se pose. La photo est un bloc Image (figure) posé sous le texte */
.carte__fond { position: absolute; inset: 0; z-index: -2; }
.carte__fond img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--courbe); }
.carte:hover .carte__fond img { transform: scale(1.02); }
.carte:has(.carte__fond) { color: var(--casse); }
.carte:has(.carte__fond)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(28 28 28 / .9) 0%, rgb(28 28 28 / .78) 50%, rgb(28 28 28 / .32) 80%, rgb(28 28 28 / .12) 100%); }
.carte.carte--programme::before { background: linear-gradient(0deg, rgb(20 19 18 / .94) 0%, rgb(20 19 18 / .82) 50%, rgb(20 19 18 / .58) 100%); }
.carte:has(.carte__fond) .carte__situation, .carte:has(.carte__fond) .carte__format { color: rgb(244 243 240 / .8); }
.carte:has(.carte__fond) .carte__format { border-top-color: rgb(244 243 240 / .22); }
/* Marque du Programme : un groupe, le monogramme (bloc Image) puis le nom (paragraphe) */
.carte__marque { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dore); }
.carte__marque img { width: 40px; height: auto; }

/* ---------- 4. Galerie horizontale ---------- */
.galerie { background: var(--blanc); }
.galerie__epingle { padding-block: var(--section); }
.galerie__titre { width: 100%; padding-inline: var(--marge); max-width: calc(var(--largeur) + 2 * var(--marge)); margin: 0 auto clamp(24px, 3vw, 36px); }
.galerie__piste {
  display: flex; gap: clamp(12px, 1.2vw, 18px); padding-inline: var(--marge);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.galerie__piste::-webkit-scrollbar { display: none; }
/* Cadre de focus posé à l'intérieur : la section épinglée coupe tout ce qui dépasse */
.galerie__piste:focus-visible { outline-offset: -4px; border-radius: var(--rayon-m); }
/* Photos du bloc Galerie : paysage 3:2 par défaut, classes galerie__photo--moyenne (4:3) et galerie__photo--haute (3:4) posées sur la photo */
.galerie__piste > * { flex: 0 0 auto; height: clamp(300px, 60dvh, 640px); overflow: hidden; border-radius: var(--rayon-m); scroll-snap-align: start; aspect-ratio: 3 / 2; }
.galerie__photo--moyenne { aspect-ratio: 4 / 3; }
.galerie__photo--haute { aspect-ratio: 3 / 4; }
.galerie__piste > * img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--courbe); }
.galerie__piste > *:hover img { transform: scale(1.02); }
/* Fondu léger sur le bord droit : il annonce d'autres photos et s'efface quand on arrive à la dernière.
   Ordinateur : piloté par le défilement de la page (même minuterie que la glissade). Mobile : mouvement.js pose .est-au-bout. */
.galerie__epingle { position: relative; }
.galerie__epingle::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(56px, 11vw, 190px); z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(253 252 250 / 0), rgb(253 252 250 / .88));
  transition: opacity .5s var(--courbe);
}
.galerie__epingle.est-au-bout::after { opacity: 0; }
@keyframes galerie-fondu { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* La section s'épingle et la piste glisse vers la gauche pendant le défilement vertical, sur ordinateur comme sur téléphone et tablette
   (téléphone et tablette depuis le 17/09, demande de Mickaël : avant, la bande s'y glissait au doigt).
   La hauteur de la section vaut la distance horizontale à parcourir, mesurée par mouvement.js (--course).
   Hauteur « svh » : sur téléphone, elle ne bouge pas quand la barre d'adresse apparaît ou disparaît, donc pas de saut pendant le défilement
   (identique à « dvh » sur ordinateur). Navigateur sans défilement piloté ou mouvement réduit demandé : la bande reste à glisser au doigt.
   Hauteur adaptée aux photos (remarque de Mickaël, 17/09 : section trop haute sur téléphone, où les photos sont basses) : le bloc épinglé
   (titre et photos) garde sa hauteur réelle, --galerie-hauteur mesurée par mouvement.js, et se tient au milieu de l'écran sous l'en-tête ;
   la section ne dépasse ce bloc que de la course. La chronologie est recentrée sur le bloc (retraits haut et bas) : l'épinglage et
   la glissade commencent et finissent ensemble. Sans mesure (avant le script), le bloc garde la hauteur de l'écran, comme avant. */
@media (prefers-reduced-motion: no-preference) {
  @supports (view-timeline-name: --galerie) {
    .galerie {
      --hauteur: var(--galerie-hauteur, 100svh);
      --haut: max(var(--entete), calc((100svh + var(--entete) - var(--hauteur)) / 2));
      height: calc(var(--hauteur) + var(--course, 180vh) * .65);
      view-timeline: --galerie block; view-timeline-inset: var(--haut) max(0px, calc(100svh - var(--haut) - var(--hauteur)));
    }
    .galerie .galerie__epingle { position: sticky; top: var(--haut); overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(28px, 4vw, 56px); }
    .galerie__piste {
      width: max-content; overflow: visible; scroll-snap-type: none;
      animation: galerie-glisse linear both; animation-timeline: --galerie; animation-range: contain 0% contain 100%;
    }
    .galerie__piste > * { scroll-snap-align: none; }
    .galerie__epingle::after { animation: galerie-fondu linear both; animation-timeline: --galerie; animation-range: contain 0% contain 100%; }
    @keyframes galerie-glisse { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100vw)); } }
  }
}

/* ---------- Image pleine largeur ----------
   D'un bord à l'autre de l'écran, sans marge ni coin arrondi. Bloc Image (figure) ; fond grège le temps du chargement.
   L'encart de maquette (« Image pleine largeur ») a été retiré le 16/09 avec l'alignement sur les blocs. */
.pleine-largeur { position: relative; height: clamp(360px, 78vh, 820px); margin: 0; overflow: hidden; background: var(--grege); }
.pleine-largeur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 6. À propos ---------- */
.apropos__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.apropos__portrait { grid-column: 1 / 6; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon-m); }
.apropos__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.apropos__texte { grid-column: 7 / -1; display: grid; gap: 26px; }
.apropos__texte .entete-section { margin-bottom: 4px; }
.apropos__chapeau { font-family: var(--titres); font-size: clamp(22px, 2.2vw, 32px); font-weight: 400; line-height: 1.28; text-wrap: pretty; }
.apropos__recit { display: grid; gap: 14px; max-width: 60ch; color: var(--gris); }
.chiffres { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px clamp(32px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--ligne); }
/* À propos resserré : entre 1 200 et 1 300 px, « ans d'expérience » passait sur deux lignes ; écart entre les chiffres réduit */
@media (min-width: 1200px) { .chiffres { column-gap: clamp(24px, 2.5vw, 48px); } }
/* Chaque chiffre est un groupe : la valeur, puis son libellé, calés en bas (comme avant l'alignement sur les blocs, quand un libellé passe sur deux lignes) */
.chiffres > * { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.chiffres__valeur { white-space: nowrap; font-family: var(--titres); font-size: clamp(32px, 3vw, 44px); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.chiffres__libelle { font-size: 14px; color: var(--gris-clair); }

/* ---------- 5. Témoignages : style éditorial ----------
   Une grande citation à gauche ; à droite, tous les autres témoignages dans une colonne qui défile.
   Bloc Citation : le texte en paragraphe, l'auteur dans cite (droit, pas en italique). */
.temoignages { background: var(--blanc); }
.temoignages__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; margin-top: clamp(32px, 4vw, 56px); }
.citation { display: grid; gap: 18px; align-content: start; }
.citation p { font-family: var(--titres); font-size: clamp(19px, 1.5vw, 21px); line-height: 1.45; color: var(--gris); text-wrap: pretty; }
.citation cite { font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-clair); }
.citation--principale { grid-column: 1 / 8; align-self: start; }
.citation--principale p { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.16; color: var(--noir); text-wrap: balance; }
/* Sur ordinateur, 40 px au plus (choix de Mickaël le 16/09) : juste sous le titre « Ils en parlent » (48 px), qu'elle dépassait à 54 px.
   À 32 px (taille du chapeau de l'À propos), elle tombait à deux lignes face à la colonne de droite. */
@media (min-width: 1024px) {
  .citation--principale p { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2; }
}
.citation--principale cite { color: var(--dore-clair); }
/* Colonne de droite : sa hauteur suit la grande citation (au moins 240 px), les témoignages y défilent verticalement.
   mouvement.js la rallonge (--apercu) pour laisser voir le début du témoignage suivant, estompé sur 150 px ;
   le fondu disparaît une fois arrivé en bas. */
.temoignages__marge { grid-column: 9 / -1; position: relative; min-height: max(240px, var(--apercu, 0px)); }
.temoignages__defile {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: start; gap: 28px; padding-right: 12px;
  scrollbar-width: thin; scrollbar-color: var(--beige) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 150px), rgb(0 0 0 / .08) 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 150px), rgb(0 0 0 / .08) 100%);
}
.temoignages__defile.est-au-bout { -webkit-mask-image: none; mask-image: none; }
.temoignages__defile:focus-visible { outline-offset: 2px; }
.temoignages__defile .citation { padding-top: 22px; border-top: 1px solid var(--ligne); }
.temoignages__defile .citation:last-child { padding-bottom: 8px; }

/* ---------- 7. Le guide offert : minimaliste ---------- */
.guide { background: var(--casse); padding-block: clamp(56px, 6vw, 88px); }
/* Vitrine du guide : texte à gauche, mise en scène à droite sur le fond marbre, bouton vers la page d'atterrissage */
.guide__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: center; }
.guide__contenu { grid-column: 1 / 6; display: grid; gap: 14px; }
.guide__contenu .entete-section { margin-bottom: 4px; }
.guide__accroche { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.5; color: var(--noir); }
.guide__texte { color: var(--gris); max-width: 46ch; }
.guide__action { display: grid; gap: 8px; justify-items: start; margin-top: 4px; }
.guide__preuve { font-size: 13px; color: var(--gris-clair); }
/* 23/09 : la série des quatre guides, une ligne discrète sous le bouton, lien vers la page Ressources */
.guide__serie { max-width: 44ch; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--gris); }
.guide__serie .lien { white-space: nowrap; }
/* Le cadre a exactement les proportions de l'image. 23/09 : photo d'ambiance du guide, couverture posée dessus (choix de Mickaël, proposition 4),
   cadre élargi (colonnes 7 à 12 au lieu de 8 à 12). Le fond marbre reste pour l'ancienne mise en scène transparente. */
.guide__visuel { grid-column: 7 / -1; margin: 0; overflow: hidden; border-radius: var(--rayon-m); aspect-ratio: 1331 / 785; background: var(--casse) url("../images/guide-marbre-1600.webp") center / cover no-repeat; }
.guide__visuel img { display: block; width: 100%; height: 100%; }
/* Tablette et fenêtre réduite : le visuel reste à droite, un peu plus large pour rester lisible */
@media (min-width: 768px) and (max-width: 1023px) {
  .guide__contenu { grid-column: 1 / 7; }
  .guide__visuel { grid-column: 7 / -1; }
}
/* Téléphone : le visuel passe sous le texte, avec une taille plafonnée */
@media (max-width: 767px) {
  .guide__contenu, .guide__visuel { grid-column: 1 / -1; }
  .guide__visuel { width: 100%; max-width: 420px; }
}
.inscription { display: grid; gap: 8px; margin-top: 18px; }
.inscription__etiquette { font-size: 14px; font-weight: 500; }
.inscription__ligne { display: flex; gap: 10px; }
.inscription__ligne input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; font-size: 16px; color: var(--noir);
  background: var(--blanc); border: 1px solid #8c847c; border-radius: var(--rayon-s);
  transition: border-color .3s var(--doux), box-shadow .3s var(--doux);
}
.inscription__ligne input:hover { border-color: var(--gris); }
.inscription__ligne input:focus { outline: none; border-color: var(--noir); box-shadow: 0 0 0 3px rgb(28 28 28 / .08); }
.inscription__ligne input[aria-invalid="true"] { border-color: var(--erreur); box-shadow: 0 0 0 3px rgb(155 44 31 / .08); }
.champ__message { min-height: 1.35em; font-size: 13.5px; line-height: 1.35; color: var(--gris); }
.champ__message.est-erreur { color: var(--erreur); }
.inscription__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 13.5px; color: var(--gris); }
.inscription__pied .lien { font-weight: 400; color: var(--gris-clair); }
.accord { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.accord input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--noir); cursor: pointer; }
.inscription__merci { display: grid; gap: 6px; padding: 8px 0; }
.inscription__merci[hidden] { display: none; }
.inscription__merci:focus { outline: none; }
.inscription__merci-titre { font-family: var(--titres); font-size: 26px; line-height: 1.2; }
.inscription.est-envoyee > :not(.inscription__merci) { display: none; }

/* ---------- Pied de page : marque, rendez-vous, contact ---------- */
.pied { padding: clamp(32px, 3vw, 44px) var(--marge) 20px; background: var(--blanc); border-top: 1px solid var(--ligne); font-size: 15px; color: var(--gris); }
.pied__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: start; }
.pied__marque { grid-column: 1 / 7; display: grid; gap: 14px; justify-items: start; }
.pied__logo img { width: auto; height: 34px; min-width: 160px; }
.pied__signature-texte { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-clair); white-space: nowrap; }
.pied__colonne { display: grid; gap: 10px; align-content: start; }
/* Colonne Contact calée à droite du pied de page, son contenu reste aligné à gauche */
.pied__colonne { grid-column: 7 / -1; justify-self: end; justify-items: start; }
.pied a { display: inline-flex; align-items: center; gap: 10px; color: var(--gris); transition: color .3s var(--doux); }
.pied a:hover { color: var(--noir); }
.pied svg { width: 20px; height: 20px; flex: none; }
.pied__email span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color .3s var(--doux); }
.pied__email:hover span { text-decoration-color: var(--ligne-forte); }
.pied__reseaux { display: flex; gap: 4px; margin: -6px 0 0 -10px; }
.pied__reseaux a { width: 40px; height: 40px; justify-content: center; border-radius: var(--rayon-s); }
.pied__reseaux a:hover { background: rgb(28 28 28 / .05); }
/* Ligne légale : © et liens à gauche, crédits à droite, sur une ligne quand la place le permet */
.pied__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 40px; margin-top: clamp(24px, 2.5vw, 32px); padding-top: 14px; border-top: 1px solid var(--ligne); font-size: 13px; color: var(--gris-clair); }
.pied__legal p { margin: 0; }
.pied__legal-gauche { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.pied__legal a { color: var(--gris-clair); min-height: 32px; }

/* ---------- Mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Entrée du premier écran : le texte arrive dans l'ordre de lecture */
  .hero__entree { opacity: 0; transform: translateY(18px); animation: entree 1.1s var(--courbe) forwards; }
  .hero__entree:nth-child(2) { animation-delay: .1s; }
  .hero__entree:nth-child(3) { animation-delay: .25s; }
  .hero__entree:nth-child(4) { animation-delay: .38s; }
  .hero__media { animation: approche 2.4s var(--courbe) both; }
  @keyframes entree { to { opacity: 1; transform: none; } }
  @keyframes approche { from { transform: scale(1.05); } to { transform: none; } }

  @supports (animation-timeline: view()) {
    /* Profondeur du premier écran : la photo descend plus lentement que la page */
    .hero__media img { animation: profondeur linear both; animation-timeline: scroll(root); animation-range: 0 100dvh; }
    @keyframes profondeur { from { transform: translateY(0); } to { transform: translateY(10%); } }

    /* Apparition au défilement : chaque bloc arrive quand il entre dans l'écran. Sans support, tout reste visible. */
    .reveal { animation: apparition linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    @keyframes apparition { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    /* Blocs du corps de page (tout .reveal qui n'est ni un pré-titre ni un titre : paragraphes, cartes, citations, portrait, chiffres, visuel du guide).
       Un peu plus visibles que les titres, qui gardent leurs 24 px (demande de Mickaël, 16/09) : montée de 36 px, arrivée plus longue. */
    .reveal:not(.pretitre):not(.titre) { animation-name: apparition-bloc; animation-range: entry 0% cover 30%; }
    @keyframes apparition-bloc { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
    /* Listes en colonnes marquées data-apparition (ou groupe de classe apparition-decalee, code des blocs) : les blocs arrivent un à un au fil du défilement (plages décalées).
       Convictions du Branding Immobilier (accueil) ; « Le cadre » et « L'univers EXCLUSIV. » (page du Programme, même principe à la demande de Mickaël, 16/09). */
    /* Rendue un peu plus visible le 16/09 (demande de Mickaël) : montée de 36 px au lieu de 16, comme les autres blocs du corps de page, et chaque bloc met un peu plus longtemps à arriver */
    :is([data-apparition] > li, .apparition-decalee > *) { animation: apparition-douce linear both; animation-timeline: view(); animation-range: entry 10% cover 36%; }
    :is([data-apparition] > li, .apparition-decalee > *):nth-child(2) { animation-range: entry 30% cover 46%; }
    :is([data-apparition] > li, .apparition-decalee > *):nth-child(3) { animation-range: entry 50% cover 56%; }
    :is([data-apparition] > li, .apparition-decalee > *):nth-child(4) { animation-range: entry 70% cover 66%; }
    @keyframes apparition-douce { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
    @media (max-width: 767px) {
      /* Sur téléphone, les blocs sont empilés : chacun arrive à son tour, sans décalage ajouté */
      :is([data-apparition] > li, .apparition-decalee > *):nth-child(n) { animation-range: entry 10% cover 36%; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bouton[aria-busy="true"]::after { animation: none; }
}

/* ---------- Écrans intermédiaires et mobiles ---------- */
@media (max-width: 1199px) {
  .entete__nav, .entete__bouton { display: none; }
  .burger { display: block; }
  .entete--simple .entete__bouton { display: inline-flex; }
}
/* En-tête simplifié sur téléphone : la signature seule, le bouton l'écrasait (23/09) */
@media (max-width: 599px) {
  .entete--simple .entete__bouton { display: none; }
}
@media (min-width: 1200px) {
  .menu { display: none; }
}
@media (max-width: 1023px) {
  .convictions { grid-template-columns: 1fr 1fr; }
  .offres__grille { grid-template-columns: 1fr; grid-template-rows: none; }
  .carte--consultation, .carte--etude, .carte--programme { grid-column: 1 / -1; grid-row: auto; }
  .carte--etude { min-height: 440px; }
  .carte--programme { min-height: 560px; }
  /* Tablette et téléphone à l'horizontale : texte à droite du portrait, une colonne vide entre les deux comme sur ordinateur (demande de Mickaël, 17/09) */
  .apropos__portrait { grid-column: 1 / 5; }
  .apropos__texte { grid-column: 6 / -1; }
  .citation--principale, .temoignages__marge { grid-column: 1 / -1; }
  /* Tablette et mobile : les autres témoignages glissent de côté sous la grande citation */
  .temoignages__marge { position: static; min-height: 0; margin-top: 40px; }
  .temoignages__defile {
    position: static; display: flex; gap: 14px; overflow-x: auto; overflow-y: visible; padding: 0 var(--marge) 8px;
    margin-inline: calc(-1 * var(--marge)); scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
    -webkit-mask-image: none; mask-image: none; scrollbar-width: none;
  }
  .temoignages__defile::-webkit-scrollbar { display: none; }
  .temoignages__defile .citation { flex: 0 0 min(80vw, 380px); scroll-snap-align: start; }
  /* © et liens restent sur une ligne tant que la largeur le permet ; les crédits passent dessous */
  .pied__legal { justify-content: flex-start; gap: 0 40px; }
  .pied__legal-gauche { gap: 0 28px; }
  .pied__legal a { min-height: 44px; display: inline-flex; align-items: center; }
  .pied__legal p { padding-block: 12px; }
  .pied__credits { flex-basis: 100%; padding-block: 4px 12px; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .entete__logo img { height: 22px; }
  .hero { padding-top: 88px; }
  .hero::before { background: linear-gradient(0deg, rgb(244 243 240 / .96) 0%, rgb(244 243 240 / .86) 48%, rgb(244 243 240 / .2) 78%, rgb(244 243 240 / 0) 100%); }
  .hero__media img { object-position: 70% center; }
  .hero__actions { width: 100%; }
  .hero__actions .bouton { width: 100%; }
  .hero__actions > .wp-block-button:not(.is-style-lien), .hero__actions > .wp-block-button:not(.is-style-lien) > .wp-block-button__link { width: 100%; }
  .galerie__piste > * { height: 58vw; min-height: 220px; }
  .galerie__epingle { padding-block: 80px; }
  .apropos__portrait { grid-column: 1 / -1; }
  .apropos__texte { grid-column: 1 / -1; padding-top: 32px; }
  /* Les trois chiffres sur une même ligne, en plus petit ; les libellés peuvent passer sur deux lignes */
  .chiffres { grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 12px; }
  .chiffres__valeur { font-size: 27px; }
  .chiffres__libelle { font-size: 12.5px; line-height: 1.35; max-width: 9em; }
  /* Surtitre du premier écran : « & investisseur immobilier » sur sa propre ligne */
  .hero__pretitre-suite { display: block; }
  .inscription__ligne { flex-direction: column; }
  .inscription__ligne .bouton { width: 100%; }
  .convictions { grid-template-columns: 1fr; gap: 24px; }
  .carte__action .wp-block-button__link { width: 100%; }
}

/* ---------- Page Contact (version 2, 16/09) : fond grège et fenêtre blanche au centre, sur le modèle de la page bio ----------
   Grège plutôt que le beige de la bio (choix de Mickaël) : plus lumineux sur grand écran, et même fond que la page de remerciement qui suit l'envoi.
   La fenêtre prend la largeur resserrée des sections (.conteneur--resserre). La photo en bulle de la bio déborde du haut de la fenêtre :
   la section garde assez de place au-dessus pour elle, sous l'en-tête. */
.contact {
  --carte-marge: clamp(20px, 3.5vw, 48px);
  --bulle: clamp(140px, 13vw, 180px);
  min-height: calc(100dvh - 200px);
  padding-top: calc(var(--entete) + var(--bulle) * .6 + clamp(24px, 3vw, 40px));
  padding-bottom: clamp(56px, 7vw, 104px);
  background: var(--grege);
}
.contact__carte {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start;
  padding: var(--carte-marge); background: var(--blanc); border-radius: var(--rayon-m);
}
/* Six colonnes pour l'introduction : « Écrire un message » tient sur une ligne */
.contact__intro { grid-column: 1 / 7; display: grid; gap: 18px; }
/* La photo est un bloc Image : l'enveloppe (figure) s'efface, l'image garde sa place dans la grille de l'introduction */
.contact__photo { display: contents; }
.contact__photo img { width: var(--bulle); height: auto; margin-top: calc(-1 * var(--carte-marge) - var(--bulle) * .6); margin-bottom: -4px; }
.contact__texte { color: var(--gris); max-width: 38ch; }
.contact-formulaire { grid-column: 7 / -1; display: grid; gap: 12px; }
/* Même principe que le formulaire du guide (16/09) : le nom du champ est écrit dedans, l'étiquette reste pour les lecteurs d'écran,
   et les messages d'erreur ne prennent de la place que lorsqu'ils s'affichent. Vaut aussi pour le formulaire du Programme EXCLUSIV. */
.contact-formulaire .champ { gap: 0; }
.contact-formulaire .champ__message { min-height: 0; }
.contact-formulaire .champ__message:not(:empty) { padding-top: 4px; }
.contact-formulaire .champ__saisie::placeholder { color: var(--gris-clair); opacity: 1; }
.champ { display: grid; gap: 8px; }
.champ__etiquette { font-size: 14px; font-weight: 500; }
.champ__saisie {
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--noir);
  background: var(--blanc); border: 1px solid #8c847c; border-radius: var(--rayon-s);
  transition: border-color .3s var(--doux), box-shadow .3s var(--doux);
}
textarea.champ__saisie { resize: vertical; min-height: 160px; }
.champ__saisie:hover { border-color: var(--gris); }
.champ__saisie:focus { outline: none; border-color: var(--noir); box-shadow: 0 0 0 3px rgb(28 28 28 / .08); }
.champ__saisie[aria-invalid="true"] { border-color: var(--erreur); box-shadow: 0 0 0 3px rgb(155 44 31 / .08); }
.contact-formulaire .accord { align-items: flex-start; font-size: 14px; color: var(--gris); }
.contact-formulaire .accord input { margin-top: 3px; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 8px; }
.contact__pied .lien { font-size: 13.5px; font-weight: 400; color: var(--gris-clair); }
.contact-formulaire.est-envoyee > :not(.inscription__merci) { display: none; }
/* Formulaires en deux temps : un élément masqué le reste, même s'il a un display en CSS (voir la leçon du 15/09 sur [hidden]) */
[data-deux-temps] [hidden], .deux-temps [hidden] { display: none !important; }
.deux-temps__ouvrir { justify-self: start; min-width: 260px; }
/* Code des blocs : le bouton d'ouverture est un bloc Boutons, caché tant que le script n'a pas préparé le formulaire (comme l'attribut hidden) ;
   son lien occupe toute la largeur du bloc */
.deux-temps:not(.est-pret) .deux-temps__ouvrir { display: none; }
.deux-temps__ouvrir .wp-block-button__link { width: 100%; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1023px) {
  .contact__intro, .contact-formulaire { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .contact__pied .bouton, .deux-temps__ouvrir { width: 100%; }
  .contact__actions { flex-direction: column-reverse; width: 100%; }
  .inscription__pied .lien, .contact__pied .lien { min-height: 44px; display: inline-flex; align-items: center; }
  .pied__signature-texte { font-size: 10.5px; letter-spacing: .1em; }
  .pied__marque, .pied__colonne { grid-column: 1 / -1; }
  .pied__colonne { justify-self: start; }
  .accord { min-height: 44px; }
}
/* Très petits téléphones : la ligne du métier du pied de page dépassait de 8 px à 320 px (relevé du 16/09, correction demandée par Mickaël).
   Lettres un peu plus serrées pour tenir sur une ligne ; si la place manque encore, elle passe à la ligne au lieu de déborder. */
@media (max-width: 359px) {
  .pied__signature-texte { font-size: 10px; letter-spacing: .06em; white-space: normal; text-wrap: balance; }
}

/* ---------- Page du guide offert (version 4) : page d'atterrissage, sans menu ni liens vers le site ---------- */
.page-landing { background: var(--blanc); }
.landing-entete { display: flex; align-items: center; justify-content: center; height: var(--entete); padding-inline: var(--marge); background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.landing-entete img { width: auto; height: 26px; }
.landing-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 28px; padding: 14px var(--marge); font-size: 13px; color: var(--gris-clair); }
.landing-pied p { margin: 0; }
.landing-pied nav { display: flex; gap: 24px; }
.landing-pied a { color: var(--gris-clair); display: inline-flex; min-height: 44px; align-items: center; }

/* Bande marbre ; la mise en scène à gauche, placée comme sur la page actuelle (disque près du bord gauche, coupé en haut et en bas) */
.guide-bande { --h: clamp(560px, 40vw, 800px); position: relative; overflow: hidden;
  background: var(--casse) url("../images/guide-marbre-1600.webp") center / cover no-repeat; }
@media (min-width: 1700px) { .guide-bande { background-image: url("../images/guide-marbre-2560.webp"); } }
/* La mise en scène est un bloc Image : l'enveloppe (figure) s'efface, l'image se place comme si elle était seule */
.guide-bande__scene { display: contents; }
.guide-bande__scene img { display: block; width: 100%; height: auto; }
.guide-carte { display: grid; gap: 20px; padding: 32px var(--marge) 40px; background: var(--blanc); }
.guide-carte__entete { display: grid; gap: 10px; }
.guide-carte__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(38px, 3.4vw, 52px); line-height: 1.05; text-wrap: balance; }
.guide-carte__presentation { display: grid; gap: 10px; }
/* Un seul corps de texte dans la carte : 15,5 px, noir pour « pour qui », gris pour la présentation */
.guide-carte__texte { font-size: 15.5px; line-height: 1.6; color: var(--gris); max-width: 52ch; }
.guide-carte__ouvrir { justify-self: start; min-width: 260px; }
.guide-carte__formulaire { margin-top: 0; gap: 8px; }
.guide-carte__formulaire .champ { gap: 0; }
/* Messages d'erreur : ils ne prennent de la place que lorsqu'ils s'affichent */
.guide-carte__formulaire .champ__message { min-height: 0; }
.guide-carte__formulaire .champ__message:not(:empty) { padding-top: 4px; }
.guide-carte__formulaire .champ__saisie::placeholder { color: var(--gris-clair); opacity: 1; }
.guide-carte__formulaire .accord { min-height: 40px; font-size: 14px; color: var(--gris); }
.guide-carte__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.guide-carte__actions .bouton { flex: 1 1 160px; }
.guide-carte__confidentialite { font-size: 12.5px; line-height: 1.5; color: var(--gris-clair); }
.guide-carte__confidentialite .lien { font-weight: 400; color: var(--gris-clair); }
/* Deuxième temps : le formulaire remplace la présentation, le titre reste */
.guide-carte.est-ouverte .guide-carte__presentation { display: none; }
.guide-carte__formulaire.est-envoyee .guide-carte__actions, .guide-carte__formulaire.est-envoyee .guide-carte__confidentialite { display: none; }
.guide-carte [hidden] { display: none !important; }
.guide-carte__preuve { margin-top: -8px; font-size: 13px; color: var(--gris-clair); }
.guide-carte.est-ouverte .guide-carte__preuve { display: none; }
/* Test des ajouts : pour qui, auteur, vision */
.guide-carte__pour-qui { font-size: 15.5px; line-height: 1.6; color: var(--noir); max-width: 52ch; }
.guide-auteur { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--ligne); }
.guide-auteur__photo { display: contents; }
.guide-auteur__photo img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 18%; }
.guide-auteur p { display: grid; gap: 1px; margin: 0; line-height: 1.35; }
.guide-auteur__nom { font-size: 13px; font-weight: 500; color: var(--noir); }
.guide-auteur__metier { font-size: 13px; color: var(--gris-clair); }
.guide-carte.est-ouverte .guide-auteur { display: none; }
.guide-vision { padding: clamp(36px, 4vw, 56px) var(--marge) clamp(20px, 2vw, 28px); text-align: center; }
.guide-vision p { max-width: 30ch; margin: 0 auto; font-family: var(--titres); font-size: clamp(21px, 2vw, 28px); line-height: 1.35; color: var(--noir); text-wrap: balance; }
.guide-merci { gap: 12px; }
.guide-merci p { color: var(--gris); }
.guide-merci .inscription__merci-titre { color: var(--noir); }
.guide-merci__suite { display: grid; gap: 4px; justify-items: start; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--ligne); }
.guide-merci__suite p { font-size: 14px; }
/* Écrans moyens (960 à 1279 px) : image et carte côte à côte ; l'image remplit la hauteur de la carte
   et se recadre sur les côtés, le PDF et le téléphone restant au centre du cadre */
@media (min-width: 960px) and (max-width: 1279px) {
  .guide-bande { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: stretch; padding: 20px 20px 20px 0; }
  .guide-bande__scene img { grid-column: 1; grid-row: 1; align-self: stretch; width: 100%; height: 100%; margin-block: -20px; height: calc(100% + 40px); object-fit: cover; object-position: 65% center; }
  .guide-carte { grid-column: 2; grid-row: 1; align-self: center; gap: 14px; padding: 28px 36px; border-radius: var(--rayon-m); }
  .guide-carte__titre { font-size: 42px; }
}
/* Petits écrans : l'image reste au-dessus, entière (le livre est visible en entier, avec sa marge d'origine en haut et en bas).
   Sur tablette, sa hauteur est plafonnée et elle se centre sur le fond marbre ; le disque reste coupé par les bords haut et bas */
@media (max-width: 959px) {
  .guide-bande__scene img { width: auto; max-width: 100%; height: auto; max-height: clamp(220px, 50vw, 360px); margin-inline: auto; }
}
@media (min-width: 1280px) {
  .guide-bande { display: grid; grid-template-columns: 1fr min(42vw, 640px); align-items: center; min-height: var(--h); padding: 32px 2vw; }
  /* Échelle : hauteur de la bande. Proportions de la page actuelle : PDF entre 12 et 37 % de la largeur, téléphone jusqu'à 44 % */
  .guide-bande__scene img { position: absolute; top: 0; left: calc(-2vw - var(--h) * .2013 - max(0px, (1440px - 100vw) * .2)); width: auto; height: 100%; max-width: none; }
  .guide-carte { grid-column: 2; position: relative; gap: 16px; padding: 32px 44px; border-radius: var(--rayon-m); }
  .guide-bande { padding-block: 24px; }
}
@media (max-width: 767px) {
  .guide-carte__separateur { display: none; }
  .guide-carte__suite { display: block; }
  .guide-carte__ouvrir { width: 100%; }
  .guide-carte__actions { flex-direction: column-reverse; }
  .guide-carte__actions .bouton { flex: none; width: 100%; }
}

/* Pages des quatre guides (23/09) : la mise en scène est une couverture seule, centrée sur un fond transparent (le marbre est celui
   de la bande). Sur écran moyen, elle se recadre par les bords transparents, la couverture reste entière au centre de sa colonne. */
@media (min-width: 960px) and (max-width: 1279px) {
  .guide-bande--couverture .guide-bande__scene img { object-position: center; }
}
/* ---------- Page de remerciement (16/09) : carte centrée sur fond grège, dans l'esprit de la bio et de la page du guide ---------- */
.page-merci { min-height: 100svh; display: flex; flex-direction: column; background: var(--grege); }
.merci { flex: 1; display: grid; place-items: center; padding: clamp(32px, 6vw, 72px) 16px; }
.merci__carte {
  width: 100%; max-width: 560px; display: grid; justify-items: center; gap: 16px; text-align: center;
  padding: clamp(32px, 5vw, 48px) clamp(20px, 5vw, 48px); background: var(--blanc); border-radius: var(--rayon-m);
}
/* Une carte par provenance (code des blocs) : avant le script, seule la carte générale se montre */
.merci:not(.est-choisie) .merci__carte:not(.merci__carte--general), .merci__carte[hidden] { display: none; }
.merci__visuel { margin-bottom: 8px; }
.merci__visuel img { width: min(320px, 100%); height: auto; }
.merci__visuel--bulle img { width: 180px; }
.merci__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(34px, 5vw, 46px); line-height: 1.1; text-wrap: balance; }
.merci__message { max-width: 42ch; font-size: 16.5px; line-height: 1.65; color: var(--gris); }
.merci__suite { display: grid; justify-items: center; gap: 14px; width: 100%; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.merci__suite p { font-size: 15px; color: var(--gris); }
.merci__signature { margin-top: 12px; font-family: var(--titres); font-size: 17px; line-height: 1.5; color: var(--gris-clair); max-width: 34ch; }
@media (max-width: 479px) { .merci__suite .bouton, .merci__suite .wp-block-buttons, .merci__suite .wp-block-button__link { width: 100%; } }

/* ---------- Pages légales : mentions légales, confidentialité, CGV ---------- */
.legal { padding-top: calc(var(--entete) + clamp(48px, 6vw, 88px)); background: var(--blanc); }
.legal__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.legal__entete { grid-column: 1 / 5; position: sticky; top: calc(var(--entete) + 32px); }
.legal__maj { font-size: 13px; color: var(--gris-clair); }
.legal__corps { grid-column: 6 / -1; display: grid; gap: 40px; max-width: 72ch; }
.legal__corps section { display: grid; gap: 12px; }
.legal__corps h2 { font-family: var(--titres); font-weight: 400; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.25; }
.legal__corps p, .legal__corps li { font-size: 15.5px; line-height: 1.7; color: var(--gris); }
.legal__corps ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.legal__corps .lien { font-weight: 400; color: var(--noir); }
/* Adresse email protégée (écrite par mouvement.js) : soulignée comme un lien, sans changer la taille du texte */
.email-protege { color: var(--noir); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ligne-forte); overflow-wrap: anywhere; }
.email-protege:hover { text-decoration-color: currentColor; }
/* Code des blocs : le tableau est un bloc Tableau, sa classe est posée sur la figure qui l'entoure ; les règles restent sur le tableau.
   La figure peut rétrécir sous la largeur du tableau (min-width: 0), sinon elle élargit la colonne sur téléphone ; le tableau défile de côté comme avant */
.legal__tableau { min-width: 0; overflow-x: auto; }
/* Le cadre défile, le tableau reste un tableau (audit du 18/09) : 36rem au moins, pour que les colonnes restent lisibles sur téléphone */
.legal__tableau table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 14px; }
.legal__tableau th, .legal__tableau td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--ligne); color: var(--gris); }
.legal__tableau th { font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-clair); white-space: nowrap; }
.legal__annexe { padding: 24px; border: 1px solid var(--ligne); border-radius: var(--rayon-m); }
/* Repère de maquette : information à fournir ou à vérifier avant mise en ligne */
.a-completer { padding: 0 4px; border-radius: 4px; background: rgb(195 164 118 / .28); color: var(--noir); font-weight: 500; }
@media (max-width: 1023px) {
  .legal__entete, .legal__corps { grid-column: 1 / -1; }
  .legal__entete { position: static; }
}

/* ---------- Page d'atterrissage du Programme EXCLUSIV. : atmosphère sombre ---------- */
.page-exclusiv {
  --blanc: #1c1c1c; --casse: #262524; --grege: #2e2c2a; --noir: #f4f3f0; --noir-chaud: #ffffff;
  --gris: #cfc9c1; --gris-clair: #a39b91; --dore-clair: var(--dore);
  --ligne: rgb(244 243 240 / .14); --ligne-forte: rgb(244 243 240 / .28);
  background: #1c1c1c; color: #f4f3f0;
}
.page-exclusiv .bouton, .page-exclusiv .wp-block-button__link { color: #1c1c1c; }
.page-exclusiv .champ__saisie { background: #262524; border-color: rgb(244 243 240 / .28); color: #f4f3f0; }
.page-exclusiv .champ__saisie::placeholder { color: #a39b91; opacity: 1; }
.page-exclusiv .champ__saisie:focus { border-color: #f4f3f0; box-shadow: 0 0 0 3px rgb(244 243 240 / .12); }
.page-exclusiv .accord input { accent-color: #c3a476; }
.page-exclusiv .champ__message.est-erreur { color: #e3a296; }
/* En-tête sombre, même structure que l'accueil : transparent en haut de page, fond sombre dès qu'on défile */
.page-exclusiv .entete__logo img { height: 26px; min-width: 0; }
@media (max-width: 767px) { .page-exclusiv .entete__logo img { height: 23px; } }
@supports (animation-timeline: scroll()) {
  .page-exclusiv .entete { animation-name: entete-fond-sombre; }
  @keyframes entete-fond-sombre {
    from { background-color: rgb(28 28 28 / 0); border-bottom-color: rgb(195 164 118 / 0); backdrop-filter: blur(0); }
    to { background-color: rgb(28 28 28 / .9); border-bottom-color: rgb(195 164 118 / .3); backdrop-filter: blur(14px); }
  }
}
@supports not (animation-timeline: scroll()) {
  .page-exclusiv .entete { background: rgb(28 28 28 / .94); border-bottom-color: rgb(195 164 118 / .3); }
}
.page-exclusiv .menu { background: rgb(33 32 32 / .97); box-shadow: 0 18px 44px rgb(0 0 0 / .4); }
.page-exclusiv .menu nav a:hover { background: rgb(244 243 240 / .06); }
.page-exclusiv [id] { scroll-margin-top: calc(var(--entete) + 12px); }
.ex-marque { display: flex; align-items: center; gap: 12px; color: var(--dore); }
/* Code des blocs : le monogramme est un bloc Image (figure) et le nom un paragraphe */
.ex-marque img { width: 40px; height: auto; }
/* Premier écran : même principe que l'accueil, voile sombre au lieu du voile clair. La lampe et le marbre restent visibles à droite. */
.hero--exclusiv::before {
  background:
    linear-gradient(90deg, rgb(20 20 20 / .94) 0%, rgb(20 20 20 / .78) 36%, rgb(20 20 20 / 0) 72%),
    linear-gradient(0deg, rgb(20 20 20 / .9) 0%, rgb(20 20 20 / 0) 38%);
}
/* La photo est assombrie par un filtre plutôt que par un voile gris : les noirs restent profonds et la lampe garde sa lumière */
.hero--exclusiv .hero__media img { object-position: 70% center; filter: brightness(.72) contrast(1.12); }
.hero--exclusiv .hero__titre { max-width: 11em; }
.hero--exclusiv .hero__corps { max-width: 34rem; }
.ex-ouverture__action { display: grid; gap: 10px; justify-items: start; margin-top: 6px; }
.ex-note { font-size: 13px; color: var(--gris-clair); }
.ex-texte { font-size: 16px; line-height: 1.7; color: var(--gris); max-width: 58ch; }
.page-exclusiv .section { padding-block: clamp(64px, 8vw, 120px); }
/* Deux noirs en alternance d'une section à l'autre (demande de Mickaël, 15/09) : le changement de ton sépare les sections, les filets deviennent inutiles.
   Noir doux #1c1c1c et un cran plus clair #232221 ; les cartes et les champs prennent le ton opposé à leur section. */
.ex-pour-qui, .ex-deroule, .ex-expert { background: #1c1c1c; }
.ex-formules, .ex-univers, .ex-rejoindre { background: #232221; }
.ex-formules .ex-formule { background: #1c1c1c; }
.ex-deux-colonnes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; }
.ex-deux-colonnes .entete-section { grid-column: 1 / 7; }
.ex-deux-colonnes .ex-texte { grid-column: 8 / -1; }
.ex-formules__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
.ex-formule { display: grid; gap: 18px; align-content: start; padding: clamp(28px, 3vw, 40px); border: 1px solid rgb(195 164 118 / .35); border-radius: var(--rayon-m); background: #212020; }
.ex-formule h3 { font-family: var(--titres); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); }
.ex-formule ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ex-formule li { padding: 12px 0; border-top: 1px solid var(--ligne); font-size: 15.5px; color: var(--gris); }
.ex-etapes { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
/* Code des blocs : étapes et univers sont des groupes (un élément de liste ne contient pas de paragraphe en blocs) ; le numéro est un paragraphe,
   il garde la hauteur de ligne du texte courant */
.ex-etapes > * { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid rgb(195 164 118 / .45); }
.ex-etapes .ex-etapes__numero { font-size: 11.5px; font-weight: 500; line-height: 1.65; letter-spacing: .18em; color: var(--dore); }
.ex-etapes > * > p:last-child { font-size: 16px; line-height: 1.55; color: var(--noir); }
/* L'univers EXCLUSIV. : les autres produits, sans carte (un filet doré au-dessus, comme les étapes), un statut honnête plutôt qu'un prix */
.ex-univers__liste { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.ex-univers__liste > * { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid rgb(195 164 118 / .45); }
.ex-univers__statut { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dore); }
.ex-univers__liste h3 { font-family: var(--titres); font-weight: 400; font-size: clamp(21px, 1.7vw, 24px); line-height: 1.2; }
.ex-univers__liste > * > p:last-child { font-size: 15.5px; line-height: 1.6; color: var(--gris); }
/* Image pleine largeur de la page EXCLUSIV. : hauteur calée sur le format panoramique de l'image, sofa et lumières toujours au centre */
.ex-pleine-largeur { height: clamp(320px, 42vw, 760px); background: #1c1c1c; }
.ex-pleine-largeur img { object-position: 50% 60%; }
.ex-precision { margin-top: 32px; font-size: 14px; color: var(--gris-clair); max-width: 62ch; }
/* Le texte « Votre expert » colle au portrait (demande de Mickaël, 15/09) : deux colonnes serrées, écart fixe réduit */
.ex-expert__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 3vw, 48px); row-gap: 40px; align-items: center; }
/* Code des blocs : le portrait est un bloc Image ; sa figure s'efface de la grille (display: contents), l'image reste la colonne */
.ex-expert__portrait { display: contents; }
.ex-expert__portrait img { grid-column: 1; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--rayon-m); }
.ex-expert__texte { grid-column: 2; display: grid; gap: 20px; }
.ex-expert__chapeau { font-family: var(--titres); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.4; max-width: 34ch; }
.ex-citation { margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--ligne); display: grid; gap: 10px; }
.ex-citation p { font-family: var(--titres); font-size: 19px; line-height: 1.45; color: var(--gris); }
/* Code des blocs : la citation est un bloc Citation (blockquote, texte et cite) */
.ex-citation cite { font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dore); }
.ex-rejoindre__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start; }
.ex-rejoindre__grille .entete-section { grid-column: 1 / 6; gap: 14px; }
.ex-rejoindre__droite { grid-column: 7 / -1; display: grid; gap: 24px; align-content: start; }
/* Bouton « Précédent » sur fond sombre : texte clair (la règle .page-exclusiv .bouton l'assombrirait) */
.page-exclusiv .bouton--contour { color: #f4f3f0; }
.page-exclusiv .bouton--contour:hover { background: rgb(244 243 240 / .06); border-color: #f4f3f0; }
.ex-pied { border-top: 1px solid var(--ligne); }
@media (max-width: 1023px) {
  .ex-deux-colonnes .entete-section, .ex-deux-colonnes .ex-texte,
  .ex-rejoindre__grille .entete-section, .ex-rejoindre__droite { grid-column: 1 / -1; }
  .ex-etapes, .ex-univers__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ex-formules__grille, .ex-etapes, .ex-univers__liste { grid-template-columns: 1fr; }
  .ex-expert__grille { grid-template-columns: 1fr; }
  .ex-expert__portrait img, .ex-expert__texte { grid-column: 1; }
  .ex-expert__portrait img { max-width: 420px; }
  .hero--exclusiv::before { background: linear-gradient(0deg, rgb(20 20 20 / .97) 0%, rgb(20 20 20 / .88) 50%, rgb(20 20 20 / .2) 82%, rgb(20 20 20 / 0) 100%); }
  .hero--exclusiv .hero__media img { object-position: 47% center; }
  .ex-ouverture__action .bouton, .ex-ouverture__action .wp-block-buttons, .ex-ouverture__action .wp-block-button__link { width: 100%; }
}
/* ---------- Articles : liste, modèle d'article, page introuvable (17/09) ----------
   Code aligné sur les blocs de WordPress dès la maquette : boucles d'articles (wp-block-query, wp-block-post-template, wp-block-post),
   image mise en avant, catégorie, titre, date, temps de lecture, « Lire la suite », catégories et contenu de l'article. */

/* ---------- Liste des articles, version 4 (17/09 : à la une gardé, filtres et panneau grège retirés à la demande de Mickaël) ---------- */

/* Premier écran « À la une » : le dernier article sur toute la largeur, texte clair sur un voile sombre en bas (comme les cartes).
   La page d'article reprend ce premier écran (hero--article, revue du 17/09). */
.hero--une, .hero--article { min-height: clamp(560px, 82svh, 880px); color: var(--casse); }
/* Voile : au moins 76 % là où commence le texte (charte, cartes sur photo), pour tenir 4,5 pour 1 même sur une photo claire (contrôle du 17/09) */
.hero--une::before, .hero--article::before { background: linear-gradient(0deg, rgb(28 28 28 / .9) 0%, rgb(28 28 28 / .78) 58%, rgb(28 28 28 / .3) 80%, rgb(28 28 28 / 0) 100%); }
.hero--une > .wp-block-query, .hero--une .wp-block-post-template, .hero--une .wp-block-post { width: 100%; margin: 0; padding: 0; list-style: none; }
.hero--une .hero__media img, .hero--article .hero__media img { object-position: center 40%; }
.hero--une .hero__contenu, .hero--article .hero__contenu { gap: 18px; }
.une__fil, .article__fil { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: rgb(244 243 240 / .86); }
.une__fil h1 { font: inherit; letter-spacing: inherit; }
.une__fil > * + *::before, .article__fil > * + *::before { content: "·"; margin-right: 10px; }
.article__fil a { display: inline-block; padding-block: 3px; margin-block: -3px; }
.article__fil a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero--une .hero__titre, .hero--article .hero__titre { max-width: 17em; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.08; text-wrap: balance; }
.hero--une .hero__titre a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: transparent;
  transition: text-decoration-color .35s var(--doux);
}
.hero--une .hero__titre a:hover { text-decoration-color: rgb(244 243 240 / .5); }
.une__infos, .article__infos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; letter-spacing: .02em; color: rgb(244 243 240 / .8); }
.une__infos > * + *::before, .article__infos > * + *::before { content: "·"; margin-right: 10px; }
.article__infos .wp-block-post-time-to-read::after { content: " de lecture"; }
.une__infos a { display: inline-block; padding-block: 3px; margin-block: -3px; }
.une__infos a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero--une .hero__actions { margin-top: 10px; }
/* La photo d'un article peut être sombre en haut : sur cette page, l'en-tête a son fond clair dès l'ouverture (état final de l'en-tête au défilement) */
body:has(.hero--une) .entete, body:has(.hero--article) .entete { animation: none; background-color: rgb(253 252 250 / .9); border-bottom-color: var(--ligne); backdrop-filter: blur(14px); }

/* Liste sur le fond blanc de la page, sous un filet : titre, puis texte de présentation, comme l'en-tête d'une rubrique de magazine */
.articles { padding-block: clamp(72px, 9vw, 128px) clamp(96px, 12vw, 160px); background: var(--blanc); }
.articles__entete {
  display: grid; justify-items: start; gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(48px, 6vw, 80px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--ligne);
}
.articles__intro { max-width: 62ch; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.65; color: var(--gris); }
.articles__intro > p { margin: 0; }

/* ---------- Page d'une catégorie (17/09) ----------
   Même liste que la page Articles, sans premier écran photo : fil « Articles », nom de la catégorie en titre, sa description
   (réglée dans WordPress), la liste de ses articles. Une nouvelle catégorie reçoit la même page, sans rien à préparer. */
.articles--categorie { padding-top: calc(var(--entete) + clamp(56px, 7vw, 104px)); }
.articles--categorie .articles__entete { gap: clamp(12px, 1.6vw, 18px); padding-top: 0; border-top: 0; }
.articles--categorie .articles__entete .titre { font-size: clamp(44px, 5.4vw, 72px); line-height: 1.05; }
.articles--categorie .pretitre a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.articles--categorie .pretitre a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Catégorie encore vide : une phrase et le lien vers tous les articles, sous un filet */
.articles__vide { padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--ligne); font-size: clamp(17px, 1.3vw, 18px); line-height: 1.65; color: var(--gris); }
.articles__vide .lien { margin-left: 8px; font-size: inherit; }

/* Cartes, version 6 (17/09) : tout le texte sur la photo, comme la carte préférée par Mickaël ; ni numéro ni date.
   Grille de six colonnes pour pouvoir centrer une fin de liste, chaque carte en prend deux. Toute la carte mène à l'article. */
.articles__liste .wp-block-post-template { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 28px); }
.articles__liste .wp-block-post {
  grid-column: span 2; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--rayon-m); background: var(--noir); color: var(--casse);
}
/* Fin de liste centrée sur ordinateur : une carte seule au milieu, deux cartes côte à côte au centre */
@media (min-width: 1024px) {
  .articles__liste .wp-block-post:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
  .articles__liste .wp-block-post:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
}
/* Voile : au moins 78 % là où commence le texte d'un titre long (4,5 pour 1 même sur une photo claire) */
.articles__liste .wp-block-post::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgb(28 28 28 / .9) 0%, rgb(28 28 28 / .78) 55%, rgb(28 28 28 / .32) 82%, rgb(28 28 28 / .12) 100%); }
.article-carte__image { position: absolute; inset: 0; z-index: -2; margin: 0; }
.article-carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--courbe); }
/* Catégorie affichée au-dessus du titre, écrite après lui dans le code ; zone à toucher de 24 px au moins */
.article-carte__categorie { order: -1; font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: rgb(244 243 240 / .82); }
.article-carte__categorie a { position: relative; z-index: 1; display: inline-block; padding-block: 5px; margin-block: -5px; }
.article-carte__categorie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.article-carte__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; text-wrap: balance; }
.article-carte__titre a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: transparent;
  transition: text-decoration-color .35s var(--doux);
}
.article-carte__titre a::after { content: ""; position: absolute; inset: 0; }
/* Temps de lecture sous un filet, comme le format des cartes d'offres de l'accueil */
.article-carte__infos { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgb(244 243 240 / .24); font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: rgb(244 243 240 / .78); }
.article-carte__infos .wp-block-post-time-to-read::after { content: " de lecture"; }
/* Survol et focus sur toute la carte */
.articles__liste .wp-block-post:hover .article-carte__image img { transform: scale(1.03); }
.articles__liste .wp-block-post:hover .article-carte__titre a { text-decoration-color: rgb(244 243 240 / .5); }
.article-carte__titre a:focus-visible { outline: none; }
.articles__liste .wp-block-post:has(.article-carte__titre a:focus-visible) { outline: 2px solid var(--noir); outline-offset: 4px; }

/* ---------- Vue en liste (gardée par Mickaël le 17/09) ----------
   Le script ajoute « Galerie » et « Liste » au-dessus d'une boucle de classe articles__liste--vues et retient le choix du visiteur.
   En galerie, l'extrait reste caché ; en liste, chaque article devient une ligne sous un filet : vignette, catégorie, titre, extrait, temps de lecture. */
.article-carte__extrait { display: none; }
.articles__vues { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: clamp(20px, 2.4vw, 28px); }
.articles__vues button {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-s); background: transparent;
  font-size: 13px; letter-spacing: .02em; color: var(--noir); cursor: pointer; transition: background-color .35s var(--doux), border-color .35s var(--doux), color .35s var(--doux);
}
.articles__vues button:hover { border-color: var(--noir); }
.articles__vues button[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: var(--casse); }
.articles__liste.est-en-liste .wp-block-post-template { grid-template-columns: minmax(0, 1fr); gap: 0; }
.articles__liste.est-en-liste .wp-block-post:nth-child(n) {
  grid-column: 1 / -1; aspect-ratio: auto; overflow: visible; isolation: auto; border-radius: 0; background: none; color: var(--noir);
  display: grid; grid-template-columns: clamp(140px, 18vw, 220px) minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: clamp(20px, 3vw, 40px); row-gap: 8px; align-items: start;
  padding: clamp(20px, 2.4vw, 28px) 0; border-top: 1px solid var(--ligne);
}
.articles__liste.est-en-liste .wp-block-post:last-child { border-bottom: 1px solid var(--ligne); }
.articles__liste.est-en-liste .wp-block-post::before { display: none; }
.articles__liste.est-en-liste .article-carte__image { position: relative; z-index: auto; grid-column: 1; grid-row: 1 / -1; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon-m); background: var(--grege); }
.articles__liste.est-en-liste .article-carte__categorie { grid-column: 2; grid-row: 1; color: var(--dore-clair); }
.articles__liste.est-en-liste .article-carte__titre { grid-column: 2; grid-row: 2; font-size: clamp(22px, 2vw, 28px); color: var(--noir); }
.articles__liste.est-en-liste .article-carte__extrait { display: block; grid-column: 2; grid-row: 3; }
.articles__liste.est-en-liste .article-carte__extrait p { max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--gris); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.articles__liste.est-en-liste .article-carte__infos { grid-column: 3; grid-row: 1; margin: 0; padding: 0; border: 0; white-space: nowrap; color: var(--gris-clair); }
.articles__liste.est-en-liste .wp-block-post:hover .article-carte__titre a { text-decoration-color: var(--ligne-forte); }
.articles__liste.est-en-liste .wp-block-post:has(.article-carte__titre a:focus-visible) { outline-offset: 8px; border-radius: var(--rayon-s); }

/* Pagination (au-delà de 10 articles) : numéros sous un filet, page en cours en noir */
.wp-block-query-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: clamp(48px, 6vw, 72px); font-size: 14px; }
.wp-block-query-pagination-numbers { display: flex; gap: 6px; }
.wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon-s); color: var(--noir); }
.wp-block-query-pagination .page-numbers.current { background: var(--noir); border-color: var(--noir); color: var(--casse); }
.wp-block-query-pagination a.page-numbers:hover { border-color: var(--noir); }
.wp-block-query-pagination-next, .wp-block-query-pagination-previous { display: inline-flex; align-items: center; min-height: 40px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--ligne-forte); }
.wp-block-query-pagination-next:hover, .wp-block-query-pagination-previous:hover { text-decoration-color: currentColor; }
.simulation-note { margin-bottom: 16px; font-size: 13px; }

/* Apparition au défilement : chaque carte monte en fondu quand elle entre dans l'écran, la deuxième et la troisième colonne un peu après */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .articles__liste .wp-block-post { animation: apparition-douce linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
    .articles__liste .wp-block-post:nth-child(3n+2) { animation-range: entry 15% cover 38%; }
    .articles__liste .wp-block-post:nth-child(3n) { animation-range: entry 25% cover 46%; }
  }
}

/* ---------- Modèle d'article, version 4 (17/09, « une colonne ») ----------
   Premier écran comme « À la une » (gardé), puis l'article sur une seule colonne de lecture de 680 px à toutes les largeurs (« vue tunnel ») :
   la hiérarchie est la même sur ordinateur et sur téléphone. Échelle de texte : texte 18 px, phrase d'entrée 20 px,
   citation mise en avant 24 px, intertitres 28 à 32 px. Photos : largeur du texte ; alignwide jusqu'à 960 px ; alignfull sur toute la page ;
   photo verticale à droite ou à gauche (bloc Image), le texte passe autour, sauf sur téléphone. */
:root { --article-texte: 680px; --article-large: 960px; --article-section: clamp(56px, 6vw, 88px); }
.article { padding-bottom: clamp(56px, 6vw, 80px); background: var(--blanc); overflow-x: clip; }
.hero--article .hero__contenu { max-width: var(--article-texte); }
.article__corps, .article__auteur, .article-guide { max-width: calc(var(--article-texte) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.article__corps { display: flow-root; margin-top: clamp(56px, 6vw, 96px); font-size: clamp(17px, 1.25vw, 18px); line-height: 1.75; color: var(--noir-chaud); }
.article__corps > * + * { margin-top: 1.1em; }
/* Phrase d'entrée : le premier paragraphe, un peu plus grand, plus foncé et en demi-gras (la graisse 500 de la police ; le vrai gras n'est pas chargé et serait épaissi par le navigateur), détaché du texte qui suit (demandes de Mickaël, 17/09 : trop proche, même sur téléphone ; « le mettre en gras »).
   La marge basse se confond avec la marge haute du bloc suivant : un intertitre garde la sienne, plus grande. */
.article__corps > p:first-child { margin-bottom: clamp(32px, 3.4vw, 44px); font-size: clamp(19px, 1.5vw, 20px); font-weight: 500; line-height: 1.6; color: var(--noir); }
/* Intertitres : le seul texte en grand dans la lecture, sous un filet ; jamais à côté d'une photo */
.article__corps h2 {
  clear: both; margin-top: var(--article-section); padding-top: 20px; border-top: 1px solid var(--ligne);
  font-family: var(--titres); font-weight: 400; font-size: clamp(28px, 3.4vw, 32px); line-height: 1.2; color: var(--noir); text-wrap: balance;
}
.article__corps h3 { margin-top: 1.8em; font-family: var(--titres); font-weight: 400; font-size: clamp(21px, 2vw, 23px); line-height: 1.3; color: var(--noir); }
.article__corps h2 + * { margin-top: .9em; }
.article__corps h3 + * { margin-top: .6em; }
.article__corps strong { font-weight: 500; color: var(--noir); }
.article__corps a { color: var(--noir); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--ligne-forte); transition: text-decoration-color .35s var(--doux); }
.article__corps a:hover { text-decoration-color: currentColor; }
/* Listes : numéros et puces dans la marge du texte, un peu d'air entre les éléments */
.article__corps ul, .article__corps ol { padding-left: 1.3em; }
.article__corps ul { list-style: disc; }
.article__corps ol { list-style: decimal; }
.article__corps li { padding-left: .2em; }
.article__corps li + li { margin-top: .7em; }
.article__corps li::marker { color: var(--noir); font-weight: 500; }
/* Photos : largeur du texte par défaut, plus larges (alignwide) ou sur toute la page (alignfull) ; légende à gauche */
.article__corps > figure { margin-block: 2.2em; }
.article__corps > .alignwide { clear: both; margin-inline: calc(50% - min(var(--article-large), 100vw - 2 * var(--marge)) / 2); }
.article__corps > .alignfull { clear: both; margin-inline: calc(50% - 50vw); }
.article__corps img { display: block; width: 100%; height: auto; border-radius: var(--rayon-m); background: var(--grege); }
.article__corps > .alignfull img { border-radius: 0; }
/* Photo horizontale à la largeur de l'article, deux formats (décision de Mickaël du 28/09) : bandeau 16/9 (style « bandeau », le format
   par défaut des nouveaux articles) ou 4/3 (style « quatre-tiers ») quand on veut voir une pièce ou un meuble en entier. Le fichier reste entier,
   la page n'en montre qu'une partie ; cadrage au milieu, ou en haut (« cadrage-haut ») ou en bas (« cadrage-bas »). Sans style, rien ne change. */
.article__corps > .is-style-bandeau img { aspect-ratio: 16 / 9; object-fit: cover; }
.article__corps > .is-style-quatre-tiers img { aspect-ratio: 4 / 3; object-fit: cover; }
.article__corps > .cadrage-haut img { object-position: 50% 0; }
.article__corps > .cadrage-bas img { object-position: 50% 100%; }
.article__corps figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--gris-clair); }
.article__corps > .alignfull figcaption { padding-inline: var(--marge); }
/* Photo verticale à droite ou à gauche : le texte passe autour ; son haut s'aligne sur la première ligne du paragraphe qui suit */
.article__corps > .alignright, .article__corps > .alignleft { width: 44%; margin-block: calc(1.1em + 7px) 1em; }
.article__corps > .alignright { float: right; margin-left: clamp(20px, 3vw, 36px); }
.article__corps > .alignleft { float: left; margin-right: clamp(20px, 3vw, 36px); }
/* Petite verticale à droite (style « petite » du bloc Image, 24/09, demande d'Articles) : pour un détail, le texte a plus de place */
.article__corps > .alignright.is-style-petite { width: 30%; }
/* Deux verticales côte à côte (bloc Galerie à deux images, style « diptyque », 24/09) : à la largeur de l'article, sans texte autour, même hauteur */
.article__corps > .wp-block-gallery.is-style-diptyque { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 16px); margin-block: 2.2em; }
/* WordPress donne à chaque image d'une galerie une largeur de 50 % par une règle à sélecteur d'identifiant (:not(#individual-image)) : même poids ici pour la neutraliser */
.article__corps > .is-style-diptyque > figure, .article__corps > .is-style-diptyque > figure.wp-block-image:not(#diptyque) { width: auto; margin: 0; }
.article__corps > .is-style-diptyque img { height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.article__corps > .is-style-diptyque > figcaption { grid-column: 1 / -1; }
/* Lettrine (24/09) : la première lettre de la phrase d'entrée, en Marcellus, ancrée sur deux lignes et haute d’un peu moins (trois lignes, puis deux, jugées trop grosses par Mickaël) ; à défaut d'initial-letter (Firefox), en flottant */
.article__corps > p:first-child::first-letter { float: left; margin: .08em 8px 0 0; font-family: var(--titres); font-weight: 400; font-size: 2.6em; line-height: .78; color: var(--noir); }
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .article__corps > p:first-child::first-letter { float: none; margin: 0 9px 0 0; font-size: inherit; line-height: inherit; -webkit-initial-letter: 1.7 2; initial-letter: 1.7 2; }
}
/* À côté d'une photo à gauche, les puces et numéros restent visibles */
.article__corps > .alignleft ~ ul, .article__corps > .alignleft ~ ol { list-style-position: inside; padding-left: 0; }
.article__corps blockquote:not(.wp-block-pullquote blockquote) { clear: both; padding-left: 20px; border-left: 1px solid var(--ligne-forte); font-family: var(--titres); font-size: clamp(20px, 1.7vw, 22px); line-height: 1.45; color: var(--noir); }
/* Citation mise en avant (bloc « Citation en exergue ») : une phrase de l'article, plus petite que les intertitres, sous un court filet */
.article__corps > .wp-block-pullquote { clear: both; margin-block: 2.2em; padding: 0; border: 0; text-align: left; }
.article__corps .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.article__corps .wp-block-pullquote blockquote::before { content: ""; display: block; width: 48px; margin-bottom: 18px; border-top: 1px solid var(--noir); }
.article__corps .wp-block-pullquote p { font-family: var(--titres); font-size: clamp(22px, 2vw, 24px); line-height: 1.4; color: var(--noir); text-wrap: balance; }
.article__corps .wp-block-pullquote cite { display: block; margin-top: 12px; font-size: 13px; font-style: normal; color: var(--gris-clair); }
/* Encadré « À retenir » (style du bloc Groupe) : fond grège, arrondi ; son intertitre garde la taille des autres, sans filet */
.article__corps .is-style-a-retenir { clear: both; margin-top: var(--article-section); padding: clamp(24px, 3vw, 32px); border-radius: var(--rayon-m); background: var(--grege); }
.article__corps .is-style-a-retenir > * + * { margin-top: 1.1em; }
.article__corps .is-style-a-retenir > h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.article__corps .is-style-a-retenir > h2 + * { margin-top: .9em; }

/* Fin de l'article : l'auteur, discret, sans lien */
.article__auteur { margin-top: clamp(40px, 4.5vw, 56px); }
.article__auteur-carte { display: flex; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.article__auteur-photo { flex: none; width: 64px; margin: 0; }
.article__auteur-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.article__auteur-texte { display: grid; justify-items: start; gap: 6px; }
.article__signature { margin: 0; }
.article__signature img { display: block; width: 124px; height: auto; }
.article__auteur-metier { font-size: 13px; line-height: 1.4; color: var(--gris-clair); }

/* Le guide en encart à la largeur du texte : le seul bouton de la page.
   Version 2 (24/09, demande de Mickaël : reprendre la présentation de l'accueil et de la page Ressources) : encart en hauteur,
   la photo d'ambiance du guide (parcours-*, 3:2 recadrée en 16:9) sur toute la largeur de l'encart, la couverture posée dessus,
   cernée de blanc, qui déborde un peu en bas ; le texte dessous. En largeur, la couverture n'aurait eu que 110 px dans la colonne de 680 px. */
.article-guide { padding-bottom: clamp(56px, 6vw, 88px); }
.article-guide__carte { display: grid; gap: clamp(20px, 2.4vw, 28px); padding: clamp(16px, 2.4vw, 28px); border-radius: var(--rayon-m); background: var(--casse); }
.article-guide__visuel { position: relative; margin: 0 0 clamp(28px, 4vw, 44px); }
.article-guide__photo { margin: 0; }
.article-guide__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon-s); }
.article-guide__couverture { position: absolute; right: 7%; bottom: calc(-1 * clamp(28px, 4vw, 44px)); width: 30%; margin: 0; }
.article-guide__couverture img { display: block; width: 100%; height: auto; aspect-ratio: 1588 / 2246; object-fit: cover; border: clamp(4px, .6vw, 7px) solid var(--blanc); border-radius: var(--rayon-s); background: var(--blanc); }
.article-guide__contenu { display: grid; justify-items: start; gap: 12px; padding-inline: clamp(4px, 1vw, 12px); }
.article-guide__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(26px, 2.2vw, 28px); line-height: 1.15; color: var(--noir); }
.article-guide__accroche { max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--gris); }
.article-guide .wp-block-buttons { margin-top: 6px; }
/* Version B (24/09, validée par Mickaël, appliquée aux quatre guides par la classe article-guide--cote ; proportions revues le même soir : photo carrée pour tenir dans la hauteur du texte, débord réduit, écart agrandi) : photo à gauche (42 % de l'encart), couverture posée dessus qui déborde un peu vers le texte,
   texte à droite avec la ligne « pour qui » de la page Ressources. Sous 600 px, même présentation que la version A (photo au-dessus). */
.article-guide__pour-qui { max-width: 40ch; font-size: 15px; line-height: 1.5; color: var(--gris-clair); }
@media (min-width: 600px) {
  .article-guide--cote .article-guide__carte { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; column-gap: clamp(48px, 6vw, 72px); }
  .article-guide--cote .article-guide__visuel { margin: 0 0 24px; }
  .article-guide--cote .article-guide__photo img { aspect-ratio: 1 / 1; }
  .article-guide--cote .article-guide__couverture { right: -8%; bottom: -24px; width: 60%; }
  .article-guide--cote .article-guide__contenu { padding-inline: 0; }
}

/* « À lire aussi » : petites cartes sans voile, photo 3:2, catégorie et titre dessous ; toute la carte mène à l'article */
.articles-suite { padding-block: clamp(56px, 6vw, 88px) clamp(72px, 8vw, 112px); background: var(--casse); }
.articles-suite__cadre { max-width: calc(var(--article-large) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.articles-suite__entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: clamp(24px, 3vw, 36px); }
.articles-suite__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(22px, 1.8vw, 24px); line-height: 1.2; color: var(--noir); }
.articles-suite__entete .lien { font-size: 14.5px; }
.suite__liste .wp-block-post-template { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.suite__liste .wp-block-post { position: relative; display: flex; flex-direction: column; gap: 6px; }
.suite__liste .article-carte__image { position: relative; inset: auto; z-index: auto; order: -2; margin: 0 0 10px; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--rayon-m); background: var(--grege); }
.suite__liste .article-carte__categorie { color: var(--dore-clair); font-size: 11px; }
.suite__liste .article-carte__titre { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.3; color: var(--noir); }
.suite__liste .wp-block-post:hover .article-carte__image img { transform: scale(1.03); }
.suite__liste .wp-block-post:hover .article-carte__titre a { text-decoration-color: var(--ligne-forte); }
.suite__liste .wp-block-post:has(.article-carte__titre a:focus-visible) { outline: 2px solid var(--noir); outline-offset: 6px; border-radius: var(--rayon-s); }

/* Tablette et plus : l'encadré « À retenir » déborde un peu de la colonne pour que son texte reste aligné sur celui de l'article */
@media (min-width: 768px) {
  .article__corps .is-style-a-retenir { margin-inline: -32px; padding: 32px; }
}
/* Grand écran : plus de débord dans la marge depuis le 24/09 (option A de Mickaël) : toutes les photos s'alignent sur la colonne du texte,
   verticale à 44 % (300 px), petite à 30 % (204 px). Le débord de 120 px décalait les bords droits dès qu'une photo horizontale suivait. */
/* Téléphone : pas d'habillage, la photo verticale passe en pleine largeur avec une hauteur plafonnée ; guide en une colonne ; « À lire aussi » en lignes */
@media (max-width: 599px) {
  .article__corps > .alignright, .article__corps > .alignleft { float: none; width: auto; margin: 2.2em 0; }
  .article__corps > .alignright img, .article__corps > .alignleft img { width: auto; max-width: 100%; max-height: 70svh; }
  .article__corps > h2 + .alignright, .article__corps > h2 + .alignleft { margin-top: .9em; }
  .article__corps > .alignright.is-style-petite { width: auto; }
  .article__corps > .alignright.is-style-petite img { max-height: 50svh; }
  .article__corps > .alignleft ~ ul, .article__corps > .alignleft ~ ol { list-style-position: outside; padding-left: 1.3em; }
  .article-guide__couverture { width: 34%; right: 6%; }
  .suite__liste .wp-block-post-template { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .suite__liste .wp-block-post { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-content: center; padding-block: 16px; border-top: 1px solid var(--ligne); }
  .suite__liste .wp-block-post:last-child { border-bottom: 1px solid var(--ligne); }
  .suite__liste .article-carte__image { grid-column: 1; grid-row: 1 / -1; margin: 0; aspect-ratio: 1; }
  .suite__liste .article-carte__categorie { grid-column: 2; grid-row: 1; align-self: end; }
  .suite__liste .article-carte__titre { grid-column: 2; grid-row: 2; align-self: start; font-size: 18px; }
}

/* ---------- Page introuvable : fenêtre blanche sur fond grège, comme la page Contact et la page de remerciement ---------- */
.introuvable { display: grid; place-items: center; padding: calc(var(--entete) + clamp(48px, 7vw, 96px)) 16px clamp(64px, 9vw, 120px); background: var(--grege); }
.introuvable__carte {
  width: 100%; max-width: 560px; display: grid; justify-items: center; gap: 16px; text-align: center;
  padding: clamp(32px, 5vw, 48px) clamp(20px, 5vw, 48px); background: var(--blanc); border-radius: var(--rayon-m);
}
.introuvable__visuel { margin-bottom: 8px; }
.introuvable__visuel img { width: 180px; height: auto; }
.introuvable__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(32px, 4.5vw, 44px); line-height: 1.1; text-wrap: balance; }
.introuvable__message { max-width: 42ch; font-size: 16.5px; line-height: 1.65; color: var(--gris); }
.introuvable .wp-block-buttons { margin-top: 8px; }

/* ---------- Écrans ---------- */
@media (max-width: 1023px) {
  .articles__liste .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .articles__liste .wp-block-post { grid-column: auto; }
  /* Deux colonnes : une carte seule en fin de liste se centre sur la largeur d'une colonne */
  .articles__liste .wp-block-post:nth-child(2n+1):last-child { grid-column: 1 / -1; width: calc(50% - clamp(20px, 2.4vw, 32px) / 2); justify-self: center; }
  /* Liste sur tablette : le temps de lecture passe sous l'extrait pour laisser la largeur au titre ; la ligne ignore le centrage de la dernière carte */
  .articles__liste.est-en-liste .wp-block-post:nth-child(n) { grid-template-columns: clamp(140px, 18vw, 220px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; width: auto; justify-self: stretch; }
  .articles__liste.est-en-liste .article-carte__infos { grid-column: 2; grid-row: 4; margin-top: 4px; }
}
@media (max-width: 767px) {
  .hero--une::before, .hero--article::before { background: linear-gradient(0deg, rgb(28 28 28 / .92) 0%, rgb(28 28 28 / .8) 50%, rgb(28 28 28 / .3) 78%, rgb(28 28 28 / 0) 100%); }
  .hero--une .hero__actions .wp-block-read-more { width: 100%; }
}
@media (max-width: 639px) {
  .articles__liste .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
  /* Liste sur téléphone : vignette carrée à gauche, catégorie, titre et temps de lecture ; l'extrait reste caché */
  .articles__liste.est-en-liste .wp-block-post:nth-child(n) { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 4px; width: auto; justify-self: stretch; }
  .articles__liste.est-en-liste .article-carte__image { aspect-ratio: 1; }
  .articles__liste.est-en-liste .article-carte__titre { font-size: 19px; }
  .articles__liste.est-en-liste .article-carte__extrait { display: none; }
  .articles__liste.est-en-liste .article-carte__infos { grid-column: 2; grid-row: 3; margin-top: 4px; }
  .articles__liste .wp-block-post:nth-child(2n+1):last-child { width: auto; justify-self: stretch; }
  /* Une colonne : pas de décalage d'apparition */
  .articles__liste .wp-block-post:nth-child(n) { animation-range: entry 5% cover 30%; }
}
@media (max-width: 479px) {
  .introuvable .wp-block-buttons, .introuvable .wp-block-button__link { width: 100%; }
}
/* ---------- Page d'attente du Programme EXCLUSIV. (17/09) : page d'atterrissage sombre, sur le modèle de la page du guide ----------
   Demande de Mickaël : la page du Programme n'est pas tout à fait finie, une page d'attente avec un formulaire la remplace.
   Même composition que le guide (une image, une carte, un formulaire en deux temps, la phrase signature dessous), dans l'atmosphère EXCLUSIV. :
   corps de page en .page-exclusiv (couleurs sombres), carte noir doux à filet doré, image Onyx_04 assombrie par filtre (leçon du 15/09).
   La carte reprend les classes du guide pour le formulaire, l'auteur et le remerciement : mêmes réglages, une seule règle à modifier. */
.attente-entete { border-bottom-color: rgb(195 164 118 / .3); }
.attente-entete img { height: 26px; }

.attente-bande { position: relative; isolation: isolate; overflow: hidden; background: #232221; }
.attente-bande__image { overflow: hidden; }
.attente-bande__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 74% center; filter: brightness(.72) contrast(1.1); }

.attente-carte { display: grid; gap: 18px; padding: 32px var(--marge) 40px; background: #1c1c1c; }
.attente-carte__entete { display: grid; gap: 14px; }
.attente-carte__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(38px, 3.4vw, 52px); line-height: 1.05; text-wrap: balance; }
.attente-carte__presentation { display: grid; gap: 10px; }
/* Un seul corps de texte, comme le guide : blanc cassé pour « pour qui », gris pour la présentation */
.attente-carte__pour-qui { font-size: 15.5px; line-height: 1.6; color: var(--noir); max-width: 52ch; }
.attente-carte__texte { font-size: 15.5px; line-height: 1.6; color: var(--gris); max-width: 52ch; }
/* Ce que comprend le Programme : lignes séparées par des filets, comme les cartes des formules */
.attente-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.attente-liste li { padding: 10px 0; border-top: 1px solid var(--ligne); font-size: 15px; line-height: 1.5; color: var(--gris); }
.attente-liste li:last-child { border-bottom: 1px solid var(--ligne); }
.attente-carte__ouvrir { margin-top: 4px; }
.attente-carte__note { margin-top: -8px; font-size: 13px; color: var(--gris-clair); }
.attente-carte .guide-auteur { padding-top: 16px; }
.attente-carte .guide-auteur__photo img { object-position: center 14%; }
/* Deuxième temps : le formulaire remplace la présentation, la liste, la note et l'auteur ; la marque et le titre restent */
.attente-carte.est-ouverte :is(.attente-carte__presentation, .attente-liste, .attente-carte__note, .guide-auteur) { display: none; }
.attente-carte .guide-merci__suite { border-top-color: var(--ligne); }
/* Champ facultatif du projet : trois lignes (le message de Contact en a cinq), agrandissable par le visiteur */
.attente-carte textarea.champ__saisie { min-height: 96px; }

.attente-vision { padding: clamp(40px, 4.5vw, 64px) var(--marge) clamp(24px, 2.5vw, 36px); text-align: center; }
.attente-vision p { max-width: 30ch; margin: 0 auto; font-family: var(--titres); font-size: clamp(21px, 2vw, 28px); line-height: 1.35; color: var(--noir); text-wrap: balance; }

/* Téléphone : l'image au-dessus, recadrée sur le lit et la baie vitrée, la carte dessous sur toute la largeur */
@media (max-width: 959px) {
  .attente-bande__image { height: clamp(190px, 52vw, 460px); }
}
/* Tablette : la carte remonte sur l'image, centrée, avec son filet doré */
@media (min-width: 600px) and (max-width: 959px) {
  .attente-bande { padding-bottom: 48px; }
  .attente-carte { position: relative; width: min(100% - 2 * var(--marge), 640px); margin: -96px auto 0; padding: 36px 40px; border: 1px solid rgb(195 164 118 / .35); border-radius: var(--rayon-m); }
}
/* Ordinateur : l'image occupe toute la bande, la carte se pose à gauche sur le mur sombre ; le lit et la baie restent visibles à droite */
@media (min-width: 960px) {
  .attente-bande { display: grid; grid-template-columns: min(46vw, 600px) 1fr; align-items: center; min-height: clamp(640px, calc(100svh - var(--entete)), 900px); padding: 40px clamp(24px, 4vw, 72px); }
  .attente-bande__image { position: absolute; inset: 0; z-index: -1; }
  .attente-carte { grid-column: 1; gap: 16px; padding: 36px 44px; border: 1px solid rgb(195 164 118 / .35); border-radius: var(--rayon-m); }
}
@media (max-width: 767px) {
  .attente-entete img { height: 23px; }
  .attente-carte .guide-carte__separateur { display: none; }
  .attente-carte .guide-carte__suite { display: block; }
  .attente-carte__ouvrir, .attente-carte__ouvrir .wp-block-button__link { width: 100%; }
  /* Sur téléphone, le bouton reste dans le premier écran, comme sur la page du guide */
  .attente-carte { gap: 16px; padding-top: 28px; }
  .attente-carte__titre { font-size: 34px; }
  .attente-liste li { padding-block: 9px; }
}

/* Entrée à l'ouverture de la page : la photo s'approche (comme le premier écran de l'accueil), la carte monte de 18 px (comme la Bio).
   Sur la carte entière et non sur ses blocs : ceux-ci disparaissent et reviennent avec le formulaire en deux temps, leur animation se rejouerait. */
@media (prefers-reduced-motion: no-preference) {
  .attente-bande__image img { animation: attente-approche 2.4s var(--courbe) both; }
  .attente-carte { animation: attente-entree 1s var(--courbe) .12s backwards; }
  @keyframes attente-approche { from { transform: scale(1.05); } }
  @keyframes attente-entree { from { opacity: 0; transform: translateY(18px); } }
}
/* ---------- Ressources (17/09, version 2 du 23/09 ; remplacée par le « fil » ci-dessous, version 3) ----------
   Les règles .ressource restent : le modèle de section du thème (mj-refonte/modeles/ressource.html) les utilise ; à revoir avec la page
   Ressources sur WordPress. La simulation qui s'en servait est archivée (04_SITE/_archives/2026-09-23/ressources-simulation.html).
   Les quatre guides offerts, dans l'ordre du parcours. Titre et introduction comme une page de catégorie, puis un guide par ligne
   sous un filet : la couverture (format A4, portrait) toujours à gauche, pour que la page se lise comme un parcours, puis le moment,
   le titre, le sous-titre, le texte et le bouton. Sur téléphone, la couverture passe au-dessus du texte, en plus petit.
   Version 1 : une ressource, visuel en paysage, alterné à gauche et à droite (copie dans 04_SITE/_archives/2026-09-23/). */
.ressources { padding-block: calc(var(--entete) + clamp(56px, 7vw, 104px)) clamp(96px, 12vw, 160px); background: var(--blanc); }
.ressources__entete { display: grid; justify-items: start; gap: clamp(12px, 1.6vw, 18px); margin-bottom: clamp(40px, 5vw, 64px); }
.ressources__entete .titre { font-size: clamp(44px, 5.4vw, 72px); line-height: 1.05; }
.ressources__intro { max-width: 62ch; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.65; color: var(--gris); }
.ressources__liste { display: grid; }
.ressource {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--ligne);
}
.ressource:last-child { border-bottom: 1px solid var(--ligne); }
.ressource__visuel { margin: 0; overflow: hidden; border-radius: var(--rayon-m); aspect-ratio: 1588 / 2246; background: var(--casse); }
.ressource__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ressource__contenu { display: grid; justify-items: start; gap: 12px; }
.ressource__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; color: var(--noir); text-wrap: balance; }
.ressource__accroche { max-width: 40ch; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.5; color: var(--noir); }
.ressource__texte { max-width: 46ch; color: var(--gris); }
.ressource .wp-block-buttons { margin-top: 6px; }
.ressource__preuve { font-size: 13px; color: var(--gris-clair); }
@media (max-width: 767px) {
  .ressource { grid-template-columns: minmax(0, 1fr); }
  .ressource__visuel { width: min(60vw, 240px); }
}

/* ---------- Ressources, version 3 : le « fil » (23/09, choisi par Mickaël) ----------
   Un fil vertical au centre, les étapes posées d'un côté puis de l'autre. Photo d'ambiance, couverture posée dessus (cernée de blanc,
   sans ombre), grand numéro en nude sable, texte. Sommaire des étapes sous l'introduction. Sur tablette et téléphone, le fil passe à gauche. */
.ressources--fil .ressources__entete { margin-bottom: clamp(64px, 8vw, 120px); }
.fil__sommaire { width: 100%; margin-top: clamp(20px, 2.4vw, 32px); }
.fil__sommaire ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.fil__sommaire ol::before { content: ""; position: absolute; top: 16px; left: 16px; right: 16px; height: 1px; background: var(--ligne-forte); }
.fil__sommaire a { position: relative; display: grid; justify-items: start; gap: 10px; font-size: 14px; color: var(--noir); text-decoration: none; }
.fil__puce { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--noir); border-radius: 50%; background: var(--blanc); font-family: var(--titres); font-size: 15px; line-height: 1; transition: background .3s var(--courbe), color .3s var(--courbe); }
.fil__sommaire a:hover .fil__puce, .fil__sommaire a:focus-visible .fil__puce { background: var(--noir); color: var(--blanc); }
.fil { --point: 11px; position: relative; display: grid; gap: clamp(88px, 11vw, 168px); margin: 0; padding: 0; list-style: none; }
.fil::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ligne-forte); }
.fil__etape { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(64px, 9vw, 140px); scroll-margin-top: calc(var(--entete) + 24px); }
/* Le point de l'étape, sur le fil, à hauteur du milieu de l'étape */
.fil__etape::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--point); height: var(--point); border: 1px solid var(--noir); border-radius: 50%; background: var(--blanc); transform: translate(-50%, -50%); }
.fil__etape:nth-child(even) .fil__visuel { order: 2; }
.fil__visuel { position: relative; margin: 0 0 clamp(28px, 4vw, 56px); }
.fil__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon-m); }
.fil__couverture { position: absolute; right: -5%; bottom: calc(-1 * clamp(28px, 4vw, 56px)); width: 32%; height: auto; aspect-ratio: 1588 / 2246; object-fit: cover; border: clamp(5px, .6vw, 8px) solid var(--blanc); border-radius: var(--rayon-m); background: var(--blanc); }
.fil__etape:nth-child(even) .fil__couverture { right: auto; left: -5%; }
.fil__texte { display: grid; justify-items: start; gap: 14px; }
.fil__numero { margin-bottom: -4px; font-family: var(--titres); font-size: clamp(72px, 8vw, 124px); line-height: .85; color: var(--sable); }
.fil__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; color: var(--noir); text-wrap: balance; }
.fil__accroche { max-width: 36ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--noir); }
.fil__pour-qui { max-width: 40ch; color: var(--gris); }
.fil__action { margin-top: 6px; }
/* Tablette et téléphone : le fil à gauche, la photo au-dessus du texte, les étapes de haut en bas */
@media (max-width: 1023px) {
  .fil { padding-left: 36px; gap: clamp(72px, 12vw, 104px); }
  .fil::before { left: 5px; }
  .fil__etape { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .fil__etape::before { top: 0; left: -36px; transform: translate(0, 0); }
  .fil__etape:nth-child(even) .fil__visuel { order: 0; }
  .fil__couverture, .fil__etape:nth-child(even) .fil__couverture { right: 4%; left: auto; width: 30%; }
}
@media (max-width: 767px) {
  .fil__sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .fil__sommaire ol::before { display: none; }
  .fil__sommaire a { grid-auto-flow: column; align-items: center; justify-content: start; }
  .fil__couverture, .fil__etape:nth-child(even) .fil__couverture { width: 34%; }
}
/* ---------- Bandeau cookies (19/09/2026, phase 4 du plan avant bascule) ----------
   Carte discrète en bas de l'écran. Écrite par mouvement.js sur toutes les pages sauf la Bio.
   Version 2 (21/09/2026) : deux boutons de même poids, Tout refuser et Tout accepter. La CNIL exige que refuser soit
   aussi simple qu'accepter, en clics comme en présentation ; cette règle ne vaut que pour ce couple. « Choisir en détail »,
   qui n'y est pas soumis, descend donc en lien discret sous le texte : trois boutons identiques diluaient le choix.
   Un seul lien au premier niveau ; la politique de confidentialité est dans le panneau de détail.
   Le bouton « Enregistrer mes choix » n'apparaît qu'une fois le détail ouvert, sur toute la largeur.
   Couleurs par les variables du site : la carte passe d'elle-même en sombre sur les pages EXCLUSIV. (.page-exclusiv). */
.cookies {
  position: fixed; z-index: 25; left: 16px; bottom: 16px; width: min(420px, calc(100% - 32px));
  padding: 22px 22px 18px; background: var(--blanc); color: var(--noir);
  border: 1px solid var(--ligne); border-radius: var(--rayon-m);
  box-shadow: 0 12px 40px rgb(28 28 28 / .14);
  font-size: 14px; line-height: 1.55;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--courbe), transform .5s var(--courbe);
}
.cookies.est-visible { opacity: 1; transform: none; }
.cookies .pretitre { margin: 0 0 8px; }
.cookies__texte { margin: 0; color: var(--gris); }
/* Un seul lien au premier niveau : « Choisir en détail » (remarque de Mickaël, 21/09 : deux liens faisaient trop).
   La politique de confidentialité vit dans le panneau de détail, sous les deux cases. Elle reste aussi
   accessible depuis le pied de page de chaque page du site. */
.cookies__liens { margin: 12px 0 0; color: var(--gris); }
.cookies__politique { margin: 4px 0 0; }
/* Un bouton qui a l'air d'un lien : c'est une action, pas une adresse */
.cookies__detail { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.cookies__detail[hidden] { display: none; }
.cookies__choix { display: grid; gap: 10px; margin: 16px 0 2px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.cookies__choix[hidden] { display: none; }
.cookies__choix .accord { align-items: flex-start; color: var(--gris); }
.cookies__choix .accord input { margin-top: 3px; }
.cookies__choix .accord strong { display: block; font-weight: 500; color: var(--noir); }
.cookies__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
.cookies__actions [data-choix="enregistrer"] { grid-column: 1 / -1; }
.cookies__actions [data-choix="enregistrer"][hidden] { display: none; }
.cookies__actions .bouton { padding: 0 10px; font-size: 13px; white-space: nowrap; }
.cookies__actions .bouton--contour:hover { background: transparent; }
@media (max-width: 400px) {
  .cookies { left: 12px; bottom: 12px; width: calc(100% - 24px); padding: 18px 16px 14px; }
  .cookies__actions { grid-template-columns: 1fr 1fr; }
}
/* Sombre : ombre plus marquée, cases à la couleur EXCLUSIV. */
.page-exclusiv .cookies { box-shadow: 0 12px 40px rgb(0 0 0 / .45); }
.page-exclusiv .cookies .bouton--contour { color: #f4f3f0; }
/* Lien « Gérer mes cookies » ajouté au pied de page : un bouton qui a l'air d'un lien */
.lien-cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; min-height: 32px; }
.lien-cookies:hover { color: var(--noir); }
@media (prefers-reduced-motion: reduce) { .cookies { transition: none; transform: none; } }
/* ---------- Page Upload projet (20/09/2026, après la bascule) : l'ancienne page Elementor refaite au nouveau design ----------
   Page privée : on y arrive par un lien envoyé à un client, jamais par la navigation ni par une recherche.
   Elle garde l'en-tête et le pied du site pour rester de la marque, mais n'est reliée depuis aucune autre page
   et porte « ne pas référencer ».
   Version 2 (20/09) : en-tête et pied d'atterrissage à la demande de Mickaël, comme la page du guide.
   Version 3 (20/09, « le texte me paraît un peu gros ») : échelle de texte alignée sur celle de la page du guide,
   dont la page porte désormais l'en-tête et le pied (15,5 px et interligne 1,6, au lieu des 17 px des pages du site).
   Mesuré avant de changer : le titre était déjà identique à celui de la page Contact, ce n'est pas lui qui débordait ;
   c'étaient la liste et l'encadré, qui couraient sur toute la largeur de la fenêtre, jusqu'à 104 signes par ligne.
   Toutes les colonnes de texte sont maintenant bornées à 62 signes ; seul le formulaire garde la pleine largeur.
   Cet en-tête n'est pas fixe et occupe sa propre place : le calage du haut ne lui ajoute plus la hauteur d'en-tête.
   Même modèle que la page Contact (fond grège, fenêtre blanche resserrée), sans la photo en bulle :
   le formulaire prend toute la largeur de la fenêtre et demande de la hauteur.
   L'habillage du formulaire lui-même (couleurs, police, vouvoiement) se règle dans Fillout, pas ici :
   la maquette ne peut que lui donner sa place. */
.upload {
  --carte-marge: clamp(20px, 3.5vw, 48px);
  padding-top: clamp(32px, 4.5vw, 64px);
  padding-bottom: clamp(56px, 7vw, 104px);
  background: var(--grege);
}
.upload__carte {
  display: grid; gap: clamp(28px, 3.5vw, 44px);
  padding: var(--carte-marge); background: var(--blanc); border-radius: var(--rayon-m);
}
/* Colonnes de texte bornées : le confort de lecture s'arrête vers 70 signes par ligne. Le formulaire, lui, prend toute la largeur.
   Valeur en pixels et non en ch : l'unité ch se calcule sur la taille du bloc, pas sur celle du texte qu'il contient,
   et donnait ici des lignes de 665 px. 520 px à 15,5 px font environ 68 signes, la colonne de la page du guide. */
.upload__intro, .upload__attendu, .upload__astuce, .upload__suite { max-width: 520px; }
.upload__intro { display: grid; gap: 16px; }
.upload__texte { color: var(--gris); font-size: 15.5px; line-height: 1.6; }

/* Ce que le formulaire demande : une liste sans puces de navigateur, repère sable aligné sur la première ligne */
.upload__attendu { display: grid; gap: 14px; }
.upload__attendu-titre { font-family: var(--texte); font-size: 15px; font-weight: 500; letter-spacing: .01em; }
.upload__liste { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: var(--gris); font-size: 15.5px; line-height: 1.6; }
.upload__liste li { position: relative; padding-left: 22px; }
.upload__liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: var(--rayon-s); background: var(--sable);
}

/* Astuce des fichiers lourds : un encadré discret, pas un avertissement */
.upload__astuce {
  padding: 16px 18px; border-left: 2px solid var(--sable); background: var(--casse);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0; color: var(--gris); font-size: 14.5px; line-height: 1.6;
}

/* Le formulaire Fillout, intégré et non en plein écran : il garde sa place dans la fenêtre.
   La hauteur minimale évite que le cadre saute pendant son chargement.
   Version 4 (20/09, « le formulaire se noie dans la page ») : le formulaire est blanc sur une fenêtre blanche,
   rien ne dit où il commence. Il lui faut une surface à lui, pas un accent de couleur.
   Deux gestes complémentaires : ici l'arrondi de la fenêtre et le fond blanc cassé, qui le dessinent comme un
   panneau ; et, dans Fillout, son fond passé au même blanc cassé (#f4f3f0), le ton que le site emploie déjà pour
   l'encadré de l'astuce juste au-dessus. Aucune couleur nouvelle n'est introduite.
   Un filet de 1 px à 12 % avait été essayé puis retiré (Mickaël, 20/09) : à cette opacité il était à la limite du
   perceptible, et un trait qu'on ne voit pas ne sert à rien. Le changement de ton suffit à séparer le panneau.
   Le fond posé ici sert aussi pendant le chargement du formulaire, et si son cadre ne couvrait pas tout.
   Le doré des pré-titres a été écarté (avis de Claude, accepté le 20/09) : le site n'a qu'une couleur d'action,
   le noir, et le bronze y est la couleur des petits libellés, pas des actions. Sa seule place légitime aurait été
   la barre de progression, un filet, mais elle est pilotée par « Primary » dans Fillout, donc inséparable du bouton
   sans CSS personnalisé, réservé au plan Pro que Mickaël n'a pas. */
.upload__formulaire {
  min-height: clamp(560px, 68vh, 820px);
  background: var(--casse);
  border-radius: var(--rayon-m); overflow: hidden;
}
.upload__formulaire > div { width: 100%; height: 100%; min-height: inherit; }

.upload__suite { color: var(--gris-clair); font-size: 14.5px; line-height: 1.6; }

@media (max-width: 719px) {
  .upload__astuce, .upload__suite { font-size: 14px; }
}
/* ---------- Page d'attente de Bank of Plan EXCLUSIV. (20/09/2026) ----------
   Choix de Claude, à valider par Mickaël (« fais ce qui te semble juste »).
   Pourquoi une page d'attente et non une page de vente : le manuel d'offres décrit l'offre comme encore à construire
   (« v1 minimale de 5 à 8 typologies, segment 30-50 m² en priorité, puis 1 ajout tous les 2 mois »). Il n'y a donc
   rien à vendre aujourd'hui, et annoncer un prix pour un produit sans contenu engagerait la marque à vide.
   Pourquoi l'atmosphère sombre : l'offre est passée sous la marque EXCLUSIV. (manuel, groupe B), et la règle
   du 13/09 dit sombre pour EXCLUSIV. Les trois anciennes pages étaient claires, elles décrivaient une autre offre.
   Aucun style propre n'est nécessaire : la page reprend le gabarit d'attente du Programme (16-attente.css),
   qui porte déjà la carte sombre, le filet doré, la liste à filets et le formulaire en deux temps.
   Seule différence, le cadrage de la photo de tête : la scène utile (le bureau intégré) est à gauche du cliché,
   là où celle du Programme est à droite. */
.bank-bande__image img { object-position: 40% center; }

/* « Bank of Plan EXCLUSIV. » est plus long que « Programme EXCLUSIV. » : sur une carte étroite, le pré-titre
   se coupait au milieu de « Liste d'attente ». La mention reste d'un seul tenant, le retour se fait avant elle. */
.bank-bande .guide-carte__suite { white-space: nowrap; }
/* ---------- Page EXCLUSIV. L'Immersion (20/09/2026), version 2 ----------
   Refonte de l'ancienne page Elementor 8315 (/exclusiv-immersion/), archivée dans
   00_EXISTANT/archive-elementor-2026-09-20/.

   Version 1 (matin du 20/09) était une page d'attente : elle ne vendait pas, faute de date 2026.
   Version 2 (demande de Mickaël, 20/09) est la page complète, celle du jour où une édition est annoncée.
   La page d'attente reste disponible dans exclusiv-immersion-attente.html : c'est elle qui s'affiche
   entre deux éditions, celle-ci prend le relais quand la date est fixée.

   Atmosphère sombre comme tout EXCLUSIV. (règle du 13/09). La page emprunte le vocabulaire visuel
   de la page du Programme (14-exclusiv.css) : même en-tête, même premier écran, mêmes deux noirs
   en alternance, même pied. Ce fichier n'ajoute que ce qui lui est propre.
   Aucun tarif : le site qualifie, l'échange chiffre (cadrage du 14/09). */

/* Premier écran : la photo de tête (Mickaël dans l'allée) est en portrait, la scène utile est au centre.
   Le voile de .hero--exclusiv vient de la gauche, le texte reste lisible. */
.hero--immersion .hero__media img { object-position: 50% 38%; }
.hero--immersion .hero__titre { max-width: 13em; }

/* Bande de rappel sous le premier écran : la date et le lieu, seule information qui change d'une édition à l'autre */
.immersion-rappel { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; padding: 18px var(--marge); border-bottom: 1px solid rgb(195 164 118 / .3); }
.immersion-rappel p { font-family: var(--texte); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dore); }

/* Sections propres à la page : même largeur resserrée que le reste du site */
.immersion-section { padding: clamp(56px, 8vw, 104px) var(--marge); }
/* Deux noirs en alternance d'une section à l'autre, comme la page du Programme (règle du 15/09) :
   le changement de ton sépare les sections, les filets deviennent inutiles. */
.immersion-constat, .immersion-equipe, .immersion-edition, .immersion-reserver { background: #1c1c1c; }
.immersion-journee, .immersion-inclus, .immersion-questions { background: #232221; }
.immersion-section__entete { display: grid; gap: 12px; margin-bottom: clamp(24px, 3vw, 36px); max-width: 60ch; }
.immersion-section__titre { font-family: var(--titres); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; }
.immersion-section__texte { color: var(--gris); font-size: 15.5px; line-height: 1.6; max-width: 58ch; }

/* Le constat : trois obstacles, en lignes séparées par des filets, chacune ouverte par un tiret doré */
.immersion-obstacles { display: grid; margin: clamp(24px, 3vw, 32px) 0 0; padding: 0; list-style: none; max-width: 62ch; }
.immersion-obstacles li { position: relative; padding: 14px 0 14px 26px; border-top: 1px solid var(--ligne); color: var(--gris); font-size: 15.5px; line-height: 1.6; }
.immersion-obstacles li:last-child { border-bottom: 1px solid var(--ligne); }
.immersion-obstacles li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 12px; height: 1px; background: var(--dore); }
.immersion-obstacles + .immersion-section__texte { margin-top: clamp(24px, 3vw, 32px); }

/* Les quatre temps de la journée : des lignes séparées par des filets, comme la liste de la carte */
.immersion-temps { display: grid; margin: 0; padding: 0; list-style: none; max-width: 70ch; }
.immersion-temps li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--ligne); }
.immersion-temps li:last-child { border-bottom: 1px solid var(--ligne); }
.immersion-temps b { font-weight: 500; font-size: 15.5px; }
.immersion-temps span { color: var(--gris); font-size: 15px; line-height: 1.55; }

/* Image pleine largeur : le groupe au bord du bassin. Crédit posé sur la photo, en bas à droite,
   parce que .pleine-largeur masque ce qui dépasse et qu'une légende en dessous serait coupée. */
.immersion-pleine { height: clamp(300px, 46vw, 680px); background: #1c1c1c; }
.immersion-pleine img { object-position: 50% 62%; }
.immersion-pleine figcaption { position: absolute; right: var(--marge); bottom: 14px; font-size: 12px; letter-spacing: .04em; color: rgb(255 255 255 / .72); text-shadow: 0 1px 6px rgb(0 0 0 / .55); }

/* Les intervenants : quatre fiches, photo, nom, spécialité, puis ce qu'ils apportent à la journée */
.immersion-intervenants { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .immersion-intervenants { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.immersion-intervenant { display: grid; gap: 12px; align-content: start; }
.immersion-intervenant figure { margin: 0; }
.immersion-intervenant img { width: 100%; height: auto; border-radius: var(--rayon-m); display: block; }
.immersion-intervenant__nom { font-family: var(--titres); font-size: 19px; line-height: 1.2; }
.immersion-intervenant__role { font-family: var(--texte); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dore); }
.immersion-intervenant__texte { color: var(--gris); font-size: 14.5px; line-height: 1.6; }

/* Ce que comprend la journée : cinq entrées, filet doré en tête comme l'univers EXCLUSIV. de la page du Programme.
   Aucune valeur en euros, contrairement à l'ancienne page (« Valeur 120 € ») : le site n'affiche pas de montant. */
.immersion-compris { display: grid; gap: 30px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.immersion-compris > * { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid rgb(195 164 118 / .45); }
.immersion-compris h3 { font-family: var(--titres); font-weight: 400; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.2; }
.immersion-compris > * > p:last-child { color: var(--gris); font-size: 15px; line-height: 1.6; }
@media (max-width: 1023px) { .immersion-compris { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .immersion-compris { grid-template-columns: 1fr; } }

/* L'édition passée : un récit à gauche, une photo à droite. En dessous de 860 px, la photo passe dessous. */
.immersion-recit { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
.immersion-recit__photo { margin: 0; }
.immersion-recit__photo img { width: 100%; height: auto; border-radius: var(--rayon-m); display: block; }
.immersion-recit__credit { margin-top: 10px; font-size: 12.5px; color: var(--gris-clair); }
@media (min-width: 860px) { .immersion-recit { grid-template-columns: 1fr 42%; } }

/* Galerie de l'édition : deux photos larges côte à côte, un seul crédit pour les deux */
.immersion-galerie { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(28px, 3.5vw, 44px) 0 0; }
.immersion-galerie figure { margin: 0; }
.immersion-galerie img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon-m); display: block; }
@media (max-width: 639px) { .immersion-galerie { grid-template-columns: 1fr; } }
.immersion-galerie__credit { margin-top: 12px; font-size: 12.5px; color: var(--gris-clair); }

/* Questions fréquentes : des blocs Détails de WordPress, ouverts un par un, sans script.
   Le triangle par défaut du navigateur est remplacé par un signe doré à droite. */
.immersion-faq { display: grid; max-width: 74ch; }
.immersion-faq .wp-block-details { border-top: 1px solid var(--ligne); }
.immersion-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--ligne); }
.immersion-faq summary { display: flex; gap: 20px; align-items: baseline; justify-content: space-between; padding: 18px 0; cursor: pointer; font-size: 15.5px; font-weight: 500; line-height: 1.45; list-style: none; }
.immersion-faq summary::-webkit-details-marker { display: none; }
.immersion-faq summary::after { content: "+"; flex: none; font-size: 19px; font-weight: 400; line-height: 1; color: var(--dore); }
.immersion-faq .wp-block-details[open] summary::after { content: "\2212"; }
.immersion-faq summary:focus-visible { outline: 2px solid var(--dore); outline-offset: 3px; }
.immersion-faq .wp-block-details > p { margin: -2px 0 20px; padding-right: 40px; color: var(--gris); font-size: 15px; line-height: 1.65; }

/* Dernière section : la demande de place. Même construction en deux temps que la page du Programme. */
.immersion-reserver__grille { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .immersion-reserver__grille { grid-template-columns: 1fr 1fr; } }
.immersion-reserver__droite { display: grid; gap: 20px; }
/* ---------- Page Consultation (23/09) ----------
   Décor de la page Contact (09-contact.css : fond grège, fenêtre blanche, photo en bulle). À gauche l'introduction, à droite le détail
   de l'offre et le bouton ; au clic, le calendrier Calendly s'ouvre sous les deux, sur toute la largeur de la fenêtre. */
.consultation__detail { grid-column: 7 / -1; display: grid; justify-items: start; gap: 14px; }
.consultation__liste { display: grid; gap: 6px; width: 100%; margin: 0; padding-left: 1.2em; list-style: disc; color: var(--noir); }
.consultation__liste li::marker { color: var(--gris-clair); }
.consultation__pour-qui { max-width: 44ch; color: var(--gris); }
.consultation__format { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-block: 14px; width: 100%; border-block: 1px solid var(--ligne); }
.consultation__format p { margin: 0; color: var(--noir); }
.consultation__prix { font-family: var(--titres); font-size: clamp(28px, 2.4vw, 34px); line-height: 1; }
.consultation__creneaux { font-size: 14.5px; color: var(--gris); max-width: 46ch; }
.consultation__ouvrir { margin-top: 4px; }
.consultation__note { font-size: 13px; line-height: 1.5; color: var(--gris-clair); max-width: 52ch; }
/* Le calendrier : une ligne entière de la fenêtre, sous l'introduction et le détail */
.consultation__agenda { grid-column: 1 / -1; scroll-margin-top: calc(var(--entete) + 16px); padding-top: clamp(20px, 2.5vw, 32px); border-top: 1px solid var(--ligne); }
.consultation__agenda iframe { display: block; width: 100%; height: 760px; border: 0; }
.consultation__carte.est-ouverte .consultation__ouvrir { display: none; }
@media (max-width: 1023px) {
  .consultation__detail { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .consultation__ouvrir, .consultation__ouvrir .wp-block-button, .consultation__ouvrir .wp-block-button__link { width: 100%; }
  .consultation__agenda iframe { height: 1000px; }
}

/* ---------- WordPress : adaptations communes du balisage des blocs (phase 1, 16/09) ----------
   Tant que l'ancien thème est actif (sans theme.json), WordPress range les blocs d'un groupe dans un conteneur intérieur.
   Il est rendu transparent : les blocs se comportent comme les enfants directs de la maquette.
   Après la bascule, le thème à blocs supprime ce conteneur et cette règle ne s'applique plus. */
.wp-block-group > .wp-block-group__inner-container { display: contents; }
:where(main) :where(figure) { margin: 0; }