/* ═══════════════════════════════════════════════════════════════════════════
   ESPACE CLIENT — prolongement du site Emotion (assets.alsemotion.com)
   Repris de emotion-global.css : palette prune, Cormorant Garamond + Inter Tight,
   respiration (breathRing/breathGlow, 16s). Sert TOUTES les pages client.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter+Tight:wght@300;400;500&display=swap');

:root{
  --ink-deep:#2A0F14; --ink:#38111A; --ink-soft:#45181D;
  --bordeaux:#45181D; --bordeaux-w:#5E2028; --copper:#B36D53;
  --rose:#C48D76; --rose-soft:#D9C2AF; --rose-faint:rgba(196,141,118,.16);
  --cream:#EDE3D8; --cream-mid:rgba(237,227,216,.78); --cream-mute:rgba(237,227,216,.55);
  --cream-faint:rgba(237,227,216,.32); --cream-line:rgba(237,227,216,.10);
  --vert:#8bbf9a; --bordure:rgba(196,141,118,.18);
  --font-display:'Cormorant Garamond',Georgia,serif; --font-body:'Inter Tight',-apple-system,system-ui,sans-serif;
  --max:920px; --ease:cubic-bezier(.16,1,.3,1); --breath:16s;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink-deep)}
body{font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.6;color:var(--cream);background:var(--ink-deep);overflow-x:hidden;min-height:100vh}
img{max-width:100%;display:block} a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

h1,h2,h3{font-family:var(--font-display);font-weight:300;line-height:1.15}
em{font-style:italic;color:var(--rose)}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important}}

/* respiration du site */
@keyframes breathGlow{0%{opacity:.14;filter:blur(70px)}25%{opacity:.4;filter:blur(46px)}50%{opacity:.4;filter:blur(46px)}75%{opacity:.14;filter:blur(70px)}100%{opacity:.14;filter:blur(70px)}}
@keyframes breathRing{0%{transform:translate(-50%,-50%) scale(.92);opacity:0}25%{transform:translate(-50%,-50%) scale(1.08);opacity:.4}50%{transform:translate(-50%,-50%) scale(1.08);opacity:.4}75%{transform:translate(-50%,-50%) scale(.92);opacity:0}100%{transform:translate(-50%,-50%) scale(.92);opacity:0}}
@keyframes slowbreath{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.glow{position:fixed;top:-12%;left:50%;width:70vw;height:70vw;max-width:820px;max-height:820px;transform:translateX(-50%);
  background:radial-gradient(circle,var(--copper),transparent 62%);opacity:.16;z-index:0;pointer-events:none;animation:breathGlow var(--breath) var(--ease) infinite}

/* ── Header (façon site) ── */
.header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:20px 44px;border-bottom:1px solid var(--cream-line)}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:36px;width:auto}
.logo .w{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.02em}
.logo .w em{color:var(--rose)}
.logo .s{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-mute);font-family:var(--font-body)}
.nav{display:flex;gap:24px;align-items:center}
.nav a{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-mute)}
.nav a:hover{color:var(--rose)}
.nav a.cta{color:var(--cream);background:var(--bordeaux);border:1px solid var(--bordeaux);padding:9px 16px;border-radius:999px}
.nav a.cta:hover{background:var(--copper);border-color:var(--copper)}

/* ── Layout ── */
.main{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 32px 90px}
.retour{display:inline-block;margin:38px 0 8px;color:var(--cream-mute);font-size:.9rem}
.retour:hover{color:var(--rose)}
.intro{color:var(--cream-mid);font-family:var(--font-display);font-size:1.15rem;margin-top:10px}
.empty,.attente{color:var(--cream-mute);font-style:italic;font-family:var(--font-display);font-size:1.1rem;margin:18px 0}
.aide{font-size:.86rem;color:var(--cream-mute)}
.eyebrow{font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--rose);opacity:.6}

h1{font-size:clamp(38px,6vw,60px);margin:14px 0 6px}
h1 em{color:var(--rose)}
h2{font-size:clamp(24px,3.6vw,34px);color:var(--cream);margin:48px 0 18px}
h2 em{color:var(--rose)}

