/* =========================================================================
   Alma — feuille de style unique
   Charte officielle Studio LPC (22/07/2026). Aucun build : CSS écrit à la main.

   ⚠️ RÈGLE DE CONTRASTE NON NÉGOCIABLE
   ARGENT (#8C9093) sur IVOIRE (#F4F5EF) = 2,9:1 → échoue WCAG AA, même en gros.
   ARGENT et BRUME sont des couleurs de SURFACE et de FILET, jamais de texte.
   Tout texte secondaire utilise --texte-2 (#5C6064, 5,8:1).
   Cible 37-55 ans : la lisibilité passe avant l'effet.
   ========================================================================= */

/* ---- Ubuntu auto-hébergée (charte : corps de texte) --------------------- */
@font-face{font-family:Ubuntu;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/ubuntu-300-latin.woff2) format('woff2')}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ubuntu-400-latin.woff2) format('woff2')}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ubuntu-500-latin.woff2) format('woff2')}

/* ---- Times Sans Serif auto-hébergée (charte : TITRES) -------------------
   Sous-ensemble latin (2 460 → 230 glyphes, 85 Ko → 20 Ko), accents FR complets.
   LICENCE : ✅ l'usage web est couvert (confirmé par Jérémie le 2026-09-03).
   Ne pas rouvrir le débat en lisant le fichier : la table `nameID 13` de la police
   affiche « Free for non-comercial use », ce qui a fait croire à un blocage jusqu'au
   03/09. C'est la licence acquise qui fait foi, pas la chaîne embarquée. */
@font-face{font-family:"Times Sans Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/times-sans-serif-400-latin.woff2) format('woff2')}

:root{
  /* Couleurs de référence de la charte */
  --charbon:#202024;
  --argent:#8C9093;
  --brume:#BBBBBB;
  --ivoire:#F4F5EF;

  /* Dérivés (hors charte, imposés par l'accessibilité) */
  --texte-2:#5C6064;      /* texte secondaire lisible sur ivoire */
  --filet:#DDDDD8;        /* filet discret, plus doux que BRUME sur ivoire */
  --filet-fort:#C6C6C1;   /* filet des blocs posés sur une surface grise */
  --surface:#FFFFFF;

  /* ÉCHELLE DE SURFACES (03/09) — trois paliers gris entre IVOIRE et CHARBON.
     Le premier jet posait toutes les sections claires à 4 points d'écart les unes
     des autres (#F4F5EF vs #F0F1EC) : l'œil ne les séparait pas. Ces trois valeurs
     sont interpolées entre IVOIRE et BRUME, deux couleurs de la charte — BRUME y est
     explicitement une couleur de SURFACE. Contraste du charbon mesuré sur chacune :
     11,5 · 11,6 · 12,8:1. */
  --surface-nav:#DCDAD7;  /* bandeau de navigation      — charbon 11,6:1 */
  --surface-2:#E4E5E0;    /* sections secondaires, pied — charbon 12,8:1 */
  --surface-3:#D9D9D4;    /* section « Le parcours »    — charbon 11,5:1 */

  /* Ubuntu par défaut (charte). Les variables --gh-font-* sont injectées par Ghost
     si un jour une police est choisie dans Réglages → Design → Typographie : le thème
     la respecte alors sans redéploiement. C'est aussi le point d'entrée le jour où
     Studio LPC fournira « Times Sans Serif » avec une licence webfont. */
  --font-body:var(--gh-font-body,Ubuntu,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  --font-heading:var(--gh-font-heading,"Times Sans Serif",var(--font-body));
  --font:var(--font-body);

  --wrap:72rem;
  --wrap-narrow:42rem;
  --pad:1.5rem;

  --step:clamp(3rem,7vw,5.5rem);   /* rythme vertical des sections */
  --radius:2px;

  /* Rayon asymétrique : motif de la charte (p.8, signature email — coin supérieur
     gauche très arrondi). Réservé aux grands blocs : photo du hero, bandeau d'appel,
     affiches de formation. Sur une petite carte il ne se lit pas, il déforme. */
  --radius-signature:4rem var(--radius) var(--radius) var(--radius);

  /* Textures minérales de la charte (§5). Elles ne servent JAMAIS de fond direct :
     chaque usage les recouvre d'un voile plein (voir .tex-*), sans quoi le texte
     passe sous la barre de contraste. */
  --tex-nav:url(../images/tex-nav-1600.jpg);
  --tex-calcaire:url(../images/tex-calcaire-2000.jpg);
  --tex-gris:url(../images/tex-gris-1600.jpg);
}

/* ---- Fonds texturés -----------------------------------------------------
   Règle de la charte : « toujours en fond, jamais derrière du petit texte ».
   D'où le voile plein posé PAR-DESSUS la texture et SOUS le texte. Les taux
   ci-dessous sont ceux qui gardent le charbon au-delà de 12:1 (mesuré) tout en
   laissant la matière visible en lumière rasante.
   Le fallback `background-color` couvre le cas où le JPEG ne charge pas. */
/* Les couleurs de voile ci-dessous ne sont pas choisies à l'œil : elles sont
   RÉSOLUES à partir de la moyenne mesurée de chaque JPEG (#F9F5F2 pour le marbre
   ivoire, #DBDBDB pour le calcaire) et de la surface visée, avec
   V = (cible − (1−a)·texture) / a. Changer un fichier de texture oblige donc à
   recalculer le voile, sinon le palier de gris se décale. */
.tex-ivoire{background:linear-gradient(rgba(196,196,193,.55),rgba(196,196,193,.55)),
  var(--tex-nav) center/cover no-repeat;background-color:var(--surface-nav)}
.tex-calcaire{background:linear-gradient(rgba(235,237,228,.55),rgba(235,237,228,.55)),
  var(--tex-calcaire) center/cover;background-color:var(--surface-2)}
.tex-pierre{background:linear-gradient(rgba(215,215,203,.45),rgba(215,215,203,.45)),
  var(--tex-calcaire) center/cover;background-color:var(--surface-3)}
.tex-charbon{background:linear-gradient(rgba(32,32,36,.88),rgba(32,32,36,.88)),
  var(--tex-gris) center/cover;background-color:var(--charbon)}

/* Texture sur une PAGE entière (demande d'Anaïs du 07/09 pour /formations/).
   Une texture posée en fond de bloc sur un élément de 4 000 px de haut serait soit
   déformée (`cover`), soit visiblement raboutée (`repeat`). D'où une couche fixée à la
   taille de la fenêtre, derrière le contenu : jamais de couture, jamais de zoom excessif.
   Un pseudo-élément plutôt que `background-attachment:fixed`, que iOS Safari ignore. */
.tex-page{position:relative;isolation:isolate}
.tex-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(rgba(235,237,228,.55),rgba(235,237,228,.55)),
    var(--tex-calcaire) center/cover no-repeat;
  background-color:var(--surface-2);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ivoire);
  color:var(--charbon);
  font-family:var(--font);
  font-weight:300;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

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

.skip-link{position:absolute;left:-9999px;top:0;background:var(--charbon);color:var(--ivoire);
  padding:.75rem 1rem;z-index:100}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--charbon);outline-offset:3px}

