/* =====================================================================
   Aquasalutis — Maquette cliquable (prototype HTML/CSS/JS)
   Responsive : plein écran sur mobile (aucun châssis de téléphone),
   panneau centré sur ordinateur. Charte bleu/violet, police Inter.
   ===================================================================== */

:root {
  --blue:        #0096FF;
  --blue-600:    #007AE6;
  --blue-dark:   #1D4ED8;
  --navy:        #0A2540;
  --navy-deep:   #0B1533;
  --purple:      #7C3AED;
  --purple-600:  #6D28D9;
  --green:       #3CB371;
  --cyan:        #00BCD4;
  --ink:         #0A2540;
  --muted:       #6B7A90;
  --line:        #E8EEF6;
  --bg-soft:     #F3F7FC;
  --white:       #FFFFFF;
  --radius:      22px;
  --radius-sm:   16px;
  --shadow:      0 10px 30px rgba(16, 42, 82, .10);
  --shadow-lg:   0 20px 50px rgba(16, 42, 82, .18);
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bot:    env(safe-area-inset-bottom, 0px);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Icônes SVG : taille = 1em (pilotée par font-size du conteneur), couleur = currentColor */
svg.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.85;
  stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; flex: none; }
svg.ico.fill { fill: currentColor; stroke: none; }

/* --- Calibrage des icônes DANS leurs pastilles : marge régulière autour --- */
/* Pastilles ~44-46px → icône 18px  (≈ 14px de marge de chaque côté) */
.trust .ic svg.ico,
.benefit .ic svg.ico,
.action-row .ic svg.ico,
.type-opt .ic svg.ico { width: 18px; height: 18px; }
/* Pastilles ~40px → icône 16px */
.impact .ic svg.ico,
.menu .mrow .ic svg.ico { width: 16px; height: 16px; }
/* Grosses pastilles ~56-58px → icône 22px */
.pcard .pic svg.ico,
.path .badge svg.ico { width: 22px; height: 22px; }
/* Petits ronds */
.path .go svg.ico { width: 13px; height: 13px; }
.arrow svg.ico { width: 14px; height: 14px; }
.vrow .thumb svg.ico { width: 17px; height: 17px; }
.confirm .check svg.ico { width: 28px; height: 28px; }
.action-row .mini-btn svg.ico { width: 15px; height: 15px; }
.pcover .pill svg.ico { width: 13px; height: 13px; }