/* ── Composants génériques (pages compte/rdv/connexion…) ── */
.card{background:var(--ink-soft);border:1px solid var(--cream-line);border-radius:16px;padding:24px;margin-bottom:18px}
.field{margin-bottom:14px;font-size:.95rem}
.field:last-child{margin-bottom:0}
.field label{display:block;font-family:var(--font-body);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-mute);margin-bottom:3px}
.field span{font-family:var(--font-display);font-size:1.1rem}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-wrap{max-width:440px;margin:36px auto 0}
form label{display:block;font-family:var(--font-body);color:var(--cream-mute);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin:16px 0 6px}
input,select,textarea{width:100%;padding:13px 16px;background:var(--ink-deep);border:1px solid var(--cream-line);border-radius:10px;color:var(--cream);font-family:var(--font-display);font-size:1.05rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rose)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding:14px 30px;border-radius:999px;border:1px solid var(--copper);background:var(--copper);color:var(--cream);transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.btn:hover{background:var(--rose);border-color:var(--rose);transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(196,141,118,.5)}
.btn-secondaire{background:transparent;color:var(--rose);border-color:var(--rose)}
.btn-secondaire:hover{background:var(--rose-faint);color:var(--rose-soft);border-color:var(--rose-soft);box-shadow:none}
.ok{background:rgba(139,191,154,.12);border:1px solid rgba(139,191,154,.4);color:var(--vert);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:.92rem}
.error{background:rgba(196,141,118,.1);border:1px solid var(--rose);color:var(--rose-soft);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:.92rem}
.tag{font-family:var(--font-body);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--cream-line);border-radius:30px;padding:4px 11px;color:var(--cream-mute)}
.tag.publie{border-color:var(--vert);color:var(--vert)} .tag.brouillon{border-color:var(--copper);color:var(--copper)}

/* suivi (barre d'étapes générique, pages internes) */
.suivi{display:flex;gap:0;border:1px solid var(--cream-line);border-radius:30px;overflow:hidden}
.suivi .etape{flex:1;text-align:center;padding:11px 6px;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-faint);border-right:1px solid var(--cream-line)}
.suivi .etape:last-child{border-right:none}
.suivi .etape.faite{color:var(--cream-mute)} .suivi .etape.courante{background:var(--rose-faint);color:var(--rose)}
.suivi .etape .point,.suivi .etape .lbl{display:inline}

/* ── ESPACE (tableau de bord) ── */
.hello{padding:56px 0 0}
.hello h1{font-size:clamp(40px,7vw,68px);line-height:1.05}
.hello p{font-family:var(--font-display);font-size:1.25rem;color:var(--cream-mid);margin-top:14px;max-width:46ch;line-height:1.7}