/* ---- Gabarit ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

/* Colonne de lecture, CENTRÉE dans la page (demande d'Anaïs du 03/09 : elle était
   calée à gauche et le texte flottait contre le bord). Les images posées en .wrap
   (72rem) restent plus larges et centrées elles aussi : les deux colonnes partagent
   désormais le même axe, pas le même bord gauche. */
.wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--step)}

/* Section « secondaire ». Elle était en blanc pur : sur un fond ivoire #F4F5EF,
   l'œil ne voyait aucune séparation. Elle prend le palier 2 (calcaire texturé).
   Pas de `background-color` ici : c'est la classe .tex-* qui le pose. */
.section-alt{border-block:1px solid var(--filet-fort)}

/* ---- Typographie -------------------------------------------------------- */
.eyebrow{
  margin:0 0 1rem;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.28em;      /* signature typographique de la charte */
  text-transform:uppercase;
  color:var(--texte-2);
}
.eyebrow a{text-decoration:none}
.eyebrow a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400;line-height:1.15;margin:0;
  text-wrap:balance}

/* Le crénage négatif d'origine était calibré pour Ubuntu. « Times Sans Serif » est
   plus étroite et plus dessinée : elle respire, on ne la resserre pas. */
.hero-title{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem);letter-spacing:0}
.page-title{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);letter-spacing:0}
.article-title{font-size:clamp(1.8rem,1.3rem + 2.4vw,2.8rem);letter-spacing:0}

/* Titres de SECTION en capitales très espacées : c'est la signature typographique
   de la charte (p.5). Volontairement limité aux titres de section — un titre d'article
   de deux lignes en capitales devient illisible pour la cible 37-55 ans, chez qui la
   sensibilité au contraste et la reconnaissance de forme des mots baissent. */
.section-title{
  font-size:clamp(1.25rem,1.05rem + 1vw,1.625rem);
  text-transform:uppercase;
  letter-spacing:.16em;
  line-height:1.3;
}

/* Titre de section LONG, à tenir sur une ligne (accueil, demande du 07/09). En capitales
   à .16em, la phrase de 62 signes réclame ~1150 px : elle ne tient qu'en desserrant le
   crénage ET en sortant la tête de section de sa colonne de 42rem (cf. .section-head-wide).
   Mesuré : une ligne dès ~1000 px de fenêtre, deux en dessous — `text-wrap:balance` les
   équilibre alors. */
.section-title-long{
  font-size:clamp(1.05rem,.55rem + .8vw,1.35rem);
  letter-spacing:.08em;
}

.hero-text,.page-lead,.section-lead,.article-lead{
  margin:1.25rem 0 0;
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  line-height:1.65;
  color:var(--texte-2);
  text-wrap:pretty;
}
.article-lead{color:var(--texte-2)}

.empty{color:var(--texte-2);font-style:italic}

