/* =====================================================================
   Régie — feuille de style de base, pensée MOBILE D'ABORD.
   On part du téléphone, puis on élargit avec des @media (min-width).
   ===================================================================== */

:root {
    --bg:      #0f1115;
    --surface: #1a1d24;
    --text:    #e8e9ed;
    --muted:   #9aa0aa;
    --accent:  #c8a24a; /* doré — clin d'œil aux « Six Lances » d'Akopha */
    --border:  #2a2e38;
    --radius:  14px;
    --space:   1rem;
    --green:   #2ecc71;
    --amber:   #e0a93b;
    --red:     #e05a6b;
}

/* ---- Thèmes (skins) ----------------------------------------------- */
html[data-theme="clair"] {
    --bg: #eef1f5; --surface: #ffffff; --text: #1b1f27; --muted: #5b6573;
    --accent: #a9761b; --border: #d7dce4;
}
html[data-theme="clair"] .flash-success { background: #e7f6ec; color: #1e7d4f; border-color: #bfe6cf; }
html[data-theme="clair"] .flash-error   { background: #fdecec; color: #b3261e; border-color: #f3c4c2; }
html[data-theme="clair"] .flash-info    { background: #e9f1fb; color: #1f5fae; border-color: #c7dcf6; }
html[data-theme="clair"] .badge, html[data-theme="clair"] .tag { color: var(--muted); }
html[data-theme="dore"] {
    --bg: #1b1510; --surface: #251d14; --text: #f1e7d3; --muted: #b7a88c; --accent: #d8b24a; --border: #3b2e1f;
}
html[data-theme="colore"] {
    --bg: #141021; --surface: #1d1830; --text: #ece8f6; --muted: #a8a1c4; --accent: #8a6bff; --border: #332b4d;
}

.theme-switch { margin: 0; }
.theme-switch select {
    min-height: 36px; padding: .2rem .45rem; font-size: .85rem;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

.container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: calc(var(--space) * 1.5) var(--space);
    padding-left:  max(var(--space), env(safe-area-inset-left));
    padding-right: max(var(--space), env(safe-area-inset-right));
}

h1 { font-size: 1.8rem; margin: 0 0 .5rem; line-height: 1.2; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
p  { margin: 0 0 .75rem; }

.lead  { font-size: 1.1rem; }
.muted { color: var(--muted); }
.hint  { color: var(--muted); font-weight: 400; font-size: .85rem; }

.hero,
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: calc(var(--space) * 1.5);
    margin-bottom: var(--space);
}

a { color: var(--accent); }

/* ---- Barre du haut ------------------------------------------------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: .6rem var(--space);
    padding-left:  max(var(--space), env(safe-area-inset-left));
    padding-right: max(var(--space), env(safe-area-inset-right));
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { color: var(--text); text-decoration: none; font-weight: 700; }
.nav { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a.btn { color: #1a1d24; }
.who { color: var(--text); font-size: .9rem; }
form.inline { margin: 0; }

/* ---- Boutons ------------------------------------------------------- */
button, .btn, input, select, textarea { min-height: 44px; font-size: 1rem; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 0 1.1rem; border: 0; border-radius: var(--radius);
    background: var(--accent); color: #1a1d24; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.btn-block { width: 100%; margin-top: 1.2rem; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-danger { color: var(--red); border-color: var(--red); margin-top: .6rem; }

/* ---- Formulaires --------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: .25rem; margin-top: 1rem; }
.form label { margin-top: .6rem; font-size: .9rem; color: var(--muted); }
.form input, .form select, .form textarea {
    width: 100%; padding: .7rem .8rem;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
}
.form input:focus, .form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form .check { display: flex; flex-direction: row; align-items: center; gap: .5rem; }
.form .check input { width: auto; min-height: 0; }

/* ---- Messages flash ------------------------------------------------ */
.flash { padding: .7rem .9rem; border-radius: 10px; margin-bottom: 1rem; font-size: .95rem; }
.flash-success { background: #16321f; color: #9ff0bf; border: 1px solid #235e38; }
.flash-error   { background: #3a1d22; color: #ffb3bd; border: 1px solid #6e2b36; }
.flash-info    { background: #1d2b3a; color: #bcd9ff; border: 1px solid #2b4c6e; }

/* ---- Listes (projets) --------------------------------------------- */
.list { list-style: none; padding: 0; margin: 1rem 0 0; }
.list-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1rem; margin-bottom: .5rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    text-decoration: none; color: var(--text);
}
.list-title { font-weight: 600; }
.tag {
    font-size: .75rem; color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem;
}

/* ---- Tableau de distribution (casting) ----------------------------- */
.project-head .back { display: inline-block; text-decoration: none; margin-bottom: .5rem; }
.progress { font-size: 1.05rem; margin: .5rem 0 0; }

.board-section { margin-bottom: .5rem; }

.position {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--border); border-radius: 10px;
    padding: .9rem 1rem; margin-bottom: .6rem;
}
.position.status-confirme      { border-left-color: var(--green); }
.position.status-en_discussion { border-left-color: var(--amber); }
.position.status-a_pourvoir    { border-left-color: var(--red); }

.position-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.position-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.star { color: var(--accent); }
.dbl { color: var(--muted); font-size: .85rem; }
.who { margin: .5rem 0 .25rem; }
.desc { font-size: .9rem; margin: .25rem 0 0; }

.badge {
    flex: none; font-size: .72rem; font-weight: 600; white-space: nowrap;
    padding: .2rem .55rem; border-radius: 999px; border: 1px solid transparent;
}
.badge-confirme      { background: rgba(46,204,113,.15); color: #9ff0bf; border-color: #235e38; }
.badge-en_discussion { background: rgba(224,169,59,.15); color: #ffdfa1; border-color: #6e5524; }
.badge-a_pourvoir    { background: rgba(224,90,107,.15); color: #ffb3bd; border-color: #6e2b36; }

.editor { margin-top: .6rem; }
.editor > summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.editor .form { margin-top: .5rem; }

/* ---- Sous-navigation projet --------------------------------------- */
.subnav { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.subnav a {
    padding: .5rem .9rem; border-radius: 999px; text-decoration: none;
    color: var(--muted); border: 1px solid var(--border);
    background: var(--surface); font-size: .9rem;
}
.subnav a.active { color: #1a1d24; background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ---- Agenda / planning -------------------------------------------- */
.month-sep { margin: 1.25rem 0 .5rem; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.event { display: flex; gap: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .6rem; }
.event-date { flex: none; width: 3rem; text-align: center; }
.event-day { font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--accent); }
.event-wday { font-size: .7rem; color: var(--muted); text-transform: uppercase; }
.event-body { flex: 1; min-width: 0; }
.event-title { font-weight: 600; }
.event-meta { color: var(--muted); font-size: .9rem; margin-top: .15rem; }
.type-badge { font-size: .7rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.time-row { display: flex; gap: .5rem; }
.time-row label { flex: 1; }
.past-list { margin-top: .6rem; }

/* ---- Équipe / invitations ----------------------------------------- */
.invite-link {
    width: 100%; font-family: ui-monospace, monospace; font-size: .78rem;
    padding: .55rem .6rem; margin: .2rem 0 .6rem;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
}

/* ---- Avatars & photos --------------------------------------------- */
.avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    vertical-align: middle; background: var(--bg);
    border: 1px solid var(--border); display: inline-block;
}
.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 84px; height: 84px; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); }
.who-member { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); }
.profile-head { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1rem; }
.profile-head h1 { margin: 0; }

.photo-gallery { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0; }
.photo { position: relative; margin: 0; width: 96px; }
.photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.photo figcaption { font-size: .72rem; color: var(--muted); margin-top: .2rem; text-align: center; }
.photo form { margin: 0; }
.photo-del {
    position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; min-height: 0;
    border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; padding: 0;
}
.photo-add > summary { color: var(--accent); }

/* ---- Groupes ------------------------------------------------------- */
.group-members { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem .2rem .25rem;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 999px; font-size: .85rem;
}
.chip .inline { display: inline-flex; }
.chip-x {
    min-height: 0; width: 18px; height: 18px; padding: 0; line-height: 1;
    border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}

/* ---- Scènes -------------------------------------------------------- */
.act-sep { margin: 1.5rem 0 .5rem; color: var(--accent); font-size: 1.05rem; border-bottom: 1px solid var(--border); padding-bottom: .25rem; }
.position.scene-status-ok            { border-left: 4px solid var(--green); }
.position.scene-status-filee         { border-left: 4px solid var(--amber); }
.position.scene-status-mise_en_place { border-left: 4px solid #6aa9e0; }
.position.scene-status-a_travailler  { border-left: 4px solid var(--border); }
.scene-badge-ok            { background: rgba(46,204,113,.15); color: #9ff0bf; border: 1px solid #235e38; }
.scene-badge-filee         { background: rgba(224,169,59,.15); color: #ffdfa1; border: 1px solid #6e5524; }
.scene-badge-mise_en_place { background: rgba(106,169,224,.15); color: #bcd9ff; border: 1px solid #2b4c6e; }
.scene-badge-a_travailler  { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.conv-line { margin: .4rem 0 0; font-size: .9rem; }

/* ---- Accessoires & décors (fabrication) --------------------------- */
.progress-bar { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: .5rem 0 .25rem; }
.progress-fill { height: 100%; background: var(--accent); }
.steps { list-style: none; padding: 0; margin: .4rem 0; }
.step { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; }
.step-label { flex: 1; }
.step.done .step-label { color: var(--muted); text-decoration: line-through; }
.step-check {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 0; width: 24px; height: 24px; padding: 0; line-height: 1;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--bg); color: var(--accent); cursor: pointer;
}
.step.done .step-check { background: var(--accent); color: #1a1d24; border-color: var(--accent); }
.prop-status-termine  { border-left: 4px solid var(--green); }
.prop-status-en_cours { border-left: 4px solid var(--amber); }
.prop-status-a_faire  { border-left: 4px solid var(--border); }
.prop-badge-termine  { background: rgba(46,204,113,.15); color: #9ff0bf; border: 1px solid #235e38; }
.prop-badge-en_cours { background: rgba(224,169,59,.15); color: #ffdfa1; border: 1px solid #6e5524; }
.prop-badge-a_faire  { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.subgroup-sep { margin: .8rem 0 .4rem; color: var(--muted); font-size: .9rem; }
.step-progress { min-height: 30px; padding: .1rem .3rem; font-size: .8rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
.step-progress-badge { font-size: .78rem; color: var(--muted); min-width: 3.2rem; }
.step-edit { margin-left: auto; }
.step-edit > summary { cursor: pointer; color: var(--accent); list-style: none; }
.step-edit > summary::-webkit-details-marker { display: none; }
.grp-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.grp-row.sub { padding-left: 1rem; color: var(--muted); }
.grp-row .step-edit { margin-left: auto; }

/* ---- Budget -------------------------------------------------------- */
.budget-summary { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: .25rem 0 1rem; }
.budget-summary > div { display: flex; flex-direction: column; }
.budget-summary strong { font-size: 1.3rem; }

/* ---- Disponibilités ----------------------------------------------- */
.av-dispo     { color: var(--green); }
.av-indispo   { color: var(--red); }
.av-peut_etre { color: var(--amber); }
.list-row .inline { display: inline-flex; }

/* ---- Convocation & présences -------------------------------------- */
.pres-convoque { color: var(--muted); }
.pres-present  { color: var(--green); }
.pres-absent   { color: var(--red); }
.pres-excuse   { color: var(--amber); }
.presence-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.presence-name { flex: 1; }

/* ---- Calendrier --------------------------------------------------- */
.cal-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; margin-bottom: .6rem; }
.cal-nav, .cal-views { display: flex; gap: .3rem; flex-wrap: wrap; }
.cal-btn { min-height: 34px; padding: .2rem .6rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: .85rem; }
.cal-btn.active { background: var(--accent); color: #1a1d24; border-color: var(--accent); font-weight: 600; }
.cal-month { margin-bottom: .6rem; }
.cal-mtitle { font-weight: 600; margin: .2rem 0 .35rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-h { text-align: center; font-size: .7rem; color: var(--muted); padding: .2rem 0; }
.cal-day { position: relative; min-height: 54px; padding: .25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; text-align: left; color: var(--text); display: flex; flex-direction: column; gap: .1rem; }
.cal-day.dim { opacity: .4; }
.cal-day.today { border-color: var(--accent); border-width: 2px; }
.cal-num { font-size: .8rem; font-weight: 600; }
.cal-ev { font-size: .62rem; color: var(--accent); line-height: 1.1; overflow: hidden; }
.cal-day.has-event { border-left: 3px solid var(--accent); }
.cal-day.cal-dispo { background: rgba(46,204,113,.18); border-color: #235e38; }
.cal-day.cal-indispo { background: rgba(224,90,107,.18); border-color: #6e2b36; }
.cal-day.cal-peut_etre { background: rgba(224,169,59,.18); border-color: #6e5524; }
.cal-day.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-multi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cal-month.mini .cal-day { min-height: 26px; padding: 1px; align-items: center; justify-content: center; }
.cal-month.mini .cal-num { font-size: .62rem; }
.cal-month.mini .cal-h { font-size: .55rem; }
.cal-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; }
@media (min-width: 768px) { .cal-multi { grid-template-columns: repeat(3, 1fr); } }

/* ---- Tablette / ordinateur ---------------------------------------- */
@media (min-width: 768px) {
    h1 { font-size: 2.2rem; }
    .container { padding: calc(var(--space) * 2.5) var(--space); }
}

/* ---- Mémo (un seul carré jaune, onglets intégrés) ----------------- */
.hint { font-size: .78rem; color: var(--muted); font-weight: 400; }

/* Badge « pour toi » sur l'onglet Mémo de la sous-nav */
.memo-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: .35rem;
    border-radius: 9px; background: var(--red); color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 1;
}
.subnav a.active .memo-badge { background: #fff; color: var(--red); }

/* Le carré jaune unique : onglets + post-its + saisie d'un seul tenant */
.memo {
    background: #fdf3a8; color: #2a2410; border: 1px solid #e9d96a;
    border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.2);
    padding: 0 .8rem .3rem; margin-bottom: 1rem;
}

/* Onglets intégrés (façon dossiers), colorés par personne */
.memo-tabs {
    display: flex; gap: .25rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: .5rem 0 0; border-bottom: 1px solid #e3d27f;
}
.memo-tabbtn {
    display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
    padding: .3rem .65rem; text-decoration: none; white-space: nowrap;
    font-size: .85rem; color: #2a2410; line-height: 1.1;
    background: var(--tab-soft, #f2e7a6);
    border: 1px solid #e3d27f; border-top: 3px solid var(--tab-accent, #e3d27f);
    border-radius: 9px 9px 0 0; opacity: .82;
}
.memo-tabbtn .avatar-sm { width: 22px; height: 22px; }
.memo-tabbtn.active { background: #fdf3a8; opacity: 1; font-weight: 700; }
/* Onglet « ✏️ Nouveau » : bouton d'action en évidence, posé tout à gauche */
.memo-tab-new, .memo-tab-new.active {
    background: var(--accent); color: #1a1d24; opacity: 1; font-weight: 700;
    border-color: var(--accent); border-top-color: #b8923f;
}
.memo-tab-new:hover { filter: brightness(1.06); }
.memo-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--red); color: #fff; font-size: .68rem; font-weight: 700;
}
.memo-panels { padding-top: .25rem; }

/* Un post-it = une simple SECTION du carré (plus de boîtes empilées) */
.postit { padding: .55rem .05rem; }
.postit + .postit { border-top: 1px solid rgba(0,0,0,.14); }
.postit.status-fait { opacity: .55; }
.postit-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.postit-author { font-weight: 700; font-size: .9rem; }
.postit-date { color: #6b6443; font-size: .75rem; }
.postit .postit-status.badge {
    margin-left: auto; background: rgba(0,0,0,.08); color: #5a5126; border-color: rgba(0,0,0,.12);
}
.postit-body { margin: .35rem 0 .15rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }

.memo-photos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.memo-photo img {
    width: 80px; height: 80px; object-fit: cover; border-radius: 8px;
    border: 1px solid rgba(0,0,0,.18); display: block;
}

/* Mini-fil de réponses : fondu, juste indenté */
.memo-thread {
    margin: .4rem 0 .1rem; border-top: 1px dashed rgba(0,0,0,.18); padding-top: .35rem;
    display: flex; flex-direction: column; gap: .3rem;
}
.memo-reply-item { display: flex; gap: .4rem; align-items: flex-start; }
.memo-reply-item .avatar-sm { width: 22px; height: 22px; }
.memo-reply-bubble {
    background: transparent; padding: 0; font-size: .88rem;
    flex: 1; position: relative; word-break: break-word; line-height: 1.3;
}
.memo-reply-author { font-weight: 700; margin-right: .35rem; }
.memo-del-reply { position: absolute; top: 0; right: 0; }

/* Actions sous un post-it */
.postit-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .45rem; }
.btn-sm { padding: .3rem .65rem; font-size: .82rem; margin-top: 0; }
.postit-actions .memo-reply > summary {
    list-style: none; cursor: pointer; font-size: .82rem; color: #5a5126;
    padding: .3rem .6rem; border: 1px solid rgba(0,0,0,.2); border-radius: 8px;
    background: rgba(255,255,255,.35);
}
.postit-actions .memo-reply > summary::-webkit-details-marker { display: none; }
.postit-actions .memo-reply[open] > summary { margin-bottom: .4rem; }
.postit-actions .memo-reply .form {
    width: 100%; background: rgba(255,255,255,.4); border-radius: 8px; padding: .5rem; margin-top: 0;
}
.postit-actions .memo-reply .form label { color: #5a5126; }
.memo-empty { padding: .8rem .05rem; color: #6b6443; }

/* Saisie : un encart clair « Nouveau post-it » en bas du carré jaune */
.memo-compose {
    position: relative; margin-top: .55rem; padding: .55rem .6rem .6rem;
    background: rgba(255,255,255,.32); border: 1px solid #ecdc8f; border-radius: 10px;
    display: flex; flex-direction: column; gap: .45rem;
}
.memo-compose-head { font-weight: 700; font-size: .88rem; color: #5a5126; }
.memo-compose textarea {
    width: 100%; min-height: 2.4rem; resize: vertical; font: inherit;
    background: rgba(255,255,255,.6); color: #2a2410;
    border: 1px solid #e3d27f; border-radius: 8px; padding: .45rem .55rem;
}
.memo-compose textarea::placeholder { color: #8a8055; }
.memo-compose-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.memo-recip-prefix { font-size: .8rem; color: #6b6443; }
.memo-recip-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.memo-recip {
    display: inline-flex; align-items: center; gap: .3rem; margin: 0;
    padding: .15rem .5rem .15rem .3rem; border: 1px solid #e3d27f;
    border-radius: 999px; cursor: pointer; font-size: .8rem; color: #2a2410;
    background: rgba(255,255,255,.5);
}
.memo-recip .avatar-sm { width: 20px; height: 20px; }
.memo-recip input { width: auto; min-height: 0; margin: 0; }
.memo-recip:has(input:checked) { border-color: var(--accent); background: rgba(200,162,74,.24); font-weight: 600; }
.memo-compose-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.memo-photo-btn {
    display: inline-flex; align-items: center; cursor: pointer; font-size: 1.05rem;
    padding: .2rem .4rem; border: 1px solid #e3d27f; border-radius: 8px; background: rgba(255,255,255,.5);
}
.memo-photo-btn input { display: none; }
.memo-photo-btn.has-files { border-color: var(--accent); background: rgba(200,162,74,.24); }

/* Menu d'autocomplétion @ */
.memo-at-menu {
    position: absolute; z-index: 30; margin-top: 2px; min-width: 180px; max-width: 280px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.memo-at-item {
    display: block; width: 100%; text-align: left; padding: .5rem .7rem;
    background: transparent; border: 0; color: var(--text); cursor: pointer; font-size: .9rem;
}
.memo-at-item:hover { background: rgba(200,162,74,.16); }

/* ---- Configuration de l'installation ------------------------------ */
/* Icône de l'interface (barre du haut + accueil) */
.brand-icon { height: 1.4em; width: auto; vertical-align: -0.28em; border-radius: 4px; }
.hero .hero-icon { height: .9em; width: auto; vertical-align: -0.05em; border-radius: 8px; }

/* Bloc d'upload de l'icône */
.icon-row { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
.icon-fields { flex: 1; min-width: 0; margin-top: 0; }
.icon-preview {
    flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
}
.icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.icon-preview .icon-emoji { font-size: 2rem; line-height: 1; }

/* Gestionnaire de menu : une ligne par onglet (ordre / nom / visibilité) */
.menu-manager { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.menu-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.menu-row .menu-order { width: 4.5rem; flex: 0 0 auto; text-align: center; }
.menu-row .menu-name  { flex: 1; min-width: 8rem; }
.menu-row .menu-visible { flex: 0 0 auto; margin: 0; white-space: nowrap; color: var(--muted); font-size: .9rem; }

/* Rubriques : grille de cases « afficher / masquer » */
.toggle-grid { display: grid; grid-template-columns: 1fr; gap: .4rem; margin-top: .3rem; }
@media (min-width: 480px) { .toggle-grid { grid-template-columns: 1fr 1fr; } }
.toggle-grid .check { margin: 0; }
.config-rubrique { border: 1px solid var(--border); border-radius: 10px; padding: .4rem .7rem; margin-top: .6rem; }
.config-rubrique > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.config-rubrique[open] > summary { margin-bottom: .4rem; border-bottom: 1px solid var(--border); }

/* ===================================================================
   Réunions
   =================================================================== */
.small { font-size: .82rem; }
.badge-soft { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: .8rem; }
.chip-soft { display: inline-block; padding: .05rem .45rem; margin: 0 .15rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: .75rem; color: var(--muted); }

/* --- Liste des réunions --- */
.meeting-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.meeting-card {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: .8rem 1rem; text-decoration: none; color: var(--text);
}
.meeting-card:hover { border-color: var(--accent); }
.meeting-card-main { min-width: 0; }
.meeting-title { font-weight: 600; }
.meeting-meta { color: var(--muted); font-size: .88rem; margin-top: .2rem; }
.meeting-card-badges { display: flex; flex-wrap: wrap; gap: .3rem; flex: none; }
.chip-count { font-size: .78rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.chip-decide { border-color: var(--accent); color: var(--accent); }
.past-list { opacity: .8; }

/* --- En-tête d'une réunion --- */
.meeting-headmeta { margin: .5rem 0 .2rem; }

/* --- Recherche de date (Doodle) --- */
.dateopt { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; margin-top: .6rem; background: var(--surface); }
.dateopt-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dateopt-when { font-weight: 600; }
.dateopt-tally { display: flex; gap: .5rem; font-size: .85rem; white-space: nowrap; }
.dateopt-tally .t-yes { color: var(--green); }
.dateopt-tally .t-maybe { color: var(--amber); }
.dateopt-tally .t-no { color: var(--red); }
.dateopt-voters { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chip-oui { border-color: var(--green); }
.chip-si_besoin { border-color: var(--amber); }
.chip-non { border-color: var(--red); opacity: .7; }
.dateopt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }
.dateopt-actions select { min-height: 36px; padding: .2rem .45rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }

/* --- Ordre du jour : points --- */
.topic { border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; margin-top: .7rem; background: var(--surface); }
.topic-decide { border-left: 3px solid var(--accent); }
.topic-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.topic-num { color: var(--muted); font-weight: 700; }
.topic-title { font-weight: 600; font-size: 1.02rem; }
.badge-decide { font-size: .7rem; padding: .12rem .5rem; border-radius: 999px; background: var(--accent); color: #1a1d24; font-weight: 600; }
.topic-author { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .82rem; margin-top: .3rem; }
.topic-body { margin: .5rem 0; }
.topic-files { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.topic-img img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.topic-doc { display: inline-flex; align-items: center; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); font-size: .85rem; background: var(--bg); }
.topic-doc:hover { border-color: var(--accent); }
.topic-editor { margin-top: .5rem; }

/* --- Matrice de décision --- */
.matrix { margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--border); }
.matrix-head { font-weight: 600; margin-bottom: .5rem; }
.matrix-results { display: flex; flex-direction: column; gap: .45rem; }
.matrix-opt { display: grid; grid-template-columns: 1fr; gap: .15rem; }
.matrix-opt-label { display: flex; align-items: center; gap: .4rem; font-size: .92rem; }
.matrix-bar { position: relative; height: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.matrix-bar span { position: absolute; inset: 0 auto 0 0; background: var(--muted); border-radius: 999px; }
.matrix-opt.is-leader .matrix-bar span { background: var(--accent); }
.matrix-opt.is-decided .matrix-bar span { background: var(--green); }
.matrix-score { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--muted); text-align: right; }
.badge-leader { font-size: .7rem; color: var(--accent); }
.badge-decided { font-size: .7rem; padding: .08rem .45rem; border-radius: 999px; background: var(--green); color: #0c1f14; font-weight: 600; }
.matrix-voters { margin-top: .5rem; }
.matrix-detail, .matrix-mine, .matrix-setup { margin-top: .6rem; }
.matrix-detail summary, .matrix-mine summary, .matrix-setup summary { cursor: pointer; color: var(--muted); font-size: .88rem; padding: .25rem 0; }
.matrix-table-wrap { overflow-x: auto; }
.matrix-table { border-collapse: collapse; width: 100%; font-size: .82rem; margin-top: .4rem; }
.matrix-table th, .matrix-table td { border: 1px solid var(--border); padding: .3rem .45rem; text-align: center; }
.matrix-table .matrix-rowhead { text-align: left; font-weight: 600; }
.matrix-table .matrix-total { font-weight: 700; }
.matrix-table tr.is-leader { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.matrix-fieldset { border: 1px solid var(--border); border-radius: 8px; padding: .4rem .6rem; margin-top: .5rem; }
.matrix-fieldset legend { padding: 0 .3rem; font-weight: 600; font-size: .85rem; }
.matrix-cell { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .25rem; font-size: .85rem; color: var(--text); }
.matrix-cell select { min-height: 34px; padding: .15rem .4rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }

/* --- Configuration de la matrice (éditeurs) --- */
.setup-block { margin-top: .7rem; }
.setup-title { font-weight: 600; font-size: .85rem; margin: 0 0 .3rem; }
.setup-row { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.setup-row input[type="text"] { flex: 1; min-height: 34px; padding: .2rem .45rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
.inline-add { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.inline-add input[type="text"] { flex: 1; min-height: 34px; padding: .2rem .45rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
.weight-field { display: inline-flex; align-items: center; gap: .15rem; color: var(--muted); font-size: .85rem; }
.weight-field input { width: 3.2rem; min-height: 34px; padding: .2rem .35rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }

/* --- Compte-rendu & décisions --- */
.report-body { white-space: pre-wrap; margin-top: .4rem; }
.decisions-recap { margin-top: .8rem; padding: .6rem .9rem; border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 8px; background: var(--surface); }
.decisions-recap ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.decisions-recap li { margin: .2rem 0; }

/* --- Rôles : admin du site + rôle par groupe (catégorie) --- */
.tag-admin { color: #1a1d24; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.chip-role { font-size: .72rem; color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 0 .4rem; }
.role-row { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .3rem 0; border-top: 1px solid var(--border); }
.role-row:first-of-type { border-top: 0; }
.role-row-name { flex: 1; font-size: .9rem; }
.role-row select { min-width: 7rem; }
.role-row .btn { width: auto; padding: .35rem .7rem; }

/* =====================================================================
   SKINS « directions » — proposés dans le sélecteur de thème.
   Chaque bloc est scopé sous html[data-theme="…"] : on redéfinit d'abord
   les variables (elles recolorent tout : cartes, bordures, calendrier,
   matrices…), puis quelques COMPOSANTS SIGNATURE. Mobile d'abord.
   ===================================================================== */

/* ---------- MODERNE — éditorial sombre, très grande typo, filets ---------- */
html[data-theme="moderne"] {
    --bg:#0b0b0d; --surface:#121214; --text:#f3f1ec; --muted:#8b8980;
    --accent:#cda84e; --border:rgba(255,255,255,.12); --radius:14px;
    --green:#7fcf9a; --amber:#e3b35a; --red:#e07a86;
}
html[data-theme="moderne"] body { font-feature-settings:"tnum" 1,"ss01" 1; -webkit-font-smoothing:antialiased; }
html[data-theme="moderne"] .topbar { background:rgba(11,11,13,.72); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.06); }
html[data-theme="moderne"] h1 { font-size:2.6rem; line-height:1.02; letter-spacing:-.03em; font-weight:680; }
html[data-theme="moderne"] h2 { text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--muted); }
html[data-theme="moderne"] .hero,
html[data-theme="moderne"] .card { background:var(--surface); border:1px solid var(--border); box-shadow:none; }
html[data-theme="moderne"] .list-row,
html[data-theme="moderne"] .position,
html[data-theme="moderne"] .event,
html[data-theme="moderne"] .meeting-card { background:transparent; border:1px solid var(--border); }
html[data-theme="moderne"] .progress strong,
html[data-theme="moderne"] .budget-summary strong { color:var(--accent); }
html[data-theme="moderne"] .event-day { color:var(--accent); font-size:1.5rem; }

/* ---------- RÉTRO 2000 — Aqua glossy, métal brossé, pastilles bonbon ---------- */
html[data-theme="retro"] {
    --bg:#e3e9f0; --surface:#ffffff; --text:#1d2530; --muted:#516072;
    --accent:#2f7ff0; --border:#b9c6d6; --radius:16px;
    --green:#22863a; --amber:#b07c0c; --red:#b8324a;
}
html[data-theme="retro"] body {
    background:
        repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 1px,rgba(255,255,255,0) 1px 3px),
        linear-gradient(180deg,#e7edf4,#cdd6e1 60%,#c2ccd9);
    background-attachment:fixed;
}
html[data-theme="retro"] .topbar {
    border-bottom:1px solid #8c9bad;
    background:
        linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 50%),
        linear-gradient(180deg,#f4f7fb,#cdd6e1);
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 6px rgba(40,60,90,.18);
}
html[data-theme="retro"] .brand { text-shadow:0 1px 0 rgba(255,255,255,.85); }
html[data-theme="retro"] h1 { text-shadow:0 1px 0 rgba(255,255,255,.9); }
html[data-theme="retro"] .hero,
html[data-theme="retro"] .card {
    background:linear-gradient(180deg,#ffffff,#f3f6fa); border:1px solid #b9c6d6;
    box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 6px 16px rgba(40,60,90,.16);
}
html[data-theme="retro"] .list-row,
html[data-theme="retro"] .position,
html[data-theme="retro"] .event,
html[data-theme="retro"] .meeting-card,
html[data-theme="retro"] .topic,
html[data-theme="retro"] .dateopt {
    background:linear-gradient(180deg,#ffffff,#eef3f8); border:1px solid #c2cedb;
    box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 3px 8px rgba(40,60,90,.12);
}
html[data-theme="retro"] .btn,
html[data-theme="retro"] .nav a.btn {
    color:#fff; border:1px solid var(--accent);
    background:
        linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.1) 48%,rgba(255,255,255,0) 50%,rgba(255,255,255,.18)),
        linear-gradient(180deg,#54a0ff,#2f7ff0 52%,#1c6ae0);
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 3px 8px rgba(30,90,210,.4);
    text-shadow:0 -1px 0 rgba(0,40,120,.35);
}
html[data-theme="retro"] .btn-ghost { color:var(--text); border:1px solid #b9c6d6; text-shadow:none; background:linear-gradient(180deg,#fff,#e8eef5); }
html[data-theme="retro"] .btn-danger { color:var(--red); border-color:var(--red); text-shadow:none; background:linear-gradient(180deg,#fff,#f6e9eb); }
html[data-theme="retro"] .badge { color:#fff; border:0; box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 1px 2px rgba(0,0,0,.2); }
html[data-theme="retro"] .badge-confirme,
html[data-theme="retro"] .scene-badge-ok,
html[data-theme="retro"] .prop-badge-termine { background:linear-gradient(180deg,#5fd06f,#22863a); color:#fff; border:0; }
html[data-theme="retro"] .badge-en_discussion,
html[data-theme="retro"] .scene-badge-filee,
html[data-theme="retro"] .prop-badge-en_cours { background:linear-gradient(180deg,#ffce5a,#b07c0c); color:#3a2a00; border:0; }
html[data-theme="retro"] .badge-a_pourvoir,
html[data-theme="retro"] .prop-badge-a_faire { background:linear-gradient(180deg,#ff8194,#b8324a); color:#fff; border:0; }
html[data-theme="retro"] .scene-badge-mise_en_place { background:linear-gradient(180deg,#8fc1f0,#2b6cae); color:#06203b; border:0; }
html[data-theme="retro"] .badge-decide { color:#fff; }
html[data-theme="retro"] .subnav a.active,
html[data-theme="retro"] .cal-btn.active {
    color:#0d2f63; border-color:#9db6dd;
    background:
        linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.1) 48%,rgba(255,255,255,0) 50%,rgba(255,255,255,.18)),
        linear-gradient(180deg,#fbfdff,#dfeaf8);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(40,60,90,.22);
}
html[data-theme="retro"] .progress-bar { background:linear-gradient(180deg,#d2dae3,#e9eef4); border-color:#9fb0c2; box-shadow:0 1px 2px rgba(40,60,90,.25) inset; }
html[data-theme="retro"] .progress-fill {
    background:
        linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 50%),
        repeating-linear-gradient(135deg,#3f8bf3 0 12px,#2f7ff0 12px 24px);
    background-size:auto,34px 34px;
    animation:retro-barber 1s linear infinite;
}
@keyframes retro-barber { to { background-position:0 0,34px 0; } }
html[data-theme="retro"] .event-day { color:var(--accent); }
html[data-theme="retro"] .step.done .step-check { color:#fff; }

/* ---------- GAUDÍ — trencadís, formes organiques, céramique, serif ---------- */
html[data-theme="gaudi"] {
    --bg:#fbf4e6; --surface:#fffdf8; --text:#3a2e26; --muted:#8a7a66;
    --accent:#c05733; --border:#ecdcc2; --radius:18px;
    --green:#5f8038; --amber:#cf8d12; --red:#c05733;
    --serif:"Fraunces",Georgia,"Times New Roman",serif;
}
html[data-theme="gaudi"] body {
    background:
        radial-gradient(circle at 12% 8%,rgba(47,159,196,.10),transparent 30%),
        radial-gradient(circle at 88% 16%,rgba(224,118,79,.12),transparent 32%),
        radial-gradient(circle at 70% 92%,rgba(242,180,63,.12),transparent 34%),
        #fbf4e6;
    background-attachment:fixed;
}
html[data-theme="gaudi"] .topbar {
    background:var(--surface); border-bottom:4px solid transparent;
    border-image:repeating-linear-gradient(90deg,#2f9fc4 0 14px,#e0764f 14px 28px,#f2b43f 28px 42px,#7fa05a 42px 56px,#e0789a 56px 70px,#a06bc0 70px 84px) 4;
}
html[data-theme="gaudi"] h1 { font-family:var(--serif); font-weight:600; letter-spacing:-.01em; color:#c05733; }
html[data-theme="gaudi"] h2,
html[data-theme="gaudi"] .brand { font-family:var(--serif); font-weight:600; }
html[data-theme="gaudi"] h2 { color:#1d7fa3; }
html[data-theme="gaudi"] .act-sep { font-family:var(--serif); color:#c05733; }
html[data-theme="gaudi"] .event-day,
html[data-theme="gaudi"] .budget-summary strong { font-family:var(--serif); color:#1d7fa3; }
html[data-theme="gaudi"] .hero,
html[data-theme="gaudi"] .card {
    border-radius:30px 12px 30px 12px;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 22px rgba(150,100,50,.12);
}
html[data-theme="gaudi"] .list-row,
html[data-theme="gaudi"] .position,
html[data-theme="gaudi"] .event,
html[data-theme="gaudi"] .meeting-card {
    border-radius:20px 8px 20px 8px;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 5px 14px rgba(150,100,50,.10);
}
html[data-theme="gaudi"] .avatar { border-radius:46% 54% 50% 50%/54% 46% 54% 46%; }
html[data-theme="gaudi"] .btn,
html[data-theme="gaudi"] .nav a.btn { color:#fff; border:0; background:linear-gradient(135deg,#e0764f,#cf8d12); box-shadow:0 6px 16px rgba(224,118,79,.35); }
html[data-theme="gaudi"] .btn-ghost { color:var(--text); background:var(--surface); border:1px solid var(--border); box-shadow:none; }
html[data-theme="gaudi"] .subnav a.active,
html[data-theme="gaudi"] .cal-btn.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,#e0764f,#cf8d12); }
html[data-theme="gaudi"] .badge-confirme,
html[data-theme="gaudi"] .scene-badge-ok,
html[data-theme="gaudi"] .prop-badge-termine { background:rgba(127,160,90,.22); color:#4c6a2a; border-color:transparent; }
html[data-theme="gaudi"] .badge-en_discussion,
html[data-theme="gaudi"] .scene-badge-filee,
html[data-theme="gaudi"] .prop-badge-en_cours { background:rgba(242,180,63,.30); color:#8a5e06; border-color:transparent; }
html[data-theme="gaudi"] .badge-a_pourvoir,
html[data-theme="gaudi"] .prop-badge-a_faire { background:rgba(224,118,79,.22); color:#b14a28; border-color:transparent; }
html[data-theme="gaudi"] .badge-decide { color:#fff; }
html[data-theme="gaudi"] .progress-fill { background:linear-gradient(90deg,#f2b43f,#e0764f); }
html[data-theme="gaudi"] .step.done .step-check { color:#fff; }

/* ---- Messages flash sur fond clair (rétro + gaudí), comme le thème « clair » ---- */
html[data-theme="retro"] .flash-success,
html[data-theme="gaudi"] .flash-success { background:#e7f6ec; color:#1e7d4f; border-color:#bfe6cf; }
html[data-theme="retro"] .flash-error,
html[data-theme="gaudi"] .flash-error { background:#fdecec; color:#b3261e; border-color:#f3c4c2; }
html[data-theme="retro"] .flash-info,
html[data-theme="gaudi"] .flash-info { background:#e9f1fb; color:#1f5fae; border-color:#c7dcf6; }

/* ---------- RAMILÉE — calqué sur la vitrine ramilee.fr (page Akopha) :
   parchemin + ors + brun, capitales romaines Cinzel, corps Cormorant
   Garamond, libellés Montserrat, filet décoratif bleu/violet/magenta. ---------- */
html[data-theme="ramilee"] {
    --bg:#f5f0e8; --surface:#ece6da; --text:#2a2420; --muted:#6b5d4f;
    --accent:#8a6d2b; --border:#d8d0c2; --radius:6px;
    --green:#5f7a3a; --amber:#b8960b; --red:#9c4a2f;
    --r-display:"Cinzel Decorative",Georgia,serif;
    --r-title:"Cinzel",Georgia,serif;
    --r-body:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    --r-ui:"Montserrat",system-ui,-apple-system,sans-serif;
    --r-sepia:#6b5d4f; --r-argent:#9a9590; --r-or-vif:#b8960b;
}
html[data-theme="ramilee"] body { font-family:var(--r-body); font-size:1.06rem; line-height:1.65; }
/* grain de parchemin, comme la vitrine */
html[data-theme="ramilee"] body::after {
    content:''; position:fixed; inset:0; opacity:.03; pointer-events:none; z-index:9; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* titres : capitales romaines dorées */
html[data-theme="ramilee"] h1 { font-family:var(--r-title); color:var(--accent); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
html[data-theme="ramilee"] h2 { font-family:var(--r-title); color:var(--accent); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
html[data-theme="ramilee"] .lead { font-style:italic; color:var(--r-sepia); }
html[data-theme="ramilee"] .brand { font-family:var(--r-display); color:var(--accent); letter-spacing:.04em; }
/* barre du haut : crème + filet décoratif (argent + trio du logo) */
html[data-theme="ramilee"] .topbar {
    background-color:var(--surface); border-bottom:0;
    background-image:
        linear-gradient(to right, transparent, rgba(154,149,144,.6), transparent),
        linear-gradient(to right, transparent, rgba(53,140,194,.7), rgba(118,48,168,.7), rgba(201,54,136,.7), transparent);
    background-repeat:no-repeat; background-position:left bottom 3px, left bottom 0; background-size:100% 1px,100% 2px;
}
/* cartes & lignes : crème, filet fin, coins nets */
html[data-theme="ramilee"] .hero,
html[data-theme="ramilee"] .card { background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:0 1px 2px rgba(42,36,32,.04); }
html[data-theme="ramilee"] .list-row,
html[data-theme="ramilee"] .position,
html[data-theme="ramilee"] .event,
html[data-theme="ramilee"] .meeting-card,
html[data-theme="ramilee"] .topic,
html[data-theme="ramilee"] .dateopt { background:var(--surface); border:1px solid var(--border); border-radius:6px; }
/* libellés UI en petites capitales Montserrat */
html[data-theme="ramilee"] .tag,
html[data-theme="ramilee"] .badge,
html[data-theme="ramilee"] .type-badge,
html[data-theme="ramilee"] .subnav a { font-family:var(--r-ui); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; border-radius:3px; }
/* boutons : or plein, capitales espacées ; fantôme = filet doré */
html[data-theme="ramilee"] .btn,
html[data-theme="ramilee"] .nav a.btn { background:var(--accent); color:var(--bg); border:1px solid var(--accent); border-radius:3px; font-family:var(--r-ui); text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; font-weight:500; }
html[data-theme="ramilee"] .btn:hover { background:#a07830; }
html[data-theme="ramilee"] .btn-ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }
html[data-theme="ramilee"] .btn-danger { background:transparent; color:var(--red); border-color:var(--red); }
/* sous-nav : onglets sobres, actif doré */
html[data-theme="ramilee"] .subnav a { color:var(--r-sepia); background:var(--surface); border:1px solid var(--border); }
html[data-theme="ramilee"] .subnav a.active,
html[data-theme="ramilee"] .cal-btn.active { background:var(--accent); color:var(--bg); border-color:var(--accent); }
/* badges de statut : filet + capitales (façon « badge-sacd ») */
html[data-theme="ramilee"] .badge { border:1px solid currentColor; background:transparent; font-weight:600; }
html[data-theme="ramilee"] .badge-confirme,
html[data-theme="ramilee"] .scene-badge-ok,
html[data-theme="ramilee"] .prop-badge-termine { color:#4c6a2a; background:rgba(95,122,58,.08); border-color:rgba(95,122,58,.55); }
html[data-theme="ramilee"] .badge-en_discussion,
html[data-theme="ramilee"] .scene-badge-filee,
html[data-theme="ramilee"] .prop-badge-en_cours { color:#8a6a06; background:rgba(184,150,11,.10); border-color:rgba(184,150,11,.55); }
html[data-theme="ramilee"] .badge-a_pourvoir,
html[data-theme="ramilee"] .prop-badge-a_faire { color:#9c4a2f; background:rgba(156,74,47,.08); border-color:rgba(156,74,47,.55); }
html[data-theme="ramilee"] .badge-decide { background:var(--accent); color:var(--bg); border-color:var(--accent); }
/* barre de progression dorée */
html[data-theme="ramilee"] .progress-bar { background:#e4ddd0; border-color:var(--border); }
html[data-theme="ramilee"] .progress-fill { background:linear-gradient(90deg,#8a6d2b,#b8960b); }
/* agenda : quantième en capitales romaines, jour en petites capitales */
html[data-theme="ramilee"] .event-day { font-family:var(--r-display); color:var(--accent); }
html[data-theme="ramilee"] .event-wday { font-family:var(--r-ui); text-transform:uppercase; letter-spacing:.1em; }
/* séparateurs */
html[data-theme="ramilee"] .act-sep { font-family:var(--r-title); color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
html[data-theme="ramilee"] .month-sep { font-family:var(--r-ui); color:var(--r-or-vif); }
/* barre de navigation : liens en petites capitales */
html[data-theme="ramilee"] a { color:var(--accent); }
html[data-theme="ramilee"] .nav a { color:var(--r-sepia); font-family:var(--r-ui); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; }
html[data-theme="ramilee"] .nav a:hover { color:var(--accent); }
/* messages flash sur fond clair */
html[data-theme="ramilee"] .flash-success { background:#e7f1de; color:#4c6a2a; border:1px solid #c2d6a8; }
html[data-theme="ramilee"] .flash-error { background:#f6e4dd; color:#8c3a22; border:1px solid #e2bfb0; }
html[data-theme="ramilee"] .flash-info { background:#e9eef5; color:#3a5a86; border:1px solid #c4d2e6; }

/* --- Confidentialité du profil & suppression de compte (RGPD) --- */
fieldset.visibility { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; margin-top: .4rem; }
fieldset.visibility legend { padding: 0 .3rem; font-weight: 600; font-size: .85rem; }
fieldset.visibility .check { margin: .15rem 0; }
.danger-zone { border-color: var(--red); }
.danger-zone h2 { color: var(--red); margin-top: 0; }
.tag-hidden { color: var(--muted); border-style: dashed; }
.notice { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; margin: .5rem 0; font-size: .9rem; }
.notice-info { border-color: var(--accent); }