/* Cetic-Tricycle — design-system tokens and component classes.
   V2 aux couleurs de CETIC GROUP : bleu du logo (#1E90FF) en accent,
   vert du logo (#28C840) en accent secondaire, police Poppins,
   coins arrondis, ombres douces.
   La police est chargée par un <link> dans base.html (plus rapide qu'un @import). */

:root {
  --color-bg: #f2f5f9;
  --color-surface: #ffffff;
  --color-text: #14213a;
  --color-accent: #0f78e0;
  --color-accent-2: #28c840;
  --color-divider: #dde3ec;

  /* Bandeau d'en-tête de l'espace gérant */
  --color-brand-band: #0a5cb8;

  --color-neutral-100: #f9f9f9;
  --color-neutral-200: #f3f3f3;
  --color-neutral-300: #eaeaea;
  --color-neutral-400: #d6d6d6;
  --color-neutral-500: #868686;
  --color-neutral-600: #676767;
  --color-neutral-700: #4d4d4d;
  --color-neutral-800: #454545;
  --color-neutral-900: #2b2b2b;

  --color-accent-100: #e8f3ff;
  --color-accent-200: #cfe6ff;
  --color-accent-300: #9fcdff;
  --color-accent-400: #5fadff;
  --color-accent-500: #1e90ff;
  --color-accent-600: #0b68c4;
  --color-accent-700: #0a5cb8;
  --color-accent-800: #0a4a91;
  --color-accent-900: #0b3a6c;

  --color-accent-2-100: #e9f9ec;
  --color-accent-2-200: #c8f0d0;
  --color-accent-2-300: #9fe3ab;
  --color-accent-2-400: #5fd471;
  --color-accent-2-500: #28c840;
  --color-accent-2-600: #1fa634;
  --color-accent-2-700: #18842a;
  --color-accent-2-800: #146b22;
  --color-accent-2-900: #0f511a;

  /* Couleurs de statut : toujours le même sens dans toute l'app.
     succès = validé / au magasin, attention = à confirmer / en attente,
     danger = panne / refus / suppression, info = en course / sorti. */
  --color-success-bg: #e9f9ec;
  --color-success-border: #9fe3ab;
  --color-success-text: #146b22;
  --color-warning-bg: #fff4d6;
  --color-warning-border: #f5d48a;
  --color-warning-text: #7a5200;
  --color-danger: #d92d20;
  --color-danger-hover: #b42318;
  --color-danger-bg: #fdecec;
  --color-danger-border: #f3b4b4;
  --color-danger-text: #9b1c1c;
  --color-info-bg: #e8f3ff;
  --color-info-border: #cfe6ff;
  --color-info-text: #0a4a91;

  --font-heading: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading-weight: 700;

  /* Échelle typographique unique — ne pas écrire de font-size en dur dans
     les pages, utiliser ces variables (ou les balises h1–h4). */
  --fs-display: 32px;  /* gros chiffres : stats, montants mis en avant */
  --fs-h1: 26px;       /* titre de page, identique partout */
  --fs-h2: 19px;       /* titre de bloc */
  --fs-h3: 18px;       /* sous-titre de bloc */
  --fs-h4: 16px;       /* nom dans une liste, intitulé fort */
  --fs-body: 15px;     /* texte courant, tableaux */
  --fs-small: 13px;    /* libellés, badges, méta — taille minimale de lecture */
  --font-body: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation — ombres douces. */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.2; letter-spacing: 0; margin: 0 0 var(--space-2);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-body); }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.06em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: var(--color-neutral-700);
}
.text-muted { color: var(--color-neutral-700); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 16px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 13px 24px;
  border-radius: var(--radius-md);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-accent-600); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--color-accent-700); transform: scale(0.98); }
.btn-secondary { border-color: var(--color-divider); background: var(--color-surface); }
.btn-secondary:hover { background: var(--color-neutral-100); border-color: var(--color-neutral-400); }
.btn-secondary:active { background: var(--color-neutral-200); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-2); border-radius: var(--radius-md); }
.btn-ghost:hover { background: var(--color-accent-100); }
.btn-ghost:active { background: var(--color-accent-200); }
.btn-danger { background: var(--color-danger); color: #fff; box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-danger-ghost { color: var(--color-danger-text); padding-inline: var(--space-2); border-radius: var(--radius-md); }
.btn-danger-ghost:hover { background: var(--color-danger-bg); }
.btn-danger-outline { border-color: var(--color-danger-border); color: var(--color-danger-text); background: var(--color-surface); }
.btn-danger-outline:hover { background: var(--color-danger-bg); }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: center; text-align: center; }

