/* ============================================================================
   PROJET JIGEN - Précieux Care  ·  Thème "YEETE-like" (santé, sombre, premium)
   Identité visuelle alignée sur l'app YEETE de Précieux Care.
   Variables centralisées : modifiez ici pour adapter la charte.
   ============================================================================ */

:root {
    /* ---- THÈME SOMBRE (par défaut) ---- */
    --bg:          #0A1512;   /* fond vert-noir profond */
    --bg-2:        #0E1C18;   /* fond secondaire */
    --surface:     #12231E;   /* cartes neutres */
    --surface-2:   #16302A;   /* cartes survol */
    --line:        rgba(255,255,255,.07);

    --teal:        #1B8A77;   /* teal officiel (arc gauche du logo) */
    --teal-deep:   #005850;   /* teal profond officiel */
    --teal-grad-1: #0E7A66;
    --teal-grad-2: #1FA98A;
    --mint:        #5FE3C0;   /* texte d'accent clair sur cartes sombres */
    --orange:      #F4862B;   /* carte d'action mise en avant */
    --orange-2:    #FF9D3D;
    --gold:        #E8B04B;

    /* ---- ROSE OFFICIEL JIGEN (couleur signature) ---- */
    --rose:        #E84888;   /* rose magenta officiel (texte JIGEN) */
    --rose-2:      #F46FA8;   /* rose clair (dégradés) */
    --rose-deep:   #A82058;   /* magenta foncé (cheveux du logo) */
    --rose-soft:   #2A1620;   /* fond rosé sombre (cartes) */
    --pink-mint:   #FF8FC7;   /* texte rose clair sur fond sombre */

    --text:        #EAF4F0;   /* texte principal clair */
    --text-soft:   #9DB5AD;   /* texte secondaire */
    --text-mint:   #4FD6AC;   /* titres de cartes */

    --alert-bg:    #F8E6C0;   /* bandeau d'info santé (crème) */
    --alert-ink:   #7A5A1E;
    --danger:      #E5484D;
    --danger-bg:   #2A1416;

    --radius:      22px;
    --radius-lg:   28px;
    --radius-sm:   14px;

    --font-display:'Lexend', system-ui, -apple-system, sans-serif;
    --font-body:   'Lexend', system-ui, -apple-system, sans-serif;

    --maxw: 1080px;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --nav-h: 74px;
}

/* ---- THÈME CLAIR (bascule via [data-theme="light"]) ---- */
[data-theme="light"] {
    --bg:        #F4F8F6;
    --bg-2:      #EAF1EE;
    --surface:   #FFFFFF;
    --surface-2: #F0F6F3;
    --line:      rgba(10,40,30,.08);
    --text:      #15241F;
    --text-soft: #5A6E67;
    --text-mint: #0E7C66;
    --mint:      #0E7C66;
    --shadow:    0 8px 24px rgba(20,60,45,.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--nav-h) + 20px); /* place pour la bottom-nav */
    transition: background .3s, color .3s;
}

/* Accessibilité agrandie */
[data-bigtext="1"] { font-size: 118%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

h1,h2,h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.page__title, .tile__title, .metric__value, .preg-week { font-weight: 700; letter-spacing: -.02em; }
a { color: var(--mint); text-decoration: none; }

/* ============================ EN-TÊTE ============================ */
.app-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.app-header__in { display: flex; align-items: center; gap: 14px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { height: 40px; width: auto; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--rose); line-height: 1; letter-spacing: -.02em; }
.brand__sub  { font-size: .58rem; letter-spacing: .22em; color: var(--text-soft); text-transform: uppercase; margin-top: 2px; }
.header-actions { margin-left: auto; display: flex; gap: 10px; }
.icon-btn {
    width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line);
    background: var(--surface); color: var(--text); display: grid; place-items: center;
    cursor: pointer; transition: background .2s, transform .15s; font-size: 1.15rem;
}
.icon-btn:hover { background: var(--surface-2); transform: translateY(-1px); }
.icon-btn--active { background: var(--teal); color: #fff; border-color: transparent; }

/* ============================ PAGE / TITRES ============================ */
.page { padding: 22px 0 10px; }
.page__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page__title { font-size: clamp(1.8rem, 5vw, 2.5rem); color: var(--text); }
.page__code { font-family: var(--font-body); font-weight: 700; font-size: .85rem; letter-spacing: .1em; color: var(--text-soft); }

/* Champ statut / message d'accueil */
.status-field {
    width: 100%; background: transparent; border: 1px solid var(--line);
    border-radius: 16px; padding: 18px 20px; color: var(--text-soft);
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 1.05rem;
}

/* Bandeau d'alerte santé */
.health-banner {
    background: var(--alert-bg); color: var(--alert-ink); border-radius: 16px;
    padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 22px; font-weight: 500; line-height: 1.5;
}
.health-banner svg { flex: none; margin-top: 2px; }

/* ============================ GRILLE DE CARTES ============================ */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .tiles { grid-template-columns: 1fr; } }
/* Fallback moteurs sans CSS Grid */
@supports not (display: grid) {
    .tiles { display: flex; flex-wrap: wrap; }
    .tiles > .tile { flex: 1 1 calc(33.333% - 16px); min-width: 220px; }
}

