/* =============================================================================
   DESIGN SYSTEM — La Pépinière de Gaïa
   ----------------------------------------------------------------------------
   Source unique de vérité pour les couleurs, typographies, espaces, ombres,
   border-radius. Importer ce fichier EN PREMIER dans tous les templates pour
   que les variables soient disponibles partout.

   Usage dans les CSS :
       background: var(--brand-green);
       color: var(--text-primary);
       padding: var(--space-4);
       border-radius: var(--radius-md);

   Convention :
   - Pour TOUTE nouvelle couleur, vérifier si une variable existe déjà.
   - NE PAS hardcoder de hex : `color: #3f6e57` → `color: var(--brand-green)`.
   - Pour ajouter une nouvelle couleur, l'ajouter ici, pas dans le template.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------
     PALETTE — Vert nature (sauge), beige doux, gris perlé
     ---------------------------------------------------------------- */

  /* Vert principal (sauge) — couleur d'accent */
  --brand-green: #3f6e57;
  --brand-green-hover: #335745;        /* hover sur boutons */
  --brand-green-dark: #2d5442;         /* texte sur fond clair, accent fort */
  --brand-green-darker: #20492e;       /* texte sur fond pâle, accent maximal */

  /* Vert pâle — fonds subtils, hover de listes, badges */
  --brand-green-light: #e8f0ec;        /* avant : 3 variations différentes */
  --brand-green-pale: #f1faf5;         /* début gradient, très léger */
  --brand-green-soft: #eef6f1;         /* alternative entre light et pale, headers tableaux */

  /* Variantes texte vert (pour titres/accents sur fond clair) */
  --brand-green-text: #20492e;         /* texte foncé sur fond pâle, accent maximal */
  --brand-green-text-soft: #3a5347;    /* texte foncé moins contrasté, sous-titres */
  --brand-green-text-alt: #2f5745;     /* alternative entre dark et text-soft */

  /* Opacités du vert principal — utilisées pour hover, focus rings, surimpressions
     (utiliser color-mix ou variables directement). Échelle régulière 0.03 à 0.35. */
  --brand-green-a03: rgba(63, 110, 87, 0.03);
  --brand-green-a06: rgba(63, 110, 87, 0.06);
  --brand-green-a08: rgba(63, 110, 87, 0.08);
  --brand-green-a10: rgba(63, 110, 87, 0.10);
  --brand-green-a12: rgba(63, 110, 87, 0.12);
  --brand-green-a18: rgba(63, 110, 87, 0.18);
  --brand-green-a22: rgba(63, 110, 87, 0.22);
  --brand-green-a35: rgba(63, 110, 87, 0.35);

  /* Surfaces neutres */
  --surface: #ffffff;                   /* cards, panels, formulaires */
  --bg: #ffffff;                        /* fond de page (blanc uni) */
  --bg-alt: #fbfcfb;                    /* fond alternatif (zones secondaires) */

  /* Bordures — gamme verdâtre douce */
  --border: #d7e6df;                    /* bordure standard, séparateurs */
  --border-soft: #e2e8e5;               /* bordure ténue, formulaires */
  --border-strong: #cfe6d8;             /* bordure accentuée */
  --border-alt: #d7dfda;                /* variante neutre légèrement grise */
  --border-pale: #e6ebe8;               /* bordure ultra-pâle pour PDF/print */

  /* Texte */
  --text-primary: #1f2d27;              /* texte principal (presque noir verdâtre) */
  --text-secondary: #6b7280;            /* texte secondaire, mentions, labels */
  --text-muted: #9ca3af;                /* texte très atténué (placeholders) */
  --text-on-brand: #ffffff;             /* texte sur fond vert (boutons, headers) */

  /* États sémantiques (success, warning, danger, info) */
  --success: #16a34a;
  --success-bg: #dcfce7;
  --warning: #d97706;
  --warning-bg: #fef3c7;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --info: #0284c7;
  --info-bg: #e0f2fe;

  /* ----------------------------------------------------------------
     TYPOGRAPHIE
     ---------------------------------------------------------------- */
  --font-sans: "Inter", "Segoe UI", Roboto, system-ui, -apple-system,
               BlinkMacSystemFont, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Consolas", monospace;

  /* Tailles (échelle modulaire 1.125) */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;     /* taille de référence */
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;

  /* Hauteur de ligne */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Graisse */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Espacement entre lettres */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;     /* utile pour les uppercase */

  /* ----------------------------------------------------------------
     ESPACEMENT — Échelle 4px
     ---------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ----------------------------------------------------------------
     BORDER-RADIUS
     ---------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;        /* pour pills, badges ronds */

  /* ----------------------------------------------------------------
     OMBRES — Très douces, jamais agressives
     ---------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(31, 45, 39, 0.04);
  --shadow-sm: 0 2px 4px rgba(31, 45, 39, 0.05);
  --shadow-md: 0 4px 12px rgba(31, 45, 39, 0.06);
  --shadow-lg: 0 8px 24px rgba(31, 45, 39, 0.08);
  --shadow-xl: 0 16px 32px rgba(22, 37, 50, 0.12);
  --shadow-focus: 0 0 0 3px rgba(63, 110, 87, 0.18);   /* ring vert au focus */

  /* ----------------------------------------------------------------
     CONTAINERS — Largeurs maximales
     ---------------------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-content: 1100px;   /* largeur utilisée par .pepi-wrapper */

  /* ----------------------------------------------------------------
     TRANSITIONS — Durées et easings standards
     ---------------------------------------------------------------- */
  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;
  --transition-slow: 0.3s ease;

  /* ----------------------------------------------------------------
     Z-INDEX — Échelle ordonnée pour éviter les conflits
     ---------------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-select2: 99999;            /* hack legacy, à descendre quand possible */
}