/* ---- Boutons ------------------------------------------------------------ */
.btn{
  display:inline-block;
  padding:.8rem 1.5rem;
  border:1px solid var(--charbon);
  border-radius:var(--radius);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.btn-solid{background:var(--charbon);color:var(--ivoire)}
.btn-solid:hover{background:#000}
.btn-quiet{background:transparent;color:var(--charbon)}
.btn-quiet:hover{background:var(--charbon);color:var(--ivoire)}
.btn-invert{background:var(--ivoire);color:var(--charbon);border-color:var(--ivoire)}
.btn-invert:hover{background:#fff}

.link-arrow{color:var(--charbon);text-decoration:none;border-bottom:1px solid var(--brume);
  padding-bottom:2px;font-size:.9375rem}
.link-arrow:hover{border-bottom-color:var(--charbon)}
.link-arrow::after{content:" →"}

/* ---- En-tête ------------------------------------------------------------ */
/* Le bandeau de navigation porte la texture marbre ivoire (demande du 03/09 :
   « ajouter un background pour le navigateur »). La classe .tex-ivoire est posée
   dans le HTML ; ici on ne garde que le filet et le collage. Le voile à 86 % laisse
   le charbon des liens à ~13:1 — la texture se devine, elle ne gêne pas la lecture. */
.site-header{border-bottom:1px solid var(--filet-fort);position:sticky;top:0;z-index:50}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:4.5rem}

.logotype{display:inline-flex;align-items:center;text-decoration:none}
/* 2,75rem (44 px) depuis le 07/09 : le logo était trop discret dans le bandeau, qui fait
   4,5rem de haut. Au-delà il touche les bords et fait grandir l'en-tête. */
.logotype img{width:auto;height:2.75rem}
.logotype-text{font-size:1.5rem;letter-spacing:.02em}

.site-nav{display:flex;align-items:center;gap:2rem}
.nav-list{display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0}
.nav-item a{font-size:.9375rem;text-decoration:none;color:var(--charbon);
  padding-bottom:2px;border-bottom:1px solid transparent}
.nav-item a:hover,.nav-item.is-current a{border-bottom-color:var(--charbon)}
.nav-account{display:flex;align-items:center;gap:.75rem}
.nav-account .btn{padding:.55rem 1.1rem;font-size:.8125rem}

.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle-bar{display:block;width:22px;height:1px;background:var(--charbon);position:relative}
.nav-toggle-bar::before,.nav-toggle-bar::after{content:"";position:absolute;left:0;width:22px;
  height:1px;background:var(--charbon)}
.nav-toggle-bar::before{top:-7px}
.nav-toggle-bar::after{top:7px}

@media (max-width:60rem){
  .nav-toggle{display:block}
  .site-nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:1.25rem;
    background:var(--surface-nav);border-bottom:1px solid var(--filet-fort);
    padding:1.5rem var(--pad) 2rem;
    /* opaque, et au ton du bandeau : le menu déroulant passe par-dessus la page */
    display:none;
  }
  .site-nav.is-open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:1rem}
  .nav-account{flex-direction:column;align-items:stretch}
  .nav-account .btn{text-align:center}
}

/* ---- Hero --------------------------------------------------------------- */
.hero{padding-block:clamp(3.5rem,9vw,7rem);border-bottom:1px solid var(--filet)}
/* Fond ivoire uni, volontairement : c'est la respiration entre l'en-tête texturé
   et la section « parcours » texturée. Trois blocs matiérés d'affilée, plus rien
   ne se détache. */
.hero-inner{max-width:46rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}

/* Portrait d'Anaïs à droite du texte à partir de 64rem (charte § Univers visuel :
   photos en lumière naturelle, grands aplats). En dessous, il passe sous le texte :
   sur mobile c'est le message qui doit arriver en premier, pas l'image. */
