/**
 * Espace membre — feuille reprise VERBATIM du prototype validé par la cliente.
 *
 * Elle n'est pas réécrite : c'est la méthode qui a donné le pixel près sur les
 * quatre pages publiques. Le HTML des blocs reproduit exactement les classes
 * ci-dessous ; seuls les textes deviennent des champs.
 *
 * Deux écarts assumés par rapport au prototype, et un seul ajout :
 *   - les polices ne viennent plus de Google : perle-blocks les auto-héberge ;
 *   - « height:100% » sur html,body est retiré — sous WordPress la page porte
 *     la barre d'administration, et la hauteur figée coupait le défilement ;
 *   - les états de focus, absents du prototype, sont ajoutés en fin de fichier.
 */

:root{
  --violet: #3D1F5C;
  --violet-deep: #241238;
  --violet-mid: #8B6DA3;
  --rose-mauve: #B4708F;
  --rose: #C4789A;
  --rose-soft: #E4C3D2;
  --rose-pale: #F8EFF3;
  --lavender: #F1ECF5;
  --white: #FFFFFF;
  --cream: #FCFAF9;
  --ink: #2B2530;
  --gray: #6E6773;
  --gray-soft: #A79FAE;
  --line: #E9E2E8;
  --shadow: 0 10px 40px rgba(61,31,92,0.08);
  --shadow-lg: 0 20px 60px rgba(61,31,92,0.14);
  --radius: 18px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  font-family:'Jost', sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.serif{ font-family:'Cormorant Garamond', serif; }
h1,h2,h3{ font-family:'Cormorant Garamond', serif; font-weight:500; color:var(--violet); letter-spacing:0.2px; }
a{ color:inherit; text-decoration:none; }
::selection{ background: var(--rose-soft); }

/* ============ APP SHELL ============ */
.app{
  display:grid;
  grid-template-columns: 300px 1fr;
  min-height:100vh;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  background: linear-gradient(180deg, var(--violet-deep) 0%, #2c1745 100%);
  color: rgba(255,255,255,0.92);
  padding: 34px 26px 26px 26px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.brand{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.brand .plus{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:26px; color:#fff; }
.brand .quune{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:26px; color:var(--rose-soft); }
.brand-sub{ font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:28px; }

.chain{ display:flex; justify-content:space-between; margin-bottom:10px; padding: 0 2px; }
.chain-node{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative; }
.chain-dot{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,0.18); border:1.5px solid rgba(255,255,255,0.35); z-index:2; transition: all .3s; }
.chain-dot.done{ background: var(--rose-soft); border-color: var(--rose-soft); box-shadow: 0 0 0 4px rgba(228,195,210,0.18); }
.chain-line{ position:absolute; top:5px; left:50%; width:100%; height:1.5px; background:rgba(255,255,255,0.18); z-index:1; }
.chain-node:last-child .chain-line{ display:none; }
.chain-line.done{ background: var(--rose-soft); }
.chain-label{ font-size:8.5px; letter-spacing:0.5px; color:rgba(255,255,255,0.55); text-align:center; line-height:1.2; }
.chain-wrap{ margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,0.12); }
.chain-status{ font-size:11px; color:rgba(255,255,255,0.6); text-align:center; margin-top:8px; font-style:italic; font-family:'Cormorant Garamond',serif; font-size:13px; }

.nav-group-label{ font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin: 16px 4px 8px 4px; }
.nav{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:10px; cursor:pointer;
  font-size:13.5px; color:rgba(255,255,255,0.75);
  transition: background .15s, color .15s;
}
.nav-item:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{ background: rgba(255,255,255,0.12); color:#fff; }
.nav-item .ic{ width:18px; text-align:center; font-size:13px; flex-shrink:0; }
.nav-item .check{ margin-left:auto; font-size:11px; color: var(--rose-soft); }
.nav-item .lock{ margin-left:auto; font-size:11px; color:rgba(255,255,255,0.3); }
/* L'étape facultative était mise en retrait par « opacity », héritée du
   prototype. C'est un piège : l'opacité se MULTIPLIE à l'alpha de tout ce
   qu'elle contient, si bien que la marque « libre » sortait à 0,55 × 0,82 =
   0,45 — 4,3:1, sous le seuil — alors que la règle qui la fixe annonce 5,7:1.
   Et comme « libre » est le seul état que porte une étape facultative, aucune
   ne passait. On met donc en retrait par la COULEUR : le rapport calculé
   redevient le rapport affiché. */
.nav-item.optional{ color: rgba(255,255,255,0.66); }
.nav-item.optional .ic{ color: var(--rose-soft); }

/* L'entrée — le tableau de bord — ouvre la barre sans titre de groupe. Le
   filet suffit à dire qu'elle n'appartient pas à la suite : ce n'est pas une
   étape, elle ne se termine pas, elle ne se verrouille pas. */
.nav-entree{ margin-bottom:4px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.12); }

/* Une étape verrouillée doit SE LIRE comme fermée. Le cadenas seul n'y
   suffisait pas : l'émoji d'icône restait en pleine couleur, si bien qu'une
   étape encore fermée attirait l'œil autant qu'une étape ouverte — c'est
   même elle qui l'attirait, étant la plus colorée de la liste.

   On éteint donc l'icône par un filtre, la couleur du texte n'ayant aucun
   effet sur un émoji. Et on baisse le libellé sans descendre sous le seuil de
   contraste : ces lignes annoncent la suite du parcours, il faut pouvoir les
   lire. Mesuré 5,12:1 en haut du dégradé et 4,94:1 en bas, pour un seuil AA
   de 4,5 — c'est le bas qui compte, étant le moins favorable. */
.nav-item.verrouillee{ color: rgba(255,255,255,0.5); }
.nav-item.verrouillee:hover{ background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.68); }

/* En aperçu, la cliente PEUT ouvrir une étape verrouillée : son entrée porte
   alors « active » ET « verrouillee ». Même spécificité, donc la seconde
   l'emporte — et la ligne où l'on se trouve devenait la moins lisible de la
   barre (4,1:1 sur son fond clair). L'icône grisée et le cadenas disent déjà
   qu'elle est fermée ; le libellé, lui, reprend sa pleine valeur. */
.nav-item.active.verrouillee{ color:#fff; }

/* L'icône est décorative (aria-hidden) : on peut l'éteindre franchement.
   La marque de fin de ligne, non — la cliente la règle elle-même, et rien ne
   l'empêche d'y écrire « fermé » plutôt que d'y mettre un cadenas. On la
   désature donc SANS baisser son opacité, qui la ferait tomber à 2,6:1 le jour
   où elle y mettrait du texte. Désaturé, un émoji suffit à se taire ; du
   texte, lui, doit rester lisible. */
.nav-item.verrouillee .ic{ filter: grayscale(1); opacity:0.6; }
.nav-item.verrouillee .lock{ filter: grayscale(1); }

/* Le garde-fou « facultative ET verrouillée » qui figurait ici est tombé avec
   l'opacité : il n'y a plus rien à multiplier. C'était de toute façon une
   combinaison que lecture.php ne produit pas — il traite le cas « facultative »
   avant celui de la date. */

.sidebar-footer{ margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; gap:10px; }
.avatar{ width:34px; height:34px; border-radius:50%; background: linear-gradient(135deg, var(--rose), var(--violet-mid)); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-weight:600; color:#fff; font-size:14px; flex-shrink:0; }
.footer-name{ font-size:12.5px; color:#fff; }
.footer-role{ font-size:10.5px; color:rgba(255,255,255,0.5); }

/* ---------- MAIN ---------- */
.main{ display:flex; flex-direction:column; min-height:100vh; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 48px; background: rgba(252,250,249,0.85); backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
}
.topbar-crumb{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color: var(--rose); font-weight:500; }
.topbar-title{ font-size:19px; color: var(--violet); font-family:'Cormorant Garamond',serif; font-weight:600; margin-top:2px; }
.topbar-progress{ display:flex; align-items:center; gap:10px; }
.pbar{ width:130px; height:5px; background: var(--line); border-radius:10px; overflow:hidden; }
.pbar-fill{ height:100%; background: linear-gradient(90deg, var(--rose-mauve), var(--rose)); border-radius:10px; }
.pbar-label{ font-size:11px; color: var(--gray); white-space:nowrap; }

.screen-container{ flex:1; padding: 44px 48px 90px 48px; max-width:920px; width:100%; }
.screen{ display:none; animation: fadeIn .35s ease; }
.screen.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ============ COMPONENTS ============ */
.eyebrow{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color: var(--rose); font-weight:500; margin-bottom:8px; }
.hero-title{ font-size:38px; line-height:1.1; margin-bottom:10px; }
.hero-title i{ color:var(--rose); }
.hero-sub{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color: var(--gray); max-width:560px; margin-bottom:26px; }
.lede{ font-size:15px; color: var(--ink); max-width:600px; margin-bottom:28px; }

.video-card{
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  background: linear-gradient(135deg, var(--violet-deep), var(--violet-mid) 130%);
  position:relative; height:280px; display:flex; align-items:flex-end; margin-bottom:14px;
  cursor:pointer;
}
.video-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 30%, rgba(228,195,210,0.25), transparent 60%); }
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.16);
  border:1.5px solid rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
}
.video-play::after{ content:""; border-style:solid; border-width:9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left:4px; }
.video-meta{ position:relative; z-index:2; padding:20px 24px; color:#fff; width:100%; background:linear-gradient(0deg, rgba(0,0,0,0.35), transparent); }
.video-tag{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color: var(--rose-soft); margin-bottom:4px; }
.video-name{ font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; }
.video-dur{ font-size:11.5px; color:rgba(255,255,255,0.65); margin-top:3px; }
.video-caption{ font-size:12.5px; color: var(--gray); font-style:italic; font-family:'Cormorant Garamond',serif; font-size:14px; margin-bottom:24px; }

.section-label{ font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color: var(--violet); font-weight:600; margin: 30px 0 14px 0; padding-bottom:8px; border-bottom:1px solid var(--line); }

.card{ background:#fff; border-radius: var(--radius); padding:24px 26px; box-shadow: var(--shadow); margin-bottom:16px; }
.card-tight{ padding:16px 20px; }
.quote-block{ border-left:2.5px solid var(--rose); padding: 4px 0 4px 22px; margin-bottom:26px; }
.quote-block p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color: var(--violet-deep); line-height:1.5; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

.pill{ display:inline-flex; align-items:center; gap:6px; background: var(--lavender); color: var(--violet); font-size:12px; padding:6px 14px; border-radius:20px; margin:0 8px 8px 0; }
.pill .ic{ font-size:12px; }

.list-check{ list-style:none; }
.list-check li{ position:relative; padding-left:26px; margin-bottom:11px; font-size:14px; color: var(--ink); }
.list-check li::before{ content:"✓"; position:absolute; left:0; top:0; color: var(--rose); font-weight:600; }

.dl-item{ display:flex; align-items:center; gap:14px; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; }
.dl-ic{ width:38px; height:38px; border-radius:9px; background: var(--lavender); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.dl-name{ font-size:13.5px; color: var(--ink); font-weight:500; }
.dl-meta{ font-size:11px; color: var(--gray-soft); }
.dl-btn{ margin-left:auto; font-size:12px; color: var(--violet); border:1px solid var(--violet); padding:7px 16px; border-radius:20px; white-space:nowrap; }

.btn{ display:inline-flex; align-items:center; gap:8px; background: var(--violet-deep); color:#fff; font-size:14px; padding:14px 30px; border-radius:30px; box-shadow: 0 8px 24px rgba(36,18,56,0.25); cursor:pointer; border:none; font-family:'Jost',sans-serif; }
.btn.rose{ background: linear-gradient(120deg, var(--rose-mauve), var(--rose)); box-shadow: 0 8px 24px rgba(196,120,154,0.3); }
.btn.ghost{ background:transparent; color:var(--violet); border:1.5px solid var(--violet); box-shadow:none; }
.btn-row{ display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }

/* La capsule qui se lit sur place, et sa légende — reprises du prototype.
   Le lecteur seul perdait la mention, le titre et la durée : la carte violette
   les portait à l'intérieur, le lecteur natif n'a nulle part où les mettre. */
.video-real-wrap{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); margin-bottom:10px; background:var(--violet-deep); position:relative; width:100%; aspect-ratio: 16 / 9; }
.video-real-wrap video, .video-real-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; background:#000; border:none; }
.video-real-caption{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 4px 0 4px; flex-wrap:wrap; }
.video-real-caption .vrc-tag{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--rose); font-weight:600; }
.video-real-caption .vrc-name{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--violet); font-weight:600; margin-top:2px; }
.video-real-caption .vrc-dur{ font-size:11.5px; color:var(--gray-soft); white-space:nowrap; }

/* Le podcast : une conversation s'écoute, elle ne se regarde pas. Les trois
   capsules audio du parcours s'affichaient en carte vidéo, avec un bouton de
   lecture qui ouvrait un fichier .wav dans un onglet neuf. */
.audio-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:12px; }
.audio-card .ac-title{ font-size:13px; font-weight:500; color:var(--violet); margin-bottom:2px; }
.audio-card .ac-sub{ font-size:11.5px; color:var(--gray-soft); margin-bottom:10px; }
.audio-card audio{ width:100%; height:34px; }

/* Le lecteur qui remplace la carte : même emprise, mêmes angles. */
.video-lecteur{ display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:14px; background:#241238; box-shadow:0 8px 24px rgba(36,18,56,.18); }
.video-lecteur:focus-visible{ outline:2px solid var(--rose-mauve); outline-offset:3px; }

/* Répondre à une invitation, et pouvoir se raviser. */
.pp-reponse{ margin: 14px 0 6px; }
.pp-reponse-question{ font-size:13.5px; color: var(--violet); margin-bottom:10px; }
/* « hidden » doit l'emporter sur la mise en page.
   L'attribut ne vaut que « display:none » dans la feuille du navigateur, et
   toute règle d'auteur qui pose un display le bat : les deux boutons et le
   message « vous avez confirmé » s'affichaient donc en même temps. */
.pp-reponse [hidden]{ display:none !important; }
.pp-reponse-dit{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.pp-reponse-texte{ font-size:13px; color: var(--violet); }
.pp-reponse-reprendre{ background:none; border:none; padding:0; font-family:'Jost',sans-serif; font-size:12px; color: var(--rose-mauve); text-decoration:underline; cursor:pointer; }
.pp-reponse-reprendre:hover{ color: var(--violet); }
.pp-reponse-echec{ font-size:12.5px; color:#a3364d; margin:10px 0 0; }
.pp-reponse [disabled]{ opacity:.55; cursor:default; }

/* Un bouton qui n'a pas encore de destination : présent, mais éteint. */
.pp-btn-inerte{ opacity:.5; cursor:default; box-shadow:none; }
.pp-btn-muet{ align-self:center; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--gray-soft); }

.badge{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100px; }
.badge-icon{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; }
.badge-icon.unlocked{ background: linear-gradient(135deg, var(--rose-mauve), var(--violet-mid)); color:#fff; box-shadow: 0 8px 20px rgba(180,112,143,0.35); }
.badge-icon.locked{ background: var(--lavender); color: var(--gray-soft); }
.badge-label{ font-size:11px; text-align:center; color: var(--ink); line-height:1.3; }
.badge-row{ display:flex; gap:22px; flex-wrap:wrap; margin: 10px 0 30px 0; }

.faq-item{ padding:16px 0; border-bottom:1px solid var(--line); }
.faq-q{ font-size:14px; font-weight:500; color: var(--violet); margin-bottom:6px; }
.faq-a{ font-size:13.5px; color: var(--gray); }

.two-col{ display:flex; gap:36px; align-items:flex-start; }
.col{ flex:1; }

.callout{ background: var(--lavender); border-radius:14px; padding:20px 24px; margin-bottom:24px; }
.callout.rose{ background: var(--rose-pale); }
.callout-label{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color: var(--violet); font-weight:600; margin-bottom:6px; }
.callout.rose .callout-label{ color: var(--rose-mauve); }
.callout-text{ font-size:13.5px; color: var(--ink); line-height:1.5; }

.stat-row{ display:flex; gap:14px; margin: 20px 0 30px 0; }
.stat{ flex:1; background:#fff; border-radius:14px; padding:18px 20px; box-shadow: var(--shadow); }
.stat-num{ font-family:'Cormorant Garamond',serif; font-size:28px; color: var(--violet); font-weight:600; }
.stat-label{ font-size:11px; color: var(--gray); letter-spacing:0.5px; margin-top:2px; }

.timeline-item{ display:flex; gap:16px; margin-bottom:18px; }
/* La pastille s'élargit pour son contenu. Ronde à 34px, elle coupait « 2 min »
   en deux lignes ; elle devient une gélule dès que le texte dépasse. */
.timeline-ic{ min-width:34px; height:34px; padding:0 10px; border-radius:17px; background: var(--lavender); display:inline-flex; align-items:center; justify-content:center; font-size:13px; white-space:nowrap; flex-shrink:0; }
.timeline-name{ font-size:14px; font-weight:500; color: var(--violet); }
.timeline-desc{ font-size:12.5px; color: var(--gray); margin-top:2px; }

.module-header{ display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.module-num-badge{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:20px; color:#fff; flex-shrink:0; }

.mirror-box{ display:flex; gap:20px; margin-bottom:26px; }
.mirror-half{ flex:1; background:#fff; border-radius:16px; padding:22px; box-shadow: var(--shadow); position:relative; }
.mirror-half.then{ border-top:3px solid var(--gray-soft); }
.mirror-half.now{ border-top:3px solid var(--rose); }
.mirror-tag{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gray); margin-bottom:8px; }
.mirror-half.now .mirror-tag{ color: var(--rose); }
.mirror-text{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; color: var(--violet-deep); line-height:1.5; }

/* module color themes */
.theme-m1 .module-num-badge{ background: var(--violet-deep); } .theme-m1 .quote-block{ border-color: var(--rose-soft); }
.theme-m2 .module-num-badge{ background: var(--violet-mid); }
.theme-m3 .module-num-badge{ background: var(--rose-mauve); }
.theme-m4 .module-num-badge{ background: var(--violet-deep); }
.theme-m5 .module-num-badge{ background: var(--violet-deep); }

.calendly-mock{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:0; overflow:hidden; box-shadow: var(--shadow); margin-bottom:20px; }
.calendly-head{ background: var(--violet-deep); color:#fff; padding:16px 22px; font-size:13px; letter-spacing:1px; }
.calendly-body{ padding:20px 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.calendly-slot{ border:1px solid var(--line); border-radius:10px; padding:12px 8px; text-align:center; font-size:12px; color:var(--violet); cursor:pointer; }
.calendly-slot:hover{ background: var(--lavender); }
.calendly-slot.picked{ background: var(--violet-deep); color:#fff; border-color:var(--violet-deep); }

.optional-tag{ display:inline-block; background: var(--rose-pale); color: var(--rose-mauve); font-size:11px; letter-spacing:1px; padding:5px 14px; border-radius:16px; margin-bottom:16px; border:1px dashed var(--rose-mauve); }

.hairline{ height:1px; background: var(--line); margin: 30px 0; }

footer.plat{ text-align:center; padding:30px; font-size:11px; color: var(--gray-soft); letter-spacing:1px; }

/* ---------- MOBILE ---------- */
.mobile-toggle{ display:none; }
@media (max-width: 880px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ position:fixed; left:-320px; top:0; width:280px; z-index:100; transition: left .25s; box-shadow: 20px 0 60px rgba(0,0,0,0.2); }
  .sidebar.open{ left:0; }
  .mobile-toggle{ display:flex; align-items:center; gap:8px; background:var(--violet-deep); color:#fff; border:none; padding:9px 14px; border-radius:20px; font-size:12px; }
  .topbar{ padding:16px 20px; }
  .screen-container{ padding: 28px 20px 70px 20px; }
  .grid2, .grid3, .grid4{ grid-template-columns:1fr; }
  .two-col{ flex-direction:column; }
  .mirror-box{ flex-direction:column; }
  .calendly-body{ grid-template-columns:repeat(2,1fr); }
  .hero-title{ font-size:28px; }
}

/* ============ ACCESSIBILITÉ ============ */
/* Absente du prototype : les entrées de navigation y étaient des <li> avec un
   écouteur de clic, sans lien, sans état de focus. Le coût est nul maintenant,
   élevé si on le greffe après. */

.nav-item:focus-visible,
.dl-btn:focus-visible,
.btn:focus-visible,
.calendly-slot:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
  border-radius: 4px;
}

.sidebar a:focus-visible,
.sidebar button:focus-visible { outline-color: var(--rose-soft); }

/* Le texte gris de la barre latérale passait sous le seuil de contraste. */
.brand-sub { color: rgba(255,255,255,0.62); }
.nav-group-label { color: rgba(255,255,255,0.58); }
.chain-label { color: rgba(255,255,255,0.68); }

/* Même défaut sur les marques de fin de ligne — « now », « libre ». À 0,3 de
   blanc elles tombaient à 2,4:1, et le grisement des étapes verrouillées les
   aurait laissées PLUS pâles que ce qui est fermé : la hiérarchie s'inversait.
   La marque des verrouillées, elle, est un émoji : sa couleur ne vient pas
   d'ici mais du filtre posé plus haut. */
.nav-item .lock { color: rgba(255,255,255,0.55); }

/* Le tiroir mobile ne se refermait que par la navigation : une membre qui
   l'ouvrait par curiosité y était prisonnière. */
.sidebar-voile { display: none; }

@media (max-width: 880px) {
  .sidebar-voile.ouvert {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(36,18,56,0.45);
    z-index: 99;
  }
  /* La jauge et le bouton se disputaient 20 px de marge à 375 px. */
  .topbar-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  .sidebar { transition: none; }
}

/* ============ LA COLONNE DE GAUCHE ============
   La barre latérale fait exactement 100vh et reste collée en haut. Sur un écran
   plus haut que la fenêtre, sa colonne restait donc BLANCHE en dessous d'elle —
   visible dès qu'on descend en bas d'un écran long. Le défaut vient du
   prototype, où aucun écran n'était assez long pour le montrer.

   On peint donc la COLONNE, pas l'élément : le fond de la grille couvre toute
   la hauteur, quoi qu'il arrive en pied de page. La couleur est celle du bas du
   dégradé de la barre, donc la jonction est invisible. */

@media (min-width: 881px) {
  .app {
    background-image: linear-gradient(90deg, #2c1745 0 300px, transparent 300px);
  }
}

/* Sous WordPress, la barre d'administration occupe le haut de la fenêtre. */
body.admin-bar .sidebar { height: calc(100vh - 32px); top: 32px; }
body.admin-bar .topbar { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .sidebar { height: calc(100vh - 46px); top: 46px; }
  body.admin-bar .topbar { top: 46px; }
}

/* ── Le Cercle de leadership ───────────────────────────────────────────────
   Reprises du prototype dédié. Deux choses n'en viennent pas :

   · les pastilles « À RÉALISER » et « À VENIR » sont écartées — elles
     affirmeraient un calendrier qui n'existe pas, chaque Cercle organisant
     lui-même ses rencontres ;
   · la préparation passe par <details>, que le navigateur ouvre au clavier et
     que les lecteurs d'écran annoncent, au lieu d'un bouton et de JavaScript.
   ────────────────────────────────────────────────────────────────────────── */
.cercle-belongs{ border-left:2.5px solid var(--rose); padding:2px 0 2px 22px; margin:22px 0 30px 0; }
.cercle-belongs p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:var(--violet-deep); line-height:1.4; }
.how-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:6px; }
.how-item{ background:#fff; border-radius:16px; padding:22px 18px; box-shadow:var(--shadow); }
.how-ic{ width:36px; height:36px; border-radius:10px; background:var(--lavender); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--violet); margin-bottom:14px; }
.how-title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:16px; color:var(--violet); margin-bottom:5px; }
.how-text{ font-size:12px; color:var(--gray); line-height:1.55; }
.how-note{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--gray); max-width:640px; margin:18px 0 8px 0; line-height:1.5; }
.pill-row{ margin-top:14px; }
.meeting-card{ background:#fff; border-radius:var(--radius); padding:26px 28px; box-shadow:var(--shadow); margin-bottom:16px; }
.meeting-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.meeting-num{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--rose-mauve); font-weight:600; margin-bottom:5px; }
.meeting-title{ font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--violet); }
.meeting-after{ font-size:11.5px; color:var(--gray-soft); margin-top:3px; }
.meeting-desc{ font-size:13.5px; color:var(--ink); line-height:1.6; margin:14px 0 18px 0; max-width:540px; }
.meeting-status{ display:inline-block; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600; padding:5px 13px; border-radius:14px; white-space:nowrap; flex-shrink:0; }
.meeting-prep{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.meeting-prep-label{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--violet); font-weight:600; margin-bottom:12px; }
.meeting-prep ol{ padding-left:19px; }
.meeting-prep li{ font-size:13.5px; color:var(--ink); margin-bottom:9px; line-height:1.55; }
.canvas-row{ display:flex; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
.canvas-step{ flex:1; min-width:190px; background:#fff; border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
.canvas-time{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:17px; color:var(--rose-mauve); margin-bottom:6px; }
.canvas-title{ font-size:13px; font-weight:500; color:var(--violet); margin-bottom:4px; }
.canvas-text{ font-size:12px; color:var(--gray); line-height:1.5; }
.canvas-note{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--gray); max-width:640px; margin-top:16px; line-height:1.5; }
.rules-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:8px; }
.rule-item{ display:flex; gap:14px; background:#fff; border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
.rule-num{ font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:var(--rose-soft); flex-shrink:0; line-height:1.2; }
.rule-title{ font-size:13.5px; font-weight:600; color:var(--violet); margin-bottom:3px; }
.rule-text{ font-size:12px; color:var(--gray); line-height:1.5; }
.nb-eyebrow{ font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--rose-mauve); font-weight:600; margin-bottom:4px; }
.mini-textarea{ width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; font-family:'Jost',sans-serif; font-size:13px; resize:vertical; min-height:60px; outline:none; }
.mini-textarea:focus{ border-color:var(--rose-mauve); }

/* Le dépliant natif prend l'allure du bouton fantôme du prototype. */
.meeting-prep summary{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:transparent; color:var(--violet); border:1.5px solid var(--violet); border-radius:30px; padding:9px 18px; font-size:12px; font-family:'Jost',sans-serif; list-style:none; }
.meeting-prep summary::-webkit-details-marker{ display:none; }
/* Le chevron est DESSINÉ, pas écrit : Jost ne porte pas U+2304, et le
   navigateur allait le chercher dans une police de secours — d'où un signe
   d'une autre famille, mal aligné sur la ligne de base. */
.meeting-prep summary::after{ content:''; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s; }
.meeting-prep[open] summary::after{ transform:rotate(225deg) translate(-1px,-1px); }
.meeting-prep summary:focus-visible{ outline:2px solid var(--rose-mauve); outline-offset:3px; }
.meeting-prep[open]{ margin-top:4px; }