/* =============================================================================
   BASE — Reset minimal + styles globaux
   ========================================================================== */

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lien standard */
a {
  color: var(--brand-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--brand-green-darker);
  text-decoration: underline;
}

/* Focus visible accessible (clavier seulement, pas la souris) */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}


/* =============================================================================
   DJANGO ADMIN OVERRIDES — Force Inter + couleurs DS partout dans l'admin
   ----------------------------------------------------------------------------
   Sans cette section, les pages admin Django sans style custom (ex :
   "Facture reçue" change_list minimal) gardaient l'apparence brute par
   défaut de Django, qui ne matche pas notre charte verte.

   On force ici Inter sur tout l'admin et on étend les couleurs aux
   éléments standards (changelists, tableaux, boutons, sidebar).
   ========================================================================== */

/* OVERRIDE NIVEAU 1 — Variables natives de Django admin (5.x).
   Django 5 utilise un thème avec des variables CSS pour ses couleurs
   primaires, headers, liens, etc. En réassignant ces variables au :root,
   on force Django à utiliser NOTRE charte verte partout SANS avoir à
   override chaque sélecteur individuellement. C'est l'approche la plus
   robuste contre le cache et les nouvelles versions de Django. */
:root,
html[data-theme="auto"],
html[data-theme="light"] {
  --primary: var(--brand-green) !important;
  --primary-fg: var(--text-on-brand) !important;
  --secondary: var(--brand-green-hover) !important;
  --accent: var(--brand-green-dark) !important;

  --header-bg: var(--brand-green) !important;
  --header-color: var(--text-on-brand) !important;
  --header-link-color: var(--text-on-brand) !important;
  --header-branding-color: var(--text-on-brand) !important;

  --breadcrumbs-fg: var(--text-on-brand) !important;
  --breadcrumbs-link-fg: var(--text-on-brand) !important;
  --breadcrumbs-bg: var(--brand-green-hover) !important;

  --link-fg: var(--brand-green) !important;
  --link-hover-color: var(--brand-green-darker) !important;
  --link-selected-fg: var(--brand-green-dark) !important;

  --button-bg: var(--brand-green) !important;
  --button-fg: var(--text-on-brand) !important;
  --button-hover-bg: var(--brand-green-hover) !important;
  --default-button-bg: var(--brand-green) !important;
  --default-button-hover-bg: var(--brand-green-hover) !important;

  --selected-bg: var(--brand-green-light) !important;
  --selected-row: var(--brand-green-pale) !important;

  --object-tools-bg: var(--brand-green-hover) !important;
  --object-tools-fg: var(--text-on-brand) !important;
  --object-tools-hover-bg: var(--brand-green-darker) !important;

  --close-button-bg: var(--text-secondary) !important;
  --close-button-hover-bg: var(--brand-green-darker) !important;

  --message-success-bg: var(--success-bg) !important;
  --message-warning-bg: var(--warning-bg) !important;
  --message-error-bg: var(--danger-bg) !important;
}

