/* ==========================================================================
   La Pecherie Dakaroise - feuille de style principale
   Approche mobile-first. Roboto pour une typographie nette.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marque: bleu ocean, blanc, un accent chaud unique */
  --navy-900: #0b2b40;
  --navy-800: #0f3a55;
  --brand-700: #0a5a83;
  --brand-600: #0d6e9e;
  --brand-500: #1287c4;
  --brand-100: #dceefa;
  --brand-50:  #eef6fb;

  --accent-600: #ea580c;
  --accent-500: #f97316;
  --accent-50:  #fff4ed;

  --ink:      #0f172a;
  --ink-soft: #334155;
  --muted:    #64748b;
  --line:     #e2e8f0;
  --line-soft:#eef2f6;
  --bg:       #f6f8fa;
  --surface:  #ffffff;

  --success: #059669;
  --success-bg: #ecfdf5;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --danger:  #dc2626;
  --danger-bg:  #fef2f2;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  --sh-sm: 0 1px 2px rgba(15,23,42,.06);
  --sh-md: 0 2px 8px rgba(15,23,42,.07);
  --sh-lg: 0 12px 32px rgba(15,23,42,.12);

  --tap: 44px;            /* cible tactile minimale */
  --header-h: 68px;

  --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--navy-900);
  line-height: 1.2;
  letter-spacing: -.02em;      /* typo plus nette */
  font-weight: 700;
}
h1 { font-size: clamp(1.85rem, 5vw, 2.75rem); }
h2 { font-size: clamp(1.45rem, 3.4vw, 2rem); }
h3 { font-size: 1.15rem; }

a { color: var(--brand-600); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--accent-600); }

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

:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-900); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
main { flex: 1; }

/* ---------- 3. En-tete + navigation mobile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,43,64,.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.brand:hover { color: #fff; }
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-text {
  display: flex; flex-direction: column;
  font-weight: 700; font-size: 1.02rem; line-height: 1.1; letter-spacing: -.02em;
}
.brand-text span { font-size: .68rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; opacity: .68; }

.nav-actions { display: flex; align-items: center; gap: 4px; }

/* Panier: icone + compteur d'articles, toujours visible (mobile et desktop) */
.cart-link {
  position: relative; display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  color: #fff; border-radius: var(--r-sm);
  font-size: 1.15rem;
}
.cart-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.cart-badge {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--accent-500); color: #fff;
  border: 2px solid var(--navy-900); border-radius: var(--r-full);
  font-size: .66rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cart-badge[hidden] { display: none; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: var(--tap); height: var(--tap);
  background: transparent; border: 0; cursor: pointer;
  padding: 0 10px; border-radius: var(--r-sm);
}
.nav-toggle-bar {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: #fff; transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

.nav {
  position: absolute; top: 100%; left: 0; right: 0;
  display: none; flex-direction: column; gap: 2px;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--sh-lg);
  padding: 8px;
}
.nav.is-open { display: flex; }

.nav a, .nav-link-btn {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  color: rgba(255,255,255,.9);
  font-size: .95rem; font-weight: 500;
  background: none; border: 0; border-radius: var(--r-sm);
  font-family: inherit; cursor: pointer; text-align: left; width: 100%;
}
.nav a:hover, .nav-link-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav a.is-active { background: rgba(255,255,255,.12); color: #fff; }
.nav-cta {
  background: var(--accent-500) !important; color: #fff !important;
  justify-content: center; font-weight: 700;
  margin-top: 4px;
}
.nav-cta:hover { background: var(--accent-600) !important; }
.nav-form { display: contents; }

/* ---------- 3b. Barre secondaire (admin / compte) ---------- */
.subbar { background: rgba(15,58,85,.96); border-top: 1px solid rgba(255,255,255,.08); }
.subbar--admin { background: var(--brand-700); }

.subbar-inner {
  display: flex; align-items: center; gap: 14px;
  padding-top: 8px; padding-bottom: 8px;
}
.subbar-label {
  display: none; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6); white-space: nowrap;
}

