/* =====================================================================
   CABINET DENTAIRE DES HLM — Feuille de style
   Charte issue du logo : violet profond #421477 / violet clair #B192D6
   ===================================================================== */

:root{
  --violet:        #421477;
  --violet-fonce:  #2E0E54;
  --violet-clair:  #B192D6;
  --violet-pale:   #EDE6F6;
  --violet-brume:  #F7F4FC;

  --texte:         #221533;
  --texte-doux:    #6B6179;
  --texte-faible:  #9A93A5;
  --bordure:       #E4DEEE;
  --fond:          #F6F4FA;
  --blanc:         #FFFFFF;

  --vert:   #0E7A5F;  --vert-fond:   #E3F5EF;
  --rouge:  #B3261E;  --rouge-fond:  #FBE9E7;
  --orange: #9A6400;  --orange-fond: #FFF3DC;
  --bleu:   #1A4F9C;  --bleu-fond:   #E6EFFC;
  --gris:   #5E5868;  --gris-fond:   #ECEAF0;

  --rayon:    10px;
  --rayon-sm: 7px;
  --ombre:    0 1px 2px rgba(34,21,51,.06), 0 4px 16px rgba(34,21,51,.06);
  --ombre-fort: 0 8px 32px rgba(34,21,51,.16);
  --sidebar: 258px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14.5px; line-height:1.55; color:var(--texte);
  background:var(--fond); -webkit-font-smoothing:antialiased;
}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;color:var(--texte)}

/* ---------- Mise en page ------------------------------------------ */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar);flex:0 0 var(--sidebar);
  background:linear-gradient(176deg,var(--violet) 0%,var(--violet-fonce) 100%);
  color:#fff;display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:40;
}
.sidebar__marque{
  padding:20px 18px;display:flex;gap:12px;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.sidebar__marque img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:9px;padding:4px;flex:0 0 auto}
.sidebar__marque strong{display:block;font-size:13px;line-height:1.25;letter-spacing:.02em}
.sidebar__marque span{display:block;font-size:11px;color:var(--violet-clair);margin-top:2px}

.sidebar__nav{flex:1;overflow-y:auto;padding:12px 10px 24px}
.sidebar__groupe{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.45);margin:18px 10px 7px;font-weight:700;
}
.sidebar__lien{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--rayon-sm);
  color:rgba(255,255,255,.84);font-size:13.5px;font-weight:500;margin-bottom:2px;
  transition:background .15s,color .15s;
}
.sidebar__lien:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.sidebar__lien.actif{background:var(--violet-clair);color:var(--violet-fonce);font-weight:700}
.sidebar__lien .ic{width:18px;text-align:center;flex:0 0 18px;font-size:15px}
.sidebar__lien .pastille{
  margin-left:auto;background:rgba(255,255,255,.2);border-radius:20px;
  padding:1px 7px;font-size:11px;font-weight:700;
}
.sidebar__lien.actif .pastille{background:var(--violet);color:#fff}

.principal{flex:1;margin-left:var(--sidebar);display:flex;flex-direction:column;min-width:0}

.topbar{
  background:var(--blanc);border-bottom:1px solid var(--bordure);
  padding:0 26px;height:62px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:30;
}
.topbar h1{font-size:17px}
.topbar__fil{font-size:12px;color:var(--texte-faible);margin-top:1px}
.topbar__droite{margin-left:auto;display:flex;align-items:center;gap:14px}
.avatar{
  width:36px;height:36px;border-radius:50%;background:var(--violet);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
}
.topbar__user{font-size:13px;line-height:1.2;text-align:right}
.topbar__user small{display:block;color:var(--texte-faible);font-size:11.5px}

.contenu{padding:24px 26px 56px;flex:1}
.contenu--large{max-width:1500px}

/* ---------- Cartes & grilles --------------------------------------- */
.carte{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);box-shadow:var(--ombre);margin-bottom:20px}
.carte__tete{padding:15px 18px;border-bottom:1px solid var(--bordure);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.carte__tete h2{font-size:14.5px}
.carte__tete .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.carte__corps{padding:18px}
.carte__pied{padding:14px 18px;border-top:1px solid var(--bordure);background:var(--violet-brume);border-radius:0 0 var(--rayon) var(--rayon);display:flex;gap:8px;flex-wrap:wrap}

.grille{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Tuiles statistiques ------------------------------------ */
.tuile{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);
  padding:17px 18px;box-shadow:var(--ombre);position:relative;overflow:hidden;
}
.tuile::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--violet-clair)}
.tuile--violet::after{background:var(--violet)}
.tuile--vert::after{background:var(--vert)}
.tuile--orange::after{background:var(--orange)}
.tuile--rouge::after{background:var(--rouge)}
.tuile--bleu::after{background:var(--bleu)}
.tuile__libelle{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--texte-faible);font-weight:700}
.tuile__valeur{font-size:28px;font-weight:800;margin:6px 0 2px;letter-spacing:-.02em;color:var(--violet-fonce)}
.tuile__note{font-size:12px;color:var(--texte-doux)}
.tuile__icone{position:absolute;right:14px;top:14px;font-size:22px;opacity:.16}

