/* =============================================================
   DELATRUST — Portail client · Design tokens
   Toutes les valeurs sont exportées en variables CSS.
   Nommage simple (--blue, --ink, --r) comme demandé au brief.
   Couleurs ajustées pour respecter WCAG 2.1 AA sur fond blanc.
   ============================================================= */

:root {
  /* ---- Couleurs de marque ---- */
  --navy:        #0b2545;   /* barre du haut, pied, titres forts */
  --navy-2:      #0e2a52;   /* barre de navigation */
  --navy-3:      #15366a;   /* survol nav, surfaces marine claires */

  /* Bleu d'accent — décliné pour le contraste.
     #1f6dff reste la couleur signature ; les usages texte/bouton
     utilisent une nuance légèrement plus profonde pour passer AA. */
  --blue:        #1f6dff;   /* accent vif : focus, pastille, soulignés actifs */
  --blue-600:    #1860f2;   /* bouton primaire (texte blanc = AA ✓) */
  --blue-700:    #1657d6;   /* survol bouton + couleur des liens texte */
  --blue-800:    #1247b0;   /* pressé */
  --blue-050:    #eaf1ff;   /* fond teinté, état actif léger */
  --blue-100:    #d6e3ff;   /* bordure teintée */

  /* ---- Neutres ---- */
  --bg:          #f4f6fb;   /* fond d'application */
  --card:        #ffffff;   /* cartes et panneaux */
  --ink:         #1a2433;   /* texte principal */
  --ink-2:       #38424f;   /* texte secondaire fort */
  --muted:       #616b7a;   /* texte secondaire (AA ✓ sur blanc) */
  --faint:       #8a93a3;   /* texte d'aide, méta discrète */
  --border:      #e4e9f2;   /* bordures et séparateurs */
  --border-2:    #d3dae8;   /* bordures plus marquées (inputs) */
  --hover:       #f7f9fd;   /* survol de ligne, surfaces légères */

  /* ---- États sémantiques ---- */
  --success:     #138a52;   /* statut fait / confirmation */
  --success-700: #0f7144;   /* texte succès (AA ✓) */
  --success-bg:  #e6f4ed;
  --success-bd:  #b9e0cb;

  --error:       #d23b3b;   /* icônes / bordures d'erreur */
  --error-700:   #b62f2f;   /* texte d'erreur (AA ✓) */
  --error-bg:    #fbeaea;
  --error-bd:    #f1c4c4;

  --warn:        #b7791f;   /* à venir / attention */
  --warn-700:    #9a6414;   /* texte (AA ✓) */
  --warn-bg:     #fbf3e2;
  --warn-bd:     #ecd6a8;

  --info-bg:     #eaf1ff;   /* flash info */
  --info-bd:     #c9dbff;

  /* ---- Typographie ---- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo,
          Consolas, monospace;

  /* Échelle de tailles (rem, base 16px) */
  --t-display: 2rem;       /* 32 — grand titre de page */
  --t-h1:      1.625rem;   /* 26 — titre de page */
  --t-h2:      1.25rem;    /* 20 — titre de section / carte */
  --t-h3:      1rem;       /* 16 — sous-titre */
  --t-body:    0.9375rem;  /* 15 — corps */
  --t-sm:      0.8125rem;  /* 13 — méta, libellés */
  --t-xs:      0.75rem;    /* 12 — pastilles, redlines */

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-body:   1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ---- Espacement (échelle 4px) ---- */
  --s1:  0.25rem;   /* 4  */
  --s2:  0.5rem;    /* 8  */
  --s3:  0.75rem;   /* 12 */
  --s4:  1rem;      /* 16 */
  --s5:  1.25rem;   /* 20 */
  --s6:  1.5rem;    /* 24 */
  --s8:  2rem;      /* 32 */
  --s10: 2.5rem;    /* 40 */
  --s12: 3rem;      /* 48 */
  --s16: 4rem;      /* 64 */

  /* ---- Rayons ---- */
  --r:     14px;    /* cartes */
  --r-sm:  10px;    /* boutons, champs, petits éléments */
  --r-xs:  8px;     /* pastilles carrées, pièces jointes */
  --r-pill: 999px;  /* étiquettes pilule */

  /* ---- Ombres (légères, teintées marine) ---- */
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow:    0 4px 16px rgba(11, 37, 69, 0.08);
  --shadow-md: 0 10px 30px rgba(11, 37, 69, 0.14);

  /* ---- Disposition ---- */
  --content: 1040px;   /* largeur de contenu centrée */
  --tap: 44px;         /* cible tactile minimale */

  /* ---- Focus clavier ---- */
  --focus: 0 0 0 3px rgba(31, 109, 255, 0.35);
  --ring-w: 2px;
}
/* =============================================================
   DELATRUST — Portail client · Composants
   Dépend de tokens.css. Tout est server-rendered friendly :
   pas de dépendance JS pour l'apparence, focus clavier visible,
   cibles tactiles ≥ 44px, responsive desktop 1440 / mobile 390.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
b, strong { font-weight: var(--fw-semibold); }

/* ---- Focus clavier visible (global) ---- */
:focus-visible {
  outline: var(--ring-w) solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Pas d'anneau au clic souris, uniquement clavier */
:focus:not(:focus-visible) { outline: none; }

/* ---- Lien d'évitement (accessibilité) ---- */
.skip-link {
  position: absolute; left: 12px; top: -48px;
  background: var(--card); color: var(--ink);
  padding: 10px 16px; border-radius: var(--r-sm);
  box-shadow: var(--shadow); z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---- Icônes ---- */
.ico {
  width: 20px; height: 20px;
  flex: none; color: currentColor;
  vertical-align: middle;
}
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 24px; height: 24px; }
.ico-xl { width: 28px; height: 28px; }

/* =============================================================
   DISPOSITION
   ============================================================= */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.shell { flex: 1; width: 100%; }
.container {
  width: 100%; max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--s6);
}
.main { padding-block: var(--s8) var(--s12); }

