/* ═══════════════════════════════════════════════════════════════════════
   EP Coaching, Variables, reset, système de design
   ═══════════════════════════════════════════════════════════════════════
   INTERDITS STRICTS, à respecter absolument dans TOUT le projet :
   - Jamais #080808 ni #DC0A14
   - Jamais de tons froids (bleu, vert, violet...)
   - Jamais la police "Bebas Neue"
   - Police titres : Montserrat 900, letter-spacing négatif
   - Police logo UNIQUEMENT : Playfair Display Italic Bold
   - Jamais de tiret cadratin (le signe de ponctuation long) dans aucun texte
   - Jamais de prix affiché nulle part
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --rouge-principal: #E01E1E;
  --rouge-fonce: #890404;
  --rouge-moyen: #B00202;
  --rouge-tres-fonce: #270101;
  --noir-profond: #0D0000;
  --blanc-casse: #F5EDED;
  --rose-clair: #FDC4C4; /* usage rare */

  /* Échelle d'espacement (base 8px, esprit cinématique, sections
     généreusement aérées, jamais denses). */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2.5rem;   /* 40px */
  --space-xl: 4rem;     /* 64px */
  --space-2xl: 6rem;    /* 96px */
  --space-3xl: 8rem;    /* 128px */

  /* Rayon de coin volontairement modeste, arrondi perceptible mais
     jamais le border-radius agressif façon SaaS générique. */
  --radius-sm: 4px;
  --radius-md: 8px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis prend le relais du smooth scroll */
}

body {
  background: var(--noir-profond);
  color: var(--blanc-casse);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* le diamant fantôme du hero déborde volontairement du viewport */
  position: relative;
}

/* ── Atmosphère de marque : noir profond + brume rouge ────────────────────
   Reprend telle quelle la formule de fond de l'appli EP Coaching (5
   dégradés radiaux superposés) pour que le site vitrine partage exactement
   la même identité que l'appli, jamais une approximation. z-index négatif
   (pas 0) : contrairement à l'appli où quasi tout élément visible est déjà
   `position: relative` (donc au-dessus par construction), ce site a du
   texte simple hors carte (h1, p de section) qui n'a aucune position
   propre — un z-index 0 le peindrait au-dessus de cette brume au lieu de
   dessous, diluant le contraste déjà calé au ratio WCAG dans tout ce
   fichier. -1 garantit qu'elle reste toujours un fond, jamais un voile. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% -8%,  rgba(200,5,5,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at -5% 20%,  rgba(176,2,2,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 108% 88%, rgba(200,5,5,0.18) 0%, transparent 52%),
    radial-gradient(ellipse 70% 35% at 50% 55%,  rgba(50,2,2,0.35)  0%, transparent 68%),
    radial-gradient(ellipse 40% 30% at 10% 92%,  rgba(137,4,4,0.10) 0%, transparent 50%);
}

/* ── Grain film : la texture qui empêche le noir profond de paraître plat
   à l'écran, identique à l'appli. Au-dessus de tout (y compris les cards),
   comme un vrai grain de pellicule. */
@keyframes grain {
  0%,100% { transform: translate(0,0) scale(1.06); }
  25%      { transform: translate(-2%,-1%) scale(1.06); }
  50%      { transform: translate(1%,2%) scale(1.06); }
  75%      { transform: translate(-1%,1%) scale(1.06); }
}

body::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain 0.65s steps(2) infinite;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* ── Accessibilité transverse (quality floor, prompt 6/15) ────────────── */

/* Anneau de focus clavier explicite plutôt que de compter sur le style
   par défaut du navigateur (couleur/épaisseur imprévisibles selon
   OS/navigateur), visible sur tous les éléments interactifs, jamais
   supprimé (pas de outline:none sans remplacement dans tout le projet). */