.essai{position:relative;height:240px;border-radius:20px;overflow:hidden;margin:42px 0;border:1px solid var(--cream-line)}
.essai-img{position:absolute;inset:0;background-size:cover;background-position:center;animation:slowbreath 48s var(--ease) infinite}
.essai::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--ink-deep),transparent 58%);pointer-events:none}
.essai-cap{position:absolute;left:22px;bottom:16px;right:22px;z-index:2;pointer-events:none}
.essai-cap .meta{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.essai-cap small{display:block;color:var(--cream-mid);font-size:.74rem;margin-top:4px}

.compos{display:flex;flex-direction:column;gap:18px;margin-top:16px}
.compo{position:relative;display:grid;grid-template-columns:118px 1fr auto;gap:22px;align-items:center;border-radius:18px;padding:18px;overflow:hidden;
  border:1px solid var(--accent,var(--bordeaux-w));background:linear-gradient(100deg,color-mix(in srgb,var(--accent,#5E2028) 14%,var(--ink-soft)),var(--ink-soft) 70%);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.compo:hover{transform:translateY(-3px);box-shadow:0 22px 44px -22px rgba(0,0,0,.6)}
.compo .cv{width:118px;height:118px;border-radius:14px;background-size:cover;background-position:center;background-color:var(--ink-deep);border:1px solid var(--cream-line);flex:none}
.compo h3{font-style:italic;font-size:1.55rem}
.compo .cmeta{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.74rem;letter-spacing:.04em;color:var(--cream-mute)}
.pill{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--accent,var(--cream-line));border-radius:30px;padding:4px 11px;color:var(--accent,var(--cream-mid))}
.compo .go{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent,var(--rose));white-space:nowrap}

.evolve{display:flex;align-items:center;gap:20px;margin-top:34px;padding:24px 26px;border:1px solid var(--cream-line);border-radius:18px;background:var(--rose-faint)}
.evolve .txt{flex:1}
.evolve h4{font-family:var(--font-display);font-weight:400;font-size:1.35rem;margin-bottom:4px}
.evolve p{font-size:.92rem;color:var(--cream-mid)}
.toggle{width:54px;height:30px;border-radius:30px;background:var(--bordeaux-w);position:relative;flex:none;cursor:pointer;border:1px solid var(--cream-line);transition:background .3s}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--cream);transition:left .3s var(--ease)}
.toggle.on{background:var(--copper)} .toggle.on::after{left:27px}

.ecrits{margin-top:46px}
.ecrits .eyebrow{margin-bottom:18px}
.ecrit{display:block;padding:18px 0;border-top:1px solid var(--cream-line)}
.ecrit:hover h5{color:var(--rose)}
.ecrit h5{font-family:var(--font-display);font-weight:400;font-size:1.4rem;transition:color .3s}
.ecrit p{font-size:.9rem;color:var(--cream-mute);margin-top:4px}

/* ── COMPOSITION (détail) ── */
.c-titre{font-size:clamp(34px,6vw,56px);line-height:1.05}
.c-titre em{color:var(--rose)}
.c-sub{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-mute);margin-top:8px}
.suivi-mini{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.suivi-mini .s{color:var(--cream-faint)} .suivi-mini .s.done{color:var(--cream-mute)} .suivi-mini .s.now{color:var(--rose)}
.suivi-mini .s::after{content:'›';margin-left:14px;color:var(--cream-faint)} .suivi-mini .s:last-of-type::after{display:none}
.atelier-now{font-style:italic;text-transform:none;letter-spacing:0;color:var(--rose-soft);font-family:var(--font-display);font-size:1rem}

.hero{position:relative;text-align:center;margin:46px 0}
.hero .ring{position:absolute;top:50%;left:50%;width:480px;height:480px;max-width:92vw;max-height:92vw;border:1px solid var(--rose);border-radius:50%;opacity:0;animation:breathRing var(--breath) var(--ease) infinite;pointer-events:none}
.cover{position:relative;width:100%;max-width:430px;border-radius:24px;margin:0 auto;overflow:hidden;background-size:cover;background-position:center;background-color:var(--ink-soft);border:1px solid var(--cream-line);box-shadow:0 40px 90px -36px rgba(0,0,0,.8)}
.cover::before{content:'';display:block;padding-top:100%}  /* carré garanti (sans aspect-ratio) */
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Widget d'écoute intégré (Spotify/Apple Music) : sobre, se fond dans la hero card. */
.ecoute-widget{width:100%;max-width:430px;margin:24px auto 0;padding:8px;border-radius:18px;
  background:var(--rose-faint);border:1px solid var(--cream-line)}
.ecoute-widget iframe{display:block;width:100%;border:0;border-radius:12px}

.btn-playlist,.ecouter{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:16px 34px;background:var(--copper);color:var(--cream);border-radius:999px;font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:background .4s,transform .4s,box-shadow .4s}
.btn-playlist:hover,.ecouter:hover{background:var(--rose);transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(196,141,118,.5)}

.voyage{margin:50px auto;max-width:62ch}
.voyage .eyebrow{display:flex;justify-content:center;margin-bottom:18px}
.voyage-titre{display:none}
.voyage p{font-family:var(--font-display);font-size:1.25rem;line-height:1.85;color:var(--cream-mid);margin-bottom:20px}
.voyage p em{color:var(--rose-soft)}
.voyage p:first-of-type:first-letter{font-family:var(--font-display);font-size:3.4rem;line-height:.8;float:left;margin:8px 14px 0 0;color:var(--rose);font-style:italic}
.texte-court{font-family:var(--font-display);font-size:1.3rem;font-style:italic;color:var(--cream);text-align:center;max-width:54ch;margin:36px auto;line-height:1.6}
.note{font-family:var(--font-display);font-style:italic;color:var(--rose-soft);text-align:center;font-size:1.1rem;margin:24px auto;max-width:48ch}

.sec-titre{text-align:center;margin:58px 0 24px}
.sec-titre h2,.vivier-titre{font-family:var(--font-display);font-weight:300;font-size:2rem;color:var(--cream);text-align:center;border:none;margin:0}
.vivier-titre .phase-n{font-size:.9rem;color:var(--cream-mute)}
.phase-bloc{margin-bottom:26px}
.phase-titre{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;font-family:var(--font-display);color:var(--rose);font-style:italic;font-size:1.2rem}
.piste-ligne{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(237,227,216,.06);font-family:var(--font-display);font-size:1.1rem}
.piste-info em{color:var(--cream-mute);font-style:italic}
.dl{display:block;margin:28px auto 0;width:fit-content;border:1px solid var(--cream-line);color:var(--cream-mid);border-radius:999px;padding:12px 24px;font-family:var(--font-body);font-size:.76rem;letter-spacing:.1em;background:transparent}
.dl:hover{border-color:var(--rose);color:var(--rose-soft)}

/* échange client ↔ atelier */
.echange{margin-top:56px;padding:28px;border:1px solid var(--cream-line);border-radius:18px;background:var(--rose-faint)}
.echange .eyebrow{margin-bottom:12px}
.echange-aide{font-size:.92rem;color:var(--cream-mid);margin-bottom:18px}
.msg{background:var(--ink-soft);border:1px solid var(--cream-line);border-radius:12px;padding:14px 16px;font-family:var(--font-display);font-size:1.08rem;color:var(--cream-mid);margin-bottom:14px}
.msg.moi{border-color:var(--rose-faint)}
.msg-from{display:block;font-family:var(--font-body);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:6px}
.echange-in{min-height:84px;resize:vertical;margin-bottom:12px}
.echange-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.quota{font-size:.8rem;color:var(--cream-mute)} .quota b{color:var(--rose-soft)}

/* rdv appel */
.rdv-appel{text-align:center}
.btn-rdv{display:inline-block;margin-top:8px;padding:14px 30px;background:var(--copper);color:var(--cream);border-radius:999px;font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}

.footer{position:relative;z-index:1;border-top:1px solid var(--cream-line);margin-top:70px;padding:40px 32px;text-align:center;color:var(--cream-mute);font-size:.82rem}
.footer a{color:var(--rose)}

@media(max-width:640px){
  .header{padding:14px 18px;flex-wrap:wrap;gap:10px} .nav{gap:16px}
  .main{padding:0 18px 60px} .hello h1{font-size:2.6rem}
  .grille{grid-template-columns:1fr}
  .compo{grid-template-columns:78px 1fr;gap:14px} .compo .cv{width:78px;height:78px} .compo .go{grid-column:2}
}

/* ── Passe 2 : échange client ↔ atelier + opt-in évolution ──────────────── */
.echange-ok{font-size:.88rem;color:var(--rose-soft);margin-bottom:14px}
.fil{display:flex;flex-direction:column;gap:12px;margin:6px 0 20px}
.msg{max-width:86%;padding:12px 16px;border-radius:14px;border:1px solid var(--cream-line)}
.msg p{font-size:.95rem;white-space:pre-line;line-height:1.55}
.msg-qui{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-mute);margin-bottom:6px}
.msg.de-vous{align-self:flex-end;background:var(--bordeaux-w);border-bottom-right-radius:4px}
.msg.de-atelier{align-self:flex-start;background:var(--rose-faint);border-bottom-left-radius:4px}
.pill.pill-msg{border-color:var(--copper);color:var(--rose-soft)}
button.toggle{padding:0;-webkit-appearance:none;appearance:none;display:block}
.evolve form{flex:none}

