/* ===================================================
   Design system Tressol-Chabrier — SOUS-ENSEMBLE /setup
   ===================================================

   ⚠️ Ceci n'est PAS la charte complète du groupe : c'est l'extrait
   strictement nécessaire à la page d'activation de borne (/setup),
   seule page du projet à consommer ce fichier.

   Charte complète (référence, à ne pas modifier depuis ce projet) :
   Bureau/designsystem_app_tressol/css/design-system.css

   Généré le 27/07/2026 par introspection CSSOM du DOM réel de /setup :
   sur 436 règles de la charte, 45 s'appliquent à cette page. Les 391
   autres stylent des composants absents (sidebar, topbar, tables,
   modales, toasts, onglets…) — 67,5 Ko chargés pour ~11 Ko utiles.

   ➕ Ajouter un composant de la charte sur /setup : recopier son bloc
      depuis la charte complète ci-dessus, ne pas réintégrer tout le
      fichier. Les tokens (:root) sont conservés en intégralité, donc
      toute variable de la charte (--c-…, --space-…, --fs-…) reste
      disponible. NB : ne jamais écrire de glob « -x-<étoile>/ » dans ce
      commentaire, la séquence fermerait le bloc et ferait sauter la
      déclaration de police suivante (bug rencontré à la génération).

   ⛔ Écarté volontairement : le bloc [data-theme="dark"] (thème sombre).
      Il s'active par un attribut posé en JS, que /setup ne pose jamais —
      aucun impact sur le rendu. Le récupérer depuis la charte complète
      si un thème sombre est un jour introduit sur cette page.
   =================================================== */

/* ==========================================================================
   Design System — Back-Office Tressol-Chabrier
   Refonte UI/UX 2026
   --------------------------------------------------------------------------
   - Polices auto-hébergées (RGPD) : Space Grotesk (titres) + Inter (corps)
   - Couleurs : navy logo #222A51, fond chaud #F5F5F3,
                orange #FE8D00 = ACTION, bleu #0260E7 = INFO / liens
   - Un seul rôle par couleur pour une hiérarchie d'action sans ambiguïté.
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Polices auto-hébergées                                           */
/* ------------------------------------------------------------------ */

/* Plages Unicode :
   latin     -> U+0000-00FF (couvre la quasi-totalité du français)
   latin-ext -> caractères étendus (œ, Ÿ, accents rares) */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/inter-ext-500.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/inter-ext-600.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/inter-ext-700.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/space-grotesk-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/space-grotesk-ext-500.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/space-grotesk-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/space-grotesk-ext-600.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/space-grotesk-ext-700.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ------------------------------------------------------------------ */
/* 2. Tokens de design (variables)                                     */
/* ------------------------------------------------------------------ */
:root {
  /* --- Couleurs de marque --- */
  --c-navy:         #222A51;   /* navy du logo — couleur structurante */
  --c-navy-light:   #344153;   /* navy clair — surfaces secondaires */
  --c-navy-700:     #2c365f;
  --c-bg:           #F5F5F3;   /* fond chaud (repos visuel) */
  --c-white:        #FFFFFF;
  --c-card:         #FFFFFF;

  /* Action (orange) — un seul rôle : agir */
  --c-accent:       #FE8D00;
  --c-accent-hover: #E07D00;
  --c-accent-soft:  #FFF1DE;   /* fond teinté pour états/sélection */

  /* Information / liens (bleu) — jamais une action principale */
  --c-blue:         #0260E7;
  --c-blue-hover:   #0150C0;
  --c-blue-soft:    #E5EFFD;

  /* Texte */
  --c-text:         #1A1A2E;
  --c-text-soft:    #3a3a4d;
  --c-muted:        #6B7280;
  --c-on-navy:      #EEF1F8;   /* texte sur fond navy */
  --c-on-navy-soft: rgba(238,241,248,0.66);
  --c-heading:      #222A51;   /* couleur des titres (bascule en clair en dark) */
  --c-chip:         #ECECE8;   /* fond badge neutre */
  --c-sidebar-from: #222A51;   /* dégradé de la barre latérale */
  --c-sidebar-to:   #344153;

  /* Bordures & surfaces */
  --c-border:       #E2E2DE;
  --c-border-strong:#D2D2CC;

  /* États sémantiques */
  --c-success:      #16A34A;  --c-success-soft: #E6F4EA;
  --c-warning:      #D97706;  --c-warning-soft: #FCEFD9;
  --c-danger:       #DC2626;  --c-danger-soft:  #FBE7E7;

  /* --- Typographie --- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Échelle typographique (ratio ~1.2 — Minor Third) */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.8125rem; /* 13px */
  --fs-base: 0.9375rem; /* 15px — corps confortable en back-office */
  --fs-md:   1rem;      /* 16px */
  --fs-lg:   1.1875rem; /* 19px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  1.875rem;  /* 30px */
  --fs-3xl:  2.375rem;  /* 38px */

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;

  /* --- Espacements (base 4px) --- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;

  /* --- Rayons --- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-full: 999px;

  /* --- Ombres (teintées navy pour la cohérence de marque) --- */
  --shadow-xs: 0 1px 2px rgba(34,42,81,0.06);
  --shadow-sm: 0 2px 6px rgba(34,42,81,0.07);
  --shadow-md: 0 8px 24px rgba(34,42,81,0.09);
  --shadow-lg: 0 18px 45px rgba(34,42,81,0.12);
  --shadow-xl: 0 30px 60px rgba(34,42,81,0.16);
  --shadow-accent: 0 10px 24px rgba(254,141,0,0.28);

  /* --- Transitions --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s var(--ease);
  --t-base: 0.25s var(--ease);

  /* --- Couches --- */
  --z-nav: 100; --z-dropdown: 200; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200;
}

