/* ============================================================
   ReconversionPro40 — système de design « La Méthode » (Holo)
   Crème, deux verts RP40, Inter seule, blocs arrondis posés à
   plat, pilules. Chargé par TOUTES les pages.
   La couche « compatibilité » en fin de fichier garde les noms
   de classes et variables historiques (espace, paiement, légal).
   ============================================================ */

:root{
  --cream:#f6f1e8;
  --cream-2:#fcfaf5;
  --cream-3:#ece6d9;
  --navy:#0f6e56;            /* le vert sombre RP40 : blocs forts, texte blanc lisible */
  --navy-2:#0c5b48;
  --navy-soft:#e1f5ee;
  --accent:#1d9e75;          /* le vert vif RP40 : boutons, coches, actif */
  --white:#ffffff;
  --ink:#2b2420;             /* encre brun chaud : jamais de noir pur */
  --body-text:#46403a;
  --ink-2:#6e675f;
  --ink-3:#9a948a;
  --line:#e3dccd;
  --glass:rgba(246,241,232,0.82);
  --panel-tint:rgba(43,36,32,0.05);
  --on-navy-muted:rgba(255,255,255,0.6);
  --on-navy-body:rgba(255,255,255,0.82);
  --r-pill:999px; --r-hero:24px; --r-block:18px; --r-card:16px; --r-media:14px; --r-item:12px; --r-field:10px;
  --hairline:0 0 0 1px var(--line);
  --strong:0 0 0 2px var(--accent);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--ink);font-size:17px;line-height:1.5}
::selection{background:var(--accent);color:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:600px){.wrap{padding:0 18px}}
section{margin:120px 0}
section.wrap{margin:120px auto}
@media(max-width:600px){section{margin:84px 0}section.wrap{margin:84px auto}}

/* ————— styles de texte (échelle de la charte) ————— */
.kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.display-hero{font-size:clamp(46px,7vw,92px);font-weight:800;line-height:.98;letter-spacing:-0.045em;max-width:13ch}
.display-1{font-size:clamp(40px,5.4vw,76px);font-weight:800;line-height:.98;letter-spacing:-0.04em;max-width:16ch}
.heading-1{font-size:clamp(32px,3.6vw,48px);font-weight:800;line-height:1.02;letter-spacing:-0.035em}
.heading-2{font-size:clamp(30px,3.2vw,40px);font-weight:800;line-height:1.05;letter-spacing:-0.025em}
.card-title{font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-0.02em}
.lead{font-size:21px;font-weight:500;line-height:1.5;color:var(--ink-2);max-width:34rem}
.reading{font-size:18px;line-height:1.7;color:var(--body-text);max-width:880px}
.body{font-size:17px;line-height:1.5}
.small{font-size:15px;line-height:1.45;color:var(--ink-2)}
.meta{font-size:13.5px;line-height:1.4;color:var(--ink-3)}
.number{font-size:13px;font-weight:700;color:var(--ink-3)}
.on-navy .kicker{color:var(--on-navy-muted)}
.on-navy p{color:var(--on-navy-body)}