/* Defilement horizontal sur petit ecran: rien ne se comprime. */
.subnav {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
}
.subnav::-webkit-scrollbar { display: none; }

.subnav a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 9px 16px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.82);
  font-size: .88rem; font-weight: 500;
  white-space: nowrap; flex: 0 0 auto;
}
.subnav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.subnav a.is-active { background: #fff; color: var(--navy-900); font-weight: 700; }
.subnav .subnav-exit { margin-left: auto; border: 1px solid rgba(255,255,255,.28); }

/* ---------- 4. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 12px 24px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: inherit; font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; text-align: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-500); color: #fff; }
.btn-primary:hover { background: var(--accent-600); color: #fff; }
.btn-brand { background: var(--brand-600); color: #fff; }
.btn-brand:hover { background: var(--brand-700); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--navy-900); border-color: var(--line); }
.btn-ghost:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-block { width: 100%; }
/* Se presente comme un lien, mais reste un bouton de formulaire: c'est ce qui
   permet a "Commander sans passer par le panier" de partir avec le poids
   saisi, via formaction/formmethod, sans script. */
.btn-link {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--brand-600); font: inherit; text-align: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.btn-link:hover { color: var(--accent-600); }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: .85rem; }
.btn[disabled], .btn:disabled, .btn-disabled {
  background: var(--line); color: var(--muted);
  cursor: not-allowed; pointer-events: none; box-shadow: none;
}

/* ---------- 5. Grilles (min(100%, X) = jamais de debordement) ---------- */
.grid { display: grid; gap: 16px; }

/* Page produit: image + description a gauche, boite de commande collee a droite. */
.product-grid {
  display: grid; gap: 24px; grid-template-columns: 1fr;
  align-items: start; margin-top: 14px;
}
.product-side { order: 2; }
.product-grid > .product-media { order: 1; }
@media (min-width: 900px) {
  .product-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .product-side {
    position: sticky; top: calc(var(--header-h) + 14px);
  }
}
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

/* ---------- 6. Cartes produit (ratio d'image fixe = scan rapide) ---------- */
.card {
  position: relative;               /* ancre l'overlay cliquable ci-dessous */
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--brand-500); }

/* Carte entierement cliquable: le lien du titre s'etend sur toute la carte
   (invisible, meme cible que le titre). Les actions restantes - le bouton
   « Ajouter » - sont remontees au-dessus de l'overlay pour rester utilisables. */
.card-title a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.card-foot .btn { position: relative; z-index: 2; }

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;                 /* ratio uniforme sur toute la grille */
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  display: grid; place-items: center;
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card-media img { transform: scale(1.05); }
.card-media-empty { font-size: 2.4rem; color: var(--brand-500); opacity: .5; }

.card-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--navy-900); color: #fff;
}
.card-badge--out { background: var(--muted); }

.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.card-title { font-size: 1.02rem; color: var(--navy-900); }
.card-title a { color: inherit; }
.card-title a:hover { color: var(--brand-600); }
.card-meta { font-size: .8rem; color: var(--muted); }
.card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Prix = ancre visuelle, fort contraste */
.price { display: flex; flex-direction: column; line-height: 1.15; }
.price-value { font-size: 1.2rem; font-weight: 700; color: var(--navy-900); letter-spacing: -.02em; }
.price-unit { font-size: .7rem; color: var(--muted); font-weight: 400; }
.price-retailer { font-size: .74rem; color: var(--accent-600); font-weight: 500; margin-top: 2px; }

.pill { display: inline-block; padding: 3px 9px; border-radius: var(--r-full); font-size: .74rem; font-weight: 600; }
.pill-ok     { background: var(--success-bg); color: var(--success); }
.pill-low    { background: var(--warning-bg); color: var(--warning); }
.pill-out    { background: var(--line-soft); color: var(--muted); }
.pill-brand  { background: var(--brand-50); color: var(--brand-700); }

/* ---------- Etiquettes de produit ----------
   Un meme habillage pour la saisie (liste de pastilles avec croix de
   retrait) et pour l'affichage public (pastilles cliquables). */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list:empty { display: none; }