/* Police globale : applique Inter à TOUT le DOM admin (y compris champs,
   boutons, sidebar, modals). `!important` pour vaincre les styles Django. */
body,
input,
button,
select,
textarea,
table,
.module,
.results,
#header,
#user-tools,
#nav-sidebar,
.changelist,
.changeform,
.submit-row {
  font-family: var(--font-sans) !important;
}

/* Sidebar gauche (#nav-sidebar) : police légèrement plus grande pour
   meilleure lisibilité, mais pas trop (15px était trop gros).
   Défaut Django ≈ 13px → on monte à 14px (--text-base) pour le confort
   sans déformer la mise en page. */
#nav-sidebar,
#nav-sidebar a,
#nav-sidebar .current-app .section,
#nav-sidebar .current-model {
  font-size: var(--text-base) !important;       /* 14px (au lieu de 15px précédent) */
  line-height: var(--leading-normal) !important;
}
#nav-sidebar .section {
  font-size: var(--text-xs) !important;          /* sections : 12px, plus discret */
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-bold);
  opacity: 0.7;
}

/* Tableaux changelist : zebrage doux + hover vert pâle */
#result_list tbody tr:hover {
  background: var(--brand-green-a06) !important;
}
#result_list tbody tr.row1 {
  background: var(--surface);
}
#result_list tbody tr.row2 {
  background: var(--bg-alt);
}

/* En-têtes de tableaux : fond vert pâle au lieu du gris Django */
#result_list thead th,
.results table thead th {
  background: var(--brand-green-light) !important;
  color: var(--brand-green-text) !important;
  font-weight: var(--weight-semibold) !important;
  border-bottom: 2px solid var(--brand-green) !important;
}
#result_list thead th a {
  color: var(--brand-green-text) !important;
}

/* Boutons addlink/changelink : aligner sur la palette DS */
.object-tools a.addlink,
.object-tools a.changelink {
  background-color: var(--brand-green) !important;
  color: var(--text-on-brand) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-semibold) !important;
  padding: var(--space-2) var(--space-4) !important;
  transition: background var(--transition-base) !important;
}
.object-tools a.addlink:hover,
.object-tools a.changelink:hover {
  background-color: var(--brand-green-hover) !important;
}

/* Liens de pagination : couleur du brand */
.paginator a {
  color: var(--brand-green) !important;
}
.paginator a:hover {
  color: var(--brand-green-darker) !important;
}

/* Filtres latéraux changelist : titre en vert */
#changelist-filter h2,
#changelist-filter h3 {
  background: var(--brand-green-light) !important;
  color: var(--brand-green-text) !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-sm) !important;
}
#changelist-filter li.selected a {
  color: var(--brand-green-darker) !important;
  font-weight: var(--weight-semibold) !important;
}

/* Messages flash (success/error/warning) : alignement palette DS */
ul.messagelist li.success {
  background: var(--success-bg) !important;
  color: var(--success) !important;
  border-left: 4px solid var(--success) !important;
}
ul.messagelist li.warning {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
  border-left: 4px solid var(--warning) !important;
}
ul.messagelist li.error {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-left: 4px solid var(--danger) !important;
}