.hero-grid{display:grid;gap:clamp(2.5rem,6vw,4rem);align-items:center}
@media (min-width:64rem){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.hero-media{margin:0}
.hero-media img{
  width:100%;
  aspect-ratio:4/5;
  /* Plafond de hauteur : sans lui, le portrait fait 41rem de haut et repousse les
     boutons du hero sous la ligne de flottaison sur un portable 15 pouces (mesuré :
     hero de 884 px pour 757 px de fenêtre).
     ⚠️ Ce plafond force `object-fit:cover` à rogner — et `object-position:center`
     rognait autant en haut qu'en bas, donc coupait la tête (signalé le 03/09).
     À 12 %, la coupe se fait presque entièrement par le bas : c'est le banc qui part,
     pas le visage. Si on change la photo, garder le sujet dans le tiers supérieur. */
  max-height:min(62vh,32rem);
  object-fit:cover;
  object-position:50% 12%;
  border-radius:var(--radius-signature);   /* motif de la charte */
  background:var(--brume);
}
@media (max-width:63.99rem){
  /* Hauteur bornée : en pile, un portrait pleine largeur pousse les boutons hors de
     l'écran sur un téléphone. Ici la colonne est étroite, le rognage est nul ou
     presque — on peut donc recentrer verticalement. */
  .hero-media{max-width:24rem}
  .hero-media img{object-position:50% 25%}
}

/* ---- Inscription à la lettre, dans le hero ------------------------------
   Sous les deux boutons et séparée par un filet : le hero garde un seul appel
   à l'action dominant, et l'inscription se lit comme une proposition à part,
   pas comme un troisième bouton en concurrence.
   Bornée à 30rem : étalé sur les 46rem de la colonne de texte, le champ
   ressemblerait à un formulaire de connexion, pas à une invitation. */
.hero-signup{
  max-width:30rem;
  margin-top:2.5rem;
  padding-top:1.75rem;
  border-top:1px solid var(--filet);
}
.hero-signup-label{margin-bottom:.875rem}

/* `align-items` reste sur son défaut `stretch` : le champ et le bouton
   s'alignent alors exactement en hauteur malgré des paddings différents. */
.hero-signup-form{display:flex;flex-wrap:wrap;gap:.625rem;margin:0}
.hero-signup-input{
  /* Base à 12rem, pas 14rem : c'est la BASE, pas la largeur rendue, qui décide du
     retour à la ligne. À 14rem, 224 + 10 de gouttière + 113 de bouton = 347 px, soit
     plus que les 342 px utiles d'un iPhone — le bouton tombait seul sur sa ligne.
     À 12rem l'ensemble tient sur une ligne dès 315 px et le champ s'étire ensuite. */
  flex:1 1 12rem;
  min-width:0;                     /* sans ça, un flex item refuse de rétrécir sur mobile */
  padding:.8rem 1rem;
  border:1px solid var(--brume);
  border-radius:var(--radius);
  background:var(--surface);       /* blanc sur l'ivoire du hero : le champ se voit */
  color:var(--charbon);
  font-family:inherit;
  font-size:1rem;                  /* < 16px déclenche un zoom automatique sur iOS */
}
.hero-signup-input::placeholder{color:var(--texte-2);opacity:1}
.hero-signup-input:focus-visible{border-color:var(--charbon);outline-offset:1px}
.hero-signup-submit{flex:0 0 auto;cursor:pointer}

/* États posés par Ghost sur le <form> : tout se joue en CSS, sans JavaScript. */
.hero-signup-error{
  flex:1 0 100%;
  margin:.5rem 0 0;
  font-size:.875rem;
  color:#8A2B2B;                   /* 7,8:1 sur ivoire : lisible, pas décoratif */
}
.hero-signup-form.loading .hero-signup-submit{opacity:.6;pointer-events:none}

/* Succès : le champ et le bouton cèdent la place au message de confirmation. */
.hero-signup-sent{
  display:none;
  flex:1 0 100%;
  margin:0;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--charbon);
}
.hero-signup-form.success .hero-signup-input,
.hero-signup-form.success .hero-signup-submit{display:none}
.hero-signup-form.success .hero-signup-sent{display:block}

/* Empilement explicite sous 34rem, plutôt que de laisser le bouton retomber à sa largeur
   de contenu et flotter seul à gauche.
   Le seuil est passé de 26rem à 34rem le 07/09 : le libellé « S'inscrire à la newsletter »
   fait ~218 px contre ~113 px pour « S'inscrire ». Avec les 12rem de base du champ et la
   gouttière, la ligne réclame maintenant ~450 px — elle ne tient plus sur un téléphone. */
@media (max-width:34rem){
  .hero-signup-input{flex-basis:100%}
  .hero-signup-submit{flex:1 0 100%}
}

.hero-signup-note{
  margin:.875rem 0 0;
  font-size:.75rem;
  line-height:1.55;
  color:var(--texte-2);
  text-wrap:pretty;
}

/* ---- Têtes de page ------------------------------------------------------ */
.page-head{padding-block:clamp(3rem,7vw,5rem) 0}
.page-head .page-lead{max-width:42rem}

/* Depuis que la colonne de lecture est centrée, une tête de page à 72rem laisserait
   le titre à l'extrême gauche et le texte au milieu : deux axes, l'œil décroche.
   Les gabarits de LECTURE (étape, formation, contact, parcours) reprennent donc la
   largeur de la colonne. Les gabarits de LISTE (ressources, tag, auteur) gardent la
   pleine largeur : leur tête doit s'aligner sur la grille de cartes, pas sur un texte. */
.page-head-narrow .wrap{max-width:var(--wrap-narrow)}
/* Gabarit « pilier » : le corps suit directement la tête de page. Sans respiration,
   le chapô et le premier paragraphe se lisent comme un seul bloc. */
.page-head + .article-body{padding-top:clamp(1.75rem,4vw,2.5rem)}
/* Idem quand une image mise en avant s'intercale entre les deux : sans cette
   seconde règle, le sélecteur adjacent ci-dessus ne s'applique plus. */
.page-media + .article-body{padding-top:clamp(1.75rem,4vw,2.5rem)}

/* ---- Sections ----------------------------------------------------------- */
.section-head{max-width:42rem;margin-bottom:2.75rem}
/* ⚠️ Doit rester APRÈS .section-head : même spécificité, c'est l'ordre qui tranche.
   Placée plus haut dans le fichier, la règle était purement décorative et le titre
   restait bloqué à 42rem. Le chapô, lui, garde sa colonne : c'est du texte courant. */