.tile {
    position: relative; border-radius: var(--radius); padding: 20px;
    min-height: 150px; display: flex; flex-direction: column; justify-content: space-between;
    background: var(--surface); border: 1px solid var(--line);
    color: var(--text); cursor: pointer; overflow: hidden;
    transition: transform .18s, box-shadow .25s, background .2s;
    text-decoration: none;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.tile__icon {
    width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(150deg, rgba(232,72,136,.16), rgba(31,169,138,.14));
    color: var(--mint); margin-bottom: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.tile:hover .tile__icon { transform: scale(1.08) rotate(-3deg); }
.tile__icon .jico { width: 30px; height: 30px; }
.tile__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text-mint); }
.tile__sub   { font-size: .92rem; color: var(--text-soft); margin-top: 2px; }
.tile__sound {
    position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
    border: none; background: transparent; color: var(--text-soft); cursor: pointer;
    display: grid; place-items: center; border-radius: 8px; opacity: .8;
}
.tile__sound:hover { background: rgba(255,255,255,.1); opacity: 1; }

/* Carte mise en avant : dégradé teal (active) */
.tile--primary {
    background: linear-gradient(150deg, var(--teal-grad-1), var(--teal-grad-2));
    border-color: transparent; color: #fff;
}
.tile--primary .tile__title { color: #fff; }
.tile--primary .tile__sub { color: rgba(255,255,255,.85); }
.tile--primary .tile__icon { background: rgba(255,255,255,.2); }
.tile--primary .tile__sound { color: rgba(255,255,255,.85); }

/* Carte action : orange */
.tile--accent {
    background: linear-gradient(150deg, var(--orange), var(--orange-2));
    border-color: transparent; color: #fff;
}
.tile--accent .tile__title { color: #fff; }
.tile--accent .tile__sub { color: rgba(255,255,255,.9); }
.tile--accent .tile__icon { background: rgba(255,255,255,.22); }
.tile--accent .tile__sound { color: rgba(255,255,255,.9); }

/* ============================ BOTTOM NAV ============================ */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg-2) 96%, transparent);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    height: var(--nav-h);
    display: flex; align-items: stretch; justify-content: center;
    padding: 0 6px; padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav__in { display: flex; max-width: 620px; width: 100%; justify-content: space-around; align-items: stretch; }
.nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 4px; color: var(--text-soft); text-decoration: none;
    font-size: .7rem; font-weight: 600; flex: 1 1 0; min-width: 0; max-width: 96px;
    position: relative; transition: color .2s;
}
.nav-item span:last-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.nav-item__ico {
    display: grid; place-items: center; width: 26px; height: 26px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.nav-item svg { width: 24px; height: 24px; stroke-width: 1.9; }
.nav-item:hover { color: var(--text); }
.nav-item:hover .nav-item__ico { transform: translateY(-2px); }
/* Actif : coloré + petit trait sous l'icône, SANS débordement vers le haut */
.nav-item--active { color: var(--rose); }
.nav-item--active .nav-item__ico { transform: none; }
.nav-item--active .nav-item__ico svg { stroke: var(--rose); }
.nav-item--active::before {
    content: ""; position: absolute; top: 6px; width: 34px; height: 34px; border-radius: 12px;
    background: radial-gradient(circle, rgba(232,72,136,.20), transparent 70%); z-index: -1;
}

/* ============================ BOUTONS / FORMULAIRES ============================ */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 14px;
    font-weight: 600; font-size: 1rem; cursor: pointer; border: none; transition: transform .15s, box-shadow .25s; text-decoration: none; }
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn--primary { background: linear-gradient(150deg, var(--teal-grad-1), var(--teal-grad-2)); color: #fff; box-shadow: 0 8px 22px rgba(20,140,110,.3); }
.btn--accent  { background: var(--orange); color: #fff; }
.btn--ghost   { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn--block   { width: 100%; justify-content: center; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.form-card { max-width: 440px; margin: 28px auto; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--text); }
.field input, .field select, .field textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
    font: inherit; background: var(--bg-2); color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); }
.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: .92rem; }
.alert--error { background: var(--danger-bg); color: #FF9A9D; border: 1px solid rgba(229,72,77,.3); }
.alert--success { background: rgba(31,169,138,.12); color: var(--mint); border: 1px solid rgba(31,169,138,.3); }

/* ============================ CHAT ASSISTANT ============================ */
.chat { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; min-height: 60vh; }
.chat__stream { flex: 1; overflow-y: auto; padding: 16px 2px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 84%; padding: 13px 17px; border-radius: 18px; line-height: 1.55; }
.bubble--user { align-self: flex-end; background: linear-gradient(150deg, var(--teal-grad-1), var(--teal-grad-2)); color: #fff; border-bottom-right-radius: 6px; }
.bubble--ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble--emergency { background: var(--danger-bg); border: 1px solid var(--danger); color: #FFB3B5; align-self: stretch; max-width: 100%; }
.chat__form { display: flex; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--bg); }
.chat__form textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; font: inherit; background: var(--bg-2); color: var(--text); max-height: 120px; }
.chat__form textarea:focus { outline: none; border-color: var(--teal); }
.disclaimer { font-size: .85rem; color: var(--text-soft); background: var(--surface); border: 1px solid var(--line); padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; }

/* ============================ TABLES ADMIN ============================ */
table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 14px; overflow: hidden; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .9rem; }
th { background: var(--bg-2); font-weight: 600; color: var(--text-mint); }

/* ============================ ACCESSIBILITÉ ============================ */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip-link:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .5s ease both; }
.t1{animation-delay:.04s}.t2{animation-delay:.08s}.t3{animation-delay:.12s}
.t4{animation-delay:.16s}.t5{animation-delay:.20s}.t6{animation-delay:.24s}
.t7{animation-delay:.28s}.t8{animation-delay:.32s}

/* ============================================================================
   COMPOSANTS AVANCÉS - écrans enrichis (suivi, agenda, voix, nutrition...)
   ============================================================================ */

/* ---- Section header avec action ---- */
.sec-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 0 14px; }
.sec-head h2 { color:var(--text); font-size:1.4rem; }
.sec-head .sec-link { font-size:.85rem; color:var(--text-mint); font-weight:600; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:600;
    background:var(--surface); border:1px solid var(--line); color:var(--text-soft); }