/* ----------------------------------------------------------------
   Checkboxes & radios : couleur vert sauge au lieu du bleu navigateur
   Marche sur Chrome/Firefox/Safari/Edge modernes via `accent-color`.
   ---------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-green);
}

/* ----------------------------------------------------------------
   Widget `filter_horizontal` (SelectMultiple à 2 colonnes)
   ----------------------------------------------------------------
   Avant : grosses bandes BLEU MARINE (couleur Django par défaut)
           qui pètent complètement avec la charte verte.
   Après : vert sauge cohérent + design plus moderne (cards arrondies,
           ombres douces, plus d'espace).
   Les classes ciblées sont `.selector h2`, `.selector-available`,
   `.selector-chosen` et leurs enfants — sélecteurs renforcés avec
   `background-image: none` pour killer les gradients Django. */

/* Headers "Disponible" / "Choisi" — VERT au lieu de BLEU MARINE */
.selector h2,
.selector .selector-available h2,
.selector .selector-chosen h2,
.module .selector h2 {
  background: var(--brand-green) !important;
  background-image: none !important;        /* kill tout linear-gradient Django */
  color: var(--text-on-brand) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-normal) !important;
  text-transform: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  text-shadow: none !important;
  border: none !important;
  margin: 0 !important;
}

/* Les 2 colonnes — cards arrondies avec ombre douce */
.selector .selector-available,
.selector .selector-chosen {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xs) !important;
}
.selector .selector-chosen {
  border-color: var(--brand-green-light) !important;
}

/* Zone "filtre de recherche" en haut de chaque colonne */
.selector .selector-filter {
  background: var(--bg-alt) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  padding: var(--space-2) var(--space-3) !important;
}
.selector .selector-filter input,
.selector .selector-filter input[type="text"] {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-2) var(--space-3) !important;
  background: var(--surface) !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base) !important;
}
.selector .selector-filter input:focus {
  border-color: var(--brand-green) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}

/* Listes (les <select> contenant les options) */
.selector select,
.selector ul.selector-chosen-list {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  border: none !important;
  background: var(--surface) !important;
}
/* Option survolée / sélectionnée dans la liste */
.selector select option:checked,
.selector select option:hover {
  background: var(--brand-green-a12) !important;
  color: var(--brand-green-text) !important;
}

/* Texte d'aide sous chaque colonne ("Choisissez en sélectionnant...") */
.selector .selector-available .help,
.selector .selector-chosen .help {
  background: var(--bg-alt) !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-3) !important;
  border: none !important;
}

/* Boutons "Choisir toutes les valeurs" / "Enlever toutes les valeurs"
   en bas des colonnes — plus subtils, vert au hover */
.selector .selector-chooseall,
.selector .selector-clearall {
  background: var(--bg-alt) !important;
  color: var(--brand-green-text) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  border: none !important;
  border-top: 1px solid var(--border-soft) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  padding: var(--space-2) var(--space-3) !important;
  transition: background var(--transition-base) !important;
  text-shadow: none !important;
}
.selector .selector-chooseall:hover,
.selector .selector-clearall:hover {
  background: var(--brand-green-light) !important;
  color: var(--brand-green-darker) !important;
}

/* Boutons fléchés du milieu (entre les 2 colonnes) — fond clair, hover vert */
.selector ul.selector-chooser {
  background: var(--bg-alt) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-soft) !important;
  padding: var(--space-2) !important;
}
.selector .selector-chooser li a {
  background-color: var(--surface) !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-base) !important;
}
.selector .selector-chooser li a:hover {
  background-color: var(--brand-green-light) !important;
}

/* Container principal — ajout d'air autour */
.form-row .selector {
  gap: var(--space-3) !important;
}

/* ----------------------------------------------------------------
   Liens d'admin inline ("Modification", "+ Ajouter", "Supprimer")
   et tous les liens Django admin → vert au lieu de bleu.
   ---------------------------------------------------------------- */
a.changelink,
.inline-related a.changelink,
.related-widget-wrapper-link.change-related,
.related-widget-wrapper-link.view-related {
  color: var(--brand-green) !important;
  font-weight: var(--weight-semibold) !important;
}
a.changelink:hover,
.inline-related a.changelink:hover,
.related-widget-wrapper-link.change-related:hover {
  color: var(--brand-green-darker) !important;
}

