/* La méthode — mise en page commune au site (membre-methode.html) et à l'app (app.html), 17/10/2026.
   Chargée APRÈS membre-fun.css, comme l'était le bloc <style> de la page. */
/* =====================================================================
   MÉTHODE V2 — « le chemin » : visuel, doux, guidé.
   ⚠️ Aucun contenu de la méthode ici : tout vient de FLY_METHODE (serveur).
   ===================================================================== */
.mv{ max-width:860px; margin:0 auto; }
.mv section{ scroll-margin-top:84px; }

/* ---- apparitions douces ---- */
.mv-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.mv-reveal.in{ opacity:1; transform:none; }

/* ---- hero ---- */
.mv-hero{ position:relative; text-align:center; padding:1.6rem 0 1.8rem; border-radius:var(--radius); overflow:hidden; }
.mv-hero::before{
  content:""; position:absolute; inset:0; background:var(--tint); opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}
.mv-hero > *{ position:relative; }
.mv-hero .eyebrow{ font-size:clamp(1.65rem,4.4vw,2.5rem); }
.mv-hero h1{ margin:.15em 0 .35em; text-wrap:balance; }
.mv-titre-appui{
  display:block; margin-top:.5em;
  font-family:var(--font-mono); font-weight:800; font-size:.34em;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-sur-teinte);
}
.mv-titre-appui::before{
  content:""; display:block; width:38px; height:2px; margin:0 auto .8em;
  border-radius:2px; background:var(--accent); opacity:.55;
}
.mv-hero .lead{ max-width:560px; margin:0 auto; }

/* ---- sommaire (chips) ---- */
.mv-chips{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1.3rem 0 .4rem; }
.mv-chips a{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.84rem; font-weight:700; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.34em .95em .34em .34em; background:var(--white);
  box-shadow:0 2px 8px rgba(22,22,26,.05);
  transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
/* la couleur vit dans la pastille de l'icône, pas dans une bordure teintée */
.mv-chips a > svg{
  flex:none; width:28px; height:28px; padding:5.5px; box-sizing:border-box;
  border-radius:999px; background:var(--tint); color:var(--ink);
}
.mv-chips a:hover{ border-color:var(--accent); transform:translateY(-1px); box-shadow:0 7px 18px rgba(22,22,26,.1); }

/* ---- têtes de section ---- */
.mv-tete{ text-align:center; margin:2.6rem 0 1.2rem; }
.mv-tete .hand{ display:block; font-family:var(--hand); font-weight:600; font-size:1.45rem; color:var(--accent-deep); transform:rotate(-1.2deg); margin-bottom:.1em; }
.mv-tete h2{ margin:0; font-size:clamp(24px,4.4vw,32px); }

/* ---- LE DUO (les deux types de journée) ---- */
.mv-duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .mv-duo{ grid-template-columns:1fr; } }
/* Même grammaire que la carte « Le principe » : dégradé très doux vers le blanc,
   liseré teinté, grand rayon. Le rose est remplacé par l'ambre : plus gourmand,
   et ça ne fait plus « produit pour ado ». */