.tag-list--static { margin-top: 12px; }

.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--brand-100);
  font-size: .78rem; font-weight: 600; line-height: 1.4;
}
a.tag-pill:hover { background: var(--brand-100); border-color: var(--brand-500); }

.tag-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; margin-right: -3px;
  background: none; border: 0; border-radius: 50%;
  color: var(--brand-700); font-size: .7rem; cursor: pointer;
}
.tag-remove:hover { background: var(--brand-100); color: var(--navy-900); }

/* Champ de saisie: les pastilles se rangent au-dessus de la saisie en cours. */
.tag-field {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.tag-field:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(18,135,196,.14); }
.tag-field .tag-list { padding: 0; margin: 0; list-style: none; }
.tag-field input[type="text"] { min-height: var(--tap); padding: 6px 4px; border: 0; }
.tag-field input[type="text"]:focus { box-shadow: none; }

.chip--tag { min-height: 34px; padding: 4px 12px; font-size: .8rem; }

/* ---------- 7. En-tete de page / section ---------- */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line);  padding: 10px; }
.page-head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 20px 0;
}
.page-head h1 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); }
.page-head p { color: var(--muted); font-size: .95rem; margin-top: 4px; }

.section { padding: 28px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head p { color: var(--muted); font-size: .92rem; }

.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 12px 0 20px;
}

/* Filtres de la boutique: formulaire GET complet (fonctionne sans JS) */
.filters {
  display: flex; flex-direction: column; gap: 18px;
  padding: 16px 0 18px;
}
/* Barre de recherche de la boutique: champ et boutons sur une seule ligne.
   Elle reste collee sous l'en-tete (lui-meme sticky) pour suivre le
   defilement, sinon les filtres disparaissent des que l'on descend. */
.filters-row {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.filters-row--sticky {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: var(--bg);
  padding: 10px 0;
  margin: -10px 0;
}
.filters-row .btn,
.filters-row .filters-search input {
  min-height: var(--tap);
}
.filters-search { flex: 1 1 260px; min-width: 0; }

/* Panneau repliable: les controles se repartissent en grille, chaque champ
   garde la meme largeur quelle que soit la taille de l'ecran. */
.filters-advanced[hidden] { display: none; }
.filters-advanced {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 16px;
  align-items: end;
}
.filters-grid .btn { width: 100%; }
.filters-field { display: flex; flex-direction: column; min-width: 0; }
.btn.is-active {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
}
.filters-field > label {
  display: block; margin-bottom: 5px;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
/* Champs et boutons partagent la meme hauteur: la ligne de filtres
   (align-items: flex-end) reste sinon desalignee, car .btn-sm ramene les
   boutons a 38px et le padding des champs les pousse au-dela de 44px. */
.filters input, .filters select, .filters .btn {
  height: var(--tap);
  min-height: var(--tap);
}
.filters input, .filters select { padding: 8px 14px; }

/* Recherche + pagination des listes d'administration */
.list-search {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 0 0 20px;
}
.list-search-field { flex: 1 1 260px; min-width: 0; }
/* Meme regle de hauteur que .filters, pour un alignement identique. */
.list-search input, .list-search .btn { height: var(--tap); min-height: var(--tap); }
.list-search input { padding: 8px 14px; }

/* Barre d'outils au-dessus du tableau des commandes: acces aux archives et
   impression pour la comptabilite. */
.list-tools {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 10px 0 16px; border-top: 1px solid var(--line);
}
.list-tools-note { color: var(--muted); font-size: .85rem; margin: 0; }

/* Bloc d'en-tete resserve a l'impression des etats de commandes. */
.print-title { display: none; }

.pager {
  display: flex; gap: 12px 16px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  padding: 20px 0 4px;
}
.pager-info { margin: 0; color: var(--muted); font-size: .88rem; }
.pager-info strong { color: var(--ink); font-weight: 600; }
.pager-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pager-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--ink);
  font-size: .86rem; font-weight: 500; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.pager-link:hover { background: var(--brand-50); border-color: var(--brand-600); }
.pager-link.is-active {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff;
}
.pager-link.is-disabled { opacity: .4; pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--muted); }