.chip--ok { color:#5FE3C0; border-color:rgba(95,227,192,.3); background:rgba(31,169,138,.1); }
.chip--warn { color:var(--gold); border-color:rgba(232,176,75,.3); background:rgba(232,176,75,.08); }
.chip--danger { color:#FF9A9D; border-color:rgba(229,72,77,.3); background:var(--danger-bg); }

/* ---- Stat cards (indicateurs santé) ---- */
.metrics { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.metric { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; position:relative; overflow:hidden; }
.metric__label { font-size:.82rem; color:var(--text-soft); display:flex; align-items:center; gap:7px; }
.metric__value { font-family:var(--font-display); font-size:2rem; color:var(--text); margin-top:6px; line-height:1; }
.metric__unit { font-size:.9rem; color:var(--text-soft); font-family:var(--font-body); }
.metric__trend { font-size:.78rem; margin-top:8px; display:flex; align-items:center; gap:4px; }
.metric__spark { position:absolute; right:0; bottom:0; opacity:.5; }
.trend-up { color:#5FE3C0; } .trend-down { color:#FF9A9D; } .trend-flat { color:var(--text-soft); }

/* ---- Mini bar chart (pur CSS) ---- */
.barchart { display:flex; align-items:flex-end; gap:8px; height:140px; padding:14px; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--radius); }
.barchart .bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.barchart .bar i { width:100%; max-width:34px; background:linear-gradient(180deg,var(--teal-grad-2),var(--teal-grad-1));
    border-radius:7px 7px 0 0; display:block; transition:height .6s cubic-bezier(.2,.8,.2,1); }
.barchart .bar small { font-size:.7rem; color:var(--text-soft); }
.barchart .bar b { font-size:.72rem; color:var(--text); }

/* ---- Ligne de progression circulaire (SVG) ---- */
.ring { display:grid; place-items:center; }
.ring svg { transform:rotate(-90deg); }
.ring__track { stroke:var(--line); }
.ring__fill { stroke:url(#ringgrad); stroke-linecap:round; transition:stroke-dashoffset 1s ease; }
.ring__pct { font-family:var(--font-display); font-size:1.5rem; fill:var(--text); transform:rotate(90deg); }

/* ---- Timeline / agenda ---- */
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line); }
.tl-item { position:relative; padding:14px 0; }
.tl-item::before { content:""; position:absolute; left:-23px; top:20px; width:14px; height:14px; border-radius:50%;
    background:var(--teal); box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 25%,transparent); }
.tl-item--accent::before { background:var(--orange); box-shadow:0 0 0 4px rgba(244,134,43,.25); }
.tl-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.tl-time { font-size:.78rem; color:var(--text-mint); font-weight:600; }
.tl-title { color:var(--text); font-weight:600; margin-top:2px; }
.tl-desc { color:var(--text-soft); font-size:.9rem; }

/* ---- Calendrier mensuel ---- */
.calendar { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow { text-align:center; font-size:.72rem; color:var(--text-soft); font-weight:600; padding:4px 0; }
.cal-day { aspect-ratio:1; display:grid; place-items:center; border-radius:11px; font-size:.85rem; color:var(--text);
    background:var(--bg-2); cursor:pointer; position:relative; border:1px solid transparent; transition:background .2s; }
.cal-day:hover { background:var(--surface-2); }
.cal-day--muted { color:var(--text-soft); opacity:.4; }
.cal-day--today { border-color:var(--teal); color:var(--mint); font-weight:700; }
.cal-day--event::after { content:""; position:absolute; bottom:5px; width:5px; height:5px; border-radius:50%; background:var(--orange); }

/* ---- Liste d'observance (traitement) ---- */
.dose-list { display:flex; flex-direction:column; gap:10px; }
.dose { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:14px 16px; }
.dose__pill { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.3rem;
    background:rgba(31,169,138,.12); flex:none; }
.dose__main { flex:1; }
.dose__name { color:var(--text); font-weight:600; }
.dose__time { color:var(--text-soft); font-size:.85rem; }
.dose__check { width:30px; height:30px; border-radius:50%; border:2px solid var(--line); cursor:pointer;
    display:grid; place-items:center; color:transparent; transition:all .2s; flex:none; background:transparent; }
.dose__check.done { background:var(--teal); border-color:var(--teal); color:#fff; }

/* ---- Recettes / nutrition ---- */
.recipe { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.recipe__head { padding:18px; background:linear-gradient(150deg,rgba(31,169,138,.14),rgba(244,134,43,.1)); }
.recipe__body { padding:18px; }
.tag-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* ---- Parcours / leçons ---- */
.lesson { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:14px 16px; margin-bottom:10px; }
.lesson__num { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none;
    background:var(--bg-2); color:var(--text-mint); font-weight:700; font-family:var(--font-display); }
.lesson__num.done { background:var(--teal); color:#fff; }
.lesson__main { flex:1; }
.lesson__bar { height:6px; background:var(--bg-2); border-radius:99px; margin-top:8px; overflow:hidden; }
.lesson__bar i { display:block; height:100%; background:linear-gradient(90deg,var(--teal-grad-1),var(--teal-grad-2)); }

/* ---- Grossesse : semaine ---- */
.preg-hero { background:linear-gradient(150deg,var(--teal-grad-1),var(--teal-grad-2)); border-radius:var(--radius-lg);
    padding:26px; color:#fff; position:relative; overflow:hidden; }
.preg-week { font-family:var(--font-display); font-size:3.2rem; line-height:1; }
.preg-fruit { font-size:3rem; }
.preg-track { display:flex; gap:4px; margin-top:18px; flex-wrap:wrap; }
.preg-track i { flex:1; min-width:5px; height:7px; border-radius:4px; background:rgba(255,255,255,.25); }
.preg-track i.done { background:#fff; }

/* ============================ ASSISTANT VOCAL ============================ */
.voice-stage { display:flex; flex-direction:column; align-items:center; gap:18px; padding:24px 0; }
.voice-orb { width:140px; height:140px; border-radius:50%; position:relative; display:grid; place-items:center;
    background:radial-gradient(circle at 50% 40%, rgba(31,169,138,.35), rgba(31,169,138,.05));
    border:1px solid var(--line); cursor:pointer; transition:transform .2s; }
.voice-orb:hover { transform:scale(1.03); }
.voice-orb__core { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:2rem;
    background:linear-gradient(150deg,var(--teal-grad-1),var(--teal-grad-2)); box-shadow:0 10px 30px rgba(20,140,110,.45); }
.voice-orb.listening { animation:pulse 1.4s ease-in-out infinite; }
.voice-orb.listening .voice-orb__core { background:linear-gradient(150deg,var(--orange),var(--orange-2)); }
.voice-orb.speaking .voice-orb__core { background:linear-gradient(150deg,#7B61FF,#4FD6AC); }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(244,134,43,.5);} 50%{ box-shadow:0 0 0 26px rgba(244,134,43,0);} }
.voice-wave { display:flex; align-items:center; gap:4px; height:34px; }
.voice-wave i { width:4px; background:var(--mint); border-radius:3px; height:8px; animation:wave 1s ease-in-out infinite; }
.voice-wave i:nth-child(2){animation-delay:.1s}.voice-wave i:nth-child(3){animation-delay:.2s}
.voice-wave i:nth-child(4){animation-delay:.3s}.voice-wave i:nth-child(5){animation-delay:.4s}
.voice-wave i:nth-child(6){animation-delay:.5s}.voice-wave i:nth-child(7){animation-delay:.6s}
@keyframes wave { 0%,100%{height:8px} 50%{height:30px} }
.voice-wave.idle i { animation:none; height:8px; opacity:.4; }
.voice-status { color:var(--text-soft); font-size:.95rem; min-height:1.4em; text-align:center; }
.voice-transcript { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 18px;
    width:100%; max-width:560px; min-height:60px; color:var(--text); }
.voice-controls { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.lang-select-pill { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
    border-radius:999px; padding:8px 16px; color:var(--text); cursor:pointer; }
.lang-select-pill select { background:transparent; border:none; color:var(--text); font:inherit; cursor:pointer; outline:none; }

/* ---- Quiz ---- */
.quiz-q { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:16px; }
.quiz-opt { display:block; padding:14px 16px; border:1px solid var(--line); border-radius:13px; margin-top:10px; cursor:pointer;
    background:var(--bg-2); color:var(--text); transition:all .15s; }
.quiz-opt:hover { border-color:var(--teal); }
.quiz-opt.correct { border-color:#1FA98A; background:rgba(31,169,138,.14); }
.quiz-opt.wrong { border-color:var(--danger); background:var(--danger-bg); }

/* ---- Empty state ---- */
.empty { text-align:center; padding:40px 20px; color:var(--text-soft); }
.empty__ico { font-size:3rem; margin-bottom:12px; }

/* ---- FAB (action flottante) ---- */
.fab { position:fixed; right:18px; bottom:calc(var(--nav-h) + 18px); width:58px; height:58px; border-radius:50%;
    background:linear-gradient(150deg,var(--teal-grad-1),var(--teal-grad-2)); color:#fff; border:none; cursor:pointer;
    display:grid; place-items:center; font-size:1.5rem; box-shadow:0 10px 28px rgba(20,140,110,.5); z-index:45; }

/* ---- Notifications ---- */
.notif { display:flex; gap:14px; padding:14px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--line); margin-bottom:10px; }
.notif--unread { border-left:3px solid var(--teal); }
.notif__ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--bg-2); font-size:1.2rem; }

/* ---- Sous-navigation (onglets) ---- */
.subnav { display:flex; gap:6px; overflow-x:auto; padding:4px 0 12px; scrollbar-width:none; }
.subnav::-webkit-scrollbar{display:none}
.subnav a { flex:none; padding:9px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line);
    color:var(--text-soft); font-size:.9rem; font-weight:600; }
.subnav a.active { background:var(--teal); color:#fff; border-color:transparent; }

/* ============================================================================
   ROSE - couleur signature féminine (variantes et accents)
   ============================================================================ */
/* Carte tuile rose */
.tile--rose {
    background: linear-gradient(150deg, var(--rose-deep), var(--rose));
    border-color: transparent; color:#fff;
}
.tile--rose .tile__title { color:#fff; }
.tile--rose .tile__sub { color:rgba(255,255,255,.9); }
.tile--rose .tile__icon { background:rgba(255,255,255,.22); }
.tile--rose .tile__sound { color:rgba(255,255,255,.9); }

/* Boutons rose */
.btn--rose { background:linear-gradient(150deg, var(--rose-deep), var(--rose)); color:#fff; box-shadow:0 8px 22px rgba(232,67,147,.32); }

/* Chips rose */
.chip--rose { color:var(--pink-mint); border-color:rgba(232,67,147,.35); background:rgba(232,67,147,.12); }

/* Bulle utilisateur du chat en rose (féminin, chaleureux) */
.bubble--user { background:linear-gradient(150deg, var(--rose-deep), var(--rose)); }

/* Accent rose sur l'onglet de nav actif alterné (féminité) */

/* Carte cycle / grossesse : touche rose */
.preg-hero { background:linear-gradient(150deg, var(--rose-deep) 0%, var(--rose) 55%, var(--orange) 130%); }
.ring__fill { stroke:url(#ringgrad); }

/* Voice orb : halo rosé en repos */
.voice-orb { background:radial-gradient(circle at 50% 40%, rgba(232,67,147,.28), rgba(31,169,138,.05)); }
.voice-orb__core { background:linear-gradient(150deg, var(--rose-deep), var(--rose)); box-shadow:0 10px 30px rgba(232,67,147,.45); }

/* Filet décoratif rose en haut de page */
.rose-accent { height:4px; width:54px; border-radius:99px; background:linear-gradient(90deg,var(--rose),var(--orange)); margin-bottom:14px; }

/* Métrique cycle en rose */
.metric--cycle .metric__value { color:var(--pink-mint); }

/* Liens actifs et focus en rose-or */
:focus-visible { outline-color: var(--rose); }

/* ============================================================================
   RESPONSIVE DESKTOP & TABLETTE - rendu intentionnel sur grand écran
   ============================================================================ */
@media (min-width: 900px) {
    :root { --maxw: 980px; }
    /* La bottom-nav devient une barre flottante centrée et compacte */
    .bottom-nav {
        left: 50%; transform: translateX(-50%); right: auto;
        bottom: 18px; width: auto; min-width: 460px;
        border: 1px solid var(--line); border-radius: 22px;
        box-shadow: var(--shadow); height: 68px;
    }
    body { padding-bottom: 110px; }
    .bottom-nav__in { gap: 8px; }
    /* Hero / titres un peu plus grands */
    .page__title { font-size: clamp(2rem, 3vw, 2.8rem); }
    /* Cartes : effet de profondeur au survol plus marqué */
    .tile:hover { transform: translateY(-5px); }
    /* FAB remonté au-dessus de la barre flottante */
    .fab { bottom: 100px; right: calc(50% - 480px + 18px); }
}

@media (min-width: 1200px) {
    .fab { right: calc(50% - 490px); }
}

/* Tablette : grille de tuiles en 3 colonnes confortables */
@media (min-width: 600px) and (max-width: 899px) {
    .tiles { grid-template-columns: repeat(3, 1fr); }
    .metrics { grid-template-columns: repeat(4, 1fr); }
}

/* Très grand écran : limite la largeur de lecture pour le confort */
@media (min-width: 1400px) {
    .chat, .voice-stage { max-width: 820px; }
}

/* Curseur et états interactifs (desktop) */
@media (hover: hover) {
    .nav-item:hover .nav-item__ico { transform: translateY(-2px); }
    .icon-btn:active { transform: scale(.94); }
}

/* Barre de titre overlay (PWA desktop avec window-controls-overlay) */
@media (display-mode: window-controls-overlay) {
    .app-header { app-region: drag; }
    .app-header button, .app-header a { app-region: no-drag; }
}

/* ============================================================================
   MODALES & FORMULAIRES FONCTIONNELS
   ============================================================================ */
.modal-overlay { position:fixed; inset:0; background:rgba(5,12,10,.7); backdrop-filter:blur(6px);
    z-index:80; display:flex; align-items:flex-end; justify-content:center; padding:0; animation:fadeIn .2s ease; }
.modal-overlay[hidden] { display:none; }
@media(min-width:600px){ .modal-overlay{ align-items:center; padding:20px; } }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal { background:var(--bg-2); border:1px solid var(--line); border-radius:24px 24px 0 0; width:100%;
    max-width:480px; padding:24px; box-shadow:var(--shadow); animation:slideUp .3s cubic-bezier(.2,.8,.2,1); max-height:90vh; overflow-y:auto; }
@media(min-width:600px){ .modal{ border-radius:24px; } }
@keyframes slideUp { from{transform:translateY(40px);opacity:0} to{transform:none;opacity:1} }
.modal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal__head h3 { color:var(--text); font-size:1.3rem; }
.modal__close { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
    color:var(--text); cursor:pointer; font-size:1rem; }
.modal__close:hover { background:var(--surface-2); }

/* Boutons d'action dans listes */
.row-actions { display:flex; gap:6px; }
.icon-action { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface);
    color:var(--text-soft); cursor:pointer; display:grid; place-items:center; font-size:.95rem; transition:all .15s; }
.icon-action:hover { background:var(--surface-2); color:var(--text); }
.icon-action--danger:hover { background:var(--danger-bg); color:#FF9A9D; border-color:var(--danger); }
.icon-action--ok:hover { background:rgba(31,169,138,.15); color:var(--mint); border-color:var(--teal); }


/* ============================================================================
   CYCLE MENSTRUEL
   ============================================================================ */
.cycle-hero { display:flex; flex-direction:column; align-items:center; padding:10px 0 6px; }
.cycle-ring { position:relative; filter:drop-shadow(0 10px 30px rgba(232,72,136,.25)); }
.cycle-phase { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:8px 18px;
    border-radius:999px; background:color-mix(in srgb, var(--pc) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--pc) 40%, transparent); color:#fff; }
.cycle-phase__dot { width:10px; height:10px; border-radius:50%; background:var(--pc); box-shadow:0 0 10px var(--pc); }
.cycle-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
@media(max-width:520px){ .cycle-cards{ grid-template-columns:1fr 1fr; } }
.cycle-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px; text-align:center; }
.cycle-card__ico { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:1.3rem; margin:0 auto 10px; }
.cycle-card__label { font-size:.78rem; color:var(--text-soft); }
.cycle-card__value { font-family:var(--font-display); font-weight:700; color:var(--text); font-size:1.05rem; margin-top:3px; }
.cycle-card__sub { font-size:.8rem; color:var(--text-mint); margin-top:2px; }

/* Chips de sélection (symptômes, abondance) */
.pick-row { display:flex; flex-wrap:wrap; gap:8px; }
.pick { position:relative; cursor:pointer; }
.pick input { position:absolute; opacity:0; }
.pick span { display:inline-block; padding:9px 14px; border-radius:999px; background:var(--bg-2);
    border:1px solid var(--line); color:var(--text-soft); font-size:.88rem; transition:all .15s; }
.pick input:checked + span { background:color-mix(in srgb, var(--rose) 18%, transparent);
    border-color:var(--rose); color:var(--pink-mint); }

/* ============================================================================
   FORUM DE LA FEMME (liste des salons + messagerie style WhatsApp)
   ============================================================================ */
.room-item { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:18px;
    background:var(--surface); border:1px solid var(--line); margin-bottom:10px; text-decoration:none; transition:background .15s; }
.room-item:hover { background:var(--surface-2); text-decoration:none; }
.room-item__ico { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem; flex:none;
    background:linear-gradient(150deg, rgba(232,72,136,.18), rgba(31,169,138,.14)); }
.room-item__main { flex:1; min-width:0; }
.room-item__top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.room-item__top strong { color:var(--text); }
.room-item__top small { color:var(--text-soft); font-size:.76rem; flex:none; }
.room-item__desc { color:var(--text-soft); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-item__count { min-width:26px; height:26px; padding:0 8px; border-radius:13px; background:var(--rose); color:#fff;
    font-size:.78rem; font-weight:700; display:grid; place-items:center; flex:none; }

/* Écran de chat */
.chat-screen { display:flex; flex-direction:column; min-height:60vh;
    height:calc(100dvh - 150px); max-height:calc(100dvh - 130px); margin:-16px -16px 0; }
@supports not (height: 100dvh) { .chat-screen { height:calc(100vh - 160px); } }
.chat-topbar { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line);
    background:var(--bg-2); position:sticky; top:0; z-index:5; }
.chat-topbar__ico { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem;
    background:linear-gradient(150deg, rgba(232,72,136,.2), rgba(31,169,138,.15)); }
.chat-thread { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
    background:linear-gradient(180deg, var(--bg-1), var(--bg-2)); }
.chat-day { text-align:center; margin:6px 0; }
.chat-day span { background:var(--surface); border:1px solid var(--line); color:var(--text-soft);
    font-size:.74rem; padding:4px 12px; border-radius:999px; }
.msg { display:flex; gap:8px; max-width:82%; }
.msg--mine { align-self:flex-end; flex-direction:row-reverse; }
.msg__avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff;
    font-size:.78rem; font-weight:700; flex:none; align-self:flex-end; }
.msg__bubble { background:var(--surface); border:1px solid var(--line); border-radius:16px 16px 16px 4px;
    padding:9px 13px; position:relative; }
.msg--mine .msg__bubble { background:linear-gradient(150deg, var(--rose-deep), var(--rose)); border-color:transparent;
    border-radius:16px 16px 4px 16px; color:#fff; }
.msg__author { font-size:.78rem; font-weight:700; margin-bottom:2px; }
.msg__reply { border-left:3px solid var(--rose); padding:4px 8px; margin-bottom:5px; font-size:.82rem;
    color:var(--text-soft); background:rgba(255,255,255,.05); border-radius:6px; }
.msg__body { color:inherit; line-height:1.4; word-break:break-word; }
.msg--mine .msg__body { color:#fff; }
.msg__meta { display:flex; align-items:center; gap:8px; margin-top:4px; justify-content:flex-end; }
.msg__time { font-size:.68rem; color:var(--text-soft); }
.msg--mine .msg__time { color:rgba(255,255,255,.75); }
.msg__like { background:none; border:none; cursor:pointer; font-size:.78rem; color:var(--text-soft);
    display:inline-flex; align-items:center; gap:3px; padding:2px 4px; border-radius:8px; filter:grayscale(1); opacity:.6; }
.msg__like.liked { filter:none; opacity:1; color:var(--rose); }
.msg__del { background:none; border:none; cursor:pointer; font-size:.72rem; opacity:.6; }
.msg--mine .msg__del { filter:brightness(3); }

/* Zone de saisie */
.chat-composer { display:flex; align-items:flex-end; gap:10px; padding:12px 16px; border-top:1px solid var(--line);
    background:var(--bg-2); position:sticky; bottom:0; }
.chat-composer textarea { flex:1; resize:none; max-height:120px; padding:12px 16px; border-radius:22px;
    border:1px solid var(--line); background:var(--surface); color:var(--text); font:inherit; line-height:1.4; }
.chat-send { width:46px; height:46px; border-radius:50%; border:none; flex:none; cursor:pointer; color:#fff;
    background:linear-gradient(150deg, var(--rose-deep), var(--rose)); display:grid; place-items:center;
    box-shadow:0 6px 16px rgba(232,72,136,.4); }