/* Transition douce lors de la bascule de thème */
body, .card, .input, .select, .textarea, .table-wrap, .badge, .alert {
  transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base);
}

/* ------------------------------------------------------------------ */
/* 3. Reset & base                                                     */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background-color: var(--c-bg);
  /* Atmosphère : halos diffus très légers, navy + orange */
  background-image:
    radial-gradient(900px circle at 12% -5%, rgba(34,42,81,0.05), transparent 45%),
    radial-gradient(700px circle at 100% 0%, rgba(254,141,0,0.06), transparent 40%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--c-heading);
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-3xl); font-weight: 700; }

p { line-height: var(--lh-normal); }

img, svg { display: block; max-width: 100%; }

/* ------------------------------------------------------------------ */
/* 5. Boutons                                                          */
/* ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--c-navy);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base);
}

.btn:hover { transform: translateY(-1px); }

.btn:active { transform: translateY(0); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* PRIMAIRE = action = orange (le seul vrai bouton "agir") */
.btn--primary { --btn-bg: var(--c-accent); --btn-fg: #fff; box-shadow: var(--shadow-accent); }

.btn--primary:hover { --btn-bg: var(--c-accent-hover); box-shadow: 0 14px 30px rgba(254,141,0,0.34); }

/* Tailles */
.btn--sm { padding: 0.45rem 0.9rem; font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ */
/* 6. Cartes                                                           */
/* ------------------------------------------------------------------ */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------------ */
/* 8. Formulaires                                                      */
/* ------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-navy); }

.input, .select, .textarea {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-text);
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--c-card);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(254,141,0,0.16);
}

/* ------------------------------------------------------------------ */
/* 10. Alertes                                                         */
/* ------------------------------------------------------------------ */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  font-size: var(--fs-sm);
}

.alert--warning { background: var(--c-warning-soft); border-color: var(--c-warning); color: #7c2d12; }

/* ------------------------------------------------------------------ */
/* 11. Animations d'apparition (chargement de page)                    */
/* ------------------------------------------------------------------ */
/* Animation d'apparition — IMPORTANT :
   on n'écrit PAS `transform: translateY(0)` dans la frame `to`. Sans transform résiduel,
   l'élément ne crée pas de stacking context ni de containing block après l'animation
   — ce qui évite que `position: fixed` (modal) et les z-index élevés (tooltip) soient
   bridés à l'intérieur de la section. */
@keyframes ds-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; }
}

.ds-reveal { opacity: 0; animation: ds-rise 0.6s var(--ease) forwards; }

.ds-reveal[data-delay="1"] { animation-delay: 0.06s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    .ds-reveal { opacity: 1; }
}

/* Checkbox stylée */
.check { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--fs-sm); color: var(--c-text); user-select: none; }

.check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

.check__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--c-border-strong); background: var(--c-card); display: grid; place-items: center; flex-shrink: 0; transition: all var(--t-fast); margin-top: 1px; }

.check__box svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.6); transition: opacity var(--t-fast), transform var(--t-fast); }

.check input:checked ~ .check__box { background: var(--c-accent); border-color: var(--c-accent); }

.check input:checked ~ .check__box svg { opacity: 1; transform: scale(1); }

.check input:indeterminate ~ .check__box { background: var(--c-accent); border-color: var(--c-accent); }

.check input:indeterminate ~ .check__box::after { content: ''; width: 10px; height: 2px; background: #fff; border-radius: 1px; }

.check input:focus-visible ~ .check__box { box-shadow: 0 0 0 3px var(--c-accent-soft); }

.check input:disabled ~ .check__box { opacity: 0.5; cursor: not-allowed; }

.check__label { line-height: 1.4; }

/* Tooltip CSS-only — data-tooltip="…"
   `:where()` met la spécificité à 0 pour que tout `position: absolute/fixed/sticky`
   appliqué sur l'élément déclencheur l'emporte (sinon conflits sur boutons en .input-affix, etc.).
   Les pseudo-éléments fonctionnent quel que soit le type de positioning, à condition que l'élément
   crée un containing block — c'est le cas dès qu'il a un position non-static. */
:where([data-tooltip]:not([data-tooltip=""])) { position: relative; }

@media (forced-colors: active) {
    .btn, .input, .select, .card, .badge { border: 1px solid CanvasText; }
    .btn--primary { background: Highlight; color: HighlightText; }
}

@media (prefers-reduced-data: reduce) {
    body { background-image: none; }
}

@media print {
    body { background: #fff !important; background-image: none !important; color: #000; }
    .app-sidebar, .app-topbar, .drawer, .modal-scrim, .picker-scrim,
  .nav-collapse-btn, .nav-mobile-toggle, .toast-stack, .popover,
  .actions, .btn { display: none !important; }
    .card, .table-wrap { box-shadow: none !important; border-color: #000 !important; }
}