/* CRM Dental Masters — feuille de style unique, sans dépendance externe. */

/* Palette derivee du logo : bleu clair -> bleu -> navy, sur fond blanc. */
:root {
  --bleu:#1650A0; --bleu-clair:#EAF1FA; --bleu-sombre:#0B2C5E; --bleu-vif:#2E7CD6;
  --or:#1650A0; --or-clair:#EAF1FA;        /* alias conserves : plus d'accent dore */
  --texte:#16233A; --texte-doux:#5A6B85; --ligne:#E1E8F2;
  /* Fond a peine teinte : les cartes blanches se detachent sans ombre lourde */
  --fond:#F8FAFD; --blanc:#fff;
  --vert:#1B7A4B; --vert-clair:#E7F5EE;
  --rouge:#B3261E; --rouge-clair:#FDECEA;
  --orange:#A85D00; --orange-clair:#FFF3E3;
  --gris:#8593A8; --gris-clair:#F2F6FB;
  --r:8px; --ombre:0 1px 2px rgba(11,44,94,.06), 0 1px 8px rgba(11,44,94,.04);
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--fond); color:var(--texte);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a { color:var(--bleu); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0 0 .6rem; line-height:1.25; font-weight:600; }
h1 { font-size:1.5rem; } h2 { font-size:1.2rem; } h3 { font-size:1rem; }
p { margin:0 0 .7rem; }

/* ------------------------------------------------------------ layout */
.appbar {
  background:var(--blanc); color:var(--texte); padding:0 1.3rem;
  display:flex; align-items:center; gap:1.5rem; height:62px;
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--ligne);
  box-shadow:0 1px 3px rgba(11,44,94,.05);
}
.marque { display:flex; align-items:center; gap:.6rem; white-space:nowrap;
  text-decoration:none; }
.marque:hover { text-decoration:none; }
.marque img { height:34px; width:auto; display:block; }
.marque .mots { line-height:1.15; }
.marque .mots b { display:block; font-weight:700; font-size:.94rem;
  letter-spacing:.4px; color:var(--bleu-sombre); }
.marque .mots span { display:block; font-size:.58rem; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--gris); }

.nav { display:flex; gap:.1rem; flex:1; overflow-x:auto; }
.nav a {
  color:var(--texte-doux); padding:.45rem .72rem; border-radius:var(--r);
  font-size:.87rem; white-space:nowrap; font-weight:500;
}
.nav a:hover { background:var(--bleu-clair); text-decoration:none; color:var(--bleu); }
.nav a.actif { background:var(--bleu-clair); color:var(--bleu-sombre); font-weight:600;
  box-shadow:inset 0 -2px 0 var(--bleu); }
.appbar .moi { font-size:.78rem; color:var(--texte-doux); text-align:right; white-space:nowrap; }
.appbar .moi b { display:block; color:var(--texte); font-size:.85rem; font-weight:600; }
.appbar .moi a { color:var(--bleu); font-size:.75rem; }

.page { max-width:1500px; margin:0 auto; padding:1.3rem; }
.entete { display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.entete .sous { color:var(--texte-doux); font-size:.87rem; margin:0; }

/* -------------------------------------------------------------- carte */
.carte { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r);
  box-shadow:var(--ombre); margin-bottom:1rem; }
.carte > h2, .carte > h3 { padding:.75rem 1rem; margin:0; border-bottom:1px solid var(--ligne);
  font-size:.92rem; text-transform:uppercase; letter-spacing:.4px; color:var(--texte-doux); }
.carte .corps { padding:1rem; }
.carte .corps.serre { padding:.6rem 1rem; }

.grille { display:grid; gap:1rem; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.g4 { grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); }
.deux-tiers { display:grid; grid-template-columns:2fr 1fr; gap:1rem; }
@media(max-width:1000px){ .deux-tiers{ grid-template-columns:1fr; } }

/* ----------------------------------------------------------- chiffres */
.kpi { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r);
  padding:.9rem 1rem; box-shadow:var(--ombre); }