/* Lien "Supprimer" inline → rouge sémantique du DS */
a.inline-deletelink,
.inline-deletelink {
  color: var(--danger) !important;
}
a.inline-deletelink:hover {
  color: #991b1b !important;     /* rouge plus foncé au hover */
}

/* Headers d'inlines (devisligne, factureligne, etc.) — qui apparaissent
   parfois en bleu Django par défaut */
.inline-group h2 {
  background: var(--brand-green-light) !important;
  color: var(--brand-green-text) !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-4) !important;
}

/* Lien `add-another` natif Django (le bouton "+ Ajouter une ligne") */
.add-row a {
  color: var(--brand-green) !important;
  font-weight: var(--weight-semibold) !important;
}
.add-row a:hover {
  color: var(--brand-green-darker) !important;
}

/* Label "Modification" en haut à droite d'une ligne tabulaire (le lien
   bleu de l'image 1) */
.tabular .original a,
.tabular .original {
  color: var(--brand-green) !important;
  font-family: var(--font-sans) !important;
}


/* =============================================================================
   COMPOSANTS UTILITAIRES — Réutilisables sur tous les templates
   ========================================================================== */

/* ---- Cards ---- */
.ds-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* ---- Boutons ---- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}
.ds-btn-primary {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--text-on-brand);
}
.ds-btn-primary:hover {
  background: var(--brand-green-hover);
  border-color: var(--brand-green-hover);
}
.ds-btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}
.ds-btn-ghost:hover {
  background: var(--brand-green-light);
  border-color: var(--brand-green);
  color: var(--brand-green-darker);
}
.ds-btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-on-brand);
}

/* ---- Inputs ---- */
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-primary);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: var(--shadow-focus);
}
.ds-input::placeholder {
  color: var(--text-muted);
}

/* ---- Labels ---- */
.ds-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* ---- Badges ---- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ds-badge-success {
  background: var(--success-bg);
  color: var(--success);
}
.ds-badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.ds-badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.ds-badge-info {
  background: var(--info-bg);
  color: var(--info);
}
.ds-badge-brand {
  background: var(--brand-green-light);
  color: var(--brand-green-darker);
}