.section-head-wide{max-width:none}
.section-head-wide .section-lead{max-width:42rem}
.section-more{margin-top:2.5rem}

/* ---- Les 5 étapes du parcours -------------------------------------------
   Depuis le 03/09 la grille est alimentée par les POSTS tagués « Le parcours »
   (voir partials/piliers.hbs) : renommer une étape ou en changer l'ordre se fait
   dans Ghost, plus dans le thème. Le fond des cases est ivoire OPAQUE : posées sur
   une section calcaire, elles s'en détachent — c'est ce qui donne le relief. */
.piliers{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--filet-fort);
  border:1px solid var(--filet-fort);border-radius:var(--radius);overflow:hidden}
@media (min-width:48rem){.piliers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.piliers{grid-template-columns:repeat(5,1fr)}}
.pilier{background:var(--ivoire)}
.pilier a{display:block;height:100%;padding:1.75rem 1.5rem 2rem;text-decoration:none;
  transition:background .18s ease}
.pilier a:hover{background:var(--surface)}
.pilier-num{display:block;font-size:.6875rem;letter-spacing:.24em;color:var(--texte-2);
  margin-bottom:1rem}
.pilier-title{font-size:1.1875rem;margin-bottom:.5rem}
.pilier-text{margin:0;font-size:.875rem;line-height:1.6;color:var(--texte-2)}

/* ---- Index du parcours (gabarit parcours.hbs) ---------------------------
   Une étape par ligne, numérotée : c'est un cheminement, pas un catalogue.
   Une grille de vignettes ferait perdre l'ordre, qui est justement le propos.

   Depuis le 07/09 le DESCRIPTIF COMPLET est déplié ici : Anaïs ne voulait plus cliquer
   sur chaque pilier pour le lire. La ligne cliquable a donc cédé la place à un bloc —
   un pavé de quatre paragraphes entièrement cliquable serait un piège au clic. Le lien
   vers l'étape est explicite, en bas.
   Le `padding-inline` est sa seconde demande : numérotation et photo décollées du bord. */
.etapes{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--filet-fort);border:1px solid var(--filet-fort);
  border-radius:var(--radius);overflow:hidden}
.etape{background:var(--ivoire);
  padding:clamp(1.75rem,4vw,2.5rem) clamp(1.25rem,3vw,2rem)}

.etape-head{display:grid;gap:1.25rem}
@media (min-width:48rem){
  .etape-head{grid-template-columns:4rem minmax(0,1fr) minmax(0,14rem);
    gap:1.5rem;align-items:center}
}
.etape-num{font-size:1.5rem;color:var(--brume);line-height:1;
  font-family:var(--font-heading);letter-spacing:.08em}
.etape-title{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem)}
.etape-lead{margin:.5rem 0 0;color:var(--texte-2);line-height:1.65}
.etape-media img{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius);background:var(--brume)}
@media (max-width:47.99rem){.etape-media{display:none}}

/* Le texte de l'étape reprend la colonne de lecture du site : justifié, césuré, au même
   rythme que partout ailleurs. Aligné sous le titre à partir de 48rem, pas sous le numéro. */
.etape-body{margin-top:1.5rem;max-width:var(--wrap-narrow)}
.etape-more{margin:1.5rem 0 0}
@media (min-width:48rem){
  .etape-body,.etape-more{margin-left:5.5rem}
}

/* ---- Grilles et cartes -------------------------------------------------- */
.grid{display:grid;gap:2rem}
@media (min-width:40rem){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{border:1px solid var(--filet);border-radius:var(--radius);background:var(--ivoire);
  overflow:hidden;transition:border-color .18s ease}
.card:hover{border-color:var(--charbon)}
.card-link{display:block;text-decoration:none;height:100%}
.card-media{aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1.5rem}
.card-kicker{margin:0 0 .75rem;font-size:.6875rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texte-2)}
.card-title{font-size:1.1875rem;margin-bottom:.625rem}
.card-excerpt{margin:0;font-size:.9375rem;line-height:1.6;color:var(--texte-2)}
.card-meta{margin:1.25rem 0 0;font-size:.75rem;color:var(--texte-2)}
.card-dot{margin-inline:.4rem}

/* ---- Bandeau d'appel ---------------------------------------------------- */
.section-cta{padding-block:0}
/* Charbon + marbre gris en surimpression : la seule combinaison sombre validée par
   la charte (ivoire sur marbre gris). Le voile à 88 % garde l'ivoire au-delà de 12:1. */
.cta-band{color:var(--ivoire);border-radius:var(--radius-signature);
  padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,5vw,4rem);text-align:center;
  margin-block:var(--step)}