.kpi .val { font-size:1.85rem; font-weight:700; color:var(--bleu); line-height:1.1; }
.kpi .lib { font-size:.72rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--texte-doux); margin-top:.15rem; }
.kpi .det { font-size:.75rem; color:var(--gris); margin-top:.3rem; }
.kpi.alerte .val { color:var(--rouge); }
.kpi.ok .val { color:var(--vert); }

/* -------------------------------------------------------------- table */
table { width:100%; border-collapse:collapse; font-size:.87rem; }
th { text-align:left; padding:.5rem .7rem; background:var(--gris-clair);
  font-size:.71rem; text-transform:uppercase; letter-spacing:.5px;
  color:var(--texte-doux); font-weight:600; border-bottom:1px solid var(--ligne);
  position:sticky; top:0; }
td { padding:.55rem .7rem; border-bottom:1px solid var(--ligne); vertical-align:middle; }
tbody tr:hover { background:var(--bleu-clair); }
.table-scroll { overflow-x:auto; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.vide { padding:2rem 1rem; text-align:center; color:var(--gris); font-size:.9rem; }

/* ------------------------------------------------------------ badges */
.b { display:inline-block; padding:.13rem .5rem; border-radius:20px; font-size:.72rem;
  font-weight:600; white-space:nowrap; }
.b-gris{background:var(--gris-clair);color:var(--texte-doux);}
.b-bleu{background:var(--bleu-clair);color:var(--bleu-sombre);}
.b-vert{background:var(--vert-clair);color:var(--vert);}
.b-rouge{background:var(--rouge-clair);color:var(--rouge);}
.b-orange{background:var(--orange-clair);color:var(--orange);}
.b-or{background:var(--bleu-clair);color:var(--bleu-sombre);}

.score { display:inline-block; min-width:34px; text-align:center; padding:.13rem .4rem;
  border-radius:var(--r); font-weight:700; font-size:.78rem;
  background:var(--gris-clair); color:var(--texte-doux); }
.score.chaud{background:var(--rouge-clair);color:var(--rouge);}
.score.tiede{background:var(--orange-clair);color:var(--orange);}
.score.froid{background:var(--bleu-clair);color:var(--bleu);}

/* ------------------------------------------------------------ boutons */
.btn { display:inline-block; padding:.45rem .85rem; border-radius:var(--r);
  border:1px solid var(--ligne); background:var(--blanc); color:var(--texte);
  font-size:.85rem; cursor:pointer; font-family:inherit; line-height:1.4; }
.btn:hover { background:var(--gris-clair); text-decoration:none; }
.btn-p { background:var(--bleu); border-color:var(--bleu); color:#fff; font-weight:500; }
.btn-p:hover { background:var(--bleu-sombre); }
.btn-v { background:var(--vert); border-color:var(--vert); color:#fff; }
.btn-r { background:var(--rouge); border-color:var(--rouge); color:#fff; }
.btn-r:hover { background:#8f1e17; }
.btn-s { padding:.25rem .55rem; font-size:.78rem; }
.btn:disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; }
.actions { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }

/* ----------------------------------------------------------- formulaire */
label { display:block; font-size:.78rem; font-weight:600; color:var(--texte-doux);
  margin-bottom:.2rem; }
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=datetime-local],input[type=search],input[type=file],
select,textarea {
  width:100%; padding:.45rem .6rem; border:1px solid var(--ligne); border-radius:var(--r);
  font:inherit; font-size:.87rem; background:var(--blanc); color:var(--texte);
}
input:focus,select:focus,textarea:focus { outline:2px solid var(--bleu); outline-offset:-1px; }
textarea { min-height:80px; resize:vertical; }
.champ { margin-bottom:.7rem; }
.ligne-champs { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.7rem; }
.case { display:flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:400;
  color:var(--texte); margin-bottom:.4rem; }
.case input { width:auto; }
.aide { font-size:.75rem; color:var(--gris); margin-top:.2rem; }

/* ------------------------------------------------------------ messages */
.flash { padding:.7rem 1rem; border-radius:var(--r); margin-bottom:.8rem; font-size:.88rem;
  border-left:3px solid; }
.flash.succes{background:var(--vert-clair);border-color:var(--vert);color:#155c39;}
.flash.erreur{background:var(--rouge-clair);border-color:var(--rouge);color:#8f1e17;}
.flash.info{background:var(--bleu-clair);border-color:var(--bleu);color:var(--bleu-sombre);}
.note { background:var(--orange-clair); border-left:3px solid var(--orange); padding:.6rem .9rem;
  border-radius:var(--r); font-size:.84rem; margin-bottom:.8rem; color:#7a4600; }

/* ------------------------------------------------------------- kanban */
.kanban { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; align-items:start; }
@media(max-width:1200px){ .kanban{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px){ .kanban{ grid-template-columns:1fr; } }
.colonne { background:var(--gris-clair); border-radius:var(--r); padding:.55rem;
  min-height:120px; }
.colonne > h3 { font-size:.74rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--texte-doux); margin-bottom:.5rem; display:flex;
  justify-content:space-between; align-items:center; padding:0 .2rem; }
.colonne > h3 .n { background:var(--blanc); border-radius:10px; padding:.05rem .45rem;
  font-size:.72rem; }
.colonne.drop { outline:2px dashed var(--bleu); outline-offset:-3px; }
.fiche { background:var(--blanc); border:1px solid var(--ligne); border-left:3px solid var(--gris);
  border-radius:var(--r); padding:.55rem .65rem; margin-bottom:.5rem; cursor:grab;
  box-shadow:var(--ombre); }
.fiche:hover { border-left-color:var(--bleu); }
.fiche.retard { border-left-color:var(--rouge); }
.fiche .nom { font-weight:600; font-size:.87rem; margin-bottom:.15rem; }
.fiche .meta { font-size:.75rem; color:var(--texte-doux); display:flex;
  justify-content:space-between; gap:.4rem; align-items:center; margin-top:.3rem; }
.fiche .tags { display:flex; gap:.25rem; flex-wrap:wrap; margin-top:.35rem; }
.fiche.glisse { opacity:.4; }
.fiche.dort { background:repeating-linear-gradient(135deg,
  #fff, #fff 8px, #fdfbf6 8px, #fdfbf6 16px); }

/* Pastille de relance — lecture immediate de l etat du dossier */
.relance { display:inline-flex; align-items:center; gap:.3rem; font-size:.73rem;
  font-weight:600; padding:.12rem .45rem; border-radius:20px; cursor:pointer;
  border:1px solid transparent; white-space:nowrap; }
.relance .pastille { width:7px; height:7px; border-radius:50%; flex:none; }
.relance-vert   { background:var(--vert-clair);   color:var(--vert); }
.relance-vert   .pastille { background:var(--vert); }
.relance-orange { background:var(--orange-clair); color:var(--orange); }
.relance-orange .pastille { background:var(--orange); }
.relance-rouge  { background:var(--rouge-clair);  color:var(--rouge); }
.relance-rouge  .pastille { background:var(--rouge); }
.relance-gris   { background:#fff3f0; color:var(--rouge); border-color:#f6d5cd; }
.relance-gris   .pastille { background:var(--rouge); }
.relance:hover { filter:brightness(.96); }

/* Boite de dialogue au depot d une carte */
.voile { position:fixed; inset:0; background:rgba(11,44,94,.32); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:1rem; }
.boite { background:var(--blanc); border-radius:10px; max-width:430px; width:100%;
  box-shadow:0 12px 40px rgba(11,44,94,.22); overflow:hidden; }
.boite h3 { margin:0; padding:.85rem 1.1rem; border-bottom:1px solid var(--ligne);
  font-size:.95rem; }
.boite .corps { padding:1.1rem; }
.boite .pied { padding:.75rem 1.1rem; border-top:1px solid var(--ligne);
  display:flex; gap:.5rem; justify-content:flex-end; background:var(--gris-clair); }
.puces-jours { display:flex; gap:.35rem; flex-wrap:wrap; }
.puces-jours button { padding:.3rem .6rem; font-size:.8rem; border:1px solid var(--ligne);
  background:var(--blanc); border-radius:20px; cursor:pointer; font-family:inherit; }
.puces-jours button.choisi { background:var(--bleu); border-color:var(--bleu); color:#fff; }

/* ----------------------------------------------------------- timeline */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 .9rem 1.4rem; border-left:2px solid var(--ligne);
  margin-left:.35rem; }
.timeline li:last-child { border-left-color:transparent; padding-bottom:0; }
.timeline li::before { content:""; position:absolute; left:-6px; top:.25rem; width:10px;
  height:10px; border-radius:50%; background:var(--gris); border:2px solid var(--blanc); }
.timeline li.entrant::before { background:var(--bleu); }
.timeline li.sortant::before { background:var(--vert); }
.timeline li.systeme::before { background:var(--or); }
.timeline li.echec::before { background:var(--rouge); }
.timeline .quand { font-size:.72rem; color:var(--gris); }
.timeline .quoi { font-size:.87rem; }
.timeline .contenu { font-size:.83rem; color:var(--texte-doux); margin-top:.15rem;
  white-space:pre-wrap; word-break:break-word; }

/* -------------------------------------------------------------- divers */
.barre { height:6px; background:var(--gris-clair); border-radius:3px; overflow:hidden; }
.barre > i { display:block; height:100%; background:var(--bleu); }
.barre > i.plein { background:var(--rouge); }
.barre > i.presque { background:var(--orange); }

.filtres { display:flex; gap:.5rem; flex-wrap:wrap; align-items:flex-end; }
.filtres .champ { margin:0; min-width:140px; }

.paire { display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0;
  border-bottom:1px solid var(--ligne); font-size:.86rem; }
.paire:last-child { border-bottom:none; }
.paire span:first-child { color:var(--texte-doux); }
.paire span:last-child { font-weight:500; text-align:right; }

.onglets { display:flex; gap:.2rem; border-bottom:1px solid var(--ligne); margin-bottom:1rem;
  overflow-x:auto; }
.onglets a, .onglets button { padding:.5rem .9rem; font-size:.87rem; border:none;
  background:none; cursor:pointer; color:var(--texte-doux); border-bottom:2px solid transparent;
  font-family:inherit; white-space:nowrap; }
.onglets a.actif, .onglets button.actif { color:var(--bleu); border-bottom-color:var(--bleu);
  font-weight:600; }

details.bloc { border:1px solid var(--ligne); border-radius:var(--r); background:var(--blanc);
  margin-bottom:.7rem; }
details.bloc > summary { padding:.6rem .9rem; cursor:pointer; font-size:.87rem;
  font-weight:600; color:var(--texte-doux); }
details.bloc > div { padding:0 .9rem .9rem; }

.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.8rem; }
.muet { color:var(--gris); }
.petit { font-size:.78rem; }
.centre { text-align:center; }
.nowrap { white-space:nowrap; }
hr { border:none; border-top:1px solid var(--ligne); margin:.9rem 0; }

/* ---------------------------------------------------------- connexion */
.connexion { max-width:400px; margin:8vh auto; }
.connexion .entete-marque { text-align:center; margin-bottom:1.6rem; }
.connexion .entete-marque img { width:96px; height:auto; margin-bottom:.9rem; }
.connexion .entete-marque b { display:block; font-size:1.32rem; font-weight:700;
  letter-spacing:.6px; color:var(--bleu-sombre); }
.connexion .entete-marque span { display:block; font-size:.63rem; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--gris); margin-top:.3rem; }

/* =====================================================================
   FORMAT MOBILE
   Le CRM sert sur le terrain : un commercial consulte une fiche entre
   deux rendez-vous, sur telephone. Les tableaux defilent horizontalement
   plutot que d etre tronques, et les cibles tactiles font 44 px.
   ===================================================================== */

/* Bouton menu — masque sur grand ecran */
.burger { display:none; flex-direction:column; justify-content:center; gap:4px;
  width:40px; height:40px; padding:0 8px; border:1px solid var(--ligne);
  background:var(--blanc); border-radius:var(--r); cursor:pointer; flex:none; }
.burger span { display:block; height:2px; background:var(--bleu-sombre);
  border-radius:2px; transition:transform .18s, opacity .18s; }
.burger.actif span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.burger.actif span:nth-child(2) { opacity:0; }
.burger.actif span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.voile-nav { position:fixed; inset:0; background:rgba(11,44,94,.35); z-index:48; }

@media (max-width:900px) {
  .burger { display:flex; }
  .appbar { height:56px; padding:0 .8rem; gap:.7rem; }
  .marque img { height:28px; }
  .marque .mots b { font-size:.82rem; }
  .marque .mots span { display:none; }

  /* La navigation devient un tiroir lateral */
  .nav {
    position:fixed; top:0; bottom:0; width:270px; max-width:82vw;
    background:var(--blanc); flex-direction:column; gap:.15rem;
    padding:4.2rem .7rem 1rem; z-index:49; overflow-y:auto;
    box-shadow:2px 0 18px rgba(11,44,94,.16);
    /* Le tiroir coulisse par `left` plutot que par `transform` : moins
       performant en theorie, mais le comportement est verifiable dans tous
       les environnements de rendu, y compris ceux qui ne compositent pas
       les transforms. Sur 270 px la difference est imperceptible. */
    left:-280px; transition:left .22s ease;
  }
  .nav.ouverte { left:0; }
  .nav a { padding:.8rem .8rem; font-size:.95rem; border-radius:var(--r); }
  .nav a.actif { box-shadow:none; border-left:3px solid var(--bleu); }

  .appbar .moi { font-size:.72rem; }
  .appbar .moi b { font-size:.78rem; max-width:110px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
  .appbar .moi .role { display:none; }

  .page { padding:.8rem; }
  .entete { flex-direction:column; align-items:stretch; gap:.6rem; }
  .entete .actions { justify-content:flex-start; }
  h1 { font-size:1.22rem; }

  .deux-tiers { grid-template-columns:1fr; }
  .grille.g4, .grille.g3 { grid-template-columns:repeat(2,1fr); }
  .kpi .val { font-size:1.5rem; }

  /* Kanban : defilement horizontal, une colonne visible a la fois.
     Empiler les 4 colonnes obligerait a scroller sur toute la hauteur
     avant d atteindre la suivante. */
  .kanban { display:flex; overflow-x:auto; gap:.7rem;
    scroll-snap-type:x mandatory; padding-bottom:.5rem;
    -webkit-overflow-scrolling:touch; }
  .kanban .colonne { flex:0 0 84vw; scroll-snap-align:start; }

  /* Cibles tactiles : 44 px, recommandation d accessibilite */
  .btn { padding:.62rem 1rem; font-size:.9rem; min-height:44px; }
  .btn-s { padding:.45rem .7rem; font-size:.82rem; min-height:36px; }
  .nav a, .relance { min-height:36px; display:inline-flex; align-items:center; }

  /* 16 px minimum : en dessous, iOS zoome automatiquement au focus */
  input, select, textarea { font-size:16px; padding:.6rem .7rem; }
  label { font-size:.82rem; }

  .filtres { flex-direction:column; align-items:stretch; }
  .filtres .champ { min-width:0; width:100%; }
  .filtres .btn { width:100%; }

  .ligne-champs { grid-template-columns:1fr; }
  table { font-size:.84rem; }
  th, td { padding:.5rem .55rem; }
  .boite { max-width:100%; margin:0 .5rem; }
  .onglets { gap:0; }
  .onglets a, .onglets button { padding:.6rem .7rem; font-size:.85rem; }
}

@media (max-width:520px) {
  .grille.g4, .grille.g3, .grille.g2 { grid-template-columns:1fr; }
  .marque .mots b { font-size:.74rem; }
  .kanban .colonne { flex:0 0 90vw; }
  .entete .sous { font-size:.82rem; }
  .carte > h2, .carte > h3 { padding:.65rem .8rem; font-size:.85rem; }
  .carte .corps { padding:.8rem; }
  .connexion { margin:4vh auto; padding:0 .3rem; }
}

/* Impression : ni navigation ni boutons */
@media print {
  .appbar, .burger, .voile-nav, .actions, .filtres, .btn { display:none !important; }
  .page { max-width:100%; padding:0; }
  .carte { break-inside:avoid; box-shadow:none; border-color:#ccc; }
  body { background:#fff; }
}