/* Style de l'espace de gestion. La couleur du client (--c) vient de /admin/theme.css. */
@font-face { font-family: "Figtree"; src: url("figtree.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --c: #4f46e5;  /* couleur de l agence */
  --melange: #ffffff;  /* les teintes douces se melangent a cette couleur */
  --c-doux: color-mix(in srgb, var(--c) 10%, var(--melange));
  --c-moyen: color-mix(in srgb, var(--c) 22%, var(--melange));
  --c-fonce: color-mix(in srgb, var(--c) 78%, #000000);
  --champ: #ffffff;
  --bord-champ: #d8dce2;
  --survol: #fafbfc;
  --bord-survol: #cfd3da;
  --neutre: #eceef2;
  --inverse: #14161b;
  --sur-inverse: #ffffff;
  --danger-bord: #f3c3bf;
  --fond: #f4f5f7;
  --carte: #ffffff;
  --texte: #14161b;
  --discret: #646b78;
  --trait: #e6e8ec;
  --danger: #c0322a;
  --danger-doux: #fdeceb;
  --ok: #157a3f;
  --ok-doux: #e3f6ea;
  --attention: #a35a00;
  --attention-doux: #fff1dc;
  --ombre: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px -6px rgba(16, 24, 40, .08);
  --ombre-haute: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 32px -12px rgba(16, 24, 40, .18);
  --rayon: 16px;
  --menu: 248px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 15.5px/1.55 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
h1 { font-size: clamp(1.7rem, 3vw, 2.15rem); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 6px; font-weight: 800; }
h2 { font-size: 1.05rem; letter-spacing: -.01em; margin: 0; font-weight: 700; }
a { color: inherit; }
small { font-size: .86rem; }
.discret { color: var(--discret); margin: 0; }
.icone { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 3px solid var(--c-moyen); outline-offset: 2px; }

/* Menu lateral */
.menu { position: fixed; inset: 0 auto 0 0; width: var(--menu); display: flex; flex-direction: column; gap: 22px; padding: 22px 14px; background: var(--carte); border-right: 1px solid var(--trait); z-index: 3; }
.marque { display: flex; align-items: center; gap: 12px; padding: 4px 8px; text-decoration: none; }
.marque > span:last-child { display: grid; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; min-width: 0; }
.marque small { font-weight: 500; color: var(--discret); font-size: .8rem; }
.logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(140deg, var(--c), var(--c-fonce)); color: #fff; font-weight: 800; font-size: 1.15rem; box-shadow: 0 6px 14px -6px var(--c); }
.logo.grand { width: 64px; height: 64px; border-radius: 18px; font-size: 1.8rem; }
.menu nav { display: grid; gap: 2px; flex: 1; align-content: start; }
.menu nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: var(--discret); text-decoration: none; font-weight: 600; transition: background .15s, color .15s; }
.menu nav a:hover { background: var(--fond); color: var(--texte); }
.menu nav a[aria-current] { background: var(--c-doux); color: var(--c-fonce); }
.menu nav a span { flex: 1; }
.pastille { min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: var(--c); color: #fff; font-size: .75rem; }
.sortie button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: none; color: var(--discret); font: 600 1rem "Figtree", system-ui, sans-serif; cursor: pointer; }
.sortie button:hover { background: var(--fond); color: var(--texte); }

.contenu { padding: 40px clamp(20px, 4vw, 48px) 80px; max-width: 1180px; }
.avec-menu .contenu { margin-left: var(--menu); }

/* En-tete de page */
.entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.surtitre { margin: 0 0 6px; color: var(--c); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.onglets { display: inline-flex; gap: 4px; padding: 4px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; }
.onglets a { padding: 7px 14px; border-radius: 9px; text-decoration: none; font-weight: 600; color: var(--discret); }
.onglets a[aria-current] { background: var(--inverse); color: var(--sur-inverse); }

.avis { background: var(--c-doux); color: var(--c-fonce); border-radius: 12px; padding: 12px 16px; font-weight: 600; margin: 0 0 20px; }
.avis.erreur { background: var(--danger-doux); color: var(--danger); margin: 0; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--trait); background: var(--carte); color: var(--texte); font: 600 .93rem "Figtree", system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.bouton .icone { width: 17px; height: 17px; }
.bouton:hover { border-color: var(--bord-survol); background: var(--survol); }
.bouton.plein { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 6px 14px -8px var(--c); }
.bouton.plein:hover { background: var(--c-fonce); transform: translateY(-1px); }
.bouton.danger { color: var(--danger); }
.bouton.danger:hover { background: var(--danger-doux); border-color: var(--danger-bord); }
.bouton.discret-bouton { color: var(--discret); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions form { margin: 0; }

/* Chiffres du tableau de bord */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 28px; }
.chiffre { display: grid; gap: 2px; padding: 20px; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); text-decoration: none; color: var(--discret); font-weight: 500; transition: transform .18s, box-shadow .18s; }
.chiffre:hover { transform: translateY(-2px); box-shadow: var(--ombre-haute); }
.chiffre strong { font-size: 2.3rem; line-height: 1.1; letter-spacing: -.03em; color: var(--texte); margin-top: 14px; }
.puce { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--c-doux); color: var(--c); }
.chiffre.alerte .puce { background: var(--danger-doux); color: var(--danger); }
.chiffre.alerte strong { color: var(--danger); }

/* Panneaux et rangees */
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.panneau { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 8px; }
.panneau > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px; }
.panneau > header a { display: inline-flex; align-items: center; gap: 4px; color: var(--c); font-weight: 600; font-size: .9rem; text-decoration: none; }
.panneau > header .icone { width: 16px; height: 16px; }
.rangee { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; }
.rangee:hover { background: var(--fond); }
.rangee-texte { display: grid; flex: 1; min-width: 0; }
.rangee-texte strong, .rangee-texte small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rangee-texte small, .rangee-fin small { color: var(--discret); }
.rangee-fin { display: grid; justify-items: end; gap: 4px; text-align: right; }
.non-lu .rangee-texte strong::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--c); vertical-align: middle; }
.avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-doux); color: var(--c-fonce); font-weight: 800; }
.date-bloc { width: 46px; flex: none; display: grid; place-items: center; padding: 6px 0; border-radius: 12px; background: var(--c-doux); color: var(--c-fonce); font-size: .72rem; font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.date-bloc b { font-size: 1.25rem; }
.vide { color: var(--discret); padding: 6px 12px 16px; margin: 0; }
.vide-grand { display: grid; justify-items: center; gap: 6px; padding: 64px 20px; text-align: center; color: var(--discret); background: var(--carte); border-radius: var(--rayon); border: 1px dashed var(--bord-champ); grid-column: 1 / -1; }
.vide-grand .icone { width: 36px; height: 36px; color: var(--c); margin-bottom: 6px; }
.vide-grand p { margin: 0; font-weight: 700; color: var(--texte); font-size: 1.05rem; }

/* Etiquettes de statut */
.etiquette { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--fond); color: var(--discret); white-space: nowrap; }
.etiquette.statut-nouvelle, .etiquette.statut-demandee { background: var(--c-doux); color: var(--c-fonce); }
.etiquette.statut-prete, .etiquette.statut-confirmee { background: var(--ok-doux); color: var(--ok); }
.etiquette.statut-attention { background: var(--attention-doux); color: var(--attention); }
.etiquette.statut-annulee, .etiquette.statut-refusee { background: var(--danger-doux); color: var(--danger); }

