:root {
  --p: #0057B8;
  --s: #F58220;
  --bg: #f4f6fa;
  --card: #ffffff;
  --ink: #152238;
  --muted: #6b7688;
  --border: #e2e6ee;
  --ok: #1B8A5A;
  --off: #9aa3b2;
  --danger: #C81E3A;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}
header {
  background: var(--p);
  color: #fff;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header h1 { font-size: 18px; margin: 0; font-weight: 800; }
header .logout { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 6px 14px; border-radius: 100px; cursor: pointer; font-size: 13px; }
header .logout:hover { background: rgba(255,255,255,.28); }
header .header-right { display: flex; align-items: center; gap: 10px; }
header .site-link { color: #fff; text-decoration: none; font-size: 13px; padding: 6px 14px; border-radius: 100px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); }
header .site-link:hover { background: rgba(255,255,255,.28); }

main { max-width: 1180px; margin: 0 auto; padding: 24px 28px 60px; }

.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tabs button {
  background: var(--card); border: 1px solid var(--border); padding: 10px 20px;
  border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--muted);
}
.tabs button.active { background: var(--p); color: #fff; border-color: var(--p); }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.card h2 { margin: 0 0 14px; font-size: 16px; }

.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.toolbar input[type=text], .toolbar select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.toolbar input[type=text] { flex: 1; min-width: 200px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; padding: 10px 10px; color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--border); white-space: nowrap; }
td { padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:hover td { background: #fafbfd; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.badge.actif, .badge.essai { background: rgba(27,138,90,.12); color: var(--ok); }
.badge.inactif { background: rgba(154,163,178,.18); color: var(--off); }
.badge.auto { background: rgba(0,87,184,.12); color: var(--p); }
.badge.manuel { background: rgba(245,130,32,.15); color: #b8630f; }

select.inline, input.inline {
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 13px; font-family: inherit;
  background: #fff;
}
input.inline { width: 100%; min-width: 140px; }

button.btn {
  background: var(--p); color: #fff; border: none; padding: 7px 14px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 700;
}
button.btn.secondary { background: #fff; color: var(--p); border: 1px solid var(--p); }
button.btn.danger { background: #fff; color: var(--danger); border: 1px solid var(--danger); }
button.btn:disabled { opacity: .5; cursor: default; }
button.btn.small { padding: 5px 10px; font-size: 12px; }

.desc-cell { max-width: 260px; }
.desc-cell textarea {
  width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px;
  font-family: inherit; font-size: 12.5px; resize: vertical;
}

.subject-cell { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.subject-cell .mode-row { display: flex; gap: 6px; align-items: center; }

.msg { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.msg.error { background: rgba(200,30,58,.1); color: var(--danger); }
.msg.ok { background: rgba(27,138,90,.1); color: var(--ok); }
.msg.warn { background: rgba(230,150,20,.12); color: #8a5a00; }
.msg a { color: inherit; font-weight: 700; }
/* Bouton de generation immediate d'un flyer (1re colonne du tableau des sujets) */
button.btn.generate { background: #fff; color: var(--p); border: 1px solid var(--p); white-space: nowrap; }
button.btn.generate:hover:not(:disabled) { background: var(--p); color: #fff; }
button.btn.generate:disabled { opacity: .5; cursor: not-allowed; }
button.btn.generate.running { background: var(--p); color: #fff; opacity: 1; }
td.generate-cell { white-space: nowrap; vertical-align: top; }
/* Lien vers le dossier Drive du client, sous le bouton Generer */
.flyers-link {
  display: block; margin-top: 6px; text-align: center; font-size: 12px;
  color: var(--p); text-decoration: none; white-space: nowrap;
}
.flyers-link:hover { text-decoration: underline; }
.flyers-link.none { color: var(--off); cursor: help; }

#login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--p);
}
#login-screen .box { background: #fff; padding: 40px; border-radius: 16px; width: 340px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
#login-screen h1 { font-size: 20px; margin: 0 0 6px; }
#login-screen p { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
#login-screen input { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; margin-bottom: 12px; }
#login-screen button { width: 100%; padding: 11px; }

.hidden { display: none !important; }
.new-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.new-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 700; min-width: 0; }
.field-status { font-weight: 700; text-transform: none; letter-spacing: 0; }
.field-status.set { color: var(--ok); }
.field-status.unset { color: var(--off); }
.new-form input, .new-form select, .new-form textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; min-width: 0; width: 100%; font-family: inherit; resize: vertical; }
.new-form .span2 { grid-column: span 2; }
.new-form .span4 { grid-column: span 4; }
.new-form .chips-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.new-form .chips-label { font-size: 12px; color: var(--muted); font-weight: 700; }
/* Phrase d'aide sous un champ — même rôle que .hint sur la page d'inscription
   (onboarding/inscription.html) : elle explique quoi choisir, pas juste quoi saisir. */
.new-form .field-hint { font-size: 12px; line-height: 1.35; color: var(--muted); font-weight: 500; margin: 0; }
/* Propositions de catégorie : réutilise les blocs .validation-* de l'onglet
   « Réponses à valider », même geste (lire, trancher en un clic). */
.piste-motif { font-size: 11px; color: var(--muted); font-weight: 500; }
.alerte-ko { color: var(--danger); }
.alerte-ko .btn-relancer { margin-left: 8px; font-size: 11px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--danger); background: transparent; color: var(--danger); cursor: pointer; }
/* Bandeau « sujets qui ne suivent pas le secteur », en tête de l'onglet Clients.
   Il n'existe à l'écran que quand il a quelque chose à dire. */
#plans-incoherents { margin-bottom: 14px; }
#plans-incoherents .alerte-ko { border: 1px solid var(--danger); border-radius: 10px;
  padding: 12px 14px; background: #fdf3f3; font-size: 13px; line-height: 1.45; }
.plan-incoherent { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e6c9c9; color: var(--ink); }
.plan-incoherent code { background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); }
.plan-incoherent .btn-realigner { margin-top: 6px; font-size: 12px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--danger); background: transparent; color: var(--danger); cursor: pointer; }
.plan-incoherent .btn-realigner:disabled { opacity: .55; cursor: default; }
.select-secteur { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; max-width: 340px; }
/* Domaine d'un sujet : c'est lui qui décide du dossier de photos. */
.tag-domaine { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px;
  font-weight: 700; background: #eef3fb; color: var(--p); border: 1px solid #d5e2f5; white-space: nowrap; }
.tag-domaine.vide { background: transparent; color: var(--muted); border-style: dashed; font-weight: 500; }

/* Synthèse des spécialités d'un client et des sujets qui les servent. */
.dom-synthese { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: var(--card2, #f6f9fe); }
.dom-titre { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.dom-cases { display: flex; flex-wrap: wrap; gap: 8px; }
.dom-case { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--card); min-width: 150px; }
.dom-case.muet { border-color: var(--danger); }
.dom-nom { font-size: 12px; font-weight: 700; color: var(--ink); }
.dom-chiffres { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dom-alerte { font-size: 11px; font-weight: 700; color: var(--danger); margin-top: 3px; }
.dom-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.4; }
.dom-note.alerte { color: var(--danger); }

.btn-creer { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--p); background: var(--p);
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-creer:hover { filter: brightness(1.08); }
/* Résultat d'une création : ce qui est fait et ce qui reste, distingués à l'œil. */
.etapes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.etapes li { font-size: 12px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); }
.etapes .etape-ok { border-color: var(--ok); color: var(--ok); }
.etapes .etape-reste { border-color: var(--s); color: var(--s); }

.new-form .req { color: var(--danger); }
/* Bloc Spécialités laissé vide alors que la catégorie en exige : signalé comme à l'inscription. */
.new-form .chips-field.has-error .chips-label { color: var(--danger); }
.new-form .chips-field.has-error .chips { outline: 1px solid var(--danger); outline-offset: 4px; border-radius: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--ink); user-select: none; }
.chips .chip input { width: auto; margin: 0; accent-color: var(--p); cursor: pointer; }
.chips .chip.checked { border-color: var(--p); font-weight: 700; }

main, .card { overflow-x: auto; }

.empty { color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }

.actions-cell { display: flex; gap: 6px; white-space: nowrap; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(21,34,56,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal {
  background: #fff; border-radius: 14px; padding: 24px; width: 100%; max-width: 780px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.modal h2 { margin: 0 0 16px; font-size: 16px; }
.modal h2 span { color: var(--muted); font-weight: 500; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-narrow { max-width: 440px; }
.modal-hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 16px; }

.stats-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; min-width: 150px; }
.stat .label { color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.stat .value { font-size: 22px; font-weight: 800; margin-top: 4px; }
.stat.accent .value { color: var(--ok); }
.stat.warn .value { color: var(--s); }
.stat.danger { border-color: var(--danger); }
.stat.danger .value { color: var(--danger); }
.stat .sub { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* Ligne secondaire dans une cellule (identifiant client, horodatage) */
.sub { font-size: 11px; color: var(--off); }

/* ── File de validation des réponses de quiz (30/07/2026) ─────────────────── */
/* Le bouton d'onglet porte une pastille : une réponse en attente est un client
   qui n'a pas eu sa révélation, ça ne doit pas se découvrir par hasard. */
.tabs button .badge {
  display: inline-block; margin-left: 7px; min-width: 18px; padding: 1px 6px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
}
.tabs button.active .badge { background: #fff; color: var(--danger); }

.validation-item {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px; background: var(--card);
}
.validation-head { font-size: 14px; margin-bottom: 6px; }
.validation-motif { font-size: 12px; color: var(--s); font-weight: 700; margin-bottom: 10px; }
.validation-question { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.validation-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }

/* Chaque proposition EST le bouton de validation : un clic = la réponse part.
   Celle que l'IA proposait est signalée, sans être présélectionnée : c'est
   précisément elle qui s'était trompée le 30/07. */
.btn-option {
  text-align: left; padding: 11px 13px; font-size: 14px; font-family: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer; color: var(--ink); transition: border-color .12s, background .12s;
}
.btn-option:hover:not(:disabled) { border-color: var(--ok); background: rgba(27,138,90,.07); }
.btn-option:disabled { opacity: .55; cursor: default; }
.btn-option.propose { border-color: var(--s); }
.btn-option .hint { color: var(--s); font-size: 11px; font-weight: 700; }
.opt-fixe { padding: 11px 13px; font-size: 14px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); }
.opt-fixe.propose { border-color: var(--s); }

.validation-actions { margin-top: 12px; }
.btn-refuser {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.btn-refuser:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

.tag { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; background: rgba(154,163,178,.18); color: var(--off); }
.tag.warn { background: rgba(245,130,32,.14); color: var(--s); }
.tag.ok { background: rgba(27,138,90,.12); color: var(--ok); }
.tag.danger { background: rgba(200,30,58,.12); color: var(--danger); }

/* Vignette absente : un cadre neutre plutôt qu'une image cassée. */
.flyer-vide{ width:64px; height:80px; border-radius:8px; background:var(--bg); border:1px solid var(--border); flex-shrink:0 }

/* ── Flyers du jour et visites du site (01/08/2026) ────────────────────────── */
.toolbar-note { color: var(--muted); font-size: 13px; }
.vide { color: var(--muted); font-size: 14px; padding: 10px 2px; }
.btn-secondaire {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer;
}
.btn-secondaire:hover { border-color: var(--p); color: var(--p); }

/* Vignettes : auto-fill plutot qu'un nombre fixe de colonnes, pour que la grille
   tienne aussi bien sur un telephone (une colonne) que sur un grand ecran. */
.flyers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.flyer-carte { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
.flyer-carte img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--bg); }
.flyer-carte .sans-image {
  width: 100%; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--muted); font-size: 13px;
}
.flyer-carte figcaption { padding: 10px 12px 12px; }
.flyer-carte .ligne1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.flyer-carte .ligne1 strong { font-size: 14px; }
.flyer-carte .heure { color: var(--muted); font-size: 12px; flex: none; }
.flyer-carte .ligne2 { color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.35; }
.flyer-carte .ligne3 { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.pastille { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 700;
            background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.pastille.ok { color: var(--ok); border-color: var(--ok); }
.pastille.warn { color: var(--s); border-color: var(--s); }
.pastille.danger { color: var(--danger); border-color: var(--danger); }

/* Graphe en barres, sans bibliotheque : une div par jour, hauteur en pourcentage.
   Le survol donne le detail, l'axe se lit sous le graphe. */
.graphe { display: flex; align-items: flex-end; gap: 3px; height: 150px; margin: 18px 0 6px;
          padding: 0 2px; border-bottom: 2px solid var(--border); }
.graphe .barre { flex: 1; min-width: 3px; background: var(--p); border-radius: 3px 3px 0 0; opacity: .85; }
.graphe .barre:hover { opacity: 1; background: var(--s); }
.graphe-legende { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 18px; }
.tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.top-liste h3 { font-size: 14px; margin: 0 0 8px; }
.top-liste ul { list-style: none; margin: 0; padding: 0; }
.top-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.top-liste .cle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-liste .n { color: var(--muted); font-weight: 700; flex: none; }

/* Bouton de run complet : volontairement distinct des boutons secondaires, il
   declenche l'envoi de vrais flyers a de vrais clients. */
.btn-run {
  padding: 9px 16px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--p); color: #fff; font-weight: 800; font-size: 14px;
}
.btn-run:hover { background: var(--ink); }
.btn-run:disabled { opacity: .55; cursor: default; }
.case-forcer { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.case-forcer input { margin: 0; }

/* Import du logo depuis la fiche client (02/08/2026).
   L'apercu est BORNE : un logo est parfois une capture d'ecran verticale, et
   sans plafond il repoussait la moitie du formulaire hors de l'ecran. */
.logo-import { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.logo-apercu {
  max-height: 56px; max-width: 190px; object-fit: contain;
  border: 1px solid var(--border); border-radius: 8px; padding: 4px; background: #fff;
}

/* Charte extraite du logo (11/08/2026) */
/* Le bloc occupe les QUATRE colonnes de .new-form, et non deux : il porte des
   pastilles et trois actions sur une ligne. `align-self` annule le
   `align-items:end` de la grille, qui collait le bloc au bas de sa rangee. */
.palette-entete { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.palette-pastilles { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 8px; }
.palette-pastille { display: flex; align-items: center; gap: 7px; }
/* Couleur posee en `background-color` par le script. Pas de damier de
   transparence : une couleur EXTRAITE est toujours opaque, le damier ne faisait
   que recouvrir la teinte qu'on venait chercher. */
.palette-pastille .dot {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22);
}
.palette-pastille .txt { display: flex; flex-direction: column; line-height: 1.2; }
.palette-pastille code { font-size: 12px; }
.palette-pastille span { font-size: 11px; color: var(--muted); }
/* Le couple RETENU, distingue des couleurs trouvees (19/08/2026). Encadre et
   detache : c'est la seule information qui dit ce que le bouton va faire. */
.palette-retenu { border-left: 3px solid var(--accent, #0057b8); padding: 8px 0 6px 11px; margin: 4px 0 10px; }
.palette-retenu-couple { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.palette-retenu-titre { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.palette-swatch {
  width: 17px; height: 17px; border-radius: 4px; display: inline-block;
  border: 1px solid rgba(0, 0, 0, .22); flex: 0 0 auto;
}
.palette-retenu-couple code { font-size: 12px; }
.palette-retenu-raisons { margin: 6px 0 0; padding-left: 16px; }
.palette-retenu-raisons li { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.palette-retenu-warn { color: #92400e; font-weight: 600; }
.palette-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
/* Selecteur prefixe par .new-form : sans cela, `.new-form label` (specificite
   superieure) impose flex-direction:column a ce label, et la case a cocher se
   retrouve AU-DESSUS de son texte au lieu d'etre a cote. */
.new-form .palette-verrou { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 13px; margin: 0; text-transform: none; }
/* `.new-form input` impose width:100% a tous les champs : sans cette exception,
   la case a cocher prend toute la largeur et pousse son libelle a la ligne. */
.palette-verrou input[type="checkbox"] { width: auto; margin: 0; flex: none; }
#ce-palette-bloc { align-self: start; }

/* Taille d'affichage du logo (18/08/2026).
   Le cadre fait 216x270 px, c'est-a-dire un flyer 1080x1350 a 0,20 d'echelle :
   la taille a laquelle une vignette passe dans un fil. L'apercu du logo est
   dimensionne en JS avec le MEME calcul que logoBox() cote moteur, sinon le
   reglage montrerait autre chose que ce que le client recevra. */
.logo-taille { margin-top: 6px; }
.logo-taille-corps { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.logo-taille-reglage { flex: 1 1 300px; min-width: 260px; }
.logo-taille-reglage input[type="range"] { width: 100%; }
.logo-taille-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.logo-taille-figure { flex: none; margin: 0; }
.logo-taille-figure figcaption { max-width: 216px; margin-top: 6px; line-height: 1.3; }
.logo-taille-cadre {
  width: 216px; height: 270px; flex: none; position: relative;
  border: 1px solid var(--border); border-radius: 8px; background: #f4f5f7;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.logo-taille-cadre img { object-fit: contain; }
.logo-taille[data-inactif="1"] .logo-taille-corps { opacity: .55; }

/* Encaissements Mobile Money (03/08/2026) */
.sous-titre { font-size: 14px; margin: 22px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.discret { color: var(--muted); font-size: 12.5px; }
/* Le SMS brut est tronqué à la lecture mais conservé en entier dans le title :
   c'est lui qu'il faut relire le jour où un opérateur change ses libellés. */
.sms-corps { max-width: 340px; color: var(--muted); font-size: 12.5px; }

/* ── Parrainage / codes promo (10/08/2026) ──────────────────────────────────
   Le formulaire de création est déplié à la demande : huit champs affichés en
   permanence au-dessus du tableau feraient passer la liste des codes, qui est
   ce qu'on vient regarder, sous la ligne de flottaison. */
.promo-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 4px 0 12px; }
.promo-grille label, .promo-note { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.promo-grille input, .promo-grille select, .promo-note input {
  width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13.5px; font-weight: 400; color: var(--ink); background: var(--card); }
.promo-grille .sub { font-weight: 400; }
.promo-note { margin-bottom: 12px; }
.promo-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.promo-sous-titre { font-size: 15px; margin: 26px 0 6px; }
/* L'écart entre « formulaires envoyés » et « clients créés » est le seul chiffre
   de ce tableau qui appelle une action : il est en rouge, les autres non. */
.sub.alerte { color: var(--danger); font-weight: 700; }
.badge.danger { background: rgba(200,30,58,.12); color: var(--danger); }

/* Bouton d'octroi des credits meditations (20/08/2026) : la grille .new-form
   se termine sur ses champs, le bouton a besoin de son propre espace. */
#credit-accorder { margin-top: 12px; }

/* Bareme des meditations (20/08/2026) : trois champs cote a cote, dans l'ordre
   des trois colonnes de solde qui les precedent. */
.bareme-trio { display: flex; gap: 4px; }
/* min-width EST INDISPENSABLE ICI : .inline en porte un de 140px, qui gagnerait
   sur la largeur ci-dessous et donnerait trois champs de 140px dans une cellule
   de tableau — la ligne deborderait sans qu aucune regle n ait l air fautive. */
input.inline.bareme { width: 48px; min-width: 48px; text-align: center; }

/* Le resume de la prospection (24/08/2026). Quatre ou cinq nombres qui se
   lisent d'un coup d'oeil : c'est la premiere chose que Seraphin regarde en
   ouvrant l'onglet, avant meme la liste. */
.tuiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px }
.tuiles .tuile { flex: 1 1 130px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  display: flex; flex-direction: column; gap: 2px }
.tuiles .tuile .n { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1 }
.tuiles .tuile span:last-child { font-size: 12px; color: var(--muted); line-height: 1.35 }
/* Une conversion est la seule chose qui compte vraiment : elle se distingue. */
.tuiles .tuile.bonne { border-color: rgba(27,138,90,.45); background: rgba(27,138,90,.06) }
.tuiles .tuile.bonne .n { color: var(--ok) }