:root {
    --jet: #292929;
    --davys-gray: #585757;
    --linen: #F5ECE4;
    --linen-soft: #FAF4EE;
    --pumpkin: #FC6A0A;
    --golden-gate: #E74504;
    --off-white: #FAFAF8;
    --border: #ECE6DE;
    --success: #2E7D32;
    --success-bg: #E8F5E9;
    --warning: #E65100;
    --warning-bg: #FFF3E0;
    --info: #1565C0;
    --info-bg: #E3F2FD;
    --danger: #C62828;
    --danger-bg: #FFEBEE;

    /* Surfaces dynamiques (overridées en dark) */
    --bg: #FAFAF8;
    --surface: #FFFFFF;
    --surface-2: #F5F3EF;
    --text: #292929;
    --text-mute: #585757;
    --text-soft: #8A857F;
    --br: #ECE6DE;
    --shadow: 0 12px 40px rgba(41,41,41,0.06);
  }
  html.dark {
    --bg: #1A1A1A;
    --surface: #242424;
    --surface-2: #2E2E2E;
    --text: #F5ECE4;
    --text-mute: #A8A39B;
    --text-soft: #7A7570;
    --br: #3A3A3A;
    --shadow: 0 12px 40px rgba(0,0,0,0.3);
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow: hidden;
    transition: background .25s ease, color .25s ease;
  }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  a { color: inherit; text-decoration: none; }
  input, textarea { font-family: inherit; }

  /* ─── App layout ─── */
  .app {
    display: grid;
    grid-template-columns: 252px 1fr;
    height: 100vh;
  }
  .sidebar {
    background: var(--jet);
    color: var(--linen);
    padding: 22px 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.05);
    overflow-y: auto;
  }
  .sidebar::-webkit-scrollbar { width: 6px; }
  .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 6px; }

  .logo {
    padding: 0 24px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .logo-mark {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: var(--linen);
  }
  .logo-tag {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: .4px;
    text-transform: none;
    background: var(--pumpkin);
    color: white;
    padding: 2px 8px;
    border-radius: 100px;
    margin-left: auto;
  }
  .nav-sec {
    padding: 22px 16px 6px;
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(245,236,228,0.35);
  }
  .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    font-size: 14px;
    color: rgba(245,236,228,0.75);
    transition: all .2s ease;
    border-left: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    width: 100%;
    text-align: left;
  }
  .nav-link:hover { color: var(--linen); background: rgba(255,255,255,0.03); }
  .nav-link.active {
    color: var(--linen);
    background: linear-gradient(90deg, rgba(252,106,10,0.18) 0%, transparent 100%);
    border-left-color: var(--pumpkin);
    font-weight: 500;
  }
  .nav-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
  .nav-link.active svg { color: var(--pumpkin); opacity: 1; }
  .nav-badge {
    margin-left: auto;
    background: var(--pumpkin);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 100px;
    font-family: 'Space Mono', monospace;
  }
  .nav-badge.muted { background: rgba(255,255,255,0.1); color: rgba(245,236,228,0.7); }

  .sidebar-foot {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background .15s ease;
  }
  .profile:hover { background: rgba(255,255,255,0.07); }
  .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pumpkin), var(--golden-gate));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
  }
  .profile-name { font-size: 13px; color: var(--linen); font-weight: 500; }
  .profile-role { font-size: 11px; color: rgba(245,236,228,0.5); }

  /* ─── Main ─── */
  .main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }
  .topbar {
    background: var(--surface);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--br);
    flex-shrink: 0;
    /* La barre et ses menus déroulants (cloche, bascule de site) passent
       AU-DESSUS du contenu des pages — sans quoi les boutons flottants du
       calendrier (z-index 140) recouvrent le panneau de notifications.
       Reste sous les fenêtres plein écran (200+) qui doivent la masquer. */
    position: relative;
    z-index: 190;
  }
  .crumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-mute);
  }
  .crumb-sep { opacity: .4; }
  .crumb-current { color: var(--text); font-weight: 500; }

  .search-btn {
    flex: 1;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg);
    border: 1px solid var(--br);
    border-radius: 10px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-mute);
    cursor: pointer;
    transition: all .15s ease;
  }
  .search-btn:hover { border-color: var(--pumpkin); }
  .search-shortcut {
    margin-left: auto;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    background: var(--surface);
    border-radius: 6px;
    padding: 2px 8px;
    color: var(--text-mute);
    border: 1px solid var(--br);
  }

  .actions { display: flex; align-items: center; gap: 10px; }
  /* Formule : puce de niveau (3 points) + nom complet. Hauteur commune
     a tous les boutons de la barre (--topbar-btn) pour un alignement net. */
  :root { --topbar-btn: 34px; }
  .plan {
    height: var(--topbar-btn);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border-radius: 100px;
    background: var(--surface);
    border: 1px solid var(--br);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .plan:hover { border-color: var(--pumpkin); color: var(--pumpkin); }
  .plan-dots { display: flex; gap: 3px; flex: none; }
  .plan-dots i {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--br);
    display: block;
    transition: background .15s ease;
  }
  .plan-dots i.on { background: var(--pumpkin); }

  .icon-btn {
    width: var(--topbar-btn); height: var(--topbar-btn);
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--br);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mute);
    cursor: pointer;
    position: relative;
    transition: all .15s ease;
  }
  .icon-btn:hover { background: var(--surface-2); color: var(--text); }
  .icon-btn-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pumpkin);
    border: 2px solid var(--surface);
  }

  .theme-toggle {
    height: var(--topbar-btn);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px 0 7px;
    border-radius: 100px;
    background: var(--bg);
    border: 1px solid var(--br);
    color: var(--text-mute);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all .2s ease;
  }
  .theme-toggle:hover { border-color: var(--pumpkin); color: var(--pumpkin); }
  .toggle-bullet {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--jet);
    transition: all .2s ease;
  }
  html.dark .toggle-bullet { background: var(--pumpkin); transform: translateX(2px); }

  /* ─── Page ─── */
  /* scrollbar-gutter : la place de l'ascenseur est réservée même quand il
     n'y a rien à faire défiler — sans ça, passer d'un onglet long à un
     onglet court élargissait toute la page de la largeur de la barre. */
  .pages { flex: 1; overflow-y: auto; scrollbar-gutter: stable; background: var(--bg); }
  .pages::-webkit-scrollbar { width: 8px; }
  .pages::-webkit-scrollbar-thumb { background: var(--br); border-radius: 8px; }

  .view { padding: 32px 32px 60px; display: none; animation: fadeIn .25s ease; }
  .view.active { display: block; }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 20px;
  }
  .page-title {
    font-size: 38px;
    font-weight: 300;
    letter-spacing: -0.8px;
    line-height: 1.1;
  }
  .page-title em { font-style: italic; color: var(--pumpkin); font-weight: 400; }
  .page-sub {
    color: var(--text-mute);
    font-size: 15px;
    margin-top: 6px;
  }

  /* ─── Buttons ─── */
  .btn {
    padding: 11px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s ease;
    cursor: pointer;
  }
  .btn-primary {
    background: var(--jet);
    color: white;
  }
  html.dark .btn-primary { background: var(--linen); color: var(--jet); }
  .btn-primary:hover { background: var(--pumpkin); color: white; transform: translateY(-1px); }
  .btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--br);
  }
  .btn-secondary:hover { border-color: var(--text); }
  /* Deux tailles en dessous du bouton plein format, et pas une de plus :
     .btn-hero pour les actions posées dans un pavé d'entête (elles vivent
     à côté des sélecteurs en pilule, qui sont eux aussi en 12,5 px),
     .btn-sm pour les actions rangées dans une carte ou une ligne de liste. */
  .btn-hero { padding: 8px 16px; font-size: 12.5px; gap: 7px; }
  .btn-sm { padding: 7px 13px; font-size: 12.5px; gap: 6px; }

  /* ─── KPI ─── */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 28px;
  }
  .kpi {
    background: var(--surface);
    border-radius: 18px;
    padding: 22px 24px;
    border: 1px solid var(--br);
    position: relative;
    overflow: hidden;
  }
  .kpi.accent {
    background: linear-gradient(135deg, var(--pumpkin), var(--golden-gate));
    color: white;
    border: none;
  }
  .kpi.dark { background: var(--jet); color: var(--linen); border: none; }
  html.dark .kpi.dark { background: #0F0F0F; }
  .kpi-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 12px;
  }
  .kpi.accent .kpi-label, .kpi.dark .kpi-label { color: rgba(255,255,255,0.7); }
  .kpi-val { font-size: 36px; font-weight: 300; line-height: 1; letter-spacing: -1px; margin-bottom: 6px; }
  .kpi-suf { font-size: 13px; color: var(--text-mute); margin-left: 4px; font-weight: 400; }
  .kpi.accent .kpi-suf, .kpi.dark .kpi-suf { color: rgba(255,255,255,0.7); }
  .kpi-trend { font-size: 12px; color: var(--success); margin-top: 6px; }
  .kpi.accent .kpi-trend, .kpi.dark .kpi-trend { color: rgba(255,255,255,0.85); }
  .kpi-arc {
    position: absolute;
    right: -30px; top: -30px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
  }

  /* ─── Service cards ─── */
  .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
  .svc {
    background: var(--surface);
    border-radius: 18px;
    padding: 26px;
    border: 1px solid var(--br);
    cursor: pointer;
    transition: all .25s ease;
  }
  .svc:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--pumpkin);
  }
  .svc-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--linen), var(--linen-soft));
    display: flex; align-items: center; justify-content: center;
    color: var(--pumpkin);
    margin-bottom: 18px;
  }
  html.dark .svc-icon { background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
  .svc.featured .svc-icon {
    background: linear-gradient(135deg, var(--pumpkin), var(--golden-gate));
    color: white;
  }
  .svc-title { font-size: 17px; font-weight: 500; margin-bottom: 6px; }
  .svc-body { font-size: 13.5px; color: var(--text-mute); line-height: 1.55; margin-bottom: 16px; min-height: 42px; }
  .svc-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--br);
    font-size: 12px;
    color: var(--text-mute);
  }
  .svc-meta strong { color: var(--text); font-weight: 600; font-family: 'Space Mono', monospace; }
  .svc-arrow {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
    transition: all .25s ease;
  }
  .svc:hover .svc-arrow { background: var(--pumpkin); color: white; transform: translateX(2px); }

  /* ─── Panels ─── */
  .twocol { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
  .panel {
    background: var(--surface);
    border-radius: 18px;
    padding: 22px 26px;
    border: 1px solid var(--br);
  }
  .panel-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 16px;
  }
  .panel-title { font-size: 16px; font-weight: 500; margin-bottom: 4px; letter-spacing: -0.2px; }
  .panel-sub { font-size: 12.5px; color: var(--text-mute); }
  .panel-link {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 1.5px;
    color: var(--pumpkin);
    text-transform: uppercase;
    cursor: pointer;
  }
  .panel-link:hover { color: var(--golden-gate); }

  .act {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--br);
  }
  .act:last-child { border-bottom: none; }
  .act-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    color: var(--pumpkin);
    flex-shrink: 0;
  }
  .act-body { flex: 1; min-width: 0; }
  .act-title { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
  .act-meta { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
  .act-time { font-family: 'Space Mono', monospace; font-size: 10.5px; color: var(--text-mute); }

  .goal { padding: 14px 0; border-bottom: 1px solid var(--br); }
  .goal:last-child { border-bottom: none; }
  .goal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .goal-t { font-size: 13.5px; font-weight: 500; }
  .goal-pct { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; color: var(--pumpkin); }
  .goal-bar { height: 4px; background: var(--bg); border-radius: 100px; overflow: hidden; margin-bottom: 6px; }
  .goal-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pumpkin), var(--golden-gate)); border-radius: 100px; }
  .goal-meta { font-size: 11.5px; color: var(--text-mute); display: flex; justify-content: space-between; }

  /* ─── Filter chips ─── */
  .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; align-items: center; }
  .chip {
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 13px;
    background: var(--surface);
    border: 1px solid var(--br);
    cursor: pointer;
    transition: all .15s ease;
    color: var(--text-mute);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .chip:hover { border-color: var(--text); color: var(--text); }
  .chip.active {
    background: var(--jet);
    color: white;
    border-color: var(--jet);
  }
  html.dark .chip.active { background: var(--linen); color: var(--jet); border-color: var(--linen); }
  .chip-count { font-family: 'Space Mono', monospace; font-size: 10.5px; opacity: 0.7; }

  /* ─── Media grid ─── */
  .media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .media {
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--br);
    transition: all .2s ease;
    cursor: pointer;
  }
  .media:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .media-thumb {
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
  }
  .media-thumb svg { width: 38px; height: 38px; }
  .media-thumb.t-video { background: linear-gradient(135deg, #292929, #585757); }
  .media-thumb.t-photo1 { background: linear-gradient(135deg, #C2A48B, #D9C2A4); }
  .media-thumb.t-photo2 { background: linear-gradient(135deg, #8A7B6F, #B5A698); }
  .media-thumb.t-photo3 { background: linear-gradient(135deg, #B5A698, #9C8C7F); }
  .media-thumb.t-doc { background: linear-gradient(135deg, var(--pumpkin), var(--golden-gate)); }
  .media-thumb.t-web { background: linear-gradient(135deg, var(--jet), #1F1F1F); }
  .media-thumb.t-folder {
    background: linear-gradient(135deg, var(--linen), var(--linen-soft));
    color: var(--pumpkin);
  }
  html.dark .media-thumb.t-folder { background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
  .media-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
  }
  .media-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 6px;
    z-index: 1;
  }
  .media-tag {
    position: absolute;
    top: 10px; left: 10px;
    background: rgba(255,255,255,0.92);
    color: var(--jet);
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 3px 8px;
    border-radius: 100px;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 1;
  }
  .media-info { padding: 12px 14px; }
  .media-title { font-size: 13.5px; font-weight: 500; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .media-meta { font-size: 11.5px; color: var(--text-mute); display: flex; gap: 8px; }

  /* ─── Marketing ─── */
  .completion {
    background: linear-gradient(135deg, var(--jet) 0%, #1F1F1F 100%);
    color: var(--linen);
    border-radius: 20px;
    padding: 26px 30px;
    display: flex; align-items: center; gap: 28px;
    margin-bottom: 26px;
    position: relative; overflow: hidden;
  }
  .completion::before {
    content: '';
    position: absolute;
    right: -50px; top: -50px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(252,106,10,0.15), transparent 60%);
    border-radius: 50%;
  }
  .compl-circle {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: conic-gradient(var(--pumpkin) 0deg 270deg, rgba(255,255,255,0.08) 270deg 360deg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
  }
  .compl-circle::after {
    content: '';
    position: absolute; inset: 6px;
    background: var(--jet);
    border-radius: 50%;
  }
  .compl-val {
    position: relative;
    font-family: 'Space Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--linen);
  }
  .compl-text { flex: 1; }
  .compl-t { font-size: 22px; font-weight: 400; margin-bottom: 6px; letter-spacing: -0.3px; }
  .compl-t em { color: var(--pumpkin); font-style: italic; }
  .compl-b { font-size: 13.5px; color: rgba(245,236,228,0.65); max-width: 540px; line-height: 1.55; }
  .compl-b strong { color: var(--linen); }

  /* Les onglets passent à la ligne au lieu de défiler : un rail qui se
     défile en douce cache des onglets sans le dire. */
  .mk-tabs {
    display: flex; flex-wrap: wrap; gap: 0 4px;
    border-bottom: 1px solid var(--br);
    margin-bottom: 24px;
  }
  .mk-tab {
    padding: 11px 18px;
    font-size: 14px;
    color: var(--text-mute);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Couleur et soulignement seulement : la graisse changeait la largeur
       du libellé et « transition: all » animait le décalage de toute la
       rangée à chaque bascule d'onglet. */
    transition: color .15s ease, border-bottom-color .15s ease;
  }
  .mk-tab:hover { color: var(--text); }
  .mk-tab.active { color: var(--text); border-bottom-color: var(--pumpkin); }
  .mk-tab-check {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 9px;
    display: flex; align-items: center; justify-content: center;
  }
  .mk-tab-check.pending { background: var(--warning-bg); color: var(--warning); }

  /* ─── SWOT ─── */
  .swot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .swot-card {
    border-radius: 16px;
    padding: 22px 24px;
    border: 1px solid var(--br);
    background: var(--surface);
    min-height: 180px;
  }
  /* Édition du SWOT : mêmes cartes neutres que la matrice, sans code couleur. */

  .swot-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--text-mute);
  }
  .swot-card.strengths .swot-label { color: var(--success); }
  .swot-card.weaknesses .swot-label { color: var(--danger); }
  .swot-card.opportunities .swot-label { color: var(--pumpkin); }
  html.dark .swot-card.threats .swot-label { color: var(--linen); }
  .swot-list { font-size: 13.5px; line-height: 1.65; }
  .swot-list li { list-style: none; padding-left: 16px; position: relative; margin-bottom: 6px; }
  .swot-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--pumpkin); }
  .swot-card.strengths .swot-list li::before { background: var(--success); }
  .swot-card.weaknesses .swot-list li::before { background: var(--danger); }
  .swot-card.threats .swot-list li::before { background: var(--text-mute); }

  /* grid-auto-rows: 1fr = toutes les rangées à la même hauteur, pour que la
     carte d'ajout fasse la taille d'un persona même sur la rangée suivante. */
  .persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 14px; margin-top: 20px; }
  .persona {
    background: var(--surface);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid var(--br);
    text-align: center;
    position: relative;
    transition: all .2s ease;
    cursor: pointer;
  }
  .persona:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .persona.primary { border-color: var(--pumpkin); }
  .persona.primary::before {
    content: '★ Cible prioritaire';
    position: absolute;
    top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--pumpkin);
    color: white;
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 1.5px;
    padding: 3px 10px;
    border-radius: 100px;
  }
  .persona-avatar {
    width: 70px; height: 70px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--linen), var(--linen-soft));
    display: flex; align-items: center; justify-content: center;
    color: var(--pumpkin);
    font-size: 28px;
    font-weight: 700;
  }
  html.dark .persona-avatar { background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
  .persona-name { font-size: 16px; font-weight: 500; margin-bottom: 2px; }
  .persona-job { font-size: 12px; color: var(--text-mute); margin-bottom: 12px; }
  .persona-stats { display: flex; justify-content: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--br); font-family: 'Space Mono', monospace; font-size: 11px; }
  .persona-stats div { display: flex; flex-direction: column; gap: 2px; }
  .persona-stats strong { font-weight: 700; }
  .persona-stats span { color: var(--text-mute); font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; }

  /* ─── Cloud ─── */
  .cloud { display: grid; grid-template-columns: 230px 1fr; gap: 18px; }
  .tree {
    background: var(--surface);
    border-radius: 18px;
    padding: 16px;
    border: 1px solid var(--br);
    height: fit-content;
  }
  .tree-sec {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-mute);
    text-transform: uppercase;
    padding: 12px 6px 6px;
    margin-top: 8px;
  }
  .tree-sec:first-child { margin-top: 0; }
  .tree-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-mute);
    transition: all .15s ease;
  }
  .tree-item:hover { background: var(--bg); color: var(--text); }
  .tree-item.active { background: var(--linen); color: var(--jet); font-weight: 500; }
  html.dark .tree-item.active { background: rgba(252,106,10,0.15); color: var(--linen); }
  .tree-item.indent { padding-left: 26px; }
  .tree-icon { width: 14px; height: 14px; color: var(--pumpkin); flex-shrink: 0; }
  .tree-count { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 10.5px; opacity: 0.7; }

  .cloud-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface);
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid var(--br);
    margin-bottom: 16px;
  }
  .cloud-search-in {
    flex: 1;
    background: var(--bg);
    border-radius: 10px;
    padding: 9px 14px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: var(--text-mute);
    border: 1px solid transparent;
  }
  .cloud-search-in input {
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
    color: var(--text);
    font-size: 13px;
  }
  .cloud-search-in input::placeholder { color: var(--text-mute); }

  .tb-btn {
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--bg);
    font-size: 12.5px;
    color: var(--text-mute);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
  }
  .tb-btn:hover { background: var(--surface-2); color: var(--text); }
  .tb-btn.primary { background: var(--jet); color: white; }
  html.dark .tb-btn.primary { background: var(--linen); color: var(--jet); }
  .tb-btn.primary:hover { background: var(--pumpkin); color: white; }

  .sec-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-mute);
    padding: 12px 4px 8px;
  }
  .sec-label:first-child { padding-top: 0; }

  /* ─── Pro Boost ─── */
  .token-hero {
    background: linear-gradient(135deg, var(--pumpkin), var(--golden-gate));
    color: white;
    border-radius: 22px;
    padding: 30px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 28px;
    position: relative;
    overflow: hidden;
  }
  .token-hero::before {
    content: '';
    position: absolute;
    right: -80px; top: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
    border-radius: 50%;
  }
  .token-name { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; opacity: 0.85; margin-bottom: 10px; position: relative; }
  .token-tier { font-size: 56px; font-weight: 300; letter-spacing: -1.5px; line-height: 1; position: relative; }
  .token-renew { font-size: 12.5px; opacity: 0.85; margin-top: 12px; font-family: 'Space Mono', monospace; position: relative; }
  .token-use { position: relative; }
  .token-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .token-count { display: flex; align-items: baseline; gap: 6px; font-weight: 700; font-family: 'Space Mono', monospace; }
  .token-now { font-size: 28px; }
  .token-total { font-size: 14px; opacity: 0.8; }
  .token-bar { height: 8px; background: rgba(255,255,255,0.2); border-radius: 100px; overflow: hidden; margin-bottom: 16px; }
  .token-fill { width: 67%; height: 100%; background: white; border-radius: 100px; }
  .token-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .token-btn {
    padding: 9px 16px;
    border-radius: 100px;
    background: rgba(255,255,255,0.18);
    color: white;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    transition: all .15s ease;
  }
  .token-btn:hover { background: rgba(255,255,255,0.25); }
  .token-btn.primary { background: var(--jet); border-color: var(--jet); }

  /* ─── Assistance ─── */
  .ass-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
  .ass-hero {
    background: linear-gradient(135deg, var(--jet) 0%, #1F1F1F 100%);
    color: var(--linen);
    border-radius: 22px;
    padding: 32px;
    position: relative;
    overflow: hidden;
  }
  html.dark .ass-hero { background: linear-gradient(135deg, #0F0F0F, #1A1A1A); }
  .ass-hero::before {
    content: '';
    position: absolute;
    right: -100px; bottom: -100px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(252,106,10,0.18) 0%, transparent 65%);
    border-radius: 50%;
  }
  .ass-credit { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 4px; position: relative; }
  .ass-num { font-size: 72px; font-weight: 300; letter-spacing: -2px; line-height: 0.9; }
  .ass-unit { font-size: 22px; color: rgba(245,236,228,0.7); margin-bottom: 12px; }
  .ass-label { font-size: 14px; color: rgba(245,236,228,0.65); margin-bottom: 16px; position: relative; }
  .ass-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 100px; overflow: hidden; margin-bottom: 8px; position: relative; }
  .ass-fill { height: 100%; width: 95%; background: linear-gradient(90deg, var(--pumpkin), var(--golden-gate)); border-radius: 100px; }
  .ass-info { display: flex; justify-content: space-between; font-family: 'Space Mono', monospace; font-size: 11px; color: rgba(245,236,228,0.55); position: relative; }

  .form-card {
    background: var(--surface);
    border-radius: 22px;
    padding: 26px;
    border: 1px solid var(--br);
  }
  .form-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
    font-family: 'Space Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .form-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--br);
    border-radius: 10px;
    font-size: 14px;
    background: var(--bg);
    margin-bottom: 14px;
    color: var(--text);
    outline: none;
    transition: border-color .15s ease;
  }
  .form-input:focus { border-color: var(--pumpkin); }
  textarea.form-input { min-height: 84px; resize: vertical; font-family: 'DM Sans', sans-serif; }

  .cat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
  .cat-chip {
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--bg);
    font-size: 12.5px;
    color: var(--text-mute);
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
  }
  .cat-chip:hover { color: var(--text); }
  .cat-chip.active { background: var(--pumpkin); color: white; }

  /* ─── History items ─── */
  .hist { background: var(--surface); border-radius: 12px; border: 1px solid var(--br); margin-bottom: 8px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
  .hist-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
  .hist-body { flex: 1; min-width: 0; }
  .hist-t { font-size: 13.5px; font-weight: 500; }
  .hist-m { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
  .hist-amt { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; }
  .hist-amt.minus { color: var(--danger); }
  .hist-amt.plus { color: var(--success); }

  /* ─── Web hub ─── */
  .sso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .sso {
    background: var(--surface);
    border: 1px solid var(--br);
    border-radius: 18px;
    padding: 22px;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    transition: all .2s ease;
  }
  .sso:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--pumpkin); }
  .sso.alert { border-color: var(--pumpkin); }
  .sso.inactive { background: linear-gradient(180deg, var(--linen-soft), var(--surface)); }
  html.dark .sso.inactive { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
  .sso-ico {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: white;
  }
  .sso-ico.wp { background: #21759B; }
  .sso-ico.lead { background: linear-gradient(135deg, var(--pumpkin), var(--golden-gate)); }
  .sso-ico.news { background: linear-gradient(135deg, var(--linen), var(--linen-soft)); color: var(--pumpkin); }
  html.dark .sso-ico.news { background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
  .sso-ico.mail { background: var(--jet); }
  html.dark .sso-ico.mail { background: #0F0F0F; }
  .sso-ico.inactive-ico { background: var(--surface); border: 1px solid var(--br); color: var(--text-mute); }
  .sso-name { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 16px; font-weight: 600; flex-wrap: wrap; }
  .sso-tag { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 1.5px; padding: 2px 7px; border-radius: 100px; }
  .sso-tag.ok { background: var(--success-bg); color: var(--success); }
  .sso-tag.warn { background: var(--warning-bg); color: var(--warning); }
  .sso-tag.alert { background: var(--pumpkin); color: white; }
  .sso-tag.info { background: var(--info-bg); color: var(--info); }
  .sso-tag.muted { background: var(--bg); border: 1px solid var(--br); color: var(--text-mute); }
  .sso-url { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--text-mute); margin-bottom: 4px; }
  .sso-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-mute); flex-wrap: wrap; }
  .sso-meta strong { color: var(--text); }

  /* ─── Analyson ─── */
  .analyson {
    background: linear-gradient(135deg, var(--jet) 0%, #1F1F1F 100%);
    color: var(--linen);
    border-radius: 22px;
    padding: 26px 30px;
    margin-top: 24px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 22px;
    align-items: center;
  }
  html.dark .analyson { background: linear-gradient(135deg, #0F0F0F, #1A1A1A); }
  .analyson::before {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(252,106,10,0.18), transparent 65%);
    border-radius: 50%;
  }
  .ana-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; }
  .ana-badge {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pumpkin), var(--golden-gate));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
  }
  .ana-label { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pumpkin); }
  .ana-msg { font-size: 18px; font-weight: 300; line-height: 1.4; letter-spacing: -0.2px; margin-bottom: 14px; position: relative; }
  .ana-msg strong { color: var(--pumpkin); font-weight: 500; }
  .ana-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
  .ana-chart {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px;
    height: 140px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
  }
  .ana-chart-label { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: 2px; color: rgba(245,236,228,0.5); }
  .ana-bars { display: flex; align-items: flex-end; gap: 3px; height: 70px; }
  .ana-bar { flex: 1; background: rgba(252,106,10,0.5); border-radius: 2px; }
  .ana-foot { display: flex; justify-content: space-between; font-family: 'Space Mono', monospace; font-size: 9px; color: rgba(245,236,228,0.4); }
  .ana-foot strong { color: var(--pumpkin); font-weight: 700; }

  /* ─── Modal ─── */
  .modal {
    position: fixed;
    inset: 0;
    background: rgba(41,41,41,0.5);
    backdrop-filter: blur(8px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    z-index: 100;
    animation: fadeIn .15s ease;
  }
  .modal.open { display: flex; }
  .modal-box {
    background: var(--surface);
    border-radius: 18px;
    width: 100%; max-width: 560px;
    border: 1px solid var(--br);
    box-shadow: 0 30px 80px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: slideDown .2s ease;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .modal-search {
    padding: 18px 22px;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--br);
  }
  .modal-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--text);
    font-family: inherit;
  }
  .modal-search input::placeholder { color: var(--text-mute); }
  .modal-list { padding: 8px; max-height: 380px; overflow-y: auto; }
  .modal-section {
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-mute);
    padding: 10px 14px 4px;
  }
  .modal-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13.5px;
  }
  .modal-item:hover { background: var(--bg); }
  .modal-item.kbd-focus { background: var(--bg); }
  .modal-item-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    color: var(--pumpkin);
    font-size: 12px;
    flex-shrink: 0;
  }
  .modal-item-body { flex: 1; min-width: 0; }
  .modal-item-title { font-weight: 500; }
  .modal-item-meta { font-size: 11.5px; color: var(--text-mute); }
  .modal-item-kbd {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    background: var(--bg);
    border-radius: 4px;
    padding: 2px 6px;
    border: 1px solid var(--br);
    color: var(--text-mute);
  }
  .modal-foot {
    padding: 10px 18px;
    background: var(--bg);
    border-top: 1px solid var(--br);
    display: flex; justify-content: space-between;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-mute);
    letter-spacing: 1.5px;
  }

  /* ─── Toast ─── */
  .toast {
    position: fixed;
    bottom: 24px; right: 24px;
    background: var(--jet);
    color: var(--linen);
    padding: 14px 20px;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    font-size: 13.5px;
    display: flex; align-items: center; gap: 12px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all .25s ease;
  }
  .toast.show { opacity: 1; transform: translateY(0); }
  html.dark .toast { background: var(--linen); color: var(--jet); }
  .toast-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--pumpkin);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
  }

  /* ─── Responsive ─── */
  @media (max-width: 1000px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .services { grid-template-columns: 1fr; }
    .twocol, .ass-grid, .sso-grid, .swot, .persona-grid, .analyson { grid-template-columns: 1fr; }
    .cloud { grid-template-columns: 1fr; }
    .media-grid { grid-template-columns: repeat(2, 1fr); }
    .token-hero { grid-template-columns: 1fr; }
    .topbar { padding: 12px 18px; gap: 10px; flex-wrap: wrap; }
    .search-btn { order: 99; flex-basis: 100%; max-width: none; }
    .view { padding: 20px 18px 60px; }
    .page-title { font-size: 28px; }
  }

/* ── Zone animée par les bascules de mode (pagefx.js) : sortie en fondu
   avec glissement vers le bas, entrée en fondu avec remontée. Posée par
   les pages SOUS leur bandeau d'entête, qui reste fixe. ── */
.pagefx { transition: opacity .24s ease, transform .24s ease; }
.pagefx.out { opacity: 0; transform: translateY(26px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pagefx { transition: none; } }

  /* ── Revue du 22/08/2026 : anneau de focus clavier visible partout —
        plusieurs règles posaient outline: none sans remplacement. ── */
  :focus-visible {
    outline: 2px solid var(--pumpkin);
    outline-offset: 2px;
  }