/* Fiches : commandes, reservations, messages, produits */
.grille-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.fiche { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; margin: 0 0 16px; }
.grille-fiches .fiche { margin: 0; display: grid; gap: 16px; }
.fiche > header { display: flex; align-items: center; gap: 12px; }
.fiche-titre { display: grid; flex: 1; min-width: 0; }
.fiche-titre small { color: var(--discret); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fiche-titre small .icone { width: 15px; height: 15px; }
.fiche.statut-annulee, .fiche.statut-refusee { opacity: .6; }
.fiche.statut-nouvelle, .fiche.statut-demandee { box-shadow: var(--ombre), inset 3px 0 0 var(--c); }
.lignes { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lignes td { padding: 7px 0; border-bottom: 1px solid var(--trait); }
.lignes td:last-child { text-align: right; }
.lignes .quantite { width: 42px; color: var(--discret); font-weight: 600; }
.lignes .total td { border-bottom: 0; font-weight: 800; font-size: 1.05rem; padding-top: 10px; }
.formule-choisie { margin: 0; font-weight: 700; color: var(--c-fonce); }
.note { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--fond); white-space: pre-line; }
.contacts { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.contacts > a:not(.bouton) { display: inline-flex; align-items: center; gap: 6px; color: var(--discret); text-decoration: none; font-size: .92rem; }
.contacts > a:not(.bouton):hover { color: var(--c); }
.contacts .icone { width: 16px; height: 16px; }

.message { display: grid; gap: 14px; }
.message.non-lu { box-shadow: var(--ombre), inset 3px 0 0 var(--c); }
.message .texte { margin: 0; white-space: pre-line; font-size: 1.02rem; }
.message > footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* Produits */
.ajout > summary, .produit > summary { list-style: none; cursor: pointer; }
.ajout > summary::-webkit-details-marker, .produit > summary::-webkit-details-marker { display: none; }
.ajout { border: 1px dashed color-mix(in srgb, var(--c) 45%, var(--melange)); box-shadow: none; background: var(--c-doux); }
.ajout > summary { display: flex; align-items: center; gap: 10px; color: var(--c-fonce); font-weight: 700; }
.ajout[open] { background: var(--carte); }
.liste-produits { display: grid; gap: 10px; }
.liste-produits .fiche { margin: 0; padding: 14px 18px; }
.produit > summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; }
.vignette { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--c-doux); color: var(--c-fonce); font-weight: 800; object-fit: cover; }
input[type=file] { padding: 9px; background: var(--fond); }
.produit-nom { display: grid; min-width: 0; }
.produit-nom small { color: var(--discret); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.produit-prix { font-weight: 800; font-variant-numeric: tabular-nums; }
.modifier { color: var(--c); font-weight: 600; font-size: .9rem; }
.produit[open] .modifier { color: var(--discret); }
.produit.retire { opacity: .62; }
.produit.rupture .vignette { background: var(--danger-doux); color: var(--danger); }
.formulaire-produit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--trait); }
.formulaire-produit .large { grid-column: 1 / -1; }
.formulaire-produit .bouton { justify-self: start; }

