:root {
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
    --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px; --space-10:80px;
    --spacing:var(--space-6); --spacing-sm:var(--space-4);
    --radius:8px;
    --font-size-base:1rem; --font-size-sm:0.9375rem; --font-size-xs:0.875rem;
    --topbar-h:56px;

    /* ===== Charte (tokens shadcn définis explicitement) =====
       Primaire #2E69E8 = hsl(221 80% 55%) ; foncé #224EAE = hsl(221 67% 41%) ;
       base (à la place du noir) #092652 = hsl(216 80% 18%). */
    --background: 0 0% 100%;
    --foreground: 216 80% 18%;
    --card: 0 0% 100%;
    --card-foreground: 216 80% 18%;
    --popover: 0 0% 100%;
    --popover-foreground: 216 80% 18%;
    --primary: 221 80% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-strong: 221 67% 41%;
    --secondary: 216 38% 96%;
    --secondary-foreground: 216 80% 18%;
    --muted: 216 33% 95%;
    --muted-foreground: 216 18% 45%;
    --accent: 216 40% 94%;
    --accent-foreground: 216 80% 18%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 216 28% 90%;
    --border-strong: 216 24% 80%;
    --input: 216 28% 88%;
    --ring: 221 80% 55%;
  }
  html.dark {
    --background: 216 80% 12%;
    --foreground: 0 0% 98%;
    --card: 216 64% 17%;
    --card-foreground: 0 0% 98%;
    --popover: 216 64% 17%;
    --popover-foreground: 0 0% 98%;
    --primary: 221 83% 62%;
    --primary-foreground: 0 0% 100%;
    --primary-strong: 221 67% 48%;
    --secondary: 216 45% 24%;
    --secondary-foreground: 0 0% 98%;
    --muted: 216 45% 22%;
    --muted-foreground: 216 20% 72%;
    --accent: 216 45% 26%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62% 52%;
    --destructive-foreground: 0 0% 98%;
    --border: 216 38% 28%;
    --border-strong: 216 36% 36%;
    --input: 216 38% 30%;
    --ring: 221 83% 62%;
  }

  h1,h2,h3,h4,h5,h6,p,ul,ol,dl,table,pre,blockquote,figure,hr { margin:0; }
  img,svg { max-width:100%; }
  *,*::before,*::after { box-sizing:border-box; }

  .flow>*+* { margin-top:var(--space-4); }
  .flow-sm>*+* { margin-top:var(--space-2); }
  .flow-lg>*+* { margin-top:var(--space-6); }
  .flow-xl>*+* { margin-top:var(--space-8); }

  body { font-family:'Manrope',system-ui,sans-serif; font-size:var(--font-size-base); }
  html,body { background-color:hsl(var(--background)); color:hsl(var(--foreground)); min-height:100%; }
  /* Réserve toujours la gouttière de scrollbar : la largeur ne saute pas selon
     la présence ou non de l'ascenseur (topbar et contenu restent alignés). */
  html { scrollbar-gutter:stable; }
  h1,h2,h3,h4,h5,h6,.uk-heading-small,.uk-heading-medium {
    font-family:'Poppins',system-ui,sans-serif; font-weight:700; letter-spacing:-0.02em;
  }
  .num,[data-num],.uk-badge,table td.num,.stat-value {
    font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; font-size:0.85em;
  }
  a { color:hsl(var(--primary)); }

  /* Grilles custom (mobile-first) */
  .grid { display:grid; gap:var(--space-6); }
  .grid-sm { display:grid; gap:var(--space-4); }
  .grid>*,.grid-sm>* { min-width:0; }
  .cols-4,.cols-3,.cols-2,.cols-2-1,.cols-3-1,.cols-1-3 { grid-template-columns:1fr; }
  @media (min-width:768px){
    .cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cols-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
    .cols-3-1{grid-template-columns:minmax(0,3fr) minmax(0,1fr);}
    .cols-1-3{grid-template-columns:minmax(0,1fr) minmax(0,3fr);}
  }
  @media (min-width:1100px){
    .cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
    .cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  }

  /* Un seul conteneur centré : .container porte la largeur max et le padding.
     main reste un simple bloc, pour ne pas indenter deux fois le contenu et
     garantir un alignement parfait avec la colonne de la top bar. */
  main { display:block; }
  .container { padding:var(--space-4); max-width:1280px; margin:0 auto; width:100%; }
  @media (min-width:768px){ .container { padding:var(--space-6); } }

  /* FrankenUI overrides */
  .uk-card,.uk-input,.uk-textarea,.uk-select,.divider { border:1px solid hsl(var(--border-strong)); }
  /* Padding de carte garanti (référence des marges négatives de l'en-tête) */
  .uk-card-body { padding:var(--space-5); }
  .uk-card-header {
    margin:calc(var(--space-5)*-1) calc(var(--space-5)*-1) var(--space-5);
    padding:var(--space-3) var(--space-5);
    border-bottom:1px solid hsl(var(--border-strong)); min-height:52px;
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  }
  /* L'en-tête gère seul son espacement bas : pas de double marge avec .flow */
  .uk-card-header + * { margin-top:0 !important; }
  .uk-card-header h2, .uk-card-header h3 { margin:0; }

  /* Boutons : icône + texte espacés ; texte primaire lisible (corrige noir/noir) */
  .uk-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .uk-btn-primary {
    --uk-btn-bg: hsl(var(--primary)); --uk-btn-color: hsl(var(--primary-foreground));
    background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); border:1px solid hsl(var(--primary));
  }
  .uk-btn-primary:hover { background:hsl(var(--primary-strong)); border-color:hsl(var(--primary-strong)); color:hsl(var(--primary-foreground)); }
  /* Bouton « default » : bordure nette, visible en clair ET en sombre */
  .uk-btn-default { border:1px solid hsl(var(--border-strong)); }
  .uk-btn-default:hover { border-color:hsl(var(--border-strong)); background:hsl(var(--accent)); }

  .uk-modal-dialog { position:relative; }
  .uk-modal-close-default {
    position:absolute; top:12px; right:12px; width:32px; height:32px;
    background:transparent; border:0; border-radius:6px; color:hsl(var(--muted-foreground));
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .uk-modal-close-default:hover { background:hsl(var(--accent)); color:hsl(var(--foreground)); }
  .uk-btn-danger { background:hsl(var(--destructive)); color:hsl(var(--destructive-foreground)); border:1px solid hsl(var(--destructive)); }
  .uk-btn-danger:hover { background:hsl(var(--destructive)/0.88); border-color:hsl(var(--destructive)/0.88); }

  /* Skip link */
  .skip-link { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
  .skip-link:focus { position:static; left:0; width:auto; height:auto; padding:8px 14px; margin:8px;
    display:inline-block; background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); border-radius:4px; }

  /* ----- Top bar ----- */
  .topbar { position:sticky; top:0; z-index:40; background:hsl(var(--card));
    border-bottom:1px solid hsl(var(--border-strong)); }
  /* Aligné sur la grille du corps : même max-width et mêmes paddings horizontaux que main/.container */
  .topbar-inner { display:flex; align-items:center; gap:var(--space-3);
    padding:var(--space-2) var(--space-4); max-width:1280px; margin:0 auto; min-height:var(--topbar-h); }
  @media (min-width:768px){ .topbar-inner { padding:var(--space-2) var(--space-6); } }
  .tb-brand { display:flex; align-items:center; gap:var(--space-2); text-decoration:none; color:hsl(var(--foreground)); min-width:0; }
  .tb-brand img,.tb-brand .tb-logo { height:28px; width:auto; flex-shrink:0; }
  /* Cadre du logo inline. `contain:paint` crée un bloc conteneur : un descendant
     en position:fixed ne peut plus s'échapper et recouvrir la page. Dernier
     rempart si un SVG stocké sous une règle antérieure porte encore un style. */
  .tb-logo-box { display:inline-flex; align-items:center; height:28px; max-width:220px;
    overflow:hidden; contain:paint; flex-shrink:0; }
  .tb-brand-name { font-family:'Poppins',sans-serif; font-weight:700; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tb-sep { color:hsl(var(--muted-foreground)); }
  .tb-spacer { flex:1; }
  .tb-actions { display:flex; align-items:center; gap:var(--space-1); }
  .tb-iconbtn { background:transparent; border:0; color:hsl(var(--muted-foreground)); cursor:pointer;
    padding:6px 8px; border-radius:6px; font-size:1.25rem; line-height:1; display:inline-flex; align-items:center; position:relative; text-decoration:none; }
  .tb-iconbtn:hover { color:hsl(var(--foreground)); background:hsl(var(--accent)); }
  .tb-badge { position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px;
    background:hsl(var(--destructive)); color:hsl(var(--destructive-foreground));
    border-radius:9px; font-size:0.65rem; line-height:16px; text-align:center; font-family:'JetBrains Mono',monospace; }
  .tb-app-switch { display:inline-flex; align-items:center; gap:6px; background:transparent; border:0;
    color:hsl(var(--foreground)); cursor:pointer; padding:6px 8px; border-radius:6px; font-size:var(--font-size-sm); }
  .tb-app-switch:hover { background:hsl(var(--accent)); }

  /* Menus déroulants top bar */
  .tb-menu { min-width:240px; }
  .tb-menu .uk-nav>li>a { padding:7px 12px; border-radius:6px; }
  .tb-menu-head { padding:10px 12px; border-bottom:1px solid hsl(var(--border)); }
  .tb-menu-head .nm { font-weight:600; }
  .tb-menu-head .rl { color:hsl(var(--muted-foreground)); font-size:var(--font-size-xs); }
  .tb-menu-section { padding:6px 12px 2px; color:hsl(var(--muted-foreground)); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; }

  /* Espacement icône↔texte (menus, listes) + cases à cocher↔libellé */
  .uk-nav > li > a, .uk-dropdown-nav > li > a { display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:6px; color:hsl(var(--foreground)); text-decoration:none; }
  /* Liens des menus déroulants : texte en couleur de base, icônes en primary */
  .uk-nav > li > a .ph, .uk-dropdown-nav > li > a .ph { color:hsl(var(--primary)); }
  .uk-nav > li > a:hover, .uk-dropdown-nav > li > a:hover { background:hsl(var(--accent)); color:hsl(var(--foreground)); }
  /* Bouton "Déconnexion" (formulaire POST) : même rendu que les liens du menu */
  .tb-menu-logout { display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:6px; width:100%; border:0; background:none; cursor:pointer; font:inherit; text-align:left; color:hsl(var(--foreground)); }
  .tb-menu-logout .ph { color:hsl(var(--primary)); }
  .tb-menu-logout:hover { background:hsl(var(--accent)); }

  /* Filets de liste visibles aussi en mode sombre (token --border) */
  .uk-list-divider > :nth-child(n+2) { border-top:1px solid hsl(var(--border)); }
  .uk-checkbox, .uk-radio { margin-right:8px; vertical-align:middle; }

  /* Onglets / sous-navigation en pilules (FrankenUI 2.x ne les style pas) */
  .uk-subnav { display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; padding:0; }
  .uk-subnav > * { padding:0; }
  .uk-subnav > * > a { display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
    border-radius:999px; color:hsl(var(--muted-foreground)); text-decoration:none;
    font-size:var(--font-size-sm); font-weight:600; transition:background .15s,color .15s; }
  .uk-subnav > * > a:hover { background:hsl(var(--accent)); color:hsl(var(--foreground)); }
  .uk-subnav-pill > .uk-active > a,
  .uk-subnav > .uk-active > a { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }

  /* Pagination : flèches et numéros sur une seule ligne, alignés */
  .uk-pagination { display:flex; align-items:center; justify-content:center; gap:var(--space-2);
    list-style:none; margin:0; padding:0; }
  .uk-pagination > li { display:flex; align-items:center; margin:0; }
  .uk-pagination > li > a { display:inline-flex; align-items:center; justify-content:center;
    min-width:32px; height:32px; padding:0 8px; border-radius:6px; color:hsl(var(--foreground)); }
  .uk-pagination > li > a:hover { background:hsl(var(--accent)); }
  .uk-pagination > li.uk-disabled > a { opacity:0.4; pointer-events:none; }
  .uk-pagination .pg-disabled { display:inline-flex; align-items:center; justify-content:center;
    min-width:32px; height:32px; opacity:0.4; }

  /* En-têtes de colonnes triables */
  .th-sort { display:inline-flex; align-items:center; gap:4px; color:inherit; text-decoration:none; }
  .th-sort:hover { color:hsl(var(--foreground)); }
  .th-sort .ph { font-size:0.9rem; opacity:0.55; }
  .th-sort.is-active { color:hsl(var(--primary)); }
  .th-sort.is-active .ph { opacity:1; }

  /* Sélecteur de destinataires (autocomplétion + pills) */
  .rp-suggest { position:relative; }
  .recipient-picker { display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    border:1px solid hsl(var(--border-strong)); border-radius:var(--radius); padding:6px 8px;
    background:hsl(var(--background)); cursor:text; min-height:40px; }
  .recipient-picker .rp-input { border:0; outline:0; background:transparent; color:inherit;
    font:inherit; flex:1; min-width:160px; padding:4px; }
  .rp-pill { display:inline-flex; align-items:center; gap:6px; padding:2px 6px 2px 11px;
    border-radius:2em; font-size:var(--font-size-xs); font-weight:600;
    background:hsl(var(--primary)/0.12); color:hsl(var(--primary)); border:1px solid hsl(var(--primary)/0.35); }
  .rp-pill button { border:0; background:none; cursor:pointer; color:inherit; padding:0;
    display:inline-flex; align-items:center; font-size:0.95em; border-radius:50%; }
  .rp-pill button:hover { color:hsl(var(--destructive)); }
  .rp-suggest-list { position:absolute; z-index:30; left:0; right:0; margin-top:4px;
    background:hsl(var(--card)); border:1px solid hsl(var(--border-strong)); border-radius:var(--radius);
    box-shadow:0 10px 24px -10px rgba(0,0,0,0.25); max-height:260px; overflow:auto; }
  .rp-suggest-list button { display:block; width:100%; text-align:left; border:0; background:none;
    padding:8px 12px; cursor:pointer; color:hsl(var(--foreground)); font:inherit; }
  .rp-suggest-list button:hover { background:hsl(var(--accent)); }

  /* Avatar */
  .avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .avatar-initials { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); font-weight:600; font-size:0.8rem; flex-shrink:0; }
  .avatar-lg,.avatar-initials.avatar-lg { width:56px; height:56px; font-size:1.2rem; }
  /* Compte anonymisé : fond gris neutre, pas la couleur primaire — l'absence
     d'identité doit se distinguer d'un monogramme au premier coup d'œil. */
  .avatar-initials.avatar-anon { background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); }

  /* États standardisés */
  .state-empty,.state-error { text-align:center; padding:var(--space-8) var(--space-4); color:hsl(var(--muted-foreground)); }
  .state-empty .ph,.state-error .ph { font-size:2.5rem; display:block; margin-bottom:var(--space-3); opacity:0.6; }
  .state-loading { display:flex; align-items:center; justify-content:center; padding:var(--space-7); color:hsl(var(--muted-foreground)); gap:var(--space-2); }
  /* Bouton d'action d'un bloc d'état vide : il collait au message, faute de
     règle derrière `uk-margin-small-top`. Posé sur le COMPOSANT et non sur la
     classe, pour couvrir tout appel à ui.state_empty() quelle que soit sa
     déclinaison. */
  .state-empty .uk-btn,.state-error .uk-btn { margin-top:var(--space-3); }

  /* Utilitaires d'espacement réellement définis. Ces trois classes étaient
     présentes dans les gabarits du cœur ET dans les applications, mais
     n'existaient ni dans FrankenUI 2 (qui a renommé toute cette famille) ni
     ici : elles ne produisaient donc aucun effet, en silence. */
  .uk-margin-small-top { margin-top:var(--space-3); }
  .uk-margin { margin-top:var(--space-4); }
  .uk-margin-remove { margin:0; }

  /* Même famille de classes fantômes, héritées d'UIkit 3 : FrankenUI 2 les a
     renommées, les gabarits ont gardé les anciens noms. Elles ne faisaient rien.
     Alias vers les variables réellement définies par FrankenUI, plutôt que des
     valeurs redéclarées qui divergeraient à la prochaine montée de version. */
  .uk-btn-small { --uk-btn-height:2rem; --uk-btn-padding:0.5rem 1rem; }
  /* Noms de variables repris à l'identique de `.uk-form-sm` : inventer les
     miens laissait la classe inerte, ces variables n'étant lues par personne. */
  .uk-form-small { --uk-form-input-font-size:var(--uk-global-font-size-s);
    --uk-form-input-leading:var(--uk-global-leading-s);
    --uk-form-input-padding:0.25rem 0.5rem; --uk-form-input-height:2rem; }
  .uk-width-1-1 { width:100%; }
  .uk-text-danger { color:hsl(var(--destructive)); }
  .uk-text-success { color:hsl(142 60% 32%); }
  html.dark .uk-text-success { color:hsl(142 60% 60%); }
  /* Alertes : seule `uk-alert-destructive` existe côté FrankenUI. Les deux
     autres servent aux messages flash de succès et d'information — sans elles,
     toute confirmation s'affichait sans la moindre couleur. */
  .uk-alert-success { --uk-alert-bg:hsl(142 70% 45% / 0.12); --uk-alert-color:hsl(142 60% 28%); --uk-alert-border-color:hsl(142 70% 45% / 0.35); }
  .uk-alert-primary { --uk-alert-bg:hsl(var(--primary) / 0.10); --uk-alert-color:hsl(var(--primary-strong)); --uk-alert-border-color:hsl(var(--primary) / 0.30); }
  html.dark .uk-alert-success { --uk-alert-color:hsl(142 60% 65%); }

  /* Tables */
  .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ma-table { width:100%; border-collapse:collapse; }
  .ma-table th,.ma-table td { text-align:left; padding:10px 12px; border-bottom:1px solid hsl(var(--border)); vertical-align:middle; }
  .ma-table th { font-size:var(--font-size-xs); color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.03em; font-weight:600; }
  .ma-table tbody tr:hover { background:hsl(var(--accent)/0.5); }
  .table-scroll th,.table-scroll td { white-space:nowrap; }
  @media (min-width:768px){ .table-scroll th,.table-scroll td { white-space:normal; } }

  /* Badges statut / labels */
  .pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:var(--font-size-xs); font-weight:600; }
  .pill-active { background:hsl(142 70% 45%/0.15); color:hsl(142 60% 32%); }
  .pill-suspended { background:hsl(38 92% 50%/0.15); color:hsl(32 80% 38%); }
  .pill-archived { background:hsl(0 0% 50%/0.15); color:hsl(var(--muted-foreground)); }
  /* En attente : bleu, distinct de l'orange « suspendu » — ce n'est pas une
     sanction mais une étape non franchie (invitation jamais honorée). */
  .pill-pending { background:hsl(217 91% 60%/0.15); color:hsl(217 75% 40%); }
  html.dark .pill-active{color:hsl(142 60% 60%);} html.dark .pill-suspended{color:hsl(38 92% 62%);}
  html.dark .pill-pending{color:hsl(217 90% 72%);}
  .label-badge { display:inline-flex; align-items:center; gap:5px; padding:1px 11px; border-radius:2em; font-size:var(--font-size-xs); font-weight:600;
    background:hsl(var(--muted)); color:hsl(var(--foreground)); border:1px solid hsl(var(--border-strong));
    vertical-align:middle; margin:2px 4px 2px 0; }
  .label-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

  .page-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-5); }
  .page-head h1 { font-size:1.5rem; }
  .muted { color:hsl(var(--muted-foreground)); }

  /* Formulaires : erreurs par champ, champs requis, aide */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .req-mark { color:hsl(var(--destructive)); }
  .req-legend, .field-help { font-size:var(--font-size-xs); }
  .field-error { color:hsl(var(--destructive)); font-size:var(--font-size-xs); margin-top:var(--space-1); }
  .uk-input.uk-form-danger, .uk-select.uk-form-danger, .uk-textarea.uk-form-danger { border-color:hsl(var(--destructive)); }

  /* Bouton-icône nu (x des badges, actions discrètes) */
  .bare-icon-btn { border:0; background:none; padding:0; margin:0; line-height:1; cursor:pointer;
    color:inherit; font-size:0.85em; display:inline-flex; align-items:center; }
  .bare-icon-btn:hover { color:hsl(var(--destructive)); }

  /* Anti-double-soumission : bouton neutralisé pendant l'envoi (script global) */
  button[aria-busy="true"], input[type="submit"][aria-busy="true"] { opacity:.6; pointer-events:none; }
  .toolbar { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-bottom:var(--space-4); }
  .toolbar .uk-input,.toolbar .uk-select { max-width:240px; }

  .theme-toggle{background:transparent;border:0;color:hsl(var(--muted-foreground));cursor:pointer;padding:6px 8px;border-radius:6px;font-size:1.2rem;line-height:1;display:inline-flex;align-items:center;}
  .theme-toggle:hover{color:hsl(var(--foreground));background:hsl(var(--accent));}

  [x-cloak]{display:none !important;}

  /* Combobox destinataires : option active au clavier */
  .rp-suggest-list button.is-active { background:hsl(var(--accent)); }

  /* Fil d'ariane */
  .breadcrumb { margin-bottom:var(--space-2); }
  .breadcrumb ol { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0;
    font-size:var(--font-size-xs); }
  .breadcrumb li { display:inline-flex; align-items:center; gap:6px; color:hsl(var(--muted-foreground)); }
  .breadcrumb a { color:hsl(var(--muted-foreground)); text-decoration:none; }
  .breadcrumb a:hover { color:hsl(var(--foreground)); text-decoration:underline; }
  .breadcrumb .ph { font-size:0.7rem; opacity:0.6; }
  .breadcrumb [aria-current="page"] { color:hsl(var(--foreground)); font-weight:600; }

  /* Hub des paramètres (mobile-first : 1 colonne, 3 colonnes >=768px) */
  .settings-grid { display:grid; grid-template-columns:1fr; gap:var(--space-3); }
  @media (min-width:768px) { .settings-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .settings-card { display:flex; align-items:flex-start; gap:var(--space-3); text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s; }
  .settings-card:hover { border-color:hsl(var(--primary)); box-shadow:0 1px 3px hsl(var(--foreground)/0.08); }
  .settings-card .ph { font-size:1.6rem; color:hsl(var(--primary)); flex:none; line-height:1; }
  .settings-card .sc-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .settings-card .sc-title { font-weight:600; }
  .settings-card .sc-desc { font-size:var(--font-size-sm); }

  /* Éditeur d'emails transactionnels */
  .var-chip { border:1px solid hsl(var(--border)); background:hsl(var(--muted)); border-radius:6px; padding:3px 8px; cursor:pointer; line-height:1.2; }
  .var-chip:hover { border-color:hsl(var(--primary)); }
  .var-chip code { font-size:0.8em; color:hsl(var(--primary)); background:none; }
  .email-preview { width:100%; min-height:360px; border:1px solid hsl(var(--border)); border-radius:8px; background:#f3f4f6; }

  /* Fil de messages (messagerie) */
  .msg-row { display:flex; justify-content:flex-start; }
  .msg-row-own { justify-content:flex-end; }
  .msg-bubble { max-width:70%; background:hsl(var(--card)); color:hsl(var(--foreground));
    border:1px solid hsl(var(--border-strong)); border-radius:10px; padding:var(--space-2) var(--space-3); }
  .msg-bubble-own { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); border-color:hsl(var(--primary)); }
  .msg-bubble .msg-meta { font-size:var(--font-size-xs); color:hsl(var(--muted-foreground)); }
  .msg-bubble-own .msg-meta { color:hsl(var(--primary-foreground)); opacity:0.92; }
  .msg-bubble-own a { color:hsl(var(--primary-foreground)); text-decoration:underline; }

  /* Compteur dans les boutons-filtres (ex. « Non lues ») */
  .filter-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
    padding:0 5px; margin-left:4px; border-radius:9px; font-size:0.7rem;
    background:hsl(var(--destructive)); color:hsl(var(--destructive-foreground)); }

  /* Cibles tactiles : zone cliquable >=24px sur les petits boutons x (WCAG 2.5.8) */
  .rp-pill button, .bare-icon-btn { position:relative; }
  .rp-pill button::before, .bare-icon-btn::before { content:''; position:absolute; inset:-6px; }