/* Boutique: la navigation existe en haut et en bas de la liste de produits.
   En haut elle est centree et discrete, elle evite de remonter en haut de
   page apres avoir parcouru les cartes; en bas elle reprend le compte rendu. */
.pager--top { justify-content: center; padding: 0 0 24px; }
.pager--bottom { padding: 28px 0 8px; }

.result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 0 18px; margin-bottom: 4px;
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--muted);
}
.result-bar strong { color: var(--navy-900); }

/* Bascule grille / liste: icones grisees au repos, mode actif en teinte
   sombre. Placee a droite de la barre de resultats, en haut de la liste. */
.view-toggle { display: inline-flex; gap: 6px; }
.view-toggle-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: transparent; color: var(--muted);
  font-size: .95rem; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.view-toggle-btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
.view-toggle-btn.is-active {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}

/* Vue en liste: ligne moderne — vignette carree a gauche, identite (nom /
   espece / categorie) au centre, prix + action alignes a droite. Le survol
   teinte la ligne au lieu de la soulever, pour un balayage rapide. */
.product-grid[data-view="list"] { grid-template-columns: 1fr; gap: 10px; }
.product-grid[data-view="list"] .card {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  grid-template-areas: "thumb body actions";
  align-items: center;
  gap: 18px;
  padding: 10px;
  transition: background .15s ease, border-color .15s ease;
}
.product-grid[data-view="list"] .card:hover { transform: none; background: var(--brand-50); }
.product-grid[data-view="list"] .card-media {
  grid-area: thumb;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  min-height: 0;
}
.product-grid[data-view="list"] .card-body {
  grid-area: body;
  justify-content: center;
  padding: 4px 0;
  gap: 4px;
}
.product-grid[data-view="list"] .card-title { font-size: 1.05rem; }
.product-grid[data-view="list"] .card-foot {
  grid-area: actions;
  margin: 0; padding: 0;
  flex-direction: column; align-items: stretch;
  gap: 10px;
  min-width: 150px;
}

/* Puces de filtre (plus lisibles qu'un long <select> sur mobile) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: .87rem; font-weight: 500; color: var(--ink-soft);
}
.chip:hover { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-50); }
.chip.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.chip-count { font-size: .75rem; opacity: .7; }

/* ---------- 8. Formulaires ---------- */
.form-group { margin-bottom: 16px; }
.form-group > label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.form-hint { display: block; margin-top: 6px; font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* Champ telephone international (intl-tel-input): le conteneur injecte par
   le plugin doit s'etaler comme les autres champs du formulaire. L'ecart a
   gauche est gere par le plugin lui-meme (padding-left en inline). */
.iti { width: 100%; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; min-height: var(--tap);
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit; font-size: 1rem; color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(18,135,196,.14);
}
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand-600); cursor: pointer; }

.check-row {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.check-row strong { font-size: .9rem; }

.alert { padding: 12px 16px; border-radius: var(--r-sm); font-size: .9rem; margin-bottom: 16px; border: 1px solid; }
.alert-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: #fecaca; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: #a7f3d0; }
.alert-info    { background: var(--brand-50);   color: var(--brand-700); border-color: var(--brand-100); }

/* ---------- 9. Panneau / formulaire centre ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--sh-sm);
}
.panel-narrow { max-width: 460px; margin: 0 auto; }
.panel-mid { max-width: 820px; margin: 0 auto; }
.panel-head { text-align: center; margin-bottom: 22px; }
.panel-head h2 { font-size: 1.4rem; }
.panel-head p { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.auth-wrap { padding: 28px 0; }

.auth-mark {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
  color: #fff; font-size: 1.5rem;
}

/* ---------- 10. Tableaux -> cartes sur mobile ---------- */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th {
  background: var(--navy-900); color: #fff;
  padding: 12px 14px; text-align: left;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: .9rem; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--brand-50); }
.cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.thumb { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; background: var(--brand-50); }