/* Champs */
label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
input { font: 400 1rem "Figtree", system-ui, sans-serif; padding: 11px 13px; border: 1px solid var(--bord-champ); border-radius: 10px; background: var(--champ); color: var(--texte); width: 100%; transition: border-color .15s, box-shadow .15s; }
input:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 4px var(--c-doux); }
.case { display: flex; align-items: center; gap: 10px; font-weight: 500; align-self: end; }
.case input { width: 18px; height: 18px; accent-color: var(--c); }

/* Connexion */
.sans-menu .contenu { max-width: none; padding: 0; }
.connexion { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.connexion-accueil { display: grid; align-content: center; gap: 14px; padding: 8vw; color: #fff; background: radial-gradient(80% 70% at 85% 10%, color-mix(in srgb, var(--c) 70%, #ffffff), transparent 70%), linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 45%, #05070d)); }
.connexion-accueil .logo { background: rgba(255, 255, 255, .18); box-shadow: none; border: 1px solid rgba(255, 255, 255, .35); }
.connexion-accueil h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 10px 0 0; }
.connexion-accueil p { font-size: 1.15rem; max-width: 26em; opacity: .88; margin: 0; }
.connexion-formulaire { align-self: center; justify-self: center; width: min(400px, 100%); display: grid; gap: 16px; padding: 40px 28px; }
.connexion-formulaire h2 { font-size: 1.6rem; letter-spacing: -.02em; }
.connexion-formulaire .discret { margin-top: -10px; }
.connexion-formulaire .bouton { justify-content: center; padding: 13px; margin-top: 6px; font-size: 1rem; }

/* Telephone et tablette */
@media (max-width: 900px) {
  .menu { position: sticky; top: 0; inset: auto; width: auto; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--trait); overflow-x: auto; }
  .marque > span:last-child, .sortie span, .menu nav a span { display: none; }
  .menu nav { display: flex; gap: 2px; flex: 1; }
  .menu nav a { position: relative; padding: 10px; }
  .pastille { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: .68rem; }
  .sortie button { padding: 10px; }
  .avec-menu .contenu { margin-left: 0; padding-top: 24px; }
  .connexion { grid-template-columns: 1fr; }
  .connexion-accueil { padding: 48px 28px; min-height: 0; }
  .produit > summary { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .produit-stock { grid-column: 2; }
  .modifier { grid-column: 3; grid-row: 2; }
  .grille-fiches, .colonnes { grid-template-columns: minmax(0, 1fr); }
  .chiffres { grid-template-columns: 1fr 1fr; gap: 12px; }
  .chiffre { padding: 16px; }
  .chiffre strong { font-size: 1.9rem; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Statistiques */
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.indicateur { display: grid; gap: 4px; padding: 18px; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); }
.indicateur > span { color: var(--discret); font-weight: 600; font-size: .88rem; }
.indicateur strong { font-size: 1.75rem; letter-spacing: -.03em; line-height: 1.15; }
.evolution { justify-self: start; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: .78rem; background: var(--fond); color: var(--discret); }
.evolution.hausse { background: var(--ok-doux); color: var(--ok); }
.evolution.baisse { background: var(--danger-doux); color: var(--danger); }
.panneau.large { margin-bottom: 16px; }
.panneau > header { gap: 10px; flex-wrap: wrap; }
.panneau > header h2 { display: flex; align-items: center; gap: 8px; }
.panneau > header .discret { font-size: .85rem; }
.graphique { display: block; width: 100%; height: auto; padding: 4px 12px 8px; overflow: visible; }
.graphique .barre { fill: var(--c-moyen); }
.graphique .barre.sommet { fill: var(--c); }
.graphique .barre:hover { fill: var(--c-fonce); }
.graphique .grille-ligne { stroke: var(--trait); stroke-width: 1; stroke-dasharray: 3 4; }
.graphique .axe { fill: var(--discret); font: 600 11px "Figtree", system-ui, sans-serif; text-anchor: middle; }
.conseils { margin-bottom: 16px; background: linear-gradient(135deg, var(--c-doux), var(--carte) 60%); }
.conseils h2 .icone { color: var(--c); }
.conseils ul { margin: 0; padding: 0 16px 14px 34px; display: grid; gap: 8px; }
.conseils li::marker { color: var(--c); }
.classement { width: 100%; border-collapse: collapse; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.classement td { padding: 9px 12px; border-top: 1px solid var(--trait); vertical-align: middle; }
.classement td:first-child { font-weight: 600; }
.classement td small { display: block; font-weight: 400; color: var(--discret); }
.classement td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.classement .jauge { width: 35%; }
.jauge span { display: block; height: 8px; border-radius: 99px; background: var(--c); min-width: 4px; }
.colonnes .puce { width: 40px; height: 40px; flex: none; }
.jauge-0 { width: 0%; }
.jauge-1 { width: 5%; }
.jauge-2 { width: 10%; }
.jauge-3 { width: 15%; }
.jauge-4 { width: 20%; }
.jauge-5 { width: 25%; }
.jauge-6 { width: 30%; }
.jauge-7 { width: 35%; }
.jauge-8 { width: 40%; }
.jauge-9 { width: 45%; }
.jauge-10 { width: 50%; }
.jauge-11 { width: 55%; }
.jauge-12 { width: 60%; }
.jauge-13 { width: 65%; }
.jauge-14 { width: 70%; }
.jauge-15 { width: 75%; }
.jauge-16 { width: 80%; }
.jauge-17 { width: 85%; }
.jauge-18 { width: 90%; }
.jauge-19 { width: 95%; }
.jauge-20 { width: 100%; }

/* Fournisseurs */
.recherche input { min-width: min(320px, 80vw); }
.filtres-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
.filtres-categories a { padding: 6px 13px; border-radius: 999px; background: var(--carte); border: 1px solid var(--trait); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--discret); }
.filtres-categories a[aria-current] { background: var(--inverse); border-color: var(--inverse); color: var(--sur-inverse); }
.fournisseur.favori { box-shadow: var(--ombre), inset 3px 0 0 var(--c); }
.infos { margin: 0; display: grid; gap: 6px; }
.infos div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.infos dt { color: var(--discret); font-weight: 600; font-size: .88rem; }
.infos dd { margin: 0; }
.modifier-fiche > summary { cursor: pointer; color: var(--c); font-weight: 600; font-size: .92rem; }
.modifier-fiche[open] > summary { margin-bottom: 4px; }
.modifier-fiche > form:last-child { margin-top: 12px; }
textarea { font: 400 1rem "Figtree", system-ui, sans-serif; padding: 11px 13px; border: 1px solid var(--bord-champ); border-radius: 10px; background: var(--champ); color: var(--texte); width: 100%; resize: vertical; }
textarea:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 4px var(--c-doux); }

/* Production, reglages, comptes */
.separation { height: 1px; background: var(--trait); margin: 10px 12px; }
.choix-jour { display: flex; gap: 6px; align-items: center; }
.choix-jour input { padding: 6px 9px; width: auto; }
.choix-jour .bouton { padding: 6px 12px; }
.a-preparer { width: 100%; border-collapse: collapse; }
.a-preparer td { padding: 10px 12px; border-top: 1px solid var(--trait); font-size: 1.05rem; }
.quantite-grande { width: 70px; font-size: 1.6rem !important; font-weight: 800; color: var(--c-fonce); text-align: right; font-variant-numeric: tabular-nums; }
.case-cocher { width: 34px; }
.case-cocher::after { content: ""; display: block; width: 20px; height: 20px; border: 2px solid var(--bord-survol); border-radius: 6px; }
.detail-production td:first-child { width: 70px; font-weight: 800; }
.retrait { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; color: var(--c-fonce); }
.retrait .icone { width: 17px; height: 17px; }
.acompte { margin: 0; font-weight: 600; color: var(--attention); }
.acompte.paye { color: var(--ok); }
.reglages { display: grid; gap: 16px; margin-bottom: 20px; }
.reglages .fiche { display: grid; gap: 12px; margin: 0; }
.reglages h2 { font-size: 1.15rem; }
.petite { font-size: .86rem; margin: -4px 0 0; }
.grille-horaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ligne-fermeture { display: grid; grid-template-columns: 170px 170px 1fr; gap: 10px; }
.jours-fermes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.jours-fermes legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.interrupteur { font-weight: 700; }
.barre-enregistrer { position: sticky; bottom: 0; padding: 14px 0; background: linear-gradient(transparent, var(--fond) 35%); }
select { font: 400 1rem "Figtree", system-ui, sans-serif; padding: 11px 13px; border: 1px solid var(--bord-champ); border-radius: 10px; background: var(--champ); color: var(--texte); width: 100%; }
.ajout-compte { padding: 4px 12px 12px; }
.ajout-compte > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--c-fonce); font-weight: 700; padding: 10px 0; }
.ajout-compte .formulaire-produit { margin-top: 6px; }
.rangee form { margin: 0; }
.export { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
  .ligne-fermeture { grid-template-columns: 1fr 1fr; }
  .ligne-fermeture .large { grid-column: 1 / -1; }
  .separation { display: none; }
}
@media print {
  .menu, .sans-impression, .avis { display: none !important; }
  .avec-menu .contenu { margin: 0; padding: 0; max-width: none; }
  body { background: #fff; }
  .panneau, .fiche { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* Agenda */
.onglets .compte { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--c-doux); color: var(--c-fonce); font-size: .72rem; }
.onglets a[aria-current] .compte { background: var(--c); color: #fff; }
.resume-filtre { margin: -12px 0 16px; color: var(--discret); font-weight: 600; }
.agenda { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.calendrier { padding: 14px; }
.calendrier-tete, .calendrier-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendrier-tete span { text-align: center; font-size: .78rem; font-weight: 700; color: var(--discret); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 8px; }
.calendrier-semaine { margin-bottom: 6px; }
.case-jour { min-height: 92px; display: flex; flex-direction: column; gap: 3px; padding: 7px; border-radius: 12px; background: var(--fond); text-decoration: none; border: 2px solid transparent; transition: border-color .15s, background .15s; min-width: 0; }
.case-jour:hover { border-color: var(--c-moyen); background: var(--carte); }
.case-jour .numero { font-weight: 800; font-size: .95rem; }
.case-jour.hors-mois { opacity: .38; }
.case-jour.passe:not(.choisi) { opacity: .7; }
.case-jour.aujourdhui .numero { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; }
.case-jour.choisi { border-color: var(--c); background: var(--carte); box-shadow: var(--ombre); }
.case-jour.ferme { background: repeating-linear-gradient(135deg, var(--fond), var(--fond) 6px, var(--neutre) 6px, var(--neutre) 12px); }
.marque-ferme { font-size: .7rem; font-weight: 700; color: var(--discret); }
.puce-agenda { display: block; padding: 2px 6px; border-radius: 6px; font-size: .72rem; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-agenda.preparer { background: var(--c); color: #fff; }
.puce-agenda.pretes { background: var(--ok-doux); color: var(--ok); }
.puce-agenda.retirees { background: var(--neutre); color: var(--discret); }
.puce-agenda.resa { background: var(--c-doux); color: var(--c-fonce); }
.puce-agenda.resa.attente { background: var(--attention-doux); color: var(--attention); }
.legende { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 2px 2px; }
.legende .puce-agenda { display: inline-block; }
.journee { position: sticky; top: 20px; padding-bottom: 14px; }
.journee > header { align-items: center; }
.ferme-jour { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; }
.resume-jour { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 12px; }
.resume-jour div { padding: 12px; border-radius: 12px; background: var(--fond); color: var(--discret); font-size: .88rem; font-weight: 600; }
.resume-jour strong { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--texte); letter-spacing: -.02em; }
.resume-jour .alerte-douce { background: var(--c-doux); }
.resume-jour .alerte-douce strong { color: var(--c-fonce); }
.chronologie { list-style: none; margin: 0; padding: 0 12px; display: grid; gap: 0; }
.evenement { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--trait); }
.evenement .heure { font-weight: 800; font-variant-numeric: tabular-nums; }
.evenement-corps { display: grid; text-decoration: none; min-width: 0; }
.evenement-corps strong, .evenement-corps small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evenement-corps small { color: var(--discret); }
.evenement-type { display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c); }
.evenement.reservation .evenement-type { color: var(--attention); }
.evenement-type .icone { width: 14px; height: 14px; }
.evenement.statut-retiree { opacity: .55; }
.journee .actions { padding: 6px 12px 0; }
@media (max-width: 1100px) { .agenda { grid-template-columns: minmax(0, 1fr); } .journee { position: static; } }
@media (max-width: 640px) {
  .case-jour { min-height: 54px; padding: 4px; }
  .puce-agenda { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .legende .puce-agenda { font-size: .72rem; width: auto; height: auto; padding: 2px 6px; border-radius: 6px; }
}

/* Mode nuit : automatique selon l'appareil, ou force par le choix enregistre (html data-theme) */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --melange: #1b1e26;
  --c-fonce: color-mix(in srgb, var(--c) 55%, #ffffff);
  --fond: #0f1116;
  --carte: #1b1e26;
  --texte: #eceef3;
  --discret: #9aa1ae;
  --trait: #2c303a;
  --champ: #14171d;
  --bord-champ: #353a46;
  --survol: #242833;
  --bord-survol: #444a58;
  --neutre: #2a2e38;
  --inverse: #eceef3;
  --sur-inverse: #0f1116;
  --danger: #ff7b72;
  --danger-doux: #3a1d1d;
  --danger-bord: #6b2b2b;
  --ok: #56d364;
  --ok-doux: #15301e;
  --attention: #f0b65a;
  --attention-doux: #3a2a12;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .6);
  --ombre-haute: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 36px -12px rgba(0, 0, 0, .7);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --melange: #1b1e26;
    --c-fonce: color-mix(in srgb, var(--c) 55%, #ffffff);
    --fond: #0f1116;
    --carte: #1b1e26;
    --texte: #eceef3;
    --discret: #9aa1ae;
    --trait: #2c303a;
    --champ: #14171d;
    --bord-champ: #353a46;
    --survol: #242833;
    --bord-survol: #444a58;
    --neutre: #2a2e38;
    --inverse: #eceef3;
    --sur-inverse: #0f1116;
    --danger: #ff7b72;
    --danger-doux: #3a1d1d;
    --danger-bord: #6b2b2b;
    --ok: #56d364;
    --ok-doux: #15301e;
    --attention: #f0b65a;
    --attention-doux: #3a2a12;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .6);
    --ombre-haute: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 36px -12px rgba(0, 0, 0, .7);
  }
}
.choix-theme { display: flex; gap: 2px; padding: 3px; margin: 0 4px; border-radius: 11px; background: var(--fond); }
.choix-theme form { flex: 1; margin: 0; }
.choix-theme button { width: 100%; display: grid; place-items: center; padding: 7px 0; border: 0; border-radius: 8px; background: none; color: var(--discret); cursor: pointer; }
.choix-theme button:hover { color: var(--texte); }
.choix-theme button[aria-pressed="true"] { background: var(--carte); color: var(--texte); box-shadow: var(--ombre); }
.choix-theme .icone { width: 17px; height: 17px; }
@media (max-width: 900px) { .choix-theme { margin: 0; } .choix-theme button { padding: 7px 8px; } }
@media print {
  :root[data-theme] { --fond: #fff; --carte: #fff; --texte: #14161b; --discret: #555; --trait: #ddd; --melange: #fff; --neutre: #eee; color-scheme: light; }
}
.groupe-menu { display: block; padding: 16px 12px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); opacity: .8; }
.menu nav { overflow-y: auto; }
@media (max-width: 900px) { .groupe-menu { display: none; } }

/* Rendez-vous, devis, clients, bons, commandes regulieres, invendus */
.semaine { display: grid; grid-template-columns: 40px repeat(7, minmax(0, 1fr)) 40px; gap: 6px; margin-bottom: 16px; }
.semaine a { display: grid; place-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--carte); box-shadow: var(--ombre); text-decoration: none; color: var(--discret); position: relative; }
.semaine a b { font-size: 1.2rem; color: var(--texte); }
.semaine a[aria-current] { background: var(--c); color: #fff; }
.semaine a[aria-current] b { color: #fff; }
.semaine .compte { position: absolute; top: 4px; right: 6px; font-size: .68rem; font-weight: 800; color: var(--c); }
.semaine a[aria-current] .compte { color: #fff; }
.rdv-colonnes { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); }
.heure-rdv { width: 56px; display: grid; text-align: center; }
.heure-rdv small { color: var(--discret); }
.rangee.rdv { align-items: flex-start; }
.rdv.statut-annule, .rdv.statut-absent { opacity: .55; }
.actions-mini { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin-top: 4px; }
.actions-mini .bouton { padding: 4px 9px; font-size: .8rem; }
.rdv-ajout { padding: 0 12px 12px; margin: 0; border: 0; }
.rdv-aide { padding: 0 12px 12px; }
.ligne-edition { border-top: 1px solid var(--trait); padding: 10px 12px; }
.ligne-edition > summary { cursor: pointer; list-style: none; }
.ligne-edition > summary::-webkit-details-marker { display: none; }
.ligne-edition .formulaire-produit { margin-top: 10px; padding-top: 10px; }
.onglets-bas { margin: -12px 0 16px; }
.barre-actions { margin: 0 0 16px; }
.document-formulaire fieldset { border: 0; display: grid; gap: 14px; }
.sans-bord { border-top: 0; margin-top: 0; padding-top: 0; }
.lignes-document { width: 100%; border-collapse: collapse; }
.lignes-document th { text-align: left; font-size: .8rem; color: var(--discret); padding: 0 6px 6px; }
.lignes-document td { padding: 3px; }
.lignes-document td:first-child { width: 55%; }
.lignes-document input, .lignes-document select { padding: 8px 9px; }
.totaux { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; font-variant-numeric: tabular-nums; }
.totaux .ttc { font-size: 1.15rem; }
.page-publique { max-width: 900px; margin: 0 auto; padding: 32px 16px 60px; }
.feuille { background: #fff; color: #14161b; border-radius: 14px; box-shadow: var(--ombre-haute); padding: clamp(24px, 5vw, 56px); display: grid; gap: 22px; }
.feuille p { margin: 0; }
.feuille-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.feuille-emetteur { font-size: 1.3rem; }
.feuille-numero { text-align: right; }
.feuille-numero h1 { margin: 0 0 6px; color: var(--c); }
.feuille-client { padding: 14px 18px; border-radius: 10px; background: #f4f5f7; max-width: 380px; margin-left: auto; display: grid; }
.feuille-client small { color: #646b78; }
.feuille-lignes { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.feuille-lignes th { text-align: left; font-size: .8rem; color: #646b78; border-bottom: 2px solid #14161b; padding: 8px 6px; }
.feuille-lignes td { padding: 9px 6px; border-bottom: 1px solid #e6e8ec; }
.feuille-lignes td:not(:first-child), .feuille-lignes th:not(:first-child) { text-align: right; white-space: nowrap; }
.feuille-totaux { margin-left: auto; min-width: 260px; display: grid; gap: 4px; }
.feuille-totaux p { display: flex; justify-content: space-between; gap: 20px; }
.feuille-totaux .ttc { font-size: 1.2rem; border-top: 2px solid #14161b; padding-top: 6px; }
.feuille-conditions { color: #646b78; font-size: .9rem; white-space: pre-line; }
.feuille-accord { border-top: 1px dashed #d8dce2; padding-top: 20px; }
.feuille-accord form { display: grid; gap: 12px; max-width: 420px; }
.feuille .avis { margin: 0; }
.tampon { justify-self: end; transform: rotate(-8deg); border: 3px solid #157a3f; color: #157a3f; padding: 4px 18px; border-radius: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.bon-cadeau { background: var(--carte); border-radius: 18px; box-shadow: var(--ombre-haute); padding: 48px 28px; text-align: center; display: grid; gap: 12px; justify-items: center; border: 2px dashed var(--c-moyen); }
.bon-cadeau h1 { margin: 0; }
.bon-montant { font-size: 3.4rem; font-weight: 800; color: var(--c); margin: 0; letter-spacing: -.03em; }
.bon-message { font-style: italic; }
.bon-code, .code-promo { font: 800 1.1rem ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; padding: 6px 14px; border-radius: 10px; background: var(--c-doux); color: var(--c-fonce); }
.bon-code { font-size: 1.6rem; }
.bon-fiche > header { flex-wrap: wrap; }
.debit { display: flex; gap: 8px; }
.debit input { max-width: 170px; }
.fidelite { display: grid; gap: 4px; padding: 4px 12px 12px; }
.fidelite strong { font-size: 2.6rem; line-height: 1; }
.fidelite span { color: var(--discret); }
.large-jauge { margin-top: 8px; background: var(--fond); border-radius: 99px; }
.large-jauge span { height: 10px; }
.fidelite-actions { padding: 0 12px 12px; }
.notes-client { display: grid; gap: 10px; padding: 0 12px 12px; }
.quantites { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pause { margin-top: 10px; }
.invendus { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 12px 12px; }
.invendus .bouton { grid-column: 1 / -1; justify-self: start; }
.puce-agenda.rdv { background: var(--ok-doux); color: var(--ok); }
.evenement.rendezvous .evenement-type { color: var(--ok); }
@media (max-width: 900px) { .rdv-colonnes { grid-template-columns: minmax(0, 1fr); } .semaine { grid-template-columns: 30px repeat(7, minmax(0, 1fr)) 30px; gap: 3px; } }
@media print { .page-publique { padding: 0; } .feuille, .bon-cadeau { box-shadow: none; } .public .sans-impression { display: none; } }

/* Console de l'agence */
.entonnoir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0 12px 12px; }
.entonnoir a { display: grid; gap: 2px; padding: 10px 8px; border-radius: 12px; background: var(--fond); text-decoration: none; text-align: center; color: var(--discret); font-size: .76rem; font-weight: 600; }
.entonnoir strong { font-size: 1.5rem; color: var(--texte); }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.colonne-kanban { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 12px; display: grid; gap: 10px; min-width: 220px; }
.colonne-kanban > header { display: flex; justify-content: space-between; align-items: center; }
.colonne-kanban h2 { font-size: .95rem; }
.colonne-kanban .compte { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 99px; background: var(--c-doux); color: var(--c-fonce); font-weight: 800; font-size: .8rem; }
.carte-prospect { display: grid; gap: 3px; padding: 12px; border-radius: 12px; background: var(--fond); border: 1px solid var(--trait); }
.carte-prospect a { text-decoration: none; }
.carte-prospect small { color: var(--discret); }
.carte-prospect .relance-due { color: var(--danger); font-weight: 700; }
.deplacer { display: flex; gap: 6px; margin-top: 8px; }
.deplacer select { padding: 6px 8px; font-size: .85rem; }
.deplacer .bouton { padding: 6px 10px; }
.case-tache { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 2px solid var(--bord-survol); border-radius: 7px; background: var(--champ); color: var(--ok); font-weight: 800; cursor: pointer; }
.rangee form { margin: 0; }
.tache-faite .rangee-texte strong { text-decoration: line-through; color: var(--discret); }
.ajout-tache { display: grid; grid-template-columns: 1fr 150px auto; gap: 8px; padding: 12px; border-top: 1px solid var(--trait); }
.ajout-tache.grande { grid-template-columns: 2fr 1fr 1fr 150px auto; border-top: 0; margin-bottom: 16px; }
.titre-groupe { margin: 26px 0 10px; font-size: 1.1rem; }
.ligne-payee { opacity: .65; }
.lien-bouton { background: none; border: 0; padding: 0; margin-top: 6px; color: var(--c); font: 600 .85rem "Figtree", system-ui, sans-serif; cursor: pointer; text-decoration: underline; justify-self: start; }
.fiche-client { display: grid; gap: 16px; margin-bottom: 20px; }
.fiche-client .fiche { display: grid; gap: 12px; margin: 0; }
.fiche-client h2 { font-size: 1.1rem; }
.recherche input { min-width: min(300px, 80vw); }
@media (max-width: 900px) { .entonnoir { grid-template-columns: repeat(3, 1fr); } .ajout-tache, .ajout-tache.grande { grid-template-columns: 1fr; } }

.graphique .barre-depense { fill: var(--danger); opacity: .55; }
.negatif { color: var(--danger); }
.jauge span.depasse { background: var(--danger); }
.gros-chiffre { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; margin: 0 12px; }
.objectif p.discret { margin: 6px 12px 12px; }
.objectif .large-jauge { margin: 8px 12px 0; }
.duree-saisie { display: flex; align-items: center; gap: 4px; }
.duree-saisie input { width: 56px; }
.ajout-tache.grande:has(.duree-saisie) { grid-template-columns: 2fr 1fr auto 150px auto; }
.echange { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 0 12px 12px; }
.echange textarea { grid-column: 1 / -1; }
.relance-champ { grid-column: 1; font-size: .82rem; }
.echange .bouton { align-self: end; justify-self: end; }
.texte-libre { white-space: pre-line !important; font-weight: 600; }
.temps-mois { padding: 10px 12px; margin: 0; border-top: 1px solid var(--trait); color: var(--discret); }
.jour-agenda.passe { border-left: 4px solid var(--danger); }
.signature { margin-top: 10px; }
.cadre-signature { height: 90px; border: 1px dashed #c4c9d1; border-radius: 10px; max-width: 360px; }
@media (max-width: 900px) { .ajout-tache.grande:has(.duree-saisie) { grid-template-columns: 1fr; } }
