/* CALENDRIER SECRET — apparence commune des pages (création, calendrier reçu, e-mails) */
:root{
  --fond:#120a10; --carte:#1f121b; --carte2:#2a1824; --ligne:#3d2534;
  --texte:#f6e9ef; --doux:#b99aab; --accent:#e8436f; --or:#f2c14e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font-family:'Segoe UI',system-ui,sans-serif;line-height:1.45}
.page{max-width:760px;margin:0 auto;padding:16px 16px 120px}
h1{font-size:1.5rem;margin:8px 0 2px}
h2{font-size:1.15rem;margin:0 0 12px}
.sous{color:var(--doux);margin:0 0 18px;font-size:.95rem}
.badge{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--or);border:1px solid var(--or);border-radius:20px;padding:2px 10px}

/* étapes */
.etapes{display:flex;gap:6px;margin:16px 0 22px}
.etapes button{flex:1;white-space:nowrap;background:var(--carte);color:var(--doux);border:1px solid var(--ligne);border-radius:10px;padding:8px 4px;font-size:.8rem;cursor:pointer}
.etapes button.actif{background:var(--accent);color:#fff;border-color:var(--accent)}
section{display:none}
section.actif{display:block}

.bloc{background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:16px;margin-bottom:14px}
.occasions{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.occ{background:var(--carte2);border:2px solid transparent;border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;color:var(--texte)}
.occ .em{font-size:1.8rem;display:block}
.occ small{color:var(--doux);display:block;margin-top:2px}
.occ.actif{border-color:var(--accent)}
label.champ{display:block;margin:12px 0 4px;font-size:.88rem;color:var(--doux)}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{width:100%;background:var(--carte2);color:var(--texte);border:1px solid var(--ligne);border-radius:10px;padding:10px;font:inherit}
textarea{min-height:64px;resize:vertical}
.rangee{display:flex;gap:10px;flex-wrap:wrap}
.rangee>*{flex:1;min-width:140px}

.interrupteur{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--carte2);border-radius:12px;margin-top:10px;cursor:pointer}
.interrupteur input{width:22px;height:22px;accent-color:var(--accent);flex:none;margin-top:2px}
.interrupteur small{display:block;color:var(--doux)}

/* cases */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.case{position:relative;aspect-ratio:1;border-radius:14px;background:var(--carte2);border:1px dashed var(--ligne);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;cursor:pointer;overflow:hidden;color:var(--texte)}
.case img,.case video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.case span{position:relative;text-shadow:0 1px 4px #000}
.case .pastille{position:absolute;top:4px;right:4px;font-size:.75rem;background:#000a;border-radius:8px;padding:1px 5px}
.case.pleine{border:1px solid var(--accent)}

/* éditeur */
.apercu-media{background:#000;border-radius:12px;overflow:hidden;display:flex;justify-content:center;min-height:120px}
.apercu-media img,.apercu-media video{max-width:100%;max-height:320px;display:block}
.coupe{margin-top:12px}
.coupe .ligne-temps{position:relative;height:36px}
.coupe input[type=range]{position:absolute;left:0;right:0;width:100%;pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent;top:8px}
.coupe input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--or);border:2px solid #000;cursor:pointer}
.coupe input[type=range]::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:var(--or);border:2px solid #000;cursor:pointer}
.coupe .piste{position:absolute;left:0;right:0;top:17px;height:6px;border-radius:3px;background:var(--ligne)}
.coupe .zone{position:absolute;top:17px;height:6px;background:var(--accent);border-radius:3px}
.temps{display:flex;justify-content:space-between;font-size:.85rem;color:var(--doux)}

.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:12px;padding:12px 18px;font:inherit;font-weight:600;cursor:pointer}
.btn.second{background:var(--carte2);color:var(--texte);border:1px solid var(--ligne)}
.btn.petit{padding:8px 12px;font-size:.88rem}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.note{font-size:.85rem;color:var(--doux);margin-top:8px}

/* vue destinataire */
.scene{position:relative;overflow:hidden;border-radius:18px;padding:28px 14px;text-align:center;min-height:360px;background:radial-gradient(circle at 50% 0%,var(--theme,#5a1530),var(--fond) 70%)}
.scene-fond{position:absolute;inset:-24px;background-size:cover;background-position:center;z-index:0}
.scene>*:not(.scene-fond){position:relative;z-index:1}
.scene h3{margin:0 0 4px;font-size:1.4rem;text-shadow:0 2px 8px #000}
.scene .accueil{font-style:italic;margin:6px auto 0;max-width:480px;text-shadow:0 1px 6px #000}
.boules{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.boule{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;border:2px solid transparent;color:#fff;font-size:1rem}
.forme-carre .boule{border-radius:12px}
.forme-coeur .boule{border:none;border-radius:0;padding-top:4px;clip-path:path('M29 54C29 54 2 37 2 19C2 9 10 3 18 3C23 3 27 6 29 10C31 6 35 3 40 3C48 3 56 9 56 19C56 37 29 54 29 54Z')}
.forme-etoile .boule{border:none;border-radius:0;padding-top:6px;clip-path:polygon(50% 0,63% 34%,100% 36%,71% 59%,81% 96%,50% 75%,19% 96%,29% 59%,0 36%,37% 34%)}
.boule.futur{background:#333;color:#777;cursor:not-allowed;opacity:.6}
.boule.dispo{background:radial-gradient(circle at 30% 30%,var(--accent),color-mix(in srgb,var(--accent) 45%,#000));border-color:var(--or);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}
.nuancier{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nuancier button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.nuancier button.actif{border-color:#fff}
.nuancier input[type=color]{width:38px;height:38px;border:none;background:none;padding:0;cursor:pointer}
.formes{display:flex;gap:8px;flex-wrap:wrap}
.formes button{flex:1;min-width:70px;background:var(--carte2);color:var(--texte);border:2px solid transparent;border-radius:10px;padding:8px;cursor:pointer;font:inherit}
.formes button.actif{border-color:var(--accent)}
input[type=range].plein{width:100%;accent-color:var(--accent)}
.boule.ouvert{background:radial-gradient(circle at 30% 30%,var(--or),#9b7316);color:#5a1530;border-color:#fff}
.boule.brule{background:#2a2a2a;color:#888;border-color:#555;cursor:default}
.boule.vide{background:var(--carte2);color:var(--doux);border:1px dashed var(--ligne)}

#voile{display:none;position:fixed;inset:0;background:#000f;z-index:50;flex-direction:column;align-items:center;justify-content:center;padding:16px}
#voile.ouvert{display:flex}
#voile .contenu img,#voile .contenu video{max-width:100%;max-height:68vh;border-radius:12px;display:block;margin:0 auto}
#voile .mot{margin:14px 0 0;font-size:1.1rem;max-width:520px;text-align:center}
#voile .alerte{color:var(--or);font-size:.85rem;margin-top:10px}
#voile .compte{position:absolute;top:16px;right:16px;color:var(--or);font-weight:700}

.modes{display:grid;gap:10px}
.mode{background:var(--carte2);border:2px solid transparent;border-radius:14px;padding:14px;cursor:pointer}
.mode.actif{border-color:var(--accent)}
.mode b{display:block}
.mode small{color:var(--doux)}
.pied{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(transparent,var(--fond) 35%);padding:28px 16px 16px}
.pied .page{padding:0;display:flex;justify-content:space-between;gap:10px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--or);color:#000;padding:10px 16px;border-radius:10px;font-weight:600;display:none;z-index:60;max-width:90%;text-align:center}

/* --- ajouts de la version réelle --- */
[hidden]{display:none!important}
a{color:var(--or)}
.btn{text-decoration:none;text-align:center}
.btn.rouge{background:#8a1c1c}
.btn.large{display:block;width:100%}
.btn:disabled{opacity:.5;cursor:default}
.vue{display:none}
.vue.actif{display:block}
.secret{background:linear-gradient(135deg,#2a1824,#1a2a24);border:1px solid #2f5a48;border-radius:16px;padding:14px 16px;margin:14px 0}
.secret b{color:#7be0b0}
.secret ul{margin:8px 0 0;padding-left:20px;color:var(--texte);font-size:.92rem}
.secret li{margin:4px 0}
.heros{text-align:center;padding:18px 0 4px}
.heros .em{font-size:3.2rem;line-height:1}
.liste{display:grid;gap:8px}
.ligne-cal{display:flex;align-items:center;gap:10px;background:var(--carte2);border-radius:12px;padding:10px 12px;cursor:pointer;border:1px solid var(--ligne);color:var(--texte);font:inherit;text-align:left;width:100%}
.ligne-cal .em{font-size:1.6rem}
.ligne-cal small{display:block;color:var(--doux)}
.ligne-cal span:nth-child(2){flex:1}
.pastille-etat{font-size:.75rem;border-radius:20px;padding:2px 10px;background:var(--ligne);color:var(--texte);white-space:nowrap}
.pastille-etat.actif{background:#1f5a3a}
.pastille-etat.attente{background:#6a4a12}
.pastille-etat.arrete{background:#4a1d1d}
.barre{height:10px;border-radius:5px;background:var(--ligne);overflow:hidden;margin:12px 0 6px}
.barre i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.lien-boite{background:#000;border:1px dashed var(--ligne);border-radius:10px;padding:10px;font-family:monospace;font-size:.78rem;word-break:break-all;color:var(--doux);margin:8px 0}
.poids{font-size:.85rem;color:var(--doux);margin-top:10px}
.poids.trop{color:#ff8a8a}
.suivi-case{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--ligne);font-size:.92rem}
.suivi-case:last-child{border-bottom:none}
.suivi-case .num{width:34px;height:34px;border-radius:50%;background:var(--carte2);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.suivi-case small{display:block;color:var(--doux)}
.cloche{display:flex;gap:12px;align-items:center;background:var(--carte2);border:1px solid var(--or);border-radius:14px;padding:12px;margin-top:14px}
.cloche .em{font-size:1.8rem}
.cloche p{margin:0;flex:1;font-size:.92rem}
.etapes-ios{text-align:left;margin:10px auto;max-width:420px}
.etapes-ios li{margin:8px 0}
.pied-page{text-align:center;color:var(--doux);font-size:.85rem;margin:28px 0 8px}
.chargement{text-align:center;padding:40px 0;color:var(--doux)}
.case.distant{border:1px solid var(--accent)}
.case .icone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.6rem;opacity:.5}
.case.brule{opacity:.5;cursor:not-allowed}
#voile .boutons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.compte-rebours{margin-top:14px;color:var(--or);font-weight:600;text-shadow:0 1px 6px #000}
@media (max-width:420px){ .etapes button{font-size:.72rem;padding:8px 2px} }
.a-ton-tour{text-align:center;margin-top:14px;border-color:var(--accent);background:linear-gradient(160deg,var(--carte2),var(--carte))}
.a-ton-tour .em{font-size:2.4rem}
.a-ton-tour p{color:var(--texte);font-size:.95rem}