/* ---------- 11. Etats vides ---------- */
.empty { text-align: center; padding: 48px 20px; }
.empty-mark {
  width: 68px; height: 68px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-50); color: var(--brand-500); font-size: 1.7rem;
}
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--muted); font-size: .92rem; max-width: 380px; margin: 0 auto 18px; }

/* ---------- 12. Pied de page ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.72); padding: 34px 0 20px; margin-top: 36px; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer p { font-size: .88rem; }
.site-footer a { display: block; color: rgba(255,255,255,.72); font-size: .88rem; padding: 5px 0; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 26px; grid-template-columns: 1fr; margin-bottom: 24px; }
.copyright { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; text-align: center; font-size: .8rem; }

/* ---------- 13. Blocs specifiques ---------- */
.order-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--sh-sm); }
.order-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.order-ref { font-weight: 700; color: var(--navy-900); font-size: .95rem; }

.timeline { position: relative; padding-left: 26px; list-style: none; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding-bottom: 18px; }
.timeline li::before {
  content: ''; position: absolute; left: -25px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-500); border: 2px solid var(--surface);
}
.timeline li.done::before { background: var(--success); }
.timeline .t-date { font-size: .75rem; color: var(--muted); }
.timeline .t-text { font-weight: 600; font-size: .9rem; }

.fake-pay { max-width: 460px; margin: 28px auto; text-align: center; }
.fake-amount { font-size: 2.1rem; font-weight: 900; color: var(--accent-600); letter-spacing: -.03em; margin: 14px 0; }

.cat-card {
  display: block; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; text-align: center; color: inherit;
  box-shadow: var(--sh-sm); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cat-card:hover { color: inherit; box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--brand-500); }
.cat-card i { font-size: 1.8rem; color: var(--brand-500); margin-bottom: 10px; }
.cat-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.cat-card p { font-size: .82rem; color: var(--muted); }

.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; text-align: center; }
.stat b { display: block; font-size: 1.5rem; color: var(--navy-900); letter-spacing: -.02em; }
.stat span { font-size: .78rem; color: var(--muted); }

