/* ============================================================
   L'ESPACE ASTROPRENARIAT : le style des clientes
   Tiré de la maquette validée (~/maquettes-astroprenariat/gen_board.py).
   Clair seulement : crème, pervenche, Sora et Poppins.
   ============================================================ */

:root{
  --creme:#f6f4f3; --blanc:#fff; --encre:#2a1f4d; --doux:#6b6285; --filet:#e6e1ee;
  --accent:#5b4bd1; --accent-vif:#9381ff; --voile:#efecff; --voile2:#f7f5ff;
  --or:#f7b801; --or-texte:#8a6200; --or-voile:#fff6db; --magenta:#b5179e;
  --rayon:16px;
  --ombre:0 1px 2px rgba(42,31,77,.04), 0 10px 28px rgba(91,75,209,.07);
  --titres:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --texte:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --glyphes:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--texte);color:var(--encre);background:var(--creme);line-height:1.6;
  font-size:15px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--titres);font-weight:600;letter-spacing:-.02em;line-height:1.2}
a{color:inherit}
img{max-width:100%;display:block}
.ic{flex:0 0 auto;vertical-align:-3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  font:600 .93rem/1 var(--texte);text-decoration:none;cursor:pointer;border:1.5px solid var(--accent);
  background:var(--accent);color:#fff;padding:13px 20px;border-radius:var(--rayon);
  transition:transform .12s ease, background .15s ease}