:focus-visible {
  outline: 2px solid var(--rouge-principal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Prépare le terrain pour la phase animation (prompt 7+) : les
   transitions/transforms déjà en place (hover cards/boutons/CTA) sont
   neutralisées ici pour qui demande moins de mouvement, sans rien
   changer au reste du rendu. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Typographie ───────────────────────────────────────────────────────── */

body {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
}

h1,
h2,
h3,
h4 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.05;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
}

/* Corps de texte : blanc cassé atténué pour ne jamais faire concurrence
   aux titres (100% d'opacité, réservée aux titres et à la marque). */
p {
  line-height: 1.75;
  color: color-mix(in srgb, var(--blanc-casse) 70%, transparent);
  max-width: 60ch;
}

.logo {
  position: relative;
  display: inline-block;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.01em;
}

/* Même halo que le logo de l'appli (.ep-logo-glow) : une brume rouge
   discrète juste derrière le mot, jamais un contour qui l'alourdirait. */
.logo::before {
  content: "";
  position: absolute;
  inset: -30px;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(224,30,30,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Mot ou groupe de mots clé mis en valeur dans un H1/H2 (phase contenu,
   prompt 10/15) : un accent par titre maximum, jamais plus. Rouge plein
   plutôt qu'un traitement outline ici, plus lisible sur les tailles de
   texte réduites des titres en `.split-content`. splitText() (prompt 7)
   préserve ce span intact quand le titre est découpé en mots animables :
   c'est exactement le cas d'usage prévu pour la variante "spans imbriqués". */
.accent {
  color: var(--rouge-principal);
}

/* Eyebrows/labels, Montserrat 700, petit, tracking large, rouge
   principal. Le glyphe ◆ en préfixe est la variante texte du motif
   diamant (voir plus bas), pour un usage inline sans CSS supplémentaire. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* rose-clair plutot que rouge-principal (QA finale, prompt 15/15) :
     rouge-principal sur noir-profond a un texte aussi petit et gras ne
     tient qu'a 4.3:1, sous le seuil WCAG AA de 4.5:1 pour du petit texte.
     rose-clair (deja dans la palette officielle, "usage rare") tient a
     13.6:1, tres largement au-dessus, sans sortir des 7 couleurs. */
  color: var(--rose-clair);
}

/* ── Motif signature : le diamant ─────────────────────────────────────── */
/* Reprend le diamant rouge du logo EP (déjà présent dessous le wordmark
   sur les anciennes versions du site) comme motif géométrique récurrent :
   accent de logo, séparateur de section, puce de liste, et un usage plus
   audacieux en filigrane géant dans le hero (voir home.css). Toujours la
   même forme simple (carré pivoté 45°), jamais surchargée. */

.diamond {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--rouge-principal);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.diamond--outline {
  background: transparent;
  border: 1px solid var(--rouge-principal);
}

.diamond--lg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Séparateur : ligne fine, diamant, ligne fine, utilisable entre deux
   sections ou au-dessus d'un titre. */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 12rem;
  margin-inline: auto;
}

.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--rouge-principal) 25%, transparent);
}

/* Puce de liste diamant (:before sur <li>, prête pour le contenu à venir
   en phase copy, aucune liste réelle dans les placeholders actuels). */
li.diamond-item {
  position: relative;
  padding-left: 1.25rem;
}

li.diamond-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--rouge-principal);
  transform: rotate(45deg);
}

/* ── Header & footer communs aux 3 pages ──────────────────────────────── */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md);
  background: transparent;
  transition: padding 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Compactage au scroll (prompt 8/15, voir initHeaderScroll dans main.js) :
   padding réduit + fond qui se densifie passé 80px de scroll. sticky ci-
   dessus est le prérequis (un header qui défile avec la page n'aurait
   jamais l'occasion de se compacter sous les yeux du visiteur). */
header.header--scrolled {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  background: color-mix(in srgb, var(--noir-profond) 88%, transparent);
  /* -webkit- necessaire pour Safari/iOS (QA finale, prompt 15/15) : sans
     ce prefixe, le flou echoue silencieusement sur Safari et le header
     compacte affiche juste le fond semi-transparent sans le blur. 20px
     comme la nav de l'appli (--blur-nav) : une bande aussi fine que le
     header mérite un flou plus dense qu'une simple card pour bien lire
     comme une couche de verre posée sur le contenu qui défile dessous. */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--rouge-principal) 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
}

.header-switch a {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--blanc-casse) 75%, transparent);
  border-bottom: 1px solid var(--rouge-fonce);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.header-switch a:hover {
  color: var(--blanc-casse);
  border-color: var(--rouge-principal);
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--rouge-tres-fonce);
  text-align: center;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
}

