/* =========================================================================
   GestionEntreprise — Design System
   Palette bordeaux/prune / blanc / gris, light + dark theme.
   Version « professionnelle » (2026-09-24) : finitions façon SaaS moderne
   (Stripe/Linear) — typographie plus soignée, ombres discrètes en couches,
   transitions cohérentes, indicateurs d'état affinés — sans changer un seul
   nom de classe, pour rester compatible avec toutes les vues existantes.
   Même architecture de classes que l'application sœur GestionCabinet, pour
   garder une expérience et un code cohérents entre les deux produits.
   ========================================================================= */

:root {
  /* Couleurs de marque */
  --bleu-fonce: #6d2245;
  --bleu: #8a2f56;
  --bleu-vif: #b23b6d;
  --bleu-clair: #fbe4ec;
  --bleu-clair-2: #fdf2f6;

  /* Texte / fonds neutres */
  --texte: #1e293b;
  --texte-clair: #64748b;
  --texte-discret: #94a3b8;
  --fond: #f3f6f9;
  --carte: #ffffff;
  --bordure: #e2e8f0;
  --bordure-forte: #cbd5e1;
  --surface-alt: #f8fafc;

  /* Couleurs fonctionnelles */
  --vert: #15803d;
  --vert-clair: #dcfce7;
  --rouge: #b91c1c;
  --rouge-clair: #fee2e2;
  --ambre: #b45309;
  --ambre-clair: #fef3c7;
  --gris: #475569;

  /* Géométrie */
  --rayon: 12px;
  --rayon-petit: 8px;
  --rayon-plein: 999px;
  --ombre: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 6px rgba(15, 23, 42, .05);
  --ombre-legere: 0 1px 2px rgba(15, 23, 42, .05);
  --ombre-forte: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 8px rgba(15, 23, 42, .06);

  /* Transitions cohérentes pour toute l'interface */
  --transition-rapide: 130ms cubic-bezier(.4, 0, .2, 1);
  --transition: 200ms cubic-bezier(.4, 0, .2, 1);

  /* Layout */
  --sidebar-largeur: 252px;
  --sidebar-largeur-reduite: 72px;
  --entete-hauteur: 62px;

  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;

  color-scheme: light;
}

/* ---- Thème sombre : déclenché soit par préférence système (si l'utilisateur
   n'a rien choisi), soit explicitement via data-theme="dark" posé par le JS. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bleu-fonce: #e879a8;
    --bleu: #e879a8;
    --bleu-vif: #f0a8c8;
    --bleu-clair: #4a1830;
    --bleu-clair-2: #2e0f1e;
    --texte: #e2e8f0;
    --texte-clair: #94a3b8;
    --texte-discret: #64748b;
    --fond: #0b1220;
    --carte: #16202f;
    --bordure: #2a3646;
    --bordure-forte: #3c4a5e;
    --surface-alt: #1b2635;
    --vert: #4ade80;
    --vert-clair: #14361f;
    --rouge: #f87171;
    --rouge-clair: #3f1414;
    --ambre: #fbbf24;
    --ambre-clair: #3f2c06;
    --gris: #cbd5e1;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3);
    --ombre-legere: 0 1px 2px rgba(0, 0, 0, .3);
    --ombre-forte: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bleu-fonce: #e879a8;
  --bleu: #e879a8;
  --bleu-vif: #f0a8c8;
  --bleu-clair: #4a1830;
  --bleu-clair-2: #2e0f1e;
  --texte: #e2e8f0;
  --texte-clair: #94a3b8;
  --texte-discret: #64748b;
  --fond: #0b1220;
  --carte: #16202f;
  --bordure: #2a3646;
  --bordure-forte: #3c4a5e;
  --surface-alt: #1b2635;
  --vert: #4ade80;
  --vert-clair: #14361f;
  --rouge: #f87171;
  --rouge-clair: #3f1414;
  --ambre: #fbbf24;
  --ambre-clair: #3f2c06;
  --gris: #cbd5e1;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3);
  --ombre-legere: 0 1px 2px rgba(0, 0, 0, .3);
  --ombre-forte: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  background: var(--fond);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; }

a { color: var(--bleu); }
hr { border: none; border-top: 1px solid var(--bordure); margin: 8px 0; }

::selection { background: var(--bleu-clair); color: var(--bleu-fonce); }

/* Focus clavier toujours visible (accessibilité) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--bleu-vif);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Barre de défilement fine, cohérente avec le design (Chrome/Edge). */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bordure-forte); border-radius: var(--rayon-plein); border: 2px solid var(--fond); }
::-webkit-scrollbar-thumb:hover { background: var(--texte-discret); }