.stat-ico {
  width: 40px; height: 40px; margin: 0 auto 10px;
  display: grid; place-items: center; border-radius: var(--r-md);
  font-size: 1.05rem; color: #fff;
}
.stat-ico--a { background: linear-gradient(140deg, var(--brand-500), var(--brand-700)); }
.stat-ico--b { background: linear-gradient(140deg, var(--accent-500), var(--accent-600)); }
.stat-ico--c { background: linear-gradient(140deg, var(--brand-600), var(--navy-800)); }
.stat-ico--d { background: linear-gradient(140deg, #10b981, var(--success)); }
.stat-n { font-size: 1.5rem; font-weight: 700; color: var(--navy-900); letter-spacing: -.02em; line-height: 1.1; }
.stat-t { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* Paires cle/valeur (recap de commande, fiche utilisateur) */
.kv-grid { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.kv {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
}
.kv:nth-child(odd) { background: var(--bg); }
.kv-k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.kv-v { font-size: .92rem; font-weight: 600; color: var(--navy-900); text-align: right; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82em; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px;
}

/* ---------- 14. Points de rupture ---------- */
/* Ecran large : navigation horizontale, tables reelles, colonnes multiples */
@media (min-width: 640px) {
  .container { padding: 0 24px; }
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .panel { padding: 28px; }
  .section { padding: 36px 0; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }

  .nav {
    position: static; display: flex !important;
    flex-direction: row; align-items: center; gap: 4px;
    background: none; border: 0; box-shadow: none; padding: 0;
  }
  .nav a, .nav-link-btn { width: auto; padding: 11px 18px; font-size: .9rem; }
  .nav-cta { margin: 0 0 0 6px; padding: 11px 20px; }
  .nav-form { display: block; }

  .subbar-label { display: flex; }
  .subnav { width: auto; flex: 1; }

  .grid { gap: 20px; }

  /* Colonnes multiples, modele en tableau */
  .table-scroll table, table.responsive { display: table; width: 100%; }
  thead { display: table-header-group; }
  tbody tr { display: table-row; }
  tbody tr:hover td { background: var(--brand-50); }
  td { display: table-cell; }
  td::before { content: none !important; }
}

/* Petit telephone */
@media (max-width: 480px) {
  :root { --header-h: 60px; }
  .container { padding: 0 14px; }
  .brand-text { font-size: .95rem; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; font-size: .95rem; }
  .panel { padding: 18px 16px; border-radius: var(--r-lg); }
  .section { padding: 22px 0; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .card-foot .btn { width: 100%; }
  .product-grid[data-view="list"] .card { grid-template-columns: 1fr; grid-template-areas: "thumb" "body" "actions"; }
  .product-grid[data-view="list"] .card-media { aspect-ratio: 4 / 3; }
  .product-grid[data-view="list"] .card-foot { min-width: 0; }
  .btn { padding: 12px 18px; }

  /* Chaque ligne de tableau devient une carte empilee */
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr {
    border: 1px solid var(--line); border-radius: var(--r-md);
    margin: 10px; padding: 4px 0; background: var(--surface);
  }
  table.responsive td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    border: 0; padding: 8px 14px; text-align: right;
  }
  table.responsive td::before {
    content: attr(data-label);
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); text-align: left; flex: 0 0 auto;
  }
  table.responsive .cell-actions { justify-content: flex-end; }
  table.responsive .thumb { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Impression des reçus / détails de commande ---------- */
/* L'en-tête société n'est visible qu'à l'impression (cacher aussi navbar/pied). */
.print-header { display: none; }

@media print {
  .print-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 2px solid #000;
    padding: 0 0 10px;
    margin: 0 0 16px;
    color: #000;
    font-size: 13px;
  }
  .print-header .ph-brand strong { display: block; font-size: 18px; line-height: 1.2; }
  .print-header .ph-brand span { font-size: 12px; }
  .print-header .ph-contact { display: flex; flex-direction: column; gap: 2px; text-align: right; }
  .site-header, .site-footer, #navToggle, .btn { display: none !important; }
  body { background: #fff !important; color: #000; }
  a { color: #000; text-decoration: none; }
  .panel { border: none !important; box-shadow: none !important; page-break-inside: avoid; }
  .pill { border: 1px solid #888; }
  .price-value, .order-ref { color: #000; }
  /* Etats de commandes: on imprime le tableau seul, avec son en-tete
     societe (print-header) et un titre date porte sur l'enveloppe. */
  .print-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin: 14px 0 10px;
  }
  .list-search, .list-tools, .pager, .list-tools-note { display: none !important; }
  .no-print { display: none !important; }
  .table-wrap { box-shadow: none !important; overflow: visible !important; }
  .table-scroll { overflow: visible !important; }
  table { width: 100% !important; border-collapse: collapse; }
  .section { padding: 12px 0; }
}

/* ==========================================================================
   Filtres des listes d'administration + fidelite clients
   ========================================================================== */

/* Barre de filtres des commandes (statut, paiement, dates, contact). */
.list-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 0 0 16px;
}
.list-filters-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.list-filters-field label {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.list-filters-field input, .list-filters-field select {
  height: var(--tap); min-height: var(--tap);
  padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface);
  font: inherit; color: var(--ink);
}
.list-filters-field input:focus, .list-filters-field select:focus {
  outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: var(--brand-500);
}
.list-filters-field--wide { flex: 1 1 220px; }
.list-filters .btn { height: var(--tap); min-height: var(--tap); }

/* Actions d'en-tete: export Excel a cote de l'impression. */
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Fidelite clients: etoiles, rang, graphiques. */
.stars { display: inline-flex; gap: 2px; font-size: .95rem; line-height: 1; }
.star.is-on { color: #f5a623; }
.star.is-off { color: #d8e0e8; }
.rank-badge {
  display: inline-grid; place-items: center; min-width: 34px; height: 26px;
  padding: 0 8px; border-radius: var(--r-full);
  background: var(--line-soft); color: var(--ink-soft);
  font-size: .78rem; font-weight: 700;
}
.rank-badge.is-top { background: linear-gradient(140deg, #f5a623, var(--accent-500)); color: #fff; }
.contact-line { font-size: .85rem; color: var(--ink-soft); }
.contact-line i { color: var(--muted); width: 16px; display: inline-block; text-align: center; }
.fidelity-table td .pill { margin-left: 6px; }
.chart-box { position: relative; height: 260px; }
.fidelity-charts { margin-top: 20px; }
.fidelity-legend { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; }

/* Fidelite: les deux graphiques du haut occupent chacun la moitie de la
   largeur (colonne 6 sur 12) des le premier point de rupture, une seule
   colonne en dessous. */
.grid.fidelity-charts { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid.fidelity-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tableau de bord: la barre de filtres s'etire sur toute la largeur, les
   champs se repartissent également; sous 480px ils reprennent la mise en
   pile de .list-filters (regle generale du media query plus bas). */
.list-filters--spread .list-filters-field { flex: 1 1 180px; }

/* Graphiques de ventes du tableau de bord: courbe 75 % / camembert 25 %
   sur grand ecran, empiles quand l'ecran est etroit. */
.grid.sales-charts { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .grid.sales-charts { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
}

/* Recherche de clients: marge avec les cartes au-dessus, champ plus
   confortable (le seul champ de la page). */
.fidelity-search { margin-top: 18px; }
.fidelity-search input { padding: 12px 18px; }

/* Le nom du classement ouvre la liste des commandes du client. */
.customer-orders-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted var(--line);
}
.customer-orders-link:hover, .customer-orders-link:focus-visible {
  color: var(--brand-500); border-bottom-color: var(--brand-500);
}

/* ---------- Notifications de commande (administration) ----------

   La zone est fixee en bas a droite de l'ecran: la cloche y reste
   visible quelle que soit la page d'administration ouverte, et le panneau
   se deploye au-dessus d'elle.

   La zone ne capte pas les clics (elle ne doit pas masquer la page) et
   sa hauteur est bornee a l'ecran: le panneau se deploye vers le haut et
   defile si la liste est longue, il ne sort donc jamais de l'ecran. */
.notif-zone {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  pointer-events: none;
}
/* `display` l'emporte sur l'attribut `hidden` du navigateur: sans cette
   regle, la zone resterait visible (et la zone de son aussi). */
.notif-zone[hidden] { display: none; }
.notif-zone > * { pointer-events: auto; }

.notif-bell {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface); color: var(--navy-900);
  box-shadow: var(--sh-lg); cursor: pointer;
  font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: transform .15s ease, color .15s ease;
}
.notif-bell:hover { color: var(--brand-600); transform: translateY(-1px); }
.notif-bell.has-unread { color: var(--accent-600); }
.notif-bell.has-unread::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: var(--r-full); border: 2px solid var(--accent-500);
  animation: notif-pulse 1.6s ease-out infinite;
}
@keyframes notif-pulse {
  0%   { transform: scale(.9); opacity: .9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--accent-600); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 22px; text-align: center;
}

/* Panneau repliable: la liste des commandes recues. Il s'ouvre sous la
   cloche et reste borne a la hauteur disponible, sinon il sortirait de
   l'ecran par le bas. */
.notif-panel {
  width: min(360px, calc(100vw - 36px));
  flex: 0 1 auto; min-height: 0;
  max-height: min(56vh, 420px); overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.notif-panel-head strong { color: var(--navy-900); font-size: .9rem; }
.notif-panel-actions { display: flex; align-items: center; gap: 6px; }
.notif-clear {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: var(--r-sm); padding: 4px 10px;
  font-family: inherit; font-size: .75rem; font-weight: 600; cursor: pointer;
}
.notif-clear:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.notif-close {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 1rem; padding: 4px 6px; border-radius: var(--r-sm);
}
.notif-close:hover { background: var(--line-soft); color: var(--navy-900); }

.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { border-bottom: 1px solid var(--line-soft); }
.notif-item:last-child { border-bottom: 0; }
.notif-item-link {
  display: block; padding: 12px 16px; color: inherit; text-decoration: none;
}
.notif-item-link:hover { background: var(--brand-50); }
.notif-item.is-unread .notif-item-link { background: var(--accent-50); }
.notif-item.is-unread .notif-item-top strong { color: var(--accent-600); }
.notif-item-top { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.notif-item-amount { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.notif-item-bottom { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.notif-empty { padding: 18px 16px; color: var(--muted); font-size: .85rem; }

.notif-sound-hint {
  margin: 0; padding: 8px 16px; background: var(--warning-bg);
  color: var(--warning); font-size: .78rem;
  display: flex; align-items: center; gap: 8px;
}
.notif-sound-hint[hidden] { display: none; }
.notif-sound-hint button {
  border: 1px solid currentColor; background: none; color: inherit;
  border-radius: var(--r-sm); padding: 3px 8px; font-size: .75rem; cursor: pointer;
  font-family: inherit; font-weight: 600;
}

/* Bannettes du coin: elles s'empilent et se referment seules. Leur nombre
   est borne (voir le script) pour qu'elles ne poussent pas le panneau hors
   de l'ecran. */
.notif-toasts {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  width: min(340px, calc(100vw - 36px));
  flex: 0 1 auto; min-height: 0;
  max-height: 26vh; overflow: hidden;
}
.notif-toast {
  display: block; width: 100%;
  background: var(--navy-900); color: #fff;
  border-radius: var(--r-md); padding: 12px 16px; text-decoration: none;
  box-shadow: var(--sh-lg);
  animation: notif-in .25s ease-out;
}
.notif-toast:hover { color: #fff; background: var(--navy-800); }
.notif-toast strong { display: block; font-size: .9rem; }
.notif-toast span { font-size: .78rem; opacity: .8; }
@keyframes notif-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (max-width: 480px) {
  /* Sur telephone, la zone se colle aux bords (encoche et barre de
     navigation) et le panneau occupe toute la largeur utile: il doit
     tenir dans l'ecran, sinon il deborde et masque la page.

     L'ordre reste celui du bureau (cloche, puis panneau, puis
     bannettes): la zone est ancree en bas, donc tout le bloc tient dans
     l'ecran et le panneau ne sort jamais par le bas. */
  .notif-zone {
    right: 0; bottom: 0;
    left: 0; align-items: stretch;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    max-height: 100vh; max-height: 100dvh;
    gap: 8px;
  }
  .notif-bell {
    width: 46px; height: 46px;
    align-self: flex-end;
  }
  .notif-panel {
    width: 100%;
    max-height: min(55vh, 360px);
    border-radius: var(--r-md);
  }
  .notif-toasts {
    width: 100%;
    max-height: 30vh;
  }
  .notif-toast { width: 100%; }
}

/* ---------- Fenetre d'export des commandes ---------- */
/* `margin: auto` re-centre la fenetre: la regle universelle du fichier
   (`* { margin: 0 }`) ecrase la marge automatique que le navigateur
   applique aux <dialog> modaux, et la fenetre partait dans le coin. */
.export-dialog {
  border: 0; padding: 0; margin: auto;
  width: min(620px, 94vw); max-width: 94vw;
  border-radius: var(--r-lg); background: var(--surface); color: inherit;
  box-shadow: 0 26px 70px rgba(2, 12, 27, .35);
}
.export-dialog::backdrop { background: rgba(2, 12, 27, .55); }
.export-dialog-form {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px;
}
.export-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.export-dialog-head h2 {
  margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px;
}
.export-dialog-head h2 i { color: var(--success); }
.export-dialog-close {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.export-dialog-close:hover { color: var(--navy-900); border-color: var(--brand-500); }
.export-dialog-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.export-dialog-field--wide { grid-column: 1 / -1; }
.export-dialog-actions {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.export-dialog-actions .btn { min-height: var(--tap); }

@media (max-width: 480px) {
  .list-filters-field { flex: 1 1 100%; }
  .list-filters .btn { flex: 1 1 100%; }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { flex: 1 1 auto; }
}