/* Statuts unifiés : flag « du nouveau » côté client */
.pill.pill-neuf{border-color:var(--copper);color:var(--rose-soft);font-weight:600}

/* Vitrine : image du moment + playlist offerte côte à côte (+ 4K, partage, tags écrits) */
.essai-duo{display:grid;grid-template-columns:1.3fr 1fr;gap:0;align-items:stretch;height:auto}
.essai-duo .essai-img{position:relative;inset:auto;height:auto;min-height:260px}
.essai-4k{position:absolute;top:14px;right:16px;z-index:3;font-size:.74rem;color:var(--cream);background:rgba(42,15,20,.55);border:1px solid var(--cream-line);border-radius:20px;padding:5px 12px;text-decoration:none;backdrop-filter:blur(4px)}
.essai-4k:hover{color:var(--rose-soft);border-color:var(--rose)}
.essai-pl{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;background:var(--rose-faint);border:1px solid var(--cream-line);border-left:none}
.essai-pl .eyebrow{margin-bottom:8px}
.essai-pl h3{font-family:var(--font-display);font-weight:400;font-size:1.6rem;margin-bottom:8px}
.pl-mot{font-size:.9rem;color:var(--cream-mid);line-height:1.6;margin-bottom:16px}
.pl-liens{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pl-btn{display:inline-block;padding:9px 18px;border:1px solid var(--copper);color:var(--rose-soft);border-radius:30px;text-decoration:none;font-size:.82rem;transition:all .3s}
.pl-btn:hover{background:var(--copper);color:var(--cream);border-color:var(--copper)}
.pl-partage{align-self:flex-start;background:none;border:none;color:var(--cream-mute);font-size:.82rem;cursor:pointer;padding:0;text-decoration:underline}
.pl-partage:hover{color:var(--rose-soft)}
.ecrit-tag{display:inline-block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin-bottom:6px}
@media(max-width:680px){.essai-duo{grid-template-columns:1fr}.essai-pl{border-left:1px solid var(--cream-line);border-top:none}}