.mv-jour{
  border:1px solid var(--line); border-radius:26px; padding:26px 24px 18px;
  position:relative; overflow:hidden; box-shadow:0 16px 44px rgba(22,22,26,.08);
  transition:transform .22s var(--ease-snap,ease), box-shadow .22s ease;
}
.mv-jour:hover{ transform:translateY(-3px); box-shadow:0 22px 54px rgba(22,22,26,.12); }
.mv-jour.leger{ background:linear-gradient(165deg, rgba(55,189,248,.13), var(--white) 62%); border-color:rgba(55,189,248,.28); }
.mv-jour.plaisir{ background:linear-gradient(165deg, rgba(255,212,73,.20), var(--white) 62%); border-color:rgba(224,168,20,.30); }
/* l'icône dans une bulle, comme partout ailleurs */
.mv-jour .mj-emoji{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px;
  background:var(--white); border:1px solid var(--line); margin-bottom:.7em;
}
.mv-jour .mj-emoji svg{ width:26px; height:26px; }
.mv-jour.leger .mj-emoji{ color:var(--accent-sur-teinte); }
.mv-jour.plaisir .mj-emoji{ color:#B8860B; }
.mv-jour h3{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:1.5rem; margin:0 0 .1em; }
.mv-jour .mj-sous{ font-family:var(--hand); font-weight:600; font-size:1.25rem; margin:0 0 .6em; }
.mv-jour.leger .mj-sous{ color:var(--accent-sur-teinte); }
.mv-jour.plaisir .mj-sous{ color:#B8860B; }
.mv-jour .mj-val{ font-weight:700; color:var(--ink); margin:0; }
.mv-jour .mj-plus{
  margin-top:.9rem; width:100%; background:none; border:none; cursor:pointer;
  font:inherit; font-weight:700; font-size:.9rem; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; gap:.45em; padding:.55em 0;
  border-top:1px dashed rgba(22,22,26,.16);
}
.mv-jour .mj-plus .chev{ transition:transform .25s ease; }
.mv-jour.open .mj-plus .chev{ transform:rotate(180deg); }
.mv-jour .mj-detail{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.mv-jour.open .mj-detail{ max-height:600px; }
.mv-jour .mj-detail p{ color:var(--ink-soft); margin:.7em 0 .4em; }
.mv-jour .mj-detail ul{ list-style:none; margin:0; padding:0; }
.mv-jour .mj-detail li{ padding:.5em 0 .5em 1.7em; position:relative; border-top:1px solid var(--line); }
.mv-jour .mj-detail li::before{ content:"\2022"; position:absolute; left:.2em; font-weight:800; }
.mv-jour.leger .mj-detail li::before{ color:var(--accent-sur-teinte); }
.mv-jour.plaisir .mj-detail li::before{ color:#B8860B; }

/* ---- ruban du rythme ---- */
.mv-ruban{ text-align:center; margin:1.8rem 0 .4rem; }
.mv-ruban .pt svg{ width:22px; height:22px; }
.mv-ruban .pt.l{ background:rgba(55,189,248,.14); border-color:rgba(55,189,248,.34); color:var(--accent-sur-teinte); }
.mv-ruban .pt.p{ background:rgba(255,212,73,.20); border-color:rgba(224,168,20,.32); color:#B8860B; }
.mv-ruban .points{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.mv-ruban .pt{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--white);
  animation:mvPulse 3.6s ease-in-out infinite;
}
.mv-ruban .pt.l{ background:rgba(55,189,248,.08); border-color:var(--accent); }
.mv-ruban .pt.p{ background:rgba(255,212,73,.20); border-color:#E0A814; }
.mv-ruban .pt:nth-child(1){ animation-delay:0s; } .mv-ruban .pt:nth-child(2){ animation-delay:.25s; }
.mv-ruban .pt:nth-child(3){ animation-delay:.5s; } .mv-ruban .pt:nth-child(4){ animation-delay:.75s; }
.mv-ruban .pt:nth-child(5){ animation-delay:1s; }  .mv-ruban .pt:nth-child(6){ animation-delay:1.25s; }
.mv-ruban .pt:nth-child(7){ animation-delay:1.5s; }
@keyframes mvPulse{ 0%,100%{ transform:scale(1); } 8%{ transform:scale(1.16); } 16%{ transform:scale(1); } }
.mv-ruban .hand{ display:block; font-family:var(--hand); font-weight:600; font-size:1.35rem; color:var(--sage-deep); margin-top:.55em; transform:rotate(-1deg); }

/* ---- onglets pourquoi ça marche ---- */
.mv-tabs{ display:flex; gap:.6rem; justify-content:center; margin-bottom:1.1rem; flex-wrap:wrap; }
.mv-tab{
  font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
  border:1.5px solid var(--line); background:var(--white); color:var(--ink-soft);
  border-radius:var(--r-pill); padding:.6em 1.3em; transition:all .2s ease;
}
.mv-tab{ position:relative; display:inline-flex; align-items:center; gap:.5em; }
.mv-tab svg{ width:18px; height:18px; }
.mv-tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--canvas); }
.mv-tab[aria-selected="true"]::after{
  content:""; position:absolute; left:18%; right:18%; bottom:-6px; height:3px;
  border-radius:999px; background:var(--accent);
}
.mv-panel{ display:none; }
.mv-panel.on{ display:block; animation:mvIn .35s ease both; }
@keyframes mvIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* la descente (étapes du régime classique) */
.mv-descente{ position:relative; margin:0; padding:0; list-style:none; }
.mv-descente li{
  position:relative; padding:0 0 1.2rem 3.2rem; counter-increment:mvstep;
}
.mv-descente li::before{
  content:counter(mvstep); position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:1rem; background:rgba(255,154,61,.16); color:var(--accent-deep);
  border:1.5px solid rgba(255,154,61,.4);
}
.mv-descente li:not(:last-child)::after{
  content:""; position:absolute; left:17px; top:40px; bottom:2px;
  border-left:2px dashed var(--line);
}
.mv-descente li p{ margin:.35em 0 0; color:var(--ink-soft); }
.mv-bilan{
  border-radius:16px; padding:16px 18px; margin-top:1rem; font-weight:600;
}
.mv-bilan.chaud{ background:rgba(255,154,61,.14); border:1px solid var(--prism-orange); color:var(--ink); }
.mv-bilan.vert{ background:rgba(55,189,248,.08); border:1px solid var(--accent); color:var(--sage-deep); }
.mv-panel .lead2{ color:var(--ink-soft); margin:.2em 0 .9em; }

/* ---- semaine strip ---- */
.mv-semaine{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
@media (max-width:560px){ .mv-semaine{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mv-sem-j{
  border-radius:14px; border:1px solid var(--line); background:#fff; text-align:center;
  padding:.7em .2em .6em; font-weight:700;
}
.mv-sem-j .n{ display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint);
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.mv-sem-j .e{ display:grid; place-items:center; margin:.5em auto .35em; }
.mv-sem-j .e svg{ width:22px; height:22px; }
.mv-sem-j .t{ display:block; font-size:.74rem; font-weight:700; }
.mv-sem-j.l{ background:linear-gradient(165deg, rgba(55,189,248,.13), var(--white) 70%);
  border-color:rgba(55,189,248,.28); color:var(--accent-sur-teinte); }
.mv-sem-j.p{ background:linear-gradient(165deg, rgba(255,212,73,.20), var(--white) 70%);
  border-color:rgba(224,168,20,.30); color:#B8860B; }
.mv-note-simple{
  margin-top:1.1rem; background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:18px 20px; position:relative;
}
.mv-note-simple .hand{ font-family:var(--hand); font-weight:600; font-size:1.35rem; color:var(--accent-deep); display:block; margin-bottom:.15em; transform:rotate(-1deg); }
.mv-note-simple p{ margin:0; color:var(--ink-soft); }

/* ---- règle d'or ---- */
.mv-regle{ text-align:center; }
.mv-citation{
  font-family:var(--hand); font-weight:600; font-size:clamp(1.7rem,5vw,2.4rem);
  color:var(--accent-deep); margin:.2em auto .8em; max-width:520px; transform:rotate(-1.2deg);
}
.mv-equilibre{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; text-align:left; }
@media (max-width:700px){ .mv-equilibre{ grid-template-columns:1fr; } }
.mv-eq{
  border-radius:16px; border:1px solid var(--line); background:var(--white); padding:14px 16px;
  font-size:.93rem; color:var(--ink-soft);
}
.mv-eq b{ color:var(--ink); }

/* ---- bien choisir : oui / non ---- */
.mv-choix .ic svg{ width:16px; height:16px; }
.puce-ok{ display:inline-grid; place-items:center; width:18px; height:18px;
  color:var(--accent-sur-teinte); vertical-align:-3px; margin-right:.4em; }
.puce-ok svg{ width:16px; height:16px; }
.mv-choix{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mv-choix li{
  display:flex; gap:.8em; align-items:flex-start; background:var(--white);
  border:1px solid var(--line); border-radius:14px; padding:.8em 1em; color:var(--ink-soft);
}
.mv-choix .ic{
  flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:.9rem; margin-top:.05em;
}
.mv-choix li.oui .ic{ background:rgba(55,189,248,.12); color:var(--accent-sur-teinte); }
.mv-choix li.non .ic{ background:rgba(184,134,11,.12); color:#B8860B; }

/* ---- alliés du quotidien ---- */
.mv-allies{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:640px){ .mv-allies{ grid-template-columns:1fr; } }
.mv-allie{
  position:relative; overflow:hidden;
  border-radius:16px; border:1px solid var(--line); background:var(--white);
  padding:16px 18px 16px 22px;
  transition:transform .18s ease, box-shadow .18s ease;
}
/* liseré prism sur la tranche gauche : la touche de couleur qui manquait */
.mv-allie::before{
}
.mv-allie:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(22,22,26,.11); }
/* l'emoji dans une pastille teintée prism plutôt que posé nu sur le blanc */
.mv-allie .e{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; font-size:1.35rem;
  background:var(--tint); border:1px solid var(--line);
}
.mv-allie h4{ margin:.25em 0 .2em; font-size:1.02rem; }
.mv-allie p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* ---- FAQ ---- */
.mv-faq .faq-item{ border:1px solid rgba(55,189,248,.22); border-radius:16px; background:var(--white); margin-bottom:.7rem; overflow:hidden; }
.mv-faq summary{
  cursor:pointer; list-style:none; font-weight:700; padding:1em 3em 1em 1.2em; position:relative;
}
.mv-faq summary::-webkit-details-marker{ display:none; }
.mv-faq summary::after{
  content:"+"; position:absolute; right:1.1em; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:rgba(55,189,248,.14); color:var(--accent-sur-teinte); font-weight:800; transition:transform .25s ease;
}
.mv-faq details[open] summary::after{ content:"–"; transform:translateY(-50%) rotate(180deg); }
.mv-faq details[open]{ background:linear-gradient(168deg, rgba(55,189,248,.10), var(--white) 60%);
  border-color:rgba(55,189,248,.34); box-shadow:0 10px 26px rgba(22,22,26,.06); }
.mv-faq .faq-a{ padding:0 1.2em 1.1em; color:var(--ink-soft); }
.mv-faq .faq-a p{ margin:0; }

/* ---- CTA final ---- */
/* Bloc de clôture : même carte que « Le principe » et que les deux jours. */
.mv-fin{
  text-align:center; border-radius:26px; padding:clamp(2rem,6vw,3rem) clamp(1.3rem,5vw,2.4rem);
  background:linear-gradient(165deg, rgba(55,189,248,.13), var(--white) 62%);
  border:1px solid rgba(55,189,248,.28); box-shadow:0 16px 44px rgba(22,22,26,.09);
  margin-top:2.6rem;
}
.mv-fin .hand{ display:block; font-family:var(--hand); font-weight:600; font-size:1.5rem; color:var(--accent-sur-teinte); margin-bottom:.2em; }
.mv-fin h2{ margin:0 0 .4em; font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; font-size:clamp(1.45rem,5vw,2.2rem); line-height:1.15; }
.mv-fin .actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.3rem; }
.mv-fin .actions .btn{ gap:.6em; }
.mv-fin .actions .btn svg{ width:19px; height:19px; }
.mv-disclaimer{ margin-top:1.6rem; }