/* Fichier assemblé depuis 04_SITE/theme/styles/ par assembler.sh : ne pas modifier ici, modifier les sources puis relancer le script. */
@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); }


/* ---------- 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; }
/* ---------- Page bio : styles communs à la maquette et au thème (phase 2, 16/09) ----------
   Fond beige, carte blanche, photo en bulle qui déborde, cartes-liens. Code aligné sur celui des blocs WordPress :
   la classe d'un bloc se pose sur son enveloppe (figure, div), les boutons sont un bloc « Boutons »,
   une carte-lien est un groupe (vignette, titre avec lien, détail) dont le lien du titre couvre toute la carte.
   Ce qui ne doit pas agir dans l'éditeur (animations, lien étendu à la carte) est limité à .page-bio, classe du corps de la page. */
.page-bio { background: var(--beige); }
.bio { max-width: 440px; margin: 0 auto; padding: 24px 16px 8px; }
/* Colonne à la largeur de la carte : un texte plus long, modifié dans l'éditeur, ne peut pas élargir tout le contenu */
.bio__carte {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 180px; padding: 0 18px 24px;
  background: var(--blanc); border-radius: var(--rayon-m);
}
:where(.bio__carte, .is-root-container) :where(figure, p, h2) { margin: 0; padding: 0; }
:where(.bio__carte, .is-root-container) img { display: block; max-width: 100%; height: auto; }

/* Photo « Forme-bulle » de la bio actuelle : la forme est dans l'image, elle déborde du haut de la carte */
/* 280 px, ramenée à la largeur de la carte sur un très petit écran (264 px à 320 px de large) */
.bio__photo { justify-self: center; width: 280px; max-width: 100%; margin-top: -170px; }
.bio__photo img { width: 100%; height: auto; }

.bio__entete { display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: -4px; }
/* Le bloc image enveloppe le lien : en flex, pas de ligne de texte fantôme sous la signature */
.bio__signature { display: flex; justify-content: center; }
.bio__signature a { display: inline-flex; min-height: 44px; align-items: center; }
.bio__signature img { width: auto; height: 38px; }
/* Une ligne pour le texte actuel (282 px sur 307) ; deux lignes équilibrées s'il devient plus long */
.bio__metier { font-family: var(--texte); font-size: 11px; font-weight: 500; line-height: 1.65; letter-spacing: .12em; text-wrap: balance; text-transform: uppercase; color: var(--dore-clair); }
.bio__phrase { margin-top: 4px; font-family: var(--texte); font-size: 15.5px; line-height: 1.6; color: var(--gris); max-width: 30ch; text-wrap: balance; }

/* Bouton principal : bloc « Boutons » sur toute la largeur de la carte */
.bio__actions { display: block; }
.bio__actions .wp-block-button { display: block; width: 100%; }
.bio__actions .wp-block-button__link {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; padding: 0 24px; white-space: nowrap;
  font-family: var(--texte); font-size: 14.5px; font-weight: 500; line-height: 1.2; letter-spacing: .01em;
  color: var(--casse); background: var(--noir); text-decoration: none;
  border: 1px solid var(--noir); border-radius: var(--rayon-s); box-shadow: none;
  transition: background-color .35s var(--doux), border-color .35s var(--doux), transform .15s var(--doux);
}
.bio__actions .wp-block-button__link:hover { background: var(--noir-chaud); border-color: var(--noir-chaud); color: var(--casse); }
.bio__actions .wp-block-button__link:active { transform: scale(.985); }
.bio__principal .wp-block-button__link { min-height: 56px; font-size: 15px; }

.bio__rubrique { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--ligne); }
.bio__rubrique-titre { margin-bottom: 4px; text-align: center; font-family: var(--texte); font-size: 12px; font-weight: 500; line-height: 1.65; letter-spacing: .16em; text-transform: uppercase; color: var(--noir); }

/* Carte-lien : vignette, texte, flèche dessinée en CSS. Angle concentrique : rayon de la carte = rayon de la vignette (6) + vide (9) */
.bio__bouton {
  position: relative;
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  height: 68px; padding: 0 14px 0 8px;
  background: var(--casse); border: 1px solid var(--ligne); border-radius: 15px; color: var(--noir);
  transition: background-color .3s var(--doux), border-color .3s var(--doux), transform .15s var(--doux);
}
.bio__bouton::after { content: "→"; font-size: 18px; line-height: 1; color: var(--gris-clair); transition: transform .3s var(--doux); }
.bio__bouton:hover { background: var(--grege); border-color: var(--ligne-forte); }
.bio__bouton:hover::after { transform: translateX(3px); }
.bio__bouton:active { transform: scale(.985); }
.bio__vignette { width: 50px; height: 50px; border-radius: var(--rayon-s); overflow: hidden; }
/* Vignette du guide (23/09, demande de Mickaël) : la couverture du PDF recadrée en carré, qui remplit la vignette comme les deux autres.
   Avant : la mise en scène de l'ancien guide à 50 px de haut, recentrée sur le livre et le téléphone. */
