/* ═══════════════════════════════════════════════════════════
   COINMALIN PARTENAIRE — Système de design partagé
   Mobile-First · Ultra Élégant · Cohérent
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ─── Variables ─── */
:root {
  /* Brand */
  --dp:#071810; --dk:#0D3D2B; --rc:#156240; --mg:#1E7A50;
  --lt:#4DB87A; --pl:#A8D5BC; --bl:#E8F4EE; --cr:#F3F8F5;
  --gd:#C8A855; --gd-lt:#FDF6E3;

  /* Vert de marque UNIQUE (sidebar = bandeau « jules ») — source unique
     pour garantir une couleur STRICTEMENT identique partout. */
  --cm-green:#214437;

  /* Texte */
  --t1:#091C10; --t2:#2A3D30; --t3:#607A6A; --t4:#9BB5A8;

  /* Surfaces — --bg = fond de page KAKI, partagé par la pastille active
     de la sidebar ET la topbar (aucune ligne blanche entre eux). */
  --wh:#FFFFFF; --bg:#EDE9DB;

  /* Status */
  --err:#DC2626; --warn:#D97706; --ok:#059669;

  /* Bords */
  --bd:rgba(21,98,64,.11); --bd2:rgba(21,98,64,.28);

  /* Ombres */
  --sh1:0 1px 3px rgba(9,28,16,.05),0 2px 8px rgba(9,28,16,.04);
  --sh2:0 4px 16px rgba(9,28,16,.08),0 1px 4px rgba(9,28,16,.05);
  --sh3:0 12px 40px rgba(9,28,16,.12),0 4px 12px rgba(9,28,16,.07);

  /* Rayons */
  /* Coins plus « corporate » (moins arrondis, style app de gestion) */
  --r1:6px; --r2:10px; --r3:12px; --r4:16px;

  /* Typo */
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;

  /* Animation */
  --ease:.22s cubic-bezier(.4,0,.2,1);
  --spring:.32s cubic-bezier(.34,1.56,.64,1);

  /* Layout — largeur desktop pro (SaaS). Le contenu s'étend sur le laptop
     au lieu d'une colonne étroite façon téléphone. */
  --topbar-h:58px;
  --subnav-h:46px;
  --bottom-h:70px;
  --w:1180px;
}

/* ─── Reset ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { height:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:var(--sans); color:var(--t2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
a { text-decoration:none; color:inherit }
img { display:block; max-width:100% }
button { cursor:pointer; border:none; background:none; font-family:inherit }
input,select,textarea { font-family:inherit; font-size:inherit }
.hidden { display:none !important }

/* ═══════════════════════════════════════
   TOPBAR
═══════════════════════════════════════ */
.topbar {
  position:sticky; top:0; z-index:300;
  height:var(--topbar-h);
  /* Même kaki que le fond de page (--bg) → pas de bande blanche en haut */
  background:rgba(237,233,219,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd);
  box-shadow:0 1px 0 rgba(9,28,16,.04);
}
.topbar__inner {
  height:100%; max-width:var(--w);
  margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:10px;
}

/* Bouton retour */
.topbar__back {
  width:38px; height:38px; flex-shrink:0;
  border-radius:50%; border:1px solid var(--bd);
  display:flex; align-items:center; justify-content:center;
  color:var(--t3); transition:all var(--ease);
}
.topbar__back:hover { background:var(--bl); border-color:var(--bd2); color:var(--rc) }

/* Logo */
.topbar__logo {
  font-family:var(--serif); font-size:1.35rem;
  color:var(--dk); letter-spacing:-.01em; line-height:1;
}
.topbar__logo span { color:var(--rc) }

/* Badge "Partenaire" */
.topbar__badge {
  font-size:9px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--bl); color:var(--rc);
  padding:3px 8px; border-radius:50px;
  border:1px solid rgba(21,98,64,.18);
}