/* =========================================================================
   Page de connexion
   ========================================================================= */
body.page-connexion {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 560px at 100% 110%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(160deg, var(--bleu-fonce), var(--bleu) 60%, var(--bleu-vif));
  padding: 20px;
}
.conteneur-connexion {
  width: 100%;
  max-width: 420px;
  margin: auto 0;
}
.carte-connexion {
  position: relative;
  background: var(--carte);
  border-radius: 18px;
  padding: 34px 32px 30px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 64px rgba(0, 0, 0, .30);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: apparition-connexion .45s cubic-bezier(.16, 1, .3, 1);
}
@keyframes apparition-connexion {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.carte-connexion::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--bleu-fonce), var(--bleu-vif));
}
.carte-connexion h1 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--bleu-fonce);
}
.page-connexion .carte-connexion h3 {
  margin: 10px 0 4px;
  font-size: .92rem;
}
.page-connexion .carte-connexion label {
  margin-top: 7px;
  margin-bottom: 3px;
  font-size: .78rem;
}
.page-connexion .carte-connexion input[type=text],
.page-connexion .carte-connexion input[type=password],
.page-connexion .carte-connexion input[type=tel],
.page-connexion .carte-connexion input[type=number] {
  padding: 10px 12px;
}
.page-connexion .carte-connexion .champ { margin-bottom: 0; }
.page-connexion .carte-connexion .ligne-champs { gap: 12px; }
.page-connexion .carte-connexion .bouton { margin-top: 18px; width: 100%; }
.lien-secondaire { text-align: center; margin-top: 10px; font-size: .9rem; color: var(--texte-clair); }

@media (max-height: 700px) {
  .carte-connexion { padding: 22px 24px; }
  .carte-connexion h1 { font-size: 1.15rem; margin-bottom: 10px; }
  .page-connexion .carte-connexion h3 { margin: 6px 0 3px; font-size: .85rem; }
  .page-connexion .carte-connexion label { margin-top: 5px; margin-bottom: 2px; font-size: .74rem; }
  .page-connexion .carte-connexion input[type=text],
  .page-connexion .carte-connexion input[type=password],
  .page-connexion .carte-connexion input[type=tel],
  .page-connexion .carte-connexion input[type=number] { padding: 8px 10px; }
  .page-connexion .carte-connexion .bouton { margin-top: 12px; padding-top: 9px; padding-bottom: 9px; }
  .lien-secondaire { margin-top: 6px; }
}

/* =========================================================================
   Application connectée : app shell (sidebar + header + contenu)
   ========================================================================= */
.app { min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-largeur);
  background: linear-gradient(180deg, var(--bleu-fonce), color-mix(in srgb, var(--bleu-fonce) 82%, black));
  color: #fbeaf1;
  display: flex;
  flex-direction: column;
  z-index: 40;
  box-shadow: 1px 0 0 rgba(255, 255, 255, .05);
  transition: width .18s ease, transform .2s ease;
}
html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #1a0c15, #120810); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .sidebar { background: linear-gradient(180deg, #1a0c15, #120810); }
}