.footer-legal a,
.footer-instagram {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.footer-legal a:hover,
.footer-instagram:hover {
  opacity: 1;
  /* rose-clair plutot que rouge-principal (QA finale, prompt 15/15) :
     meme constat que .eyebrow, 4.3:1 sous le seuil WCAG AA a cette
     taille de texte. */
  color: var(--rose-clair);
}

@media (min-width: 768px) {
  footer {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Reservee au texte utile aux lecteurs d'ecran mais inutile a l'oeil (ex.
   label du champ email de la newsletter, deja porte visuellement par le
   placeholder). Technique standard : hors flux visuel, jamais display:none
   (qui le retirerait aussi du DOM accessible). */
.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;
}

/* ── Newsletter (footer, commun aux 3 pages) ──────────────────────────── */

.footer-newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  max-width: 380px;
}

.footer-newsletter-label {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--blanc-casse) 65%, transparent);
  margin: 0;
}

.newsletter-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.newsletter-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--blanc-casse);
  background: color-mix(in srgb, var(--rouge-tres-fonce) 60%, var(--noir-profond));
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 25%, transparent);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease;
}

.newsletter-input::placeholder {
  color: color-mix(in srgb, var(--blanc-casse) 35%, transparent);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--rouge-principal);
}

.newsletter-submit {
  padding: 0.7rem 1.1rem;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--blanc-casse);
  background: var(--rouge-principal);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.newsletter-submit:hover {
  background: color-mix(in srgb, var(--rouge-principal) 85%, white);
}

.newsletter-submit:active {
  transform: scale(0.97);
}

.newsletter-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.newsletter-feedback {
  font-size: 0.8125rem;
  color: var(--rose-clair);
  margin: 0;
}

.newsletter-success {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blanc-casse);
  margin: 0;
}

/* ── Boutons CTA communs ───────────────────────────────────────────────── */

.btn-cta-primary {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--rouge-principal);
  color: var(--blanc-casse);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  /* Reliefs internes (haut clair, bas sombre) qui donnent au bouton une
     vraie épaisseur, plus un halo rouge au repos déjà visible sans
     attendre le hover, comme .ep-btn-primary dans l'appli. */
  box-shadow:
    0 4px 24px rgba(224, 30, 30, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.btn-cta-primary:hover {
  background: var(--rouge-fonce);
  box-shadow:
    0 8px 32px rgba(224, 30, 30, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.14);
  transform: translateY(-2px);
}

.btn-cta-primary:active {
  transform: scale(0.98);
}

/* Sous-texte optionnel sous un CTA primaire (ex. "Appel gratuit, sans
   engagement"), slot prêt, pas encore rempli partout. */
.btn-cta-primary + .btn-subtext {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.75rem;
  text-align: center;
  /* 55%, pas 45% (QA finale, prompt 15/15) : a 45%, ce texte ne tenait
     qu'a 4.0:1 sur noir-profond, sous le seuil WCAG AA de 4.5:1 pour du
     petit texte. A 55%, 5.55:1, avec marge meme sur le degrade plus clair
     du CTA final. */
  color: color-mix(in srgb, var(--blanc-casse) 55%, transparent);
}

.btn-cta-fallback {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  opacity: 0.7;
  border-bottom: 1px solid var(--rouge-fonce);
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.btn-cta-fallback:hover {
  opacity: 1;
  border-color: var(--rouge-principal);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
/* Système partagé par les cards de critères/piliers/accomplissements
   (physique.css, business.css). Les blocs de bifurcation du hero (.bloc,
   home.css) reprennent le même vocabulaire visuel (fond/bordure/rayon)
   mais avec leur propre règle et un hover plus marqué que .card : c'est
   la seule décision de tout le parcours homepage, elle mérite plus de
   présence qu'une card de contenu plus bas dans une page. */

.card {
  /* Verre dépoli plutôt qu'un aplat : laisse deviner la brume de fond au
     travers, comme .ep-card dans l'appli. */
  background: color-mix(in srgb, var(--rouge-tres-fonce) 55%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 15%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 1px rgba(224,30,30,0.06),
    0 4px 32px rgba(0,0,0,0.45);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Reflet : un fin trait rouge en haut de carte, comme si la lumière de la
   brume ambiante accrochait le bord supérieur du verre. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,30,30,0.4), transparent);
  pointer-events: none;
}

.card:hover {
  border-color: color-mix(in srgb, var(--rouge-principal) 50%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 16px 48px rgba(0,0,0,0.55),
    0 0 40px rgba(137,4,4,0.12);
  transform: translateY(-2px);
}

.card h3 {
  margin-bottom: var(--space-xs);
}

.card > .icon {
  margin-bottom: var(--space-sm);
}

/* ── Icônes ────────────────────────────────────────────────────────────── */
/* SVG en trait (jamais en aplat, sauf le petit point "live"), currentColor
   pour hériter du rouge principal. Un seul système, réutilisé partout où
   une icône apparaît (méthode, piliers), voir prompt 5/15. */

.icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--rouge-principal);
  flex-shrink: 0;
}

.icon--lg {
  width: 2.25rem;
  height: 2.25rem;
}

/* ── Layout deux colonnes (split) ─────────────────────────────────────── */
/* Empilé sur mobile, deux colonnes à partir de 900px, réutilisé par
   bio/critères/accompagnement/accomplissements sur physique ET business. */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

.split-content .eyebrow {
  margin-bottom: var(--space-sm);
}

.split-content h1,
.split-content h2 {
  margin-bottom: var(--space-md);
}

/* Le H1 hero (jusqu'à 5.5rem) sert la section hero pleine largeur du
   prompt 4, dans .split-content, il partage une colonne deux fois moins
   large avec une phrase longue (bio), la même échelle y ferait beaucoup
   trop de lignes. Ramené au même poids visuel que les H2 de section :
   toujours le plus grand texte de la page (correct sémantiquement),
   sans l'effet hero qui ne sert qu'au vrai hero. */
.split-content h1 {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  letter-spacing: -0.03em; /* même poids que h2 à cette échelle, -0.04em (hero) serait trop serré ici */
}

.split-content > p {
  margin-bottom: var(--space-md);
}

/* ── Portrait ──────────────────────────────────────────────────────────── */
/* Traitement premium par défaut : noir & blanc qui repasse en couleur au
   hover, léger vignettage rouge toujours présent (relie la photo à
   l'identité de marque même en N&B). Le placeholder reprend le même ratio
   avec un dégradé sombre, prêt à recevoir la vraie photo sans changer la
   mise en page le jour où elle est choisie. */

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 20%, transparent);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.5s ease;
}