/* Espace central */
.topbar__etab-name {
  font-size:13px; font-weight:600; color:var(--t3);
  flex:1; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Actions droite */
.topbar__right { display:flex; align-items:center; gap:8px; margin-left:auto }
.topbar__right-actions { display:flex; align-items:center; gap:8px; margin-left:auto }

/* Centre (logo + nom établissement) */
.topbar__center {
  flex:1; display:flex; align-items:center;
  justify-content:center; gap:6px;
  min-width:0; overflow:hidden;
}
.topbar__center .topbar__etab-name {
  font-size:13px; font-weight:600; color:var(--t3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Actions (droite) */
.topbar__actions { display:flex; align-items:center; gap:8px; }

/* Bouton "Ma fiche" — verre transparent (comme la nav de l'index) */
.topbar__fiche-btn {
  display:flex; align-items:center; gap:5px;
  padding:7px 13px; border-radius:50px;
  border:1px solid rgba(21,98,64,.18);
  font-size:11.5px; font-weight:600;
  color:var(--t2); background:transparent;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  white-space:nowrap; transition:all var(--ease);
}
.topbar__fiche-btn:hover {
  border-color:var(--bd2); color:var(--rc); background:rgba(21,98,64,.06);
}

/* Quota label */
.topbar__quota {
  font-size:11px; font-weight:600; color:var(--t3);
  background:var(--bg); border:1px solid var(--bd);
  padding:5px 11px; border-radius:50px;
}

/* Notif button — verre transparent (comme la nav de l'index) */
.topbar__notif {
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(21,98,64,.18);
  background:transparent;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:var(--t3); position:relative; transition:all var(--ease);
}
.topbar__notif:hover { background:rgba(21,98,64,.06); color:var(--rc); border-color:var(--bd2) }
.topbar__notif-dot {
  position:absolute; top:8px; right:8px;
  width:7px; height:7px; border-radius:50%;
  background:var(--err); border:2px solid var(--wh);
}

/* Avatar */
.topbar__avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0; border:none;
  background:linear-gradient(135deg,#C8A855,#D4A840);
  color:var(--wh); font-size:12px; font-weight:700; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform var(--ease);
  box-shadow:0 2px 8px rgba(200,168,85,.3);
}
.topbar__avatar:hover { transform:scale(1.07) }

/* ═══ MENU COMPTE (déconnexion, accueil, explorer, fiche) ═══ */
.cm-acct-overlay { position:fixed; inset:0; z-index:8000; }
.cm-acct-overlay.hidden { display:none; }
.cm-acct-menu {
  position:fixed; top:56px; right:14px; z-index:8001;
  width:250px; background:var(--wh);
  border:1px solid var(--bd); border-radius:16px;
  box-shadow:0 16px 48px rgba(9,28,16,.16);
  padding:6px; overflow:hidden;
  animation:cmAcctIn .16s cubic-bezier(.34,1.56,.64,1);
}
.cm-acct-menu.hidden { display:none; }
@keyframes cmAcctIn { from{opacity:0;transform:translateY(-8px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.cm-acct-menu__head {
  display:flex; align-items:center; gap:11px;
  padding:12px 12px 12px; margin-bottom:4px;
  border-bottom:1px solid var(--bd);
}
.cm-acct-menu__avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#C8A855,#D4A840);
  color:#fff; font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.cm-acct-menu__id { min-width:0; }
.cm-acct-menu__id strong { display:block; font-size:14px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-acct-menu__id span { display:block; font-size:12px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-acct-menu__item {
  display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 12px; border-radius:10px; border:none; background:none;
  font-size:13.5px; font-weight:600; color:var(--t2); font-family:inherit;
  cursor:pointer; text-align:left; transition:background .14s;
}
.cm-acct-menu__item:hover { background:var(--bg); }
.cm-acct-menu__item svg { color:var(--t3); flex-shrink:0; }
.cm-acct-menu__item--danger { color:var(--err); }
.cm-acct-menu__item--danger svg { color:var(--err); }
.cm-acct-menu__item--danger:hover { background:#FEF2F2; }
.cm-acct-menu__sep { height:1px; background:var(--bd); margin:4px 6px; }

/* ═══════════════════════════════════════════════════════════
   COQUILLE RESPONSIVE — nav unique (mobile bottom-bar / desktop sidebar)
   MOBILE-FIRST : le style de base = barre du bas. Les media queries
   ≥768px transforment en sidebar. Un seul composant, un seul HTML.
═══════════════════════════════════════════════════════════ */

/* ── Base = MOBILE : barre de navigation fixe en bas ── */
.cm-shell {
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  height:64px; background:var(--wh);
  border-top:1px solid var(--bd);
  box-shadow:0 -2px 16px rgba(9,28,16,.05);
  display:flex; align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.cm-shell__brand,
.cm-shell__bottom { display:none; }   /* masqués sur mobile */
.cm-shell__items { display:flex; flex:1; }
/* Icônes ancrées en HAUT : un libellé sur 2 lignes ne décale plus rien */
.cm-shell__item {
  flex:1; display:flex; flex-direction:column; min-width:0;
  align-items:center; justify-content:flex-start; gap:3px;
  padding-top:9px;
  color:var(--t3); text-decoration:none;
  transition:color var(--ease);
  position:relative;
}
.cm-shell__ic { width:23px; height:23px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.cm-shell__ic svg { width:23px; height:23px; }
.cm-shell__label {
  font-size:9.5px; font-weight:600; letter-spacing:.01em;
  line-height:1.15; text-align:center; padding:0 2px;
  max-height:2.3em; overflow:hidden;
}
.cm-shell__item--active { color:var(--rc); }
.cm-shell__item--active::before {          /* petit trait actif en haut (mobile) */
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--rc);
}

/* Le contenu ne passe pas sous la barre du bas */
body.cm-has-shell { padding-bottom:calc(64px + env(safe-area-inset-bottom,0)); }

/* ── TABLETTE & PC (≥768px) : sidebar VERT FONCÉ, pastilles arrondies ── */
@media (min-width:768px) {
  /* Sidebar = carte VERTE FLOTTANTE aux coins arrondis (réf. Sentinel).
     Même variable --cm-green que le bandeau « jules » → couleur
     STRICTEMENT identique (une seule source de vérité). */
  .cm-shell {
    top:16px; bottom:16px; left:16px; right:auto; width:248px; height:auto;
    flex-direction:column; align-items:stretch;
    border-top:none; border-right:none; border-radius:24px;
    background:var(--cm-green);
    box-shadow:none;
    padding:20px 14px;
  }
  .cm-shell__brand {
    display:block; font-family:var(--serif); font-size:1.42rem;
    color:#fff; padding:6px 12px 18px; line-height:1;
  }
  .cm-shell__brand-full span, .cm-shell__brand-mini span { color:var(--gd); }

  .cm-shell__items { flex-direction:column; flex:1; gap:4px; }
  .cm-shell__item {
    flex:none; flex-direction:row; justify-content:flex-start; gap:13px;
    padding:12px 16px; border-radius:40px; color:rgba(255,255,255,.78);
    font-weight:600;
  }
  .cm-shell__item:hover { background:rgba(255,255,255,.08); color:#fff; }
  /* Actif = pastille couleur fond de page collée au bord DROIT de la carte,
     avec deux COINS CONCAVES (effet "scooped" / inward corners comme la réf
     flights). Les pseudo-éléments sont "mordus" par un quart de cercle qui
     laisse voir le vert derrière → la sidebar semble se creuser autour. */
  /* IMPORTANT : la pastille et ses coins concaves doivent être EXACTEMENT
     de la couleur du fond de page (--bg), sinon un liseré/halo apparaît
     au bord droit de la sidebar. */
  .cm-shell__item--active {
    background:var(--bg); color:var(--dk); box-shadow:none;
    margin-right:-14px; padding-right:28px;
    border-radius:40px 0 0 40px;
  }
  .cm-shell__item--active:hover { background:var(--bg); color:var(--dk); }
  .cm-shell__item--active::before,
  .cm-shell__item--active::after {
    content:''; display:block; position:absolute; right:0;
    width:18px; height:18px; background:var(--bg); border-radius:0;
    top:auto; left:auto; transform:none;   /* annule l'indicateur mobile */
  }
  .cm-shell__item--active::before {
    top:-18px;
    -webkit-mask:radial-gradient(circle 18px at top left, transparent 17px, #000 18px);
            mask:radial-gradient(circle 18px at top left, transparent 17px, #000 18px);
  }
  .cm-shell__item--active::after {
    bottom:-18px;
    -webkit-mask:radial-gradient(circle 18px at bottom left, transparent 17px, #000 18px);
            mask:radial-gradient(circle 18px at bottom left, transparent 17px, #000 18px);
  }
  .cm-shell__ic { width:20px; height:20px; }
  .cm-shell__ic svg { width:20px; height:20px; }
  .cm-shell__label { font-size:14px; font-weight:600; }

  /* Bas de sidebar : fiche publique + profil */
  .cm-shell__bottom {
    display:flex; flex-direction:column; gap:8px; margin-top:auto;
    padding-top:12px; border-top:1px solid rgba(255,255,255,.09);
  }
  .cm-shell__foot-fiche {
    display:flex; align-items:center; gap:10px;
    padding:11px 16px; border-radius:40px;
    color:rgba(255,255,255,.72); font-size:13px; font-weight:600;
    border:1px solid rgba(255,255,255,.14);
    transition:all var(--ease);
  }
  .cm-shell__foot-fiche:hover { background:rgba(255,255,255,.08); color:#fff; }
  .cm-shell__foot-fiche svg { width:16px; height:16px; flex-shrink:0; }

  /* Profil en bas : avatar cerclé or + nom + email — ouvre le menu compte */
  .cm-shell__profile {
    display:flex; align-items:center; gap:11px; width:100%;
    padding:9px 12px; border-radius:16px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
    cursor:pointer; transition:background var(--ease);
    text-align:left;
  }
  .cm-shell__profile:hover { background:rgba(255,255,255,.11); }
  .cm-shell__pavatar {
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,#C8A855,#D4A840);
    color:var(--dk); font-size:14px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 2px rgba(200,168,85,.35), 0 0 0 4px rgba(255,255,255,.06);
  }
  .cm-shell__pinfo { flex:1; min-width:0; display:flex; flex-direction:column; }
  .cm-shell__pinfo strong { font-size:13px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cm-shell__pinfo span { font-size:11px; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cm-shell__pchev { width:15px; height:15px; color:rgba(255,255,255,.5); flex-shrink:0; }

  /* Le contenu se décale à droite de la sidebar flottante (16 + 248 + 16) */
  body.cm-has-shell { padding-bottom:0; margin-left:280px; }

  /* Le menu compte s'ouvre AU-DESSUS du profil (bas-gauche) */
  .cm-acct-menu { bottom:98px; top:auto; left:30px; right:auto; width:224px; }

  /* Topbar allégée sur desktop : la sidebar porte déjà logo + compte + nav.
     On ne garde que le contexte (nom établissement) + les actions utiles
     (Ma fiche, notifications, sauvegarde). Fini les doublons. */
  body.cm-has-shell .topbar__logo,
  body.cm-has-shell .topbar__badge,
  body.cm-has-shell .topbar__back,
  body.cm-has-shell .topbar__avatar,
  body.cm-has-shell .topbar__left { display:none; }
  /* Les actions restantes se collent à droite */
  body.cm-has-shell .topbar__right,
  body.cm-has-shell .topbar__right-actions,
  body.cm-has-shell .topbar__actions { margin-left:auto; }
}

/* Les barres d'action fixes des pages (Publier, modifs non sauvegardées)
   cohabitent avec la coquille : au-dessus de la bottom-bar sur mobile,
   alignées sur le contenu (après la sidebar) sur desktop. */
@media (max-width:767px) {
  body.cm-has-shell .bottom-actions,
  body.cm-has-shell .change-bar {
    bottom:calc(64px + env(safe-area-inset-bottom,0));
  }

  /* Topbar mobile compacte : la bottom-bar identifie déjà l'app,
     le logo cédait sa place au bouton Sauvegarder qui débordait */
  body.cm-has-shell .topbar__logo,
  body.cm-has-shell .topbar__badge { display:none; }
  body.cm-has-shell .topbar__inner { gap:8px; padding:0 12px; }
  body.cm-has-shell .topbar__center { min-width:0; }
  .topbar__save-btn { padding:8px 13px; font-size:12px; white-space:nowrap; }
  .topbar__fiche-btn { white-space:nowrap; }

  /* iOS zoome sur tout champ < 16px : le zoom fait « danser » les modales */
  input, select, textarea { font-size:16px !important; }
}
@media (min-width:768px) {
  body.cm-has-shell .bottom-actions,
  body.cm-has-shell .change-bar { left:280px; }
}

/* ── Grand écran (≥1280px) : sidebar un peu plus large ── */
@media (min-width:1280px) {
  .cm-shell { width:264px; }
  body.cm-has-shell { margin-left:296px; }
  body.cm-has-shell .bottom-actions,
  body.cm-has-shell .change-bar { left:296px; }
}

/* ═══════════════════════════════════════
   SIDEBAR RÉDUITE — rail d'icônes (body.cm-shell-collapsed)
   Bouton flottant sur le bord droit de la carte ; l'état est
   mémorisé (localStorage) et restauré à chaque page.
═══════════════════════════════════════ */
.cm-shell__toggle { display:none; }      /* pas de bouton sur mobile */
.cm-shell__brand-mini { display:none; }  /* monogramme CM : mode réduit only */

@media (min-width:768px) {
  /* Bouton réduire/déplier : pastille à cheval sur le bord droit.
     DISCRET : invisible par défaut, n'apparaît qu'au survol de la
     sidebar (ou au focus clavier). */
  .cm-shell__toggle {
    display:flex; position:absolute; top:24px; right:-13px; z-index:5;
    width:26px; height:26px; border-radius:50%;
    align-items:center; justify-content:center;
    background:var(--wh); border:1px solid var(--bd);
    color:var(--rc); box-shadow:0 2px 10px rgba(9,28,16,.14);
    opacity:0; pointer-events:none;
    transition:opacity var(--ease), background var(--ease);
  }
  .cm-shell:hover .cm-shell__toggle,
  .cm-shell__toggle:focus-visible {
    opacity:1; pointer-events:auto;
  }
  .cm-shell__toggle:hover { background:var(--bl); }
  .cm-shell__toggle svg { width:14px; height:14px; transition:transform .28s cubic-bezier(.4,0,.2,1); }
  body.cm-shell-collapsed .cm-shell__toggle svg { transform:rotate(180deg); }

  /* Les transitions ne s'activent qu'au 1er clic (cm-shell-anim),
     jamais au chargement de la page. */
  body.cm-shell-anim .cm-shell { transition:width .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1); }
  body.cm-shell-anim.cm-has-shell { transition:margin-left .28s cubic-bezier(.4,0,.2,1); }
  body.cm-shell-anim .bottom-actions,
  body.cm-shell-anim .change-bar { transition:left .28s cubic-bezier(.4,0,.2,1); }

  /* Rail réduit : 78px, icônes centrées, textes masqués */
  body.cm-shell-collapsed .cm-shell { width:78px; padding:20px 12px; }
  body.cm-shell-collapsed.cm-has-shell { margin-left:110px; }
  body.cm-shell-collapsed.cm-has-shell .bottom-actions,
  body.cm-shell-collapsed.cm-has-shell .change-bar { left:110px; }

  /* Logo → monogramme « CM » centré */
  body.cm-shell-collapsed .cm-shell__brand { padding:4px 0 16px; text-align:center; }
  body.cm-shell-collapsed .cm-shell__brand-full { display:none; }
  body.cm-shell-collapsed .cm-shell__brand-mini { display:inline; }

  /* Items : icône seule, centrée ; la pastille active garde ses
     coins concaves collés au bord droit (marge = padding du rail) */
  body.cm-shell-collapsed .cm-shell__label { display:none; }
  body.cm-shell-collapsed .cm-shell__item { justify-content:center; gap:0; padding:12px 0; }
  body.cm-shell-collapsed .cm-shell__item--active { margin-right:-12px; padding-right:12px; }

  /* Pied : lien fiche + profil en icône seule */
  body.cm-shell-collapsed .cm-shell__foot-label { display:none; }
  body.cm-shell-collapsed .cm-shell__foot-fiche { justify-content:center; gap:0; padding:11px 0; }
  body.cm-shell-collapsed .cm-shell__pinfo,
  body.cm-shell-collapsed .cm-shell__pchev { display:none; }
  body.cm-shell-collapsed .cm-shell__profile { justify-content:center; padding:6px; }

  /* Le menu compte s'ouvre à côté du rail */
  body.cm-shell-collapsed .cm-acct-menu { left:90px; }
}

/* Pastille non-lus sur l'onglet Discussions (mobile + desktop) */
.cm-shell__item { position:relative; }
.cm-shell__chat-badge {
  position:absolute; top:6px; right:calc(50% - 20px);
  min-width:16px; height:16px; padding:0 4px;
  background:#DC2626; color:#fff; border-radius:50px;
  font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
@media (min-width:768px) {
  .cm-shell__chat-badge {
    position:static; margin-left:auto;
    background:#F5B14C; color:#3B2A08;
  }
}

/* ═══════════════════════════════════════
   MODALE GÉNÉRIQUE (ajout d'établissement)
═══════════════════════════════════════ */
.cm-modal-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(9,28,16,.45); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.cm-modal {
  width:100%; max-width:420px; max-height:90vh; overflow:auto;
  background:var(--wh); border-radius:18px; box-shadow:var(--sh3);
  animation:fade-in .2s var(--ease);
}
.cm-modal__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 12px; border-bottom:1px solid var(--bd);
}
.cm-modal__head h3 { font-family:var(--serif); font-size:1.05rem; color:var(--t1); }
.cm-modal__close {
  width:30px; height:30px; border-radius:50%; color:var(--t3);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease);
}
.cm-modal__close:hover { background:var(--bg); }
.cm-modal__body { padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.cm-modal__field {
  display:flex; flex-direction:column; gap:5px;
  font-size:12px; font-weight:700; color:var(--t2);
}
.cm-modal__field input, .cm-modal__field select {
  padding:10px 12px; border:1.5px solid var(--bd); border-radius:10px;
  font-size:13.5px; color:var(--t1); background:var(--wh);
  outline:none; transition:border-color var(--ease);
}
.cm-modal__field input:focus, .cm-modal__field select:focus { border-color:var(--rc); }
.cm-modal__err {
  font-size:12.5px; color:var(--err); line-height:1.5;
  background:#FEF2F2; border:1px solid rgba(220,38,38,.2);
  border-radius:10px; padding:9px 12px;
}
.cm-modal__foot {
  display:flex; justify-content:flex-end; gap:10px;
  padding:12px 18px 16px; border-top:1px solid var(--bd);
}
.cm-modal__cancel {
  padding:9px 16px; border-radius:50px;
  font-size:12.5px; font-weight:600; color:var(--t3);
  transition:background var(--ease);
}
.cm-modal__cancel:hover { background:var(--bg); }
.cm-modal__ok {
  padding:9px 18px; border-radius:50px;
  background:var(--rc); color:var(--wh);
  font-size:12.5px; font-weight:700;
  transition:background var(--ease);
}
.cm-modal__ok:hover:not(:disabled) { background:var(--dk); }
.cm-modal__ok:disabled { opacity:.6; }

/* Bouton save (profil) */
.topbar__save-btn {
  padding:8px 18px; border-radius:50px;
  background:var(--rc); color:var(--wh);
  font-size:13px; font-weight:600;
  transition:all var(--ease);
  box-shadow:0 2px 10px rgba(21,98,64,.22);
}
.topbar__save-btn:disabled { opacity:.35; cursor:not-allowed; box-shadow:none }
.topbar__save-btn:not(:disabled):hover { background:var(--dk); transform:translateY(-1px) }

/* Indicateur live (menu) */
.topbar__live { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--mg) }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--lt); animation:pulse-dot 1.8s ease infinite }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

/* Autosave dot */
.autosave-dot { width:7px; height:7px; border-radius:50%; background:var(--lt); flex-shrink:0; transition:background var(--ease) }
.autosave-dot.saving { background:var(--warn); animation:pulse-dot .8s ease infinite }

/* ═══════════════════════════════════════
   SOUS-NAVIGATION
═══════════════════════════════════════ */
.subnav {
  background:var(--wh);
  border-bottom:1px solid var(--bd);
  overflow-x:auto; scrollbar-width:none;
  position:sticky; top:var(--topbar-h); z-index:200;
}
.subnav::-webkit-scrollbar { display:none }
.subnav__inner {
  display:flex; align-items:center;
  max-width:var(--w); margin:0 auto; padding:0 16px; gap:0;
}
.subnav__link {
  display:flex; align-items:center; gap:6px;
  padding:0 14px; height:var(--subnav-h);
  font-size:12px; font-weight:600;
  color:var(--t3); text-decoration:none;
  border-bottom:2.5px solid transparent;
  white-space:nowrap; flex-shrink:0;
  transition:all var(--ease);
}
.subnav__link svg { flex-shrink:0; opacity:.7 }
.subnav__link:hover { color:var(--t1) }
.subnav__link--active { color:var(--rc); border-bottom-color:var(--rc) }
.subnav__link--active svg { opacity:1 }

/* ═══════════════════════════════════════
   LAYOUT PRINCIPAL
═══════════════════════════════════════ */
.main { padding-bottom:40px }
.container { max-width:var(--w); margin:0 auto; padding:0 20px }

/* ═══════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════ */
.section-head {
  display:flex; align-items:center; gap:10px;
  padding:24px 0 14px;
}
.section-title {
  font-family:var(--serif); font-size:1.15rem;
  color:var(--t1); flex:1; letter-spacing:-.01em;
}
.section-count {
  background:var(--bl); color:var(--rc);
  font-size:11.5px; font-weight:700;
  padding:3px 10px; border-radius:50px;
}

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card {
  background:var(--wh);
  border:1px solid var(--bd);
  border-radius:var(--r3);
  box-shadow:var(--sh1);
  overflow:hidden;
}
.card + .card { margin-top:12px }
.card__head {
  display:flex; align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--bd);
}
.card__title {
  font-family:var(--serif); font-size:1.05rem;
  color:var(--t1); letter-spacing:-.01em;
}
.card__sub { font-size:12px; color:var(--t3); margin-top:2px }
.card__body { padding:20px }

/* ═══════════════════════════════════════
   BOUTONS
═══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center;
  justify-content:center; gap:7px;
  padding:12px 22px; border-radius:var(--r2);
  font-size:13.5px; font-weight:600;
  transition:all var(--ease); cursor:pointer;
}
.btn--primary {
  background:var(--rc); color:var(--wh);
  box-shadow:0 3px 14px rgba(21,98,64,.22);
}
.btn--primary:hover { background:var(--dk); transform:translateY(-1px); box-shadow:0 6px 20px rgba(21,98,64,.3) }
.btn--ghost {
  background:var(--wh); color:var(--t2);
  border:1.5px solid var(--bd);
}
.btn--ghost:hover { border-color:var(--bd2); color:var(--rc); background:var(--bl) }
.btn--danger {
  background:#FEF2F2; color:var(--err);
  border:1.5px solid rgba(220,38,38,.18);
}
.btn--danger:hover { background:var(--err); color:var(--wh) }
.btn--lg { padding:14px 28px; font-size:15px }
.btn--sm { padding:8px 14px; font-size:12px; border-radius:var(--r1) }
.btn--pill { border-radius:50px }
.btn--wa { background:#25D366; color:var(--wh); box-shadow:0 3px 14px rgba(37,211,102,.25) }
.btn--wa:hover { background:#20BA58 }

/* ═══════════════════════════════════════
   BADGES
═══════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 9px; border-radius:50px;
}
.badge--green { background:var(--bl); color:var(--rc) }
.badge--gold { background:var(--gd-lt); color:var(--warn) }
.badge--purple { background:#F5F3FF; color:#7C3AED }
.badge--gray { background:#F3F4F6; color:#6B7280 }
.badge--ok { background:#ECFDF5; color:var(--ok) }
.badge--err { background:#FEF2F2; color:var(--err) }

/* ═══════════════════════════════════════
   FORMULAIRES
═══════════════════════════════════════ */
.field {
  display:flex; flex-direction:column; gap:7px;
  margin-bottom:16px;
}
.field:last-child { margin-bottom:0 }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media(max-width:440px) { .field-row { grid-template-columns:1fr } }

.field-label {
  font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--t3);
}
.field-label-opt { font-weight:400; text-transform:none; letter-spacing:0; color:var(--t4) }

.field-wrap {
  display:flex; align-items:center;
  background:var(--bg); border:1.5px solid var(--bd);
  border-radius:var(--r2); overflow:hidden;
  min-height:50px; transition:all var(--ease);
}
.field-wrap:focus-within {
  border-color:var(--mg); background:var(--wh);
  box-shadow:0 0 0 3px rgba(30,122,80,.1);
}
.field-wrap--textarea { min-height:auto; align-items:flex-start }
.field-wrap--select { position:relative }

.field-input {
  flex:1; border:none; outline:none;
  background:transparent; font-size:14px; color:var(--t1);
  padding:12px 16px; min-width:0;
}
.field-input::placeholder { color:var(--t4) }

.field-textarea {
  flex:1; border:none; outline:none;
  background:transparent; font-size:14px; color:var(--t1);
  padding:12px 16px; resize:none; line-height:1.65; width:100%;
}
.field-textarea::placeholder { color:var(--t4) }

.field-select {
  flex:1; border:none; outline:none;
  background:transparent; font-size:14px; color:var(--t1);
  padding:12px 16px 12px 40px;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}
.field-select-icon {
  position:absolute; left:13px; color:var(--t3);
  pointer-events:none; top:50%; transform:translateY(-50%);
}
.field-chevron {
  position:absolute; right:12px; color:var(--t3);
  pointer-events:none; top:50%; transform:translateY(-50%);
}

.field-prefix {
  display:flex; align-items:center; gap:6px;
  padding:0 12px 0 14px;
  border-right:1.5px solid var(--bd);
  font-size:13px; font-weight:600; color:var(--t2);
  white-space:nowrap; flex-shrink:0;
  background:var(--wh); height:100%; min-height:48px;
}
.field-icon { padding:0 10px 0 14px; color:var(--t4); display:flex; align-items:center; flex-shrink:0 }
.field-suffix { padding:0 14px 0 0; font-size:13px; font-weight:600; color:var(--rc); flex-shrink:0 }
.field-count { font-size:11px; color:var(--t4); text-align:right; font-weight:500; margin-top:3px }

.field-hint { font-size:11.5px; color:var(--t3); line-height:1.55 }
.field-err { font-size:11.5px; color:var(--err); font-weight:600; min-height:16px }

/* ═══════════════════════════════════════
   NOTIFICATION PANEL
═══════════════════════════════════════ */
.notif-panel {
  position:fixed; top:var(--topbar-h); right:0; left:0; z-index:400;
  background:var(--wh); border-bottom:1px solid var(--bd);
  box-shadow:var(--sh3); max-height:72vh; overflow-y:auto;
  animation:slide-down .22s var(--ease) both;
}
@keyframes slide-down { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.notif-panel__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--bd);
  font-size:14px; font-weight:700; color:var(--t1);
  position:sticky; top:0; background:var(--wh);
}
.notif-panel__head button {
  color:var(--t3); width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease);
}
.notif-panel__head button:hover { background:var(--bg) }
.notif-list { padding:4px 0 }
.notif-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 20px; transition:background var(--ease); cursor:pointer;
}
.notif-item:hover { background:var(--bg) }
.notif-item--unread { background:rgba(21,98,64,.025) }
.notif-icon { font-size:20px; flex-shrink:0; margin-top:1px }
.notif-item div strong { display:block; font-size:13px; font-weight:600; color:var(--t1); margin-bottom:2px }
.notif-item div p { font-size:12px; color:var(--t3); margin-bottom:3px; line-height:1.45 }
.notif-item div span { font-size:11px; color:var(--t4) }
.notif-overlay { position:fixed; inset:0; z-index:399; background:rgba(0,0,0,.18) }
.notif-placeholder { padding:24px; text-align:center; font-size:13px; color:var(--t4) }

/* ═══════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════ */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:44px 24px;
  background:var(--wh);
  border:1.5px dashed rgba(21,98,64,.15);
  border-radius:var(--r3);
}
.empty-state__icon { font-size:2.8rem; margin-bottom:14px; opacity:.75 }
.empty-state h3 {
  font-family:var(--serif); font-size:1.15rem;
  color:var(--t1); margin-bottom:7px;
}
.empty-state p {
  font-size:13px; color:var(--t3); line-height:1.65;
  max-width:260px; margin:0 auto 20px;
}
.btn-empty-cta {
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 24px; background:var(--rc); color:var(--wh);
  border-radius:50px; font-size:14px; font-weight:600;
  transition:all var(--ease);
  box-shadow:0 4px 16px rgba(21,98,64,.22);
}
.btn-empty-cta:hover { background:var(--dk); transform:translateY(-1px) }

/* ═══════════════════════════════════════
   NAVIGATION BAS (dashboard uniquement)
═══════════════════════════════════════ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  height:var(--bottom-h);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--bd);
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bottom-nav__item {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px;
  font-size:10px; font-weight:500; color:var(--t4);
  transition:all var(--ease); padding:8px 4px;
}
.bottom-nav__item:hover,
.bottom-nav__item--active { color:var(--rc) }
.bottom-nav__item span { font-weight:600 }

@media(min-width:640px) {
  .bottom-nav {
    max-width:520px; left:50%; right:auto;
    transform:translateX(-50%);
    border-radius:20px 20px 0 0;
  }
}

/* ── DESKTOP : la barre mobile du bas disparaît ──
   Sur laptop, la navigation se fait via la barre d'onglets du haut (subnav).
   La bottom-nav est un pattern MOBILE — elle n'a pas sa place sur ordinateur. */
@media(min-width:900px) {
  .bottom-nav { display:none !important; }
  .main { padding-bottom:48px; }   /* plus besoin de compenser la barre */
}

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
#cm-toast {
  position:fixed; bottom:88px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--dk); color:var(--wh);
  padding:11px 22px; border-radius:50px;
  font-size:13px; font-weight:600; z-index:9999;
  opacity:0; pointer-events:none;
  transition:all .28s var(--ease);
  white-space:nowrap; max-width:90vw; text-align:center;
  box-shadow:0 8px 28px rgba(9,28,16,.3);
}

/* ═══════════════════════════════════════
   CHANGE BAR (profil)
═══════════════════════════════════════ */
.change-bar {
  position:sticky; top:var(--topbar-h); z-index:190;
  background:linear-gradient(90deg,#FFFBEB,#FEF3C7);
  border-bottom:1px solid rgba(217,119,6,.2);
  padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-size:13px; font-weight:600; color:#92400E;
  flex-wrap:wrap;
}
.change-bar__actions { display:flex; gap:8px }
.change-bar__actions button {
  padding:7px 15px; border-radius:50px;
  font-size:12px; font-weight:600;
  transition:all var(--ease);
}
.change-bar__actions button:first-child {
  border:1.5px solid rgba(217,119,6,.3); color:#92400E;
}
.change-bar__actions button:first-child:hover { background:rgba(217,119,6,.1) }
.change-bar__save {
  background:var(--rc); color:var(--wh);
  box-shadow:0 2px 8px rgba(21,98,64,.2);
}
.change-bar__save:hover { background:var(--dk) }

/* ═══════════════════════════════════════
   UTILITAIRES
═══════════════════════════════════════ */
.mt-4 { margin-top:4px }
.mt-8 { margin-top:8px }
.mt-12 { margin-top:12px }
.mt-16 { margin-top:16px }
.mt-24 { margin-top:24px }
.mb-16 { margin-bottom:16px }
.mb-24 { margin-bottom:24px }
.text-muted { font-size:12px; color:var(--t3); line-height:1.6 }
.text-tiny { font-size:11px; color:var(--t4) }
.label-upper {
  font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t3);
}

@keyframes fade-in {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes scale-in {
  from { opacity:0; transform:scale(.96) }
  to   { opacity:1; transform:scale(1) }
}