.sidebar-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  flex-shrink: 0;
}
.sidebar-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; letter-spacing: .3px;
  flex-shrink: 0;
}
.sidebar-nom { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; flex: 1; }
.sidebar-logo-image { object-fit: contain; background: #fff; padding: 3px; }
.sidebar-reduire {
  background: none; border: none; color: rgba(255,255,255,.75); cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; flex-shrink: 0; margin: 0; padding: 0;
  transition: background var(--transition-rapide), color var(--transition-rapide);
}
.sidebar-reduire:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-reduire svg { transition: transform .18s ease; }

.lien-bouton {
  background: none; border: none; color: inherit; text-decoration: underline;
  cursor: pointer; font: inherit; padding: 0; margin: 0; border-radius: 0;
  display: inline; font-size: inherit;
}
.lien-bouton:hover { filter: none; opacity: .85; }

.sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px; }
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: var(--rayon-plein); border: none; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
.sidebar-section-titre {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  color: rgba(251,234,241,.5); padding: 16px 10px 6px; white-space: nowrap;
}
.sidebar-liens { list-style: none; margin: 0; padding: 0; }
.sidebar-liens li a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; margin-bottom: 2px;
  color: #f2d3e0; text-decoration: none; border-radius: var(--rayon-petit);
  font-size: .89rem; white-space: nowrap; overflow: hidden;
  transition: background var(--transition-rapide), color var(--transition-rapide);
}
.sidebar-liens li a svg { flex-shrink: 0; opacity: .85; transition: opacity var(--transition-rapide); }
.sidebar-liens li a span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-liens li a:hover { background: rgba(255,255,255,.09); color: #fff; }
.sidebar-liens li a:hover svg { opacity: 1; }
.sidebar-liens li a.actif {
  background: rgba(255,255,255,.16); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 #fff;
}
.sidebar-liens li a.actif svg { opacity: 1; }

.sidebar-utilisateur {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border-top: 1px solid rgba(255,255,255,.12); flex-shrink: 0;
}
.sidebar-utilisateur-texte { overflow: hidden; white-space: nowrap; }
.sidebar-utilisateur-nom { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.badge-role {
  display: inline-block; margin-top: 2px; background: rgba(255,255,255,.16);
  border-radius: var(--rayon-plein); padding: 1px 9px; font-size: .68rem; color: #fbeaf1;
}

.avatar-mini {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--bleu-clair); color: var(--bleu-fonce);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem;
}
.sidebar .avatar-mini { background: rgba(255,255,255,.16); color: #fff; }

.sidebar-fond {
  display: none;
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 35;
  backdrop-filter: blur(1px);
}

/* ---- Réduction (icônes seules) ---- */
html[data-sidebar="reduit"] .sidebar { width: var(--sidebar-largeur-reduite); }
html[data-sidebar="reduit"] .sidebar-nom,
html[data-sidebar="reduit"] .sidebar-section-titre,
html[data-sidebar="reduit"] .sidebar-liens li a span,
html[data-sidebar="reduit"] .sidebar-utilisateur-texte { display: none; }
html[data-sidebar="reduit"] .sidebar-liens li a { justify-content: center; }
html[data-sidebar="reduit"] .sidebar-entete { justify-content: center; }
html[data-sidebar="reduit"] .sidebar-reduire svg { transform: rotate(180deg); }
html[data-sidebar="reduit"] .sidebar-utilisateur { justify-content: center; }
html[data-sidebar="reduit"] .zone-principale { margin-left: var(--sidebar-largeur-reduite); }
html[data-sidebar="reduit"] .entete-titre { display: none; }

/* ---- Zone principale (header + contenu) ---- */
.zone-principale { margin-left: var(--sidebar-largeur); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .18s ease; }

.entete {
  height: var(--entete-hauteur);
  background: var(--carte);
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .03);
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px;
  position: sticky; top: 0; z-index: 30;
}
.entete .entete-burger { display: none; }
.entete-titre { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; color: var(--texte); white-space: nowrap; }

.entete-recherche {
  flex: 1; max-width: 420px; margin: 0 4px 0 auto;
  position: relative; display: flex; align-items: center;
}
.entete-recherche svg { position: absolute; left: 11px; color: var(--texte-discret); pointer-events: none; }
.entete-recherche input[type=search] {
  width: 100%; padding: 8px 12px 8px 34px; margin: 0;
  border: 1px solid var(--bordure); border-radius: var(--rayon-plein);
  background: var(--surface-alt); font-size: .88rem;
  transition: background var(--transition-rapide), border-color var(--transition-rapide);
}
.entete-recherche input[type=search]:focus { background: var(--carte); }

.entete-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }

.btn-icone {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: none;
  color: var(--texte-clair); display: flex; align-items: center; justify-content: center;
  cursor: pointer; margin: 0; padding: 0; flex-shrink: 0;
  transition: background var(--transition-rapide), color var(--transition-rapide);
}
.btn-icone:hover { background: var(--surface-alt); color: var(--texte); }
.icone-lune { display: none; }
html[data-theme="dark"] .icone-soleil { display: none; }
html[data-theme="dark"] .icone-lune { display: block; }

.menu-profil { position: relative; }
.profil-bouton {
  display: flex; align-items: center; gap: 8px; background: none; border: none;
  cursor: pointer; padding: 4px 6px 4px 4px; margin: 0; border-radius: var(--rayon-plein); color: var(--texte);
  transition: background var(--transition-rapide);
}
.profil-bouton:hover { background: var(--surface-alt); }
.profil-texte { text-align: left; line-height: 1.25; display: none; }
.profil-nom { font-size: .85rem; font-weight: 600; display: block; }
.profil-role { font-size: .73rem; color: var(--texte-clair); display: block; }
.profil-bouton svg.chevron { color: var(--texte-discret); }

.profil-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre-forte); min-width: 220px; padding: 6px; z-index: 50;
  display: none;
  animation: apparition-menu .15s ease-out;
}
@keyframes apparition-menu {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.profil-menu.ouvert { display: block; }
.profil-menu-entete { padding: 8px 10px 10px; border-bottom: 1px solid var(--bordure); margin-bottom: 6px; }
.profil-menu-entete .profil-nom { font-size: .88rem; }
.profil-menu a, .profil-menu button.lien-menu {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--rayon-petit); color: var(--texte);
  text-decoration: none; font-size: .87rem; background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; margin: 0;
  transition: background var(--transition-rapide);
}
.profil-menu a:hover, .profil-menu button.lien-menu:hover { background: var(--surface-alt); }
.profil-menu button.lien-menu { color: var(--rouge); }

.contenu { flex: 1; padding: 28px 30px 40px; max-width: 1240px; width: 100%; margin: 0 auto; overflow-x: auto; }

.titre-page { font-size: 1.4rem; letter-spacing: -.015em; color: var(--texte); margin: 0 0 20px; font-weight: 700; }

/* =========================================================================
   Composants
   ========================================================================= */
.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px;
  margin-bottom: 20px;
}
.carte > strong { font-size: .97rem; }

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }

.grille-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .grille-deux-colonnes { grid-template-columns: 1fr; } }

.bandeau-accueil {
  background: linear-gradient(135deg, var(--bleu-fonce), var(--vert));
  color: #fff; border-radius: var(--rayon); padding: 24px 28px; margin-bottom: 22px;
  box-shadow: var(--ombre-legere);
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center;
}
.bandeau-accueil .bandeau-date { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.bandeau-accueil h2 { margin: 4px 0 2px; font-size: 1.3rem; letter-spacing: -.015em; }
.bandeau-accueil p { margin: 0 0 14px; opacity: .9; font-size: .88rem; }
.bandeau-accueil .bandeau-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.bandeau-accueil .bandeau-boutons .bouton, .bandeau-accueil .bandeau-boutons .horloge {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3);
}
.bandeau-accueil .bandeau-boutons .bouton:hover { background: rgba(255,255,255,.28); }
.horloge { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--rayon-petit); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; }
.bandeau-recettes { display: flex; gap: 12px; flex-wrap: wrap; }
.bandeau-recette-carte {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: var(--rayon);
  padding: 12px 18px; min-width: 150px;
}
.bandeau-recette-carte .libelle { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.bandeau-recette-carte .valeur { font-size: 1.4rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .bandeau-accueil { padding: 18px; } }

.stat-carte {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 18px 20px; display: flex; align-items: center; gap: 14px;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.stat-carte:hover { box-shadow: var(--ombre-forte); border-color: var(--bordure-forte); }
.stat-carte-icone {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bleu-clair); color: var(--bleu-fonce);
}
.stat-carte-icone.vert { background: var(--vert-clair); color: var(--vert); }
.stat-carte-icone.ambre { background: var(--ambre-clair); color: var(--ambre); }
.stat-carte-icone.rouge { background: var(--rouge-clair); color: var(--rouge); }
.stat-carte .valeur { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--texte); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-carte .libelle { color: var(--texte-clair); font-size: .8rem; margin-top: 1px; }

.alerte { padding: 12px 16px; border-radius: var(--rayon); margin-bottom: 16px; font-size: .9rem; border: 1px solid transparent; }
.alerte-succes { background: var(--vert-clair); color: var(--vert); border-color: color-mix(in srgb, var(--vert) 25%, transparent); }
.alerte-erreur { background: var(--rouge-clair); color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 25%, transparent); }