/* ---------- Tableaux ----------------------------------------------- */
.tableau-conteneur{overflow-x:auto;border-radius:var(--rayon)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--blanc)}
table.tbl thead th{
  background:var(--violet-pale);color:var(--violet-fonce);text-align:left;
  padding:10px 12px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;white-space:nowrap;border-bottom:1px solid var(--bordure);
}
table.tbl tbody td{padding:10px 12px;border-bottom:1px solid var(--bordure);vertical-align:middle}
table.tbl tbody tr:hover{background:var(--violet-brume)}
table.tbl tbody tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .actions-cel{white-space:nowrap;text-align:right}
.vide{padding:42px 20px;text-align:center;color:var(--texte-faible)}
.vide__icone{font-size:34px;opacity:.3;display:block;margin-bottom:8px}

/* ---------- Boutons ------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  padding:8px 15px;border-radius:var(--rayon-sm);border:1px solid transparent;
  font-size:13.5px;font-weight:600;cursor:pointer;background:var(--blanc);
  color:var(--texte);text-decoration:none;transition:.15s;font-family:inherit;line-height:1.3;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:none}
.btn--primaire{background:var(--violet);color:#fff;border-color:var(--violet)}
.btn--primaire:hover{background:var(--violet-fonce);color:#fff}
.btn--secondaire{background:var(--blanc);border-color:var(--bordure);color:var(--violet)}
.btn--secondaire:hover{background:var(--violet-pale)}
.btn--danger{background:var(--rouge);color:#fff;border-color:var(--rouge)}
.btn--danger:hover{background:#8E1D17;color:#fff}
.btn--vert{background:var(--vert);color:#fff;border-color:var(--vert)}
.btn--sm{padding:5px 10px;font-size:12.5px}
.btn--bloc{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-icone{
  width:30px;height:30px;padding:0;border-radius:6px;border:1px solid var(--bordure);
  background:var(--blanc);color:var(--texte-doux);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:14px;text-decoration:none;margin-left:3px;
}
.btn-icone:hover{background:var(--violet-pale);color:var(--violet);text-decoration:none}
.btn-icone--danger:hover{background:var(--rouge-fond);color:var(--rouge)}

/* ---------- Formulaires -------------------------------------------- */
.champ{margin-bottom:14px}
.champ label{display:block;font-size:12.5px;font-weight:600;color:var(--texte-doux);margin-bottom:5px}
.champ label .req{color:var(--rouge)}
.champ input[type=text],.champ input[type=password],.champ input[type=email],
.champ input[type=date],.champ input[type=datetime-local],.champ input[type=number],
.champ input[type=tel],.champ input[type=search],.champ select,.champ textarea,
input.form,select.form,textarea.form{
  width:100%;padding:8.5px 11px;border:1px solid var(--bordure);border-radius:var(--rayon-sm);
  font-size:13.5px;font-family:inherit;color:var(--texte);background:var(--blanc);transition:.15s;
}
.champ input:focus,.champ select:focus,.champ textarea:focus,
input.form:focus,select.form:focus,textarea.form:focus{
  outline:none;border-color:var(--violet-clair);box-shadow:0 0 0 3px rgba(177,146,214,.25);
}
.champ textarea{resize:vertical;min-height:72px}
.champ .aide{font-size:11.5px;color:var(--texte-faible);margin-top:4px}
fieldset.bloc{border:1px solid var(--bordure);border-radius:var(--rayon);padding:16px 18px 6px;margin:0 0 18px}
fieldset.bloc legend{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--violet);padding:0 7px;
}
.case{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.case input{width:15px;height:15px;accent-color:var(--violet);cursor:pointer}

/* ---------- Alertes & badges ---------------------------------------- */
.alerte{
  display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--rayon-sm);
  font-size:13.5px;margin-bottom:16px;border:1px solid transparent;
}
.alerte__icone{font-weight:700;flex:0 0 auto}
.alerte--succes{background:var(--vert-fond);color:var(--vert);border-color:#BFE6DA}
.alerte--erreur{background:var(--rouge-fond);color:var(--rouge);border-color:#F3C9C5}
.alerte--info{background:var(--bleu-fond);color:var(--bleu);border-color:#C9DCF7}
.alerte--alerte{background:var(--orange-fond);color:var(--orange);border-color:#F2DDAE}

.badge{
  display:inline-block;padding:2.5px 9px;border-radius:20px;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.badge--vert{background:var(--vert-fond);color:var(--vert)}
.badge--rouge{background:var(--rouge-fond);color:var(--rouge)}
.badge--orange{background:var(--orange-fond);color:var(--orange)}
.badge--bleu{background:var(--bleu-fond);color:var(--bleu)}
.badge--gris{background:var(--gris-fond);color:var(--gris)}
.badge--violet{background:var(--violet-pale);color:var(--violet)}

/* ---------- Barre de recherche / filtres ---------------------------- */
.filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filtres .champ{margin-bottom:0;min-width:160px}
.filtres .champ--large{flex:1;min-width:230px}

/* ---------- Pagination ---------------------------------------------- */
.pagination{display:flex;gap:5px;justify-content:center;padding:16px;flex-wrap:wrap}
.pagination a,.pagination span{
  padding:6px 11px;border-radius:6px;border:1px solid var(--bordure);
  font-size:13px;color:var(--texte-doux);background:var(--blanc);
}
.pagination a:hover{background:var(--violet-pale);text-decoration:none}
.pagination .actuelle{background:var(--violet);color:#fff;border-color:var(--violet);font-weight:700}

/* ---------- Connexion ------------------------------------------------ */
.page-auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(140deg,var(--violet) 0%,var(--violet-fonce) 55%,#1C0836 100%);
}
.page-auth::before{
  content:'';position:fixed;inset:0;
  background:radial-gradient(circle at 18% 22%,rgba(177,146,214,.33),transparent 42%),
             radial-gradient(circle at 82% 78%,rgba(177,146,214,.22),transparent 45%);
}
.boite-auth{
  position:relative;background:var(--blanc);border-radius:16px;box-shadow:var(--ombre-fort);
  width:100%;max-width:410px;padding:34px 32px 28px;
}
.boite-auth__logo{text-align:center;margin-bottom:22px}
.boite-auth__logo img{max-width:200px;height:auto}
.boite-auth h1{font-size:18px;text-align:center;margin-bottom:4px}
.boite-auth p.sous{text-align:center;color:var(--texte-faible);font-size:13px;margin:0 0 22px}
.boite-auth__pied{text-align:center;font-size:11.5px;color:var(--texte-faible);margin-top:20px}

/* ---------- Dossier patient ------------------------------------------ */
.entete-patient{
  display:flex;gap:16px;align-items:center;background:var(--blanc);border:1px solid var(--bordure);
  border-radius:var(--rayon);padding:18px;margin-bottom:20px;box-shadow:var(--ombre);flex-wrap:wrap;
}
.entete-patient__avatar{
  width:58px;height:58px;border-radius:50%;background:var(--violet-pale);color:var(--violet);
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;flex:0 0 auto;
}
.entete-patient__id{font-size:12.5px;color:var(--texte-faible)}
.entete-patient h1{font-size:20px;margin-bottom:2px}
.entete-patient .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2px 20px}
.fiche div{padding:7px 0;border-bottom:1px dashed var(--bordure)}
.fiche dt,.fiche .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-faible);font-weight:700}
.fiche dd,.fiche .val{margin:2px 0 0;font-size:13.5px}

.onglets{display:flex;gap:4px;border-bottom:1px solid var(--bordure);margin-bottom:18px;flex-wrap:wrap}
.onglets a{
  padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--texte-doux);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;
}
.onglets a:hover{color:var(--violet);text-decoration:none}
.onglets a.actif{color:var(--violet);border-bottom-color:var(--violet)}

/* ---------- Lignes de documents (ordonnance/devis/facture) ----------- */
table.lignes{width:100%;border-collapse:collapse;font-size:13.5px}
table.lignes th{
  background:var(--violet-pale);color:var(--violet-fonce);padding:8px 10px;text-align:left;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
}
table.lignes td{padding:6px 7px;border-bottom:1px solid var(--bordure);vertical-align:top}
table.lignes input,table.lignes select,table.lignes textarea{
  width:100%;padding:6px 8px;border:1px solid var(--bordure);border-radius:5px;font-size:13px;font-family:inherit;
}
table.lignes input:focus,table.lignes select:focus,table.lignes textarea:focus{
  outline:none;border-color:var(--violet-clair);box-shadow:0 0 0 2px rgba(177,146,214,.25);
}
.totaux{margin-left:auto;width:330px;max-width:100%}
.totaux div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--bordure);font-size:13.5px}
.totaux div.grand{border-bottom:none;border-top:2px solid var(--violet);margin-top:4px;padding-top:11px;font-size:16px;font-weight:800;color:var(--violet)}