.stack   { display: flex; flex-direction: column; gap: var(--s4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--s6); }
.stack-2 { display: flex; flex-direction: column; gap: var(--s2); }
.row     { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }

/* En-tête de page */
.page-head { margin-bottom: var(--s6); }
.page-title {
  font-size: var(--t-h1); line-height: var(--lh-tight);
  font-weight: var(--fw-bold); letter-spacing: -0.01em;
  color: var(--navy);
}
.page-display {
  font-size: var(--t-display); line-height: var(--lh-tight);
  font-weight: var(--fw-bold); letter-spacing: -0.02em;
  color: var(--navy);
}
.page-sub { color: var(--muted); font-size: var(--t-body); margin-top: var(--s2); }
.eyebrow {
  font-size: var(--t-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-700);
}

/* =============================================================
   BARRE DU HAUT
   ============================================================= */
.topbar {
  background: var(--navy);
  color: #fff;
}
.topbar__inner {
  max-width: var(--content); margin-inline: auto;
  padding: 0 var(--s6);
  height: 64px;
  display: flex; align-items: center; gap: var(--s4);
}
.brand { display: flex; align-items: center; gap: var(--s3); color: #fff; }
.brand:hover { text-decoration: none; }
.brand__mark {
  /* Emplacement logo — le logo réel est fourni par le client */
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue) 0%, #4a8bff 100%);
  display: grid; place-items: center;
  font-weight: var(--fw-bold); color: #fff; font-size: 15px;
  letter-spacing: -0.02em;
}
.brand__name { font-weight: var(--fw-bold); font-size: 17px; letter-spacing: -0.01em; }
.brand__portal {
  font-size: var(--t-sm); color: rgba(255,255,255,.62);
  padding-left: var(--s3); margin-left: var(--s1);
  border-left: 1px solid rgba(255,255,255,.18);
}
.topbar__spacer { flex: 1; }
.topbar__user { display: flex; align-items: center; gap: var(--s3); }
.topbar__name {
  font-size: var(--t-sm); font-weight: var(--fw-medium);
  color: rgba(255,255,255,.92);
}
.topbar__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.82); font-size: var(--t-sm);
  padding: 8px 10px; border-radius: var(--r-sm);
  min-height: var(--tap);
}
.topbar__link:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }

.admin-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--blue-600);
  padding: 4px 9px; border-radius: var(--r-pill);
}

/* Bouton menu mobile (caché en desktop) */
.nav-toggle { display: none; }

/* =============================================================
   NAVIGATION PRINCIPALE
   ============================================================= */
.nav {
  background: var(--navy-2);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.nav__inner {
  max-width: var(--content); margin-inline: auto;
  padding: 0 var(--s6);
  display: flex; gap: var(--s1);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__inner::-webkit-scrollbar { display: none; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 var(--s4); height: 50px;
  color: rgba(255,255,255,.74);
  font-size: var(--t-sm); font-weight: var(--fw-medium);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.05); text-decoration: none; }
.nav__link[aria-current="page"] {
  color: #fff; font-weight: var(--fw-semibold);
  border-bottom-color: var(--blue);
}
.nav__link .ico { width: 18px; height: 18px; opacity: .9; }
.nav__count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: var(--fw-bold);
  color: #fff; background: var(--blue-600);
  border-radius: var(--r-pill);
}

/* =============================================================
   BANDEAU SÉLECTEUR DE SOCIÉTÉ — élément signature
   ============================================================= */
.company-bar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.company-bar__inner {
  max-width: var(--content); margin-inline: auto;
  padding: var(--s4) var(--s6);
  display: flex; align-items: center; gap: var(--s4);
}
.company-bar__label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
}
.company-bar__label .ico { width: 16px; height: 16px; color: var(--blue-700); }

/* Avatar société */
.company-avatar {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-700);
  font-weight: var(--fw-bold); font-size: 15px;
  border: 1px solid var(--blue-100);
}
.company-avatar .ico { width: 22px; height: 22px; }

/* Le contrôle (société unique = statique ; plusieurs = bouton menu) */
.company-select {
  display: inline-flex; align-items: center; gap: var(--s3);
  background: var(--card); border: 1.5px solid var(--border-2);
  border-radius: 12px; padding: 8px 14px; min-height: var(--tap);
  cursor: pointer; color: var(--ink); font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
button.company-select { font-size: var(--t-body); }
.company-select:hover { border-color: var(--blue); }
.company-select--static { cursor: default; }
.company-select--static:hover { border-color: var(--border-2); }
.company-select__text { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.company-select__name { font-weight: var(--fw-semibold); color: var(--ink); }
.company-select__meta { font-size: var(--t-xs); color: var(--muted); }
.company-select__chev { color: var(--muted); margin-left: var(--s2); }

/* État « aucune société » */
.company-empty {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--warn-700); background: var(--warn-bg);
  border: 1px solid var(--warn-bd); border-radius: 12px;
  padding: 10px 14px; font-size: var(--t-sm);
}
.company-empty .ico { color: var(--warn); }

/* Menu déroulant (plusieurs sociétés) — affiché via [data-open] */
.company-menu { position: relative; }
.company-menu__list {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 320px; max-width: 92vw;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-md);
  padding: var(--s2); display: none;
}
.company-menu[data-open] .company-menu__list { display: block; }
.company-menu[data-open] .company-select__chev { transform: rotate(180deg); }
.company-option {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: 10px 12px; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--t-body); color: var(--ink);
}
.company-option:hover { background: var(--hover); }
.company-option[aria-selected="true"] { background: var(--blue-050); }
.company-option[aria-selected="true"] .company-option__check { opacity: 1; }
.company-option__text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.company-option__name { font-weight: var(--fw-medium); }
.company-option__meta { font-size: var(--t-xs); color: var(--muted); }
.company-option__check { color: var(--blue-700); opacity: 0; }