.portrait:hover img {
  filter: grayscale(0) contrast(1.05);
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 80px rgba(224, 30, 30, 0.25);
  pointer-events: none;
}

/* Cadre à coins ("viewfinder"), au-dessus de la photo ET du voile
   ci-dessus (z-index explicite, voir plus bas) : 8 dégradés linéaires
   (2 segments par coin, jamais d'image externe) composent 4 équerres,
   comme un cadre de visée plutôt qu'une bordure pleine. Rejoint le
   traitement "cadre technique" déjà présent ailleurs sur le site (VSL,
   cards) sans ajouter de nouvelle couleur ni de nouvelle police. */
.portrait::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--rouge-principal), var(--rouge-principal)) top left / 1.25rem 1px no-repeat,
    linear-gradient(var(--rouge-principal), var(--rouge-principal)) top left / 1px 1.25rem no-repeat,
    linear-gradient(var(--rouge-principal), var(--rouge-principal)) top right / 1.25rem 1px no-repeat,
    linear-gradient(var(--rouge-principal), var(--rouge-principal)) top right / 1px 1.25rem no-repeat,
    linear-gradient(var(--rouge-principal), var(--rouge-principal)) bottom left / 1.25rem 1px no-repeat,
    linear-gradient(var(--rouge-principal), var(--rouge-principal)) bottom left / 1px 1.25rem no-repeat,
    linear-gradient(var(--rouge-principal), var(--rouge-principal)) bottom right / 1.25rem 1px no-repeat,
    linear-gradient(var(--rouge-principal), var(--rouge-principal)) bottom right / 1px 1.25rem no-repeat;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.portrait:hover::before {
  opacity: 0.85;
}

.portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--rouge-tres-fonce) 80%, transparent) 0%,
    var(--noir-profond) 100%
  );
}

/* ── Liste à puce diamant ──────────────────────────────────────────────── */
/* li.diamond-item existe déjà (motif signature, prompt 4), .diamond-list
   n'ajoute que l'espacement de la liste elle-même. */

.diamond-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.diamond-list--lg li.diamond-item {
  padding-left: 1.5rem;
}