/* ---------- Permissions ---------------------------------------------- */
table.perms td.mod{font-weight:600}
table.perms td.ck{text-align:center}
table.perms input[type=checkbox]{width:16px;height:16px;accent-color:var(--violet);cursor:pointer}

/* ---------- Documents imprimables (A4) --------------------------------- */
/* Format de page déclaré au niveau racine : certains navigateurs ignorent
   une règle @page imbriquée dans @media print. */
@page{size:A4 portrait;margin:12mm}

.page-document{background:#E8E4F0;padding:0 0 46px;margin:0}
.barre-doc{
  width:210mm;max-width:100%;margin:16px auto 14px;padding:0 4mm;
  display:flex;gap:8px;flex-wrap:wrap;box-sizing:border-box;
}

/* Feuille A4 : 210 × 297 mm, marges intérieures comprises (box-sizing) */
.doc-impression{
  width:210mm;max-width:100%;min-height:297mm;margin:0 auto;
  background:#fff;padding:13mm 13mm 9mm;box-sizing:border-box;
  box-shadow:0 6px 26px rgba(34,21,51,.16);
  display:flex;flex-direction:column;
}
.doc-corps{flex:1 0 auto;display:flex;flex-direction:column;min-width:0}

.doc-entete{display:flex;gap:16px;align-items:center;border-bottom:3px solid var(--violet);padding-bottom:14px;margin-bottom:18px}
.doc-entete img{height:68px;width:auto;flex:0 0 auto}
.doc-entete .coord{margin-left:auto;text-align:right;font-size:11.5px;color:var(--texte-doux);line-height:1.5}
.doc-entete .coord strong{color:var(--violet);font-size:12.5px}
.doc-titre{
  background:var(--violet);color:#fff;padding:9px 16px;border-radius:6px;
  font-size:14.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  text-align:center;margin-bottom:18px;
}
.doc-bloc{margin-bottom:16px}
.doc-bloc h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--violet);margin-bottom:6px;border-bottom:1px solid var(--bordure);padding-bottom:4px}