/* =============================================================
   CARTES
   ============================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.card__pad { padding: var(--s6); }
.card__head {
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.card__title { font-size: var(--t-h2); font-weight: var(--fw-semibold); color: var(--navy); letter-spacing: -0.01em; }
.card__body { padding: var(--s6); }
.card__foot {
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--s3); justify-content: flex-end;
}

/* Carte cliquable (tuile tableau de bord) */
.tile {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  padding: var(--s6); color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.tile:hover {
  text-decoration: none; border-color: var(--blue-100);
  box-shadow: var(--shadow); transform: translateY(-2px);
}
.tile__top { display: flex; align-items: flex-start; justify-content: space-between; }
.tile__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-700);
  border: 1px solid var(--blue-100);
}
.tile__icon .ico { width: 24px; height: 24px; }
.tile__title { font-size: var(--t-h3); font-weight: var(--fw-semibold); color: var(--navy); }
.tile__desc { font-size: var(--t-sm); color: var(--muted); }
.tile__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--blue-700);
}
.tile:hover .tile__cta .ico { transform: translateX(2px); }
.tile__cta .ico { transition: transform .14s ease; }

.tiles {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(3, 1fr);
}
.tiles--2 { grid-template-columns: repeat(2, 1fr); }

/* Pastille compteur sur tuile */
.tile__badge {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 9px;
  background: var(--blue-600); color: #fff;
  font-weight: var(--fw-bold); font-size: var(--t-sm);
  border-radius: var(--r-pill);
}

/* Carte compteur (stat) admin */
.stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  padding: var(--s6); display: flex; align-items: center; gap: var(--s4);
}
.stat__icon {
  width: 52px; height: 52px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-700); border: 1px solid var(--blue-100);
}
.stat__icon .ico { width: 26px; height: 26px; }
.stat__num { font-size: 1.75rem; font-weight: var(--fw-bold); color: var(--navy); line-height: 1; }
.stat__label { font-size: var(--t-sm); color: var(--muted); margin-top: 4px; }

/* =============================================================
   BOUTONS
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: var(--t-body); font-weight: var(--fw-semibold);
  line-height: 1; min-height: var(--tap);
  padding: 0 var(--s5); border-radius: var(--r-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn .ico { width: 18px; height: 18px; }

.btn--primary { background: var(--blue-600); color: #fff; }
.btn--primary:hover { background: var(--blue-700); }
.btn--primary:active { background: var(--blue-800); }

.btn--ghost { background: var(--card); color: var(--blue-700); border-color: var(--border-2); }
.btn--ghost:hover { background: var(--blue-050); border-color: var(--blue); }
.btn--ghost:active { background: var(--blue-100); }

.btn--danger { background: var(--error); color: #fff; }
.btn--danger:hover { background: var(--error-700); }

.btn--quiet { background: transparent; color: var(--muted); }
.btn--quiet:hover { background: var(--hover); color: var(--ink); }

.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: 0 var(--s4); font-size: var(--t-sm); border-radius: var(--r-xs); }
.btn--lg { min-height: 50px; padding: 0 var(--s6); font-size: 1rem; }

.btn:disabled, .btn[aria-disabled="true"] {
  background: #e8ebf2; color: #aab1bf; border-color: transparent;
  cursor: not-allowed; pointer-events: none;
}

/* Bouton icône seule (actions tableau) */
.icon-btn {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn--danger:hover { background: var(--error-bg); color: var(--error-700); }

/* =============================================================
   CHAMPS DE FORMULAIRE
   ============================================================= */
.field { display: flex; flex-direction: column; gap: 6px; }
.label {
  font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--ink-2);
}
.label__req { color: var(--error-700); margin-left: 2px; }
.hint { font-size: var(--t-xs); color: var(--muted); }

.input, .select, .textarea {
  width: 100%; font-family: inherit; font-size: var(--t-body); color: var(--ink);
  background: var(--card); border: 1.5px solid var(--border-2);
  border-radius: var(--r-sm); padding: 11px 14px; min-height: var(--tap);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.textarea { min-height: 130px; resize: vertical; line-height: var(--lh-body); padding-top: 12px; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--blue-100); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: var(--focus);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: #f1f3f8; color: var(--faint); cursor: not-allowed;
}

/* Select avec chevron */
.select-wrap { position: relative; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
}
.select-wrap__chev {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; width: 18px; height: 18px;
}

/* Champ avec icône à gauche */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .ico { position: absolute; left: 14px; color: var(--faint); pointer-events: none; }
.input-group .input { padding-left: 42px; }