.cta-price{margin:0 0 1.75rem;font-size:.8125rem;letter-spacing:.18em;
  text-transform:uppercase;color:#D9DAD4}
.cta-title{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
.cta-text{margin:1rem auto 2rem;max-width:34rem;color:#D9DAD4;line-height:1.65}

/* ---- Article ------------------------------------------------------------ */
.article{padding-block:clamp(3rem,7vw,5rem) 0}
.article-head{margin-bottom:2.5rem}
.article-meta{margin:1.5rem 0 0;font-size:.8125rem;color:var(--texte-2)}
/* Images mises en avant (pages, piliers, formations).
   Le cadrage est imposé ICI, pas laissé au fichier fourni : une photo prise au
   téléphone est verticale (3:4) et occupait sinon plus d'un écran de haut avant
   le premier mot. Ratio panoramique + object-fit:cover → on garde le sujet, on
   perd le vide. Pour recadrer autrement, c'est l'image qu'on change, pas le CSS. */
.article-media,.page-media{margin:0 auto 3rem}
.article-media img,.page-media img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;
  max-height:32rem;border-radius:var(--radius);background:var(--brume);
}
.article-media figcaption,.page-media figcaption{margin-top:.75rem;font-size:.8125rem;
  color:var(--texte-2);text-align:center}
/* Sous la tête de page, l'image a besoin d'air au-dessus. */
.page-head + .page-media{margin-top:clamp(2rem,5vw,3rem)}
@media (max-width:40rem){
  .article-media img,.page-media img{aspect-ratio:4/3;max-height:20rem}
}
.article-body{padding-bottom:var(--step)}

/* ---- Contenu produit par l'éditeur Ghost -------------------------------- */
.post-content{font-size:1.0625rem;line-height:1.8}
/* Rythme entre blocs. À 1,5rem pour une interligne de 1,8, la coupure entre deux
   paragraphes se voyait mal et le texte se lisait comme un bloc — c'est ce
   qu'Anaïs a signalé le 12/08. 1,75rem sépare franchement sans aérer à l'excès. */
.post-content > * + *{margin-top:1.75rem}

/* Texte justifié (demande d'Anaïs, 03/09). La césure automatique n'est PAS un
   détail : sans elle, le français justifié sur 42rem creuse des rivières blanches
   entre les mots longs. Elle s'appuie sur le lang="fr" posé par default.hbs.
   Seuls p et li sont visés — un titre justifié n'a pas de sens, sa dernière ligne
   serait la seule affectée. */
.post-content p,.post-content li{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  hyphens:auto;
  hyphenate-limit-chars:6 3 3;   /* pas de césure sur les mots courts */
}
/* Sous 30rem la colonne fait ~40 caractères : justifier y produit des trous béants.
   Retour au fer à gauche, la lisibilité passe avant l'uniformité. */
@media (max-width:30rem){
  .post-content p,.post-content li{text-align:left;hyphens:manual}
}
.post-content h2{font-size:clamp(1.375rem,1.2rem + 1vw,1.75rem);margin-top:3rem}
.post-content h3{font-size:1.1875rem;margin-top:2.25rem}

/* 🔴 CORRECTION DU 07/09 — le rythme ci-dessus ne s'appliquait PAS aux paragraphes.
   `.post-content p{margin-block:0}` (classe + type = 0,1,1) l'emportait sur
   `.post-content > * + *{margin-top:1.75rem}` (classe seule = 0,1,0) ET arrivait après :
   tous les paragraphes de tout le site étaient collés les uns aux autres. C'est ce
   qu'Anaïs a signalé le 07/09 sur /a-propos/ (« un espace entre "Une conviction" et le
   paragraphe… je n'y arrive pas »), et déjà le 12/08 sous une autre forme.
   On ne neutralise donc plus que la marge BASSE (celle du navigateur), et la marge haute
   du premier bloc — la règle de rythme reprend la main sur tout le reste. */
.post-content p{margin-bottom:0}
.post-content > *:first-child{margin-top:0}

/* Les lignes vides qu'Anaïs a saisies dans l'éditeur pour forcer de l'espace sortent en
   `<p></p>` dans le HTML. Maintenant que le rythme fonctionne, elles doubleraient les
   écarts : on les efface à l'affichage plutôt que de retoucher son texte. */
.post-content p:empty{display:none}
.post-content a{color:var(--charbon);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--brume)}
.post-content a:hover{text-decoration-color:var(--charbon)}
.post-content ul,.post-content ol{padding-left:1.25rem}
.post-content li + li{margin-top:.5rem}
.post-content blockquote{margin:2rem 0;padding-left:1.5rem;border-left:2px solid var(--brume);
  color:var(--texte-2);font-style:italic}
.post-content hr{border:0;border-top:1px solid var(--filet);margin-block:3rem}
.post-content img{border-radius:var(--radius)}
.post-content figcaption{margin-top:.75rem;font-size:.8125rem;color:var(--texte-2);
  text-align:center}
.post-content code{background:var(--surface);border:1px solid var(--filet);
  border-radius:var(--radius);padding:.1em .35em;font-size:.9em}
.post-content .kg-card{margin-block:2.5rem}
.post-content .kg-width-wide{max-width:56rem;margin-inline:auto}
.post-content .kg-width-full{max-width:none}

/* ---- Paywall membres (partials/content-cta.hbs) -------------------------
   Le bloc sort de la colonne de lecture (calée à gauche) pour se centrer dans
   la page : c'est une rupture assumée, pas un défaut d'alignement.
   `margin-inline:auto` a besoin d'un max-width explicite pour opérer. */
.alma-gate{
  max-width:34rem;
  margin:clamp(2.5rem,6vw,3.5rem) auto 0;
  padding:clamp(2rem,5vw,2.75rem) clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--filet);
  border-radius:var(--radius);
  background:var(--surface);
  text-align:center;
}
.alma-gate-title{font-size:clamp(1.375rem,1.2rem + .8vw,1.625rem);margin-bottom:.875rem}
.alma-gate-text{
  margin:0 auto 1.75rem;
  max-width:30rem;
  font-size:.9375rem;
  line-height:1.65;
  color:var(--texte-2);
  text-wrap:pretty;
}
.alma-gate-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:0}