html, body { height: 100%; }
body {
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Bandeau explicatif — visible seulement sur grand écran */
.proto-head { display: none; text-align: center; }

/* =====================  CONTENEUR APPLICATION  =====================
   Mobile : plein écran, aucun contour. Desktop : panneau centré.     */
.app {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: #fff;
  overflow: hidden;
}

/* Zone d'écran scrollable */
.screens { position: absolute; inset: 0; }
.screen {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  display: none; padding-bottom: calc(90px + var(--safe-bot)); -webkit-overflow-scrolling: touch;
}
.screen.active { display: block; animation: fade .25s ease; }
.screen[data-tab="none"] { padding-bottom: 0; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes slideBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.screen::-webkit-scrollbar { width: 0; }

.pad { padding: 0 20px; }

.note { display: none; }

/* ---- Typo utilitaires ---- */
.h1 { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.h2 { font-size: 22px; font-weight: 800; line-height: 1.15; }
.h3 { font-size: 16px; font-weight: 700; }
.sub { font-size: 14px; color: var(--muted); line-height: 1.4; }
.center { text-align: center; }
.brand-blue { color: var(--blue); }
.brand-navy { color: var(--navy); }

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: none; cursor: pointer; font-family: inherit;
  font-size: 16px; font-weight: 700; padding: 16px 20px; border-radius: 16px;
  transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary   { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(0,150,255,.35); }
.btn-navy      { background: var(--blue-dark); color: #fff; box-shadow: 0 8px 20px rgba(29,78,216,.35); }
.btn-purple    { background: var(--purple); color: #fff; box-shadow: 0 8px 20px rgba(124,58,237,.35); }
.btn-white     { background: #fff; color: var(--blue); border: 1.5px solid var(--line); }
.btn-white-purple { background:#fff; color: var(--purple); border: 1.5px solid var(--line); }
.btn-ghost     { background: transparent; color: var(--muted); box-shadow: none; }
.btn .arrow { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: grid; place-items: center; font-size: 15px; }

/* ---- Cartes ---- */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }

/* =====================  ÉCRAN A — ONBOARDING  ===================== */
.onboard {
  position: relative; min-height: 100%; display: flex; flex-direction: column;
  padding: calc(40px + var(--safe-top)) 22px 26px;
  background:
    linear-gradient(180deg, rgba(240,248,255,.80) 0%, rgba(240,248,255,0) 26%,
                    rgba(211,233,255,0) 60%, rgba(224,240,255,.92) 100%),
    url('../assets/img/homme.png');
  background-size: 118%; background-position: center bottom; background-repeat: no-repeat;
}
/* Tout le contenu passe AU-DESSUS du fond image */
.onboard > * { position: relative; z-index: 1; }
.logo-wrap { text-align: center; }
.onboard .spacer { flex: 1 1 auto; min-height: 30px; }
.logo-drop {
  width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 26px;
  background: linear-gradient(160deg, #2EA8FF, #0062E6);
  display: grid; place-items: center; color: #fff; font-size: 42px; font-weight: 800;
  box-shadow: 0 14px 30px rgba(0,120,230,.4);
}
/* Logo image (remplace le « A ») : tuile blanche, image détourée à l'intérieur */
.logo-drop.has-img { background: #fff; overflow: hidden; box-shadow: 0 12px 28px rgba(0,90,170,.20); }
.logo-drop.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-wrap .logo-drop.has-img { width: 104px; height: 104px; border-radius: 26px; }
.logo-wrap .logo-drop.has-img img { padding: 4px; }
.home-brand .mini.has-img { background: #fff; overflow: hidden; }
.home-brand .mini.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
[data-theme="dark"] .logo-drop.has-img, [data-theme="dark"] .home-brand .mini.has-img { background: #fff; }
.logo-name { font-size: 38px; font-weight: 800; color: #0B63C6; letter-spacing: -1px; }
.logo-tag  { font-size: 14px; color: #2E7BC4; font-weight: 600; margin-top: 2px; }
.onboard .spacer { flex: 1; min-height: 40px; }
.trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-radius: var(--radius); padding: 18px 12px; box-shadow: var(--shadow);
}
.trust .item { text-align: center; }
.trust .ic { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center;
  background: #E5F3FF; color: var(--blue); font-size: 20px; }
.trust .t { font-size: 13px; font-weight: 700; color: var(--navy); }
.trust .d { font-size: 10px; color: var(--muted); }
.onboard .actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

/* =====================  ÉCRAN B — ACCUEIL  ===================== */
.home-hero {
  background: linear-gradient(180deg, #EAF6FF, #D3ECFF);
  padding: calc(30px + var(--safe-top)) 20px 26px; position: relative; text-align: center;
}
.home-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; color: var(--blue); font-size: 18px; }
.home-brand .mini { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(160deg,#2EA8FF,#0062E6); color:#fff; display:grid; place-items:center; font-size:16px; }
.bell { position: absolute; top: calc(28px + var(--safe-top)); right: 22px; font-size: 20px; }
.bell .dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; background: #FF3B30; border-radius: 50%; }
.home-title { font-size: 26px; font-weight: 800; color: var(--navy); margin-top: 14px; line-height: 1.2; }
.video {
  margin: 18px 20px 0; height: 170px; border-radius: 18px; background: #0b0b0b;
  display: grid; place-items: center; color: #fff; position: relative; box-shadow: var(--shadow);
}
.video .play { width: 58px; height: 58px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; font-size: 22px; }
.video span.lbl { position: absolute; bottom: 14px; font-size: 13px; }
.benefits-wrap { background: #fff; margin-top: 18px; border-radius: 26px 26px 0 0; padding: 22px 20px 10px; }
.benefits-wrap h3 { text-align: center; font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 16px; }
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.benefit { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 16px; }
.benefit .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; margin-bottom: 10px; }
.benefit .t { font-weight: 700; font-size: 14px; color: var(--navy); }
.benefit .d { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* =====================  ÉCRAN C — OBJECTIF / PARCOURS  ===================== */
.objectif-top {
  background: linear-gradient(180deg, #0B1533, #14224A);
  color: #fff; padding: calc(32px + var(--safe-top)) 22px 30px;
}
.objectif-top .home-brand { color: #7Fc0ff; justify-content: flex-start; }
.objectif-top h1 { font-size: 26px; font-weight: 800; margin-top: 16px; }
.objectif-top p { color: #A9BCE0; font-size: 13px; margin-top: 6px; }
.paths { padding: 20px; display: flex; flex-direction: column; gap: 16px; margin-top: -14px; }
.path {
  border-radius: var(--radius); padding: 22px; cursor: pointer; position: relative;
  transition: transform .12s ease; box-shadow: var(--shadow); min-height: 128px;
}
.path:active { transform: scale(.98); }
.path h3 { font-size: 20px; font-weight: 800; line-height: 1.1; }
.path p  { font-size: 12.5px; margin-top: 10px; max-width: 74%; }
.path .badge { position: absolute; top: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; }
.path .go { position: absolute; bottom: 20px; right: 22px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }
.path.buy    { background: linear-gradient(140deg,#12A0FF,#0067E0); color: #fff; }
.path.buy .badge { background: rgba(255,255,255,.2); color:#fff; }
.path.buy .go { background: #fff; color: var(--blue); }
.path.distrib { background: #E7F0FF; color: var(--blue-dark); }
.path.distrib .badge { background: var(--blue-dark); color: #fff; }
.path.distrib .go { background: #fff; color: var(--blue-dark); }
.path.invest { background: #F1EBFF; color: var(--purple-600); }
.path.invest .badge { background: var(--purple); color: #fff; }
.path.invest .go { background: #fff; color: var(--purple); }

/* =====================  COUVERTURES DE PARCOURS (image de fond)  ===================== */
.pcover {
  position: relative; min-height: 452px; color: #fff; overflow: hidden;
  padding: calc(30px + var(--safe-top)) 22px 76px; text-align: center;
  background-size: cover; background-repeat: no-repeat; background-position: center 60%;
}
.pcover::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 50%; z-index: 0;
}
.pcover.buy     { background-image: url('../assets/img/homme.png'); }
.pcover.distrib { background-image: url('../assets/img/femme.png'); }
.pcover.invest  { background-image: url('../assets/img/femme-investisseur.png'); }
.pcover.buy::before     { background: linear-gradient(180deg, rgba(0,105,224,.92) 20%, rgba(0,105,224,0)); }
.pcover.distrib::before { background: linear-gradient(180deg, rgba(18,48,143,.90) 20%, rgba(18,48,143,0)); }
.pcover.invest::before  { background: linear-gradient(180deg, rgba(76,29,149,.92) 20%, rgba(76,29,149,0)); }
.pcover > * { position: relative; z-index: 1; }
.pcover .pill { display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.22); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pcover h1 { font-size: 30px; font-weight: 800; margin-top: 16px; line-height: 1.08; text-shadow: 0 2px 10px rgba(0,0,0,.15); }
.pcover p  { font-size: 13.5px; opacity: .95; margin-top: 10px; text-shadow: 0 1px 6px rgba(0,0,0,.2); }

.p-sheet { background: #fff; margin: -50px 16px 0; border-radius: 24px; padding: 8px 6px; box-shadow: var(--shadow-lg); position: relative; z-index: 2; }

/* Carte d'appel à l'action (bas des parcours distrib / invest) */
.cta-card { padding: 20px; color: #fff; }
.cta-card.distrib { background: var(--blue-dark); }
.cta-card.invest  { background: var(--purple); }
.cta-card .cta-t { font-weight: 800; font-size: 17px; }
.cta-card .cta-d { font-size: 12.5px; opacity: .9; margin-top: 6px; }

/* Ligne d'action (call, webinaire, réunion, vidéo…) */
.action-row { display: flex; gap: 14px; padding: 18px 16px; align-items: flex-start; border-bottom: 1px solid var(--line); }
.action-row:last-child { border-bottom: none; }
.action-row .ic { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: #E5F3FF; color: var(--blue); display: grid; place-items: center; font-size: 20px; }
.action-row.pp .ic { background: #EEE7FF; color: var(--purple); }
.action-row .body { flex: 1; }
.action-row .body .t { font-weight: 700; font-size: 15px; color: var(--navy); }
.action-row .body .d { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.action-row .mini-btn { margin-top: 12px; display: inline-flex; gap: 8px; align-items: center; background: var(--blue); color: #fff; border: none; font-family: inherit;
  font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 12px; cursor: pointer; }
.action-row .mini-btn svg.ico { width: 15px; height: 15px; }
.action-row.pp .mini-btn { background: var(--purple); }
.action-row .chev { color: var(--muted); font-size: 18px; align-self: center; }

/* Vidéo list (distrib / invest) */
.vrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.vrow:last-child { border: none; }
.vrow[data-go] { cursor: pointer; }
.vrow .thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 18px; position: relative; }
.vrow.d .thumb { background: var(--blue-dark); }
.vrow.i .thumb { background: var(--purple); }
.vrow .thumb .dur { position: absolute; bottom: 3px; right: 3px; font-size: 8px; background: rgba(0,0,0,.55); padding: 1px 4px; border-radius: 6px; }
.vrow .t { font-weight: 700; font-size: 14px; color: var(--navy); }
.vrow .d { font-size: 11px; color: var(--muted); }
.vrow .lock { margin-left: auto; color: #C2CDDD; font-size: 16px; }

/* =====================  RDV / CALENDRIER  ===================== */
.section-hd { padding: 20px 20px 6px; }
.section-hd h2 { font-size: 20px; font-weight: 800; color: var(--navy); }
.section-hd p  { font-size: 13px; color: var(--muted); margin-top: 4px; }
.block { margin: 12px 16px; padding: 18px; }
.block > .lab { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }

.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.type-opt { border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; text-align: center; cursor: pointer; position: relative; transition: border-color .12s; }
.type-opt.on { border-color: var(--blue); background: #F4FAFF; }
.type-opt .ic { width: 44px; height: 44px; border-radius: 50%; background: #E5F3FF; color: var(--blue); display: grid; place-items: center; font-size: 20px; margin: 0 auto 8px; }
.type-opt .t { font-size: 13px; font-weight: 700; color: var(--navy); }
.type-opt .d { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.type-opt .tick { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; display: none; place-items: center; font-size: 11px; }
.type-opt.on .tick { display: grid; }

.cal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cal .month { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 10px; }
.cal .month button { border: none; background: #EEF4FC; width: 26px; height: 26px; border-radius: 8px; color: var(--blue); cursor: pointer; font-size: 13px; }
.dow, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; min-width: 0; }
.dow span { font-size: 9px; color: var(--muted); font-weight: 600; }
.days button { border: none; background: none; padding: 0; font-size: 12px; color: var(--ink); border-radius: 50%; cursor: pointer; aspect-ratio: 1; min-width: 0; display: grid; place-items: center; }
.days button.mute { color: #C2CDDD; }
.days button.sel { background: var(--blue); color: #fff; font-weight: 700; }
.slots { display: flex; flex-direction: column; gap: 8px; }
.slots .sh { font-size: 11px; color: var(--muted); font-weight: 600; }
.slot { border: 1.5px solid var(--line); border-radius: 12px; padding: 9px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.slot.on { background: var(--blue); color: #fff; border-color: var(--blue); }

.recap .lab { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.recap-grid .ri { display: flex; gap: 10px; }
.recap-grid .ri .ic { color: var(--blue); font-size: 16px; margin-top: 2px; }
.recap-grid .ri .k { font-size: 10px; color: var(--muted); }
.recap-grid .ri .v { font-size: 12.5px; font-weight: 700; color: var(--navy); }

/* ---- Écrans "Réserver un call" distributeur / investisseur ---- */
.rdv-hero { position: relative; padding: calc(20px + var(--safe-top)) 20px 16px; }
.rdv-hero.distrib { background: linear-gradient(180deg, #E9F1FF, #F8FBFF); }
.rdv-hero.invest  { background: linear-gradient(180deg, #F1EAFF, #FAF7FF); }
.rdv-hero .back { width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--shadow);
  display: grid; place-items: center; cursor: pointer; color: var(--navy); }
.rdv-hero .back svg.ico { transform: scaleX(-1); width: 17px; height: 17px; }
.hero-row { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.hero-row h2 { font-size: 20px; font-weight: 800; color: var(--navy); line-height: 1.15; }
.hero-row p { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.42; }
.accent-d { color: var(--blue-dark); }
.accent-p { color: var(--purple); }
.rdv-avatar { width: 88px; height: 88px; flex: none; border-radius: 22px; object-fit: cover;
  object-position: center 46%; box-shadow: var(--shadow); }
.sh-sub { font-weight: 400; color: #9AA8BD; font-size: 10px; }

/* Récapitulatif en liste verticale */
.recap-list .ri { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.recap-list .ri:last-child { border-bottom: none; }
.recap-list .ri .ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #EAF2FF;
  color: var(--blue); display: grid; place-items: center; font-size: 16px; }
.recap-list .ri .k { font-size: 10.5px; color: var(--muted); }
.recap-list .ri .v { font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 1px; line-height: 1.3; }
.rdv-page.invest .recap-list .ri .ic { background: #F0EAFF; color: var(--purple); }

/* Encart "Bon à savoir" */
.note-box { margin: 4px 16px 0; padding: 14px; background: #EEF5FF; border-radius: 14px;
  display: flex; gap: 10px; align-items: flex-start; }
.rdv-page.invest .note-box { background: #F4EEFF; }
.note-box .ic { color: var(--blue); font-size: 18px; flex: none; margin-top: 1px; }
.rdv-page.invest .note-box .ic { color: var(--purple); }
.note-box .t { font-weight: 700; font-size: 13px; color: var(--navy); }
.note-box p { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.42; }

/* Créneaux + jour sélectionné en violet (investisseur) */
.slot.on[data-accent="purple"] { background: var(--purple); border-color: var(--purple); }

/* Espace au-dessus des boutons de confirmation + respiration en bas */
.rdv-page .pad { margin-top: 22px; }
.rdv-page .pad .btn-ghost { margin-top: 4px; }
.rdv-page { padding-bottom: calc(110px + var(--safe-bot)); }
.rdv-hero.buy { background: linear-gradient(180deg, #E9F1FF, #F8FBFF); }

/* ---- Liste des webinaires ---- */
.wbn-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px;
  background: var(--bg-soft); margin-bottom: 10px; }
.wbn-item.on { background: #EAF3FF; box-shadow: inset 0 0 0 1.5px var(--blue); }
.wbn-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--blue);
  display: grid; place-items: center; }
.wbn-ic svg.ico { width: 20px; height: 20px; }
.wbn-body { flex: 1; min-width: 0; }
.wbn-title { font-weight: 700; font-size: 14px; color: var(--navy); }
.wbn-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.wbn-meta svg.ico { width: 12px; height: 12px; }
.wbn-desc { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.wbn-act { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wbn-btn { background: var(--blue); color: #fff; border: none; font-family: inherit; font-weight: 700;
  font-size: 12px; padding: 8px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.wbn-link { font-size: 11px; color: var(--blue); font-weight: 600; cursor: pointer; white-space: nowrap; }
.see-all { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px;
  font-weight: 700; color: var(--blue); padding: 12px 0 4px; cursor: pointer; }
.see-all svg.ico { width: 14px; height: 14px; }

/* Carte d'accès « Programme — Webinaires » (Vue Admin) */
.prog-card { display: flex; align-items: center; gap: 13px; cursor: pointer; }
.prog-card:active { transform: scale(.99); }
.prog-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), #0072d6); color: #fff; }
.prog-ic svg.ico { width: 22px; height: 22px; }
.prog-body { flex: 1; min-width: 0; }
.prog-t { font-weight: 800; font-size: 14.5px; color: var(--navy); }
.prog-d { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.prog-arr { width: 18px; height: 18px; color: var(--muted); flex: none; }

/* Onglets Webinaires / Meetings du Programme */
.prog-tabs { display: flex; gap: 8px; padding: 0 20px; margin-bottom: 4px; }
.prog-tab { flex: 1; border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 10px 16px; font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.prog-tab.on { background: var(--blue); border-color: var(--blue); color: #fff; }
[data-theme="dark"] .prog-tab { background: #10192A; }

/* Gestion du programme : liste admin des webinaires */
.awb-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.awb-item:last-child { border-bottom: none; }
.awb-item.is-past { opacity: .55; }
.awb-body { flex: 1; min-width: 0; }
.awb-title { font-weight: 700; font-size: 14px; color: var(--navy); }
.awb-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.awb-meta svg.ico { width: 13px; height: 13px; }
.awb-tag { background: var(--bg-soft); color: var(--muted); font-weight: 700; font-size: 10px;
  padding: 1px 7px; border-radius: 999px; }
.awb-del { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--line);
  background: transparent; color: #d64545; display: grid; place-items: center; cursor: pointer; }
.awb-del:active { background: #fdecec; }
.awb-del svg.ico { width: 17px; height: 17px; }

/* ---- Type de réunion (radios) ---- */
.radio-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line);
  border-radius: 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.radio-opt:last-child { margin-bottom: 0; }
.radio-opt.on { border-color: var(--blue); background: #F4FAFF; }
.radio-opt .ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #EAF2FF;
  color: var(--blue); display: grid; place-items: center; }
.radio-opt .ic svg.ico { width: 19px; height: 19px; }
.radio-opt .ro-body { flex: 1; min-width: 0; }
.radio-opt .ro-body .t { font-weight: 700; font-size: 14px; color: var(--navy); }
.radio-opt .ro-body .d { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.radio-opt .radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #CBD5E1; position: relative; }
.radio-opt.on .radio { border-color: var(--blue); }
.radio-opt.on .radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--blue); }

/* =====================  CONFIRMATION  ===================== */
.confirm { text-align: center; padding: calc(50px + var(--safe-top)) 24px 20px; }
.confirm .check { width: 68px; height: 68px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 34px; margin: 0 auto 18px; box-shadow: 0 12px 28px rgba(0,150,255,.4); }
.confirm.pp .check { background: var(--purple); box-shadow: 0 12px 28px rgba(124,58,237,.4); }
.confirm h1 { font-size: 26px; font-weight: 800; color: var(--navy); }
.confirm p  { font-size: 14px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.confirm .actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; text-align: left; }
.info-box { background: #F4FAFF; border-radius: 16px; padding: 16px; margin-top: 20px; text-align: left; }
.info-box .hd { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 10px; }
.info-box li { list-style: none; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; padding: 4px 0; }
.info-box li::before { content: "✓"; color: var(--blue); font-weight: 800; }
.confirm.pp .info-box li::before { color: var(--purple); }
/* Récapitulatif dans la page de confirmation */
.confirm-recap { margin-top: 22px; text-align: left; padding: 18px; }
.confirm-recap .lab { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.confirm.pp .recap-list .ri .ic { background: #F0EAFF; color: var(--purple); }
/* Ligne "Besoin d'aide ?" */
.help-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px;
  background: #F4FAFF; border-radius: 14px; text-align: left; }
.confirm.pp .help-row { background: #F6F2FF; }
.help-row .ic { width: 38px; height: 38px; border-radius: 50%; background: #EAF2FF; color: var(--blue);
  display: grid; place-items: center; font-size: 18px; flex: none; }
.confirm.pp .help-row .ic { background: #F0EAFF; color: var(--purple); }
.help-row .t { font-weight: 700; font-size: 13px; color: var(--navy); }
.help-row .d { font-size: 11px; color: var(--muted); margin-top: 1px; }
.help-row .chev { margin-left: auto; color: #C7D2E0; font-size: 15px; }

/* =====================  PROFIL  ===================== */
.profile-hero { background: linear-gradient(180deg,#EAF4FF,#DCEBFF); padding: calc(30px + var(--safe-top)) 20px 24px; }
.profile-hero h1 { font-size: 26px; font-weight: 800; color: var(--navy); }
.profile-hero .sub { margin-top: 4px; }
.pcard { display: flex; align-items: center; gap: 14px; margin: 18px 20px 0; padding: 18px; }
.pcard .pic { width: 58px; height: 58px; border-radius: 50%; background: #E5F3FF; color: var(--blue); display: grid; place-items: center; font-size: 26px; }
.pcard .nm { font-weight: 800; font-size: 16px; color: var(--navy); }
.pcard .em { font-size: 12px; color: var(--muted); }
.pcard .since { display: inline-block; margin-top: 6px; font-size: 10px; color: var(--blue); background: #E5F3FF; padding: 2px 8px; border-radius: 999px; }
.impact { margin: 16px 20px 0; padding: 18px; background: #F4FAFF; border-radius: var(--radius); }
.impact .lab { font-weight: 800; color: var(--navy); font-size: 15px; margin-bottom: 14px; }
.impact .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; text-align: center; }
.impact .ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; margin: 0 auto 8px; font-size: 18px; }
.impact .num { font-size: 18px; font-weight: 800; color: var(--navy); }
.impact .cap { font-size: 10px; color: var(--muted); }
.impact .delta { font-size: 9px; color: var(--green); font-weight: 700; margin-top: 3px; }
.menu { margin: 16px 20px 0; }
.menu .mrow { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--line); }
.menu .mrow:last-child { border: none; }
.menu .mrow .ic { width: 40px; height: 40px; border-radius: 12px; background: #F4FAFF; color: var(--blue); display: grid; place-items: center; font-size: 18px; }
.menu .mrow .t { font-weight: 700; font-size: 14px; color: var(--navy); }
.menu .mrow .d { font-size: 11px; color: var(--muted); }
.menu .mrow .chev { margin-left: auto; color: #C2CDDD; }
.sponsor { margin: 16px 20px 0; padding: 18px; background: linear-gradient(120deg,#E9F4FF,#DCEBFF); border-radius: var(--radius); display: flex; align-items: center; gap: 14px; }
.sponsor .em { font-size: 40px; }
.sponsor .t { font-weight: 800; color: var(--navy); font-size: 15px; }
.sponsor .d { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* =====================  MES FONTAINES  ===================== */
.fountains-hero {
  position: relative; overflow: hidden; min-height: 210px;
  background: linear-gradient(180deg, #E8F3FF, #F5FAFF);
  padding: calc(30px + var(--safe-top)) 20px 22px;
}
.fountains-hero h1 { font-size: 28px; font-weight: 800; color: var(--navy); letter-spacing: -.5px; position: relative; z-index: 1; max-width: 60%; line-height: 1.1; }
.fountains-hero .sub { max-width: 56%; margin-top: 8px; position: relative; z-index: 1; }
.fountains-hero .fh-char {
  position: absolute; top: 0; right: -6px; height: 100%; width: 220px;
  object-fit: cover; object-position: center 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
          mask-image: linear-gradient(90deg, transparent, #000 34%);
}

.search-bar { display: flex; gap: 12px; padding: 0 20px; margin-top: 16px; }
.search-input { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff;
  border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); }
.search-input .ic { color: #9AA8BD; font-size: 18px; }
.search-input input { flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--ink); }
.filter-btn { width: 54px; border: none; border-radius: 16px; background: #fff; box-shadow: var(--shadow);
  display: grid; place-items: center; color: var(--blue); font-size: 20px; cursor: pointer; }

.fountains-hd { display: flex; align-items: center; gap: 10px; padding: 0 20px; margin-top: 24px; }
.fountains-hd h2 { font-size: 19px; font-weight: 800; color: var(--navy); }
.fountains-hd .count { background: var(--blue); color: #fff; font-size: 12px; font-weight: 700;
  min-width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; padding: 0 7px; }
.fountains-hd .add-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: #E7F1FF; color: var(--blue); border: none; font-family: inherit; font-weight: 700;
  font-size: 13px; padding: 9px 15px; border-radius: 12px; cursor: pointer; }
.fountains-hd .add-btn svg.ico { width: 16px; height: 16px; }

.fountain-card { display: flex; gap: 14px; margin: 14px 20px 0; padding: 16px; background: #fff;
  border-radius: 20px; box-shadow: var(--shadow); }
.fc-info { flex: 1; min-width: 0; }
.fc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 5px 11px 5px 8px; border-radius: 999px; }
.fc-status svg.ico { width: 14px; height: 14px; }
.fc-status.ok { background: #E5F1FF; color: var(--blue); }
.fc-status.maint { background: #FFF2DC; color: #D98A00; }
.fc-name { font-size: 17px; font-weight: 800; color: var(--navy); margin: 9px 0 8px; }
.fc-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.fc-line .ic { color: var(--blue); font-size: 15px; flex: none; }
.fc-media { width: 118px; flex: none; position: relative; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center; }
.fc-media.park   { background: linear-gradient(160deg, #BFE3FF, #9FD68F); }
.fc-media.school { background: linear-gradient(160deg, #BFE3FF, #E7C36B); }
.fc-media.city   { background: linear-gradient(160deg, #BFE3FF, #C3B7E8); }
.fc-media .fountain-ph { width: 46px; height: 46px; color: #fff; opacity: .92; stroke-width: 1.6; }
.fc-go { position: absolute; bottom: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; color: var(--blue);
  border: none; cursor: pointer; }
.fc-go svg.ico { width: 15px; height: 15px; }

.control-card { margin: 18px 20px 0; padding: 18px; border-radius: 20px;
  background: linear-gradient(120deg, #E9F4FF, #DCEBFF); display: flex; align-items: center; gap: 14px; }
.control-card .mascot { width: 56px; height: 56px; flex: none; border-radius: 50%; background: #fff;
  display: grid; place-items: center; color: var(--blue); }
.control-card .mascot svg.ico { width: 30px; height: 30px; }
.control-card .cc-body { flex: 1; }
.control-card .t { font-weight: 800; color: var(--navy); font-size: 16px; }
.control-card .d { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.control-card .go { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow); display: grid; place-items: center; color: var(--blue); }
.control-card .go svg.ico { width: 16px; height: 16px; }
.fountain-card { cursor: pointer; }

/* ---- Détail d'une fontaine ---- */
.fountain-detail-page { padding-bottom: calc(100px + var(--safe-bot)); }
.fd-hero { position: relative; height: 220px; display: grid; place-items: center; }
.fd-hero.park { background: linear-gradient(160deg, #BFE3FF, #9FD68F); }
.fd-back { position: absolute; top: calc(16px + var(--safe-top)); left: 16px; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--navy); cursor: pointer; }
.fd-back svg.ico { transform: scaleX(-1); width: 17px; height: 17px; }
.fd-hero .fountain-ph { width: 82px; height: 82px; color: #fff; opacity: .95; stroke-width: 1.5; }
.fd-status { position: absolute; bottom: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--blue); }
.fd-status svg.ico { width: 14px; height: 14px; }
.fd-body { padding: 20px; margin-top: -14px; background: #fff; border-radius: 22px 22px 0 0; position: relative; }
.fd-body h1 { font-size: 24px; font-weight: 800; color: var(--navy); }
.fd-loc { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-top: 6px; }
.fd-loc svg.ico { width: 15px; height: 15px; color: var(--blue); }
.fd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.fd-stat { background: var(--bg-soft); border-radius: 16px; padding: 16px; }
.fd-stat .ic { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--blue);
  display: grid; place-items: center; margin-bottom: 8px; }
.fd-stat .ic svg.ico { width: 18px; height: 18px; }
.fd-stat b { display: block; font-size: 19px; font-weight: 800; color: var(--navy); }
.fd-stat span { font-size: 11px; color: var(--muted); }
.fd-info { margin-top: 16px; padding: 4px 16px; }
.fd-row { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted); }
.fd-row:last-child { border-bottom: none; }
.fd-row svg.ico { width: 17px; height: 17px; color: var(--blue); flex: none; }
.fd-row b { margin-left: auto; color: var(--navy); font-weight: 700; text-align: right; }
.fountain-detail-page .pad { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }


/* =====================  LECTEUR VIDÉO  ===================== */
.video-page { padding-bottom: calc(100px + var(--safe-bot)); }
.video-player { position: relative; height: 280px; background: #0b0b0b; overflow: hidden; }
.vp-bg { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.vp-back { position: absolute; top: calc(16px + var(--safe-top)); left: 16px; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--navy); cursor: pointer; }
.vp-back svg.ico { transform: scaleX(-1); width: 17px; height: 17px; }
.vp-topact { position: absolute; top: calc(16px + var(--safe-top)); right: 16px; display: flex; gap: 8px; }
.vp-topact span { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: grid; place-items: center; color: var(--navy); cursor: pointer; }
.vp-topact svg.ico { width: 16px; height: 16px; }
.vp-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.28); backdrop-filter: blur(4px); display: grid; place-items: center; color: #fff; }
.vp-play svg.ico { width: 26px; height: 26px; }
.vp-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; font-size: 11px; }
.vp-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); position: relative; }
.vp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 18%; border-radius: 2px; background: #fff; }
.vp-bar svg.ico { width: 16px; height: 16px; }

.vp-body { padding: 18px 20px; }
.vp-title { font-size: 19px; font-weight: 800; color: var(--navy); }
.vp-tag { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.vp-badge { font-weight: 700; font-size: 10px; padding: 3px 9px; border-radius: 999px; }
.video-page.distrib .vp-badge { background: #E7F0FF; color: var(--blue-dark); }
.video-page.invest  .vp-badge { background: #EEE7FF; color: var(--purple); }
.vp-desc { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.vp-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 16px; }
.vp-stats > div { background: var(--bg-soft); border-radius: 12px; padding: 12px 6px; text-align: center; }
.vp-stats .s-top { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 14px; color: var(--navy); }
.vp-stats .s-top svg.ico { width: 15px; height: 15px; color: var(--blue); }
.video-page.invest .vp-stats .s-top svg.ico { color: var(--purple); }
.vp-stats .s-cap { display: block; font-size: 9.5px; color: var(--muted); margin-top: 3px; }
.vp-actions { display: flex; gap: 10px; margin-top: 14px; }
.vp-actions button { flex: 1; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 4px;
  font-family: inherit; font-weight: 700; font-size: 12px; color: var(--navy); display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.vp-actions svg.ico { width: 15px; height: 15px; color: var(--blue); }
.video-page.invest .vp-actions svg.ico { color: var(--purple); }

.vp-list { margin-top: 22px; }
.vp-list-title { font-weight: 800; font-size: 15px; color: var(--navy); margin-bottom: 10px; }
.vlist-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; margin-bottom: 8px; }
.video-page.distrib .vlist-item.on { background: #EEF4FF; }
.video-page.invest  .vlist-item.on { background: #F3EEFF; }
.vlist-thumb { width: 52px; height: 52px; border-radius: 12px; flex: none; display: grid; place-items: center;
  color: #fff; position: relative; }
.video-page.distrib .vlist-thumb { background: var(--blue-dark); }
.video-page.invest  .vlist-thumb { background: var(--purple); }
.vlist-thumb svg.ico { width: 16px; height: 16px; }
.vlist-thumb .dur { position: absolute; bottom: 3px; right: 3px; font-size: 8px; background: rgba(0,0,0,.55); padding: 1px 4px; border-radius: 6px; }
.vlist-body { flex: 1; min-width: 0; }
.vlist-body .t { font-weight: 700; font-size: 13px; color: var(--navy); line-height: 1.25; }
.vlist-body .d { font-size: 11px; color: var(--muted); margin-top: 2px; }
.vlist-item .mark { margin-left: auto; flex: none; }
.vlist-item .mark.done { color: var(--blue); }
.video-page.invest .vlist-item .mark.done { color: var(--purple); }
.vlist-item .lock { margin-left: auto; color: #C2CDDD; flex: none; }
.vlist-item .mark svg.ico, .vlist-item .lock svg.ico { width: 16px; height: 16px; }
.vp-cta { margin-top: 22px; }
.join-live { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px;
  font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.join-live svg.ico { width: 15px; height: 15px; }

/* =====================  VISIO EN COURS D'APPEL  ===================== */
.call-screen { padding: calc(14px + var(--safe-top)) 16px 34px; }
.call-screen.distrib { background: linear-gradient(180deg, #EAF3FF, #F7FBFF); color: var(--navy); }
.call-screen.invest  { background: linear-gradient(180deg, #2A1B57, #160B34); color: #fff; }

.call-top { display: flex; align-items: center; gap: 12px; }
.call-back, .ct-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.call-screen.distrib .call-back, .call-screen.distrib .ct-ic { background: #fff; box-shadow: var(--shadow); color: var(--navy); }
.call-screen.invest  .call-back, .call-screen.invest  .ct-ic { background: rgba(255,255,255,.14); color: #fff; }
.call-back svg.ico { transform: scaleX(-1); width: 17px; height: 17px; }
.ct-ic svg.ico { width: 16px; height: 16px; }
.call-hd { flex: 1; text-align: center; }
.call-name-top { font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.call-timer { font-size: 12px; opacity: .7; margin-top: 2px; }
.call-top-act { display: flex; gap: 8px; }

.call-info { margin-top: 14px; padding: 12px 16px; border-radius: 14px; font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.call-screen.distrib .call-info { background: #DCEAFF; color: var(--blue-dark); }
.call-screen.invest  .call-info { background: rgba(255,255,255,.10); color: #D9CBFF; }
.call-info span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.call-info svg.ico { width: 14px; height: 14px; }
.call-subject { width: 100%; font-weight: 700; opacity: .9; }

.call-video { position: relative; margin-top: 14px; border-radius: 20px; overflow: hidden; height: 320px; background: #0b0b0b; }
.cv-main { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.cv-pip { position: absolute; top: 12px; left: 12px; width: 76px; height: 100px; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255,255,255,.6); }
.cv-pip img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.cv-pip-lbl { position: absolute; bottom: 4px; left: 5px; font-size: 9px; color: #fff; display: inline-flex; align-items: center; gap: 3px; }
.cv-pip-lbl svg.ico { width: 9px; height: 9px; }
.cv-name { position: absolute; left: 14px; bottom: 14px; color: #fff; font-weight: 700; font-size: 14px;
  text-shadow: 0 1px 6px rgba(0,0,0,.55); display: flex; flex-direction: column; }
.cv-name span { font-size: 11px; font-weight: 500; opacity: .85; }
.cv-full { position: absolute; right: 14px; bottom: 14px; color: #fff; }
.cv-full svg.ico { width: 18px; height: 18px; }

.call-controls { display: flex; justify-content: space-between; gap: 6px; margin-top: 16px; padding: 0 2px; }
.cc-btn { flex: 1; background: none; border: none; font-family: inherit; cursor: pointer; display: flex;
  flex-direction: column; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: inherit; }
.cc-ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; }
.call-screen.distrib .cc-ic { background: var(--blue); color: #fff; }
.call-screen.invest  .cc-ic { background: rgba(255,255,255,.16); color: #fff; }
.cc-ic svg.ico { width: 22px; height: 22px; }
.call-screen .cc-ic.hang { background: #EF4444; color: #fff; }

.call-prep { margin-top: 18px; padding: 18px; }
.call-screen.invest .call-prep { background: rgba(255,255,255,.08); box-shadow: none; }
.cp-title { font-weight: 800; font-size: 15px; }
.cp-sub { font-size: 11.5px; opacity: .7; margin-top: 4px; }
.cp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
.cp-item { text-align: center; }
.cp-item .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto 8px; }
.call-screen.distrib .cp-item .ic { background: #EAF2FF; color: var(--blue); }
.call-screen.invest  .cp-item .ic { background: rgba(255,255,255,.14); color: #fff; }
.cp-item .ic svg.ico { width: 18px; height: 18px; }
.cp-item b { display: block; font-size: 11.5px; }
.cp-item span { font-size: 10px; opacity: .65; display: block; margin-top: 2px; line-height: 1.3; }

.call-recap-link { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 14px 16px;
  border-radius: 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.call-screen.distrib .call-recap-link { background: #EAF2FF; color: var(--blue); }
.call-screen.invest  .call-recap-link { background: rgba(255,255,255,.10); color: #fff; }
.call-recap-link svg.ico { width: 15px; height: 15px; }
.call-recap-link .chev { margin-left: auto; }

/* =====================  BOTTOM NAV  ===================== */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5,1fr); align-items: center;
  height: calc(72px + var(--safe-bot)); padding-bottom: var(--safe-bot);
}
.tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9.5px; color: var(--muted); cursor: pointer; font-weight: 600; }
.tabbar .tab .i { font-size: 20px; }
.tabbar .tab.on { color: var(--blue); }

/* En-tête avec bouton retour */
.topbar { display: flex; align-items: center; gap: 12px; padding: calc(20px + var(--safe-top)) 20px 6px; }
.topbar .back { width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; font-size: 17px; color: var(--navy); }
.topbar .back svg.ico { transform: scaleX(-1); }               /* chevron vers la gauche */
.cal .month button:first-child svg.ico { transform: scaleX(-1); } /* mois précédent = gauche */
.menu .mrow .chev { font-size: 15px; color: #C7D2E0; stroke-width: 2.5; }
.sponsor .em { color: var(--blue); font-size: 34px; }
.topbar .ttl { font-weight: 800; color: var(--navy); font-size: 17px; }

/* =====================  RESPONSIVE : PANNEAU CENTRÉ SUR DESKTOP  ===================== */
@media (min-width: 620px) {
  body {
    background: #E7EDF5;
    background-image: radial-gradient(1000px 500px at 50% -10%, #d9e5f4, #e7edf5);
    justify-content: center;
    padding: 22px 12px;
    gap: 14px;
  }
  .proto-head { display: block; max-width: 430px; }
  .proto-head h1 { font-size: 19px; font-weight: 800; color: var(--navy); }
  .proto-head p  { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
  .proto-head .tag { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--blue); background: #E5F3FF; padding: 4px 10px; border-radius: 999px; }
  .app {
    width: 430px; height: min(884px, calc(100vh - 150px));
    border-radius: 30px; box-shadow: var(--shadow-lg);
  }
  .note { display: block; font-size: 11px; color: var(--muted); text-align: center; max-width: 430px; }
}

/* =====================================================================
   ÉTATS INTERACTIFS : overlays, sheets, toasts, switches, desktop
   ===================================================================== */

/* ---- Overlay + bottom-sheets ---- */
.overlay { position: absolute; inset: 0; z-index: 100; display: flex; align-items: flex-end; }
.overlay[hidden] { display: none; }
.overlay-bg { position: absolute; inset: 0; background: rgba(10,20,40,.45); opacity: 0; transition: opacity .25s; }
.overlay.open .overlay-bg { opacity: 1; }
.sheet { position: relative; z-index: 1; width: 100%; max-height: 88%; overflow-y: auto; background: #fff;
  border-radius: 26px 26px 0 0; padding: 10px 20px calc(24px + var(--safe-bot));
  box-shadow: 0 -10px 40px rgba(16,42,82,.2); transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22,1,.36,1); }
.sheet[hidden] { display: none; }
.overlay.open .sheet { transform: translateY(0); }
.sheet::-webkit-scrollbar { width: 0; }
.sheet-grab { width: 40px; height: 5px; border-radius: 3px; background: #DDE5EF; margin: 2px auto 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-head h3 { font-size: 19px; font-weight: 800; color: var(--navy); }
.sheet-x { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft); border: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted); }
.sheet-x svg.ico { width: 16px; height: 16px; }
.sheet-sub { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.sheet-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Masque les outils de démo quand le back-end réel est connecté */
body.api-mode .js-demo-only { display: none !important; }
/* Membre connecté : pas besoin de saisir ses coordonnées (RDV rattaché à son compte) */
body.api-mode .rdv-coord { display: none !important; }
/* Mode invité (back-end présent, non connecté) : espace membre verrouillé */
.guest-only { display: none; }
body.guest .member-only { display: none !important; }
body.guest .js-demo-only { display: none !important; }
body.guest .guest-only { display: block; }
.guest-cta { text-align: center; padding: 22px 18px; }
.guest-cta .gc-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; margin: 0 auto 12px; }
.guest-cta .gc-ic svg.ico { width: 22px; height: 22px; color: var(--blue-dark); }
.guest-cta .gc-t { font-size: 18px; font-weight: 800; color: var(--navy); }
.guest-cta .gc-d { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 6px 0 16px; }
.guest-cta .btn { width: 100%; }
.login-err { background: #FBE9E9; color: #C0392B; font-size: 13px; font-weight: 600; padding: 10px 12px; border-radius: 10px; margin: 4px 0 2px; }
[data-theme="dark"] .login-err { background: rgba(192,57,43,.18); color: #ff8b7d; }
/* Meeting : date / heure / lieu */
.mi-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mi-when label, .mi-loc-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.mi-loc-lbl { margin-top: 12px; }
.mi-loc-lbl span { font-weight: 400; }
#mi-date, #mi-time, #mi-location { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; color: var(--navy); background: var(--bg-soft); }
#mi-date:focus, #mi-time:focus, #mi-location:focus { outline: none; border-color: var(--blue); background: #fff; }
[data-theme="dark"] #mi-date:focus, [data-theme="dark"] #mi-time:focus, [data-theme="dark"] #mi-location:focus { background: rgba(255,255,255,.05); }
/* Mes rendez-vous (annulation) */
.rdv-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rdv-item:last-child { border-bottom: none; }
.rdv-i-info { flex: 1; min-width: 0; }
.rdv-i-t { font-weight: 700; font-size: 14px; color: var(--navy); }
.rdv-i-d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rdv-cancel { flex: none; border: 1px solid var(--line); background: none; color: #C0392B; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.rdv-cancel:hover { background: #FBE9E9; }
.rdv-cancel:disabled { opacity: .5; }
/* Vidéo : boutons J'aime / Enregistrer actifs */
[data-video-like].on { color: #E0245E; }
[data-video-save].on { color: var(--blue); }
[data-video-like].on svg.ico, [data-video-save].on svg.ico { fill: currentColor; }
/* Consentement RGPD + création de compte à la volée */
.rgpd-check { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 12px 0 0; cursor: pointer; text-align: left; }
.rgpd-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 1px 0 0; flex: none; width: 20px; height: 20px;
  border: 1.5px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; position: relative; transition: background .15s, border-color .15s; }
.rgpd-check input[type="checkbox"]:checked { background: var(--blue); border-color: var(--blue); }
.rgpd-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rgpd-check a { color: var(--blue); text-decoration: underline; font-weight: 600; }
/* Sépare le bloc consentement des coordonnées */
.rdv-coord .rgpd-check:first-of-type { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.acct-pw { margin-top: 10px; }
[data-theme="dark"] .rgpd-check input[type="checkbox"] { background: rgba(255,255,255,.06); }
[data-theme="dark"] .rgpd-check input[type="checkbox"]:checked { background: var(--blue); }
/* Écran légal (politique de confidentialité) */
.legal { padding: 8px 20px 40px; }
.legal h2 { font-size: 20px; font-weight: 800; color: var(--navy); }
.legal-upd { font-size: 12px; color: var(--muted); margin: 4px 0 14px; }
.legal h3 { font-size: 14px; font-weight: 800; color: var(--navy); margin: 18px 0 4px; }
.legal p { font-size: 13px; color: var(--ink); line-height: 1.6; }
.legal b { color: var(--navy); }
.legal a { color: var(--blue); font-weight: 700; text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal-note { margin-top: 20px; padding: 11px 13px; background: #FDF3E0; color: #C87F16; border-radius: 12px; font-size: 12px; line-height: 1.5; }
[data-theme="dark"] .legal-note { background: rgba(200,127,22,.16); color: #f0c070; }
/* Notification cliquable */
.notif[data-notif-go] { cursor: pointer; }
.notif[data-notif-go]:hover { background: var(--bg-soft); border-radius: 12px; }
.notif .nchev { margin-left: auto; align-self: center; color: var(--muted); flex: none; }
.notif .nchev svg.ico { width: 16px; height: 16px; }
/* Messagerie */
.msg-badge { display: inline-grid; place-items: center; background: #E0245E; color: #fff; font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 999px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }
.conv-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; background: none; border: none; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.conv-row:last-child { border-bottom: none; }
.conv-av { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; flex: none; }
.conv-av svg.ico { width: 18px; height: 18px; color: var(--blue-dark); }
.conv-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conv-nm { font-weight: 700; font-size: 14px; color: var(--navy); }
.conv-last { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.conv-time { font-size: 10px; color: var(--muted); }
.conv-unread { background: var(--blue); color: #fff; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; }
/* Fil de discussion */
.screen.conv-page.active { display: flex; flex-direction: column; overflow: hidden; }
.conv-thread { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.conv-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 0; margin: auto; }
.msg { max-width: 78%; }
.msg.mine { align-self: flex-end; }
.msg.theirs { align-self: flex-start; }
.msg-b { padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.4; word-wrap: break-word; }
.msg.mine .msg-b { background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
.msg.theirs .msg-b { background: var(--bg-soft); color: var(--navy); border-bottom-left-radius: 5px; }
.msg-t { font-size: 10px; color: var(--muted); margin-top: 3px; padding: 0 4px; }
.msg.mine .msg-t { text-align: right; }
.conv-reply { display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.conv-reply input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; font-size: 14px; color: var(--navy); background: var(--bg-soft); }
.conv-reply input:focus { outline: none; border-color: var(--blue); background: #fff; }
.conv-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.conv-send svg.ico { width: 18px; height: 18px; }
[data-theme="dark"] .conv-av { background: rgba(255,255,255,.06); }
[data-theme="dark"] .msg.theirs .msg-b { background: rgba(255,255,255,.08); }
[data-theme="dark"] .conv-reply input:focus { background: rgba(255,255,255,.05); }

/* Ma PLV / Partage — QR distributeur */
.plv-card { text-align: center; }
.plv-qr { display: inline-block; padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(10,37,64,.08); }
/* Affichage 1:1 (aucun redimensionnement fractionnaire → modules nets, scannables) */
.plv-qr canvas { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.plv-name { font-size: 18px; font-weight: 800; color: var(--navy); margin-top: 16px; }
.plv-sub { font-size: 11px; color: var(--muted); margin-top: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.plv-link { font-size: 12.5px; color: var(--blue); word-break: break-all; margin-top: 6px; padding: 10px 12px; background: var(--bg-soft); border-radius: 10px; }
.plv-actions { display: flex; gap: 10px; margin-top: 16px; }
.plv-actions .btn { flex: 1; }
[data-theme="dark"] .plv-qr { background: #fff; }

/* RDV : coordonnées du prospect */
.rdv-coord .rdv-in { width: 100%; padding: 12px 14px; margin-top: 10px; border: 1.5px solid var(--line);
  border-radius: 12px; font-size: 15px; color: var(--navy); background: var(--bg-soft);
  transition: border-color .15s, background .15s, box-shadow .15s; }
.rdv-coord .rdv-in:first-of-type { margin-top: 6px; }
.rdv-coord .rdv-in::placeholder { color: var(--muted); }
.rdv-coord .rdv-in:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(0,150,255,.12); }
[data-theme="dark"] .rdv-coord .rdv-in:focus { background: rgba(255,255,255,.05); }

/* Vidéos : ligne verrouillée / vidéo vue */
.vrow.locked { opacity: .55; cursor: not-allowed; }
.lock.done { color: #22885A; }

/* Webinaire : bouton "Inscrit" (état confirmé) */
.wbn-btn.is-registered { background: #E1F1E9; color: #22885A; cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.wbn-btn.is-registered svg.ico { width: 14px; height: 14px; }

/* Switcher de compte (démo) */
.switch-list { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; margin-bottom: 6px; }
.switch-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; }
.switch-row:hover { border-color: var(--blue); }
.switch-row.on { border-color: var(--blue); background: #F4FAFF; }
.sw-av { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; flex: 0 0 auto; color: var(--blue); }
.sw-av svg.ico { width: 18px; height: 18px; }
.sw-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sw-name { font-weight: 700; color: var(--navy); font-size: 14.5px; }
.sw-sub { font-size: 12px; color: var(--muted); }
.sw-cur { color: var(--blue); flex: 0 0 auto; }
.sw-cur svg.ico { width: 18px; height: 18px; }
.bo-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* Vue Up-line — bouton Ajouter un down-line */
.add-dl-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 40px); margin: 16px 20px 0; }
.add-dl-btn svg.ico { width: 17px; height: 17px; }

/* notifications */
.notif-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.notif { display: flex; gap: 12px; padding: 12px; border-radius: 14px; }
.notif.unread { background: #F4FAFF; }
.notif .nic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.notif .nic svg.ico { width: 18px; height: 18px; }
.notif .nic.ok { background: #E5F1FF; color: var(--blue); }
.notif .nic.blue { background: #E7F0FF; color: var(--blue-dark); }
.notif .nic.amber { background: #FFF2DC; color: #D98A00; }
.notif .t { font-weight: 700; font-size: 13.5px; color: var(--navy); }
.notif .d { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.notif .time { font-size: 10.5px; color: #9AA8BD; margin-top: 4px; }

/* formulaire de sheet */
.sheet-form { display: flex; flex-direction: column; }
.sheet-form label { font-size: 12px; font-weight: 700; color: var(--navy); margin: 10px 0 6px; }
.sheet-form input, .sheet-form select, .sheet-form textarea { width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-family: inherit; font-size: 14px; color: var(--ink); outline: none; background: #fff; }
.sheet-form input:focus, .sheet-form select:focus, .sheet-form textarea:focus { border-color: var(--blue); }
.sheet-form .btn { margin-top: 18px; }
/* Deux colonnes (Date/Heure, Durée/Capacité…) : autoriser les cellules à rétrécir
   pour que les champs number ne débordent pas de la carte. */
.sheet-row2 > div { min-width: 0; }

/* chips de filtre */
.chip-label { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.chips { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px;
  padding: 9px 16px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .12s; }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* lignes d'aide */
.help-line { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--bg-soft);
  border: none; border-radius: 14px; padding: 14px; margin-bottom: 10px; cursor: pointer; font-family: inherit; }
.help-line .ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #fff; color: var(--blue); display: grid; place-items: center; }
.help-line .ic svg.ico { width: 18px; height: 18px; }
.help-line .t { font-weight: 700; font-size: 14px; color: var(--navy); }
.help-line .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.help-line .chev { margin-left: auto; color: #C7D2E0; width: 15px; height: 15px; }

/* interrupteurs */
.switch-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: none; }
.sw-txt { flex: 1; }
.switch-row .t { font-weight: 700; font-size: 14px; color: var(--navy); }
.switch-row .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.switch { width: 48px; height: 28px; border-radius: 999px; background: #D6DEE8; border: none; position: relative;
  cursor: pointer; flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.switch.on { background: var(--blue); }
.switch.on::after { transform: translateX(20px); }

/* toasts */
.toast-host { position: absolute; left: 0; right: 0; bottom: calc(94px + var(--safe-bot)); z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 20px; }
.toast { background: #0A2540; color: #fff; font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; align-items: center; gap: 8px;
  transform: translateY(20px); opacity: 0; transition: transform .25s, opacity .25s; max-width: 100%; }
.toast.show { transform: none; opacity: 1; }
.toast svg.ico { width: 16px; height: 16px; color: #4ADE80; }

/* liaison de données : petit flash */
@keyframes bump { 0% { opacity: .25; } 100% { opacity: 1; } }
[data-bind].bump { animation: bump .35s ease; }

/* lecture vidéo (état "playing") */
.video-player.playing .vp-fill { width: 100%; transition: width 25s linear; }

/* contrôles visio coupés (off) */
.cc-btn.off .cc-ic { background: #E2E8F0; color: #94A3B8; position: relative; }
.call-screen.invest .cc-btn.off .cc-ic { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
.cc-btn.off .cc-ic::after { content: ''; position: absolute; width: 2px; height: 58%; background: currentColor; transform: rotate(45deg); border-radius: 2px; }

/* ---- Confort desktop : survol + focus clavier ---- */
.fountain-card, .path { transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) {
  .btn:hover { filter: brightness(1.05); }
  .wbn-btn:hover, .mini-btn:hover, .chip:hover, .add-btn:hover, .filter-btn:hover { filter: brightness(.97); }
  .fountain-card:hover, .path:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16,42,82,.14); }
  .vrow[data-go]:hover, .help-line:hover, .mrow[data-open]:hover, .action-row:hover { background: #F1F6FD; }
  .tab:hover { color: var(--blue); }
  .slot:hover, .type-opt:hover, .radio-opt:hover { border-color: #BcD5F5; }
}
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 2px; border-radius: 8px; }

/* =====================  SOUS-PAGES DU PROFIL  ===================== */
.page-form { margin: 8px 20px 0; padding: 18px; background: #fff; border-radius: 20px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; }
.page-form label { font-size: 12px; font-weight: 700; color: var(--navy); margin: 14px 0 6px; }
.page-form label:first-child { margin-top: 0; }
.page-form input, .page-form select { border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-family: inherit; font-size: 14px; color: var(--ink); outline: none; background: #fff; }
.page-form input:focus, .page-form select:focus { border-color: var(--blue); }
.page-form .btn { margin-top: 22px; }

/* cartes d'impact */
.impact-cards { display: flex; flex-direction: column; gap: 12px; margin: 8px 20px 0; }
.ic-card { display: grid; grid-template-columns: 46px 1fr auto; grid-template-rows: auto auto;
  column-gap: 14px; align-items: center; background: #F4FAFF; border-radius: 18px; padding: 16px 18px; }
.ic-card .ic { grid-column: 1; grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 50%; background: #fff;
  color: var(--blue); display: grid; place-items: center; }
.ic-card .ic svg.ico { width: 20px; height: 20px; }
.ic-card .num { grid-column: 2; grid-row: 1; align-self: end; font-size: 20px; font-weight: 800; color: var(--navy); }
.ic-card .cap { grid-column: 2; grid-row: 2; align-self: start; font-size: 12px; color: var(--muted); }
.ic-card .delta { grid-column: 3; grid-row: 1 / 3; font-size: 11px; font-weight: 700; color: var(--green);
  background: #E7F7EE; padding: 6px 10px; border-radius: 999px; }

/* graphique en barres */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 168px; padding-bottom: 22px; margin-top: 6px; }
.chart .bar { flex: 1; background: #DCEBFF; border-radius: 8px 8px 0 0; position: relative; min-height: 8px; }
.chart .bar.on { background: var(--blue); }
.chart .bar i { display: none; }
.chart .bar span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); }

/* =====================================================================
   MODE SOMBRE  —  activé via <html data-theme="dark">
   ===================================================================== */
:root[data-theme="dark"] {
  --ink: #E7EDF6; --navy: #F2F6FC; --muted: #98A7BE; --line: rgba(255,255,255,.09);
  --bg-soft: #1A2334; --white: #151D2C;
  --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.55);
}
[data-theme="dark"] body { background: #0A111E; background-image: none; }
[data-theme="dark"] .app { background: #0D1524; }

/* surfaces blanches → cartes sombres */
[data-theme="dark"] .card,
[data-theme="dark"] .p-sheet,
[data-theme="dark"] .sheet,
[data-theme="dark"] .benefits-wrap,
[data-theme="dark"] .fountain-card,
[data-theme="dark"] .page-form,
[data-theme="dark"] .fd-body { background: #151D2C; }
[data-theme="dark"] .tabbar { background: rgba(15,22,37,.94); border-top-color: var(--line); }

/* zones "soft" / accents clairs → teintes sombres */
[data-theme="dark"] .impact,
[data-theme="dark"] .info-box,
[data-theme="dark"] .note-box,
[data-theme="dark"] .wbn-item,
[data-theme="dark"] .fd-stat,
[data-theme="dark"] .vp-stats > div,
[data-theme="dark"] .search-input,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .ic-card,
[data-theme="dark"] .type-opt.on,
[data-theme="dark"] .radio-opt.on,
[data-theme="dark"] .notif.unread,
[data-theme="dark"] .vlist-item.on { background: #1A2334; }

/* pastilles d'icônes claires → bleu translucide */
[data-theme="dark"] .action-row .ic,
[data-theme="dark"] .trust .ic,
[data-theme="dark"] .type-opt .ic,
[data-theme="dark"] .recap-list .ri .ic,
[data-theme="dark"] .radio-opt .ic,
[data-theme="dark"] .menu .mrow .ic,
[data-theme="dark"] .impact .ic,
[data-theme="dark"] .ic-card .ic,
[data-theme="dark"] .help-line .ic,
[data-theme="dark"] .wbn-ic,
[data-theme="dark"] .pcard .pic,
[data-theme="dark"] .control-card .mascot,
[data-theme="dark"] .notif .nic.ok,
[data-theme="dark"] .notif .nic.blue { background: rgba(0,150,255,.16); }

/* champs de formulaire */
[data-theme="dark"] .page-form input, [data-theme="dark"] .page-form select,
[data-theme="dark"] .sheet-form input, [data-theme="dark"] .sheet-form select { background: #10192A; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .search-input input { color: var(--ink); }

/* boutons clairs */
[data-theme="dark"] .btn-white, [data-theme="dark"] .btn-white-purple,
[data-theme="dark"] .vp-actions button, [data-theme="dark"] .chip { background: #1A2334; border-color: var(--line); }
[data-theme="dark"] .sheet-x { background: #1A2334; }

/* héros dégradés clairs → sombres */
[data-theme="dark"] .home-hero,
[data-theme="dark"] .profile-hero,
[data-theme="dark"] .fountains-hero { background: linear-gradient(180deg, #141E32, #0D1524); }
[data-theme="dark"] .rdv-hero.buy, [data-theme="dark"] .rdv-hero.distrib { background: linear-gradient(180deg, #14203A, #0D1524); }
[data-theme="dark"] .rdv-hero.invest { background: linear-gradient(180deg, #221646, #0D1524); }
[data-theme="dark"] .rdv-hero .back { background: #1A2334; color: var(--ink); }

/* cartes gradient claires */
[data-theme="dark"] .sponsor,
[data-theme="dark"] .control-card { background: linear-gradient(120deg, #152036, #101a2c); }

/* visio distributeur (fond clair) → sombre */
[data-theme="dark"] .call-screen.distrib { background: linear-gradient(180deg, #14203A, #0D1524); color: var(--ink); }
[data-theme="dark"] .call-screen.distrib .call-back,
[data-theme="dark"] .call-screen.distrib .ct-ic { background: #1A2334; color: var(--ink); }
[data-theme="dark"] .call-screen.distrib .call-info { background: rgba(255,255,255,.06); color: #9FC3FF; }

/* détail fontaine : la feuille remonte sur un fond sombre */
[data-theme="dark"] .fd-body { border-radius: 22px 22px 0 0; }

/* toast plus clair en sombre */
[data-theme="dark"] .toast { background: #243049; }

/* vidéo d'accueil / lecteurs restent sombres (ok) ; onboarding & pcover = images (ok) */
[data-theme="dark"] .cal .month button { background: rgba(0,150,255,.15); color: #7FBFFF; }
[data-theme="dark"] .add-btn { background: rgba(0,150,255,.16); }
[data-theme="dark"] .home-brand .mini,
[data-theme="dark"] .logo-drop { box-shadow: none; }
[data-theme="dark"] .video { box-shadow: none; }

/* ---- Bouton flottant jour/nuit ---- */
.theme-fab { position: absolute; top: calc(14px + var(--safe-top)); right: 14px; z-index: 60;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); box-shadow: var(--shadow); color: var(--navy);
  display: grid; place-items: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, color .2s, transform .12s; }
.theme-fab:active { transform: scale(.92); }
.theme-fab svg.ico { width: 18px; height: 18px; }
[data-theme="dark"] .theme-fab { background: rgba(30,41,59,.9); color: #FCD34D; }
/* laisser la place au bouton près de la cloche de l'accueil */
.home-hero .bell { right: 74px; }

/* =====================  DÉTAIL WEBINAIRE  ===================== */
.wd-hero { position: relative; background: linear-gradient(160deg, #1BA2FF, #0056D6); color: #fff;
  padding: calc(18px + var(--safe-top)) 22px 26px; }
.wd-hero .back { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: grid; place-items: center; color: #fff; cursor: pointer; margin-bottom: 16px; }
.wd-hero .back svg.ico { transform: scaleX(-1); width: 17px; height: 17px; }
.wd-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.22);
  padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.wd-badge svg.ico { width: 13px; height: 13px; }
.wd-hero h1 { font-size: 24px; font-weight: 800; margin-top: 14px; line-height: 1.15; }
.wd-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; opacity: .95; }
.wd-meta span { display: inline-flex; align-items: center; gap: 6px; }
.wd-meta svg.ico { width: 14px; height: 14px; }
.wd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 20px 0; }
.wd-stats > div { background: var(--bg-soft); border-radius: 14px; padding: 14px 6px; text-align: center; }
.wd-stats .n { font-size: 17px; font-weight: 800; color: var(--navy); }
.wd-stats .c { font-size: 10px; color: var(--muted); margin-top: 2px; }
.wd-p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.speaker { display: flex; align-items: center; gap: 14px; }
.speaker .sp-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 52%; flex: none; }
.speaker .sp-n { font-weight: 800; color: var(--navy); font-size: 15px; }
.speaker .sp-r { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* bouton Modifier sur le détail fontaine */
.fd-edit { position: absolute; top: calc(15px + var(--safe-top)); right: 62px; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255,255,255,.92); border: none; display: grid; place-items: center;
  color: var(--navy); cursor: pointer; }
.fd-edit svg.ico { width: 17px; height: 17px; }
[data-theme="dark"] .fd-edit { background: #1A2334; color: var(--ink); }

/* textarea dans les sheets + carte cliquable */
.sheet-form textarea { border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-family: inherit; font-size: 14px; color: var(--ink); outline: none; background: #fff; resize: none; }
.sheet-form textarea:focus { border-color: var(--blue); }
[data-theme="dark"] .sheet-form textarea { background: #10192A; color: var(--ink); border-color: var(--line); }
.control-card[data-open] { cursor: pointer; }

/* ---- Flèche de retour cohérente (haut à gauche) sur chaque vue ---- */
.top-back { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  margin-bottom: 14px; cursor: pointer; border: none; background: #fff; box-shadow: var(--shadow);
  color: var(--navy); position: relative; z-index: 2; }
.top-back svg.ico { transform: scaleX(-1); width: 17px; height: 17px; }
.top-back.on-dark { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
[data-theme="dark"] .top-back { background: #1A2334; color: var(--ink); }
/* dans les couvertures image, la flèche passe au-dessus du dégradé */
.pcover .top-back { z-index: 2; }

/* ---- Label distributeur (haut de l'accueil) ---- */
.distributor-tag { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 0 auto 12px;
  align-items: center; justify-content: center; column-gap: 6px; row-gap: 1px; text-align: center;
  font-size: 11.5px; line-height: 1.35; font-weight: 600; color: var(--blue-dark);
  background: rgba(255,255,255,.72); border: 1px solid var(--line); padding: 6px 13px; border-radius: 999px; }
.distributor-tag svg.ico { width: 13px; height: 13px; flex: none; }
.distributor-tag b { font-weight: 800; color: var(--navy); white-space: nowrap; }
.distributor-tag .dt-id { white-space: nowrap; }
[data-theme="dark"] .distributor-tag { background: rgba(255,255,255,.08); border-color: var(--line); color: #7FBFFF; }
[data-theme="dark"] .distributor-tag b { color: var(--ink); }

/* ---- Pastilles bienfaits cliquables + modale infographie ---- */
.benefit[data-benefit] { cursor: pointer; transition: transform .12s ease; }
.benefit[data-benefit]:active { transform: scale(.97); }
@media (hover: hover) { .benefit[data-benefit]:hover { transform: translateY(-2px); } }

.bn-x { position: absolute; top: 14px; right: 16px; z-index: 3; }
.bn-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.bn-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--bc); color: #fff;
  display: grid; place-items: center; flex: none; }
.bn-ic svg.ico { width: 24px; height: 24px; }
.bn-title { font-size: 20px; font-weight: 800; color: var(--navy); }
.bn-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bn-image { width: 100%; height: auto; display: block; border-radius: 16px; margin-bottom: 16px; }
.bn-image.placeholder { height: 168px; background: var(--bg-soft); border: 2px dashed var(--line); display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.bn-image.placeholder svg.ico { width: 26px; height: 26px; }
.bn-image.placeholder span { font-size: 12px; }
.bn-desc { font-size: 13.5px; color: var(--ink); line-height: 1.55; margin-bottom: 18px; }
.bn-points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.bn-point { display: flex; gap: 12px; align-items: flex-start; }
.bn-dot { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--bc); color: #fff;
  display: grid; place-items: center; margin-top: 1px; }
.bn-dot svg.ico { width: 13px; height: 13px; }
.bp-t { font-weight: 700; font-size: 13.5px; color: var(--navy); }
.bp-d { font-size: 12px; color: var(--muted); margin-top: 1px; }
.bn-fact { display: flex; gap: 10px; background: var(--bg-soft); border-radius: 14px; padding: 14px;
  font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.bn-fact svg.ico { width: 18px; height: 18px; color: var(--bc); flex: none; margin-top: 1px; }
.bn-fact b { color: var(--navy); }

/* =====================  MEETING KANGEN · types + invitations  ===================== */
.meeting-opt { display: flex; gap: 14px; padding: 16px; border: 1.5px solid var(--line);
  border-radius: 16px; margin-bottom: 12px; }
.meeting-opt:last-child { margin-bottom: 0; }
.meeting-opt .ic { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #EAF2FF;
  color: var(--blue); display: grid; place-items: center; }
.meeting-opt .ic svg.ico { width: 20px; height: 20px; }
.mo-body { flex: 1; min-width: 0; }
.mo-body .t { font-weight: 700; font-size: 15px; color: var(--navy); }
.mo-body .d { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.mo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mo-tags span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600;
  color: var(--blue); background: #EAF2FF; padding: 4px 9px; border-radius: 999px; }
.mo-tags span svg.ico { width: 11px; height: 11px; }
.mo-tags span.unlimited { color: #D98A00; background: #FFF2DC; }
.mo-btn { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; background: var(--blue);
  color: #fff; border: none; font-family: inherit; font-weight: 700; font-size: 13px; padding: 10px 18px;
  border-radius: 12px; cursor: pointer; }
.mo-btn svg.ico { width: 15px; height: 15px; }

.mi-count-pill { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--blue);
  background: #EAF2FF; padding: 3px 10px; border-radius: 999px; }
.mi-warn { color: #D98A00; font-weight: 700; }
.guest-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.guest-row:last-of-type { border-bottom: none; }
.guest-num { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #EAF2FF; color: var(--blue);
  font-weight: 800; font-size: 12px; display: grid; place-items: center; margin-top: 6px; }
.guest-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.guest-fields input { border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font-family: inherit; font-size: 13.5px; color: var(--ink); outline: none; background: #fff; width: 100%; }
.guest-fields input:focus { border-color: var(--blue); }
.guest-del { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); border: none;
  color: var(--muted); display: grid; place-items: center; cursor: pointer; margin-top: 5px; }
.guest-del svg.ico { width: 15px; height: 15px; }
.add-guest { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px;
  padding: 12px; border: 1.5px dashed var(--line); border-radius: 12px; background: none; color: var(--blue);
  font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.add-guest svg.ico { width: 15px; height: 15px; }
/* dark */
[data-theme="dark"] .meeting-opt .ic, [data-theme="dark"] .mo-tags span,
[data-theme="dark"] .mi-count-pill, [data-theme="dark"] .guest-num { background: rgba(0,150,255,.16); }
[data-theme="dark"] .guest-fields input { background: #10192A; color: var(--ink); border-color: var(--line); }

/* ---- Détail down-line : sélecteur "Type de programme" ---- */
.fd-select-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.fd-select-row .fd-sel-label { display: flex; align-items: center; gap: 10px; font-size: 13px;
  color: var(--muted); margin-bottom: 8px; }
.fd-select-row .fd-sel-label svg.ico { width: 17px; height: 17px; color: var(--blue); }
.fd-select { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy); background: #fff; outline: none; cursor: pointer; }
.fd-select:focus { border-color: var(--blue); }
[data-theme="dark"] .fd-select { background: #10192A; color: var(--ink); border-color: var(--line); }

/* ---- Impact : foyer (personnes à la même adresse) ---- */
.hh-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.hh-label svg.ico { width: 17px; height: 17px; color: var(--blue); }
.hh-note { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

/* ---- Carte Up-Line dans "Besoin d'aide ?" ---- */
.upline-card { display: flex; align-items: center; gap: 14px; background: var(--bg-soft); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.upline-card .up-av { width: 48px; height: 48px; border-radius: 50%; background: #EAF2FF; color: var(--blue); display: grid; place-items: center; flex: none; }
.upline-card .up-av svg.ico { width: 22px; height: 22px; }
.upline-card .up-name { font-weight: 800; font-size: 15px; color: var(--navy); }
.upline-card .up-role { font-size: 12px; color: var(--muted); margin-top: 2px; }
[data-theme="dark"] .upline-card .up-av { background: rgba(0,150,255,.16); }

/* =====================  VUES PAR RÔLE (démo)  ===================== */
.role-switch-title { font-size: 13px; font-weight: 800; color: var(--muted); margin: 22px 20px 4px;
  display: flex; align-items: center; gap: 8px; }
.role-switch-title span { font-size: 9px; font-weight: 700; color: var(--blue); background: #EAF2FF;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }

.role-hero { margin: 6px 16px 0; padding: 24px 22px 26px; color: #fff; text-align: center; border-radius: 22px; }
.role-hero.downline   { background: linear-gradient(150deg, #12A0FF, #0067E0); }
.role-hero.upline     { background: linear-gradient(150deg, #2D6BE6, #12308F); }
.role-hero.admin      { background: linear-gradient(150deg, #0EA371, #087552); }
.role-hero.superadmin { background: linear-gradient(150deg, #8B5CF6, #4C1D95); }
.role-ic { width: 56px; height: 56px; border-radius: 18px; background: rgba(255,255,255,.2);
  display: grid; place-items: center; margin: 0 auto 12px; }
.role-ic svg.ico { width: 26px; height: 26px; }
.role-hero h2 { font-size: 22px; font-weight: 800; }
.role-hero p { font-size: 13px; opacity: .92; margin-top: 6px; }

.role-placeholder { margin: 18px 20px; padding: 38px 24px; border: 2px dashed var(--line);
  border-radius: 20px; text-align: center; color: var(--muted); }
.role-placeholder > svg.ico { width: 30px; height: 30px; color: var(--blue); margin-bottom: 12px; }
.role-placeholder .rp-t { font-weight: 800; font-size: 16px; color: var(--navy); }
.role-placeholder .rp-d { font-size: 12.5px; margin-top: 8px; line-height: 1.5; }

/* =====================  VUE ADMIN  ===================== */
.adm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 20px 0; }
.adm-kpi { background: var(--bg-soft); border-radius: 16px; padding: 14px 6px; text-align: center; }
.adm-kpi .k-ic { width: 34px; height: 34px; border-radius: 50%; background: #E7F7EE; color: #0EA371;
  display: grid; place-items: center; margin: 0 auto 8px; }
.adm-kpi .k-ic svg.ico { width: 16px; height: 16px; }
.adm-kpi .k-n { font-size: 20px; font-weight: 800; color: var(--navy); }
.adm-kpi .k-c { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* Ventes & commissions */
.com-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.com-row:last-child { border-bottom: none; }
.com-row.total { border-top: 2px solid var(--line); border-bottom: none; margin-top: 2px; padding-top: 14px; }
.com-name { font-weight: 700; font-size: 14px; color: var(--navy); }
.com-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.com-amt { font-weight: 800; font-size: 15px; color: #0EA371; white-space: nowrap; }
.com-row.total .com-amt { font-size: 18px; }
.com-sale { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.com-sale:last-child { border-bottom: none; }
.com-sd { font-size: 13px; color: var(--navy); flex: 1; min-width: 0; }
.com-sa { font-weight: 700; font-size: 14px; color: var(--navy); white-space: nowrap; }
.com-st { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #E7F7EE; color: #0EA371; }
.com-st.pending { background: #FDF3E0; color: #C87F16; }
.com-st.cancelled { background: #FBE9E9; color: #C0392B; }
.com-note { margin: 12px 20px 0; font-size: 11px; color: var(--muted); line-height: 1.5; }

/* Organigramme réseau (arbre de nœuds, technique connecteurs CSS) */
.orgtree { overflow-x: auto; overflow-y: hidden; padding: 8px 4px 4px; -webkit-overflow-scrolling: touch; }
.orgtree .otinner { display: inline-block; min-width: 100%; }
.orgtree ul { display: flex; justify-content: center; padding-top: 20px; position: relative; margin: 0; list-style: none; }
.orgtree > .otinner > ul { padding-top: 0; }
.orgtree li { list-style: none; position: relative; padding: 20px 7px 0; text-align: center; }
/* connecteurs : traits vers le parent */
.orgtree li::before, .orgtree li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 20px; border-top: 2px solid var(--line); }
.orgtree li::after { right: auto; left: 50%; border-left: 2px solid var(--line); }
.orgtree li:only-child::before, .orgtree li:only-child::after { display: none; }
.orgtree li:only-child { padding-top: 20px; }
.orgtree li:first-child::before, .orgtree li:last-child::after { border: 0 none; }
.orgtree li:last-child::before { border-right: 2px solid var(--line); border-radius: 0 6px 0 0; }
.orgtree li:first-child::after { border-radius: 6px 0 0 0; }
.orgtree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 20px; border-left: 2px solid var(--line); }
.orgtree > .otinner > ul::before { display: none; }
/* nœud */
.orgtree .node { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; position: relative;
  min-width: 82px; max-width: 112px; padding: 15px 9px 7px; border-radius: 12px; background: var(--bg-soft);
  border: 1.5px solid var(--line); cursor: default; }
.orgtree .node .ndot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #C9CED6; }
.orgtree .node .nteam { position: absolute; top: 5px; left: 6px; display: inline-flex; align-items: center; gap: 2px;
  font-size: 9px; font-weight: 800; color: var(--blue-dark); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 5px 1px 3px; line-height: 1.35; }
.orgtree .node .nteam svg.ico { width: 9px; height: 9px; }
.orgtree .node.root .nteam { border-color: rgba(0,150,255,.35); }
[data-theme="dark"] .orgtree .node .nteam { background: rgba(255,255,255,.12); color: #7FBFFF; }
.orgtree .node[data-status="actif"] .ndot { background: #22B07D; }
.orgtree .node[data-status="actif"] { border-color: rgba(34,176,125,.4); background: #EAF9F2; }
.orgtree .node.root { border-color: var(--blue); background: #E8F2FF; box-shadow: 0 2px 8px rgba(0,150,255,.16); }
.orgtree .node .nav-ic { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; margin-bottom: 2px; }
.orgtree .node .nav-ic svg.ico { width: 14px; height: 14px; color: var(--blue-dark); }
.orgtree .node .nname { font-size: 12px; font-weight: 800; color: var(--navy); line-height: 1.15; }
.orgtree .node .nrole { font-size: 9px; color: var(--muted); line-height: 1.2; }
.orgtree-legend { display: flex; justify-content: center; gap: 16px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.orgtree-legend span { display: inline-flex; align-items: center; gap: 5px; }
.orgtree-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.orgtree-legend i.a { background: #22B07D; } .orgtree-legend i.p { background: #C9CED6; }
[data-theme="dark"] .orgtree .node { background: rgba(255,255,255,.05); }
[data-theme="dark"] .orgtree .node[data-status="actif"] { background: rgba(34,176,125,.14); }
[data-theme="dark"] .orgtree .node.root { background: rgba(0,150,255,.16); }
[data-theme="dark"] .orgtree .node .nav-ic { background: rgba(255,255,255,.1); }
.orgtree .node[data-org-node] { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.orgtree .node[data-org-node]:active { transform: scale(.96); }
.org-focus-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 2px; }
.org-reset { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--blue-dark); font-size: 12px; font-weight: 700; padding: 5px 12px 5px 8px; border-radius: 999px; cursor: pointer; }
.org-reset svg.ico { width: 13px; height: 13px; }
.org-focus-name { font-size: 12px; color: var(--muted); }
.org-focus-name b { color: var(--navy); font-weight: 800; }
/* Recherche dans l'organigramme */
.org-search { position: relative; margin: 4px 0 10px; }
.org-search > svg.ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.org-search input { width: 100%; border: 1px solid var(--line); background: var(--bg-soft); border-radius: 999px;
  padding: 9px 14px 9px 34px; font-size: 13px; color: var(--navy); }
.org-search input:focus { outline: none; border-color: var(--blue); background: #fff; }
.org-search-res { position: absolute; top: 100%; left: 0; right: 0; z-index: 6; margin-top: 5px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(10,37,64,.14); max-height: 244px; overflow: auto; }
.org-sr { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 13px; background: none; border: none;
  border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.org-sr:last-child { border-bottom: none; }
.org-sr:hover { background: var(--bg-soft); }
.org-sr-dot { width: 8px; height: 8px; border-radius: 50%; background: #C9CED6; flex: none; }
.org-sr-dot.actif { background: #22B07D; }
.org-sr-nm { font-size: 13px; font-weight: 700; color: var(--navy); flex: 1; min-width: 0; }
.org-sr-rl { font-size: 11px; color: var(--muted); white-space: nowrap; }
.org-sr-empty { padding: 12px 13px; font-size: 12px; color: var(--muted); text-align: center; }
.orgtree .node.flash { animation: nodeflash 1.6s ease; }
@keyframes nodeflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,150,255,0); } 25% { box-shadow: 0 0 0 6px rgba(0,150,255,.4); } 60% { box-shadow: 0 0 0 3px rgba(0,150,255,.2); } }
[data-theme="dark"] .org-search input:focus { background: rgba(255,255,255,.05); }
[data-theme="dark"] .org-search-res { background: #16202e; }
[data-theme="dark"] .org-sr:hover { background: rgba(255,255,255,.05); }

/* Fiche distributeur (clic sur un nœud) */
.nd-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.nd-av { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; flex: none; }
.nd-av svg.ico { width: 20px; height: 20px; color: var(--blue-dark); }
.nd-id { flex: 1; min-width: 0; }
.nd-name { font-size: 17px; font-weight: 800; color: var(--navy); }
.nd-role { font-size: 12px; color: var(--muted); margin-top: 1px; }
.nd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.nd-stat { background: var(--bg-soft); border-radius: 14px; padding: 12px 6px; text-align: center; }
.nd-stat .nd-v { font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.nd-stat .nd-k { font-size: 10px; color: var(--muted); margin-top: 3px; }
.nd-actions { display: flex; flex-direction: column; gap: 10px; }
[data-theme="dark"] .nd-av, [data-theme="dark"] .nd-stat { background: rgba(255,255,255,.06); }

.mtg-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); transition: opacity .15s; }
.mtg-item:last-child { border-bottom: none; }
.mtg-info { flex: 1; min-width: 0; }
.mtg-name { font-weight: 700; font-size: 14px; color: var(--navy); }
.mtg-meta { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.mtg-meta svg.ico { width: 12px; height: 12px; flex: none; }
.mtg-act { display: flex; gap: 8px; flex: none; }
.mtg-ok, .mtg-no { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; }
.mtg-ok { background: #E7F7EE; color: #0EA371; }
.mtg-no { background: #FDE8E8; color: #E53935; }
.mtg-ok svg.ico, .mtg-no svg.ico { width: 16px; height: 16px; }

.adm-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.adm-row:last-child { border-bottom: none; }
.adm-av { width: 38px; height: 38px; border-radius: 50%; background: #EAF2FF; color: var(--blue);
  display: grid; place-items: center; flex: none; }
.adm-av svg.ico { width: 18px; height: 18px; }
.adm-info { flex: 1; min-width: 0; }
.adm-name { font-weight: 700; font-size: 14px; color: var(--navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.adm-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.adm-status.actif { background: #E7F7EE; color: #0EA371; }
.adm-status.passif { background: #FCE7EC; color: #D6336C; }
.adm-act { display: flex; gap: 6px; flex: none; }
.adm-act button { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg-soft);
  color: var(--blue); cursor: pointer; display: grid; place-items: center; }
.adm-act button svg.ico { width: 15px; height: 15px; }
/* dark */
[data-theme="dark"] .adm-av, [data-theme="dark"] .adm-act button { background: rgba(0,150,255,.16); }
[data-theme="dark"] .adm-kpi .k-ic { background: rgba(14,163,113,.18); }
[data-theme="dark"] .mtg-ok { background: rgba(14,163,113,.18); }
[data-theme="dark"] .mtg-no { background: rgba(229,57,53,.18); }

/* =====================  CONNEXION (membre)  ===================== */
.login-page { min-height: 100%; display: flex; flex-direction: column;
  padding: calc(20px + var(--safe-top)) 26px calc(40px + var(--safe-bot));
  background: linear-gradient(180deg, #F4FAFF 0%, #E3F1FF 60%, #D3E9FF 100%); }
.login-brand { text-align: center; margin: 6px 0 4px; }
.login-brand .logo-drop { width: 64px; height: 64px; border-radius: 20px; font-size: 32px; margin: 0 auto 8px;
  box-shadow: 0 12px 26px rgba(0,120,230,.35); }
.login-brand .logo-name { font-size: 26px; }
.login-page h1 { font-size: 28px; font-weight: 800; color: var(--navy); text-align: center; margin-top: 18px; }
.login-sub { text-align: center; color: var(--muted); font-size: 14px; margin-top: 6px; }
.login-form { display: flex; flex-direction: column; margin-top: 26px; background: #fff; border-radius: 22px;
  padding: 20px; box-shadow: var(--shadow); }
.login-form label { font-size: 12px; font-weight: 700; color: var(--navy); margin: 12px 0 6px; }
.login-form label:first-child { margin-top: 0; }
.login-form input { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; font-family: inherit;
  font-size: 14px; color: var(--ink); outline: none; background: #fff; }
.login-form input:focus { border-color: var(--blue); }
.login-forgot { align-self: flex-end; font-size: 12px; color: var(--blue); font-weight: 600; margin-top: 10px; cursor: pointer; }
.login-form .btn { margin-top: 18px; }
.login-alt { text-align: center; font-size: 13px; color: var(--muted); margin-top: 22px; }
.login-alt a { color: var(--blue); font-weight: 700; cursor: pointer; }
/* dark */
[data-theme="dark"] .login-page { background: linear-gradient(180deg, #131C2E, #0D1524); }
[data-theme="dark"] .login-form { background: #151D2C; }
[data-theme="dark"] .login-form input { background: #10192A; color: var(--ink); border-color: var(--line); }

/* ---- Vue Admin enrichie : CA, objectif, leads, actions ---- */
.adm-ca { padding: 18px; }
.ca-hd { display: flex; align-items: flex-start; justify-content: space-between; }
.ca-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.ca-num { font-size: 26px; font-weight: 800; color: var(--navy); margin-top: 2px; }
.ca-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
  color: #0EA371; background: #E7F7EE; padding: 5px 10px; border-radius: 999px; }
.ca-trend svg.ico { width: 12px; height: 12px; }
.ca-bar { height: 8px; border-radius: 4px; background: var(--bg-soft); margin-top: 14px; overflow: hidden; }
.ca-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #0EA371, #12C98A); }
.ca-goal { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.ca-goal b { color: var(--navy); }
.adm-kpi .k-ic.ok { background: #E7F7EE; color: #0EA371; }
.adm-note { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-bottom: 12px; }
.adm-note b { color: #0EA371; }

.lead-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); transition: opacity .15s; }
.lead-item:last-child { border-bottom: none; }
.lead-av { width: 38px; height: 38px; border-radius: 50%; background: #FFF2DC; color: #D98A00;
  display: grid; place-items: center; flex: none; }
.lead-av svg.ico { width: 18px; height: 18px; }
.lead-info { flex: 1; min-width: 0; }
.lead-name { font-weight: 700; font-size: 14px; color: var(--navy); }
.lead-src { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.lead-src svg.ico { width: 12px; height: 12px; flex: none; }
.lead-assign { flex: none; background: var(--blue); color: #fff; border: none; font-family: inherit;
  font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 10px; cursor: pointer; }

.card .chips.adm-filter { margin-bottom: 12px; }
.adm-actions { display: flex; gap: 10px; margin-top: 16px; }
[data-theme="dark"] .lead-av { background: rgba(217,138,0,.2); }
[data-theme="dark"] .adm-kpi .k-ic.ok, [data-theme="dark"] .ca-trend { background: rgba(14,163,113,.18); }

/* =====================  BACK-OFFICE (édition des données)  ===================== */
.bo-sec { font-size: 14px; font-weight: 800; color: var(--navy); margin: 22px 0 8px;
  display: flex; align-items: center; justify-content: space-between; }
.bo-sec:first-child { margin-top: 0; }
.bo-add { display: inline-flex; align-items: center; gap: 6px; background: #EAF2FF; color: var(--blue);
  border: none; font-family: inherit; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 10px; cursor: pointer; }
.bo-add svg.ico { width: 13px; height: 13px; }
.bo-member { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px; }
.bo-member input, .bo-member select { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-family: inherit; font-size: 13.5px; color: var(--ink); outline: none; background: #fff; width: 100%; }
.bo-member input:focus, .bo-member select:focus { border-color: var(--blue); }
.bo-m-row { display: flex; gap: 8px; align-items: center; }
.bo-m-row > input, .bo-m-row > select { flex: 1; min-width: 0; }
.bo-m-row .guest-del { flex: 0 0 40px; }
[data-theme="dark"] .bo-member input, [data-theme="dark"] .bo-member select { background: #10192A; color: var(--ink); border-color: var(--line); }