:root {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #98989d;
  --separator: rgba(60,60,67,0.08);
  --border: #d2d2d7;
  --accent: #007aff;
  --accent-soft: rgba(0,122,255,0.1);
  --fill: rgba(118,118,128,0.12);
  --fill-soft: rgba(118,118,128,0.08);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}
* { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); color: var(--text); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 10px; }
.fade { animation: fadeUp 0.25s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Sidebar navigation */
.nav-item { transition: background 0.15s ease, color 0.15s ease; border-radius: 12px; }
.nav-item:hover { background: rgba(0,0,0,0.04); }
.btn-ghost-hover { transition: background 0.15s ease; }
.btn-ghost-hover:hover { background: rgba(0,0,0,0.04); }
.nav-item.active { background: var(--accent-soft); }

/* Surfaces */
.card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 10px 28px -10px rgba(0,0,0,0.07); border: 1px solid rgba(0,0,0,0.04); }
.bien-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.bien-card:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 18px 40px -12px rgba(0,0,0,0.12); transform: translateY(-2px); }
.kanban-col { min-height: 400px; }
.glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }

/* Tags / badges */
.tag { display:inline-flex; align-items:center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; }

/* Buttons — capsule, Apple-style */
.btn { display:inline-flex; align-items:center; gap:6px; padding: 9px 18px; border-radius: 999px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition: all 0.15s ease; white-space:nowrap; }
.btn-primary { background: var(--accent); color:white; }
.btn-primary:hover { background:#0066cc; }
.btn-ghost { background:transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-outline { background: var(--fill); color: var(--text); }
.btn-outline:hover { background: rgba(118,118,128,0.18); }

input, select, textarea { font-family: inherit; }
.peb-badge { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:9px; font-weight:800; font-size:13px; color:white; }
.input-field { width:100%; padding:9px 14px; border:1px solid var(--border); background: var(--surface); border-radius: 14px; font-size:13px; outline:none; transition: border-color 0.15s; color: var(--text); }
.input-field:focus { border-color: var(--accent); }

/* Search field — iOS style pill, no border */
.search-field { width:100%; padding:10px 14px 10px 38px; border:none; background: var(--fill); border-radius: 999px; font-size:14px; outline:none; color: var(--text); transition: background 0.15s; }
.search-field:focus { background: rgba(118,118,128,0.18); }
.search-field::placeholder { color: var(--text-tertiary); }

/* Segmented control — iOS style */
.segmented { display:inline-flex; gap:2px; background: var(--fill); padding:3px; border-radius: 12px; }
.segment { display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; padding:7px 14px; font-size:12px; font-weight:600; color: var(--text-secondary); border-radius:9px; cursor:pointer; transition: all 0.15s ease; white-space:nowrap; }
.segment.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.section-title { font-size:11px; font-weight:700; color: var(--text-tertiary); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; }
.detail-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--separator); font-size:13px; }
.detail-row:last-child { border-bottom:none; }
.detail-label { color: var(--text-secondary); }
.detail-value { color: var(--text); font-weight:600; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }

/* Démarchage — script d'appel */
.script-phase { font-size:11px; font-weight:700; color:var(--accent); letter-spacing:0.06em; text-transform:uppercase; }
.script-text { font-size:19px; line-height:1.6; color:#1d1d1f; }
/* <em> = surlignage bleu du script (PAS de l'italique) : c'est la convention
   des scripts par défaut pour le prénom de l'agent, l'adresse du bien, etc.
   Le gras et l'italique réels passent donc par <strong> et <i>. */
.script-text em { color:var(--accent); font-style:normal; font-weight:700; }
.script-text strong, .script-text b { font-weight:700; }
.script-text i { font-style:italic; }

/* Zone d'édition du texte d'une étape (ScriptTextEditor) : même habillage que
   l'éditeur du CMS (.rte), avec un placeholder pour un contentEditable vide. */
.script-editor-body { min-height:70px; padding:8px 10px; font-size:13px; line-height:1.5; outline:none; cursor:text; }
.script-editor-body:empty:before { content:attr(data-placeholder); color:#98989d; }
.script-editor-body em { color:var(--accent); font-style:normal; font-weight:700; }
.script-editor-body i { font-style:italic; }
.step-dot { width:7px; height:7px; border-radius:50%; background:var(--fill); }
.step-dot.done { background:var(--accent); }
.step-dot.current { background:var(--accent); width:9px; height:9px; }
.obj-chip { border:1px solid var(--border); background:var(--surface); color:#6e6e73; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s ease; }
.obj-chip:hover { background:var(--fill); color:var(--text); }
.sub-check { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--separator); cursor:pointer; }
.sub-check:last-child { border-bottom:none; }
.sub-box { width:20px; height:20px; border-radius:7px; border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px; transition:all .15s ease; }
.sub-box.done { background:var(--accent); border-color:var(--accent); }

/* Démarchage — porte-à-porte */
.progress-track { height:8px; background:var(--fill); border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; border-radius:999px; transition:width .3s ease; }
.house-grid { display:flex; flex-wrap:wrap; gap:3px; }
.house-dot { width:10px; height:10px; border-radius:3px; }
.stepper { display:flex; align-items:center; gap:10px; }
.stepper-btn { width:28px; height:28px; border-radius:50%; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700; color:var(--text); }
.stepper-btn:hover { background:var(--fill); }

/* Relance & appel rapide */
.relance-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
.tel-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--accent); color:white; text-decoration:none; flex-shrink:0; }
.tel-btn:hover { background:#0066cc; }
.tel-link { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; background:var(--accent); color:white; white-space:nowrap; }
.tel-link:hover { background:#0066cc; }

/* Sphère — bouton "Contacter" : un seul bouton qui ouvre un petit menu
   (Message / Appel). Après le choix, le bouton confirme brièvement en vert
   avant de revenir à son état normal — le retour visuel remplace le fait
   d'avoir eu deux boutons distincts sous les yeux. */
.contact-menu-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:none; background:transparent; font-size:13px; color:#1d1d1f; cursor:pointer; text-align:left; }
.contact-menu-item:hover { background:#f5f5f7; }
.contact-menu-item:first-child { border-radius:12px 12px 0 0; }
.contact-menu-item:last-child { border-radius:0 0 12px 12px; }
.contact-done { animation: contactPop 0.45s ease; background:#d1fae5 !important; color:#065f46 !important; }
@keyframes contactPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* Structure — sidebar desktop / barre du haut + menu plein écran sur mobile.
   La sidebar est en "sticky" (pas "fixed") pour rester dans le flux flex :
   ça permet à .app-shell de limiter toute l'app (sidebar + contenu) à une
   largeur maximum, centrée, sans que la sidebar ne "s'échappe" sur le côté
   de l'écran comme le ferait une position fixed. */
.app-shell { max-width:1512px; margin:0 auto; }
/* La marge basse (28px) est volontairement différente de la marge haute
   (16px) : elle est calée sur le padding-bottom de .app-main (28px) pour que
   le bas de la sidebar tombe exactement au même niveau que le bas du
   tableau des listes Biens/Contacts (.list-shell, voir plus bas). */
.app-sidebar { width:236px; flex-shrink:0; display:flex; flex-direction:column; position:sticky; top:16px; align-self:flex-start; height:calc(100vh - 44px); margin:16px 16px 28px 16px; z-index:40; }
.app-main { flex:1; min-width:0; padding:24px 28px 28px; min-height:100vh; }
.mobile-topbar { display:none; }

/* Menu mobile — style Réglages iOS */
.menu-overlay { position:fixed; inset:0; background:#f2f2f7; z-index:60; display:flex; flex-direction:column; }
.menu-topbar { display:flex; align-items:center; justify-content:flex-end; padding:10px 12px; flex-shrink:0; }
.menu-scroll { flex:1; overflow-y:auto; padding:0 16px 32px; -webkit-overflow-scrolling:touch; }
.menu-title { font-size:32px; font-weight:800; letter-spacing:-0.02em; color:#1d1d1f; margin:2px 0 18px; }
.menu-group { background:#ffffff; border-radius:14px; overflow:hidden; margin-bottom:22px; }
.menu-row { display:flex; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(60,60,67,0.08); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.menu-row:last-child { border-bottom:none; }
.menu-row:active { background:#f7f7f9; }
.menu-icon { width:29px; height:29px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Listes Biens / Contacts : la page elle-même ne doit pas défiler — seul le
   tableau (sous l'en-tête + la barre de recherche, qui restent fixes) a son
   propre scroll interne. La hauteur est calée sur celle de .app-main (dont
   le padding vertical fait 24px + 28px = 52px) pour que l'ensemble tienne
   exactement dans la fenêtre visible. */
.list-shell { height:calc(100vh - 52px); min-height:0; }
.list-table-wrap {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  /* Empêche le scroll de "déborder" vers la page (et l'effet élastique/
     rebond qui fait bouger l'en-tête collant) une fois qu'on atteint le
     haut ou le bas du tableau. */
  overscroll-behavior:contain;
  /* Barre de défilement masquée (le scroll reste actif au clavier/molette/
     trackpad, juste sans piste visible). */
  scrollbar-width:none; -ms-overflow-style:none;
}
.list-table-wrap::-webkit-scrollbar { display:none; }
.list-table-wrap table thead th { position:sticky; top:0; z-index:1; }
@media (max-width:860px) {
  .list-shell { height:auto !important; }
  .list-table-wrap { flex:none !important; overflow:visible !important; }
}

/* Démarchage : même principe que .list-shell/.list-table-wrap (Biens/
   Contacts) — la page elle-même ne défile pas, le conteneur du dessous
   (Appels/Porte-à-porte/Sphère/Objectifs, selon l'onglet actif) se
   redimensionne pour remplir exactement l'espace restant jusqu'au bas de la
   sidebar. Le titre + segmented (au-dessus) et, dans l'onglet Appels, les
   KPIs + barre de recherche (flex-grow:0 par défaut) gardent leur hauteur
   naturelle ; seul le tableau des leads (flex:1, voir .demarchage-table-
   scroll) absorbe l'espace restant et défile dans son propre conteneur —
   sa hauteur s'ajuste donc automatiquement à la taille de l'écran, au lieu
   d'une valeur fixe en pixels. */
.demarchage-shell { height:calc(100vh - 52px); min-height:0; }
.demarchage-table-scroll {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.demarchage-table-scroll table thead th { position:sticky; top:0; z-index:1; background:#fafafa; }
.demarchage-table-scroll::-webkit-scrollbar { display:none; }
@media (max-width:860px) {
  .demarchage-shell { height:auto !important; }
  .demarchage-table-scroll { flex:none !important; overflow:visible !important; }
}

/* Agenda : même logique — la page ne défile pas, le calendrier et le
   panneau de gauche (types de rendez-vous) se redimensionnent pour remplir
   exactement l'espace disponible jusqu'au bas de la sidebar, au lieu de
   scroller ou de dépasser la fenêtre. */
.agenda-shell { height:calc(100vh - 52px); min-height:0; }
@media (max-width:860px) {
  .agenda-shell { height:auto !important; }
}

/* Tableau de bord : même logique que .list-shell / .agenda-shell — la page
   tient exactement dans la fenêtre, quelle que soit la hauteur de l'écran.
   Le titre, la ligne de KPI et la carte "Prospection — cette semaine" gardent
   leur hauteur naturelle ; seule la ligne du milieu (graphique d'activité +
   tâches) absorbe l'espace restant. Avant, ces deux cartes avaient une hauteur
   figée de 600px : sur un écran peu haut, "Prospection" passait sous la ligne
   de flottaison et la page défilait. Le graphique Chart.js suit tout seul
   (maintainAspectRatio:false + canvas dans un conteneur flex:1, min-height:0),
   il n'y a donc aucune hauteur en pixels à maintenir ici. */
.dashboard-shell { height:calc(100vh - 52px); min-height:0; }
.dashboard-fill-row { flex:1; min-height:0; align-items:stretch; }
.dashboard-fill-card { height:100%; min-height:0; }
@media (max-width:860px) {
  /* Empilé sur mobile (.grid-main-side repasse en 1 colonne) : on retrouve un
     défilement de page normal. Les cartes reprennent une hauteur minimale
     lisible — sans ça elles s'écraseraient sur leur contenu et le graphique se
     réduirait à zéro, faute de hauteur à hériter. */
  .dashboard-shell { height:auto !important; }
  .dashboard-fill-row { flex:none !important; }
  .dashboard-fill-card { height:auto !important; min-height:300px; }
}

.mobile-cards { display:none; }
.mcard { background:white; border-radius:14px; padding:14px; box-shadow:0 1px 2px rgba(0,0,0,0.04); display:flex; flex-direction:column; gap:8px; }
.mcard-row { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; }
.mcard-row .mcard-label { color:#98989d; font-weight:600; flex-shrink:0; }
.mcard-row .mcard-value { color:#3a3a3c; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 860px) {
  .app-sidebar { display:none !important; }
  .app-main { margin-left:0 !important; padding:66px 12px 28px !important; max-width:100vw !important; overflow-x:hidden; }
  .mobile-topbar {
    display:flex; align-items:center; justify-content:space-between;
    position:fixed; top:0; left:0; right:0; height:54px; padding:0 8px 0 16px; z-index:45;
    background:rgba(255,255,255,0.82); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(0,0,0,0.06);
  }
  .grid-4, .grid-3 { grid-template-columns:repeat(2,1fr) !important; }
  .grid-2, .grid-main-side, .grid-detail { grid-template-columns:1fr !important; }
  .flex-main-side { flex-direction:column !important; }
  .flex-main-side > .flex-side { width:100% !important; }
  .table-wrap { display:none !important; }
  .mobile-cards { display:flex !important; flex-direction:column; gap:10px; }
  .agenda-scroll { overflow-x:visible !important; }
  .agenda-grid-cols { min-width:0 !important; }
  .kanban-row { flex-direction:column !important; overflow-x:visible !important; }
  .kanban-colwrap { flex:1 1 auto !important; width:100% !important; }
  .hide-mobile { display:none !important; }
}
@media (max-width: 480px) {
  .grid-3 { grid-template-columns:1fr !important; }
  /* .grid-4 reste à 2 colonnes (2x2) même sur petit mobile : voir demande
     explicite sur les Kpi de Démarchage (À appeler/À rappeler/Mandats/Taux),
     empilées 1 par 1 c'était trop long à faire défiler. */
}
@media (max-width: 600px) {
  .modal-card { width:92vw !important; max-width:420px !important; }
}
@media (max-width: 860px) {
  /* Fenêtre de réglages agent (Profil/Sécurité/Immoweb) : le rail de
     sections passe en barre horizontale au-dessus du contenu, la fenêtre
     s'adapte en hauteur au lieu d'une hauteur fixe de bureau. */
  .agent-settings-modal { flex-direction:column !important; width:92vw !important; max-width:480px !important; height:auto !important; max-height:85vh !important; }
  .agent-settings-rail { width:100% !important; flex-direction:row !important; overflow-x:auto; gap:4px; border-right:none !important; border-bottom:1px solid var(--separator); padding:10px 12px !important; }
  .agent-settings-rail .nav-item { width:auto !important; flex-shrink:0; }
  /* Outils : deux colonnes (paramètres / résultat) trop serrées en dessous
     de 860px — on repasse en une seule colonne empilée. */
  .tools-grid { grid-template-columns: 1fr !important; }
  /* Boîtes "Votre financement" (crédit) : 4 colonnes -> 2x2, même logique
     que les KPI de Démarchage sur mobile. */
  .tools-grid-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 860px) {
  /* Empêche le zoom automatique de Safari iOS au focus d'un champ : ce
     comportement se déclenche dès qu'un input/select/textarea a une
     font-size < 16px. On force 16px uniquement sur mobile (le !important
     est nécessaire pour battre les styles inline au cas par cas comme
     M2Input), la taille desktop (13px) ne change pas. */
  .input-field, .search-field, input, select, textarea { font-size:16px !important; }

  /* Photo principale de la fiche bien (PhotoCarousel) : 320px de haut sur
     desktop est beaucoup trop sur un écran de téléphone. */
  .bien-photo-carousel { height:180px !important; }

  /* Porte-à-porte : cartes horizontales (1 par ligne) au lieu de 2 colonnes
     étroites qui écrasaient tout le contenu de chaque carte. */
  .rue-grid { grid-template-columns:1fr !important; }

  /* Wizard Nouveau bien, ligne "Type de mandat / Début / Expiration" : 3
     colonnes égales ne laissent pas assez de place aux champs date sur
     mobile (le texte des deux dates se chevauchait). Empilé à la place. */
  .mandat-grid { grid-template-columns:1fr !important; }

  /* Fiche bien : barre d'onglets (Général/Financier/Urbanisme/.../Offres)
     devient défilante horizontalement au lieu d'écraser chaque onglet dans
     1/6 de la largeur (texte tronqué/qui se chevauche). */
  .tabs-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs-scroll::-webkit-scrollbar { display:none; }
  .tabs-scroll .segment { flex:0 0 auto !important; padding:8px 14px !important; }
}

/* ============================================================
   DOCUMENTATION (onglet Documentation, rendu React natif)
   ============================================================ */
.doc-sidebar {
  width:280px; flex:0 0 280px; border-right:1px solid var(--separator, #e5e5ea);
  overflow-y:auto; background:#fbfbfd; display:flex; flex-direction:column;
}
.doc-search-wrap { position:relative; padding:14px 14px 8px; }
.doc-search-box {
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #d2d2d7;
  border-radius:8px; padding:7px 10px;
}
.doc-search-input { border:none; outline:none; font-size:13px; flex:1; background:transparent; }
.doc-search-suggestions {
  position:absolute; left:14px; right:14px; top:100%; background:#fff; border:1px solid #e5e5ea;
  border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,0.12); z-index:20; max-height:320px; overflow-y:auto;
}
.doc-search-empty { padding:12px; font-size:12px; color:#86868b; }
.doc-search-item { padding:9px 12px; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.doc-search-item:hover { background:#f5f5f7; }
.doc-search-item-label { font-size:13px; color:#1d1d1f; font-weight:500; }
.doc-search-item-sub { font-size:11px; color:#86868b; }
.doc-tree { flex:1; overflow-y:auto; padding:4px 8px 24px; }
.doc-tree-node { display:flex; align-items:center; gap:6px; cursor:pointer; border-radius:6px; padding:6px 8px; font-size:13px; color:#1d1d1f; }
.doc-tree-node:hover { background:#f0f0f2; }
.doc-tree-cat-label { font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#6e6e73; margin-top:10px; }
/* Les sujets sont décalés sous leur catégorie, pour que la hiérarchie
   catégorie > sujet > chapitre se lise au premier coup d'œil. */
.doc-tree-sujet-label { font-weight:600; padding-left:20px; }
.doc-tree-sujet-label.active { background:#e8f0fe; color:#007aff; }
.doc-tree-chapitre { padding-left:34px; font-size:12.5px; color:#6e6e73; }
.doc-tree-chapitre.lvl3 { padding-left:48px; }
/* Ouverture/fermeture animée (catégories et sujets) : technique grid-rows,
   0fr -> 1fr, plutôt qu'un montage/démontage instantané du contenu. */
.doc-collapse { display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease; }
.doc-collapse.open { grid-template-rows:1fr; }
.doc-collapse-inner { overflow:hidden; min-height:0; }
/* Même technique que .doc-collapse ci-dessus, sous un nom générique pour
   réemploi hors Documentation (ex. tronçons du porte-à-porte). */
.collapse { display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease; }
.collapse.open { grid-template-rows:1fr; }
.collapse-inner { overflow:hidden; min-height:0; }
.doc-main { flex:1; overflow-y:auto; padding:32px 48px; }
.doc-article { max-width:760px; }
.doc-breadcrumb { font-size:12px; color:#86868b; margin-bottom:6px; }
.doc-page-title { font-size:28px; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px; color:#1d1d1f; }
.doc-summary { font-size:16px; color:#6e6e73; margin:0 0 24px; }
.doc-content h2 { font-size:20px; font-weight:700; margin:32px 0 12px; scroll-margin-top:24px; color:#1d1d1f; }
.doc-content h3 { font-size:16px; font-weight:700; margin:24px 0 8px; scroll-margin-top:24px; color:#1d1d1f; }
.doc-content p { margin:0 0 14px; line-height:1.6; color:#1d1d1f; font-size:14.5px; }
.doc-content ul, .doc-content ol { margin:0 0 14px; padding-left:20px; }
.doc-content li { margin-bottom:6px; font-size:14.5px; }
.doc-content blockquote {
  border-left:3px solid #0071e3; background:#f5f8ff; margin:16px 0; padding:12px 16px;
  border-radius:0 8px 8px 0; font-style:italic; color:#1d1d1f;
}
.doc-content table { width:100%; border-collapse:collapse; margin:14px 0 24px; font-size:13px; }
.doc-content th { text-align:left; font-size:11px; text-transform:uppercase; color:#86868b; border-bottom:1px solid #d2d2d7; padding:6px 10px; }
.doc-content td { padding:10px; border-bottom:1px solid #e8e8ed; vertical-align:top; }
.doc-content .script-card, .doc-content .aside, .doc-content .params {
  background:#fbfbfd; border:1px solid #e8e8ed; border-radius:10px; padding:16px 18px; margin:14px 0 20px;
}
.doc-content .script-card { border-left:3px solid #0071e3; }
.doc-content .script-card p { font-style:italic; margin:0; }
.doc-content .script-who, .doc-content .aside-label { font-size:11px; font-weight:700; text-transform:uppercase; color:#86868b; margin-bottom:8px; }
.doc-content .aside.warn { border-left:3px solid #ff9500; background:#fff8ee; }
.doc-content .param-row { display:flex; gap:16px; padding:10px 0; border-top:1px solid #e8e8ed; }
.doc-content .param-row:first-child { border-top:none; }
.doc-content .param-name { flex:0 0 150px; font-weight:700; font-size:13px; }
.doc-content .param-desc { flex:1; font-size:13px; color:#6e6e73; }
@media(max-width:860px){
  .doc-shell { flex-direction:column; }
  .doc-sidebar { width:100%; flex:0 0 auto; max-height:200px; }
  .doc-main { padding:20px; }
}

/* ============================================================
   CMS (onglet réservé à gdegeeter@grandplace.be, façon Framer CMS)
   ============================================================ */
.cms-collections { width:180px; flex:0 0 180px; border-right:1px solid #e5e5ea; background:#fbfbfd; padding:14px 10px; }
.cms-collections-title { font-size:11px; text-transform:uppercase; color:#86868b; font-weight:700; margin-bottom:8px; padding:0 6px; }
.cms-collection-item { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; background:#e8f0fe; color:#007aff; font-size:13px; font-weight:600; }
.cms-count { margin-left:auto; font-size:11px; color:#86868b; font-weight:500; }
.cms-collection-add { margin-top:8px; padding:7px 8px; font-size:12px; color:#86868b; cursor:pointer; }
.cms-collection-add:hover { color:#1d1d1f; }
.cms-table-wrap { flex:1; overflow:auto; display:flex; flex-direction:column; }
.cms-table-header { padding:10px 14px; border-bottom:1px solid #e5e5ea; }
.cms-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.cms-table th { text-align:left; padding:8px 12px; border-bottom:1px solid #e5e5ea; color:#86868b; font-weight:600; font-size:11px; text-transform:uppercase; position:sticky; top:0; background:#fff; }
.cms-table td { padding:9px 12px; border-bottom:1px solid #f0f0f2; color:#1d1d1f; white-space:nowrap; }
.cms-table tr { cursor:pointer; }
.cms-table tr:hover td { background:#f5f5f7; }
.cms-table tr.active td { background:#e8f0fe; }
.cms-td-truncate { max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.cms-status-tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; }
.cms-status-tag.live { background:#e3f9e5; color:#1a7f37; }
.cms-status-tag.draft { background:#f0f0f2; color:#6e6e73; }
.cms-detail { width:66%; flex:0 0 66%; border-left:1px solid #e5e5ea; overflow-y:auto; display:flex; flex-direction:column; }
.cms-detail-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #e5e5ea; font-size:13px; font-weight:600; }
.cms-detail-body { padding:14px 16px; display:flex; flex-direction:column; gap:4px; flex:1; }
.cms-field-label { font-size:11px; font-weight:600; color:#86868b; margin-top:12px; margin-bottom:4px; }
.cms-detail-actions { display:flex; align-items:center; gap:8px; margin-top:20px; padding-top:14px; border-top:1px solid #e5e5ea; }
.rte { border:1px solid #d2d2d7; border-radius:8px; overflow:hidden; }
.rte-toolbar { display:flex; align-items:center; gap:4px; padding:6px 8px; background:#fbfbfd; border-bottom:1px solid #e5e5ea; }
.rte-block-select { font-size:12px; border:1px solid #d2d2d7; border-radius:6px; padding:3px 6px; margin-right:6px; }
.rte-btn { border:1px solid transparent; background:transparent; border-radius:6px; padding:3px 9px; font-size:13px; cursor:pointer; }
.rte-btn:hover { background:#e8e8ed; }
/* L'encadré grandit avec le contenu (comme Framer) au lieu d'un ascenseur
   interne à hauteur fixe — c'est le panneau entier (.cms-detail-body) qui
   défile, pas la zone de texte elle-même. */
.rte-body { min-height:220px; padding:12px 14px; font-size:13.5px; line-height:1.6; outline:none; }
.rte-source { width:100%; min-height:220px; border:none; outline:none; resize:none; overflow:hidden; padding:12px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.5; box-sizing:border-box; }
.rte-btn-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.rte-btn-code.active { background:#007aff; color:#fff; }
.rte-btn[disabled] { opacity:.4; cursor:default; }
.rte-body h2 { font-size:17px; margin:14px 0 6px; }
.rte-body h3 { font-size:14px; margin:12px 0 6px; }
.rte-body blockquote { border-left:3px solid #0071e3; background:#f5f8ff; padding:8px 12px; margin:8px 0; }
@media(max-width:860px){
  .cms-collections { display:none; }
  .cms-detail { position:fixed; inset:0; width:100%; z-index:80; background:#fff; }
}