/* ————— pilules : le seul bouton du site ————— */
.pill{
  display:inline-flex;align-items:center;gap:12px;
  border-radius:var(--r-pill);padding:16px 24px;font-size:16px;font-weight:600;
  cursor:pointer;border:none;font-family:inherit;transition:transform .2s ease;
  text-align:center;
}
.pill:hover{transform:translateY(-2px)}
.pill .dot{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.pill-pleine{background:var(--accent);color:#fff}
.pill-pleine .dot{background:#fff;color:var(--accent)}
.pill-claire{background:#fff;color:var(--navy)}
.pill-claire .dot{background:var(--navy);color:#fff}
.pill-contour{background:var(--white);color:var(--navy);box-shadow:var(--hairline)}
.pill-contour .dot{background:var(--navy-soft);color:var(--navy)}
.pill-verre{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(30px)}
.pill-verre .dot{background:rgba(255,255,255,.9);color:var(--navy)}
.pill-large{padding:20px 28px}
@media(max-width:600px){.pills-hero .pill{width:100%;justify-content:center}}

/* ————— en-tête en verre (landing : transparent sur la photo) ————— */
header.entete,nav#barre{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--glass);backdrop-filter:blur(24px);
  box-shadow:0 1px 0 rgba(43,36,32,0.06);
  transition:background .4s, box-shadow .4s;
}
.header-in{max-width:1200px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between}
@media(max-width:600px){.header-in{padding:12px 18px}}
.logo{font-weight:800;font-size:19px;letter-spacing:-0.02em;color:var(--ink)}
.menu{display:flex;align-items:center;gap:4px;background:var(--panel-tint);border-radius:var(--r-pill);padding:4px;list-style:none}
.menu a{font-size:14px;font-weight:600;padding:8px 16px;border-radius:var(--r-pill);color:var(--ink-2);white-space:nowrap;display:inline-block}
.menu a:hover{color:var(--ink)}
.menu a.actif{background:var(--accent);color:#fff}
@media(max-width:700px){.menu li:not(:has(.actif,.lien-retour)){display:none}.menu a{font-size:13px;padding:7px 13px}}
/* transparent tant qu'on est sur la photo du hero (landing seulement) */
header.entete.sur-photo:not(.posee){background:transparent;box-shadow:none;backdrop-filter:none}
header.entete.sur-photo:not(.posee) .logo{color:#fff}
header.entete.sur-photo:not(.posee) .menu{background:rgba(255,255,255,.14)}
header.entete.sur-photo:not(.posee) .menu a{color:rgba(255,255,255,.85)}
header.entete.sur-photo:not(.posee) .menu a:hover{color:#fff}
header.entete.sur-photo:not(.posee) .menu a.actif{background:var(--accent);color:#fff}

/* ————— hero photographique ————— */
section.hero-photo{
  margin:0;min-height:92svh;display:flex;align-items:flex-end;
  background:linear-gradient(rgba(25,20,16,.18), rgba(25,20,16,.52)), url(img/hero.jpg) center/cover;
  padding:0 0 84px;
}
.hero-photo .kicker{color:rgba(255,255,255,.75)}
.hero-photo h1{color:#fff;max-width:14ch}
.hero-photo .lead{color:rgba(255,255,255,.9)}
.pills-hero{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
@media(max-width:600px){section.hero-photo{min-height:86svh;padding-bottom:56px}}

/* ————— grilles et cartes ————— */
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:960px){.grille,.grille-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grille,.grille-2,.grille-3{grid-template-columns:1fr}}
.carte{background:var(--white);box-shadow:var(--hairline);border-radius:var(--r-card);padding:24px;transition:transform .2s}
.carte:hover{transform:translateY(-2px)}
.carte p{margin-top:8px}
.carte-plate{background:var(--cream-3);box-shadow:none}
.carte-soft{background:var(--navy-soft);box-shadow:none}
.photo-carte{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r-media);margin-bottom:18px;display:block}

/* ————— tête de section ————— */
.tete-section{margin-bottom:40px}
.tete-section .kicker{display:block;margin-bottom:18px}
.tete-section .lead{margin-top:16px}

/* ————— bloc vert (règle / question / offre) ————— */
.bloc-navy{background:var(--navy);color:#fff;border-radius:var(--r-hero);padding:48px}
@media(max-width:600px){.bloc-navy{padding:28px 24px}}
.bloc-navy .kicker{color:var(--on-navy-muted);display:block;margin-bottom:14px}
.bloc-navy .regle{font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.25;letter-spacing:-0.02em}
.bloc-navy p{color:var(--on-navy-body);margin-top:14px;font-size:17px}
.bloc-navy .pill{margin-top:24px}

/* ————— bande verte flottante ————— */
.bande{
  background:var(--navy);color:#fff;border-radius:var(--r-hero);
  margin:0 24px;padding:44px 32px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;
}
@media(max-width:960px){.bande{grid-template-columns:repeat(2,1fr)}}
.bande b{font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-0.025em;display:block;line-height:1.05}
.bande span{font-size:15px;color:rgba(255,255,255,.72);display:block;margin-top:8px;line-height:1.45}

/* ————— listes à coches / croix ————— */
.pq-liste{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.pq-liste li{display:flex;gap:10px;font-size:15px;color:var(--ink-2);line-height:1.5}
.pq-liste .oui{color:var(--accent);font-weight:700;flex-shrink:0}
.pq-liste .non{color:var(--ink-3);font-weight:700;flex-shrink:0}
.liste-fleches{list-style:none;display:flex;flex-direction:column;gap:9px}
.liste-fleches li{display:flex;gap:9px;font-size:15px;color:var(--ink-2);line-height:1.5}
.liste-fleches li::before{content:'→';color:var(--accent);font-weight:700;flex-shrink:0}
.liste-coches li::before{content:'✓'}

/* ————— step cards ————— */
.step h3{margin-top:6px}
.step p{color:var(--ink-2);font-size:15px;margin-top:10px}

/* ————— témoignages ————— */
.temo{display:flex;flex-direction:column;gap:14px}
.temo p{font-size:17px;line-height:1.6;color:var(--body-text)}
.temo .qui{margin-top:auto;padding-top:14px}
.temo .qui b{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);display:block}
.temo .qui span{font-size:13.5px;color:var(--ink-3)}
.badge{display:inline-block;font-size:13px;font-weight:600;background:var(--navy-soft);color:var(--navy);border-radius:var(--r-pill);padding:5px 12px;margin-top:10px;width:max-content}

/* ————— StartCard Céline ————— */
.startcard{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch}
@media(max-width:960px){.startcard{grid-template-columns:1fr}}
.portrait{background:var(--navy-2);border-radius:var(--r-media);padding:32px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.portrait .prenom{font-size:clamp(44px,4.6vw,64px);font-weight:800;letter-spacing:-0.035em;line-height:1;color:#fff}
.portrait .ligne-vie{font-size:15px;color:var(--on-navy-body);line-height:1.55}
.portrait .parcours{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.portrait .parcours li{display:flex;gap:10px;font-size:15px;color:var(--on-navy-body)}
.portrait .parcours li::before{content:'→';color:var(--accent);font-weight:700;flex-shrink:0}

/* ————— mouvements : alternance de fonds ————— */
.mouvement{background:var(--cream-2);padding:110px 0;box-shadow:0 1px 0 var(--line), 0 -1px 0 var(--line)}
.mouvement section{margin:72px auto}
.mouvement > section:first-of-type{margin-top:0}
.mouvement > section:last-of-type{margin-bottom:0}
@media(max-width:600px){.mouvement{padding:72px 0}.mouvement section{margin:56px auto}}

/* ————— offres / prix ————— */
.prix-carte .montant{font-size:clamp(34px,3.4vw,44px);font-weight:800;letter-spacing:-0.03em;margin-top:14px}
.prix-carte .note{font-size:13.5px;color:var(--ink-3);margin-top:2px}
.prix-carte ul{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:9px}
.prix-carte li{display:flex;gap:9px;font-size:15px;color:var(--ink-2);line-height:1.5}
.prix-carte li::before{content:'✓';color:var(--accent);font-weight:700;flex-shrink:0}
.grille-2 .prix-carte{display:flex;flex-direction:column}
.grille-2 .prix-carte ul{flex:1}
.grille-2 .prix-carte .pill{margin-top:auto;width:max-content}
.offre-navy{
  background:var(--navy);color:#fff;border-radius:20px;padding:48px;
  display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;
}
@media(max-width:960px){.offre-navy{grid-template-columns:1fr;padding:32px 24px}}
.offre-navy .montant{font-size:clamp(48px,6vw,80px);font-weight:800;letter-spacing:-0.035em;line-height:1}
.offre-navy ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:9px}
.offre-navy li{display:flex;gap:9px;font-size:15px;color:var(--on-navy-body);line-height:1.5}
.offre-navy li::before{content:'✓';color:var(--accent);font-weight:700;flex-shrink:0}
.offre-navy .cote{display:flex;flex-direction:column;align-items:flex-start;gap:18px}

/* ————— formulaires ————— */
.form-carte{background:var(--white);box-shadow:var(--hairline);border-radius:var(--r-card);padding:32px;max-width:560px;margin:40px auto 0}
label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px}
input,select,textarea{
  width:100%;background:var(--cream-2);border:none;box-shadow:var(--hairline);border-radius:var(--r-field);
  padding:14px 16px;font-size:16px;font-family:inherit;color:var(--ink);outline:none;
}
input:focus,select:focus,textarea:focus{box-shadow:var(--strong)}
input.erreur{box-shadow:0 0 0 2px #c0392b}
.form-ligne,.champs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:520px){.form-ligne,.champs{grid-template-columns:1fr}}
.form-carte .pill{width:100%;justify-content:center;margin-top:18px}
.mention{font-size:13.5px;color:var(--ink-3);text-align:center;margin-top:12px}
.alerte{display:none;font-size:14.5px;color:#8a2a1f;background:#f8e7e2;border-radius:var(--r-field);padding:12px 14px;margin-bottom:14px;line-height:1.5}
.alerte.on{display:block}
.info{font-size:14.5px;color:var(--navy);background:var(--navy-soft);border-radius:var(--r-field);padding:13px 15px;line-height:1.55}

/* ————— FAQ ————— */
details{background:var(--white);box-shadow:var(--hairline);border-radius:var(--r-card);padding:0 24px;margin-bottom:10px}
summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;font-size:17px;font-weight:600;position:relative;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--navy-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:600}
details[open] summary::after{content:'−'}
details p{padding:0 0 20px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:720px}

/* ————— footer ————— */
footer,.pied-site{margin:120px 0 0;background:var(--cream-2);box-shadow:0 -1px 0 var(--line);padding:0}
.footer-in,.pied{max-width:1200px;margin:0 auto;padding:48px 32px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-liens{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.footer-liens a{font-size:13.5px;color:var(--ink-2);background:var(--panel-tint);border-radius:var(--r-pill);padding:6px 14px;white-space:nowrap}
.footer-liens a:hover{color:var(--navy)}
.footer-bas,.pied-bas{max-width:1200px;margin:0 auto;padding:0 32px 28px;font-size:13px;color:var(--ink-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pied-bas a{color:var(--ink-2)}
.pied-bas a:hover{color:var(--navy)}

/* ============================================================
   COUCHE DE COMPATIBILITÉ : les pages existantes (espace membre,
   paiement, légal, visionneuse) gardent leurs classes et jetons.
   ============================================================ */
:root{
  --vert:var(--accent);
  --vert-sombre:var(--navy);
  --menthe:#9bdcc3;
  --encre:var(--ink);
  --encre-douce:var(--ink-2);
  --creme:var(--cream);
  --matin:var(--cream-2);
  --sable:var(--cream-3);
  --nuit:var(--navy);
  --brume:var(--navy-2);
  --marron:var(--ink);
  --serif:'Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --surface:var(--white);
  --bord:1px solid var(--line);
  --ombre:var(--hairline);
  --ombre-haute:var(--hairline);
  --rayon:16px;
}
body{overflow-x:clip}
.grain,#chemin,#tdm{display:none}
.rev{opacity:1;transform:none;filter:none}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tete{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.tete .idx{font-weight:700;font-size:13px;color:var(--accent);flex-shrink:0}
.tete::after{content:'';flex:1;height:1px;background:var(--line);transform:translateY(-4px)}
.h-page{font-size:clamp(34px,4.4vw,56px);font-weight:800;line-height:1.02;letter-spacing:-0.035em;color:var(--ink)}
.h-bloc{font-size:clamp(24px,2.8vw,32px);font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.intro{color:var(--ink-2);margin-top:14px;max-width:36rem;font-size:19px;font-weight:500;line-height:1.5}
.muted{color:var(--ink-2)}
.page{max-width:1200px;margin:0 auto;padding:7rem 32px 5rem}
.page.etroite{max-width:760px}
@media(max-width:600px){.page{padding:6rem 18px 3.5rem}}
nav#barre{padding:0}
nav#barre > *{max-width:1200px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between}
nav#barre{display:flex;flex-direction:column}
nav#barre .nav-logo{font-weight:800;font-size:19px;letter-spacing:-0.02em;color:var(--ink)}
nav#barre .nav-links{display:flex;align-items:center;gap:4px;background:var(--panel-tint);border-radius:var(--r-pill);padding:4px;list-style:none}
nav#barre .nav-links a{font-size:14px;font-weight:600;padding:8px 16px;border-radius:var(--r-pill);color:var(--ink-2);white-space:nowrap;display:inline-block}
nav#barre .nav-links a:hover{color:var(--ink)}
nav#barre .nav-links a.cta{background:var(--accent);color:#fff}
nav#barre{flex-direction:row;justify-content:space-between;max-width:none;padding:14px max(32px,calc((100vw - 1200px)/2 + 32px))}
@media(max-width:600px){nav#barre{padding:12px 18px}}
.lien-retour{font-size:14px;font-weight:600;color:var(--ink-2)}
.lien-retour:hover{color:var(--ink)}
.entete-page{margin-bottom:40px}
.entete-page .h-page{margin-top:10px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.duo{grid-template-columns:1fr}}
.deux-colonnes{display:grid;grid-template-columns:1fr 400px;gap:32px;align-items:start}
@media(max-width:900px){.deux-colonnes{grid-template-columns:1fr}}
.panneau{background:var(--white);box-shadow:var(--hairline);border-radius:var(--r-card)}
.panneau.accent{box-shadow:var(--hairline);border-left:4px solid var(--accent)}
.panneau.plat{box-shadow:none;background:transparent;border:1px dashed var(--line);border-radius:var(--r-card)}
.panneau-nuit{background:var(--navy);color:#fff;border-radius:var(--r-hero);box-shadow:none}
.panneau-nuit .eyebrow{color:var(--on-navy-muted)}
.panneau-nuit h2,.panneau-nuit h3{color:#fff}
.panneau-nuit .muted{color:var(--on-navy-body)}
.pastille{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);background:var(--navy-soft);color:var(--navy)}
.pastille.nuit{background:var(--navy);color:#fff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:600;font-size:16px;
  padding:16px 24px;border-radius:var(--r-pill);border:none;cursor:pointer;font-family:inherit;
  transition:transform .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-lumiere,.btn-plein{background:var(--accent);color:#fff}
.btn-contour{background:var(--white);color:var(--navy);box-shadow:var(--hairline)}
.btn-marron{background:var(--navy);color:#fff}
.btn-bloc{display:flex;width:100%}
.fl{display:inline-block;transition:transform .2s}
a:hover .fl,button:hover .fl{transform:translateX(4px)}
.porte{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:16px;font-weight:600;color:var(--navy);border-bottom:2px solid var(--accent);padding-bottom:2px}
details.pli{background:var(--white);box-shadow:var(--hairline);border-radius:var(--r-card);padding:0 24px;margin-bottom:10px}
details.pli summary{font-weight:600}
footer.pied-site{margin-top:120px}
.pied h4{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.pied a{color:var(--ink-2);font-size:14.5px}
.pied a:hover{color:var(--navy)}
.pied .marque{font-weight:800;font-size:19px;letter-spacing:-0.02em;color:var(--ink)}
.pied .devise{font-size:14.5px;color:var(--ink-2);margin-top:10px;max-width:26rem;line-height:1.6}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pill,.btn,.fl,.carte{transition:none}
}