/* ══════════════════════════════════════════════════════════════════════
   css/admin-modules.css — les ecrans du pipeline, et eux seuls.

   Separe de css/admin.css le 14/09/2026, temps 2 de l extraction.

   Ce fichier contient ce qui n appartient qu a admin.html : filtres de
   pipeline, onglets de la vue d ensemble, bandeau de statut du dossier,
   calendrier, finance, coupons, templates, galerie, barre laterale. Les six
   autres pages de l espace pro n en ont aucun usage — elles chargeaient 60 Ko
   de regles dont aucun selecteur ne correspondait a leur balisage.

   ORDRE DE CHARGEMENT, ET C EST L INVARIANT DU FICHIER :
   admin.html charge admin-modules.css PUIS admin.css, exactement dans cet
   ordre. C est celui qu avait le bloc <style> d origine. La DA ne gagne que
   parce qu elle vient EN DERNIER ; inverser les deux liens rendrait la main a
   des dizaines de regles anciennes, sans qu aucune erreur ne le signale.
   ══════════════════════════════════════════════════════════════════════ */

/* ============ ICONES ============
   Un sprite SVG servi depuis notre domaine (assets/icones.svg, genere par
   scripts/generer-sprite-icones.mjs). Les emoji ont ete retires : ils changent
   de dessin d'un appareil a l'autre, refusent la couleur du theme, et font
   bricolage sur un outil que Helmi montre a ses clients.

   `currentColor` : l'icone prend la couleur du texte autour d'elle, donc elle
   suit le theme clair/sombre sans une seule regle en plus. */
