/* ==========================================================================
   Design tokens
   Le plugin Frontend Portal Manager reste la source de verite des couleurs
   du portail : --fpm-* gagne quand il existe, sinon le repli du theme.
   ========================================================================== */

:root {
  /* --- couleur --- */
  --fpt-primary:      var(--fpm-primary,    var(--fpt-fallback-primary, #2271b1));
  --fpt-primary-dark: var(--fpm-hover,      var(--fpt-fallback-primary-dark, #135e96));
  --fpt-secondary:    var(--fpm-secondary,  var(--fpt-fallback-secondary, #50575e));
  --fpt-text:         var(--fpm-text,       var(--fpt-fallback-text, #1d2327));
  --fpt-muted:        var(--fpm-secondary,  var(--fpt-fallback-muted, #646970));
  --fpt-border:       var(--fpm-border,     var(--fpt-fallback-border, #dcdcde));
  --fpt-bg:           var(--fpm-background, var(--fpt-fallback-background, #f6f7f7));
  --fpt-surface:      var(--fpm-surface,    var(--fpt-fallback-surface, #fff));
  /* Les champs ont leur propre fond et leur propre bordure : sur une
     carte teintee, un champ qui reprend --fpt-surface disparait. */
  --fpt-field:        var(--fpm-field,      var(--fpt-fallback-field, #fff));
  --fpt-field-bd:     var(--fpm-field-bd,   var(--fpt-fallback-field-bd, #8c8f94));
  --fpt-sidebar:      var(--fpm-sidebar,    var(--fpt-fallback-sidebar, #1d2327));
  --fpt-sidebar-tx:   var(--fpm-sidebar-tx, var(--fpt-fallback-sidebar-tx, #e6e8ea));
  --fpt-header:       var(--fpm-header,     var(--fpt-fallback-header, #fff));
  --fpt-success:      var(--fpt-fallback-success, #00a32a);
  --fpt-warning:      var(--fpt-fallback-warning, #dba617);
  --fpt-danger:       var(--fpt-fallback-danger, #d63638);

  /* surfaces derivees */
  --fpt-surface-2:    color-mix(in srgb, var(--fpt-surface) 96%, var(--fpt-text));
  --fpt-tint:         color-mix(in srgb, var(--fpt-primary) 8%, transparent);
  --fpt-tint-strong:  color-mix(in srgb, var(--fpt-primary) 14%, transparent);
  --fpt-on-primary:   #fff;

  /* --- espacement (echelle 4) --- */
  --fpt-1: 4px;  --fpt-2: 8px;  --fpt-3: 12px; --fpt-4: 16px;
  --fpt-5: 24px; --fpt-6: 32px; --fpt-7: 48px; --fpt-8: 64px;

  /* --- typographie --- */
  /* La pile reglee dans le plugin l'emporte. Le repli commence par les
     interfaces systeme recentes, dont le dessin est nettement plus net
     que celui d'Helvetica ou d'Arial a petite taille. */
  --fpt-font: var(--fpm-font, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, "Noto Sans", sans-serif);
  --fpt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fpt-fs:    var(--fpm-fs, 15px);
  --fpt-fs-xs: 0.75rem;
  --fpt-fs-sm: 0.8125rem;
  --fpt-fs-lg: 1.125rem;
  --fpt-h1:    1.5rem;
  --fpt-h2:    1.0625rem;
  --fpt-h3:    0.9375rem;
  --fpt-lh:       1.55;
  --fpt-lh-tight: 1.25;
  --fpt-fw:    400;
  --fpt-fw-md: 500;
  --fpt-fw-b:  600;
  --fpt-track: 0.04em;

  /* --- forme --- */
  --fpt-radius:    var(--fpm-radius, 8px);
  --fpt-radius-sm: calc(var(--fpt-radius) / 2);
  --fpt-radius-lg: calc(var(--fpt-radius) * 1.5);
  --fpt-shadow:    var(--fpm-shadow, 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04));
  --fpt-shadow-lg: 0 8px 24px rgba(0,0,0,.10);
  --fpt-ring:      0 0 0 3px color-mix(in srgb, var(--fpt-primary) 22%, transparent);

  /* --- structure --- */
  --fpt-sidebar-w: 260px;
  --fpt-sidebar-collapsed: 68px;
  --fpt-header-h: 60px;
  --fpt-content-w: var(--fpm-width, 1240px);
  --fpt-gap: var(--fpm-gap, 20px);

  /* --- surfaces : chacune a son role, meme quand la couleur est
     identique. Le plugin decide, le theme fournit le repli. --- */
  --fpt-panel:      var(--fpm-panel,      var(--fpt-surface));
  --fpt-panel-bd:   var(--fpm-panel-bd,   var(--fpt-border));
  --fpt-tile:       var(--fpm-tile,       var(--fpt-surface));
  --fpt-tile-bd:    var(--fpm-tile-bd,    var(--fpt-border));
  --fpt-table:      var(--fpm-table,      var(--fpt-surface));
  --fpt-table-bd:   var(--fpm-table-bd,   var(--fpt-border));
  --fpt-table-head: var(--fpm-table-head, var(--fpt-surface-2));
  --fpt-row-hover:  var(--fpm-row-hover,  var(--fpt-tint));

  /* --- couleurs fonctionnelles : un bouton n'est pas une surface --- */
  --fpt-btn:        var(--fpm-button,    var(--fpt-primary));
  /* Le bouton principal et la couleur principale peuvent legitimement
     differer : leur texte aussi. Lier les deux donne, en mode sombre, un
     libelle sombre sur un bouton sombre. */
  --fpt-on-btn:     var(--fpm-on-button,  var(--fpt-on-primary));
  --fpt-btn-hover:  var(--fpm-hover,     var(--fpt-primary-dark));
  --fpt-btn2:       var(--fpm-btn2,      var(--fpt-surface));
  --fpt-btn2-bd:    var(--fpm-btn2-bd,   var(--fpt-border));
  --fpt-btn2-hover: var(--fpm-btn2-hover, var(--fpt-surface-2));

  /* --- cartes : ce que les presets font varier --- */
  --fpt-card-bd: 1px;
  --fpt-card-pad: var(--fpt-5);
  --fpt-card-head-pad: var(--fpt-3) var(--fpt-5);
  --fpt-card-head-bd: 1px;
  --fpt-card-head-bg: var(--fpt-surface);
  --fpt-card-title-size: var(--fpt-h3);
  --fpt-card-title-weight: var(--fpt-fw-b);
  --fpt-card-title-case: uppercase;
  --fpt-card-title-color: var(--fpt-muted);
  /* Rayon propre aux cartes : le reglage fin du plugin l'emporte,
     sinon on suit le rayon general, lui-meme pilote par le preset. */
  --fpt-card-radius: var(--fpm-card-radius, var(--fpt-radius));
  /* Survol neutre par defaut : seul un preset ou un reglage fin l'active. */
  --fpt-card-hover-shadow: var(--fpm-card-hover-shadow, var(--fpt-shadow));
  --fpt-card-lift: var(--fpm-card-lift, 0px);

  /* --- relief : ce qui ressort, ce qui s'enfonce --------------------
     Une interface lit la profondeur au contraste entre les deux, pas a
     l'accumulation d'ombres. Les surfaces qu'on pose (cartes, boutons)
     portent une ombre exterieure ; celles qu'on creuse (champs, jauges,
     barre de recherche) portent une ombre interieure. Neutres par
     defaut : seul un preset ou un reglage fin du plugin les active. --- */
  --fpt-edge:          var(--fpm-edge, none);
  --fpt-field-shadow:  var(--fpm-field-shadow, none);
  --fpt-well:          var(--fpm-well, var(--fpt-surface-2));
  --fpt-well-shadow:   var(--fpm-well-shadow, none);
  --fpt-btn-shadow:    var(--fpm-btn-shadow, none);
  --fpt-btn-shadow-h:  var(--fpm-btn-shadow-h, var(--fpt-btn-shadow));
  --fpt-head-shadow:   var(--fpm-head-shadow, none);
  --fpt-icon-tile:     32px;
  --fpt-gauge-h:       6px;

  /* --- navigation : du filet lateral a la pilule --- */
  --fpt-nav-radius:      var(--fpm-nav-radius, 0px);
  --fpt-nav-gutter:      var(--fpm-nav-gutter, 0px);
  --fpt-nav-pad:         9px var(--fpt-4);
  --fpt-nav-indicator:   3px;
  --fpt-nav-active-bg:   rgba(255,255,255,.11);
  --fpt-nav-active-tx:   var(--fpm-nav-active-tx, #fff);
  --fpt-nav-active-edge: none;
  --fpt-sidebar-edge:    none;

  /* --- mouvement --- */
  --fpt-speed: .18s;
  --fpt-ease: cubic-bezier(.2,0,.2,1);

  color-scheme: light;
}

/* ==========================================================================
   Mode sombre
   Redefinit aussi --fpm-* pour que les composants du plugin suivent.
   ========================================================================== */

[data-theme="dark"] {
  --fpt-text: #e8eaed;
  --fpt-field: #22272c;
  --fpt-field-bd: #3a4149;
  --fpt-muted: #9aa0a6;
  --fpt-border: #2c3238;
  --fpt-bg: #14171a;
  --fpt-surface: #1b1f23;
  --fpt-surface-2: #22272c;
  --fpt-sidebar: #0f1214;
  --fpt-sidebar-tx: #d3d7db;
  --fpt-header: #1b1f23;
  --fpt-primary: #6ba8e0;
  --fpt-primary-dark: #8dbdea;
  --fpt-secondary: #9aa0a6;
  --fpt-success: #4ec97a;
  --fpt-warning: #e5bb52;
  --fpt-danger: #f07a7c;
  --fpt-on-primary: #0f1214;
  --fpt-on-btn: #fff;
  --fpt-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --fpt-shadow-lg: 0 8px 28px rgba(0,0,0,.55);

  --fpm-text: #e8eaed;
  --fpm-secondary: #9aa0a6;
  --fpm-border: #2c3238;
  --fpm-background: #14171a;
  --fpm-surface: #1b1f23;
  --fpm-field: #22272c;
  --fpm-field-bd: #3a4149;
  --fpm-panel: #1b1f23;
  --fpm-panel-bd: #2c3238;
  --fpm-tile: #1b1f23;
  --fpm-tile-bd: #2c3238;
  --fpm-table: #1b1f23;
  --fpm-table-bd: #2c3238;
  --fpm-table-head: #22272c;
  --fpm-row-hover: #22272c;
  --fpm-folder: #1b1f23;
  --fpm-folder-bd: #2c3238;
  --fpm-folder-hover: #22272c;
  --fpm-folder-hover-bd: #6ba8e0;
  --fpm-document: #1b1f23;
  --fpm-document-bd: #2c3238;
  --fpm-document-hover: #22272c;
  --fpm-document-hover-bd: #6ba8e0;
  --fpm-btn2: #22272c;
  --fpm-btn2-bd: #3a4149;
  --fpm-btn2-hover: #2c3238;
  --fpm-sidebar: #0f1214;
  --fpm-sidebar-tx: #d3d7db;
  --fpm-header: #1b1f23;
  --fpm-primary: #6ba8e0;
  --fpm-link: #8dbdea;
  --fpm-button: #2f5f8a;
  --fpm-hover: #3d7bb0;
  --fpm-shadow: 0 1px 2px rgba(0,0,0,.5);
  /* En sombre, une ombre portee ne se voit plus : le relief passe par
     une arete claire au sommet de chaque surface et par un fond de
     carte plus clair que la page. Sans cela, un simple inversement de
     couleurs rend le mode sombre entierement plat. */
  --fpt-edge: inset 0 1px 0 rgba(255,255,255,.05);
  --fpm-edge: inset 0 1px 0 rgba(255,255,255,.05);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --fpt-text: #e8eaed;
    --fpt-field: #22272c;
    --fpt-field-bd: #3a4149;
    --fpt-muted: #9aa0a6;
    --fpt-border: #2c3238;
    --fpt-bg: #14171a;
    --fpt-surface: #1b1f23;
    --fpt-surface-2: #22272c;
    --fpt-sidebar: #0f1214;
    --fpt-sidebar-tx: #d3d7db;
    --fpt-header: #1b1f23;
    --fpt-primary: #6ba8e0;
    --fpt-primary-dark: #8dbdea;
    --fpt-secondary: #9aa0a6;
    --fpt-success: #4ec97a;
    --fpt-warning: #e5bb52;
    --fpt-danger: #f07a7c;
    --fpt-on-primary: #0f1214;
    --fpt-on-btn: #fff;
    --fpt-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    --fpt-shadow-lg: 0 8px 28px rgba(0,0,0,.55);

    --fpm-text: #e8eaed;
    --fpm-secondary: #9aa0a6;
    --fpm-border: #2c3238;
    --fpm-background: #14171a;
    --fpm-surface: #1b1f23;
    --fpm-field: #22272c;
    --fpm-field-bd: #3a4149;
    --fpm-panel: #1b1f23;
    --fpm-panel-bd: #2c3238;
    --fpm-tile: #1b1f23;
    --fpm-tile-bd: #2c3238;
    --fpm-table: #1b1f23;
    --fpm-table-bd: #2c3238;
    --fpm-table-head: #22272c;
    --fpm-row-hover: #22272c;
    --fpm-folder: #1b1f23;
    --fpm-folder-bd: #2c3238;
    --fpm-folder-hover: #22272c;
    --fpm-folder-hover-bd: #6ba8e0;
    --fpm-document: #1b1f23;
    --fpm-document-bd: #2c3238;
    --fpm-document-hover: #22272c;
    --fpm-document-hover-bd: #6ba8e0;
    --fpm-btn2: #22272c;
    --fpm-btn2-bd: #3a4149;
    --fpm-btn2-hover: #2c3238;
    --fpm-sidebar: #0f1214;
    --fpm-sidebar-tx: #d3d7db;
    --fpm-header: #1b1f23;
    --fpm-primary: #6ba8e0;
    --fpm-link: #8dbdea;
    --fpm-button: #2f5f8a;
    --fpm-hover: #3d7bb0;
    --fpm-shadow: 0 1px 2px rgba(0,0,0,.5);
    /* En sombre, une ombre portee ne se voit plus : le relief passe par
       une arete claire au sommet de chaque surface et par un fond de
       carte plus clair que la page. Sans cela, un simple inversement de
       couleurs rend le mode sombre entierement plat. */
    --fpt-edge: inset 0 1px 0 rgba(255,255,255,.05);
    --fpm-edge: inset 0 1px 0 rgba(255,255,255,.05);

    color-scheme: dark;
  }
}

/* ==========================================================================
   Presets — n'agissent que sur la forme et la densite, jamais sur la
   palette choisie par l'administrateur dans le plugin.
   ========================================================================== */

/* Moderne : la carte tient par son ombre, plus par ses traits. Entete
   fondu dans le corps, titre lisible, relief au survol.

   Le relief vient de deux ombres superposees, jamais d'une seule : une
   arete courte et nette de 1 px pose le bord de la surface, une longue
   et tres pale de 24 px creuse la distance au fond. Une ombre unique
   donne la boite qui flotte ; deux donnent la surface posee. */
[data-preset="moderne"] {
  --fpt-radius: 14px;
  --fpt-shadow: 0 1px 2px rgba(16,38,64,.06), 0 8px 24px -12px rgba(16,38,64,.18);
  --fpt-shadow-lg: 0 4px 10px rgba(16,38,64,.08), 0 24px 48px -20px rgba(16,38,64,.32);
  --fpt-gap: 20px;
  --fpt-track: 0.01em;

  /* La carte garde un trait, mais tres pale : sans lui, deux cartes
     mitoyennes se confondent des que l'ombre est douce. */
  --fpt-card-bd: 1px;
  --fpt-card-pad: var(--fpt-5);
  --fpt-card-head-pad: var(--fpt-4) var(--fpt-5);
  --fpt-card-head-bd: 1px;
  --fpt-card-head-bg: transparent;
  --fpt-card-title-size: .9375rem;
  --fpt-card-title-weight: var(--fpt-fw-b);
  --fpt-card-title-case: none;
  --fpt-card-title-color: var(--fpt-text);
  --fpt-card-hover-shadow: var(--fpm-card-hover-shadow, 0 2px 4px rgba(16,38,64,.08), 0 18px 36px -16px rgba(16,38,64,.28));
  --fpt-card-lift: var(--fpm-card-lift, -2px);

  /* Ce qui s'enfonce. */
  --fpt-field-shadow: var(--fpm-field-shadow, inset 0 1px 2px rgba(16,38,64,.06));
  --fpt-well-shadow:  var(--fpm-well-shadow, inset 0 1px 2px rgba(16,38,64,.1));
  --fpt-field-bd:     var(--fpm-field-bd, color-mix(in srgb, var(--fpt-border) 70%, var(--fpt-text) 6%));

  /* Ce qui ressort. Le liseré clair en haut du bouton est ce qui lui
     donne son epaisseur : sans lui, il reste un rectangle colore. */
  --fpt-btn-shadow:   var(--fpm-btn-shadow, 0 1px 2px rgba(16,38,64,.1), inset 0 1px 0 rgba(255,255,255,.14));
  --fpt-btn-shadow-h: var(--fpm-btn-shadow-h, 0 2px 4px rgba(16,38,64,.16), 0 8px 16px -10px rgba(16,38,64,.5), inset 0 1px 0 rgba(255,255,255,.18));
  --fpt-head-shadow:  var(--fpm-head-shadow, 0 1px 3px rgba(16,38,64,.05));

  /* Navigation en pilule : l'element actif devient un objet pose sur la
     colonne, au lieu d'un filet colle au bord. */
  --fpt-nav-radius:      var(--fpm-nav-radius, 9px);
  --fpt-nav-gutter:      var(--fpm-nav-gutter, 12px);
  --fpt-nav-pad:         9px var(--fpt-3);
  --fpt-nav-indicator:   0px;
  --fpt-nav-active-bg:   linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  --fpt-nav-active-edge: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.2);
  --fpt-sidebar-edge:    inset -1px 0 0 rgba(255,255,255,.06), 4px 0 24px -12px rgba(10,26,45,.5);
}

/* Corporate : dense et cadre, entete marque, aucun effet. */
[data-preset="corporate"] {
  --fpt-radius: 3px;
  --fpt-shadow: 0 1px 0 rgba(0,0,0,.05);
  --fpt-gap: 16px;
  --fpt-fw-b: 700;
  --fpt-track: 0.06em;
  --fpt-card-pad: var(--fpt-4);
  --fpt-card-head-pad: var(--fpt-2) var(--fpt-4);
  --fpt-card-head-bg: var(--fpt-surface-2);
  --fpt-card-title-size: var(--fpt-fs-sm);
}

/* Minimal : ni ombre ni cadre, un simple filet sous l'entete. */
[data-preset="minimal"] {
  --fpt-radius: 0px;
  --fpt-shadow: none;
  --fpt-shadow-lg: none;
  --fpt-gap: 28px;
  --fpt-surface-2: transparent;
  --fpt-card-bd: 0px;
  --fpt-card-pad: var(--fpt-4) 0;
  --fpt-card-head-pad: 0 0 var(--fpt-2);
  --fpt-card-head-bg: transparent;
  --fpt-card-title-size: var(--fpt-fs-sm);
  --fpt-card-hover-shadow: var(--fpm-card-hover-shadow, none);
}

/* Le relief du preset moderne, transpose en sombre. */
[data-theme="dark"][data-preset="moderne"],
[data-theme="dark"] [data-preset="moderne"] {
  --fpt-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px -18px rgba(0,0,0,.9);
  --fpt-shadow-lg: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -20px rgba(0,0,0,.95);
  --fpt-card-hover-shadow: var(--fpm-card-hover-shadow, inset 0 1px 0 rgba(255,255,255,.08), 0 18px 36px -18px rgba(0,0,0,.95));
  --fpt-field-shadow: var(--fpm-field-shadow, inset 0 1px 3px rgba(0,0,0,.4));
  --fpt-well-shadow:  var(--fpm-well-shadow, inset 0 1px 3px rgba(0,0,0,.45));
  --fpt-btn-shadow:   var(--fpm-btn-shadow, inset 0 1px 0 rgba(255,255,255,.12));
  --fpt-btn-shadow-h: var(--fpm-btn-shadow-h, inset 0 1px 0 rgba(255,255,255,.16), 0 8px 16px -10px rgba(0,0,0,.8));
  --fpt-head-shadow:  var(--fpm-head-shadow, none);
  --fpt-nav-active-bg: linear-gradient(180deg, color-mix(in srgb, var(--fpt-primary) 22%, transparent), color-mix(in srgb, var(--fpt-primary) 11%, transparent));
  --fpt-nav-active-edge: inset 0 1px 0 rgba(255,255,255,.12);
  --fpt-sidebar-edge: inset -1px 0 0 rgba(255,255,255,.05);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"][data-preset="moderne"],
  [data-theme="auto"] [data-preset="moderne"] {
    --fpt-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px -18px rgba(0,0,0,.9);
    --fpt-shadow-lg: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -20px rgba(0,0,0,.95);
    --fpt-card-hover-shadow: var(--fpm-card-hover-shadow, inset 0 1px 0 rgba(255,255,255,.08), 0 18px 36px -18px rgba(0,0,0,.95));
    --fpt-field-shadow: var(--fpm-field-shadow, inset 0 1px 3px rgba(0,0,0,.4));
    --fpt-well-shadow:  var(--fpm-well-shadow, inset 0 1px 3px rgba(0,0,0,.45));
    --fpt-btn-shadow:   var(--fpm-btn-shadow, inset 0 1px 0 rgba(255,255,255,.12));
    --fpt-btn-shadow-h: var(--fpm-btn-shadow-h, inset 0 1px 0 rgba(255,255,255,.16), 0 8px 16px -10px rgba(0,0,0,.8));
    --fpt-head-shadow:  var(--fpm-head-shadow, none);
    --fpt-nav-active-bg: linear-gradient(180deg, color-mix(in srgb, var(--fpt-primary) 22%, transparent), color-mix(in srgb, var(--fpt-primary) 11%, transparent));
    --fpt-nav-active-edge: inset 0 1px 0 rgba(255,255,255,.12);
    --fpt-sidebar-edge: inset -1px 0 0 rgba(255,255,255,.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --fpt-speed: 0s; }
}