/* Zone de signature : poussée en bas du contenu, au-dessus du pied de page */
.doc-signature,.doc-signatures{margin-top:auto;padding-top:26px;font-size:12.5px}
.doc-signature{text-align:right}
.doc-signatures{display:flex;gap:40px}
.doc-signatures > div{flex:1}
.doc-signature .trait{display:inline-block;border-top:1px solid var(--texte);width:210px;margin-top:46px;padding-top:5px}
.doc-signatures .trait{display:block;border-top:1px solid var(--texte);margin-top:48px;padding-top:5px}

/* Pied de page : collé au bas de la feuille A4 */
.doc-pied{
  flex:0 0 auto;margin-top:12mm;border-top:1px solid var(--bordure);
  padding-top:7px;font-size:9.5px;color:var(--texte-faible);text-align:center;line-height:1.5;
}

/* Les tableaux des documents ne doivent jamais déborder de la feuille */
.doc-impression table{max-width:100%;border-collapse:collapse}
.doc-impression table td,.doc-impression table th{word-wrap:break-word;overflow-wrap:break-word}
.doc-impression .totaux-doc{margin-left:auto;width:78mm;max-width:100%}

@media print{
  .sidebar,.topbar,.no-print,.pagination,.app > .principal > footer{display:none!important}
  .principal{margin-left:0!important}
  .contenu{padding:0!important}
  html,body{background:#fff!important;margin:0!important;padding:0!important;font-size:11.5px}
  .page-document{background:#fff!important;padding:0!important}
  .doc-impression{
    width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
    box-shadow:none!important;border:none!important;
    /* hauteur utile d'une A4 une fois les marges @page retirées */
    min-height:calc(297mm - 24mm)!important;
  }
  /* Conserver les aplats de couleur (bandeau du titre, en-têtes de tableaux) */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid;page-break-after:auto}
  thead{display:table-header-group}
  .doc-bloc,.doc-signature,.doc-signatures{page-break-inside:avoid}
}

/* ---------- Divers ----------------------------------------------------- */
.muted{color:var(--texte-faible)}
.petit{font-size:12px}
.mb0{margin-bottom:0}.mt16{margin-top:16px}.mt24{margin-top:24px}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.droite{margin-left:auto}
hr.sep{border:none;border-top:1px solid var(--bordure);margin:18px 0}

@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .25s}
  .sidebar.ouvert{transform:none}
  .principal{margin-left:0}
  .burger{display:inline-flex!important}
  .contenu{padding:18px 14px 46px}
  .topbar{padding:0 14px}
}
.burger{
  display:none;width:36px;height:36px;border:1px solid var(--bordure);background:#fff;
  border-radius:7px;align-items:center;justify-content:center;font-size:17px;cursor:pointer;
}