/* Le Comptoir — design v2 « papier & cyprès », inspiration cartes modernes :
   fond doux, cartes blanches arrondies, grands chiffres, jauges. */
:root{
  --ground:#F2F3EC; --carte:#FFFFFF; --ink:#20251C; --muted:#71776A;
  --accent:#56682F; --accent-fonce:#3F4E20; --accent-soft:#EBEFDD;
  --line:#E4E5DA; --ombre:0 1px 2px rgba(32,37,28,.06), 0 8px 24px rgba(32,37,28,.05);
  --ok:#3E6B3E; --ok-soft:#E2F0DD;
  --retard:#A34A26; --retard-soft:#F7E5DB;
  --attention:#8A6D1F; --attention-soft:#F4EDD5;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:15.5px; line-height:1.55;
}
a{color:var(--accent-fonce)}
main{max-width:1080px; margin:0 auto; padding:24px 20px 90px}
h1{font-size:28px; font-weight:700; letter-spacing:-.02em; margin:18px 0 4px}
h2{font-size:17px; font-weight:700; letter-spacing:-.01em; margin:34px 0 12px}
.compte{font-size:15px; color:var(--muted); font-weight:500; margin-left:8px}
.sous-titre,.date-jour{color:var(--muted); margin:0 0 22px; font-size:14.5px}

/* Barre de navigation flottante */
.barre{
  position:sticky; top:12px; z-index:10;
  display:flex; align-items:center; gap:4px;
  background:var(--carte); border:1px solid var(--line); border-radius:99px;
  box-shadow:var(--ombre);
  padding:8px 10px; margin:14px auto 0; max-width:1080px; width:calc(100% - 40px);
}
.barre a{color:var(--muted); text-decoration:none; font-weight:600; font-size:14.5px;
  padding:8px 16px; border-radius:99px; transition:background .15s ease, color .15s ease}
.barre a:hover{color:var(--ink); background:var(--accent-soft)}
.barre a.actif{background:var(--accent); color:#fff}
.barre .marque{font-family:Georgia,serif; font-weight:700; font-size:18px; color:var(--accent-fonce); padding:6px 14px 6px 8px}
.barre .marque:hover{background:none}
.barre .qui{margin-left:auto; padding:6px 14px; background:var(--accent-soft);
  border-radius:99px; color:var(--accent-fonce); font-size:13.5px; font-weight:700}

/* Cartes */
.carte{background:var(--carte); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--ombre); padding:20px 22px}
.carte-titre{font-size:15px; font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:10px}
.carte-titre .legende{margin-left:auto; font-weight:500; font-size:12.5px; color:var(--muted); display:flex; gap:14px}
.pastille{display:inline-block; width:9px; height:9px; border-radius:99px; margin-right:5px; vertical-align:baseline}
.pastille.pleine{background:var(--accent)}
.pastille.creuse{background:var(--line)}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:6px 0 14px}
.kpi{background:var(--carte); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--ombre); padding:18px 20px}
.kpi .n{display:block; font-size:26px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.kpi .n small{font-size:17px; font-weight:600; color:var(--muted)}
.kpi .l{display:block; font-size:13px; color:var(--muted); margin-top:3px; font-weight:500}
.kpi.alerte{border-color:#E7C4B2; background:linear-gradient(180deg,#FFF,var(--retard-soft))}
.kpi.alerte .n{color:var(--retard)}

/* Deux colonnes tableau de bord */
.deux-colonnes{display:grid; grid-template-columns:3fr 2fr; gap:14px; margin:0 0 14px}
@media (max-width:860px){ .deux-colonnes{grid-template-columns:1fr} }

/* Graphique en barres */
.barres{display:flex; align-items:flex-end; gap:6px; height:170px; padding-top:6px}
.barre-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; min-width:0}
.tige{width:100%; max-width:34px; flex:1; display:flex; align-items:flex-end; position:relative}
.barre-fond{width:100%; background:var(--accent-soft); border-radius:7px; display:flex; align-items:flex-end; overflow:hidden}
.barre-plein{width:100%; background:var(--accent); border-radius:7px}
.barre-col.actuel .barre-fond{outline:2px solid var(--accent-fonce); outline-offset:2px}
.barre-label{font-size:10.5px; color:var(--muted); white-space:nowrap}

/* Tables en cartes */
.enveloppe-table{background:var(--carte); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--ombre); overflow-x:auto; overflow-y:hidden}
table.liste{border-collapse:collapse; width:100%; font-size:14.5px}
.liste th{text-align:left; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); padding:12px 16px 8px; border-bottom:1px solid var(--line)}
.liste td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
.liste tr:last-child td{border-bottom:none}
.liste tbody tr{transition:background .12s ease}
.liste tbody tr:hover{background:var(--accent-soft)}
.liste .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600}
.liste .action{text-align:right; white-space:nowrap}
.liste tr.retard td{background:var(--retard-soft)}
.sourd{color:var(--muted); font-weight:400}
tr.flash td{animation:flashfond 1.6s ease}
@keyframes flashfond{0%{background:var(--ok-soft)} 100%{background:transparent}}