.diamond-list--lg li.diamond-item::before {
  width: 0.55rem;
  height: 0.55rem;
  /* 0.35em + le padding-top ajouté plus bas (passe "manifeste",
     accomplissements) : top:0 d'un enfant absolu s'aligne sur le bord de
     la padding-box, PAS sur le contenu, il ignore donc tout padding-top
     porté par le <li> lui-même. Sans ce calc(), le losange resterait collé
     en haut du <li> pendant que le texte, lui, descend avec le padding. */
  top: calc(var(--space-sm) + 0.35em);
}

.diamond-list strong {
  display: block;
  color: var(--blanc-casse);
  font-weight: 700;
  margin-bottom: 0.2em;
}

/* Accomplissements ("ce que tu vas pouvoir accomplir") : seule section de
   contenu qui n'est pas construite en cards, traitée jusqu'ici comme une
   liste ordinaire un peu plus grande. Échelle "manifeste" : le <strong>
   de chaque accomplissement monte au poids d'un vrai sous-titre, une
   ligne fine sépare chaque item du suivant (rythme de lecture, pas de
   fond ni de bordure ajoutés pour rester une liste, pas des cards
   déguisées). */
.diamond-list--lg li.diamond-item {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.diamond-list--lg li.diamond-item:not(:first-child) {
  border-top: 1px solid color-mix(in srgb, var(--rouge-principal) 12%, transparent);
}

.diamond-list--lg strong {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.3em;
}

/* ── Sections de contenu (bio / critères / accompagnement / piliers /
   accomplissements) ──────────────────────────────────────────────────── */
/* Partagées par physique.css ET business.css (mêmes classes, même
   structure HTML), voir prompt 5/15. */

.bio,
.criteres,
.accompagnement,
.piliers,
.accomplissements {
  position: relative;
  padding: var(--space-2xl) var(--space-md);
  max-width: 1200px;
  margin-inline: auto;
}

/* ── Ambiance propre à chaque section (passe de profondeur, 2/2026-09) ───
   Avant cette passe, tout l'intérieur de page (bio → accomplissements)
   reposait uniquement sur le fond global de body::before : cinq sections
   de contenu différent, un seul et même arrière-plan partout, jamais de
   respiration ni de repère visuel pour savoir "où" on est en scrollant.
   Chaque section reçoit ici sa propre brume, en plus (jamais à la place)
   du fond global, réglée assez bas en opacité pour rester une nuance et
   jamais un aplat qui romprait la continuité du fond de marque.
   z-index -1 : même raisonnement documenté sur body::before plus haut,
   ces sections contiennent aussi du texte simple non positionné (h2, p),
   un z-index positif peindrait la brume par-dessus au lieu de dessous. */
.bio::before,
.criteres::before,
.accompagnement::before,
.piliers::before,
.accomplissements::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Bio : la brume vient du côté du portrait (gauche en desktop), comme si
   la lumière de la photo N&B éclairait discrètement cette moitié. */
.bio::before {
  background: radial-gradient(ellipse 55% 55% at 12% 45%, rgba(137,4,4,0.16) 0%, transparent 62%);
}

/* Critères : un halo centré, haut de section, en filigrane derrière le
   titre "est-ce fait pour toi" — un point de lecture, pas un décor. */
.criteres::before {
  background: radial-gradient(ellipse 65% 45% at 30% 8%, rgba(200,5,5,0.11) 0%, transparent 55%);
}

/* Accompagnement : bande large côté cards (droite en desktop), la méthode
   est le coeur de l'offre, elle mérite la brume la plus présente des cinq. */
.accompagnement::before {
  background: radial-gradient(ellipse 85% 45% at 72% 50%, rgba(224,30,30,0.12) 0%, transparent 62%);
}

/* Piliers : ambiance large et haute, toute la grille en profite (section
   la plus riche en contenu de la page). */
.piliers::before {
  background: radial-gradient(ellipse 100% 42% at 50% 0%, rgba(176,2,2,0.15) 0%, transparent 65%);
}

/* Accomplissements : glow bas-droite, prépare l'arrivée sur le CTA final
   qui suit immédiatement (transition de "scène" plutôt qu'une coupure nette). */
.accomplissements::before {
  background: radial-gradient(ellipse 70% 55% at 88% 100%, rgba(137,4,4,0.15) 0%, transparent 60%);
}

.criteres .cards,
.accompagnement .cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Critères : un diamant plein devant chaque titre de card, comme une puce
   de check plutôt qu'un simple <h3> nu — les critères sont un vrai
   "coché/pas coché" dans la tête du visiteur, la puce l'appuie. */
.criteres .cards .card .critere-mark {
  margin-bottom: var(--space-xs);
}

/* Accompagnement : 3 vraies étapes numérotées (on fait le point → on
   construit ton plan → on ajuste), pas juste 3 cards côte à côte. Un grand
   chiffre fantôme (contour seul, jamais un aplat qui concurrencerait le
   titre de la card) rogné par le overflow:hidden existant de .card, comme
   s'il "sortait" du cadre au coin haut-droit. counter-reset/increment :
   aucune modification du HTML nécessaire, les 3 cards existantes suffisent. */
.accompagnement .cards {
  counter-reset: step;
}

.accompagnement .cards .card {
  counter-increment: step;
}

.accompagnement .cards .card::after {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.6rem;
  right: -0.35rem;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 900;
  font-size: 4.25rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--rouge-principal) 22%, transparent);
  pointer-events: none;
}