.btn:hover{background:#4b3cc0;border-color:#4b3cc0}
.btn:active{transform:translateY(1px)}
.btn.doux{background:var(--blanc);color:var(--accent);border-color:var(--filet)}
.btn.doux:hover{border-color:var(--accent-vif);background:var(--voile2)}
.btn.petit{padding:10px 15px;font-size:.86rem}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(91,75,209,.35);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.maquette{background:var(--encre);color:#fff;font-size:.8rem;padding:8px clamp(16px,4vw,40px);
  display:flex;gap:8px;align-items:center}
.maquette b{font-weight:600;color:#fff}
.maquette span{color:#d9d3f2}
label.champ{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px}
textarea,input[type=text]{width:100%;font:400 .92rem var(--texte);color:var(--encre);background:var(--blanc);
  border:1.5px solid var(--filet);border-radius:var(--rayon);padding:12px 14px}
textarea{min-height:84px;resize:vertical}
textarea::placeholder,input::placeholder{color:#8e86a6}

.barre{display:flex;align-items:center;gap:14px;padding:14px clamp(16px,4vw,40px);
  background:rgba(246,244,243,.92);border-bottom:1px solid var(--filet)}
.marque{font-family:var(--titres);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.marque-sous{color:var(--doux);font-size:.86rem;padding-left:14px;border-left:1px solid var(--filet);white-space:nowrap}
.moi{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--voile);color:var(--accent);
  display:grid;place-items:center;font:600 .86rem var(--titres)}
.jeton{font:500 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--doux);
  background:var(--blanc);border:1px solid var(--filet);padding:4px 9px;border-radius:var(--rayon)}
.page{max-width:1180px;margin:0 auto;padding:clamp(22px,4vw,44px) clamp(16px,4vw,40px) 60px}
.carte{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--rayon);
  box-shadow:var(--ombre);padding:clamp(18px,2.4vw,26px)}
.etiq{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.sous{color:var(--doux);font-size:.9rem}
h2{font-size:1.24rem;margin-bottom:4px}
h3{font-size:1rem}

/* Le haut : elle, aujourd'hui, et notre prochaine rencontre */
.heros{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:stretch}
.jour{color:var(--doux);font-size:.92rem}
.heros h1{font-size:clamp(2rem,3.6vw,2.8rem);margin:2px 0 12px}
.ciel-jour{display:flex;gap:10px;align-items:flex-start;max-width:58ch;color:var(--encre);
  background:var(--voile2);border:1px solid var(--voile);padding:12px 14px;border-radius:var(--rayon);font-size:.93rem}
.ciel-jour .ic{color:var(--accent);margin-top:2px}
.rdv{margin-top:18px}
.rdv-tete{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.dans{font-weight:600;color:var(--or-texte);background:var(--or-voile);font-size:.82rem;
  padding:3px 10px;border-radius:var(--rayon)}
.rdv-date{font-family:var(--titres);font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:600;margin:6px 0 4px}
.rdv-info{display:flex;gap:8px;align-items:center;color:var(--doux);font-size:.9rem;flex-wrap:wrap}
.rdv-ciel{display:flex;gap:8px;align-items:flex-start;margin:14px 0 18px;font-size:.92rem;
  padding-top:14px;border-top:1px dashed var(--filet)}
.rdv-ciel .ic{color:var(--accent);margin-top:2px}
.rdv-btns{display:flex;gap:10px;flex-wrap:wrap}

.parcours{display:flex;flex-direction:column}
.parcours .constellation{width:100%;height:auto;margin:10px 0 6px}
.seg{stroke:#d9d3f2;stroke-width:1.4;stroke-dasharray:3 4}
.seg-fait{stroke:var(--accent-vif);stroke-width:1.8}
.e-faite{fill:var(--or);stroke:#c98f06;stroke-width:1}
.e-prochaine{fill:#fff;stroke:var(--accent);stroke-width:1.7}
.anneau{fill:none;stroke:var(--accent-vif);stroke-opacity:.5;stroke-width:1.2}
.e-avenir{fill:#fff;stroke:#cfc8ea;stroke-width:1.3}
.lab{font:500 9.5px var(--texte);fill:var(--doux);text-anchor:middle}
.lab-prochaine{fill:var(--accent);font-weight:600}
.compte{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.compte .n{font:700 2.6rem/1 var(--titres);color:var(--encre)}
.compte .sur{font:600 1.1rem var(--titres);color:var(--doux)}
.parcours p{font-size:.92rem;color:var(--doux);margin-top:4px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;
  background:var(--voile2);border:1px solid var(--voile);color:var(--accent);padding:4px 10px;border-radius:var(--rayon)}

/* Un mot d'Anna */
.mot{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;margin-top:22px}
.mot img{width:200px;height:170px;object-fit:cover;object-position:52% 30%;border-radius:var(--rayon)}
.mot blockquote{font-size:1.02rem;line-height:1.65;max-width:62ch;margin:8px 0 10px}
.mot .signe{font-family:var(--titres);font-weight:600;color:var(--accent)}
.mot .quand{color:var(--doux);font-size:.84rem;margin-left:8px}

/* La grille principale */
.zones{display:flex;flex-direction:column;gap:22px;margin-top:22px}
.grille{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:22px;align-items:start}
.grille.bas .plan{grid-template-columns:minmax(0,1fr)}
.grille.bas .plan-col + .plan-col{border-left:0;border-top:1px solid var(--filet)}
.col{display:flex;flex-direction:column;gap:22px;min-width:0}
.tete-section{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* Ton mois dans le ciel */
.ruban-cadre{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:4px -6px 8px;padding:0 6px}
.ruban{position:relative;min-width:560px;height:156px;margin:0 8px}
.ruban-ligne{position:absolute;left:0;right:0;top:77px;height:2px;background:var(--filet);border-radius:2px}
.mk{position:absolute;top:0;bottom:0;width:0}
.mk .pt{position:absolute;top:70px;left:-8px;width:16px;height:16px;border-radius:50%;
  background:var(--c,var(--accent-vif));border:3px solid var(--blanc);box-shadow:0 0 0 1px var(--filet)}
.mk.lune-nouvelle .pt{background:var(--encre)}
.mk.lune-pleine .pt{background:var(--blanc);box-shadow:0 0 0 1.5px var(--encre)}
.mk.jalon .pt{background:var(--or)}
.mk.rencontre .pt{background:var(--accent);box-shadow:0 0 0 4px var(--voile)}
.mk.ciel .pt{background:var(--doux);width:12px;height:12px;left:-6px;top:72px;border-width:2px}
.mk .tige{position:absolute;left:-.5px;width:1px;background:var(--filet)}
.mk.haut .tige{top:50px;height:20px}
.mk.bas .tige{top:86px;height:14px}
.mk .lab{position:absolute;width:104px;left:-52px;text-align:center;font-size:.74rem;line-height:1.3;color:var(--encre)}
.mk .lab b{display:block;font-weight:600;color:var(--doux);font-size:.72rem}
.mk.haut .lab{top:4px}
.mk.bas .lab{top:102px}
.mk.debut .lab{left:-6px;text-align:left}
.mk.fin .lab{left:-98px;text-align:right}
.mk.theme .lab{font-weight:600}
.mk.rencontre .lab{color:var(--accent);font-weight:600}

.forts{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.fort{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px 0;border-top:1px solid var(--filet)}
.fort-theme{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;font-weight:600;line-height:1.35}
.pastille{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--c);margin-top:4px}
.fort-titre{font-weight:600;font-size:.95rem;line-height:1.45}
.fort-titre .gl,.grand-titre .gl{margin-right:8px}
.gl{font-family:var(--glyphes);font-size:1.05rem;color:var(--accent);letter-spacing:.06em;white-space:nowrap}
.gl i{font-style:normal;color:var(--doux);margin:0 .12em}
.fort-quand{color:var(--doux);font-size:.84rem;margin:2px 0 6px}
.fort p{font-size:.92rem;max-width:62ch}

.grand{margin-top:18px;background:var(--voile2);border:1px solid var(--voile);border-radius:var(--rayon);padding:18px 20px}
.grand-titre{font-family:var(--titres);font-weight:600;font-size:1.06rem;margin:6px 0 2px;line-height:1.4}
.grand p{font-size:.93rem;max-width:64ch;margin-top:8px}
.periode{margin-top:10px;max-width:420px}
.periode-barre{height:6px;background:#e3def5;border-radius:var(--rayon);overflow:hidden}
.periode-barre i{display:block;height:100%;background:var(--accent-vif)}
.periode-dates{display:flex;justify-content:space-between;font-size:.76rem;color:var(--doux);margin-top:4px}
.aussi{margin-top:14px;padding-top:12px;border-top:1px solid #e3def5}
.aussi-titre{font-size:.8rem;font-weight:600;color:var(--doux);margin-bottom:6px}
.aussi-ligne{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:.88rem;padding:5px 0}
.aussi-ligne b{font-weight:600}
.aussi-ligne span{color:var(--doux)}

.lunes{display:flex;flex-direction:column;margin-top:20px}
.lune{display:flex;gap:14px;align-items:flex-start;padding:10px 0}
.lune + .lune{border-top:1px dashed var(--filet)}
.disque{flex:0 0 auto;width:24px;height:24px;border-radius:50%;margin-top:3px}
.disque.nouvelle{background:var(--encre)}
.disque.pleine{background:var(--blanc);border:2px solid var(--encre)}
.lune h3{font-size:.92rem}
.lune .quand{color:var(--doux);font-size:.8rem}
.lune p{font-size:.86rem;margin-top:4px}

.tous{margin-top:18px}
.tous-titre{font-size:.86rem;font-weight:600;margin-bottom:6px}
.tous-ligne{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;font-size:.88rem;padding:7px 0;border-top:1px dashed var(--filet)}
.tous-ligne b{font-weight:600;color:var(--doux);font-size:.82rem}

/* Nos rencontres */
.fil{position:relative;display:flex;flex-direction:column;gap:10px}
.fil::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:var(--filet)}
.renc{position:relative;padding-left:44px}
.renc .rond{position:absolute;left:5px;top:13px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--or);color:var(--encre);font:700 .7rem var(--titres)}
.renc.avenir .rond{background:var(--blanc);border:2px solid #cfc8ea;color:var(--doux)}
.renc.prochaine .rond{background:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--voile)}
.renc details{border:1px solid var(--filet);border-radius:var(--rayon);background:var(--blanc)}
.renc details[open]{box-shadow:var(--ombre)}
.renc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 16px}
.renc summary::-webkit-details-marker{display:none}
.renc summary .quand{color:var(--doux);font-size:.84rem;min-width:118px}
.renc summary h3{font-size:.96rem;flex:1}
.renc summary .chev{color:var(--doux);transition:transform .15s ease}
.renc details[open] summary .chev{transform:rotate(180deg)}
.renc .corps{padding:0 16px 16px;font-size:.92rem}
.renc .corps p{max-width:64ch}
.renc .bloc-titre{font-size:.8rem;font-weight:600;color:var(--accent);margin:14px 0 4px}
.renc ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.renc li{display:flex;gap:8px;align-items:flex-start}
.renc li .ic{color:var(--accent);margin-top:3px}
.renc .simple{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px dashed #d9d3f2;border-radius:var(--rayon)}
.renc .simple .quand{color:var(--doux);font-size:.84rem;min-width:118px}
.renc .simple h3{font-size:.96rem;flex:1;font-weight:500}
.renc.prochaine .simple{border:1.5px solid var(--accent-vif);background:var(--voile2)}
.badge{font-size:.74rem;font-weight:600;color:var(--accent);background:var(--blanc);border:1px solid var(--voile);
  padding:2px 9px;border-radius:var(--rayon);white-space:nowrap}

/* Ton plan */
.plan{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr);gap:0;border:1px solid var(--filet);border-radius:var(--rayon);overflow:hidden}
.plan-col{padding:16px 18px}
.plan-col + .plan-col{border-left:1px solid var(--filet)}
.plan-col.maintenant{background:var(--voile2)}
.plan-col h3{font-size:.92rem;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.plan-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.plan-col li{display:flex;gap:8px;font-size:.88rem;line-height:1.45}
.coche{flex:0 0 auto;width:17px;height:17px;border-radius:5px;border:1.5px solid #cfc8ea;margin-top:2px;display:grid;place-items:center}
.coche.ok{background:var(--accent);border-color:var(--accent);color:#fff}
.plan-col li.fait span{color:var(--doux);text-decoration:line-through;text-decoration-color:#cfc8ea}

/* Ton plan de contenu */
.contenu{display:flex;flex-direction:column}
.cont{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--filet)}
.cont:first-child{border-top:0;padding-top:4px}
.cont .semaine{font-size:.8rem;color:var(--doux);line-height:1.4}
.cont .semaine b{display:block;font-size:.92rem;color:var(--encre);font-family:var(--titres);font-weight:600}
.cont h3{font-size:.96rem;margin:4px 0 2px}
.cont .pourquoi{font-size:.86rem;color:var(--doux);display:flex;gap:6px;align-items:flex-start}
.cont .pourquoi .ic{color:var(--accent);margin-top:2px}
.format{display:inline-block;font-size:.74rem;font-weight:600;color:var(--or-texte);background:var(--or-voile);padding:2px 9px;border-radius:var(--rayon)}

/* Colonne de droite */
.actions{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.action{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--filet);cursor:pointer}
.action:first-child{border-top:0}
.action input{flex:0 0 auto;width:19px;height:19px;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.action .quoi{font-size:.92rem;line-height:1.4}
.action .quand{display:block;font-size:.78rem;color:var(--doux)}
.action input:checked + span .quoi{color:var(--doux);text-decoration:line-through;text-decoration-color:#cfc8ea}
.progres{height:6px;background:var(--voile);border-radius:var(--rayon);overflow:hidden;margin-top:10px}
.progres i{display:block;height:100%;background:var(--accent-vif)}

.questions{list-style:none;display:flex;flex-direction:column;gap:8px;margin:12px 0 14px}
.questions li{display:flex;gap:10px;font-size:.9rem;background:var(--voile2);border:1px solid var(--voile);padding:10px 12px;border-radius:var(--rayon)}
.questions li .ic{color:var(--accent);margin-top:2px}
.aide{font-size:.8rem;color:var(--doux);margin:8px 0 12px}

.victoires{list-style:none;display:flex;flex-direction:column;gap:12px;margin:12px 0 14px}
.victoires li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:.9rem}
.victoires .ic{color:var(--or-texte);margin-top:2px}
.victoires .quand{display:block;font-size:.78rem;color:var(--doux)}

.trio{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.trio-ligne{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center}
.trio-ligne .g{font-family:var(--glyphes);font-size:1.45rem;color:var(--accent);text-align:center}
.trio-ligne b{font-weight:600;font-size:.92rem;display:block}
.trio-ligne span{font-size:.8rem;color:var(--doux)}

/* La signature en petite bande au-dessus du ciel du mois (2026-09-14, sa demande) */
.bande-signature{padding:14px clamp(16px,4vw,26px)}
.bande-signature h2.petit{font-size:.86rem;margin-bottom:0}
.bande-signature h2.petit::before{width:7px;height:7px}
.bande-signature .trio{flex-direction:row;flex-wrap:wrap;gap:10px 28px;margin-top:10px}
.bande-signature .trio-ligne{grid-template-columns:24px minmax(0,auto);gap:8px;flex:0 1 auto}
.bande-signature .trio-ligne .g{font-size:1.1rem}
.bande-signature .trio-ligne b{font-size:.86rem}
.bande-signature .trio-ligne span{font-size:.76rem}
@media (max-width:640px){
  .bande-signature .trio{flex-direction:column;gap:8px}
}

.outils{display:flex;flex-direction:column;margin-top:8px}
.outil{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--filet)}
.outil:first-child{border-top:0}
.outil .rond-ic{width:36px;height:36px;border-radius:50%;background:var(--voile2);color:var(--accent);display:grid;place-items:center}
.outil b{font-weight:600;font-size:.92rem;display:block}
.outil span{font-size:.8rem;color:var(--doux)}

.acces{display:flex;flex-direction:column;gap:10px;margin:10px 0 16px}
.acces-ligne{display:flex;justify-content:space-between;gap:10px;font-size:.88rem}
.acces-ligne span{color:var(--doux)}
.acces-ligne b{font-weight:600;text-align:right}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}

.pied{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 40px;color:var(--doux);font-size:.84rem;
  display:flex;gap:8px;align-items:center}

@media (max-width:980px){
  .heros{grid-template-columns:minmax(0,1fr)}
  .grille,.col{display:contents}
  #actions{order:1} #questions{order:2} #theme{order:2} #ciel{order:3} #rencontres{order:4} #victoires{order:5}
  #plan{order:6} #contenu{order:7} #outils{order:9} #acces{order:10}
  #idees{order:8} #suggestions{order:9}
  .onglet > #contenu{order:0}   /* son calendrier reste en haut de « Ton contenu » (2026-09-14) */
  .zone .grille,.zone .col{display:flex;flex-direction:column;gap:22px}
}
@media (max-width:640px){
  .marque-sous,.jeton{display:none}
  .mot{grid-template-columns:minmax(0,1fr)}
  .mot img{width:100%;height:220px}
  .fort{grid-template-columns:minmax(0,1fr);gap:6px}
  .plan{grid-template-columns:minmax(0,1fr)}
  .plan-col + .plan-col{border-left:0;border-top:1px solid var(--filet)}
  .cont{grid-template-columns:minmax(0,1fr);gap:4px}
  .renc summary .quand,.renc .simple .quand{min-width:0;flex-basis:100%}
  .renc summary,.renc .simple{flex-wrap:wrap;gap:4px 12px}
  .rdv-btns .btn{flex:1 1 auto}
}


.porte{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
.porte-photo{position:relative;min-height:320px}
.porte-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 38%}
.porte-cote{display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vw,72px) clamp(20px,5vw,64px)}
.porte-boite{width:100%;max-width:400px}
.porte-marque{font-family:var(--titres);font-weight:600;font-size:1rem;color:var(--doux);margin-bottom:28px}
.porte h1{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-bottom:10px}
.porte-mot{color:var(--doux);font-size:.98rem;max-width:34ch;margin-bottom:28px}
.champ-bloc{margin-bottom:16px}
.porte input[type=text]{padding:14px 16px;font-size:1rem}
.porte input.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.porte .btn{width:100%;padding:15px 20px;margin-top:6px;font-size:1rem}
.porte-aide{margin-top:18px;font-size:.86rem;color:var(--doux)}
.porte-aide a{color:var(--accent);font-weight:600;text-decoration:none}
.porte-prive{margin-top:26px;padding-top:18px;border-top:1px solid var(--filet);display:flex;gap:10px;
  font-size:.84rem;color:var(--doux)}
.porte-prive .ic{color:var(--accent);margin-top:2px}
@media (max-width:760px){
  .porte{grid-template-columns:1fr}
  .porte-photo{min-height:34vh}
}

.vue-porte{min-height:100vh;display:flex;flex-direction:column}
.porte-err{color:var(--magenta);font-size:.86rem;font-weight:600;min-height:1.3em;margin-top:10px}
.porte input[aria-invalid=true]{border-color:var(--magenta)}
.zone-victoire{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.zone-victoire .btn{align-self:flex-start}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:max-content;max-width:min(92vw,440px);
  background:var(--encre);color:#fff;padding:12px 18px;border-radius:var(--rayon);font-size:.9rem;line-height:1.45;
  box-shadow:0 12px 30px rgba(42,31,77,.25);z-index:50}

/* L'app en ligne : ce que la maquette n'avait pas */
.questions li{align-items:flex-start}
.questions li.reglee{background:transparent;border-style:dashed;color:var(--doux)}
.chip-mini{font-style:normal;font-size:.72rem;font-weight:600;color:var(--doux);white-space:nowrap;margin-left:auto}
.rdv-btns .chip{padding:10px 14px}
.badge.attente{color:var(--doux)}
.victoires .t{display:inline}
.maquette .lien-apercu{margin-left:auto;color:#d9d3f2;font-weight:600;text-decoration:none;white-space:nowrap}
.maquette .lien-apercu:hover{color:#fff}
.action input:disabled{cursor:default}
input[type=password]{width:100%;font:400 1rem var(--texte);color:var(--encre);background:var(--blanc);
  border:1.5px solid var(--filet);border-radius:var(--rayon);padding:14px 16px}
.porte input[aria-invalid=true]{border-color:var(--magenta)}
.rdv-info{flex-wrap:nowrap;align-items:flex-start}
.rdv-info .ic{margin-top:3px}

/* Les deux pages d'entrée, sans photo (demandé par Anna le 2026-09-11) */
.porte.sans-photo{grid-template-columns:minmax(0,1fr);place-items:center;padding:clamp(28px,7vw,72px) 16px}
.porte.sans-photo .porte-cote{padding:0;width:100%;display:flex;justify-content:center}
.porte.sans-photo .porte-boite{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--rayon);
  box-shadow:var(--ombre);padding:clamp(26px,4vw,42px)}
.porte-etoile{color:var(--accent-vif);margin-bottom:10px}
.porte.sans-photo .porte-marque{margin-bottom:22px}

.porte-info{color:var(--accent);font-size:.86rem;font-weight:600;min-height:0;margin-top:6px}
.porte-info:empty{display:none}
.porte-telegram{margin-top:22px;padding-top:18px;border-top:1px solid var(--filet)}
.porte-telegram .porte-aide{margin:0 0 12px}

/* Les zones de couleur (2026-09-11) : une couleur par sujet, la même chez la cliente et chez Anna.
   Rose = les rencontres · pervenche = le travail · doré = le ciel et les infos · crème = la suite. */
.zone{--z-fond:var(--voile);--z-filet:#ddd6ff;--z-point:var(--accent-vif);--z-titre:var(--accent);
  background:var(--z-fond);border:1px solid var(--z-filet);border-radius:var(--rayon);
  padding:clamp(16px,2.6vw,28px);scroll-margin-top:16px}
.zone-rose{--z-fond:#fdeef6;--z-filet:#f6d3e5;--z-point:#e0559b;--z-titre:#9d1271}
.zone-doree{--z-fond:var(--or-voile);--z-filet:#f3e2a6;--z-point:var(--or);--z-titre:var(--or-texte)}
.zone-creme{--z-fond:#efebe8;--z-filet:#e2dcd7;--z-point:#b3a79f;--z-titre:#5d5470}
.zone-tete{display:flex;align-items:center;gap:12px;margin-bottom:clamp(14px,2vw,20px)}
.zone-tete .pastille{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--z-point)}
.zone-tete h2{font-size:clamp(1.25rem,2vw,1.5rem);color:var(--z-titre);margin:0}
.zone-tete .sous{margin:2px 0 0}
.zone .carte{border-color:var(--z-filet);box-shadow:0 1px 2px rgba(42,31,77,.04)}
.zone .carte > h2{color:var(--encre)}
.grille.egale{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grille.seule{grid-template-columns:minmax(0,1fr)}

/* ── Page cliente, choix d'Anna du 2026-09-11 : couleur par carte (D) + chiffres (E) + ciel (F) ── */
#actions,#questions{--k-fond:#f4f2ff;--k-filet:#ddd6ff;--k-point:var(--accent-vif);--k-titre:var(--accent)}
#rencontres,#victoires,.parcours{--k-fond:#fef4f9;--k-filet:#f6d3e5;--k-point:#e0559b;--k-titre:#9d1271}
#ciel,#theme{--k-fond:#fffaeb;--k-filet:#f3e2a6;--k-point:var(--or);--k-titre:var(--or-texte)}
#plan,#contenu{--k-fond:#f5f2ef;--k-filet:#e2dcd7;--k-point:#b3a79f;--k-titre:#5d5470}
:is(#actions,#questions,#rencontres,#victoires,#ciel,#theme,#plan,#contenu,.parcours).carte{
  background:var(--k-fond);border-color:var(--k-filet);border-top:5px solid var(--k-point)}
:is(#actions,#questions,#rencontres,#victoires,#ciel,#theme,#plan,#contenu,.parcours) h2{
  color:var(--k-titre);display:flex;align-items:center;gap:10px}
:is(#actions,#questions,#rencontres,#victoires,#ciel,#theme,#plan,#contenu,.parcours) h2::before{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--k-point);flex:0 0 auto}

.mot.sans-photo{grid-template-columns:minmax(0,1fr)}

.tuiles{display:flex;gap:16px;margin-top:22px;flex-wrap:wrap}
.tuile{flex:1 1 150px;border-radius:var(--rayon);padding:18px 20px;border:1px solid;display:flex;flex-direction:column;gap:4px}
.tuile.large{flex:1.5 1 220px}
.tuile b{font:600 clamp(1.5rem,2.6vw,2rem) var(--titres);line-height:1.05}
.tuile span{font-size:.88rem}
.tuile small{font-size:.78rem;opacity:.85}
.t-pervenche{background:var(--voile);border-color:#ddd6ff;color:var(--accent)}
.t-rose{background:#fdeef6;border-color:#f6d3e5;color:#9d1271}
.t-doree{background:var(--or-voile);border-color:#f3e2a6;color:var(--or-texte)}
.t-creme{background:#efebe8;border-color:#e2dcd7;color:#5d5470}
.tuile-barre{height:8px;border-radius:8px;background:var(--blanc);margin-top:8px;overflow:hidden}
.tuile-barre i{display:block;height:100%;background:var(--accent-vif);border-radius:8px}

#ciel.carte{overflow:hidden}
#ciel .bandeau-ciel{position:relative;height:110px;margin:calc(-1 * clamp(18px,2.4vw,26px)) calc(-1 * clamp(18px,2.4vw,26px)) 18px;
  background:linear-gradient(120deg,#e9e4ff 0%,#fbe3f1 55%,#fff1cf 100%)}
#ciel .bandeau-ciel i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--blanc);
  box-shadow:0 0 0 1px rgba(147,129,255,.25)}
#ciel .bandeau-ciel .lune{position:absolute;right:clamp(20px,5%,48px);top:24px;width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fffdf6,#f7e3a3 70%);box-shadow:0 0 0 8px rgba(255,255,255,.35)}
@media (max-width:640px){
  .tuile,.tuile.large{flex:1 1 40%}
  #ciel .bandeau-ciel{height:84px}
  #ciel .bandeau-ciel .lune{width:44px;height:44px;top:18px}
}

/* La Lune du jour : un petit détail concret sous la phrase (2026-09-13) */
.ciel-jour-detail{display:block;margin-top:6px;color:var(--doux);font-size:.88rem;line-height:1.55}

/* Pour notre prochaine rencontre : ce qu'on s'est dit de creuser, puis ses questions (2026-09-13) */
#questions .mini-titre{font:600 .86rem var(--texte);color:var(--doux);margin:14px 0 2px}
.questions.a-creuser li{background:var(--blanc);border-color:#ddd6ff}
#questions textarea:disabled,#questions button:disabled{opacity:.55;cursor:not-allowed}

/* ── Les onglets de son espace (maquette 2026-09-13) : en haut sur ordinateur, en bas sur téléphone ── */
.onglets-cliente{position:sticky;top:0;z-index:20;background:rgba(246,244,243,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--filet)}
.oc-dedans{max-width:1180px;margin:0 auto;display:flex;gap:6px;padding:10px clamp(16px,4vw,40px);overflow-x:auto}
.onglets-cliente a{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--rayon);white-space:nowrap;
  text-decoration:none;font:600 .9rem var(--texte);color:var(--doux);border:1px solid transparent}
.onglets-cliente a .ic{color:var(--oc-point)}
.onglets-cliente a:hover{background:var(--blanc);border-color:var(--filet)}
.onglets-cliente a.on{background:var(--oc-fond);border-color:var(--oc-filet);color:var(--oc-titre)}
.oc-pervenche{--oc-fond:var(--voile);--oc-filet:#ddd6ff;--oc-point:var(--accent-vif);--oc-titre:var(--accent)}
.oc-rose{--oc-fond:#fdeef6;--oc-filet:#f6d3e5;--oc-point:#e0559b;--oc-titre:#9d1271}
.oc-creme{--oc-fond:#efebe8;--oc-filet:#e2dcd7;--oc-point:#8f8279;--oc-titre:#5d5470}
.oc-doree{--oc-fond:var(--or-voile);--oc-filet:#f3e2a6;--oc-point:#d9a100;--oc-titre:var(--or-texte)}
.oc-lilas{--oc-fond:#f5ecfb;--oc-filet:#e6d0f5;--oc-point:#8a4fd1;--oc-titre:#560bad}
.onglets-cliente .court{display:none}
@media (max-width:640px){.onglets-cliente .long{display:none}.onglets-cliente .court{display:inline}}

.onglet{display:flex;flex-direction:column;gap:22px}
.onglet + .onglet{margin-top:44px}
.avec-onglets .onglet{display:none}
.avec-onglets .onglet.ouvert{display:flex}
.avec-onglets .onglet + .onglet{margin-top:0}
.onglet > .mot,.onglet > .tuiles{margin-top:0}
.onglet .carte{scroll-margin-top:84px}
a.tuile{text-decoration:none;transition:transform .12s ease, box-shadow .15s ease}
a.tuile:hover{transform:translateY(-2px);box-shadow:var(--ombre)}

/* Les couleurs des nouvelles cartes : rose pour ton chemin, crème pour ton contenu, lilas pour tes ressources */
#plan,#journal{--k-fond:#fef4f9;--k-filet:#f6d3e5;--k-point:#e0559b;--k-titre:#9d1271}
#idees{--k-fond:#f5f2ef;--k-filet:#e2dcd7;--k-point:#b3a79f;--k-titre:#5d5470}
#ressources,#acces{--k-fond:#faf5fd;--k-filet:#e6d0f5;--k-point:#8a4fd1;--k-titre:#560bad}
:is(#idees,#journal,#ressources,#acces).carte{background:var(--k-fond);border-color:var(--k-filet);border-top:5px solid var(--k-point)}
:is(#idees,#journal,#ressources,#acces) h2{color:var(--k-titre);display:flex;align-items:center;gap:10px}
:is(#idees,#journal,#ressources,#acces) h2::before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--k-point);flex:0 0 auto}
.onglet .mini-titre{font:600 .86rem var(--texte);color:var(--doux);margin:16px 0 2px}
.vide-doux{color:var(--doux);font-size:.88rem;margin-top:12px}
.form-court{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.form-court label.champ{margin-bottom:0}
.form-court .btn{align-self:flex-start}
.form-court textarea:disabled,.form-court button:disabled,.idee input:disabled{opacity:.55;cursor:not-allowed}

/* Ton contenu, semaine par semaine */
.chip-ciel{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;color:#5d5470;
  margin-left:8px;vertical-align:1px}
.chip-ciel .ic{color:var(--or-texte);vertical-align:0}
.cont.calme h3,.cont.idee h3{font-weight:500}
.cont.calme h3{color:var(--doux)}

/* Tes idées de contenu */
.idees{list-style:none;display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.idee{background:var(--blanc);border:1px solid var(--k-filet,var(--filet));border-radius:var(--rayon);padding:10px 12px}
.idee label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.idee input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;accent-color:#8f8279;cursor:pointer}
.idee .t{display:block;font-size:.9rem;line-height:1.45}
.idee .quand{display:block;font-size:.76rem;color:var(--doux)}
.idee.publiee .t{color:var(--doux);text-decoration:line-through;text-decoration-color:#cfc8ea}
.mot-anna{margin:8px 0 0 28px;font-size:.84rem;line-height:1.5;background:#f5f2ef;border-left:3px solid #b3a79f;
  padding:7px 10px;border-radius:0 10px 10px 0}
.mot-anna b{font-weight:600;color:#5d5470;margin-right:6px}
details.publiees{margin-top:10px}
details.publiees > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  font:600 .84rem var(--texte);color:var(--doux);padding:6px 0}
details.publiees > summary::-webkit-details-marker{display:none}
details.publiees .chev{transition:transform .15s ease}
details.publiees[open] > summary .chev{transform:rotate(180deg)}

/* Ton journal */
.coche-partage{display:flex;gap:8px;align-items:center;font-size:.88rem;font-weight:500;cursor:pointer}
.coche-partage input{width:18px;height:18px;accent-color:#e0559b}
.entrees{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.entrees:empty{display:none}
.entree{background:var(--blanc);border:1px solid var(--k-filet);border-radius:var(--rayon);padding:12px 14px}
.entree-tete{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.entree-tete .quand{font-size:.8rem;color:var(--doux);font-weight:600}
.entree p{font-size:.9rem;line-height:1.55}
.entree p + p{margin-top:8px}
.partage{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:var(--rayon);white-space:nowrap}
.partage.prive{background:#f5ecfb;color:#560bad}
.partage.lu{background:#fdeef6;color:#9d1271}

/* Tes ressources */
#ressources .outil .rond-ic{background:var(--blanc);color:#560bad;border:1px solid #e6d0f5}
#ressources .mini-titre:first-of-type{margin-top:10px}

@media (max-width:980px){
  /* stretch : sans lui, la colonne prend la largeur du ruban du ciel (560 px) et déborde de l'écran du téléphone */
  .onglet .grille,.onglet .col{display:flex;flex-direction:column;gap:22px;align-items:stretch}
  .onglet .col > *{min-width:0}
}
@media (max-width:640px){
  .onglets-cliente{position:fixed;left:0;right:0;bottom:0;top:auto;border-bottom:0;border-top:1px solid var(--filet);
    padding-bottom:env(safe-area-inset-bottom)}
  .oc-dedans{padding:6px 4px;gap:2px;overflow:visible}
  .onglets-cliente a{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;padding:7px 2px;font-size:.68rem;border-radius:12px}
  .onglets-cliente a span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  body:has(.onglets-cliente){padding-bottom:84px}
  body:has(.onglets-cliente) .toast{bottom:96px}
  .onglet .carte{scroll-margin-top:12px}
  .mot-anna{margin-left:0}
}

/* Ses idées et son journal s'enregistrent : les petits gestes sous chaque ligne (2026-09-13) */
.lien-doux{background:none;border:0;padding:2px 0;font:600 .8rem var(--texte);color:var(--doux);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.lien-doux:hover{color:var(--accent)}
.lien-doux.rouge:hover{color:var(--magenta)}
.lien-doux:disabled{opacity:.5;cursor:default}
.idee-ligne{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.idee-ligne label{flex:1;min-width:0}
.entree-gestes{display:flex;gap:16px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--k-filet)}
.corps-journal p{font-size:.9rem;line-height:1.55;white-space:pre-line}
.corps-journal p + p{margin-top:8px}

/* ── Le mouvement (2026-09-13, « ajouter de l'animation, full important ») ─────────────────────
   Chaque mouvement a sa raison. L'onglet qui s'ouvre fait monter ses cartes, on voit ce qui arrive.
   Les chiffres comptent et les barres se remplissent, le progrès se lit. La bulle suit l'onglet choisi,
   on sait où on est. Ce qu'elle ajoute apparaît et ce qu'elle retire s'efface, c'est le retour d'action.
   Seulement la position et l'opacité. Tout s'arrête pour qui a demandé moins de mouvement (règle en haut du fichier). */
:root{--sortie:cubic-bezier(.2,.75,.2,1)}
@keyframes monter{from{opacity:0;translate:0 18px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes fondu{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;scale:.2}65%{opacity:1;scale:1.18}100%{opacity:1;scale:1}}
@keyframes grandir{from{scale:0 1}to{scale:1 1}}
@keyframes scintiller{0%,100%{opacity:.35;scale:.7}50%{opacity:1;scale:1.3}}
@keyframes halo{0%,100%{opacity:.55;scale:1}50%{opacity:.12;scale:1.4}}
@keyframes rebond{0%{scale:1}40%{scale:1.22}100%{scale:1}}
@keyframes remonter{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes partir{to{opacity:0;translate:16px 0;scale:.97}}
@keyframes deplier{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}

/* L'onglet qui s'ouvre : ses cartes montent une à une */
.anim :is(.jour,.ciel-jour,.carte,.tuile),.anim .heros h1{animation:monter .6s var(--sortie) both;
  animation-delay:calc(var(--i,0) * 70ms)}
.tuile-barre i,.progres i,.periode-barre i,.ruban-ligne{transform-origin:left center}
.anim :is(.tuile-barre i,.progres i,.periode-barre i){animation:grandir 1s var(--sortie) .45s both}
.progres i{transition:width .45s var(--sortie)}

/* Son parcours en étoiles : les liens puis les étoiles, une à une. La prochaine respire. */
.constellation :is(path,circle){transform-box:fill-box;transform-origin:center}
.anim .constellation :is(line,text){animation:fondu .5s ease both;animation-delay:calc(var(--i,0) * 90ms + .35s)}
.anim .constellation path{animation:pop .55s var(--sortie) both;animation-delay:calc(var(--i,0) * 90ms + .4s)}
.constellation .anneau{animation:halo 2.8s ease-in-out infinite}

/* Ton mois dans le ciel : la ligne se trace, les moments se posent dessus, les petites étoiles brillent */
.anim .ruban-ligne{animation:grandir 1.1s var(--sortie) .25s both}
.anim .mk .pt{animation:pop .5s var(--sortie) both;animation-delay:calc(var(--i,0) * 70ms + .5s)}
.anim .mk :is(.lab,.tige){animation:fondu .5s ease both;animation-delay:calc(var(--i,0) * 70ms + .65s)}
#ciel .bandeau-ciel i{animation:scintiller 3.4s ease-in-out infinite}
#ciel .bandeau-ciel i:nth-child(2n){animation-duration:4.3s;animation-delay:-1.2s}
#ciel .bandeau-ciel i:nth-child(3n){animation-duration:2.9s;animation-delay:-2.1s}
#ciel .bandeau-ciel i:nth-child(5n){animation-delay:-.7s}

/* La bulle qui suit l'onglet choisi */
.oc-dedans{position:relative}
.oc-bulle{position:absolute;left:0;top:0;width:0;height:0;border:1px solid transparent;border-radius:var(--rayon);
  pointer-events:none;z-index:0}
.oc-bulle.pret{transition:transform .45s var(--sortie),width .45s var(--sortie),height .45s var(--sortie),
  background-color .3s ease,border-color .3s ease}
.onglets-cliente a{position:relative;z-index:1;transition:color .25s ease}
.avec-onglets .onglets-cliente a.on{background:transparent;border-color:transparent}
.oc-bulle[data-coul=pervenche]{background:#efecff;border-color:#ddd6ff}
.oc-bulle[data-coul=rose]{background:#fdeef6;border-color:#f6d3e5}
.oc-bulle[data-coul=creme]{background:#efebe8;border-color:#e2dcd7}
.oc-bulle[data-coul=doree]{background:#fff6db;border-color:#f3e2a6}
.oc-bulle[data-coul=lilas]{background:#f5ecfb;border-color:#e6d0f5}
.onglets-cliente a.on .ic{animation:rebond .45s var(--sortie)}

/* Précédent : à portée de pouce dès qu'elle a changé d'endroit */
.precedent{position:fixed;left:clamp(12px,3vw,28px);bottom:24px;z-index:25;display:inline-flex;align-items:center;gap:6px;
  font:600 .86rem var(--texte);color:var(--accent);background:rgba(255,255,255,.96);border:1px solid var(--filet);
  border-radius:var(--rayon);padding:10px 16px 10px 12px;box-shadow:0 8px 24px rgba(42,31,77,.14);cursor:pointer;
  transition:transform .15s ease}
.precedent:hover{transform:translateY(-2px)}
.precedent:active{transform:translateY(1px)}
.precedent .ic{transform:scaleX(-1)}
.precedent:not([hidden]){animation:remonter .35s var(--sortie)}
.precedent:focus-visible{outline:3px solid rgba(91,75,209,.35);outline-offset:2px}

/* Ce qu'elle ajoute apparaît, ce qu'elle retire s'efface */
.toast:not([hidden]){animation:remonter .38s var(--sortie)}
.nouvelle{animation:monter .5s var(--sortie) both}
.partir{animation:partir .3s ease forwards;pointer-events:none}
.victoires li.nouvelle .ic{animation:rebond .6s var(--sortie) .2s}
.action input:checked,.idee input:checked{animation:rebond .35s var(--sortie)}
.renc details[open] .corps{animation:deplier .35s var(--sortie)}
details.publiees[open] .idees{animation:deplier .3s var(--sortie)}
.renc summary:hover h3{color:var(--accent)}
.btn{transition:transform .12s ease, background .15s ease, border-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}

@media (max-width:640px){
  .oc-bulle{border-radius:12px}
  .precedent{bottom:calc(84px + env(safe-area-inset-bottom));padding:8px 14px 8px 10px;font-size:.8rem}
  body:has(.onglets-cliente) .toast{bottom:140px}
}

/* Ton calendrier de contenu (2026-09-14) : elle place, modifie et dépose son contenu */
#contenu .tete-section{align-items:flex-start;gap:12px 20px}
#contenu .tete-section .btn{flex:0 0 auto}
.cal{margin-top:6px}
.cal-tete{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cal-tete h3{font-size:1.05rem;min-width:9.5em;text-align:center}
.cal-nav{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--rayon);
  border:1px solid var(--filet);background:var(--blanc);color:var(--accent);cursor:pointer;transition:border-color .15s ease}
.cal-nav:hover{border-color:var(--accent-vif)}
.cal-nav:active{transform:translateY(1px)}
.cal-nav .ic{transform:rotate(90deg)}
.cal-nav.suiv .ic{transform:rotate(-90deg)}
.cal-grille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-entete{font:600 .74rem var(--texte);color:var(--doux);text-align:center;padding:2px 0}
.cal-jour{min-height:104px;min-width:0;background:var(--voile2);border:1px solid var(--filet);border-radius:var(--rayon);
  padding:6px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .15s ease}
.cal-jour:hover{border-color:var(--accent-vif)}
.cal-jour.vide{background:none;border-color:transparent;cursor:default}
.cal-jour.passe{background:#faf9f8}
.cal-jour:not([data-case]){cursor:default}
.cal-jour .num{align-self:flex-start;font:600 .8rem var(--titres);color:var(--doux);background:none;border:0;
  padding:1px 7px;border-radius:var(--rayon);cursor:pointer}
.cal-jour span.num{cursor:default}
.cal-jour.auj .num{background:var(--accent);color:#fff}
.chip{display:flex;align-items:flex-start;gap:6px;width:100%;min-width:0;text-align:left;background:var(--blanc);
  border:1px solid var(--filet);border-radius:var(--rayon);padding:4px 8px;font:500 .74rem/1.3 var(--texte);color:var(--encre);
  cursor:pointer;transition:border-color .15s ease, transform .12s ease}
.chip:hover{border-color:var(--accent-vif);transform:translateY(-1px)}
.chip:active{transform:translateY(1px)}
.chip .puce{margin-top:4px}
.chip .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;word-break:break-word}
.chip.e-publie .t{color:var(--doux)}
.chip .fmt{margin-left:auto;padding-left:8px;font-size:.74rem;color:var(--doux);white-space:nowrap}
.puce{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--c-etape,#b3a79f)}
.e-idee{--c-etape:#b3a79f}
.e-prep{--c-etape:var(--or)}
.e-pret{--c-etape:var(--accent-vif)}
.e-publie{--c-etape:#e0559b}
.cal-liste{display:flex;flex-direction:column;gap:12px}
.cal-ligne{display:grid;grid-template-columns:6.2em minmax(0,1fr);gap:10px;align-items:start}
.cal-ligne .quand{font:600 .82rem var(--titres);color:var(--doux);padding-top:7px}
.cal-ligne.auj .quand{color:var(--accent)}
.cal-ligne .chips{display:flex;flex-direction:column;gap:6px}
.cal-ligne .chip{font-size:.88rem;padding:8px 11px}
.cal-ligne .chip .puce{margin-top:6px}
.cal-ligne .chip{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px}
.cal-ligne .chip .fmt{grid-column:2;margin:0;padding:0;white-space:normal}
.legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:.78rem;color:var(--doux)}
.legende span{display:inline-flex;align-items:center;gap:6px}

/* Ses idées sans date */
.idee-ouvrir{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.idee-ouvrir:hover .t{color:var(--accent)}
.idee-ouvrir .quand{display:flex;align-items:center;gap:6px}
#idees .mot-anna{margin-left:0}

/* Si tu cherches une idée : les pistes de son ciel */
#suggestions{--k-fond:#fffaf0;--k-filet:#f1e2b8;--k-point:var(--or);--k-titre:var(--or-texte)}
#suggestions.carte{background:var(--k-fond);border-color:var(--k-filet);border-top:5px solid var(--k-point)}
#suggestions h2{color:var(--k-titre);display:flex;align-items:center;gap:10px}
#suggestions h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--k-point);flex:0 0 auto}
.suggs{display:flex;flex-direction:column;margin-top:8px}
.sugg{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--k-filet)}
.sugg:first-child{border-top:0}
.sugg .semaine{font-size:.8rem;color:var(--doux);line-height:1.4}
.sugg .semaine b{display:block;font-size:.92rem;color:var(--encre);font-family:var(--titres);font-weight:600}
.sugg h3{font-size:.94rem;margin:4px 0 2px}
.sugg .pourquoi{font-size:.84rem;color:var(--doux);display:flex;gap:6px;align-items:flex-start}
.sugg .pourquoi .ic{color:var(--or-texte);margin-top:2px}
.sugg .lien-doux{margin-top:6px;color:var(--accent)}

/* La fenêtre où elle dépose son contenu */
.editeur{border:0;border-radius:var(--rayon);padding:0;width:min(580px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  margin:auto;color:var(--encre);background:var(--blanc);box-shadow:0 24px 60px rgba(42,31,77,.22)}
.editeur::backdrop{background:rgba(42,31,77,.38)}
.editeur form{display:flex;flex-direction:column;padding:20px clamp(16px,4vw,26px) 22px}
.editeur-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.editeur-tete h2{font-size:1.2rem}
#editeur-titre:focus{outline:none}
.editeur :is(input[type=text],input[type=url],input[type=date],select,textarea){width:100%;font:inherit;font-size:.92rem;
  color:var(--encre);background:var(--blanc);border:1px solid var(--filet);border-radius:var(--rayon);padding:10px 12px}
.editeur textarea{resize:vertical;min-height:130px;line-height:1.5}
.editeur :is(input,select,textarea):focus-visible{outline:3px solid rgba(91,75,209,.3);outline-offset:1px;border-color:var(--accent-vif)}
.editeur :is(input,select,textarea):disabled{background:var(--voile2);color:var(--encre);opacity:1;cursor:default}
.editeur label.champ,.editeur legend.champ{margin:14px 0 6px}
.editeur legend.champ{font-size:.84rem;font-weight:600}
.editeur .aide{font-size:.78rem;color:var(--doux);margin-top:4px}
.editeur .erreur{font-size:.84rem;color:var(--magenta);font-weight:600;margin-top:6px}
.editeur-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.etapes{border:0;display:flex;flex-wrap:wrap;gap:8px}
.etapes legend{width:100%;padding:0}
.etape-choix{position:relative;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--filet);
  border-radius:var(--rayon);font-size:.84rem;font-weight:500;background:var(--blanc);cursor:pointer}
.etape-choix input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.etape-choix:has(input:checked){border-color:var(--accent);background:var(--voile);color:var(--accent)}
.etape-choix:has(input:focus-visible){outline:3px solid rgba(91,75,209,.3);outline-offset:1px}
.etape-choix:has(input:disabled){cursor:default}
.editeur .mot-anna{margin:16px 0 0}
.editeur-pied{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px}
.editeur-pied .rouge{margin-left:auto}
@media (prefers-reduced-motion:no-preference){
  .editeur[open]{animation:monter .3s var(--sortie)}
}
@media (max-width:640px){
  .cal-tete{justify-content:space-between}
  .editeur{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;border-radius:var(--rayon) var(--rayon) 0 0}
  .editeur-duo{grid-template-columns:minmax(0,1fr)}
  .sugg{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* Les résumés de rencontre : encadrés, emoji, sujets en gras (2026-09-14) */
.renc .corps .lead{font-size:.95rem;margin:2px 0 4px;max-width:64ch}
.encadre{background:var(--voile2);border:1px solid var(--voile);border-radius:var(--rayon);padding:12px 16px 14px;margin-top:12px}
.encadre h4{font:600 .96rem/1.3 var(--titres);color:var(--encre);margin:0 0 10px;display:flex;gap:9px;align-items:baseline}
.encadre .emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:1.05rem;flex:0 0 auto}
.renc .corps .encadre p{max-width:none}
.encadre .point + .point{margin-top:10px}
.encadre .sujet{display:block;font-weight:600;color:var(--accent);margin-bottom:1px}
.encadre.decide{background:var(--blanc);border-color:var(--filet)}
.encadre.decide ul{gap:10px}
.encadre.creuser{background:var(--or-voile);border-color:#f1e2b8}

/* Ruban : rangées de plus quand les moments se touchent (2026-09-14) */
.mk .lab{z-index:1}
.mk.bas2 .tige{top:86px;height:58px}
.mk.bas2 .lab{top:146px}
.mk.bas3 .tige{top:86px;height:102px}
.mk.bas3 .lab{top:190px}

/* Aperçu d'Anna : ce qui est figé le dit */
.fige-note{display:flex;gap:7px;align-items:center;width:fit-content;max-width:100%;font-size:.8rem;color:var(--doux);
  background:var(--voile2);border:1px dashed #d9d3f2;border-radius:var(--rayon);padding:6px 11px;margin-top:10px}
.fige-note .ic{color:var(--accent)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* Si tu cherches une idée : les semaines côte à côte */
.onglet > #suggestions{order:0}
.suggs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:12px}
.sugg{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--k-filet);border-radius:var(--rayon);background:var(--blanc)}
.sugg:first-child{border-top:1px solid var(--k-filet)}
.sugg .semaine b{display:inline;font-size:.86rem}
.sugg > div:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1}
.sugg h3{margin:0}
.sugg .lien-doux{margin-top:auto}
@media (max-width:640px){
  .suggs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .sugg{scroll-snap-align:start}
}

/* Résumés sur téléphone : moins de marges empilées, plus de place pour le texte (2026-09-14) */
@media (max-width:640px){
  .renc{padding-left:34px}
  .renc .corps{padding:0 10px 12px}
  .encadre{padding:10px 12px 12px;margin-top:10px}
  .encadre h4{font-size:.92rem}
}

/* La bulle de Jane (2026-09-16) : un mot dit à voix haute, calculé pour elle */
.jane-voix{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;padding:6px 16px 6px 6px;
  border:1.5px solid var(--filet);border-radius:999px;background:var(--blanc);color:var(--encre);
  font:inherit;text-align:left;cursor:pointer;box-shadow:var(--ombre);max-width:100%;
  transition:border-color .15s ease,transform .12s ease}
.jane-voix:hover{border-color:var(--accent-vif)}
.jane-voix:active{transform:translateY(1px)}
.jane-voix:focus-visible{outline:3px solid rgba(91,75,209,.35);outline-offset:2px}
.jane-voix img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 2px var(--voile)}
.jane-voix.joue img{box-shadow:0 0 0 2px var(--accent-vif)}
.jane-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.jane-txt b{font-weight:600;font-size:.92rem}
.jane-txt small{color:var(--doux);font-size:.8rem}
.jane-ic{color:var(--accent)}
.jane-ondes{display:none;align-items:center;gap:3px;height:18px}
.jane-ondes i{display:block;width:3px;height:100%;border-radius:2px;background:var(--accent);
  transform-origin:center;animation:jane-onde 1s ease-in-out infinite}
.jane-ondes i:nth-child(2){animation-delay:-.3s}
.jane-ondes i:nth-child(3){animation-delay:-.6s}
.jane-ondes i:nth-child(4){animation-delay:-.15s}
.jane-voix.joue .jane-ondes{display:inline-flex}
.jane-voix.joue .jane-ic{display:none}
@keyframes jane-onde{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.jane-ondes i{transform:scaleY(.7)}}
.jane-bloc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 14px}
.jane-bloc .jane-voix{margin:0}

/* En haut à droite : couper ou réactiver la voix de Jane */
.voix-bascule{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--filet);background:var(--blanc);
  color:var(--accent);border-radius:999px;padding:6px 12px;font:500 .8rem var(--texte);cursor:pointer;
  transition:border-color .15s ease}
.voix-bascule:hover{border-color:var(--accent-vif)}
.voix-bascule:disabled{cursor:default}
.voix-bascule:focus-visible{outline:3px solid rgba(91,75,209,.35);outline-offset:2px}
.voix-bascule .voix-off{display:none}
.voix-bascule[data-on="0"]{color:var(--doux)}
.voix-bascule[data-on="0"] .voix-on{display:none}
.voix-bascule[data-on="0"] .voix-off{display:inline}
@media (max-width:640px){.voix-bascule{padding:8px}.voix-mot{display:none}}

/* L'annonce, une seule fois par cliente */
.annonce-jane{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px;padding:22px 24px;
  background:var(--voile2);border-color:#dcd6fb}
.annonce-jane img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 3px var(--blanc)}
.annonce-jane h2{font-size:1.15rem;margin:4px 0 8px}
.annonce-jane p{margin:0 0 8px;max-width:62ch}
.annonce-jane .btn{margin-top:6px}
.annonce-jane.partir{opacity:0;translate:0 -8px;transition:opacity .3s ease,translate .3s ease}
@media (max-width:640px){.annonce-jane{flex-direction:column;gap:10px;padding:18px}}

/* « Prends en note 🫡 » : le mot d'Anna, le même pour toutes ses clientes (2026-09-18) */
.notes-anna{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.note-anna{background:var(--voile2);border:1px solid var(--voile);border-radius:var(--rayon);padding:16px 18px}
.note-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.note-tete b{font-family:var(--titres);font-size:1rem;letter-spacing:-.01em}
.note-tete .quand{font-size:.78rem;color:var(--doux);white-space:nowrap}
.note-texte{margin-top:8px;font-size:.93rem;line-height:1.6}
.note-texte p + p{margin-top:10px}
.note-anna .btn{margin-top:12px}
.badge.doux{color:var(--doux);border-color:var(--filet)}
.zone-lilas{--z-fond:#f5ecfb;--z-filet:#e6d0f5;--z-point:#8a4fd1;--z-titre:#560bad}

/* La réponse d'Anna sous une question ou une page de journal (2026-10-06) */
.reponse-anna{display:block;margin-top:8px;padding:9px 13px;background:var(--blanc);border:1px solid var(--voile);
  border-left:3px solid var(--accent-vif);border-radius:4px 12px 12px 4px;font-size:.88rem;line-height:1.5;color:var(--encre)}
.reponse-anna b{font:600 .78rem var(--texte);color:var(--accent);margin-right:8px}
.ligne > .reponse-anna{flex:1 1 100%}
.reponse-anna .rep-date{font-size:.76rem;color:var(--doux)}
.reponse-anna .rep-texte{display:block;margin-top:2px;white-space:pre-line}

/* Le popup « Anna t'a répondu » à l'ouverture de l'espace (2026-10-06) */
.popup-reponses{border:0;border-radius:var(--rayon);padding:24px;width:min(520px,92vw);max-height:86vh;overflow:auto;
  background:var(--blanc);color:var(--encre);box-shadow:0 24px 60px rgba(42,31,77,.28);margin:auto}
.popup-reponses::backdrop{background:rgba(42,31,77,.45)}
.popup-reponses[open]{animation:monter .35s var(--sortie) both}
.pr-tete{display:flex;align-items:center;gap:10px;color:var(--accent);margin-bottom:14px}
.pr-tete h2{font-size:1.2rem}
.pr-liste{display:flex;flex-direction:column;gap:14px;max-height:56vh;overflow:auto;margin-bottom:16px}
.popup-reponses .fige-note{margin:0 0 14px}
.pr-item{padding:12px 14px;background:var(--voile2);border:1px solid var(--voile);border-left:3px solid var(--accent-vif);border-radius:4px 12px 12px 4px}
.pr-etiq{display:block;font:600 .76rem var(--texte);color:var(--accent)}
.pr-orig{font-size:.84rem;color:var(--doux);margin:2px 0 8px}
.pr-rep{font-size:.93rem;line-height:1.55;white-space:pre-line}
@media (prefers-reduced-motion:reduce){.popup-reponses[open]{animation:none}}