.ic {
  width: 1em; height: 1em;
  flex: none;
  vertical-align: -0.14em;
  pointer-events: none;
}
.ic--lg { width: 1.35em; height: 1.35em; }
.ic--xl { width: 1.9em; height: 1.9em; }
.ic--ok   { color: var(--success, #4CAF50); }
.ic--ko   { color: var(--danger, #E8654F); }
.ic--warn { color: var(--gold, #D4AF37); }

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0F0E0D; --bg-card: #1B1714; --bg-warm: #F5F1EA;
  --gold: #D4AF37; --gold-soft: #A88928;
  --text: #F5F1EA; --text-muted: #A09B92;
  --success: #4CAF50; --warning: #FFA726; --danger: #E8654F;
  --border: #3C342E; --border-soft: #E8E3DA;
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  background: #F5F1EA; color: #1B1714; font-size: 14px; line-height: 1.5; min-height: 100vh;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

.admin-header {
  background: var(--bg); color: var(--text); padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 100;
  flex-wrap: wrap;
}
.admin-header__brand img { height: 38px; display: block; }

/* Onglets premium pills */
.admin-tabs { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.admin-tab {
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: rgba(212,175,55,0.08); color: #A09B92; border: 1px solid transparent;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: all 180ms ease; white-space: nowrap;
}
.admin-tab:hover { background: rgba(212,175,55,0.18); color: var(--gold); border-color: rgba(212,175,55,0.3); }
.admin-tab.active { background: var(--gold); color: var(--bg); box-shadow: 0 2px 12px rgba(212,175,55,0.4); }

.admin-header__right { display: flex; align-items: center; gap: 8px; }
/* `.btn-icon` retiree le 26/09/2026 : declaree ici et recopiee dans
   admin-blog.html et admin-newsletter.html, utilisee NULLE PART. Elle
   cumulait trois griefs de DESIGN.md — la pastille ronde, l or dilue en
   fond, et une cible de 38 px la ou la regle dit 44. Une classe morte qui
   porte trois interdits est la premiere a partir. */

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .admin-header { padding: 8px 12px; }
  .admin-header__brand img { height: 32px; }
  .admin-tabs { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; padding: 4px 2px 2px; gap: 4px; -webkit-overflow-scrolling: touch; }
  .admin-tab { padding: 7px 12px; font-size: 12px; flex-shrink: 0; }
  .admin-main { padding: 16px 12px !important; }
  .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .kpi-card { padding: 12px !important; }
  .kpi-card__value { font-size: 22px !important; }
  .toolbar { flex-direction: row; flex-wrap: wrap; align-items: center !important; gap: 8px; margin-bottom: 10px; }
  .toolbar h1 { font-size: 18px !important; margin-right: auto !important; }
  .toolbar input[type="search"] { width: 100% !important; min-width: 0 !important; }
  .kanban { grid-template-columns: 78vw !important; gap: 8px; padding-bottom: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .col { scroll-snap-align: start; }
  /* 100dvh ET NON 100vh : sur iOS, 100vh compte la hauteur SANS la barre
     d adresse. Une modale a 100vh depasse donc l ecran reel de pres de
     90 px, et le bas — la ou sont les boutons — n est jamais atteignable,
     meme en faisant defiler l interieur. */
  .modal { margin: 0 !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .modal-bg.open { padding: 0 !important; }
  .actions-grid { grid-template-columns: 1fr !important; }
  .kv-grid { grid-template-columns: 1fr !important; }
}

.admin-main { padding: 24px 28px; max-width: 1600px; margin: 0 auto; }

.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.kpi-card { background: white; border-radius: 10px; padding: 16px 18px; border: 1px solid var(--border-soft); }
.kpi-card__label { font-size: 11px; color: #7A736C; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-card__value { font-family: Georgia, serif; font-size: 28px; font-weight: 600; color: #1B1714; margin-top: 4px; line-height: 1.1; }
.kpi-card__sub { font-size: 11px; color: #7A736C; margin-top: 2px; }

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar h1 { font-family: Georgia, serif; font-size: 22px; font-weight: 600; margin-right: auto; }
.toolbar input[type="search"], .toolbar select {
  background: white; border: 1px solid var(--border-soft);
  padding: 8px 12px; border-radius: 6px; font-size: 13px;
}
.toolbar input[type="search"] { min-width: 240px; }
.btn { padding: 8px 14px; border-radius: 6px; background: var(--gold); color: #0F0E0D; font-weight: 600; font-size: 13px; transition: background 200ms; }
.btn:hover { background: var(--gold-soft); }

.kanban {
  display: grid; grid-template-columns: repeat(7, minmax(200px, 1fr));
  gap: 10px; overflow-x: auto; padding-bottom: 20px;
}
.col { background: #EDE8DD; border-radius: 8px; padding: 8px; min-height: 400px; display: flex; flex-direction: column; }
.col__header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #5A4825; padding: 6px 6px 10px; display: flex; justify-content: space-between; align-items: center; }
.col__header .count { background: rgba(0,0,0,0.1); color: #1B1714; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; }
.col__body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 200px; }

/* ─── Filtres de pipeline (statut + saison) ───
   Sur téléphone, faire défiler sept colonnes à l'horizontale est intenable.
   Une puce de statut réduit le tableau à une seule colonne pleine largeur. */
.filtres__ligne {
  display: flex; gap: 6px; margin: 0 0 14px;
  overflow-x: auto; padding-bottom: 3px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.filtres__ligne::-webkit-scrollbar { display: none; }

/* La barre d'etapes reste accessible pendant le defilement. Sans elle, passer
   de « Perdue » (46 dossiers) a « Nouvelles » demandait de remonter tout en
   haut. --admin-header-h est mesure en JS : l'en-tete change de hauteur selon
   que les onglets tiennent sur une ou deux lignes. */
.filtres__ligne {
  position: sticky; top: var(--admin-header-h, 0px); z-index: 20;
  background: #F5F1EA; padding-top: 10px;
  box-shadow: 0 8px 8px -8px rgba(27,23,20,0.12);
}

/* Filtres secondaires : sur telephone ils mangeaient trois lignes pleines
   avant le premier dossier. Replies derriere un bouton. */
.toolbar__filtres { display: flex; align-items: center; gap: 12px; }
.toolbar__toggle {
  display: none; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 6px; min-height: 38px;
  border: 1px solid var(--border-soft); background: #fff;
  font-size: 13px; font-weight: 600; color: #5A4825;
}
.toolbar__toggle[aria-expanded="true"] { background: #1B1714; border-color: #1B1714; color: #F5F1EA; }

/* ─── Onglets de la vue d ensemble ──────────────────────────────────────
   Capsule segmentee avec un curseur qui glisse. Le curseur n est pas de la
   decoration : sur un jeu de trois onglets, c est lui qui dit ou l on est
   sans avoir a lire, et le mouvement rattache la nouvelle section a
   l ancienne au lieu de la faire surgir. */
.vue-onglets {
  position: sticky;
  top: var(--admin-header-h, 0px);
  z-index: 22;
  display: flex;
  gap: 2px;
  padding: 4px;
  margin: 0 0 18px;
  border: 1px solid var(--dw-trait);
  border-radius: 999px;
  background: var(--dw-surface);
  box-shadow: var(--dw-ombre-1);
  overflow: hidden;
}
.vue-onglet {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dw-encre-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 220ms var(--dw-ease);
}
.vue-onglet.is-actif { color: #F6EFD9; }
.vue-onglets__curseur {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  /* Largeur et position posees par le JS d'apres le bouton actif. L'ancien
     calcul — (100% - 8px) / nombre d'onglets, plus un translateX en
     pourcentage — ignorait les gouttieres de 2 px : a cinq onglets l'ecart
     cumule atteignait une quinzaine de pixels et la pastille debordait sur
     le libelle voisin. Une mesure ne se devine pas. */
  width: 0;
  border-radius: 999px;
  background: var(--dw-nuit);
  transition: transform 380ms cubic-bezier(0.22, 0.9, 0.28, 1),
              width 380ms cubic-bezier(0.22, 0.9, 0.28, 1);
  pointer-events: none;
}

/* Le passage d un panneau a l autre : une apparition courte, vers le haut.
   Assez pour que l oeil suive, assez brève pour ne pas se faire attendre. */
.vue-panneau[hidden] { display: none; }
.vue-panneau { animation: panneau-entre 260ms var(--dw-ease) both; }
@keyframes panneau-entre {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Filtre par type de mariage, au-dessus des graphiques. */
.analytics-filtre {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.analytics-filtre label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--dw-encre-3);
}
.analytics-filtre select { min-width: 190px; }

@media (max-width: 768px) {
  .vue-onglets { margin: 0 0 14px; }
  .vue-onglet { font-size: 13px; padding: 10px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .vue-onglets__curseur { transition: none; }
  .vue-panneau { animation: none; }
}
/* Cinq onglets sur un telephone : on resserre le texte plutot que de le
   laisser passer sous la pastille. */
@media (max-width: 560px) {
  .vue-onglets { gap: 1px; padding: 3px; }
  .vue-onglet { padding: 8px 4px; font-size: 11.5px; letter-spacing: -0.02em; }
}


/* Ce bloc doit rester APRES les regles de base ci-dessus. Le grand @media
   mobile de cette feuille est ecrit tout en haut, donc a specificite egale
   les regles de base le battent : y placer ces lignes revenait a ne rien
   ecrire du tout. */
@media (max-width: 768px) {
  .toolbar__toggle { display: inline-flex; }
  .toolbar__filtres { display: none; width: 100%; }
  .toolbar__filtres.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar__filtres select { width: 100%; }
  /* L'onglet actif nomme deja l'etape : le titre de colonne ferait doublon. */
  .kanban--focus .col__header { display: none; }
  /* Le theme  premium  plus bas repasse le titre a 26px !important, ce qui
     ecrasait le 18px du bloc mobile ecrit plus haut. */
  .toolbar h1 { font-size: 19px !important; }
}
.puce {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; min-height: 38px; border-radius: 999px;
  border: 1px solid var(--border-soft); background: #fff;
  font-size: 12.5px; font-weight: 600; color: #5A4825;
  cursor: pointer; white-space: nowrap;
  transition: background 180ms, border-color 180ms, color 180ms, transform 120ms;
}
.puce:hover { border-color: var(--gold); }
.puce:active { transform: scale(0.96); }
.puce__pastille { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.puce__n {
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 8px; background: rgba(0,0,0,0.07);
}
.puce[aria-pressed="true"] { background: #1B1714; border-color: #1B1714; color: #F5F1EA; }
.puce[aria-pressed="true"] .puce__n { background: rgba(255,255,255,0.2); color: #F5F1EA; }
.kanban--focus { grid-template-columns: 1fr !important; scroll-snap-type: none !important; }
.kanban--focus .col { min-height: 0; }

.card { background: white; border-radius: 6px; padding: 10px 11px; border: 1px solid #DCD4C4; cursor: pointer; transition: all 200ms; }
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-color: var(--gold); }
.card { position: relative; }
.card__name { font-weight: 600; font-size: 13px; color: #1B1714; }
.card__meta { font-size: 11px; color: #7A736C; margin-top: 2px; }
.card__row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 6px; }
.card__price { font-weight: 600; color: var(--gold-soft); font-size: 12px; }
.card__forfait { display: inline-block; font-size: 10px; background: #FFF8E1; color: #5A4825; padding: 1px 6px; border-radius: 3px; margin-top: 4px; }
.card__fiche-badge { display: inline-block; font-size: 10px; background: #4CAF50; color: white; padding: 2px 8px; border-radius: 10px; margin-top: 4px; margin-left: 4px; font-weight: 600; }
/* Le mot « Fiche » etait injecte en CSS alors que le HTML dit deja
   « Fiche recue » : la pastille affichait « Fiche Fiche recue ». */
.card__age { font-size: 10px; color: #999; font-weight: 500; }
.card__age.warning { color: var(--warning); font-weight: 600; }
.card__age.danger { color: var(--danger); font-weight: 700; }

.modal-bg { display: none; position: fixed; inset: 0; background: rgba(15,14,13,0.7); z-index: 1000; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-bg.open { display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { background: white; border-radius: 12px; max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.modal__header { position: sticky; top: 0; background: var(--bg); color: white; padding: 16px 24px; border-bottom: 2px solid var(--gold); display: flex; justify-content: space-between; align-items: center; z-index: 1; }
.modal__title { font-family: Georgia, serif; font-size: 20px; color: var(--gold); font-weight: 600; }
.modal__close { font-size: 24px; color: white; opacity: 0.7; }
.modal__close:hover { opacity: 1; }
.modal__body { padding: 24px; }
.modal__section { margin-bottom: 28px; }
.modal__section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-soft); margin-bottom: 8px; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* ─── Bandeau STATUT DU DOSSIER ─── */
.dossier-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 24px; padding: 14px; background: #FAFAF6; border-radius: 10px; border: 1px solid var(--border-soft); }
.dossier-stat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: white; border-left: 3px solid #B0BEC5; position: relative; min-height: 62px; }
/* 22/09/2026 — les fonds teintes de ces trois-la etaient DEJA morts :
   css/admin.css, chargee apres, pose `background: var(--dw-surface)
   !important` et le filet `inset 0 2px 0 <couleur>`. Ils ne peignaient
   plus rien, mais ils restaient lisibles comme une intention, et le
   controle des interdits les comptait a juste titre. On les retire. */
.dossier-stat--ok { border-left-color: var(--dw-ok-vif, #00875A); }
.dossier-stat--warn { border-left-color: var(--dw-attention-vif, #B34700); }
.dossier-stat--urgent { border-left-color: var(--dw-alerte-vif, #C11B33); animation: pulse-urgent 2s ease-in-out infinite; }
.dossier-stat--todo { border-left-color: #9E9E9E; background: white; }
.dossier-stat--gray { border-left-color: #B0BEC5; background: #F5F5F5; opacity: 0.85; }
.dossier-stat__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.dossier-stat__body { flex: 1; min-width: 0; }
.dossier-stat__label { font-size: 13px; font-weight: 700; color: #1B1714; line-height: 1.2; }
.dossier-stat--ok .dossier-stat__label { color: var(--dw-ok, #1F7A4D); }
.dossier-stat--warn .dossier-stat__label { color: var(--dw-attention-texte, #8F5406); }
.dossier-stat--urgent .dossier-stat__label { color: var(--dw-alerte, #A82820); }
.dossier-stat__sub { font-size: 11px; color: #7A736C; margin-top: 3px; line-height: 1.3; }
.dossier-stat__action { padding: 5px 10px; border-radius: 5px; background: white; border: 1px solid var(--border-soft); font-size: 11px; font-weight: 600; cursor: pointer; color: #1B1714; transition: all 150ms; flex-shrink: 0; }
.dossier-stat__action:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
/* Selecteur d adresse du lieu de reception. */
.kv--large { grid-column: 1 / -1; }
.adr { margin-top: 2px; }
.adr__actuelle { font-size: 13px; color: #1B1714; margin-bottom: 8px; line-height: 1.4; }
.adr__saisie { position: relative; }
.adr__champ {
  width: 100%; min-height: 44px; padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--border-soft); border-radius: 8px; background: #fff; color: #1B1714;
}
.adr__champ:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.adr__liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border-soft); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.adr__liste button {
  display: block; width: 100%; text-align: left; padding: 9px 10px; min-height: 44px;
  border: 0; border-radius: 7px; background: none; cursor: pointer; font: inherit; color: #1B1714;
}
.adr__liste button:hover, .adr__liste button:focus-visible { background: #FFF8E1; outline: none; }
.adr__liste strong { display: block; font-size: 13.5px; font-weight: 600; }
.adr__liste small { display: block; font-size: 11.5px; color: #7A736C; margin-top: 1px; }
.adr__vide { padding: 10px; font-size: 12.5px; color: #7A736C; }
.adr__aide { font-size: 11px; color: #8A8176; margin-top: 6px; line-height: 1.4; }

/* ============ EXPLICATION D'UN CHIFFRE ============
   Le « ⓘ » a cote du CA signe etait un attribut `title` : la bulle native du
   navigateur n'apparait qu'apres une seconde et demie de survol, et JAMAIS au
   doigt. Helmi cliquait dessus, il ne se passait rien — et il avait raison,
   il ne se passait effectivement rien.
   C'est maintenant un vrai bouton : un clic ouvre l'explication, au doigt
   comme a la souris, et elle dit comment le chiffre est calcule. */
.kpi-aide {
  border: 0; background: none; padding: 0 0 0 4px; cursor: pointer;
  color: var(--gold-soft); opacity: 0.75; line-height: 1; vertical-align: -1px;
}
.kpi-aide:hover, .kpi-aide[aria-expanded="true"] { opacity: 1; }
.kpi-aide .ic { width: 13px; height: 13px; }
.kpi-explication {
  margin-top: 9px; padding: 10px 12px; border-radius: 7px;
  background: var(--dw-or-voile, #FBF3DC); border: 0;
  color: var(--dw-encre, #171310);
  font-size: 11.5px; line-height: 1.5;
  /* `inherit` et non var(--text-muted) : les cartes KPI ne sont pas toutes de
     la meme couleur — « Pipeline en cours » est sombre, les autres blanches —
     et les variables --text de cet ecran portent les valeurs du theme SOMBRE.
     Les prendre ici donnait du texte presque blanc sur un fond pale, et un
     <strong> carrement invisible. En heritant, l'explication prend la couleur
     de la carte qui la porte, quelle qu'elle soit. */
  opacity: 1;
}
/* Sur la carte sombre, la paire bascule ENTIEREMENT : fond et texte. */
.kpi-explication[hidden] { display: none !important; }
.kpi-explication strong { color: inherit; font-weight: 700; }
/* Carte actionnable. C'est un vrai <button>, pas un <div onclick> : le clavier
   et les lecteurs d'ecran doivent y arriver (RGAA 7.1). Un bouton apporte ses
   propres valeurs par defaut — centrage, police systeme, fond gris — qu'il faut
   defaire une a une pour qu'il reste identique aux cartes voisines. */
button.dossier-stat { width: 100%; font: inherit; text-align: left; border: 0; border-left: 3px solid #B0BEC5; }
button.dossier-stat--ok { border-left-color: #2E7D32; }
button.dossier-stat--warn { border-left-color: #F57C00; }
button.dossier-stat--urgent { border-left-color: #C62828; }
button.dossier-stat--todo { border-left-color: #9E9E9E; }
button.dossier-stat--gray { border-left-color: #B0BEC5; }
.dossier-stat--clic { cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease; }
.dossier-stat--clic:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.dossier-stat--clic:active { transform: translateY(0); }
.dossier-stat--clic:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Le chevron dit  ceci se touche  sans ajouter un mot de plus. */
.dossier-stat--clic::after { content: '›'; font-size: 20px; line-height: 1; color: #B0A98F; flex-shrink: 0; margin-left: 2px; }
@keyframes pulse-urgent { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); } 50% { box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.15); } }
@media (max-width: 640px) { .dossier-status { grid-template-columns: 1fr; } }
.kv { font-size: 13px; }
.kv__label { font-size: 11px; color: #7A736C; text-transform: uppercase; letter-spacing: 0.04em; }
.kv__value { font-weight: 600; color: #1B1714; margin-top: 2px; }
.kv__value a { color: var(--gold-soft); }

.actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.action-btn { padding: 10px 12px; background: white; border: 1px solid var(--border-soft); border-radius: 6px; font-size: 13px; font-weight: 500; text-align: left; display: flex; align-items: center; gap: 8px; transition: all 200ms; cursor: pointer; }
.action-btn:hover { border-color: var(--gold); background: #FFF8E1; }
.action-btn.primary { background: var(--gold); color: #0F0E0D; border-color: var(--gold); }
.action-btn.primary:hover { background: var(--gold-soft); }
.action-btn.danger { color: var(--danger); }
.action-btn.danger:hover { background: #FEE; border-color: var(--danger); }

textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 6px; font-family: inherit; font-size: 13px; resize: vertical; }

/* ===== ANALYTICS ===== */
.analytics-section { margin: 32px 0 24px; }
.analytics-section h2 { font-family: Georgia, serif; font-size: 20px; margin-bottom: 14px; color: #1B1714; display: flex; align-items: center; gap: 10px; }
.analytics-section h2::before { content: ''; width: 4px; height: 22px; background: var(--gold); border-radius: 2px; }
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.analytics-card { background: white; border-radius: 12px; padding: 20px; border: 1px solid var(--border-soft); }
.analytics-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 14px; font-weight: 600; }
.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut-svg { flex-shrink: 0; width: 130px; height: 130px; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.donut-legend__item { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.donut-legend__color { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.donut-legend__label { color: #1B1714; font-weight: 500; flex: 1; }
.donut-legend__value { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.donut-center { font-family: Georgia, serif; font-size: 22px; font-weight: 600; fill: #1B1714; }
.donut-center-sub { font-size: 9px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 50px; align-items: center; gap: 10px; font-size: 12px; }
.bar-row__label { color: #1B1714; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row__bar-bg { background: #F0EAE0; border-radius: 4px; height: 14px; overflow: hidden; }
.bar-row__bar-fg { background: linear-gradient(90deg, var(--gold-soft), var(--gold)); height: 100%; transition: width 600ms ease; }
.bar-row__val { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.histo { display: flex; align-items: flex-end; gap: 2px; height: 80px; padding-bottom: 18px; position: relative; }
.histo-col { flex: 1; background: linear-gradient(to top, var(--gold-soft), var(--gold)); border-radius: 2px 2px 0 0; min-height: 1px; position: relative; transition: opacity 200ms; cursor: pointer; }
.histo-col:hover { opacity: 0.7; }
.bar-row__val small { display: block; font-weight: 400; font-size: 10.5px; opacity: .62; letter-spacing: .01em; }
.bar-row--faible { opacity: .55; }
.bar-row--faible .bar-row__bar-bg { background: repeating-linear-gradient(90deg, var(--dw-surface-3) 0 6px, transparent 6px 12px); }
.bars__note { margin: 14px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dw-encre-3); }
/* Le rectangle sombre a coins droits est l infobulle par defaut de la
   moitie du web. Celle-ci prend le rayon, l ombre et l or de la DA. */
.histo-col__tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--dw-nuit, #14110F); color: var(--dw-nuit-texte, #EFE9DE); padding: 6px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; margin-bottom: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(212,175,55,.28); }
.histo-col:hover .histo-col__tooltip { opacity: 1; }
.histo-labels { display: flex; gap: 2px; font-size: 9px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.histo-labels span { flex: 1; text-align: center; }

.kpi-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kpi-mini__item { padding: 12px; background: #FAFAF7; border-radius: 8px; }
.kpi-mini__label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.04em; }
.kpi-mini__value { font-family: Georgia, serif; font-size: 22px; font-weight: 600; color: #1B1714; margin-top: 2px; }

.empty-state, .loading-state { text-align: center; padding: 60px 20px; color: #999; font-size: 14px; }

@media (max-width: 768px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* ════════════════════════════════════════════════════════════
   CALENDRIER (vue mensuelle)
   ════════════════════════════════════════════════════════════ */
.calendar-view { display: none; }
.calendar-view.active { display: block; }
.fiches-view { display: none; }
.fiches-view.active { display: block; }
.fiche-card { background:#fff; border:1px solid var(--border-soft); border-radius:12px; padding:16px 18px; margin-bottom:12px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.fiche-card.orphan { border-left:4px solid var(--warning); }
.fiche-card.linked { border-left:4px solid var(--success); }
.fiche-card__main { flex:1; min-width:200px; }
.fiche-card__names { font-family:Georgia,serif; font-size:17px; font-weight:600; color:#1B1714; }
.fiche-card__meta { font-size:12.5px; color:#7A736C; margin-top:3px; line-height:1.6; }
.fiche-card__status { font-size:11px; font-weight:700; padding:3px 10px; border-radius:10px; white-space:nowrap; }
.fiche-card__status.orphan { background:#FFF3E0; color:#B45309; }
.fiche-card__status.linked { background:#E8F5E9; color:#2E7D32; }
.fiche-card__actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fiche-btn { font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:7px; border:1px solid var(--border-soft); background:#fff; color:#1B1714; transition:all 150ms; }
.fiche-btn:hover { border-color:var(--gold); }
.fiche-btn.primary { background:var(--gold); color:var(--bg); border-color:var(--gold); }
.fiche-btn.danger { color:var(--danger); border-color:#F3D0CB; }
.fiche-btn.danger:hover { background:#FDECEA; border-color:var(--danger); }
.fiche-search-result { padding:10px 14px; border-bottom:1px solid var(--border-soft); cursor:pointer; transition:background 120ms; }
.fiche-search-result:hover { background:#FAF6EF; }
.fiche-search-result__ref { font-size:11px; color:var(--gold-soft); font-weight:600; }
.fiche-search-result__name { font-size:14px; font-weight:600; color:#1B1714; }
.fiche-search-result__meta { font-size:12px; color:#7A736C; }
.pipeline-view.hidden { display: none; }

.calendar-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.calendar-header h1 { font-family: Georgia, serif; font-size: 22px; font-weight: 600; }
.calendar-nav { display: flex; align-items: center; gap: 8px; }
.calendar-nav button { padding: 8px 14px; background: white; border: 1px solid var(--border-soft); border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 200ms; }
.calendar-nav button:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.calendar-nav__title { font-family: Georgia, serif; font-size: 18px; font-weight: 600; padding: 0 14px; min-width: 180px; text-align: center; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: white; border-radius: 10px; padding: 10px; border: 1px solid var(--border-soft); }
.calendar-day-header { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; text-align: center; padding: 8px 4px; }
.calendar-cell { min-height: 90px; height: auto; background: #FAFAF7; border-radius: 6px; padding: 6px; position: relative; cursor: pointer; transition: all 150ms; border: 1px solid transparent; display: flex; flex-direction: column; }
.calendar-cell:hover { background: #FFF8E1; border-color: var(--gold); }
.calendar-cell.empty { background: transparent; cursor: default; min-height: 90px; }
.calendar-cell.empty:hover { background: transparent; border-color: transparent; }
.calendar-cell__num { font-size: 12px; font-weight: 600; color: #1B1714; }
.calendar-cell.today .calendar-cell__num { background: var(--gold); color: var(--bg); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.calendar-cell.past { opacity: 0.55; }

.calendar-events { margin-top: auto; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.calendar-event { font-size: 9.5px; padding: 2px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
/* Le filet dit l'etat, le fond se tait (interdit n°5). Le trait passe de
   2 a 3 px : sans fond derriere, c'est lui qui doit se voir. Mesure sur la
   cellule #FAFAF7 — texte 7,5:1 / 5,4:1 / 5,9:1, filets au-dessus de 4:1
   pour un seuil non-texte de 3:1. */
.calendar-event { padding-left: 6px; }
.calendar-event.confirme { color: var(--dw-ok, #1F7A4D); border-left: 3px solid var(--dw-ok-vif, #00875A); font-weight: 700; }
.calendar-event.validee { color: var(--dw-attention-texte, #8F5406); border-left: 3px solid var(--dw-attention-vif, #B34700); font-weight: 600; }
.calendar-event.bloquee { color: #616161; border-left: 3px solid #9E9E9E; font-style: italic; }

.calendar-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 11px; }
.calendar-legend__item { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
/* La legende doit montrer CE QU ON VOIT dans la grille. Puisque les
   evenements n ont plus de fond, le repere n est plus un carre teinte mais
   le filet lui-meme : un trait plein, a la couleur vive, comme dans les
   cellules. Un aplat de couleur SATUREE n est pas un « fond teinte pour
   dire un etat » — c est un echantillon, et c est tout son role. */
.calendar-legend__color { width: 4px; height: 15px; border-radius: 2px; flex-shrink: 0; }
.calendar-legend__color.confirme { background: var(--dw-ok-vif, #00875A); }
.calendar-legend__color.validee { background: var(--dw-attention-vif, #B34700); }
.calendar-legend__color.bloquee { background: #9E9E9E; }

@media (max-width: 768px) {
  .calendar-grid { gap: 3px; padding: 6px; }
  .calendar-cell { min-height: 60px; padding: 3px; }
  .calendar-cell__num { font-size: 11px; }
  .calendar-event { font-size: 8px; padding: 1px 2px; }
  .calendar-day-header { font-size: 9px; padding: 4px 2px; }
  .calendar-nav__title { font-size: 15px; min-width: 130px; padding: 0 8px; }
  .calendar-nav button { padding: 6px 10px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   FINANCE (acomptes & soldes / comptabilité)
   ════════════════════════════════════════════════════════════ */
.acomptes-view, .compta-view { display: none; }
.acomptes-view.active, .compta-view.active { display: block; }

.finance-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.finance-header h1 { font-family: Georgia, serif; font-size: 22px; font-weight: 600; }
.finance-year-select { padding: 8px 12px; background: white; border: 1px solid var(--border-soft); border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; }

.compta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.compta-card { background: white; border-radius: 12px; padding: 18px 20px; border: 1px solid var(--border-soft); }
.compta-card.highlight { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: var(--bg); border-color: var(--gold); }
.compta-card.highlight .compta-card__label, .compta-card.highlight .compta-card__sub { color: rgba(15,14,13,0.7); }
.compta-card__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.compta-card__value { font-family: Georgia, serif; font-size: 30px; font-weight: 600; color: #1B1714; margin-top: 6px; line-height: 1.1; }
.compta-card.highlight .compta-card__value { color: var(--bg); }
.compta-card__sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.compta-progress { background: #F0EAE0; border-radius: 8px; height: 22px; overflow: hidden; position: relative; margin-top: 8px; }
.compta-progress__fill { background: linear-gradient(90deg, var(--gold-soft), var(--gold)); height: 100%; transition: width 700ms ease; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; color: var(--bg); font-weight: 700; font-size: 11px; }

.alertes-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.alerte-pill { padding: 8px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* Fonds pales et contour d 1 px retires le 22/09 : c etaient les interdits
   n°1 ET n°5 dans la meme declaration. La couleur des trois variantes vient
   maintenant de css/admin.css, sur les memes tokens que les chips. */

.finance-table-wrap { background: white; border-radius: 12px; padding: 14px; border: 1px solid var(--border-soft); overflow-x: auto; }
.finance-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.finance-table th { text-align: left; padding: 10px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; border-bottom: 2px solid var(--border-soft); white-space: nowrap; }
.finance-table td { padding: 12px 8px; border-bottom: 1px solid #F0EAE0; vertical-align: middle; }
.finance-table tr:hover { background: #FFF8E1; }
.finance-table tr.row-clickable { cursor: pointer; }
.finance-table .col-date { white-space: nowrap; font-weight: 600; }
.finance-table .col-name { font-weight: 600; color: #1B1714; }
.finance-table .col-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.finance-table .col-status { text-align: center; }

.status-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
/* Couleurs deplacees dans css/admin.css le 22/09, sur les tokens des
   chips : un seul jeu pour tous les reperes d etat de l espace pro. Ne
   reste ici que ce qui tient a CE composant. */
.status-badge.en_retard { animation: pulseBadge 2s infinite; }
@keyframes pulseBadge { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.monthly-bars { background: white; border-radius: 12px; padding: 18px 20px; border: 1px solid var(--border-soft); margin-top: 20px; }
.monthly-bars h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 14px; font-weight: 600; }
.monthly-bar-row { display: grid; grid-template-columns: 36px 1fr 110px; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 12px; }
.monthly-bar-row .lbl { color: #1B1714; font-weight: 500; }
.monthly-bar-row .bar-bg { background: #F0EAE0; border-radius: 4px; height: 16px; overflow: hidden; position: relative; }
.monthly-bar-row .bar-prevu { background: linear-gradient(90deg, rgba(212,175,55,0.4), rgba(212,175,55,0.7)); height: 100%; }
.monthly-bar-row .bar-encaisse { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.monthly-bar-row .val { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 11px; }

.compta-legend { display: flex; gap: 14px; font-size: 11px; margin-top: 10px; flex-wrap: wrap; color: var(--text-muted); }
.compta-legend__dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle; }

/* Dépenses */
.depenses-section { background: white; border-radius: 12px; padding: 18px 20px; border: 1px solid var(--border-soft); margin-top: 20px; }
.depenses-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.depenses-header h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }
.depenses-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }

/* Le CA annee par annee. */
.annees { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 4px; }
/* `white` en dur, comme .compta-card : --bg-card vaut #1B1714 dans cet
   ecran (c'est la couleur des cartes SOMBRES de la barre laterale). Le
   prendre ici donnait des cartes noires avec du texte noir dessus. */
.annee { background: white; color: #1B1714; border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px 18px; }
.annee.courante { border-color: var(--gold); box-shadow: 0 2px 14px rgba(212,175,55,0.16); }
.annee.future { opacity: 0.82; }
.annee__haut { display: flex; align-items: baseline; gap: 8px; }
.annee__an { font-family: Georgia, serif; font-size: 24px; font-weight: 600; color: #1B1714; }
.annee__etat { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); font-weight: 700; }
.annee__ca { font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; letter-spacing: -0.01em; color: #1B1714; }
.annee__sous { font-size: 12px; color: #8C8378; margin-top: 2px; }
.annee__ecart { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; margin-top: 10px; padding: 3px 9px; border-radius: 20px; }
.annee__ecart.hausse { background: #E7F5E9; color: #2E7D32; }
.annee__ecart.baisse { background: #FDECEA; color: #C62828; }
.annee__ecart.egal   { background: #F2EEE6; color: #6B6258; }
.annee__precision { font-size: 11px; color: #8C8378; margin-top: 6px; line-height: 1.45; }
.annee__detail { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft); font-size: 12px; color: #8C8378; }
.annee__detail b { color: #1B1714; font-weight: 700; font-variant-numeric: tabular-nums; display: block; font-size: 14px; }
.annee__spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-top: 12px; }
.annee__spark span { flex: 1; background: rgba(212,175,55,0.28); border-radius: 2px 2px 0 0; min-height: 2px; }
.annee__spark span.plein { background: var(--gold); }
@media (max-width: 640px) { .annees { grid-template-columns: 1fr; } }
.depense-cat-card { background: #FFF5F2; border-radius: 8px; padding: 12px 14px; border-left: 3px solid #E8654F; }
.depense-cat-card.empty { opacity: 0.5; background: #FAFAF7; border-left-color: #DCD4C4; }
.depense-cat-card__icon { font-size: 18px; }
.depense-cat-card__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-top: 4px; }
.depense-cat-card__amount { font-family: Georgia, serif; font-size: 18px; font-weight: 600; color: #C62828; margin-top: 2px; }
.depense-cat-card.empty .depense-cat-card__amount { color: #999; font-size: 13px; }
.depense-cat-card__count { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.depenses-list { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.depense-row { display: grid; grid-template-columns: 70px 32px 1fr auto auto; gap: 10px; padding: 8px 4px; align-items: center; border-bottom: 1px solid #F0EAE0; font-size: 13px; }
.depense-row:hover { background: #FAFAF7; }
.depense-row__date { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.depense-row__icon { font-size: 16px; text-align: center; }
.depense-row__desc { min-width: 0; }
.depense-row__desc strong { display: block; color: #1B1714; font-size: 13px; }
.depense-row__desc small { color: var(--text-muted); font-size: 11px; }
.depense-row__amount { font-weight: 600; color: #C62828; white-space: nowrap; font-variant-numeric: tabular-nums; }
.depense-row__actions button { background: none; border: 0; padding: 4px 6px; cursor: pointer; color: var(--text-muted); font-size: 14px; }
.depense-row__actions button:hover { color: var(--danger); }

.btn-link { background: none; border: 0; color: var(--gold-soft); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.btn-link:hover { color: var(--gold); }

@media (max-width: 768px) {
  .depenses-cats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .depense-cat-card { padding: 10px 12px; }
  .depense-cat-card__amount { font-size: 15px; }
  .depense-row { grid-template-columns: 60px 26px 1fr auto; }
  .depense-row__actions { grid-column: 1 / -1; text-align: right; }
}

@media (max-width: 768px) {
  .finance-table { font-size: 11px; }
  .finance-table th, .finance-table td { padding: 8px 5px; }
  .compta-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .compta-card { padding: 12px 14px; }
  .compta-card__value { font-size: 22px; }
  .monthly-bar-row { grid-template-columns: 30px 1fr 80px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════
   COUPONS
   ════════════════════════════════════════════════════════════ */
.coupons-view { display: none; }
.coupons-view.active { display: block; }

.coupons-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.coupon-stat { background: white; border-radius: 8px; padding: 12px 14px; border: 1px solid var(--border-soft); text-align: center; }
.coupon-stat__num { font-family: Georgia, serif; font-size: 24px; font-weight: 600; color: #1B1714; }
.coupon-stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 4px; font-weight: 600; }

.coupon-card { background: white; border-radius: 10px; padding: 14px 16px; border: 1px solid var(--border-soft); margin-bottom: 10px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.coupon-card.expired { opacity: 0.6; }
.coupon-card.used { background: #F5F5F5; opacity: 0.85; }
.coupon-code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; color: #1B1714; background: #FFF8E1; padding: 8px 14px; border-radius: 6px; border: 1.5px dashed var(--gold); white-space: nowrap; }
.coupon-card.used .coupon-code, .coupon-card.expired .coupon-code { background: #ECEFF1; border-color: #B0BEC5; color: #455A64; }
.coupon-info { min-width: 0; }
.coupon-info__main { font-size: 14px; font-weight: 600; color: #1B1714; }
.coupon-info__sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.coupon-actions { display: flex; gap: 6px; flex-shrink: 0; }
.coupon-actions button { padding: 6px 10px; border-radius: 5px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-soft); background: white; cursor: pointer; transition: all 150ms; }
.coupon-actions button:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.coupon-actions button.danger:hover { background: var(--danger); color: white; border-color: var(--danger); }

.coupon-share-modal { background: #FFF8E1; padding: 14px; border-radius: 8px; border: 1px solid var(--gold); margin-top: 10px; }
.coupon-share-modal__url { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; word-break: break-all; background: white; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--border-soft); margin-top: 6px; cursor: pointer; }

@media (max-width: 768px) {
  .coupon-card { grid-template-columns: 1fr; gap: 8px; }
  .coupon-actions { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   TEMPLATES EMAIL
   ════════════════════════════════════════════════════════════ */
.templates-view { display: none; }
.templates-view.active { display: block; }

.tpl-info { background: #FFF8E1; border-left: 4px solid var(--gold); padding: 14px 18px; border-radius: 6px; margin-bottom: 22px; font-size: 13px; color: #5A4825; line-height: 1.5; }
.tpl-info code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 3px; font-size: 12px; }

.tpl-section { background: white; border-radius: 10px; padding: 20px 22px; margin-bottom: 14px; border: 1px solid var(--border-soft); }
.tpl-section__title { font-family: Georgia, serif; font-size: 16px; font-weight: 600; color: #1B1714; margin-bottom: 4px; }
.tpl-section__help { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.4; }
.tpl-field { margin-bottom: 14px; }
.tpl-field__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; margin-bottom: 5px; }
.tpl-field input, .tpl-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 6px; font-size: 13px; font-family: inherit; box-sizing: border-box; transition: border-color 200ms; }
.tpl-field input:focus, .tpl-field textarea:focus { border-color: var(--gold); outline: none; }
.tpl-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.tpl-field__help { font-size: 11px; color: #999; margin-top: 4px; }
.tpl-actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.tpl-actions .btn { padding: 9px 18px; }
.tpl-save-status { font-size: 12px; color: var(--text-muted); align-self: center; }
.tpl-save-status.saved { color: #2E7D32; font-weight: 600; }
.tpl-save-status.dirty { color: var(--warning); }

/* ════════════════════════════════════════════════════════════
   GALERIE (admin)
   ════════════════════════════════════════════════════════════ */
.galerie-view { display: none; }
.galerie-view.active { display: block; }

.gal-cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.gal-cat-tab { padding: 8px 14px; background: white; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 200ms; color: #1B1714; display: inline-flex; align-items: center; gap: 6px; }
.gal-cat-tab:hover { border-color: var(--gold); }
.gal-cat-tab.active { background: var(--gold); border-color: var(--gold); color: #0F0E0D; font-weight: 700; }
.gal-cat-tab .gal-count { font-size: 11px; opacity: 0.7; background: rgba(0,0,0,0.08); padding: 1px 7px; border-radius: 8px; }
.gal-cat-tab.active .gal-count { background: rgba(0,0,0,0.15); opacity: 1; }

.gal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.gal-toolbar h2 { font-family: Georgia, serif; font-size: 18px; margin-right: auto; }
.gal-toolbar .btn { padding: 8px 14px; }
.gal-import-btn { background: white; color: #1B1714; border: 1px solid var(--border-soft); padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 200ms; }
.gal-import-btn:hover { border-color: var(--gold); background: #FFF8E1; }

.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gal-card { background: white; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-soft); position: relative; transition: all 200ms; }
.gal-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-color: var(--gold); }
.gal-card.inactive { opacity: 0.55; }
.gal-card.inactive::after { content: 'Caché'; position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.7); color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; z-index: 2; }
.gal-card__media { position: relative; background: #0F0E0D; }
.gal-card__media.landscape { aspect-ratio: 16/9; }
.gal-card__media.portrait { aspect-ratio: 9/16; }
.gal-card__media.square { aspect-ratio: 1/1; }
.gal-card__media img, .gal-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-card__badge { position: absolute; top: 8px; right: 8px; background: var(--gold); color: #0F0E0D; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; z-index: 1; }
.gal-card__type { position: absolute; bottom: 8px; left: 8px; background: rgba(15,14,13,0.85); color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; z-index: 1; display: inline-flex; align-items: center; gap: 4px; }
.gal-card__body { padding: 10px 12px; }
.gal-card__alt { font-size: 12px; color: #5A4825; line-height: 1.4; min-height: 32px; }
.gal-card__alt.empty { color: #C0B8AB; font-style: italic; }
.gal-card__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.gal-card__action { padding: 5px 10px; font-size: 11px; background: #FAFAF7; border: 1px solid var(--border-soft); border-radius: 5px; cursor: pointer; transition: all 150ms; flex: 1; text-align: center; min-width: 0; }
.gal-card__action:hover { border-color: var(--gold); background: #FFF8E1; }
.gal-card__action.danger:hover { border-color: var(--danger); background: #FEE; color: var(--danger); }
.gal-card__pos { display: flex; gap: 4px; }
.gal-card__pos button { width: 26px; padding: 5px 0; font-size: 12px; line-height: 1; background: #FAFAF7; border: 1px solid var(--border-soft); border-radius: 5px; cursor: pointer; }
.gal-card__pos button:hover { border-color: var(--gold); background: #FFF8E1; }
.gal-card__pos button:disabled { opacity: 0.35; cursor: not-allowed; }

.gal-modal-bg { display: none; position: fixed; inset: 0; background: rgba(15,14,13,0.7); z-index: 1500; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gal-modal-bg.open { display: flex; align-items: center; justify-content: center; padding: 24px; }
.gal-modal { background: white; border-radius: 12px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4); box-sizing: border-box; }
.gal-modal *, .gal-modal *::before, .gal-modal *::after { box-sizing: border-box; }
.gal-modal__header { background: var(--bg); color: white; padding: 16px 24px; border-bottom: 2px solid var(--gold); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; }
.gal-modal__title { font-family: Georgia, serif; font-size: 18px; color: var(--gold); font-weight: 600; }
.gal-modal__close { font-size: 22px; color: white; opacity: 0.7; cursor: pointer; background: none; border: 0; }
.gal-modal__close:hover { opacity: 1; }
.gal-modal__body { padding: 24px; box-sizing: border-box; }

.gal-dropzone {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 2px dashed #DCD4C4; border-radius: 10px; padding: 32px 20px;
  text-align: center; cursor: pointer; transition: all 200ms; margin-bottom: 14px;
  background: #FAFAF7;
}
.gal-dropzone:hover, .gal-dropzone.drag { border-color: var(--gold); background: #FFF8E1; }
.gal-dropzone__icon { font-size: 32px; margin-bottom: 6px; }
.gal-dropzone__text { font-size: 13px; color: #5A4825; }
.gal-dropzone__hint { font-size: 11px; color: #999; margin-top: 4px; }
.gal-dropzone input[type=file] { display: none; }

.gal-preview { margin-bottom: 14px; border-radius: 8px; overflow: hidden; background: #0F0E0D; max-height: 280px; display: none; }
.gal-preview.has { display: block; }
.gal-preview img, .gal-preview video { width: 100%; max-height: 280px; object-fit: contain; display: block; }

.gal-field { margin-bottom: 12px; }
.gal-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.gal-field input, .gal-field select, .gal-field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 6px; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.gal-field input:focus, .gal-field select:focus, .gal-field textarea:focus { border-color: var(--gold); outline: none; }
.gal-field__hint { font-size: 11px; color: #999; margin-top: 4px; }
.gal-progress { margin-top: 12px; height: 8px; background: #F0EAE0; border-radius: 4px; overflow: hidden; display: none; }
.gal-progress.active { display: block; }
.gal-progress__bar { height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); width: 0%; transition: width 200ms; }
/* La base gardait son fond ambre alors que ses deux variantes passaient au
   blanc : cote a cote, l etat neutre paraissait plus alarmant que le succes.
   Vu a la capture, pas au code. */
.gal-status { background: var(--dw-surface, #fff); border-left: 3px solid var(--dw-or, #96751A); padding: 9px 12px; border-radius: 4px; font-size: 12px; color: #5A4825; margin-top: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.gal-status.error { background: var(--dw-surface, #fff); border-left-color: var(--dw-alerte-vif, #C11B33); color: var(--dw-alerte, #A82820); }
.gal-status.success { background: var(--dw-surface, #fff); border-left-color: var(--dw-ok-vif, #00875A); color: var(--dw-ok, #1F7A4D); }
.gal-status__step { display: block; margin-top: 2px; }
.gal-status__step:first-child { margin-top: 0; }
.gal-status__step.done { color: #4CAF50; }

/* ════════════════════════════════════════════════════════════
   LE CHASSIS DU TABLEAU DE BORD
   ════════════════════════════════════════════════════════════
   Ici vivaient 112 lignes de barre laterale : .admin-sidebar,
   .sidebar-link, .sidebar-overlay, .admin-topbar et leur
   bascule a 1024 px. Tout cela a ete retire le 14/09/2026 —
   plus aucun element ne portait ces classes. La navigation est
   desormais le bandeau .admin-entete, commun aux sept pages et
   defini dans css/admin.css, plus le panneau ⌘K.
   Ne pas les faire revenir : c est la double navigation qui a
   motive le chantier. */
.admin-shell { min-height: 100vh; }
.admin-content { min-width: 0; display: flex; flex-direction: column; }

/* Les composants de la refonte v2 (fiche, accueil, liste, Argent,
   Statistiques) vivent dans css/admin-socle.css depuis le 13/10/2026 :
   les six pages separees s en servent aussi. admin.html le charge juste
   apres ce fichier — l ordre des regles n a pas change. */