table { width: 100%; border-collapse: collapse; background: var(--carte); border-radius: var(--rayon); overflow: hidden; }
table.simple { border: 1px solid var(--bordure); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--bordure); font-size: .89rem; }

.tableau-defilement { overflow-x: auto; border-radius: var(--rayon); border: 1px solid var(--bordure); }
.tableau-defilement table { width: auto; min-width: 100%; border-radius: 0; }
.tableau-defilement th, .tableau-defilement td { white-space: nowrap; }
.tableau-defilement th:last-child, .tableau-defilement td:last-child { white-space: normal; }
th { background: var(--surface-alt); color: var(--texte-clair); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
tbody tr { transition: background var(--transition-rapide); }
tbody tr:hover { background: var(--surface-alt); }
tr:last-child td { border-bottom: none; }

form.en-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

label { display: block; font-size: .82rem; color: var(--texte-clair); margin-bottom: 5px; margin-top: 12px; font-weight: 500; }
input[type=text], input[type=password], input[type=date], input[type=datetime-local],
input[type=number], input[type=tel], input[type=search], input[type=file], input[type=email],
input[type=time],
select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  font-size: .93rem; background: var(--carte); color: var(--texte); font-family: inherit;
  transition: border-color var(--transition-rapide), box-shadow var(--transition-rapide);
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bleu-vif);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu-vif) 18%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--texte-discret); }

.champ { margin-bottom: 4px; }
.ligne-champs { display: flex; gap: 16px; flex-wrap: wrap; }
.ligne-champs > .champ { flex: 1; min-width: 180px; }

.bouton, button, input[type=submit] {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--bleu);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: var(--rayon-petit);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 14px;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: background var(--transition-rapide), filter var(--transition-rapide), box-shadow var(--transition-rapide), transform var(--transition-rapide);
}
.bouton:hover, button:hover { filter: brightness(0.94); color: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .14); transform: translateY(-1px); }
.bouton:active, button:active { transform: translateY(0); filter: brightness(0.9); }
.bouton.secondaire { background: var(--carte); color: var(--bleu); border: 1px solid var(--bordure-forte); box-shadow: none; }
.bouton.secondaire:hover { background: var(--surface-alt); color: var(--bleu-fonce); box-shadow: var(--ombre-legere); }
.bouton.danger { background: var(--rouge); }
.bouton.vert { background: var(--vert); }
.bouton.petit { padding: 6px 12px; font-size: .8rem; margin-top: 0; }
.bouton:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.barre-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }

.champ-erreur { color: var(--rouge); font-size: .85rem; }

.etiquette { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; border-radius: var(--rayon-plein); font-size: .74rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.etiquette-attente { background: var(--ambre-clair); color: var(--ambre); }
.etiquette-encaisse { background: var(--vert-clair); color: var(--vert); }
.etiquette-annule { background: var(--rouge-clair); color: var(--rouge); }
.etiquette-solde { background: var(--rouge-clair); color: var(--rouge); }
.etiquette-info { background: var(--bleu-clair); color: var(--bleu-fonce); }
.etiquette-neutre { background: var(--surface-alt); color: var(--texte-clair); border: 1px solid var(--bordure); }
.etiquette-urgence { background: var(--rouge); color: #fff; }

.onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--bordure); margin-bottom: 16px; overflow-x: auto; }
.onglets a { padding: 9px 16px; text-decoration: none; color: var(--texte-clair); border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: .88rem; white-space: nowrap; transition: color var(--transition-rapide), border-color var(--transition-rapide); }
.onglets a:hover { color: var(--texte); }
.onglets a.actif { color: var(--bleu-fonce); border-color: var(--bleu); font-weight: 600; }