/* Puces */
.puce{display:inline-block; font-size:12px; font-weight:700; padding:3px 10px;
  border-radius:99px; background:var(--ground); color:var(--muted); white-space:nowrap}
.puce-ok{background:var(--ok-soft); color:var(--ok)}
.puce-retard{background:var(--retard); color:#fff}
.puce-attention{background:var(--attention-soft); color:var(--attention)}
.puce-parution{background:var(--accent-soft); color:var(--accent-fonce)}

/* Boutons */
button{font:inherit; cursor:pointer}
.bouton-pointer{
  background:var(--accent); color:#fff; border:none; border-radius:99px;
  padding:7px 16px; font-weight:700; font-size:13.5px;
  box-shadow:0 1px 2px rgba(32,37,28,.18);
  transition:transform .08s ease, background .15s ease;
}
.bouton-pointer:hover{background:var(--accent-fonce)}
.bouton-pointer:active{transform:scale(.93)}
.bouton-discret{background:none; border:none; color:var(--muted); text-decoration:underline; font-size:13px; padding:4px}
.bouton-discret:hover{color:var(--ink)}
form{display:inline; margin:0}

/* Recherche */
.recherche input{
  width:100%; max-width:480px; padding:12px 18px; font-size:15.5px;
  border:1px solid var(--line); border-radius:99px; background:var(--carte); color:var(--ink);
  box-shadow:var(--ombre); margin-bottom:18px;
}
.recherche input:focus{outline:2px solid var(--accent); border-color:var(--accent)}

/* Fiche client */
.retour{margin:14px 0 0; font-size:14px}
.entete-client{display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.entete-infos{flex:1; min-width:240px}
.coordonnees{color:var(--muted); margin:2px 0 6px; font-size:14.5px}
.notes{background:var(--attention-soft); border-radius:10px; padding:8px 14px; font-size:13.5px; max-width:640px; display:inline-block}
.anneau{width:112px; height:112px; border-radius:50%; display:grid; place-items:center; flex-shrink:0}
.anneau-coeur{width:86px; height:86px; border-radius:50%; background:var(--carte);
  display:grid; place-items:center; text-align:center}
.anneau-coeur .pct{font-size:21px; font-weight:700; letter-spacing:-.02em; display:block; line-height:1.1}
.anneau-coeur .lbl{font-size:10.5px; color:var(--muted); font-weight:600; display:block}
.section-parution{margin:22px 0}
.entete-parution{display:flex; align-items:center; gap:12px; margin:0 0 10px}
.entete-parution h2{margin:0}
.mini-jauge{flex:1; max-width:220px; height:8px; background:var(--accent-soft); border-radius:99px; overflow:hidden}
.mini-jauge-plein{height:100%; background:var(--accent); border-radius:99px}
.entete-parution .chiffres{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}

/* Production */
.onglets-editions{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px}
.onglet{text-decoration:none; font-size:14px; font-weight:700; color:var(--muted);
  background:var(--carte); border:1px solid var(--line); border-radius:99px; padding:7px 16px}
.onglet:hover{color:var(--ink)}
.onglet.on{background:var(--accent); border-color:var(--accent); color:#fff}
.liste.production td{padding:8px 10px}
.etape-col{text-align:center; width:86px}
.etape-faite{background:var(--ok-soft); color:var(--ok); border:none; border-radius:99px;
  font-size:11.5px; font-weight:700; padding:4px 9px; white-space:nowrap;
  transition:transform .08s ease}
.etape-faite:active{transform:scale(.92)}
.etape-vide{background:var(--ground); color:var(--muted); border:1px dashed var(--line);
  border-radius:99px; width:30px; height:24px; font-weight:700;
  transition:transform .08s ease, border-color .15s ease}
.etape-vide:hover{border-color:var(--accent); color:var(--accent-fonce)}
.etape-vide:active{transform:scale(.9)}
.ligne-jauge{max-width:130px; margin-top:5px}

/* Fil d'activité */
.fil{list-style:none; padding:0; margin:0}
.fil li{padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.fil li:last-child{border-bottom:none}
.fil .quand{color:var(--muted); font-size:12px; margin-right:8px; font-variant-numeric:tabular-nums}
.vide{color:var(--muted); background:var(--carte); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 20px; max-width:640px}

/* Zone de dépôt de documents */
.zone-depot{display:block; border:2px dashed var(--line); border-radius:var(--r);
  background:var(--carte); padding:22px 24px; text-align:center; margin:0 0 14px;
  transition:border-color .15s ease, background .15s ease}
.zone-depot p{margin:0 0 4px; max-width:none}
.zone-depot.survol{border-color:var(--accent); background:var(--accent-soft)}
.zone-depot .petit{font-size:12px; color:var(--muted)}

/* Doublons */
.paire{margin-bottom:12px}
.paire-noms{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px}
.paire-fiche{display:flex; flex-direction:column; min-width:200px}
.paire-vs{font-size:12.5px; font-weight:700; color:var(--accent-fonce);
  background:var(--accent-soft); border-radius:99px; padding:3px 11px}
.paire-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.lecture-auto{font-size:12.5px; color:var(--muted); margin-top:3px}
.lecture-auto strong{color:var(--ink)}
.adresse-ics{display:inline-block; background:var(--ground); border:1px solid var(--line);
  border-radius:8px; padding:7px 12px; font-size:12.5px; word-break:break-all; user-select:all}

/* Planning photo */
.formulaire-rdv{display:flex; gap:10px; flex-wrap:wrap}
.formulaire-rdv input{padding:9px 13px; font:inherit; font-size:14.5px;
  border:1px solid var(--line); border-radius:10px; background:var(--ground); color:var(--ink)}
.formulaire-rdv input[list]{flex:2; min-width:210px}
.formulaire-rdv input[type=text]{flex:1; min-width:150px}
.formulaire-rdv input:focus{outline:2px solid var(--accent); border-color:var(--accent)}
.formulaire-rdv select{padding:9px 13px; font:inherit; font-size:14.5px;
  border:1px solid var(--line); border-radius:10px; background:var(--ground); color:var(--ink)}
.formulaire-rdv select:focus{outline:2px solid var(--accent); border-color:var(--accent)}
.formulaire-pile{display:flex; flex-direction:column; gap:14px}
.formulaire-pile label{display:flex; flex-direction:column; gap:5px; font-weight:700; font-size:13.5px}
.formulaire-pile input,.formulaire-pile textarea,.formulaire-pile select{
  padding:10px 13px; font:inherit; font-weight:400; font-size:15px;
  border:1px solid var(--line); border-radius:10px; background:var(--ground); color:var(--ink)}
.formulaire-pile input:focus,.formulaire-pile textarea:focus,.formulaire-pile select:focus{
  outline:2px solid var(--accent); border-color:var(--accent)}
.formulaire-pile button{align-self:flex-start}
.erreur{background:var(--retard-soft); color:var(--retard); border-radius:8px;
  padding:9px 13px; font-weight:600; font-size:14px; margin:0}
.cal-entete{display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:14px}
.cal-mois{font-size:17px; text-transform:capitalize}
.cal-fleche{display:grid; place-items:center; width:34px; height:34px; border-radius:99px;
  background:var(--ground); text-decoration:none; font-size:19px; font-weight:700; color:var(--ink)}
.cal-fleche:hover{background:var(--accent-soft)}
.cal-grille{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px}
.cal-jours span{font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); text-align:center; font-weight:700}
.cal-case{min-height:82px; min-width:0; background:var(--ground); border-radius:10px; padding:6px 7px; position:relative}
.cal-vide{background:transparent}
.cal-num{font-size:12px; font-weight:700; color:var(--muted)}
.cal-auj{outline:2px solid var(--accent); background:var(--accent-soft)}
.cal-auj .cal-num{color:var(--accent-fonce)}
.cal-rdv{position:relative; background:var(--accent); color:#fff; border-radius:7px;
  font-size:11.5px; font-weight:600; padding:3px 20px 3px 7px; margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-rdv a{color:#fff; text-decoration:none}
.cal-heure{opacity:.75; margin-right:4px}
.cal-retirer{position:absolute; right:2px; top:1px; background:none; border:none;
  color:#fff; opacity:.6; font-size:13px; padding:2px 4px}
.cal-retirer:hover{opacity:1}
@media (max-width:700px){ .cal-case{min-height:56px} .cal-rdv{font-size:10px; padding-right:16px} }

/* Écran d'identité */
body.accueil{display:flex; min-height:100vh; align-items:center; justify-content:center}
.carte-identite{text-align:center; background:var(--carte); border:1px solid var(--line);
  border-radius:22px; box-shadow:var(--ombre); padding:44px 52px}
.carte-identite h1{font-family:Georgia,serif; margin:0 0 4px}
.bouton-identite{
  display:block; width:250px; margin:10px auto; padding:13px;
  background:var(--ground); border:1px solid var(--line); border-radius:14px;
  font-size:16px; font-weight:700; color:var(--ink);
  transition:border-color .15s ease, transform .08s ease, background .15s ease;
}
.bouton-identite:hover{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-fonce)}
.bouton-identite:active{transform:scale(.97)}
.petit{font-size:12.5px; color:var(--muted); margin-top:18px}

@media (max-width:640px){
  .barre{gap:0; padding:6px; overflow-x:auto}
  .barre a{padding:8px 10px}
  main{padding:18px 12px 60px}
  h1{font-size:23px}
  .enveloppe-table{overflow-x:auto}
  .barres{height:130px}
  .barre-label{font-size:9px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

.texte-lu{font-size:12.5px; color:var(--muted); white-space:pre-wrap; word-break:break-word;
  background:var(--ground); border-radius:10px; padding:12px 14px; margin:0; max-height:260px; overflow:auto}