/* État erreur */
.field--error .input,
.field--error .select,
.field--error .textarea { border-color: var(--error); background: #fffafa; }
.field--error .input:focus { box-shadow: 0 0 0 3px rgba(210,59,59,.22); }
.field__error {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); color: var(--error-700); font-weight: var(--fw-medium);
}
.field__error .ico { width: 15px; height: 15px; color: var(--error); }

/* Case à cocher */
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; min-height: var(--tap); }
.check input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: 1px; flex: none;
  border: 1.5px solid var(--border-2); border-radius: 6px; background: var(--card);
  display: grid; place-items: center; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.check input:hover { border-color: var(--blue); }
.check input:checked { background: var(--blue-600); border-color: var(--blue-600); }
.check input:checked::after {
  content: ""; width: 11px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.check input:focus-visible { outline: var(--ring-w) solid var(--blue); outline-offset: 2px; }
.check__label { font-size: var(--t-body); color: var(--ink); line-height: 1.35; }

/* Sélecteur de fichier */
.filefield { display: flex; flex-direction: column; gap: 8px; }
.dropzone {
  display: flex; align-items: center; gap: var(--s4);
  border: 1.5px dashed var(--border-2); border-radius: var(--r-sm);
  background: var(--hover); padding: var(--s5); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.dropzone:hover { border-color: var(--blue); background: var(--blue-050); }
.dropzone__icon {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: var(--blue-050);
  color: var(--blue-700); border: 1px solid var(--blue-100);
}
.dropzone__main { line-height: 1.4; display: flex; flex-direction: column; }
.dropzone__title { font-weight: var(--fw-semibold); color: var(--ink); }
.dropzone__sub { font-size: var(--t-xs); color: var(--muted); }

/* Formulaire en grille */
.form-grid { display: grid; gap: var(--s5); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }

/* =============================================================
   TABLEAU
   ============================================================= */
.table-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.table th, .table td {
  padding: 14px var(--s5); text-align: left; vertical-align: middle;
}
.table thead th {
  font-size: var(--t-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
  background: var(--hover); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--border); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover { background: var(--hover); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-strong { font-weight: var(--fw-semibold); color: var(--ink); }
.table .cell-muted { color: var(--muted); }
.table .cell-actions { white-space: nowrap; text-align: right; }
.table--late tr.is-late td { background: var(--error-bg); }
.table--late tr.is-late:hover td { background: #f9e0e0; }

/* =============================================================
   LIGNE DE MESSAGE
   ============================================================= */
.msg-list {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden;
}
.msg-row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.msg-row:last-child { border-bottom: 0; }
.msg-row:hover { background: var(--hover); text-decoration: none; }
.msg-row__dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: none; }
.msg-row__main { flex: 1; min-width: 0; }
.msg-row__subject {
  font-size: var(--t-body); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-row__meta { font-size: var(--t-sm); color: var(--muted); margin-top: 2px; display: flex; gap: 10px; align-items: center; }
.msg-row__date { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; flex: none; }
/* État non lu */
.msg-row--unread { background: #fbfcff; }
.msg-row--unread .msg-row__dot { background: var(--blue); }
.msg-row--unread .msg-row__subject { font-weight: var(--fw-bold); color: var(--navy); }

/* Pastille nombre de fichiers */
.file-count {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); font-weight: var(--fw-medium); color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.file-count .ico { width: 13px; height: 13px; }

/* =============================================================
   PIÈCE JOINTE
   ============================================================= */
.attach {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 9px 13px; color: var(--ink);
  min-height: var(--tap); transition: border-color .12s, background .12s;
}
.attach:hover { border-color: var(--blue); background: var(--blue-050); text-decoration: none; }
.attach__icon {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  display: grid; place-items: center; background: var(--blue-050); color: var(--blue-700);
}
.attach__main { display: flex; flex-direction: column; line-height: 1.3; }
.attach__name { font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--ink); }
.attach__size { font-size: var(--t-xs); color: var(--muted); }
.attach__dl { color: var(--muted); margin-left: 4px; }
.attach:hover .attach__dl { color: var(--blue-700); }
.attach-list { display: flex; flex-direction: column; gap: var(--s2); }

/* =============================================================
   MESSAGES FLASH
   ============================================================= */
.flash {
  display: flex; align-items: flex-start; gap: 12px;
  padding: var(--s4) var(--s5); border-radius: var(--r-sm);
  border: 1px solid; font-size: var(--t-body); line-height: 1.45;
}
.flash .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.flash__title { font-weight: var(--fw-semibold); }
.flash--success { background: var(--success-bg); border-color: var(--success-bd); color: var(--success-700); }
.flash--error   { background: var(--error-bg);   border-color: var(--error-bd);   color: var(--error-700); }
.flash--info    { background: var(--info-bg);     border-color: var(--info-bd);    color: var(--blue-800); }
.flash--success .ico { color: var(--success); }
.flash--error .ico   { color: var(--error); }
.flash--info .ico    { color: var(--blue-600); }
.flash__close { margin-left: auto; color: inherit; opacity: .6; background: none; border: 0; cursor: pointer; padding: 2px; }
.flash__close:hover { opacity: 1; }

/* =============================================================
   ÉTIQUETTES & PASTILLES
   ============================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: var(--fw-semibold);
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap; line-height: 1.4;
}
.badge .ico { width: 13px; height: 13px; }
.badge--neutral { background: var(--bg); color: var(--ink-2); border-color: var(--border); }
.badge--blue    { background: var(--blue-050); color: var(--blue-800); border-color: var(--blue-100); }
.badge--success { background: var(--success-bg); color: var(--success-700); border-color: var(--success-bd); }
.badge--warn    { background: var(--warn-bg); color: var(--warn-700); border-color: var(--warn-bd); }
.badge--error   { background: var(--error-bg); color: var(--error-700); border-color: var(--error-bd); }

/* Catégorie d'échéance (pastille carrée discrète) */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: var(--fw-medium); color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: var(--r-xs);
}
.tag__dot { width: 7px; height: 7px; border-radius: 2px; background: var(--blue); }

/* =============================================================
   ÉTAT VIDE
   ============================================================= */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--s12) var(--s6); color: var(--muted); gap: var(--s4);
}
.empty__icon {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-700); border: 1px solid var(--blue-100);
}
.empty__icon .ico { width: 30px; height: 30px; }
.empty__title { font-size: var(--t-h2); font-weight: var(--fw-semibold); color: var(--navy); }
.empty__text { max-width: 380px; }

/* =============================================================
   CHARGEMENT (skeleton)
   ============================================================= */
.skeleton {
  background: linear-gradient(90deg, #eef1f7 25%, #f6f8fc 37%, #eef1f7 63%);
  background-size: 400% 100%; border-radius: 8px;
  animation: shimmer 1.4s ease infinite;
}
.skeleton--line { height: 14px; }
.skeleton--title { height: 22px; width: 40%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* =============================================================
   MÉTA (lecture de message, profil)
   ============================================================= */
.meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s8); }
.meta-item { display: flex; flex-direction: column; gap: 3px; }
.meta-item__label {
  font-size: var(--t-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.meta-item__value { font-size: var(--t-body); color: var(--ink); font-weight: var(--fw-medium); }

.prose { color: var(--ink-2); line-height: var(--lh-body); }
.prose p + p { margin-top: var(--s4); }

/* =============================================================
   FAQ (accordéon — <details>/<summary>, sans JS)
   ============================================================= */
.faq { display: flex; flex-direction: column; gap: var(--s3); }
.faq-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s6); font-weight: var(--fw-semibold); color: var(--navy);
  min-height: var(--tap);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary .ico { color: var(--blue-700); transition: transform .15s ease; }
.faq-item[open] > summary .ico { transform: rotate(180deg); }
.faq-item > summary:hover { background: var(--hover); }
.faq-item__body { padding: 0 var(--s6) var(--s5); color: var(--ink-2); line-height: var(--lh-body); }

/* =============================================================
   CARTE D'AUTHENTIFICATION
   ============================================================= */
.auth {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--s6);
  background:
    radial-gradient(1200px 500px at 50% -10%, #102f5c 0%, transparent 60%),
    var(--navy);
}
.auth__card {
  width: 100%; max-width: 420px;
  background: var(--card); border-radius: 18px;
  box-shadow: var(--shadow-md); padding: var(--s10) var(--s8) var(--s8);
}
.auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--s4); margin-bottom: var(--s8); }
.auth__title { font-size: var(--t-h2); font-weight: var(--fw-bold); color: var(--navy); }
.auth__sub { font-size: var(--t-sm); color: var(--muted); text-align: center; }
.auth__foot { margin-top: var(--s6); text-align: center; font-size: var(--t-sm); color: var(--muted); }
.auth__secure {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s5); font-size: var(--t-xs); color: rgba(255,255,255,.7);
}
.auth__secure .ico { width: 15px; height: 15px; }