.etat-vide { color: var(--texte-clair); text-align: center; padding: 28px 16px; font-size: .9rem; }

/* Cartes cliquables (grille produits de l'écran de caisse, entre autres). */
.grille-categories-certificats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 4px; }
.carte-categorie-certificat {
  display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  /* Cette classe est posée sur des <button> : sans couleur explicite, le texte héritait du
     blanc de la règle globale "button" et devenait invisible sur le fond blanc de la tuile
     (noms de produits absents de la Caisse, alors que prix et stock avaient leur propre couleur). */
  color: var(--texte); margin-top: 0; box-shadow: none;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px 16px; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.carte-categorie-certificat:hover { border-color: var(--bleu); box-shadow: var(--ombre); transform: translateY(-1px); color: var(--texte); filter: none; }
.carte-categorie-certificat[aria-expanded="true"] { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.carte-categorie-certificat .icone-categorie {
  width: 36px; height: 36px; border-radius: 9px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bleu-clair); color: var(--bleu-fonce);
}
.carte-categorie-certificat strong { display: block; font-size: .92rem; }
.carte-categorie-certificat .description-categorie { display: block; font-size: .78rem; color: var(--texte-clair); margin-top: 2px; }

/* =========================================================================
   Responsive
   ========================================================================= */

/* Tablette : sidebar automatiquement réduite en icônes */
@media (max-width: 1080px) and (min-width: 641px) {
  .sidebar { width: var(--sidebar-largeur-reduite); }
  .sidebar-nom, .sidebar-section-titre, .sidebar-liens li a span,
  .sidebar-utilisateur-texte { display: none; }
  .sidebar-liens li a, .sidebar-entete, .sidebar-utilisateur { justify-content: center; }
  .zone-principale { margin-left: var(--sidebar-largeur-reduite); }
  html[data-sidebar="reduit"] .sidebar-reduire svg { transform: none; }
  .entete-recherche { max-width: 260px; }
}

/* Mobile : sidebar en tiroir (drawer) */
@media (max-width: 640px) {
  .sidebar {
    width: min(82vw, 280px);
    transform: translateX(-100%);
  }
  .sidebar.ouverte { transform: translateX(0); box-shadow: var(--ombre-forte); }
  .sidebar-nom, .sidebar-section-titre, .sidebar-liens li a span,
  .sidebar-utilisateur-texte, .sidebar-reduire { display: revert; }
  .sidebar-reduire { display: none; }
  html[data-sidebar="reduit"] .sidebar-nom,
  html[data-sidebar="reduit"] .sidebar-section-titre,
  html[data-sidebar="reduit"] .sidebar-liens li a span,
  html[data-sidebar="reduit"] .sidebar-utilisateur-texte { display: revert; }
  html[data-sidebar="reduit"] .sidebar-liens li a,
  html[data-sidebar="reduit"] .sidebar-entete,
  html[data-sidebar="reduit"] .sidebar-utilisateur { justify-content: flex-start; }

  .sidebar-fond.ouvert { display: block; }

  .zone-principale, html[data-sidebar="reduit"] .zone-principale { margin-left: 0; }

  .entete { padding: 0 14px; gap: 8px; }
  .entete .entete-burger { display: flex; }
  .entete-titre { display: none; }
  .entete-recherche { display: none; }
  .profil-texte { display: none; }

  .contenu { padding: 16px 14px 32px; }
  .titre-page { font-size: 1.2rem; }

  .grille-cartes { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .stat-carte { padding: 12px 14px; }
  .stat-carte .valeur { font-size: 1.2rem; }

  .carte { padding: 14px; }

  .ligne-champs { flex-direction: column; gap: 0; }
  .ligne-champs > .champ { min-width: 0; }

  .barre-actions { align-items: stretch; }
  .barre-actions > div { display: flex; flex-wrap: wrap; gap: 8px; }

  th, td { padding: 8px 9px; font-size: .82rem; }
}

@media (min-width: 641px) {
  .profil-texte { display: block; }
}

/* Respecte les préférences d'accessibilité : désactive les animations
   décoratives pour les utilisateurs qui demandent moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
  .carte-connexion, .profil-menu { animation: none; }
  * { transition-duration: 0.01ms !important; }
}