:root {
	--rose: #f0567a;
	--rose-fonce: #d93d63;
	--rose-pale: #fde3ea;
	--rose-tres-pale: #fff3f6;
	--violet: #b03fa0;
	--violet-pale: #f3e3f5;
	--sarcelle: #1a9e98;
	--sarcelle-pale: #dff3f2;
	--texte: #24171c;
	--texte-doux: #6f6066;
	--fond: #f4f2f3;
	--carte: #ffffff;
	--bord: #ece6e9;
	--ombre: 0 6px 20px rgba(160, 60, 90, .08);
	--rayon: 18px;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	color: var(--texte);
	-webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); min-height: 100dvh; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { opacity: .3; cursor: default; }
#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; }

.ic { display: inline-flex; width: 24px; height: 24px; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic.grand { width: 64px; height: 64px; color: var(--rose); }

/* ---------- Barres ---------- */
.barre { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 12px 8px; }
.barre .titre { text-align: center; font-size: 1.25rem; font-weight: 500; }
.barre.fixe { position: sticky; top: 0; background: var(--carte); z-index: 5; }
.bouton-icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.bouton-icone:active { background: rgba(0, 0, 0, .06); }
.bouton-icone.gris { background: #bdb6b9; color: #fff; width: 36px; height: 36px; }
.bouton-icone.gris .ic { width: 20px; height: 20px; }

/* ---------- Accueil ---------- */
.accueil {
	min-height: 100dvh;
	padding-bottom: 32px;
	background:
		radial-gradient(120% 60% at 110% 0%, rgba(255, 255, 255, .55) 0 40%, transparent 41%),
		radial-gradient(90% 50% at -20% 70%, rgba(255, 255, 255, .45) 0 45%, transparent 46%),
		linear-gradient(180deg, #fde3ea 0%, #f9cfdc 55%, #fbe1e8 100%);
}
.accueil.en-fertile { background:
	radial-gradient(120% 60% at 110% 0%, rgba(255, 255, 255, .55) 0 40%, transparent 41%),
	linear-gradient(180deg, #e0f4f2 0%, #c9ebe8 55%, #e6f5f3 100%); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sarcelle); color: #fff; display: grid; place-items: center; box-shadow: var(--ombre); }

.semaine { display: grid; grid-template-columns: repeat(7, 1fr); padding: 4px 8px 0; text-align: center; }
.jour-semaine { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 96px; }
.lettre { font-size: .8rem; color: var(--texte-doux); }
.lettre.fort { color: var(--texte); font-weight: 700; }
.pastille { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; }
.pastille.auj { box-shadow: 0 0 0 6px #fff; }
.mini-icones { display: flex; align-items: center; background: #fff; border-radius: 99px; padding: 2px 4px; font-size: .8rem; gap: 1px; box-shadow: var(--ombre); }
.mini-icones .plus { font-size: .7rem; color: var(--texte-doux); padding: 0 3px; }
.point { width: 6px; height: 6px; border-radius: 50%; }
.point.visible { background: #9b9396; }

/* États des jours (semaine + calendrier) */
.regles > .num, .pastille.regles { background: var(--rose); color: #fff; }
.prevue > .num, .pastille.prevue { color: var(--rose); border: 2px dotted var(--rose); }
.fertile > .num, .pastille.fertile { color: var(--sarcelle); }
.ovulation > .num, .pastille.ovulation { color: var(--sarcelle); border: 2px dotted var(--sarcelle); }

.salut { text-align: center; font-size: 1.15rem; line-height: 1.4; margin: 10px 28px 0; color: #4a2d38; font-weight: 500; }

.cercle { margin: 22px auto 10px; width: min(72vw, 290px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .35); padding: 24px; }
.cercle .haut { font-size: 1.25rem; font-weight: 600; }
.cercle .grand { font-size: clamp(2.6rem, 13vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin: 4px 0; }
.cercle .bas { font-size: .95rem; color: var(--texte-doux); }
.badge-fertile { margin-top: 10px; background: var(--sarcelle); color: #fff; font-size: .8rem; padding: 4px 12px; border-radius: 99px; }

.actions { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 8px 18px; text-align: center; }
.action { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .95rem; }
.rond { width: 68px; height: 68px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--ombre); }
.rond .ic { width: 30px; height: 30px; }
.rond.rose { background: var(--rose); color: #fff; box-shadow: 0 8px 22px rgba(240, 86, 122, .35); }
.action:active .rond { transform: scale(.95); }

.carte { background: var(--carte); border-radius: var(--rayon); margin: 0 14px 14px; padding: 18px; box-shadow: var(--ombre); }
.etiquette { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); font-weight: 700; margin-bottom: 8px; }
.citation blockquote { margin: 0; font-size: 1.1rem; line-height: 1.5; font-style: italic; color: #3b2a31; }
.citation .auteur { margin-top: 10px; text-align: right; color: var(--texte-doux); font-size: .9rem; }
.conseil p { margin: 0; line-height: 1.5; }
.conseil.phase-regles .etiquette { color: var(--rose-fonce); }
.conseil.phase-ovulation .etiquette, .conseil.phase-folliculaire .etiquette { color: var(--sarcelle); }
.note-bas { text-align: center; color: var(--texte-doux); font-size: .85rem; margin: 10px 24px 20px; line-height: 1.4; }

/* ---------- Saisie d'une journée ---------- */
.saisie { padding-bottom: 40px; }
.saisie .barre { grid-template-columns: 48px 1fr; }
.nav-jour { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; text-align: center; padding: 0 12px; }
.nav-jour .titre { font-size: 1.35rem; font-weight: 700; }
.sous-titre { font-size: .85rem; color: var(--texte-doux); }
.recherche { display: flex; align-items: center; gap: 10px; margin: 14px 14px 16px; padding: 0 16px; height: 50px; border-radius: 99px; background: #e9e5e7; color: var(--texte-doux); }
.recherche input { border: 0; background: none; font: inherit; font-size: 1.05rem; flex: 1; outline: none; color: var(--texte); min-width: 0; }
.saisie h2 { font-size: 1.1rem; margin: 0 0 14px; }
.saisie h2.section { margin: 22px 18px 12px; font-size: 1.25rem; }
.saisie h3 { margin: 0 0 12px; font-size: 1.1rem; }
.aide { color: var(--texte-doux); font-size: .85rem; margin: -6px 0 12px; }
.aide.centre { text-align: center; margin: 0 20px 14px; }

.rapides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.rapide { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .8rem; line-height: 1.2; }
.bulle { position: relative; width: 60px; height: 60px; border-radius: 50%; background: var(--rose-pale); display: grid; place-items: center; font-size: 1.8rem; border: 3px solid transparent; transition: border-color .15s; }
.rapide.actif .bulle { border-color: var(--violet); }

.puces { display: flex; flex-wrap: wrap; gap: 10px; }
.puce { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--rose-tres-pale); border: 2px solid transparent; font-size: .92rem; transition: border-color .15s, background .15s; }
.puce .emoji { width: 30px; height: 30px; border-radius: 50%; background: var(--rose-pale); display: grid; place-items: center; font-size: 1.05rem; }
.puce.actif { border-color: var(--violet); background: #fff; }
.categorie:nth-of-type(6) .puce, .categorie:nth-of-type(6) .puce .emoji { background-color: var(--violet-pale); }
.coche { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--violet); color: #fff; padding: 3px; display: none; }
.coche svg { stroke-width: 3; }
.actif > .coche, .actif .bulle > .coche { display: inline-flex; }
.bulle .coche { right: -2px; bottom: -2px; }

.interrupteur { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0 16px; font-size: .98rem; }
.glissiere { width: 50px; height: 30px; border-radius: 99px; background: #d8d1d4; position: relative; transition: background .2s; }
.glissiere span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.interrupteur.actif .glissiere { background: var(--rose); }
.interrupteur.actif .glissiere span { transform: translateX(20px); }

.champs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--texte-doux); }
.champ input, textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--bord); background: #faf8f9; color: var(--texte); width: 100%; outline: none; }
.champ input:focus, textarea:focus { border-color: var(--rose); }
textarea { resize: vertical; }

.bouton-principal { display: block; margin: 20px auto 0; background: var(--rose); color: #fff; font-weight: 600; font-size: 1.05rem; padding: 14px 34px; border-radius: 99px; box-shadow: 0 8px 22px rgba(240, 86, 122, .3); }
.bouton-secondaire { display: inline-block; background: #fff; color: var(--rose-fonce); font-weight: 600; padding: 12px 24px; border-radius: 99px; border: 2px solid var(--rose); text-decoration: none; }

/* ---------- Calendrier ---------- */
.calendrier { background: var(--carte); min-height: 100dvh; padding-bottom: 170px; }
.onglets { justify-self: center; display: flex; background: #efeced; border-radius: 99px; padding: 4px; }
.onglets button { padding: 10px 26px; border-radius: 99px; color: var(--texte-doux); }
.onglets button.actif { background: #fff; color: var(--texte); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.jours-entete { position: sticky; top: calc(62px + env(safe-area-inset-top)); z-index: 4; background: var(--carte); display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .8rem; color: var(--texte-doux); padding: 4px 6px 10px; border-bottom: 1.5px solid var(--bord); }
.mois { padding: 18px 6px 4px; scroll-margin-top: 120px; }
.mois h3 { text-align: center; margin: 0 0 12px; font-size: 1.2rem; }
.grille { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; }
.case { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 62px; font-size: 1.05rem; }
.case .num { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.case.auj .num { box-shadow: 0 0 0 4px #e9e4e6; font-weight: 700; }
.case.auj:not(.regles):not(.prevue) .num { background: #f1eef0; }
.auj-label { position: absolute; top: -8px; font-size: .6rem; font-weight: 700; }
.case.futur.fertile .num, .case.fertile .num { color: var(--sarcelle); }
.case .coche { position: absolute; display: inline-flex; bottom: 4px; right: calc(50% - 22px); background: #fff; color: transparent; border: 2px solid #cfc6ca; width: 20px; height: 20px; }
.modifier .case.choisi .coche { background: var(--rose); border-color: var(--rose); color: #fff; }
.modifier .case:not(.choisi) .coche svg { visibility: hidden; }
.modifier .case.futur { opacity: .35; }
.modifier .case.choisi .num { background: var(--rose-pale); color: var(--rose-fonce); border: 0; }
.modifier .case:not(.choisi).regles .num { background: none; color: var(--texte); }

.annee-titre { text-align: center; margin: 18px 0 0; }
.annee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; padding: 0 10px; }
.mois.mini { padding: 12px 0 0; }
.mois.mini h3 { font-size: .85rem; text-align: left; margin: 0 0 6px 4px; text-transform: capitalize; }
.mois.mini .grille { row-gap: 2px; }
.case.mini { min-height: 0; font-size: .58rem; aspect-ratio: 1; border-radius: 50%; }
.case.mini.regles { background: var(--rose); color: #fff; }
.case.mini.prevue { color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.case.mini.fertile, .case.mini.ovulation { color: var(--sarcelle); font-weight: 700; }
.case.mini.auj { box-shadow: inset 0 0 0 1.5px var(--texte); }

.bas-fixe { position: fixed; left: 0; right: 0; bottom: calc(46px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 12px; z-index: 6; pointer-events: none; }
.bas-fixe > * { pointer-events: auto; margin: 0; }
.legende { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); background: var(--carte); border-top: 1.5px solid var(--bord); display: flex; justify-content: center; gap: 16px; font-size: .78rem; color: var(--texte-doux); z-index: 6; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.l-regles { background: var(--rose); }
.l-prevue { border: 2px dotted var(--rose); }
.l-fertile { background: var(--sarcelle-pale); border: 2px solid var(--sarcelle); }
.l-ovulation { border: 2px dotted var(--sarcelle); }

.feuille { position: fixed; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: var(--carte); border-radius: 28px 28px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .15); padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); z-index: 10; animation: monter .2s ease-out; }
.feuille[hidden] { display: none; }
@keyframes monter { from { transform: translateY(40px); opacity: 0; } }
.feuille-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.feuille-tete h2 { margin: 0; font-size: 1.45rem; }
.feuille h3 { font-weight: 500; margin: 18px 0 12px; }
.feuille .aide { margin: 6px 0 0; }
.feuille-notes { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f2f0f1; border-radius: 22px; padding: 14px; }
.feuille-icones { display: flex; flex-wrap: wrap; gap: 6px; }
.feuille-icones .bulle { width: 48px; height: 48px; font-size: 1.5rem; border: 0; }
.fab { width: 60px; height: 60px; flex: none; border-radius: 50%; background: var(--sarcelle); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(26, 158, 152, .4); }
.fab .ic { width: 30px; height: 30px; }
.feuille-note { margin: 12px 4px 0; color: var(--texte-doux); white-space: pre-wrap; }

/* ---------- Statistiques ---------- */
.stats { padding-bottom: 30px; }
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 14px 14px; }
.tuile { background: var(--carte); border-radius: var(--rayon); padding: 16px 8px; text-align: center; font-size: .8rem; color: var(--texte-doux); box-shadow: var(--ombre); }
.tuile .valeur { font-size: 1.35rem; font-weight: 800; color: var(--rose-fonce); margin-bottom: 4px; }
.stats h3 { margin: 0 0 12px; }
.cycles { display: flex; flex-direction: column; gap: 10px; }
.cycle-ligne { display: grid; grid-template-columns: 62px 1fr 54px; align-items: center; gap: 8px; font-size: .85rem; }
.cycle-date { color: var(--texte-doux); }
.cycle-duree { text-align: right; font-weight: 600; }
.cycle-barre { height: 14px; }
.piste { display: block; height: 100%; background: var(--sarcelle-pale); border-radius: 99px; overflow: hidden; }
.piste .r { display: block; height: 100%; background: var(--rose); border-radius: 99px; }
.top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.top li { display: flex; align-items: center; gap: 12px; }
.top .emoji { width: 36px; height: 36px; border-radius: 50%; background: var(--rose-pale); display: grid; place-items: center; }
.top .nom { flex: 1; }
.top .n { color: var(--texte-doux); font-size: .85rem; }

/* ---------- Divers ---------- */
#toast { position: fixed; left: 50%; bottom: calc(30px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: #2c2226; color: #fff; padding: 10px 20px; border-radius: 99px; font-size: .9rem; opacity: 0; pointer-events: none; transition: .2s; z-index: 20; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
.bandeau-hors-ligne { display: none; position: fixed; top: 0; left: 0; right: 0; background: #6f6066; color: #fff; text-align: center; font-size: .8rem; padding: calc(4px + env(safe-area-inset-top)) 10px 4px; z-index: 30; }
body.hors-ligne .bandeau-hors-ligne { display: block; }
.chargement, .interdit { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(180deg, #fde3ea, #f9cfdc); padding: 20px; }
.lune-chargement { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset -14px -4px 0 0 var(--rose); animation: tourne 1.4s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
.espace { width: 44px; }

/* ---------- La lune (ciel étoilé) ---------- */
.nuit, .nuit-haut {
	position: relative; overflow: hidden; color: #eef0ff;
	background:
		radial-gradient(70% 60% at 85% 10%, rgba(120, 110, 220, .35), transparent 70%),
		radial-gradient(60% 50% at 0% 100%, rgba(200, 80, 160, .25), transparent 70%),
		linear-gradient(160deg, #0b1030 0%, #18205a 55%, #2a1f5c 100%);
}
.nuit { display: block; width: calc(100% - 28px); text-align: left; padding: 20px; }
.nuit:active { transform: scale(.99); }
.etoiles { position: absolute; inset: 0; pointer-events: none; }
.etoiles i { position: absolute; width: var(--t); height: var(--t); border-radius: 50%; background: #fff; opacity: .8; box-shadow: 0 0 6px rgba(255, 255, 255, .7); animation: scintille 3.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes scintille { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .etoiles i { animation: none; } }
.nuit-contenu { position: relative; }
.nuit .etiquette { color: #c9c2ff; }
.lune-tete { display: flex; align-items: center; gap: 16px; }
.lune-dessin svg, .lune-grande svg { filter: drop-shadow(0 0 18px rgba(255, 245, 210, .35)); display: block; }
.lune-nom { font-size: 1.3rem; font-weight: 700; }
.lune-sous { font-size: .85rem; color: #b9bce0; margin-top: 2px; }
.lune-evs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.lune-ev { display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 10px; font-size: .8rem; line-height: 1.35; color: #d7d9f5; }
.lune-ev strong { color: #fff; font-size: .9rem; }
.lune-ev-ic svg { display: block; }
.lune-plus { margin-top: 14px; font-size: .85rem; color: #c9c2ff; text-align: right; }

.vue-lune { padding-bottom: 30px; }
.nuit-haut { padding-bottom: 26px; margin-bottom: 16px; border-radius: 0 0 32px 32px; text-align: center; }
.nuit-haut .barre { position: relative; }
.nuit-haut .bouton-icone:active { background: rgba(255, 255, 255, .1); }
.lune-grande { position: relative; display: flex; justify-content: center; margin: 10px 0 14px; }
.nuit-haut .lune-nom { font-size: 1.6rem; position: relative; }
.nuit-haut .lune-sous { position: relative; }
.lune-calendrier { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 14px 0; }
.lune-calendrier > div { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 10px 4px; font-size: .78rem; color: #d7d9f5; }
.lune-calendrier strong { color: #fff; }
.effets-tete { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.effets-tete svg { display: block; background: #18205a; border-radius: 50%; }
.effets h3 { margin: 0; }
.effets-tete .aide { margin: 4px 0 0; }
.nom-pleine { display: inline-block; margin-top: 6px; font-size: .78rem; background: var(--violet-pale); color: var(--violet); padding: 2px 10px; border-radius: 99px; font-weight: 600; }
.effets > p { line-height: 1.5; margin: 0 0 14px; }
.effets-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.effets-liste li { display: flex; gap: 12px; }
.effets-liste .emoji { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #ece9fb; display: grid; place-items: center; }
.effets-liste p { margin: 4px 0 0; line-height: 1.5; color: #4a3d43; font-size: .93rem; }
.vue-lune .carte h3 { margin-top: 0; }
.boutons { display: flex; flex-wrap: wrap; gap: 10px; }