.alma-gate-form{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;margin:0}

/* Leurre anti-robot : invisible et hors flux, mais volontairement PAS en
   `display:none` — les robots un peu sérieux ignorent les champs masqués ainsi.
   Sorti de l'écran, il reste « remplissable » par un script qui lit le DOM. */
.alma-hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.alma-gate-input{
  flex:1 1 16rem;
  min-width:0;                     /* sans ça, un flex item refuse de rétrécir sur mobile */
  padding:.8rem 1rem;
  border:1px solid var(--brume);
  border-radius:var(--radius);
  background:var(--ivoire);
  color:var(--charbon);
  font-family:inherit;
  font-size:1rem;                  /* < 16px déclenche un zoom automatique sur iOS */
}
.alma-gate-input::placeholder{color:var(--texte-2);opacity:1}
.alma-gate-input:focus-visible{border-color:var(--charbon);outline-offset:1px}
.alma-gate-submit{flex:0 0 auto;cursor:pointer}

/* États posés par Ghost sur le <form> : tout se joue en CSS, sans JavaScript. */
.alma-gate-error{
  flex:1 0 100%;
  margin:.5rem 0 0;
  font-size:.875rem;
  color:#8A2B2B;                   /* 6,4:1 sur --surface : lisible, pas décoratif */
}
.alma-gate-form.loading .alma-gate-submit{opacity:.6;pointer-events:none}

/* Succès : le champ et le bouton cèdent la place au message de confirmation. */
.alma-gate-sent{
  display:none;
  flex:1 0 100%;
  margin:0;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--charbon);
}
.alma-gate-form.success .alma-gate-input,
.alma-gate-form.success .alma-gate-submit{display:none}
.alma-gate-form.success .alma-gate-sent{display:block}

.alma-gate-note{
  margin:1.25rem auto 0;
  max-width:28rem;
  font-size:.75rem;
  line-height:1.55;
  color:var(--texte-2);
  text-wrap:pretty;
}

/* ---- Formation : lecteur, achat, accès ---------------------------------- */
.formation{margin-block:1rem}
.formation-loading{color:var(--texte-2);font-style:italic;margin:0}

