/* Espace client Ty Buzzy
   Reprend l'identité du tableau de prospection Ty Buzzy : ardoise, accent cyan,
   soleil, bandeau gwenn-ha-du, polices Inter + Outfit. */

@font-face { font-family: "Inter"; src: url(assets/polices/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Outfit"; src: url(assets/polices/outfit.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #f3f5f8;
  --card: #ffffff;
  --soft: #f7f8fb;
  --ink: #1c2331;
  --ink-2: #2a3345;
  --muted: #6b7385;
  --muted-2: #98a0b0;
  --line: #e6e9ef;
  --line-2: #eef0f4;
  --cyan: #00d4ff;
  --cyan-ink: #0089a8;
  --cyan-soft: rgba(0, 212, 255, 0.12);
  --soleil: #ffb703;
  --soleil-soft: #fff4d6;
  --good: #1fae6b;
  --good-soft: #e3f6ec;
  --danger: #e5484d;
  --danger-soft: #fdecec;
  --fb: #1877f2;
  --ig: #e1306c;
  --ig-grad: linear-gradient(45deg, #f9b233 0%, #ee5a3c 30%, #d62976 60%, #962fbf 85%, #4f5bd5 100%);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(28, 35, 49, 0.04), 0 6px 20px rgba(28, 35, 49, 0.05);
  --shadow-lg: 0 18px 50px rgba(28, 35, 49, 0.18);
  --sans: "Inter", "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display: "Outfit", "Inter", "Segoe UI", sans-serif;
  --sidebar: 256px;
  --banner: 0px; /* plus de bandeau : conservé à 0 pour ne pas toucher aux calculs de hauteur */
}

/* Couleurs par statut (StatutPublication) */
.st-brouillon  { --st: #a3adbd; --st-soft: #eef0f4; --st-ink: #4c5566; }
.st-attente    { --st: #ffb703; --st-soft: #fff4d6; --st-ink: #8a5a00; }
.st-validee    { --st: #00c2e8; --st-soft: #dff8fd; --st-ink: #007a94; }
.st-programmee { --st: #8b7cf6; --st-soft: #efecfe; --st-ink: #5141c4; }
.st-encours    { --st: #3b9dff; --st-soft: #e5f2ff; --st-ink: #1660b0; }
.st-publiee    { --st: #1fae6b; --st-soft: #e3f6ec; --st-ink: #147a4a; }
.st-partielle  { --st: #f08c2e; --st-soft: #fdeedd; --st-ink: #a3530b; }
.st-echec      { --st: #ef5b5b; --st-soft: #fdecec; --st-ink: #b42828; }
.st-annulee    { --st: #c4cad4; --st-soft: #f2f3f6; --st-ink: #7a8292; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--banner);
}
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.015em; margin: 0; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--cyan-ink); }
img { display: block; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.petit { font-size: 12.5px; }
.centre { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gwenn-ha-du { height: 10px; background: repeating-linear-gradient(180deg, #0b0d10 0 2px, #fff 2px 4px); opacity: .9; flex: none; }


/* ------------------------------ Boutons ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 12px; padding: 9px 15px; font-weight: 600; font-size: 13.5px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
}
.btn:hover { border-color: #cfd5df; background: var(--soft); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.dark:hover { background: var(--ink-2); }
.btn.accent { background: var(--cyan); border-color: var(--cyan); color: #06222b; box-shadow: 0 8px 20px rgba(0, 212, 255, .28); }
.btn.accent:hover { background: #2bdcff; }
.btn.meta { background: var(--fb); border-color: var(--fb); color: #fff; box-shadow: 0 8px 22px rgba(24, 119, 242, .3); }
.btn.meta:hover { background: #1469d8; }
.btn.good { background: var(--good); border-color: var(--good); color: #fff; }
.btn.good:hover { background: #1a9a5e; }
.btn.danger { color: var(--danger); border-color: #f5c8ca; background: #fff; }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: rgba(28,35,49,.05); }
.btn.small { padding: 6px 11px; font-size: 12.5px; border-radius: 10px; }
.btn.large { padding: 12px 18px; font-size: 14.5px; }
.btn.wide { width: 100%; }
.btn svg { flex: none; }
.lien { border: 0; background: none; padding: 0; cursor: pointer; color: var(--cyan-ink); font-weight: 600; font-size: 13px; text-decoration: none; }
.lien:hover { text-decoration: underline; }

/* ------------------------------ Pastilles ------------------------------ */
.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--st-soft, #eef0f4); color: var(--st-ink, #4c5566);
  border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4;
}
.pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st, #a3adbd); }
.pastille.sans-point::before { display: none; }
.pastille.st-encours::before { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(59,157,255,.25); } }
.etiquette { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--line-2); color: var(--muted); }
.etiquette.refus { background: var(--danger-soft); color: #b42828; }
.etiquette.tybuzzy { background: var(--ink); color: #fff; }
.etiquette.tybuzzy img { width: 15px; height: 10px; border-radius: 2px; }

/* Icônes de réseau */
.res { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; color: #fff; flex: none; }
.res svg { width: 13px; height: 13px; }
.res.facebook { background: var(--fb); }
.res.instagram { background: var(--ig-grad); }
.res.petit { width: 18px; height: 18px; border-radius: 6px; }
.res.petit svg { width: 11px; height: 11px; }
.res.grand { width: 44px; height: 44px; border-radius: 13px; }
.res.grand svg { width: 24px; height: 24px; }
.reseaux { display: inline-flex; gap: 4px; }

/* ------------------------------ Connexion ------------------------------ */
.connexion {
  min-height: calc(100vh - var(--banner));
  display: grid; grid-template-columns: 1.05fr 1fr; background: #fff;
}
.connexion-visuel {
  position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column;
  background:
    radial-gradient(700px 420px at 15% 0%, rgba(0,212,255,.28), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, rgba(139,124,246,.28), transparent 60%),
    var(--ink);
}
.connexion-visuel-contenu { position: relative; flex: 1; padding: 56px 64px; }
.connexion-logo { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.connexion-visuel h2 { font-size: 46px; line-height: 1.05; margin: 56px 0 16px; max-width: 520px; font-weight: 600; }
.connexion-visuel h2 span { color: var(--cyan); display: block; }
.connexion-visuel p { color: #b9c2d3; font-size: 16px; max-width: 430px; margin: 0; }
.flottant {
  position: absolute; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.97); color: var(--ink); border-radius: 16px; padding: 10px 16px 10px 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.tuile { width: 56px; height: 56px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none; }
.tuile svg { width: 26px; height: 26px; }
.tuile-cyan { background: linear-gradient(140deg, var(--cyan), #0089c7); }
.tuile-violet { background: linear-gradient(140deg, #8b7cf6, #5141c4); }
.connexion-filigrane { position: absolute; right: -60px; top: 50%; transform: translateY(-50%) rotate(-8deg); width: 420px; height: auto; opacity: .06; pointer-events: none; filter: grayscale(1) brightness(3); }
.flottant div { display: grid; gap: 4px; justify-items: start; }
.flottant b { font-size: 14px; }
.flottant small { color: var(--muted); font-size: 12px; }
.flottant-1 { left: 64px; bottom: 210px; transform: rotate(-3deg); }
.flottant-2 { right: 56px; bottom: 300px; padding: 12px 18px 12px 12px; }
.flottant-3 { right: 90px; bottom: 90px; transform: rotate(2.5deg); }
.rond-ok { width: 36px; height: 36px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; font-weight: 700; }
.connexion-form-zone { display: grid; place-items: center; padding: 40px 24px; }
.connexion-carte { width: min(400px, 100%); display: grid; gap: 16px; }
.connexion-logo-mobile { display: none; border-radius: 8px; }
.surtitre { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-ink); }
.connexion-carte h1 { font-size: 32px; margin-top: -8px; }
.connexion-carte > p { margin: -8px 0 6px; }
.champ { display: grid; gap: 7px; font-weight: 600; font-size: 13px; }
.champ > span { display: flex; justify-content: space-between; }
.champ input, .champ select, .champ textarea, .input {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; font-weight: 400; font-size: 14px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.champ input:focus, .champ textarea:focus, .input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.lien-discret { font-weight: 500; color: var(--cyan-ink); text-decoration: none; }
.case { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.case input { accent-color: var(--ink); width: 16px; height: 16px; }
.separateur { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 12px; }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ------------------------------ Mise en page ------------------------------ */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: calc(100vh - var(--banner)); }
.sidebar {
  position: sticky; top: var(--banner); height: calc(100vh - var(--banner));
  background: var(--ink); color: #cfd6e4; display: flex; flex-direction: column; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; }
.brand-logo { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.brand-name { display: grid; font: 700 17px/1.2 var(--display); color: #fff; }
.brand-name small { font: 500 11.5px/1.4 var(--sans); color: #8d97ab; }
.client-carte {
  margin: 0 14px 14px; padding: 10px; border-radius: 14px; display: flex; gap: 10px; align-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
}
.client-avatar { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.client-carte b { display: block; color: #fff; font-size: 13px; line-height: 1.3; }
.client-carte small { color: #8d97ab; font-size: 11.5px; }
.btn.nouvelle-btn { margin: 0 14px 10px; width: auto; }
.sidenav { display: grid; gap: 3px; padding: 0 12px; }
.sidenav-label { font: 600 10.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: #6c768a; padding: 14px 10px 8px; }
.sidenav .tab {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
  color: #b9c2d3; text-decoration: none; font-weight: 500; transition: background .15s, color .15s;
}
.sidenav .tab svg { width: 19px; height: 19px; flex: none; }
.sidenav .tab:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidenav .tab.active { background: rgba(0,212,255,.12); color: #fff; box-shadow: inset 3px 0 0 var(--cyan); }
.sidenav .tab.active svg { color: var(--cyan); }
.tab-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font: 700 11px/20px var(--sans); text-align: center; }
.tab-badge.soleil { background: var(--soleil); color: #3b2a00; }
.tab-badge:empty { display: none; }
.sidebar-foot { margin-top: auto; padding: 16px 14px 16px; display: grid; gap: 12px; }
.aide-carte { border-radius: 14px; padding: 14px; background: linear-gradient(140deg, rgba(0,212,255,.16), rgba(139,124,246,.14)); border: 1px solid rgba(255,255,255,.08); }
.aide-carte b { color: #fff; font-family: var(--display); font-size: 15px; }
.aide-carte p { margin: 4px 0 10px; font-size: 12.5px; color: #b9c2d3; }
.aide-carte .btn { background: rgba(255,255,255,.95); border-color: transparent; }
.utilisateur { display: flex; align-items: center; gap: 10px; padding: 10px 4px 0; border-top: 1px solid rgba(255,255,255,.07); }
.utilisateur b { display: block; color: #fff; font-size: 13px; }
.utilisateur small { color: #8d97ab; font-size: 11.5px; }
.utilisateur .icon-btn { margin-left: auto; }
.avatar-lettres { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--display); background: var(--soleil); color: #3b2a00; flex: none; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #b9c2d3; border: 1px solid rgba(255,255,255,.12); }
.icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: var(--banner); z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 14px 32px; background: rgba(243,245,248,.86); backdrop-filter: saturate(1.4) blur(10px);
}
.mobile-brand { display: none; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font: 700 15px var(--display); }
.mobile-brand img { border-radius: 6px; }
.topbar-titre { font-size: 13px; color: var(--muted); font-weight: 500; }
.topbar-titre b { color: var(--ink); }
.topbar-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.rond-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.rond-btn:hover { background: var(--soft); }
.rond-btn .point { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px #fff; }
main { padding: 4px 32px 48px; outline: none; }
.barre-mobile { display: none; }

/* ------------------------------ Éléments communs ------------------------------ */
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 22px; flex-wrap: wrap; }
.entete h1 { font-size: 30px; line-height: 1.15; }
.entete p { margin: 4px 0 0; color: var(--muted); }
.entete-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.carte { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(230,233,239,.7); }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.carte-tete h2 { font-size: 17px; }
.carte-tete .sous { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.carte-corps { padding: 10px 20px 20px; }
.grille { display: grid; gap: 20px; }
.vide { text-align: center; padding: 30px 16px; color: var(--muted); }
.vide b { display: block; color: var(--ink); font-family: var(--display); font-size: 16px; margin-bottom: 4px; }
.vignette { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: none; background: var(--line-2); }
.vignette.vide-img { display: grid; place-items: center; color: var(--muted-2); font-size: 11px; }

/* Alerte */
.alerte {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; margin-bottom: 20px;
  background: linear-gradient(90deg, #fff1e6, #fff8f0); border: 1px solid #f9d4b4; color: #7a3d06;
}
.alerte .ico { width: 38px; height: 38px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(240,140,46,.2); }
.alerte b { color: #5c2c00; }
.alerte p { margin: 0; font-size: 13px; }
.alerte .btn { margin-left: auto; }

/* ------------------------------ Accueil ------------------------------ */
.bonjour { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin: 6px 0 22px; }
.bonjour .date { color: var(--muted); font-size: 13px; font-weight: 500; }
.bonjour .date::first-letter { text-transform: uppercase; }
.bonjour h1 { font-size: 32px; line-height: 1.15; margin-top: 2px; }
.bonjour h1 span { color: var(--cyan-ink); }
.bonjour p { margin: 6px 0 0; color: var(--muted); }

.kpis { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.kpi { padding: 18px 20px; display: grid; gap: 4px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-tete { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 500; }
.kpi-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--line-2); color: var(--ink); }
.kpi-ico svg { width: 17px; height: 17px; }
.kpi-val { font: 600 34px/1.1 var(--display); letter-spacing: -0.02em; margin-top: 8px; }
.kpi-sous { font-size: 12.5px; color: var(--muted); }
.kpi.vedette { background: var(--ink); color: #fff; border-color: var(--ink); position: relative; overflow: hidden; }
.kpi.vedette::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,212,255,.35), transparent 65%); }
.kpi.vedette .kpi-tete, .kpi.vedette .kpi-sous { color: #aab3c5; }
.kpi.vedette .kpi-ico { background: var(--cyan); color: #06222b; }
.kpi.vedette .kpi-val { color: #fff; }
.kpi .barre { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; margin-top: 8px; display: flex; }
.kpi .barre i { display: block; height: 100%; }
.kpi.soleil .kpi-ico { background: var(--soleil-soft); color: #8a5a00; }
.kpi.vert .kpi-ico { background: var(--good-soft); color: #147a4a; }
.kpi.rouge .kpi-ico { background: #fdeedd; color: #a3530b; }

.accueil-grille { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
.colonne { display: grid; gap: 20px; }

.prochaine-vedette { display: grid; grid-template-columns: 220px 1fr; gap: 18px; padding: 14px; margin: 4px 0 6px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line-2); cursor: pointer; }
.prochaine-vedette img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; }
.prochaine-vedette .quand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--cyan-ink); }
.prochaine-vedette h3 { font-size: 19px; margin: 6px 0 6px; }
.prochaine-vedette p { margin: 0 0 12px; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prochaine-vedette .bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compte-a-rebours { margin-left: auto; font-size: 12px; color: var(--muted); }

.ligne-pub { display: flex; align-items: center; gap: 14px; padding: 11px 8px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.ligne-pub:hover { background: var(--soft); }
.ligne-pub + .ligne-pub { border-top: 1px solid var(--line-2); }
.ligne-pub:hover + .ligne-pub { border-top-color: transparent; }
.ligne-pub .infos { min-width: 0; flex: 1; }
.ligne-pub .infos b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.ligne-pub .infos small { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.date-bloc { width: 52px; flex: none; text-align: center; border-radius: 12px; background: var(--soft); padding: 6px 0; border: 1px solid var(--line-2); }
.date-bloc b { display: block; font: 600 19px/1.1 var(--display); }
.date-bloc small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

.attente-carte { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 12px; }
.attente-carte + .attente-carte { margin-top: 12px; }
.attente-carte.a-vous { border-color: #ffd98a; background: linear-gradient(180deg, #fffaf0, #fff); }
.attente-haut { display: flex; gap: 12px; cursor: pointer; }
.attente-haut img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.attente-haut b { display: block; font-size: 14px; }
.attente-haut p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.attente-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.attente-bas .qui { font-size: 12px; color: var(--muted); margin-right: auto; display: flex; align-items: center; gap: 6px; }

.sante-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.sante-ligne + .sante-ligne { border-top: 1px solid var(--line-2); }
.sante-ligne .infos { flex: 1; min-width: 0; }
.sante-ligne b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sante-ligne small { color: var(--muted); font-size: 12px; }
.sante { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sante.valide { background: var(--good-soft); color: #147a4a; }
.sante.aReconnecter { background: #fdeedd; color: #a3530b; }
.sante::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.jour-mini { border-radius: 12px; padding: 8px 4px 10px; text-align: center; background: var(--soft); border: 1px solid var(--line-2); min-height: 76px; }
.jour-mini small { display: block; font-size: 10.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; letter-spacing: .05em; }
.jour-mini b { font: 600 17px/1.4 var(--display); }
.jour-mini.auj { background: var(--ink); color: #fff; border-color: var(--ink); }
.jour-mini.auj small { color: #aab3c5; }
.jour-mini .points { display: flex; justify-content: center; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.jour-mini .points i { width: 7px; height: 7px; border-radius: 50%; background: var(--st); }

/* ------------------------------ Calendrier ------------------------------ */
.cal-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav h2 { font-size: 22px; min-width: 190px; text-align: center; text-transform: capitalize; }
.carre-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; }
.carre-btn:hover { background: var(--soft); }
.segment { display: inline-flex; background: #e9ecf2; border-radius: 12px; padding: 3px; }
.segment button { border: 0; background: transparent; padding: 7px 13px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.segment button.actif { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(28,35,49,.12); }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-left: auto; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; background: var(--st); }
.legende i.facebook { background: var(--fb); }
.legende i.instagram { background: var(--ig-grad); }
.cal { overflow: hidden; }
.cal-tete, .cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-tete div { padding: 12px 12px 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); }
.cal-case { min-height: 124px; padding: 8px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; position: relative; }
.cal-case:nth-child(7n) { border-right: 0; }
.cal-case.hors { background: #fafbfc; }
.cal-case.hors .num { color: var(--muted-2); }
.cal-case.weekend:not(.hors) { background: #fcfcfd; }
.cal-case .num { font: 600 13px/1 var(--display); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.cal-case.auj .num { background: var(--cyan); color: #06222b; }
.cal-case .ajout { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 8px; border: 1px dashed #cfd5df; color: var(--muted); display: grid; place-items: center; text-decoration: none; opacity: 0; transition: opacity .15s; font-size: 15px; }
.cal-case:hover .ajout { opacity: 1; }
.evt {
  display: flex; align-items: center; gap: 6px; border-radius: 8px; padding: 4px 7px 4px 4px; cursor: pointer; font-size: 12px; font-weight: 600;
  background: var(--st-soft); color: var(--st-ink); border-left: 3px solid var(--st); min-width: 0; text-align: left; border-top: 0; border-right: 0; border-bottom: 0; width: 100%;
  transition: transform .1s, box-shadow .15s;
}
.evt:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(28,35,49,.1); }
.evt img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: none; }
.evt .h { opacity: .75; font-weight: 500; flex: none; }
.evt .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.evt.annulee .t { text-decoration: line-through; }
.mode-reseau .evt { --st-soft: #eef4ff; --st-ink: #1c2331; }
.mode-reseau .evt.r-facebook { --st: var(--fb); background: #e8f1fe; color: #0b4fae; }
.mode-reseau .evt.r-instagram { --st: var(--ig); background: #fde8f0; color: #a3164c; }
.mode-reseau .evt.r-deux { background: linear-gradient(90deg, #e8f1fe, #fde8f0); color: #3b2a6b; border-left-color: #6a5af9; }
.cal-liste { display: none; }

/* ------------------------------ Nouvelle publication ------------------------------ */
.editeur { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.etape { padding: 20px; }
.etape + .etape { border-top: 1px solid var(--line-2); }
.etape-titre { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.etape-titre .n { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 13px var(--display); }
.etape-titre h3 { font-size: 16px; }
.etape-titre .aide { margin-left: auto; font-size: 12px; color: var(--muted); }
.reseau-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reseau-opt { position: relative; display: flex; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.reseau-opt input { position: absolute; opacity: 0; }
.reseau-opt b { display: block; font-size: 14px; }
.reseau-opt small { color: var(--muted); font-size: 12px; }
.reseau-opt .coche { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfd5df; display: grid; place-items: center; color: transparent; flex: none; }
.reseau-opt:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.reseau-opt:has(input:checked) .coche { background: var(--ink); border-color: var(--ink); color: #fff; }
.reseau-opt .alerte-mini { display: block; color: #a3530b; font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.zone-texte { position: relative; }
.zone-texte textarea { width: 100%; min-height: 168px; resize: vertical; border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 40px; font-size: 14.5px; line-height: 1.6; }
.zone-texte textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.zone-texte .outils { position: absolute; left: 10px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 4px; }
.zone-texte .outils button { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.zone-texte .outils button:hover { background: var(--line-2); }
.zone-texte .compteur { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zone-texte .compteur.trop { color: var(--danger); font-weight: 700; }
.depot {
  border: 2px dashed #cfd5df; border-radius: 16px; padding: 22px; text-align: center; cursor: pointer; display: grid; gap: 6px; justify-items: center;
  background: var(--soft); transition: border-color .15s, background .15s;
}
.depot:hover, .depot.survol { border-color: var(--cyan); background: #effcff; }
.depot .ico { width: 46px; height: 46px; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); color: var(--cyan-ink); }
.depot b { font-size: 14px; }
.depot small { color: var(--muted); font-size: 12px; }
.miniatures { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.miniature { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.miniature img { width: 100%; height: 100%; object-fit: cover; }
.miniature button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(28,35,49,.75); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; }
.miniature .ordre { position: absolute; left: 5px; bottom: 5px; background: rgba(255,255,255,.92); border-radius: 6px; font-size: 10.5px; font-weight: 700; padding: 0 5px; }
.biblio { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.biblio span { font-size: 12px; color: var(--muted); margin-right: 4px; }
.biblio button { border: 0; padding: 0; width: 38px; height: 38px; border-radius: 9px; overflow: hidden; cursor: pointer; opacity: .9; outline: 1px solid var(--line); }
.biblio button:hover { opacity: 1; outline: 2px solid var(--cyan); }
.biblio img { width: 100%; height: 100%; object-fit: cover; }
.quand-choix { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.puce { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.puce:hover { border-color: #cfd5df; }
.puce.actif { background: var(--ink); color: #fff; border-color: var(--ink); }
.date-heure { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
.date-heure input { padding: 11px 13px; }
.info-fuseau { margin-top: 8px; font-size: 12px; color: var(--muted); }
.verifs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.verifs li { display: flex; gap: 9px; align-items: center; font-size: 13px; }
.verifs li i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; flex: none; }
.verifs li.ok i { background: var(--good-soft); color: var(--good); }
.verifs li.ko i { background: var(--danger-soft); color: var(--danger); }
.verifs li.ko { color: #b42828; }
.parcours { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 12px 14px; border-radius: 12px; background: var(--soft); margin-top: 14px; }
.parcours b { color: var(--ink); font-weight: 600; }
.parcours .fl { color: var(--muted-2); }
.actions-editeur { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line-2); background: rgba(255,255,255,.96); border-radius: 0 0 var(--radius) var(--radius); }
.actions-editeur .muted { margin-right: auto; font-size: 12.5px; }

.apercu-col { position: sticky; top: calc(var(--banner) + 76px); }
.apercu-tete { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
.apercu-tete h3 { font-size: 16px; margin-right: auto; }
.apercu-scene { padding: 20px; background: radial-gradient(500px 260px at 50% 0%, rgba(0,212,255,.1), transparent 70%), var(--soft); border-radius: 0 0 var(--radius) var(--radius); margin-top: 14px; border-top: 1px solid var(--line-2); display: grid; justify-items: center; min-height: 520px; align-content: start; }
.telephone { width: 340px; max-width: 100%; background: #fff; border-radius: 26px; box-shadow: 0 0 0 7px #1c2331, 0 24px 60px rgba(28,35,49,.28); overflow: hidden; margin-top: 6px; }
.tel-barre { height: 26px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; font-size: 11px; font-weight: 700; }
.fb-app, .ig-app { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: #050505; }
.fb-haut { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 8px; border-bottom: 1px solid #e4e6eb; }
.fb-haut .logo { color: var(--fb); font: 800 24px/1 -apple-system, Helvetica, Arial, sans-serif; letter-spacing: -0.04em; }
.fb-post-tete { display: flex; gap: 9px; padding: 10px 12px 6px; align-items: center; }
.fb-post-tete .av, .ig-tete .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.fb-post-tete b { font-size: 13.5px; display: block; }
.fb-post-tete small { font-size: 11.5px; color: #65676b; }
.fb-texte, .ig-legende { font-size: 13.5px; line-height: 1.38; padding: 2px 12px 10px; white-space: pre-wrap; word-wrap: break-word; }
.fb-texte .plus, .ig-legende .plus { color: #65676b; font-weight: 600; }
.fb-images { display: grid; gap: 2px; }
.fb-images.n2 { grid-template-columns: 1fr 1fr; }
.fb-images img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fb-images.n1 img { aspect-ratio: auto; max-height: 300px; }
.fb-images.n2 img { aspect-ratio: 1/1; }
.fb-reac { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 12px; color: #65676b; }
.fb-actions { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e4e6eb; margin: 0 12px; padding: 4px 0 8px; }
.fb-actions span { text-align: center; font-size: 12.5px; font-weight: 600; color: #65676b; padding: 6px 0; }
.ig-haut { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 8px; }
.ig-haut .logo { font: italic 600 22px/1 "Snell Roundhand", "Brush Script MT", cursive; }
.ig-tete { display: flex; align-items: center; gap: 9px; padding: 8px 12px; }
.ig-tete .av { width: 32px; height: 32px; padding: 2px; background: var(--ig-grad); }
.ig-tete b { font-size: 13px; }
.ig-tete .pts { margin-left: auto; font-weight: 800; letter-spacing: 1px; }
.ig-image { position: relative; aspect-ratio: 1/1; background: #efefef; }
.ig-image img { width: 100%; height: 100%; object-fit: cover; }
.ig-image .compte-img { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.ig-points { display: flex; justify-content: center; gap: 4px; padding-top: 6px; height: 12px; }
.ig-points i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.ig-points i:first-child { background: #0095f6; }
.ig-actions { display: flex; gap: 14px; padding: 4px 12px 6px; }
.ig-actions svg { width: 22px; height: 22px; }
.ig-actions .droite { margin-left: auto; }
.ig-legende b { margin-right: 5px; }
.ig-date { font-size: 10.5px; color: #8e8e8e; padding: 0 12px 14px; text-transform: uppercase; letter-spacing: .02em; }
.ig-vide { aspect-ratio: 1/1; display: grid; place-items: center; text-align: center; color: #8e8e8e; font-size: 13px; padding: 30px; background: repeating-linear-gradient(45deg, #fafafa 0 12px, #f2f2f2 12px 24px); }
.ig-vide b { display: block; color: #b42828; margin-bottom: 4px; }
.apercu-off { padding: 60px 30px; text-align: center; color: var(--muted); }

/* ------------------------------ Liste des publications ------------------------------ */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtre { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 12px 7px 11px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.filtre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st, var(--ink)); }
.filtre.tous::before { display: none; }
.filtre .nb { background: var(--line-2); border-radius: 99px; padding: 0 7px; font-size: 11.5px; color: var(--muted); }
.filtre:hover { border-color: #cfd5df; }
.filtre.actif { background: var(--ink); color: #fff; border-color: var(--ink); }
.filtre.actif .nb { background: rgba(255,255,255,.18); color: #fff; }
.liste-outils { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.recherche { flex: 1; min-width: 220px; max-width: 380px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 0 12px; }
.recherche input { border: 0; outline: 0; padding: 10px 0; flex: 1; background: transparent; }
.recherche:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.select { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 9px 12px; font-weight: 500; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tableau td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr { cursor: pointer; transition: background .12s; }
.tableau tbody tr:hover { background: var(--soft); }
.cell-pub { display: flex; gap: 12px; align-items: center; min-width: 0; }
.cell-pub .infos { min-width: 0; }
.cell-pub b { display: block; font-size: 14px; }
.cell-pub small { display: block; color: var(--muted); font-size: 12.5px; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cibles { display: flex; gap: 6px; flex-wrap: wrap; }
.cible { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.cible.publiee { color: #147a4a; }
.cible.echec { color: #b42828; background: var(--danger-soft); border-color: #f8d3d4; }
.cible.enCours { color: #1660b0; }
.cible.annulee { text-decoration: line-through; }
.quand-cell b { display: block; font-size: 13.5px; font-weight: 600; }
.quand-cell small { color: var(--muted); font-size: 12px; }
.chevron { color: var(--muted-2); }
.cartes-liste { display: none; }

/* ------------------------------ Comptes reliés ------------------------------ */
.relier { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; overflow: hidden; margin-bottom: 20px; }
.relier-texte { padding: 30px 32px; }
.relier-texte h2 { font-size: 24px; margin-bottom: 8px; }
.relier-texte p { color: var(--muted); margin: 0 0 18px; max-width: 520px; }
.relier-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.relier-etapes div { padding: 12px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); }
.relier-etapes b { display: block; color: var(--ink); font-size: 13px; margin: 6px 0 2px; }
.relier-etapes .n { width: 22px; height: 22px; border-radius: 7px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 12px var(--display); }
.relier-visuel { position: relative; background: radial-gradient(400px 260px at 70% 30%, rgba(0,212,255,.3), transparent 70%), var(--ink); display: grid; place-items: center; min-height: 260px; }
.relier-visuel .noeuds { display: flex; align-items: center; gap: 18px; }
.relier-visuel .noeud { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.relier-visuel .noeud svg { width: 36px; height: 36px; color: #fff; }
.relier-visuel .noeud.tb { background: #fff; width: 96px; height: 96px; border-radius: 26px; }
.relier-visuel .noeud.tb img { width: 66px; border-radius: 8px; }
.relier-visuel .noeud.facebook { background: var(--fb); }
.relier-visuel .noeud.instagram { background: var(--ig-grad); }
.relier-visuel .lien-pts { width: 34px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 5px, transparent 5px 10px); }
.relier-visuel .securite { position: absolute; bottom: 16px; left: 16px; right: 16px; color: #aab3c5; font-size: 12px; text-align: center; display: flex; gap: 6px; justify-content: center; align-items: center; }
.comptes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.compte { padding: 20px; display: grid; gap: 16px; }
.compte-tete { display: flex; gap: 14px; align-items: center; }
.compte-tete .infos { flex: 1; min-width: 0; }
.compte-tete b { display: block; font: 600 16px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte-tete small { color: var(--muted); font-size: 12.5px; }
.compte dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13px; }
.compte dt { color: var(--muted); }
.compte dd { margin: 0; text-align: right; font-weight: 500; }
.compte .erreur { padding: 12px 14px; border-radius: 12px; background: #fff4ea; color: #7a3d06; font-size: 13px; border: 1px solid #f9d4b4; }
.compte .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.compte.ko { box-shadow: 0 0 0 2px #f9d4b4, var(--shadow); }
.compte .perms { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.compte .perms span { background: var(--soft); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 7px; font-size: 11.5px; }
.faq { margin-top: 20px; }
.faq details { padding: 14px 20px; border-top: 1px solid var(--line-2); }
.faq details:first-of-type { border-top: 0; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 8px 0 0; font-size: 13.5px; }

/* ------------------------------ Tiroir détail ------------------------------ */
.voile { position: fixed; inset: 0; background: rgba(20,25,35,.45); z-index: 60; backdrop-filter: blur(2px); }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); z-index: 61; background: #fff;
  transform: translateX(105%); transition: transform .25s ease; overflow-y: auto; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.tiroir.ouvert { transform: none; }
.tiroir-tete { position: sticky; top: 0; background: #fff; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.tiroir-tete h2 { font-size: 18px; flex: 1; }
.fermer { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 18px; }
.tiroir-corps { padding: 20px 22px; display: grid; gap: 20px; }
.tiroir-image { width: 100%; height: 240px; object-fit: cover; border-radius: 16px; }
.tiroir-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.tiroir-images img { height: 180px; }
.bloc-titre { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.tiroir-texte { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.6; background: var(--soft); border-radius: 14px; padding: 14px 16px; }
.motif { padding: 14px 16px; border-radius: 14px; background: var(--danger-soft); border: 1px solid #f8d3d4; color: #8e1f1f; font-size: 13.5px; }
.motif b { display: block; margin-bottom: 2px; }
.cible-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.cible-ligne + .cible-ligne { margin-top: 8px; }
.cible-ligne .infos { flex: 1; min-width: 0; }
.cible-ligne b { display: block; font-size: 13.5px; }
.cible-ligne small { font-size: 12px; color: var(--muted); }
.cible-ligne small.err { color: #b42828; }
.chrono { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.chrono li { position: relative; padding: 0 0 16px 28px; font-size: 13px; }
.chrono li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--st, var(--cyan)); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.chrono li::after { content: ""; position: absolute; left: 10.5px; top: 20px; bottom: 0; width: 1px; background: var(--line); }
.chrono li:last-child::after { display: none; }
.chrono li.futur { color: var(--muted-2); }
.chrono li.futur::before { background: #fff; box-shadow: 0 0 0 1.5px #cfd5df; }
.chrono small { display: block; color: var(--muted); font-size: 12px; }
.tiroir-actions { position: sticky; bottom: 0; margin-top: auto; display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line-2); background: #fff; flex-wrap: wrap; }
.tiroir-actions .btn { flex: 1; }

/* ------------------------------ Modale ------------------------------ */
.modale-fond { position: fixed; inset: 0; z-index: 70; background: rgba(20,25,35,.55); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }
.modale { width: min(440px, 100%); background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; animation: monte .2s ease; }
@keyframes monte { from { transform: translateY(10px); opacity: 0; } }
.modale-corps { padding: 24px; display: grid; gap: 14px; }
.modale h3 { font-size: 20px; }
.modale p { margin: 0; color: var(--muted); }
.modale .actions { display: flex; gap: 10px; justify-content: flex-end; padding: 0 24px 22px; }

/* ------------------------------ Toasts ------------------------------ */
.toasts { position: fixed; z-index: 90; bottom: 22px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 14px; box-shadow: var(--shadow-lg); font-size: 13.5px; animation: monte .2s ease; }
.toast i { width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); color: #06222b; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; flex: none; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .accueil-grille { grid-template-columns: 1fr; }
  .editeur { grid-template-columns: 1fr; }
  .apercu-col { position: static; }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .mobile-brand { display: inline-flex; }
  .topbar { padding: 10px 16px; }
  .topbar-titre { display: none; }
  .topbar-nouvelle span { display: none; }
  .topbar-nouvelle { padding: 9px 11px; }
  main { padding: 4px 16px 100px; }
  .barre-mobile {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; z-index: 40; left: 10px; right: 10px; bottom: 10px; padding: 6px;
    background: rgba(28,35,49,.96); border-radius: 22px; box-shadow: 0 14px 40px rgba(28,35,49,.35);
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .barre-mobile a { display: grid; justify-items: center; gap: 2px; color: #8d97ab; text-decoration: none; font-size: 10.5px; font-weight: 600; padding: 6px 0; border-radius: 14px; }
  .barre-mobile a svg { width: 21px; height: 21px; }
  .barre-mobile a.active { color: #fff; }
  .barre-mobile a.active svg { color: var(--cyan); }
  .barre-mobile a.plus { width: 50px; height: 50px; justify-self: center; border-radius: 16px; background: var(--cyan); color: #06222b; place-items: center; box-shadow: 0 8px 20px rgba(0,212,255,.35); }
  .barre-mobile a.plus svg { width: 24px; height: 24px; }
  .connexion { grid-template-columns: 1fr; }
  .connexion-visuel { display: none; }
  .connexion-logo-mobile { display: block; }
  .relier { grid-template-columns: 1fr; }
  .relier-visuel { min-height: 200px; order: -1; }
}
@media (max-width: 720px) {
  .entete h1, .bonjour h1 { font-size: 25px; }
  .bonjour { grid-template-columns: 1fr; }
  .bonjour .entete-actions { display: none; }
  .kpis { gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-val { font-size: 28px; }
  .kpi-tete { font-size: 12px; }
  .kpi-sous { font-size: 11.5px; }
  .kpi .kpi-ico { width: 28px; height: 28px; }
  .prochaine-vedette { grid-template-columns: 1fr; }
  .prochaine-vedette img { height: 170px; }
  .alerte { flex-wrap: wrap; }
  .alerte .btn { margin-left: 52px; }
  .reseau-choix, .date-heure, .relier-etapes { grid-template-columns: 1fr; }
  .relier-texte { padding: 22px; }
  .cal-grille, .cal-tete { display: none; }
  .cal-liste { display: grid; }
  .cal-jour { display: flex; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
  .cal-jour:last-child { border-bottom: 0; }
  .cal-jour .date-bloc { align-self: flex-start; }
  .cal-jour .evts { flex: 1; display: grid; gap: 6px; min-width: 0; }
  .cal-jour .evt { padding: 6px 8px 6px 6px; }
  .legende { margin-left: 0; }
  .cal-nav h2 { min-width: 0; font-size: 19px; }
  .actions-editeur { flex-wrap: wrap; }
  .actions-editeur .muted { width: 100%; }
  .actions-editeur .btn { flex: 1; }
  .comptes-grille { grid-template-columns: 1fr; }
  .telephone { width: 100%; }
}

/* =====================================================================
   Couche « simplicité » : textes plus grands, gros boutons, peu de choix.
   Pensée d'abord pour le téléphone et pour des personnes peu à l'aise
   avec l'informatique.
   ===================================================================== */
body { font-size: 15.5px; }
.btn { font-size: 14.5px; min-height: 44px; }
.btn.small { min-height: 36px; }
.btn.large { padding: 13px 20px; font-size: 15.5px; min-height: 52px; border-radius: 14px; }
.btn.xl { padding: 16px 26px; font-size: 17px; min-height: 58px; border-radius: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.orange { background: #f08c2e; border-color: #f08c2e; color: #fff; box-shadow: 0 8px 20px rgba(240,140,46,.3); }
.btn.orange:hover { background: #e07b1c; }
.btn.orange .res { background: rgba(255,255,255,.22); }
.sidenav .tab { font-size: 15px; padding: 12px 12px; }
.nouvelle-btn { min-height: 50px; font-size: 15px; }
.pastille { font-size: 13px; padding: 4px 12px 4px 10px; }
.entete h1 { font-size: 32px; }
.entete p { font-size: 16px; }
.carte-tete h2 { font-size: 19px; }
.carte-tete .sous { font-size: 13.5px; }
.lien { font-size: 14px; }
.connexion-carte .btn.large { min-height: 56px; font-size: 16px; }
.champ { font-size: 14px; }
.champ input { font-size: 16px; padding: 14px 15px; }
.main-agitee { display: inline-block; animation: coucou 2.4s ease-in-out 1; transform-origin: 70% 70%; }
@keyframes coucou { 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } 50% { transform: none; } }

/* Grand bouton « Créer une publication » de l'accueil */
.creer-carte {
  position: relative; display: flex; align-items: center; gap: 24px; overflow: hidden;
  padding: 26px 28px; margin-bottom: 18px; border-radius: 24px; text-decoration: none; color: #fff;
  background: radial-gradient(600px 300px at 0% 0%, rgba(0,212,255,.35), transparent 60%), radial-gradient(500px 300px at 100% 100%, rgba(139,124,246,.35), transparent 60%), var(--ink);
  box-shadow: 0 18px 40px rgba(28,35,49,.22); transition: transform .15s, box-shadow .15s;
}
.creer-carte:hover { transform: translateY(-2px); box-shadow: 0 24px 50px rgba(28,35,49,.28); }
.creer-texte { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; z-index: 1; }
.creer-plus { width: 68px; height: 68px; border-radius: 20px; background: var(--cyan); color: #06222b; display: grid; place-items: center; flex: none; box-shadow: 0 10px 26px rgba(0,212,255,.45); }
.creer-plus svg { width: 32px; height: 32px; }
.creer-texte b { display: block; font: 600 26px/1.15 var(--display); letter-spacing: -.01em; }
.creer-texte div span { color: #b9c2d3; font-size: 15.5px; }
.creer-photos { display: flex; z-index: 1; }
.creer-photos img { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; border: 3px solid var(--ink); margin-left: -22px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.creer-photos img:nth-child(1) { transform: rotate(-8deg); }
.creer-photos img:nth-child(3) { transform: rotate(7deg); }
.creer-fleche { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; font-size: 24px; flex: none; z-index: 1; }

.alerte b { font-size: 16px; }
.alerte p { font-size: 14px; }
.alerte .ico .res { width: 28px; height: 28px; border-radius: 9px; }
.alerte.ok { background: linear-gradient(90deg, #e3f6ec, #f2fbf6); border-color: #bfe8d2; color: #145c3a; }
.alerte.ok b { color: #0f4a2e; }
.alerte.ok .ico { color: var(--good); font-weight: 800; font-size: 18px; }

.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-tete { font-size: 14px; }
.kpi-sous { font-size: 13.5px; }
.ligne-pub { padding: 13px 8px; }
.ligne-pub .infos b { font-size: 15.5px; }
.ligne-pub .infos small { font-size: 14px; }
.ligne-droite { display: flex; align-items: center; gap: 10px; flex: none; }
.attente-haut b { font-size: 15.5px; }
.attente-haut p { font-size: 13.5px; }
.attente-bas .btn { flex: 1; }
.rassurance { display: flex; gap: 14px; padding: 18px 20px; align-items: flex-start; background: linear-gradient(140deg, #f2fcff, #fff); }
.rassurance-ico { font-size: 26px; line-height: 1; }
.rassurance b { font: 600 16px var(--display); }
.rassurance p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* Calendrier simplifié */
.evt { font-size: 12.5px; padding: 5px 7px 5px 5px; }
.evt-res { display: none; }
.res.mini { width: 14px; height: 14px; border-radius: 4px; }
.res.mini svg { width: 9px; height: 9px; }
.legende { font-size: 13px; }
.cal-case { min-height: 118px; }

/* Création pas à pas */
.etapes-barre { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.etapes-barre button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: #fff; border-radius: 14px; padding: 12px 14px; cursor: pointer; text-align: left; box-shadow: var(--shadow); color: var(--muted); font-weight: 600; font-size: 14.5px; }
.etapes-barre .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); color: var(--muted); font: 700 14px var(--display); flex: none; }
.etapes-barre li.en-cours button { color: var(--ink); box-shadow: 0 0 0 2px var(--ink), var(--shadow); }
.etapes-barre li.en-cours .n { background: var(--ink); color: #fff; }
.etapes-barre li.fait .n { background: var(--good); color: #fff; }
.etapes-barre li.fait button { color: var(--ink-2); }
.editeur { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.etape-carte { display: flex; flex-direction: column; min-height: 560px; }
.etape-contenu { padding: 28px 30px 20px; flex: 1; }
.etape-num { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-ink); }
.etape-contenu h2 { font-size: 27px; line-height: 1.2; }
.etape-aide { margin: 8px 0 20px; color: var(--muted); font-size: 16px; }
.etape-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 30px 24px; border-top: 1px solid var(--line-2); }
.etape-nav.fin { justify-content: flex-end; flex-wrap: wrap; }
.etape-nav.fin #prec { margin-right: auto; }
.zone-texte textarea { min-height: 220px; font-size: 17px; padding: 16px 16px 50px; border-radius: 16px; }
.zone-texte .outils button { width: 38px; height: 38px; font-size: 20px; }
.idees { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.idees span { color: var(--muted); font-size: 14px; margin-right: 4px; }
.puce { font-size: 14px; padding: 9px 15px; }
.depot { padding: 34px 20px; gap: 8px; }
.depot .ico { width: 60px; height: 60px; border-radius: 18px; }
.depot b { font-size: 18px; }
.depot small { font-size: 14px; }
.miniature { width: 104px; height: 104px; }
.miniature button { width: 30px; height: 30px; font-size: 18px; }
.biblio { margin-top: 18px; }
.biblio span { width: 100%; font-size: 14px; margin-bottom: 4px; }
.biblio button { width: 54px; height: 54px; border-radius: 12px; }
.choix-quand { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.quand-opt, .reseau-opt { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.quand-opt:hover, .reseau-opt:hover { border-color: #cfd5df; }
.quand-opt .qi { font-size: 26px; line-height: 1; width: 34px; text-align: center; }
.quand-opt b, .reseau-opt b { display: block; font-size: 16px; }
.quand-opt small, .reseau-opt small { color: var(--muted); font-size: 13.5px; }
.quand-opt .coche, .reseau-opt .coche { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #cfd5df; display: grid; place-items: center; color: transparent; flex: none; font-weight: 800; font-size: 14px; }
.quand-opt.actif, .reseau-opt:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.quand-opt.actif .coche, .reseau-opt:has(input:checked) .coche { background: var(--ink); border-color: var(--ink); color: #fff; }
.date-heure { grid-template-columns: 1fr 180px; }
.info-fuseau { font-size: 14px; margin-top: 14px; }
.ou-publier { display: grid; gap: 10px; margin-bottom: 18px; }
.petit-titre { font-weight: 700; font-size: 15px; }
.reseau-opt { position: relative; }
.reseau-opt .alerte-mini { font-size: 13px; }
.recap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.recap div { background: var(--soft); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; }
.recap span { display: block; font-size: 13px; color: var(--muted); }
.recap b { font-size: 15.5px; }
.a-corriger { background: #fff4ea; border: 1px solid #f9d4b4; color: #7a3d06; border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; font-size: 14.5px; }
.a-corriger ul { margin: 6px 0 0; padding-left: 20px; }
.rassure-ligne { font-size: 14.5px; color: #145c3a; background: var(--good-soft); border-radius: 14px; padding: 12px 16px; }
.apercu-tete h3 { font-size: 18px; }
.segment button { font-size: 14px; padding: 8px 16px; }
.apercu-note { margin: 18px 0 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.apercu-scene { min-height: 0; padding-bottom: 24px; }

/* Mes publications : grandes cartes */
.filtres { gap: 10px; margin-bottom: 18px; }
.filtre { font-size: 14.5px; padding: 10px 16px 10px 14px; }
.cartes-pubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 16px; }
.carte-pub { display: flex; gap: 16px; padding: 14px; align-items: center; cursor: pointer; transition: transform .15s, box-shadow .15s; position: relative; }
.carte-pub:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.carte-pub-img { width: 112px; height: 112px; border-radius: 14px; object-fit: cover; flex: none; background: var(--line-2); }
.carte-pub-img.vide-img { display: grid; place-items: center; color: var(--muted-2); font-size: 12px; }
.carte-pub-infos { flex: 1; min-width: 0; display: grid; gap: 4px; }
.carte-pub-haut { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.carte-pub-infos > b { font: 600 17px/1.3 var(--display); margin-top: 2px; }
.carte-pub-infos > p { margin: 0; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte-pub-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.carte-pub-bas .quand { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.carte-pub .chevron { font-size: 28px; color: var(--muted-2); padding: 0 4px; }
.carte-pub.st-annulee .carte-pub-img { filter: grayscale(1); opacity: .6; }
.entete-creer { min-height: 50px; }

/* Tiroir */
.tiroir-tete h2 { font-size: 20px; }
.etat-gros { background: var(--st-soft); border-radius: 16px; padding: 14px 16px; }
.etat-gros .pastille { background: #fff; font-size: 14px; }
.etat-gros p { margin: 8px 0 0; color: var(--st-ink); font-weight: 500; font-size: 15px; }
.tiroir-texte { font-size: 15px; }
.tiroir-quand { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.cible-ligne b { font-size: 15px; }
.cible-ligne small { font-size: 13px; }
.cible { font-size: 12.5px; padding: 3px 10px; }
.chrono li { font-size: 14.5px; }
.bloc-titre { font-size: 12.5px; }

/* Comptes reliés */
.etat-comptes { text-align: center; padding: 40px 28px 36px; margin-bottom: 20px; display: grid; justify-items: center; gap: 10px; }
.etat-comptes h2 { font-size: 28px; }
.etat-comptes p { margin: 0 0 8px; color: var(--muted); font-size: 16px; max-width: 520px; }
.etat-ico { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font: 800 42px var(--display); color: #fff; margin-bottom: 6px; }
.etat-comptes.ok .etat-ico { background: var(--good); box-shadow: 0 0 0 12px var(--good-soft); }
.etat-comptes.ko .etat-ico { background: #f08c2e; box-shadow: 0 0 0 12px #fdeedd; }
.etat-comptes.ok { background: linear-gradient(180deg, #f2fbf6, #fff 60%); }
.etat-comptes.ko { background: linear-gradient(180deg, #fff6ee, #fff 60%); }
.comptes-simple { padding: 6px 22px; margin-bottom: 20px; }
.compte-ligne { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.compte-ligne + .compte-ligne { border-top: 1px solid var(--line-2); }
.compte-ligne .infos { flex: 1; min-width: 0; }
.compte-ligne b { display: block; font-size: 16px; }
.compte-ligne small { color: var(--muted); font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte-ligne .sante { font-size: 13.5px; padding: 5px 12px; }
.relier-bloc { display: flex; align-items: center; gap: 20px; padding: 20px 22px; flex-wrap: wrap; }
.relier-bloc > div { flex: 1; min-width: 240px; }
.relier-bloc b { font: 600 16px var(--display); }
.relier-bloc p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.succes { justify-items: center; padding-top: 32px; }
.succes-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; font-size: 34px; font-weight: 800; box-shadow: 0 0 0 10px var(--good-soft); margin-bottom: 8px; }
.modale .actions.centre { justify-content: center; flex-wrap: wrap; }
.modale h3 { font-size: 22px; }
.modale p { font-size: 15px; }

@media (max-width: 1280px) {
  .kpis-3 { grid-template-columns: repeat(3, 1fr); }
  .editeur { grid-template-columns: 1fr; }
  .editeur:not(.etape-4) .apercu-col { display: none; }
  .etape-carte { min-height: 0; }
}
@media (max-width: 980px) {
  .creer-photos { display: none; }
  .entete-creer { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  main { padding: 0 14px 104px; }
  .bonjour { margin: 4px 0 16px; }
  .bonjour h1 { font-size: 28px; }
  .bonjour p { font-size: 15px; }
  .creer-carte { padding: 20px; gap: 14px; border-radius: 22px; }
  .creer-texte { gap: 14px; }
  .creer-plus { width: 56px; height: 56px; border-radius: 17px; }
  .creer-plus svg { width: 28px; height: 28px; }
  .creer-texte b { font-size: 21px; }
  .creer-texte div span { font-size: 14px; display: block; margin-top: 2px; }
  .creer-fleche { display: none; }
  .alerte { padding: 14px; gap: 12px; }
  .alerte .btn { margin-left: 0; width: 100%; }
  .kpis-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpis-3 .kpi { padding: 12px; }
  .kpis-3 .kpi-tete { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.25; }
  .kpis-3 .kpi-val { font-size: 26px; margin-top: 0; }
  .kpis-3 .kpi-sous { display: none; }
  .ligne-pub { gap: 12px; padding: 12px 2px; }
  .ligne-droite .reseaux { display: none; }
  .ligne-pub .pastille { font-size: 12px; padding: 3px 9px 3px 8px; }
  .ligne-pub .infos b { font-size: 15px; }
  .ligne-pub .infos small { font-size: 13px; }
  .carte-tete { padding: 16px 16px 4px; }
  .carte-corps { padding: 8px 14px 16px; }
  .attente-bas { flex-direction: column; align-items: stretch; }
  .etapes-barre { gap: 6px; }
  .etapes-barre button { flex-direction: column; gap: 4px; padding: 10px 4px; text-align: center; font-size: 11.5px; line-height: 1.2; }
  .etape-contenu { padding: 20px 18px 16px; }
  .etape-contenu h2 { font-size: 23px; }
  .etape-aide { font-size: 15px; }
  .etape-nav { padding: 14px 18px 18px; }
  .etape-nav .btn.xl { flex: 1; }
  .etape-nav.fin { flex-direction: column-reverse; align-items: stretch; }
  .etape-nav.fin #prec { margin: 0; }
  .choix-quand { grid-template-columns: 1fr; }
  .recap { grid-template-columns: 1fr 1fr; }
  .cartes-pubs { grid-template-columns: 1fr; gap: 12px; }
  .carte-pub { gap: 12px; padding: 12px; align-items: flex-start; }
  .carte-pub-img { width: 84px; height: 84px; border-radius: 12px; }
  .carte-pub .chevron { display: none; }
  .carte-pub-infos > b { font-size: 16px; }
  .carte-pub-infos > p { font-size: 13.5px; }
  .filtres { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 16px; padding: 2px 14px 6px; scrollbar-width: none; }
  .filtre { flex: none; }
  .etat-comptes { padding: 30px 18px 26px; }
  .etat-comptes h2 { font-size: 23px; }
  .etat-comptes .btn.xl { width: 100%; }
  .relier-bloc .btn { width: 100%; white-space: normal; }
  .tiroir-actions .btn { min-width: 100%; }
  .entete { margin-bottom: 16px; }
  .entete h1 { font-size: 27px; }
}
/* La colonne sombre descend jusqu'en bas, même sur une longue page */
@media (min-width: 981px) { .app { background: linear-gradient(90deg, var(--ink) var(--sidebar), transparent 0); } }
/* Calendrier : heure au-dessus, titre sur 2 lignes (plus lisible que des « … ») */
.cal-case .evt { display: grid; grid-template-columns: 26px 1fr; column-gap: 7px; row-gap: 1px; align-items: start; text-align: left; padding: 6px 8px 6px 6px; }
.cal-case .evt:not(:has(img)) { grid-template-columns: 1fr; }
.cal-case .evt img { grid-row: span 2; width: 26px; height: 26px; border-radius: 6px; }
.cal-case .evt .h { font-size: 11.5px; line-height: 1.2; }
.cal-case .evt .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
/* Étape 4 : le bouton principal en grand, seul sur sa ligne */
.etape-nav.fin { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; }
.etape-nav.fin #envoyer { order: -1; grid-column: 1 / -1; width: 100%; }
.etape-nav.fin #brouillon { justify-self: end; }
@media (max-width: 720px) {
  .etape-nav.fin { display: grid; }
  .etape-nav.fin #prec { margin: 0; }
}
.tiroir { top: var(--banner); }
.cible-ligne small { display: block; white-space: normal; line-height: 1.35; }
@media (min-width: 981px) { .entete-creer { display: none; } }
.accueil-grille > *, .colonne > * { min-width: 0; }
@media (max-width: 720px) {
  .accueil-grille { grid-template-columns: minmax(0, 1fr); }
  .ligne-pub { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; }
  .ligne-pub > :first-child { grid-row: span 2; align-self: start; }
  .ligne-pub .infos b { white-space: normal; }
  .ligne-droite { justify-self: start; }
  .carte-tete { flex-wrap: wrap; gap: 6px 12px; }
  .recap { grid-template-columns: 1fr; }
}
.barre-mobile a.plus, .barre-mobile a.plus.active, .barre-mobile a.plus.active svg { color: #06222b; }
.barre-mobile a span { font-size: 11.5px; }
/* Téléphone : les onglets passent à la ligne plutôt que de défiler (plus facile à trouver) */
@media (max-width: 720px) {
  .filtres { flex-wrap: wrap; overflow: visible; margin: 0 0 16px; padding: 0; gap: 8px; }
  .filtre { font-size: 14px; padding: 9px 13px 9px 11px; }
}

/* =====================================================================
   Espace client réel : connexion, chargement, messages d'erreur.
   ===================================================================== */
.chargement { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--bg); color: var(--muted); z-index: 90; }
.chargement img { animation: respire 1.4s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .45; } }
.client-avatar.lettres { display: grid; place-items: center; background: var(--cyan); color: #06222b; font: 700 15px var(--display); flex: none; }
.form-erreur { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fdecec; color: #b42828; font-size: 13.5px; line-height: 1.4; }
.champ-aide { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.champ input[readonly] { background: var(--bg); color: var(--muted); }
.toast.erreur i { background: #ef5b5b; color: #fff; }
.toast.info i { background: var(--soleil); color: #3b2a00; }
.titre-pub { margin-top: 4px; }
.titre-pub input { width: 100%; }
.envoi-photo { display: grid; place-items: center; background: var(--bg); color: var(--muted); font-size: 12px; }
.a-faire-liste { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.a-faire-liste a, .a-faire-liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-align: left; text-decoration: none; color: var(--ink); cursor: pointer; font-weight: 600; }
.a-faire-liste small { display: block; color: var(--muted); font-weight: 400; }
.demande-client { background: var(--bg); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.demande-client b { display: block; margin-bottom: 4px; }
.compte-ligne .expire { display: block; color: var(--muted); font-size: 12.5px; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* « Ty Buzzy vous propose cette version » : très simple, gros boutons */
.attente-carte.proposition .etiquette { display: inline-block; margin-bottom: 4px; }
.proposition-bloc { display: grid; gap: 10px; }
.proposition-bloc .bloc-titre { font-size: 15px; }
.mot-tybuzzy { padding: 12px 14px; border-radius: 14px; background: var(--cyan-soft); border: 1px solid rgba(0,137,168,.22); font-size: 15px; color: var(--ink); }
.mot-tybuzzy b { display: block; margin-bottom: 2px; font-size: 13.5px; color: var(--cyan-ink); }
.tiroir-texte.proposee { background: #fff; border: 2px solid #ffd98a; font-size: 16px; }
.tiroir-texte.origine { color: var(--muted); }
.btn.voir-origine { min-height: 48px; font-weight: 600; }
.tiroir-actions.gros-choix { flex-direction: column; }
.tiroir-actions.gros-choix .btn { width: 100%; }
.btn.xl { min-height: 60px; font-size: 18px; font-weight: 700; border-radius: 16px; }