.bio__vignette--guide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bio__vignette--monogramme { display: grid; place-items: center; background: #2a2826; border: 1px solid rgb(195 164 118 / .35); }
.bio__vignette--monogramme img { width: 26px; height: auto; }
/* Vignette du site : l'icône « MJ » (blanc cassé), cernée d'un filet pour se détacher du fond clair de la carte */
.bio__vignette--site { border: 1px solid var(--ligne); }
.bio__vignette--site img { width: 100%; height: 100%; object-fit: cover; }
.bio__bouton-texte { display: grid; gap: 3px; min-width: 0; }
.bio__bouton-titre { font-family: var(--titres); font-size: clamp(16px, 4.4vw, 18px); font-weight: 400; white-space: nowrap; line-height: 1.2; }
.bio__bouton-titre a { color: inherit; text-decoration: none; box-shadow: none; }
.bio__bouton-detail { font-family: var(--texte); font-size: 13px; line-height: 1.4; color: var(--gris-clair); }
/* Carte d'une enseigne partenaire (Kave Home, 17/09) : sans vignette, le texte prend sa place */
.bio__bouton--partenaire { grid-template-columns: minmax(0, 1fr) auto; padding-left: 18px; }
/* Le seul bloc sombre de la page : EXCLUSIV. */
.bio__bouton--sombre { background: var(--noir); border-color: var(--noir); color: #f4f3f0; }
.bio__bouton--sombre:hover { background: #2a2826; border-color: #2a2826; }
.bio__bouton--sombre .bio__bouton-detail, .bio__bouton--sombre::after { color: var(--dore); }

/* Sur la page seulement : le lien du titre couvre toute la carte, le contour de focus se pose sur la carte */
.page-bio .bio__bouton-titre a::after { content: ""; position: absolute; inset: 0; border-radius: 15px; }
.page-bio .bio__bouton-titre a:focus-visible { outline: none; }
.page-bio .bio__bouton:has(a:focus-visible) { outline: 2px solid var(--noir); outline-offset: 3px; }

.bio__pied { margin: 0; padding-block: 14px; text-align: center; font-size: 12.5px; color: var(--gris); }
.bio__pied a { color: var(--gris); display: inline-flex; min-height: 44px; align-items: center; }
@media (min-width: 520px) {
  .bio { padding-top: 48px; }
  .bio__carte { padding: 0 30px 30px; }
}
@media (prefers-reduced-motion: reduce) { .bio__bouton:hover::after { transform: none; } }
@media (max-width: 359px) { .bio__carte { padding-inline: 12px; } .bio__bouton { gap: 10px; padding-right: 10px; } .bio__bouton-titre { font-size: 15px; } }
/* Entrée de la page (demande de Mickaël, vitesse validée le 16/09) : à l'ouverture seulement, rien au défilement ;
   montée de 18 px, 1 s par élément, décalages jusqu'à 0,42 s (0,5 s pour la carte Kave Home, ajoutée le 17/09). Remplissage « backwards » : l'enfoncement des boutons reste actif.
   Limitée à .page-bio : jamais dans l'éditeur, où elle se rejouerait à chaque modification. */
@media (prefers-reduced-motion: no-preference) {
  .page-bio :is(.bio__photo, .bio__entete, .bio__principal, .bio__rubrique-titre, .bio__bouton) {
    animation: bio-entree 1s var(--courbe, cubic-bezier(.16, 1, .3, 1)) backwards;
  }
  .page-bio .bio__entete { animation-delay: .1s; }
  .page-bio .bio__principal { animation-delay: .18s; }
  .page-bio .bio__rubrique-titre { animation-delay: .24s; }
  .page-bio .bio__bouton { animation-delay: .3s; }
  .page-bio .bio__bouton--sombre { animation-delay: .36s; }
  .page-bio .bio__bouton--site { animation-delay: .42s; }
  .page-bio .bio__rubrique + .bio__rubrique .bio__rubrique-titre { animation-delay: .46s; }
  .page-bio .bio__bouton--partenaire { animation-delay: .5s; }
  @keyframes bio-entree { from { opacity: 0; transform: translateY(18px); } }
}