/* — forms — */
.field > label {
  display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px;
  color: var(--color-neutral-700);
}
.input {
  width: 100%; min-width: 0; min-height: 52px; padding: 12px 16px; font: inherit;
  font-size: 17px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:hover { border-color: var(--color-neutral-500); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; box-shadow: 0 0 0 3px var(--color-accent-100); }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden; max-width: 100%;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.seg-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 auto; min-width: 0; text-align: center;
  padding: 11px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
}
/* .seg-plein : prend toute la largeur, options de même taille */
.seg-plein { display: flex; width: 100%; }
.seg-plein .seg-opt { flex: 1 1 auto; min-width: min-content; padding-inline: 10px; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-neutral-100); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 700; }
.card-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: var(--color-neutral-600);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0; padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }
.tag-success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.tag-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.tag-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text);  border: 1px solid var(--color-danger-border); }
.tag-info    { background: var(--color-info-bg);    color: var(--color-info-text);    border: 1px solid var(--color-info-border); }

/* Chiffres à largeur fixe : les montants s'alignent en colonne. */
.table, .stat-value, .num { font-variant-numeric: tabular-nums; }
.text-danger { color: var(--color-danger-text); }
/* Enveloppe de tableau : défilement horizontal sur petit écran au lieu de déborder. */
.table-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.text-success { color: var(--color-success-text); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-neutral-600);
  padding: 14px var(--space-4); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: 16px var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: var(--color-neutral-100); }
/* Tableau dense pour les panneaux étroits (ex. « Recettes récentes »). */
.table-compacte th, .table-compacte td { padding-left: 8px; padding-right: 8px; }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: rgba(20, 20, 20, 0.5);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  max-height: calc(100vh - 32px); overflow-y: auto;
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — champ fichier (voir templates/tricycles/_champ_fichier.html) — */
.fichier {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; min-height: 76px; cursor: pointer;
  background: var(--color-surface); border: 1.5px dashed var(--color-accent-300);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.fichier:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
.fichier-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
.fichier:has(.fichier-input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fichier-apercu {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--color-accent-100); color: var(--color-accent-700);
}
.fichier-apercu img { width: 100%; height: 100%; object-fit: cover; }
.fichier-texte { display: flex; flex-direction: column; min-width: 0; }
.fichier-titre { font-size: 15px; font-weight: 600; color: var(--color-text); }
.fichier-requis { color: var(--color-danger-text); }
.fichier-nom {
  font-size: var(--fs-small); color: var(--color-neutral-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fichier-ok {
  display: none; margin-left: auto; flex: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success-text);
}
.fichier.rempli { border-style: solid; border-color: var(--color-success-border); background: var(--color-surface); }
.fichier.rempli .fichier-nom { color: var(--color-success-text); font-weight: 600; }
.fichier.rempli .fichier-ok { display: flex; }

/* ══════════════════════════════════════════════════════════════════════════
   Classes de mise en page communes — remplacent les styles en ligne répétés
   dans les templates. À utiliser plutôt que style="…" dans les nouvelles pages.
   ══════════════════════════════════════════════════════════════════════ */

/* Texte */
.num, .table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fort { font-weight: 700; }
.attenue { color: var(--color-neutral-600); }
.accent { color: var(--color-accent-700); }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }

/* En-tête de page (titre + éventuelles actions à droite) */
.entete-page { padding: 40px 40px 24px; }
.entete-page-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Panneau blanc de contenu ; .panneau-page lui donne les marges de page */
.panneau {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px;
}
.panneau-page { margin: 0 40px 40px; }
.panneau-page-serre { margin-bottom: 32px; }

/* Cadre arrondi (contenu collé aux bords : photos, listes, cartes chauffeur) */
.cadre {
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.cadre-blanc { background: var(--color-surface); }
.cadre-plat { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; }

/* Carte de formulaire (modifier tricycle, chauffeur, recette…) */
.carte-form {
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; padding: 28px; display: flex; flex-direction: column; gap: 16px;
}

/* Page centrée (connexion, inscription, OTP) et colonne de l'espace chauffeur */
.page-centree { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px; }
.colonne-chauffeur { max-width: 480px; margin: 0 auto; padding: 24px 20px 60px; }

/* Ligne libellé / valeur (fiches) */
.ligne-info {
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--color-divider); padding: 12px 0; font-size: 14px;
}
.valeur-info { font-weight: 700; font-size: 18px; margin-top: 4px; }

/* Rangées */
.rangee { display: flex; gap: 12px; }
.rangee-centre { align-items: center; }

@media (max-width: 760px) {
  .entete-page { padding: 24px 20px 16px; }
  .panneau-page { margin: 0 12px 20px; }
  .panneau { padding: 20px; }
  .carte-form { padding: 20px; }
  .page-centree { padding: 20px 16px; }
  .rangee { flex-wrap: wrap; }
}

/* Grilles qui se replient sur téléphone. Leurs colonnes de bureau sont
   encore écrites en style inline dans certains templates, d'où le
   !important (une règle CSS ne peut pas battre un style inline sans lui). */
@media (max-width: 960px) {
  .grille-repliable { grid-template-columns: minmax(0, 1fr) !important; }
  .grille-repliable.detail-page { padding: 20px 12px 24px !important; }
}
@media (max-width: 760px) {
  .grille-photos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .marges-page-mobile { margin-left: 12px !important; margin-right: 12px !important; }
}
@media (max-width: 560px) {
  .stat-value { font-size: 24px; }
}