/* ---- Alertes (messages Django) ---- */
.ds-alert {
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}
.ds-alert-success {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.ds-alert-warning {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}
.ds-alert-danger {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.ds-alert-info {
  background: var(--info-bg);
  border-color: var(--info);
  color: var(--info);
}


/* =============================================================================
   RESPONSIVE — Breakpoints + adaptations mobile (tablette + smartphone)
   ----------------------------------------------------------------------------
   Stratégie mobile-first :
     - Layouts par défaut : confortables sur grand écran (>= 1024px)
     - Tablette portrait (768-1023px) : adaptations légères
     - Smartphone (480-767px) : refonte tableaux, sidebar repliée
     - Petit smartphone (<480px) : tout en pile, padding réduit

   Breakpoints standards (alignés Bootstrap/Tailwind) :
     --bp-sm: 640px   (petit smartphone)
     --bp-md: 768px   (tablette portrait / gros smartphone landscape)
     --bp-lg: 1024px  (tablette paysage / petit desktop)
     --bp-xl: 1280px  (desktop standard)
   ========================================================================== */

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ────────────────────────────────────────────────────────────────────────
   TOUCH-FRIENDLY GLOBAL (s'applique sur tous les écrans)
   - Cibles tactiles min 44x44px (recommandation Apple HIG / WCAG)
   - font-size 16px sur inputs pour empêcher le zoom auto iOS
   - Désactive le tap highlight bleu disgracieux
   ──────────────────────────────────────────────────────────────────────── */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 1023px) {
  /* Force min-height tactile sur tous les boutons / inputs / selects */
  button:not(.qte-btn):not(.modal-close):not(.lp-supprimer),
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="date"], input[type="search"],
  input[type="tel"], select, textarea {
    min-height: 44px;
  }
  /* iOS zoom-prevention : inputs en 16px minimum sur mobile/tablette */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   TABLETTE & EN-DESSOUS (1024px et moins) — sidebar en hamburger
   Le bouton hamburger lui-même est dans templates/admin/base_site.html
   (créé par JS), avec un backdrop cliquable. Ce bloc CSS fait juste
   passer #nav-sidebar en overlay coulissant à partir de la gauche.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Cards en pleine largeur */
  .ds-card { padding: var(--space-4) var(--space-4) var(--space-5); }

  /* Modals plus larges (jusqu'au bord) */
  .modal { max-width: 92vw !important; }

  /* Sidebar Django admin : se replie en hamburger (cf. base_site.html JS)
     IMPORTANT : Django admin a une règle native @media (max-width: 767px)
     qui force `display: none` sur #nav-sidebar et `visibility: hidden`
     quand body n'a pas la classe .main.shifted. On surcharge ces règles
     pour pouvoir afficher la sidebar en overlay au tap du hamburger. */
  #nav-sidebar {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw;
    margin: 0 !important;
    flex: none !important;
    z-index: 999;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    overflow-y: auto;
  }
  #nav-sidebar.is-open { transform: translateX(0); }

  /* Surcharge des règles `.main > #nav-sidebar { visibility: hidden }` */
  .main > #nav-sidebar,
  .main.shifted > #nav-sidebar {
    visibility: visible !important;
    margin-left: 0 !important;
    left: 0 !important;
  }

  /* Le contenu principal occupe toute la largeur (la sidebar passe en overlay) */
  #content, .main, [role="main"] { margin-left: 0 !important; width: 100% !important; }
  /* Le bouton toggle natif Django est masqué (on a notre propre hamburger) */
  #toggle-nav-sidebar { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   TABLETTE PORTRAIT (768px et moins) — point de bascule majeur
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Typo : descendre d'un cran pour économiser la place */
  html { font-size: 13px; }

  /* Boutons utilitaires : un peu plus compacts mais toujours tactiles */
  .ds-btn { padding: var(--space-3); font-size: var(--text-base); }

  /* Header admin : laisse passer les éléments à la ligne si trop large */
  #header { flex-wrap: wrap; padding: var(--space-2); }
  #branding { flex: 1 1 100%; }
  #user-tools { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }

  /* Tableaux changelist Django admin : scroll horizontal au lieu de tout casser */
  #changelist, .results, .module {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #changelist table, .results table {
    min-width: 600px;  /* préserve la lisibilité, scroll si trop large */
  }

  /* Formulaires admin : pile vertical (au lieu de labels à gauche, champs à droite) */
  .form-row { display: block !important; }
  .form-row > div { width: 100% !important; }

  /* Modals : presque pleine page.
     IMPORTANT : on retire le padding du backdrop et on met box-sizing
     sur .modal pour qu'elle soit centrée correctement sans dépasser
     l'écran (sinon `max-width: 100vw` + padding du backdrop = la modale
     déborde à droite et n'est plus visible en entier). */
  .modal-backdrop {
    padding: 0 !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   SMARTPHONE 6" (375-767px)
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Container principal : padding réduit */
  body { font-size: 14px; }

  /* Espaces de section : réduits */
  .ds-card { padding: var(--space-3); }

  /* Pavés numériques (si présents) : 4 colonnes au lieu de 3 pour ergonomie */
  .keypad { grid-template-columns: repeat(3, 1fr); }
  .keypad-btn { min-height: 56px; padding: var(--space-3); font-size: var(--text-xl); }

  /* Modes de paiement : 1 colonne au lieu de 3 */
  .pay-modes { grid-template-columns: 1fr; }

  /* Boutons d'action plein largeur dans les modals */
  .modal-body .btn-action { width: 100%; }

  /* Headers de page : titre + actions empilés */
  h1, h2 { font-size: var(--text-xl) !important; }
  .object-tools { flex-wrap: wrap; gap: var(--space-2); }
  .object-tools li { flex: 1 1 100%; }
  .object-tools a { display: block; width: 100%; text-align: center; }
}