/* =============================================================
   PIED DE PAGE
   ============================================================= */
.footer { background: var(--navy); color: rgba(255,255,255,.7); margin-top: auto; }
.footer__inner {
  max-width: var(--content); margin-inline: auto; padding: var(--s6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap; font-size: var(--t-sm);
}
.footer a { color: rgba(255,255,255,.82); }
.footer a:hover { color: #fff; }
.footer__links { display: flex; gap: var(--s5); flex-wrap: wrap; }

/* =============================================================
   UTILITAIRES
   ============================================================= */
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.center { text-align: center; }
.mt-2 { margin-top: var(--s2); } .mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); } .mt-8 { margin-top: var(--s8); }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--s5) 0; }
.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;
}

/* =============================================================
   RESPONSIVE — mobile 390
   ============================================================= */
@media (max-width: 760px) {
  .container, .topbar__inner, .nav__inner, .company-bar__inner, .footer__inner { padding-inline: var(--s4); }
  .main { padding-block: var(--s6) var(--s10); }

  .tiles, .tiles--2 { grid-template-columns: 1fr; }
  .form-grid--2 { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr; gap: var(--s4); }

  .page-display { font-size: 1.6rem; }
  .page-title { font-size: 1.4rem; }

  /* Barre du haut : on masque le nom, on garde l'essentiel */
  .topbar__inner { height: 58px; gap: var(--s2); }
  .brand__portal { display: none; }
  .topbar__name { display: none; }

  /* Navigation repliable */
  .nav-toggle {
    display: inline-grid; place-items: center;
    width: var(--tap); height: var(--tap); margin-left: auto;
    background: rgba(255,255,255,.10); border: 0; border-radius: var(--r-sm);
    color: #fff; cursor: pointer;
  }
  .nav { display: none; }
  .nav[data-open] { display: block; }
  .nav__inner { flex-direction: column; gap: 0; overflow: visible; padding-block: var(--s2); }
  .nav__link { height: var(--tap); border-bottom: 0; border-left: 3px solid transparent; width: 100%; }
  .nav__link[aria-current="page"] { border-left-color: var(--blue); background: rgba(255,255,255,.06); }

  /* Sélecteur société : pleine largeur */
  .company-bar__inner { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .company-select, .company-menu, .company-empty { width: 100%; }
  .company-select { justify-content: space-between; }
  .company-menu__list { min-width: 0; width: 100%; }

  .card__head, .card__body, .card__pad { padding: var(--s5); }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   AJOUTS AR DIGITAL — logo client, cases à cocher, dropzone remplie
   ============================================================= */
.brand__logo { display:block; height:30px; width:auto; background:#fff; padding:6px 11px; border-radius:9px; }
.auth__logo { display:block; height:42px; width:auto; }

.check { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--card); cursor:pointer; font-size:var(--t-sm); line-height:1.3; }
.check:hover { border-color:var(--blue-100); }
.check input[type="checkbox"] { width:17px; height:17px; accent-color:var(--blue); flex:none; margin:0; }
.check__label { display:block; }
.check--all { background:var(--blue-050); border-color:var(--blue-100); margin-bottom:var(--s3); }
.check-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s2); }

.dropzone--filled { border-color:var(--blue); border-style:solid; background:var(--blue-050); }
.dropzone--filled .dropzone__title { color:var(--blue); }

@media (max-width:720px) {
  .brand__logo { height:26px; padding:5px 9px; }
  .check-grid { grid-template-columns:1fr; }
}