.accompagnement .cta-slot {
  margin-top: var(--space-lg);
}

.piliers .section-header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--space-xl);
}

.piliers .section-header .eyebrow {
  justify-content: center;
}

.pilier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

/* Hiérarchie entre piliers : bordure pleinement rouge sur les 2 cards
   prioritaires plutôt qu'une taille différente, garde la grille 3×2
   propre et symétrique tout en signalant clairement l'importance. */
.pilier-card--emphasis {
  border-color: var(--rouge-principal);
  /* Léger halo ambiant en plus du .card:hover normal : ce pilier est
     prioritaire même au repos, pas seulement au survol. */
  box-shadow:
    0 0 40px rgba(224,30,30,0.10),
    inset 0 1px 0 rgba(224,30,30,0.15),
    0 4px 32px rgba(0,0,0,0.45);
}

/* Étiquette "pilier prioritaire" : réutilise .eyebrow tel quel (même
   composant que les kickers de section), juste resserrée en haut de card
   plutôt qu'au-dessus d'un titre de section. */
.pilier-card--emphasis .eyebrow {
  margin-bottom: var(--space-xs);
}

@media (min-width: 900px) {
  .pilier-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── CTA final ─────────────────────────────────────────────────────────── */
/* Traitement le plus fort de la page : pleine largeur, dégradé + glow,
   c'est la conversion. Partagé par physique/business. */

.cta-final {
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl) var(--space-md);
  text-align: center;
  background: radial-gradient(
    ellipse 100% 80% at 50% 100%,
    color-mix(in srgb, var(--rouge-fonce) 55%, transparent) 0%,
    var(--noir-profond) 70%
  );
  box-shadow: inset 0 1px 0 rgba(224,30,30,0.15);
}

/* Trait de lumière en tête de section, même signature que le hairline de
   .ep-card-hero dans l'appli : la section la plus importante de la page
   (la conversion) mérite ce détail que les cards de contenu n'ont pas. */
.cta-final::before {
  content: "";
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,30,30,0.6), transparent);
  pointer-events: none;
}

.cta-final-inner {
  max-width: 40rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-final .diamond {
  margin-bottom: var(--space-md);
}

.cta-final h2 {
  margin-bottom: var(--space-xs);
}

.cta-final > .cta-final-inner > p {
  margin-bottom: var(--space-lg);
}

.cta-final .form-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Halo tournant derrière le CTA final : contrairement à une pulsation
   d'échelle (jugée "cheap" et déjà écartée pour ce même bouton, voir le
   commentaire d'initCtaFinalReveal dans main.js), une rotation lente d'un
   dégradé conique lu comme un projecteur qui balaie plutôt qu'un battement
   qui clignote. z-index -1 : même raisonnement que les brumes de section
   plus haut, .btn-cta-primary et .btn-subtext sont du contenu simple non
   positionné à l'intérieur de .form-slot. Neutralisé par la règle
   prefers-reduced-motion globale du fichier (l'anneau reste visible, figé). */
.cta-final .form-slot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24rem;
  height: 24rem;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0%, rgba(224,30,30,0.30) 12%, transparent 28%);
  filter: blur(45px);
  z-index: -1;
  pointer-events: none;
  animation: cta-glow-rotate 16s linear infinite;
}

@keyframes cta-glow-rotate {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.btn-cta-primary--lg {
  padding: 1.25rem 2.75rem;
  font-size: 1.0625rem;
}