/* ────────────────────────────────────────────────────────────────────────
   PETIT SMARTPHONE 5" (<375px)
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 374px) {
  html { font-size: 13px; }
  .ds-card { padding: var(--space-2); }
  .modal-header h2 { font-size: var(--text-md); }
  .modal-body { padding: var(--space-3); }
}

/* ────────────────────────────────────────────────────────────────────────
   ORIENTATION PAYSAGE SMARTPHONE (< 480px haut)
   Cas spécial : éviter que le clavier ou la barre URL bouffent tout
   ──────────────────────────────────────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
  .modal { max-height: 95vh; }
  .panier-pane { max-height: 90vh; }
}

/* ────────────────────────────────────────────────────────────────────────
   PATTERNS GAIA (cartes, grids, heads) — adaptation mobile
   Couvre les classes récurrentes utilisées dans dashboard, compta, etc.
   - .gaia-wrap : grid 12 colonnes
   - .gaia-card : carte conteneur
   - .gaia-head : en-tête de carte
   - .gaia-title : titre de page
   - .card, .card-h, .card-b : variante compta
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .gaia-wrap {
    gap: 12px !important;
    padding: 6px 4px 12px !important;
  }
  /* À la tablette portrait, on force toutes les .two-col à passer en 12 */
  .gaia-wrap .two-col,
  .gaia-wrap .three-col,
  .gaia-wrap .four-col {
    grid-column: span 12 !important;
  }
  .gaia-head {
    padding: 12px 14px !important;
  }
}

@media (max-width: 640px) {
  /* Titre de page : un peu plus petit */
  .gaia-title {
    font-size: 17px !important;
    margin: 4px 0 10px !important;
  }
  /* Grid passe en 1 colonne fluide */
  .gaia-wrap {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* En-têtes de carte : autorise le retour à la ligne */
  .gaia-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .gaia-head a,
  .gaia-head h2 {
    font-size: 13px !important;
  }
  .gaia-sub {
    font-size: 11px !important;
  }
  /* Cards compta */
  .card-h {
    padding: 10px 12px !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .card-b {
    padding: 12px !important;
  }
  /* Grilles compta top/bottom : tout en colonnes */
  .top-grid, .bottom-grid, .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   TABLEAUX DENSES (changelist Django + tableaux compta)
   Sur tablette portrait, on rend les cellules plus aérées et le tableau
   scrollable horizontalement sans casser la lecture des colonnes figées.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Padding cellules : réduire pour gagner de la place */
  table.results td, table.results th,
  table.module td, table.module th {
    padding: 8px 6px !important;
    font-size: 13px;
  }
  /* Actions au-dessus des changelists : pile + plein largeur */
  .actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .actions select, .actions button {
    width: 100%;
  }
  /* Filtres latéraux Django (#changelist-filter) : repliable en bas plutôt
     que à droite (gagne 240px de largeur). */
  #changelist-filter {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 16px;
    position: static !important;
  }
  #changelist-form {
    display: block !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   FORMULAIRES change_form (Django admin) — mobile
   Les formulaires admin sont en deux colonnes (label / champ) par défaut.
   Sur mobile, on les empile pour qu'ils tiennent à l'écran.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Labels au-dessus des champs */
  .form-row label {
    float: none !important;
    width: 100% !important;
    padding: 0 0 4px 0 !important;
    text-align: left !important;
    font-weight: 700;
  }
  .form-row .field-box,
  .form-row > div:not(.help) {
    width: 100% !important;
    float: none !important;
  }
  /* Inputs en pleine largeur */
  .form-row input[type="text"],
  .form-row input[type="number"],
  .form-row input[type="email"],
  .form-row input[type="password"],
  .form-row textarea,
  .form-row select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Help text plus discret */
  .help, .helptext {
    font-size: 12px !important;
    margin-top: 4px;
  }
  /* Submit row : boutons sur 2 lignes si besoin */
  .submit-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px !important;
  }
  .submit-row input, .submit-row a {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   APP_LIST cards (page d'accueil admin custom)
   Les cartes d'app sont en grid auto-fit ; on s'assure que sur mobile
   chaque carte prend toute la largeur et que les liens internes sont
   suffisamment tappables.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app-list, .module-list, .app-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .app-card, .module-card {
    padding: 14px !important;
  }
  .app-card a, .module-card a {
    min-height: 44px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
  }
}