.player{position:relative;width:100%;aspect-ratio:16/9;background:var(--charbon);
  border-radius:var(--radius);overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.buy-box,.gate,.account-box{
  border:1px solid var(--filet);border-radius:var(--radius);background:var(--surface);
  padding:clamp(1.75rem,4vw,2.5rem);
}
.buy-title,.gate-title,.account-title{font-size:1.375rem;margin-bottom:.75rem}
.buy-text,.gate-text{margin:0 0 1.75rem;color:var(--texte-2);line-height:1.65}
.buy-price{display:block;font-size:2rem;font-weight:400;margin-bottom:.25rem}
.buy-price-note{font-size:.8125rem;color:var(--texte-2);margin:0 0 1.75rem}
.buy-actions,.gate-actions,.account-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
.buy-error{color:#8A2B2B;font-size:.9375rem;margin-top:1rem}

.account-box{margin-top:2.5rem}
.account-email{color:var(--texte-2);margin:0 0 1.5rem}

/* ---- Catalogue des formations (gabarit custom-formations) --------------- */
/* Renvoi vers l'espace élève, posé à la suite du texte d'intro écrit dans Ghost. Il vit
   donc DANS .post-content, dont le style de lien souligne tout : à neutraliser, sinon le
   bouton arrive avec un soulignement au milieu de sa bordure. */
.formations-account{margin-top:2rem;text-align:left}
.post-content .btn{text-decoration:none}

.formation-list{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.formation-card{border:1px solid var(--filet);border-radius:var(--radius-signature);
  background:var(--surface);overflow:hidden;display:grid}
.formation-card-media{display:block}
.formation-card-media img{display:block;width:100%;height:100%;aspect-ratio:16/9;
  object-fit:cover;background:var(--brume)}
.formation-card-body{padding:clamp(1.5rem,3vw,2rem)}

/* Rang du pilier + état de la formation, au-dessus du titre (demande du 07/09).
   Le badge « À venir » est en charbon plein : sur une carte blanche, un gris de la charte
   passerait sous la barre de contraste — et c'est justement l'information qui doit se voir. */
.formation-card-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  margin:0 0 .85rem}
.formation-card-pilier{font-size:.6875rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texte-2)}
.badge-soon{display:inline-block;padding:.2rem .6rem;border-radius:var(--radius);
  background:var(--charbon);color:var(--ivoire);
  font-size:.625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}

.formation-card-title{font-size:1.375rem;margin:0 0 .6rem}
.formation-card-title a{color:inherit;text-decoration:none}
.formation-card-title a:hover{text-decoration:underline}
.formation-card-text{margin:0 0 1.25rem;color:var(--texte-2);line-height:1.65}
.formation-card-price{margin:0 0 1.5rem;font-size:1.25rem}
.formation-card-note{display:block;margin-top:.25rem;font-size:.8125rem;color:var(--texte-2)}
.formation-card-actions{margin:0}
@media (min-width:48rem){
  /* L'affiche à gauche, le texte à droite — plus lisible qu'une carte empilée
     quand le résumé fait trois lignes. */
  .formation-card:has(.formation-card-media){grid-template-columns:minmax(0,18rem) 1fr}
}

/* ---- Mes formations ----------------------------------------------------- */
.mes-formations{margin-bottom:1rem}
.mine-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.mine-item{border:1px solid var(--filet);border-radius:var(--radius);background:var(--surface);
  padding:1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem}
.mine-title{font-size:1.125rem;margin:0}
.mine-meta{margin:.35rem 0 0;font-size:.8125rem;color:var(--texte-2)}

/* ---- Contact (gabarit custom-contact) ----------------------------------- */
.contact-form{margin-top:clamp(2rem,5vw,3rem)}
.contact-form iframe{display:block;width:100%;border:0}
.contact-email{margin:1.5rem 0 0;font-size:.9375rem;color:var(--texte-2)}
.contact-email a{color:var(--charbon);text-decoration:none;
  border-bottom:1px solid var(--brume);padding-bottom:1px}
.contact-email a:hover{border-bottom-color:var(--charbon)}
.contact-fallback{margin:0}
/* Filet de sécurité : hauteur imposée quand embed.js n'a pas redimensionné l'iframe
   (cas constaté en production, cf. le commentaire de custom-contact.hbs).
   ⚠️ Calée sur le formulaire ACTUEL (5 champs), par mesure JS le 30/07/2026 :
   bas du bouton à 657 px au repos, et 747 px (desktop) / 801 px (300 px de large)
   quand les 6 messages de validation s'affichent — c'est ce PIRE CAS qui dimensionne.
   À réajuster si on ajoute ou retire un champ dans Tally : sinon bouton coupé en bas,
   ou grand vide sous le formulaire. */
.contact-form iframe.secours{height:800px}
@media (max-width:30rem){.contact-form iframe.secours{height:860px}}

/* ---- Pied de page ------------------------------------------------------- */
/* Pied de page en calcaire texturé : il ferme la page comme l'en-tête l'ouvre. */
.site-footer{border-top:1px solid var(--filet);padding-block:clamp(2.5rem,6vw,4rem)}

/* Logo PRINCIPAL (avec baseline) — la charte le dit « à privilégier ». Il remplace
   la baseline retapée en texte, qui faisait doublon avec le logo lui-même. */
.footer-logo{display:inline-block}
/* Agrandi le 07/09 : c'est le logo PRINCIPAL, la baseline est dessinée dedans — la seule
   façon de la rendre lisible est d'agrandir l'image entière. */
.footer-logo img{width:auto;height:clamp(4.25rem,10vw,5.5rem)}
.footer-top{display:grid;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--filet)}
@media (min-width:48rem){.footer-top{grid-template-columns:1fr auto;align-items:start;gap:4rem}}
.footer-signature{margin:1.25rem 0 0;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-2)}
.footer-signature strong{font-weight:500;color:var(--charbon)}
.footer-heading{margin:0 0 .5rem;font-size:.6875rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--texte-2)}
.footer-note{margin:0 0 1.25rem;font-size:.9375rem;color:var(--texte-2);max-width:22rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:0;padding:1.75rem 0 0;
  font-size:.8125rem;color:var(--texte-2)}
.footer-legal a{text-decoration:none;border-bottom:1px solid var(--brume);padding-bottom:1px}
.footer-legal a:hover{border-bottom-color:var(--charbon)}
@media (max-width:30rem){.footer-legal{flex-direction:column;gap:.75rem}}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-top:1.25rem;font-size:.8125rem;color:var(--texte-2)}
.footer-copy{margin:0}
.footer-credit{margin:0}
.footer-credit a{text-decoration:none;border-bottom:1px solid var(--brume);padding-bottom:1px}
.footer-credit a:hover{border-bottom-color:var(--charbon)}
.footer-social{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
.footer-social a{text-decoration:none;border-bottom:1px solid var(--brume);padding-bottom:1px}
.footer-social a:hover{border-bottom-color:var(--charbon)}

/* ---- Pagination --------------------------------------------------------- */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--filet);font-size:.875rem}
.pagination a{text-decoration:none;border-bottom:1px solid var(--brume);padding-bottom:2px}
.pagination a:hover{border-bottom-color:var(--charbon)}
.page-number{color:var(--texte-2)}