:root{
  --nuit:#2A2320; --nuit-2:#372E2A; --nuit-txt:#C9BCB3; --nuit-actif:#4A3D36;
  --fond:#F7F4F1; --surface:#FFFFFF; --surface-2:#FBF9F7; --ligne:#E9E2DC; --ligne-2:#F2EDE8;
  --txt:#241B17; --txt-2:#5A4D45; --txt-3:#8F8178;
  --cobalt:#8B6B55; --cobalt-2:#74584A; --cobalt-clair:#F3ECE6;
  --menthe:#5E8A73; --menthe-clair:#E8F1EC;
  --ambre:#B98128; --ambre-clair:#F8EEDC;
  --rose:#BD5049; --rose-clair:#F8E7E5;
  --violet:#8A6E9A; --violet-clair:#F1EBF4;
  --r:14px; --r-s:9px; --r-xs:6px;
  --o1:0 1px 2px rgba(42,35,32,.05);
  --o2:0 1px 2px rgba(42,35,32,.04), 0 8px 24px -10px rgba(42,35,32,.16);
  --o3:0 28px 70px -24px rgba(42,35,32,.40);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --nuit:#171210; --nuit-2:#241D1A; --nuit-actif:#3A2F29;
    --fond:#15110F; --surface:#1E1816; --surface-2:#251E1B; --ligne:#352B27; --ligne-2:#2A2320;
    --txt:#F1EAE4; --txt-2:#C4B6AC; --txt-3:#92837A;
    --cobalt:#C9A48A; --cobalt-2:#D8B8A1; --cobalt-clair:#3A2C23;
    --menthe:#8DBBA2; --menthe-clair:#1E2E26; --ambre:#DDAA55; --ambre-clair:#352812;
    --rose:#E08079; --rose-clair:#3A1E1C; --violet:#B89CC7; --violet-clair:#2C2233;
    --o2:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --nuit:#171210; --nuit-2:#241D1A; --nuit-actif:#3A2F29;
    --fond:#15110F; --surface:#1E1816; --surface-2:#251E1B; --ligne:#352B27; --ligne-2:#2A2320;
    --txt:#F1EAE4; --txt-2:#C4B6AC; --txt-3:#92837A;
    --cobalt:#C9A48A; --cobalt-2:#D8B8A1; --cobalt-clair:#3A2C23;
    --menthe:#8DBBA2; --menthe-clair:#1E2E26; --ambre:#DDAA55; --ambre-clair:#352812;
    --rose:#E08079; --rose-clair:#3A1E1C; --violet:#B89CC7; --violet-clair:#2C2233;
    --o2:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%}
body{margin:0; background:var(--fond); color:var(--txt); font:400 14px/1.5 Manrope, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 1}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.01em; color:var(--txt)}
h1,h2,.serif{font-family:"Cormorant Garamond", Georgia, serif; font-weight:600}
h1{font-size:2.05rem; line-height:1.1} h2{font-size:1.28rem} h3{font-size:.92rem} p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px}
svg.i{width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

/* ---------- ossature ---------- */
.app{display:grid; grid-template-columns:252px 1fr; height:100%}
.side{background:var(--nuit); color:var(--nuit-txt); display:flex; flex-direction:column; padding:18px 14px; gap:18px; overflow-y:auto}
.logo{display:flex; align-items:center; gap:11px; padding:4px 8px 10px}
.logo{flex-direction:column; text-align:center; gap:8px; padding:6px 8px 16px; border-bottom:1px solid var(--nuit-2)}
.logo-marque{width:78px; height:78px; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 0 0 3px #4A3D36, 0 10px 24px -8px rgba(0,0,0,.6)}
.logo b{color:#F4ECE6; font:400 2rem/1 "Great Vibes", cursive; display:block}
.logo small{font:600 .66rem/1 "Cormorant Garamond", serif; color:var(--nuit-txt); letter-spacing:.32em; display:block; margin-top:4px}
.logo em{font-style:normal; font-size:.68rem; color:#8E7F75; margin-top:2px}
.groupe{display:flex; flex-direction:column; gap:2px}
.groupe-titre{font-size:.7rem; color:#6F86A0; padding:6px 10px 4px; font-weight:600}
.lien{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-s); color:var(--nuit-txt); background:none; border:0; width:100%; text-align:left; cursor:pointer; font-size:.88rem; font-weight:500}
.lien:hover{background:var(--nuit-2); color:#fff}
.lien[aria-current="true"]{background:var(--nuit-actif); color:#fff; box-shadow:inset 3px 0 0 #C9A48A}
.lien .compteur{margin-left:auto; background:#8B6B55; color:#fff; font-size:.68rem; font-weight:700; border-radius:100px; padding:1px 7px}
.lien .compteur.ambre{background:#B98128}
.side-bas{margin-top:auto; display:flex; flex-direction:column; gap:10px}
.carte-conf{background:var(--nuit-2); border-radius:var(--r-s); padding:12px; font-size:.76rem; line-height:1.45}
.carte-conf b{color:#fff; display:flex; align-items:center; gap:7px; margin-bottom:4px; font-size:.8rem}
.profil{display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--r-s)}
.profil b{color:#fff; font-size:.85rem; display:block}
.profil small{font-size:.72rem}

.principal{display:flex; flex-direction:column; min-width:0; height:100%; overflow:hidden}
.haut{height:64px; flex:0 0 64px; background:var(--surface); border-bottom:1px solid var(--ligne); display:flex; align-items:center; gap:14px; padding:0 26px}
.recherche{flex:1; max-width:440px; display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--ligne); border-radius:var(--r-s); padding:0 12px; height:38px; color:var(--txt-3)}
.recherche input{border:0; background:none; outline:none; flex:1; color:var(--txt); height:100%}
.recherche kbd{font:600 .68rem/1 inherit; border:1px solid var(--ligne); border-radius:4px; padding:3px 5px; color:var(--txt-3); background:var(--surface)}
.haut-droite{margin-left:auto; display:flex; align-items:center; gap:8px}
.icone-btn{position:relative; width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-s); border:1px solid var(--ligne); background:var(--surface); color:var(--txt-2); cursor:pointer}
.icone-btn:hover{background:var(--surface-2)}
.icone-btn .point{position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--rose); border:2px solid var(--surface)}
.contenu{flex:1; overflow-y:auto; padding:26px 26px 60px}
.contenu-int{max-width:1320px; margin:0 auto}

/* ---------- éléments ---------- */
.tete{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.tete p{color:var(--txt-3); margin-top:4px}
.fil{font-size:.78rem; color:var(--txt-3); margin-bottom:6px}
.carte{background:var(--surface); border:1px solid var(--ligne); border-radius:var(--r); box-shadow:var(--o1)}
.carte-tete{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 0}
.carte-tete p{font-size:.78rem; color:var(--txt-3); margin-top:2px}
.carte-corps{padding:16px 18px 18px}
.grille-kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px}
.kpi{padding:16px 18px; display:flex; flex-direction:column; gap:10px}
.kpi-haut{display:flex; align-items:center; justify-content:space-between; color:var(--txt-3); font-size:.8rem; font-weight:500}
.kpi-ico{width:32px; height:32px; border-radius:9px; display:grid; place-items:center}
.kpi-val{font-size:1.65rem; font-weight:700; letter-spacing:-.03em; line-height:1}
.kpi-bas{display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
.tendance{font-size:.76rem; font-weight:600; display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:100px}
.tendance.haut{color:var(--menthe); background:var(--menthe-clair)}
.tendance.bas{color:var(--rose); background:var(--rose-clair)}
.kpi small{font-size:.74rem; color:var(--txt-3)}
.ico-cobalt{background:var(--cobalt-clair); color:var(--cobalt)} .ico-menthe{background:var(--menthe-clair); color:var(--menthe)}
.ico-ambre{background:var(--ambre-clair); color:var(--ambre)} .ico-rose{background:var(--rose-clair); color:var(--rose)} .ico-violet{background:var(--violet-clair); color:var(--violet)}

.rangee{display:grid; gap:16px; margin-bottom:16px}
.r-2-1{grid-template-columns:2fr 1fr} .r-1-1-1{grid-template-columns:1fr 1fr 1fr} .r-1-2{grid-template-columns:1fr 2fr}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 15px; border-radius:var(--r-s); border:1px solid transparent; background:var(--cobalt); color:#fff; font-weight:600; font-size:.86rem; cursor:pointer; white-space:nowrap}
.btn:hover{background:var(--cobalt-2)}
.btn.sec{background:var(--surface); color:var(--txt); border-color:var(--ligne)}
.btn.sec:hover{background:var(--surface-2)}
.btn.menthe{background:var(--menthe)} .btn.menthe:hover{filter:brightness(.93)}
.btn.rose{background:var(--surface); color:var(--rose); border-color:var(--ligne)} .btn.rose:hover{background:var(--rose-clair)}
.btn.petit{height:32px; padding:0 11px; font-size:.8rem}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.segment{display:inline-flex; background:var(--surface-2); border:1px solid var(--ligne); border-radius:var(--r-s); padding:3px}
.segment button{border:0; background:none; padding:6px 13px; border-radius:6px; font-size:.82rem; font-weight:600; color:var(--txt-3); cursor:pointer}
.segment button[aria-pressed="true"]{background:var(--surface); color:var(--txt); box-shadow:var(--o1)}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:100px; white-space:nowrap}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.b-cobalt{color:var(--cobalt); background:var(--cobalt-clair)} .b-menthe{color:var(--menthe); background:var(--menthe-clair)}
.b-ambre{color:var(--ambre); background:var(--ambre-clair)} .b-rose{color:var(--rose); background:var(--rose-clair)}
.b-gris{color:var(--txt-3); background:var(--surface-2)} .b-violet{color:var(--violet); background:var(--violet-clair)}

.avatar{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:.74rem; font-weight:700; color:#fff; flex:0 0 auto}
.avatar.g{width:52px; height:52px; font-size:1rem}
.personne{display:flex; align-items:center; gap:11px}
.personne b{display:block; font-weight:600; font-size:.86rem}
.personne small{color:var(--txt-3); font-size:.76rem}

table{width:100%; border-collapse:collapse}
th{text-align:left; font-size:.74rem; font-weight:600; color:var(--txt-3); padding:11px 16px; background:var(--surface-2); border-bottom:1px solid var(--ligne); white-space:nowrap}
td{padding:12px 16px; border-bottom:1px solid var(--ligne-2); font-size:.85rem; vertical-align:middle}
tbody tr{cursor:pointer} tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right; font-variant-numeric:tabular-nums}
.tableau{overflow-x:auto}
.progression{height:6px; border-radius:100px; background:var(--ligne-2); overflow:hidden; min-width:80px}
.progression i{display:block; height:100%; border-radius:100px; background:var(--cobalt)}
.filtres{display:flex; gap:10px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--ligne); flex-wrap:wrap}
.filtres .recherche{max-width:300px; height:34px}
.vide{padding:28px; text-align:center; color:var(--txt-3)}

/* ---------- graphiques ---------- */
.graph svg{display:block; width:100%; height:auto}
.legende{display:flex; gap:14px; flex-wrap:wrap; font-size:.76rem; color:var(--txt-2)}
.legende span{display:inline-flex; align-items:center; gap:6px}
.legende i{width:9px; height:9px; border-radius:3px; display:inline-block}
.barre-h{display:grid; grid-template-columns:120px 1fr 44px; gap:12px; align-items:center; margin-bottom:14px; font-size:.82rem}
.barre-h .progression{height:9px}

/* ---------- liste « aujourd'hui » ---------- */
.ligne-rdv{display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--ligne-2); cursor:pointer}
.ligne-rdv:last-child{border-bottom:0}
.ligne-rdv .h{font-weight:700; font-size:.86rem}
.ligne-rdv .h small{display:block; font-weight:500; color:var(--txt-3); font-size:.72rem}
.ligne-rdv .quoi b{display:block; font-size:.85rem; font-weight:600}
.ligne-rdv .quoi small{color:var(--txt-3); font-size:.76rem}
.alerte{display:flex; gap:11px; padding:11px 0; border-bottom:1px solid var(--ligne-2); align-items:flex-start}
.alerte:last-child{border-bottom:0}
.alerte b{font-size:.84rem; display:block; font-weight:600}
.alerte small{color:var(--txt-3); font-size:.77rem}

/* ---------- agenda ---------- */
.outils-agenda{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--ligne); flex-wrap:wrap}
.outils-agenda .date{font-size:1.02rem; font-weight:700; min-width:250px}
.fleches{display:flex; gap:4px}
.cal{overflow:auto; max-height:calc(100vh - 250px)}
.cal-int{display:grid; position:relative}
.cal-tete{position:sticky; top:0; z-index:4; background:var(--surface); border-bottom:1px solid var(--ligne); padding:10px 12px; display:flex; align-items:center; gap:10px; min-height:58px}
.cal-tete b{display:block; font-size:.84rem} .cal-tete small{color:var(--txt-3); font-size:.72rem}
.cal-tete.coin{border-right:1px solid var(--ligne)}
.colonne-h{border-right:1px solid var(--ligne)}
.cal-h{height:64px; font-size:.7rem; color:var(--txt-3); text-align:right; padding:0 8px; transform:translateY(-7px)}
.piste{position:relative; border-right:1px solid var(--ligne-2); background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--ligne-2) 31px, var(--ligne-2) 32px)}
.piste:last-child{border-right:0}
.piste.ferme{background:repeating-linear-gradient(135deg, var(--surface-2) 0 8px, transparent 8px 16px)}
.hors{position:absolute; left:0; right:0; background:var(--surface-2); opacity:.75}
.maintenant{position:absolute; left:0; right:0; height:2px; background:var(--rose); z-index:3}
.maintenant::before{content:""; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--rose)}
.evt{position:absolute; border-radius:7px; padding:5px 8px; overflow:hidden; cursor:pointer; font-size:.74rem; line-height:1.3; border-left:3px solid; box-shadow:var(--o1); transition:transform .12s}
.evt:hover{transform:translateY(-1px); box-shadow:var(--o2); z-index:2}
.evt b{display:block; font-size:.78rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.evt span{display:block; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.evt.annule{opacity:.45; text-decoration:line-through}
.evt.absent{background-image:repeating-linear-gradient(135deg, transparent 0 6px, rgba(215,55,63,.10) 6px 12px)}
.evt .statut{position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:50%}
.semaine .evt{position:static; margin-bottom:5px}
.jour-sem{padding:8px; border-right:1px solid var(--ligne-2); min-height:420px}
.jour-sem:last-child{border-right:0}
.jour-sem.aujourdhui{background:var(--cobalt-clair)}

/* ---------- tiroir & modale ---------- */
.voile{position:fixed; inset:0; background:rgba(11,31,51,.42); z-index:40; animation:fondu .18s}
@keyframes fondu{from{opacity:0}}
.tiroir{position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--surface); z-index:41; box-shadow:var(--o3); display:flex; flex-direction:column; animation:glisse .24s cubic-bezier(.2,.9,.3,1)}
@keyframes glisse{from{transform:translateX(40px); opacity:0}}
.tiroir-tete{padding:20px 22px; border-bottom:1px solid var(--ligne); display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.tiroir-corps{padding:20px 22px; overflow-y:auto; flex:1}
.tiroir-pied{padding:14px 22px; border-top:1px solid var(--ligne); display:flex; gap:8px; flex-wrap:wrap}
.modale{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(720px,94vw); max-height:92vh; overflow:auto; background:var(--surface); border-radius:16px; z-index:41; box-shadow:var(--o3); animation:monte .22s cubic-bezier(.2,.9,.3,1)}
@keyframes monte{from{opacity:0; transform:translate(-50%,-46%)}}
.fermer{border:0; background:var(--surface-2); width:32px; height:32px; border-radius:8px; display:grid; place-items:center; cursor:pointer; color:var(--txt-2); flex:0 0 auto}
.infos{display:grid; grid-template-columns:130px 1fr; gap:9px 12px; font-size:.85rem; margin:0}
.infos dt{color:var(--txt-3)} .infos dd{margin:0; font-weight:500}
.section-t{font-size:.76rem; font-weight:700; color:var(--txt-3); margin:22px 0 10px}
.champ{display:flex; flex-direction:column; gap:6px; font-size:.8rem; color:var(--txt-2); font-weight:500}
.champ input,.champ select{height:40px; border:1px solid var(--ligne); border-radius:var(--r-s); padding:0 11px; background:var(--surface); color:var(--txt); font-weight:400; font-size:.88rem}
.champs{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.puces{display:flex; flex-wrap:wrap; gap:7px}
.puces button{height:34px; padding:0 13px; border-radius:var(--r-s); border:1px solid var(--ligne); background:var(--surface); cursor:pointer; font-weight:600; font-size:.82rem}
.puces button:hover{border-color:var(--cobalt); color:var(--cobalt)}
.puces button[aria-pressed="true"]{background:var(--cobalt); border-color:var(--cobalt); color:#fff}

/* ---------- facture ---------- */
.facture{padding:36px 40px; color:#0F1D2B; background:#fff; font-size:.84rem}
.facture-tete{display:flex; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:2px solid #2A2320}
.facture h2{font-size:1.5rem; letter-spacing:-.02em; color:#2A2320}
.facture .muet{color:#5B6B7C; font-size:.78rem; line-height:1.55}
.facture table{margin-top:22px}
.facture th{background:#F3F5F9; color:#445566}
.facture td{border-bottom:1px solid #E3E8EF}
.facture tbody tr{cursor:default} .facture tbody tr:hover{background:none}
.totaux{margin-left:auto; width:280px; margin-top:16px}
.totaux div{display:flex; justify-content:space-between; padding:6px 0}
.totaux .ttc{border-top:2px solid #2A2320; margin-top:6px; padding-top:10px; font-weight:800; font-size:1.02rem}
.mention{margin-top:22px; padding:12px 14px; background:#F3F5F9; border-radius:8px; font-size:.78rem; color:#445566; line-height:1.6}
.ecriture td{font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.8rem}

/* ---------- WhatsApp ---------- */
.wa{background:#E7DED4; border-radius:14px; padding:18px 14px; min-height:300px; background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size:14px 14px}
.bulle{background:#fff; color:#111; border-radius:10px 10px 10px 2px; padding:9px 11px 6px; max-width:88%; font-size:.84rem; line-height:1.45; box-shadow:0 1px 1px rgba(0,0,0,.12); margin-bottom:6px}
.bulle small{display:block; text-align:right; color:#8696A0; font-size:.68rem; margin-top:3px}
.wa-btn{background:#fff; color:#0A7CFF; text-align:center; border-radius:8px; padding:8px; font-size:.84rem; font-weight:600; max-width:88%; margin-bottom:4px; box-shadow:0 1px 1px rgba(0,0,0,.1)}
.bulle.moi{margin-left:auto; background:#D9FDD3; border-radius:10px 10px 2px 10px}

/* ---------- téléphone ---------- */
.scene{display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start}
.telephone{width:360px; height:740px; border-radius:48px; background:#2A2320; padding:12px; box-shadow:var(--o3); margin:0 auto; position:relative}
.telephone::before{content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%); width:96px; height:26px; background:#000; border-radius:20px; z-index:3}
.ecran{width:100%; height:100%; border-radius:37px; overflow:hidden; background:#F7F4F1; color:#0F1D2B; display:flex; flex-direction:column}
.ecran-tete{background:linear-gradient(165deg,#2A2320 0%,#5A4539 60%,#8B6B55 100%); color:#fff; padding:50px 20px 20px}
.ecran-marque{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.ecran-marque i{width:44px; height:44px; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 0 0 2px rgba(255,255,255,.35); flex:0 0 auto}
.ecran-tete .ecran-marque b{font:400 1.7rem/1 "Great Vibes", cursive}
.ecran-tete b{font-size:1.12rem; display:block} .ecran-tete small{opacity:.85; font-size:.78rem}
.ecran-corps{flex:1; overflow-y:auto; padding:16px}
.m-carte{background:#fff; border:1px solid #E3E8EF; border-radius:14px; padding:13px 14px; margin-bottom:9px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px}
.m-carte[aria-pressed="true"]{border-color:#8B6B55; box-shadow:inset 0 0 0 1px #8B6B55; background:#FAF5F1}
.m-carte b{display:block; font-size:.88rem} .m-carte small{color:#7A8A9C; font-size:.76rem}
.m-titre{font-size:.8rem; font-weight:700; color:#445566; margin:6px 0 10px}
.m-jours{display:flex; gap:7px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px}
.m-jour{flex:0 0 52px; text-align:center; background:#fff; border:1px solid #E3E8EF; border-radius:12px; padding:8px 0; cursor:pointer; color:#0F1D2B}
.m-jour small{display:block; font-size:.64rem; color:#7A8A9C} .m-jour b{font-size:1rem}
.m-jour[aria-pressed="true"]{background:#2A2320; border-color:#2A2320; color:#fff} .m-jour[aria-pressed="true"] small{color:#C9BCB3}
.m-heures{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.m-heures button{height:38px; border-radius:10px; border:1px solid #E3E8EF; background:#fff; font-weight:600; cursor:pointer; color:#0F1D2B}
.m-heures button[aria-pressed="true"]{background:#8B6B55; color:#fff; border-color:#8B6B55}
.m-champ{display:block; margin-bottom:10px} .m-champ span{font-size:.76rem; color:#445566; display:block; margin-bottom:4px; font-weight:600}
.m-champ input{width:100%; height:42px; border:1px solid #E3E8EF; border-radius:10px; padding:0 12px; background:#fff; color:#0F1D2B}
.m-case{display:flex; gap:8px; font-size:.76rem; color:#445566; margin-bottom:9px; line-height:1.4} .m-case input{margin-top:2px; accent-color:#8B6B55}
.m-pied{padding:12px 16px 20px; background:#fff; border-top:1px solid #E3E8EF}
.m-pied button{width:100%; height:48px; border-radius:14px; border:0; background:#8B6B55; color:#fff; font-weight:700; font-size:.92rem; cursor:pointer}
.m-pied button[disabled]{background:#CDBBAE; cursor:not-allowed}
.m-retour{background:none; border:0; color:#fff; opacity:.85; cursor:pointer; padding:0; font-size:.8rem; margin-bottom:8px}
.m-ok{text-align:center; padding:26px 8px}
.m-ok .rond{width:64px; height:64px; border-radius:50%; background:#E8F1EC; color:#5E8A73; display:grid; place-items:center; margin:0 auto 14px}
.etapes-m{display:flex; gap:5px; margin-top:12px} .etapes-m i{flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.35)} .etapes-m i.on{background:#fff}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#2A2320; color:#fff; padding:12px 18px; border-radius:12px; font-size:.86rem; font-weight:500; z-index:60; box-shadow:var(--o3); display:flex; align-items:center; gap:10px; animation:monte2 .25s}
@keyframes monte2{from{opacity:0; transform:translate(-50%,10px)}}
.menu-notif{position:absolute; top:52px; right:0; width:360px; background:var(--surface); border:1px solid var(--ligne); border-radius:var(--r); box-shadow:var(--o3); z-index:30; padding:6px 16px}

@media print{
  body *{visibility:hidden}
  .facture, .facture *{visibility:visible}
  .facture{position:absolute; inset:0; padding:0}
  .modale{box-shadow:none; position:static; transform:none; width:100%; max-height:none}
}
@media (max-width:1100px){.grille-kpi{grid-template-columns:repeat(2,1fr)} .r-2-1,.r-1-1-1,.r-1-2,.scene{grid-template-columns:1fr}}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .haut{padding:0 14px} .contenu{padding:16px 14px 50px}
  .grille-kpi{grid-template-columns:1fr 1fr; gap:10px}
  .champs{grid-template-columns:1fr}
  .telephone{transform:scale(.9); transform-origin:top center}
}

.facture-logo{display:flex; align-items:center; gap:14px}
.facture-logo i{width:76px; height:76px; border-radius:12px; background-size:cover; background-position:center; flex:0 0 auto}
.facture-logo b{font:400 2.2rem/1 "Great Vibes", cursive; color:#241B17; display:block}
.facture-logo small{font:600 .7rem/1 "Cormorant Garamond", serif; letter-spacing:.3em; color:#5A4D45}
.kpi-val{font-family:Manrope, sans-serif}

/* ---------- application réelle ---------- */
.toast-erreur{background:var(--rose)}
.contenu input.btn{cursor:text; font-weight:500}
.public{min-height:100vh; min-height:100dvh; display:flex; justify-content:center; background:var(--fond)}
.public .ecran{width:100%; max-width:480px; min-height:100vh; min-height:100dvh; border-radius:0; box-shadow:var(--o3)}
.public .ecran-corps{overflow:visible}
@media (min-width:560px){ .public{padding:28px 16px} .public .ecran{min-height:0; height:calc(100dvh - 56px); max-height:880px; border-radius:28px} .public .ecran-corps{overflow-y:auto} }

/* ---------- page de connexion ---------- */
.connexion{min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.05fr 1fr; background:var(--surface)}
.connexion-visuel{background:linear-gradient(165deg,#2A2320 0%,#4A3A31 55%,#8B6B55 100%); color:#F4ECE6; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:48px; gap:14px}
.connexion-visuel img{width:150px; height:150px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px rgba(255,255,255,.15), 0 24px 60px -20px rgba(0,0,0,.6)}
.connexion-visuel b{font:400 3.1rem/1 "Great Vibes", cursive}
.connexion-visuel small{font:600 .78rem/1 "Cormorant Garamond", serif; letter-spacing:.36em; color:#D9CBC1}
.connexion-visuel p{max-width:340px; color:#CDBFB5; font-size:.9rem; margin-top:14px}
.connexion-form{display:flex; flex-direction:column; justify-content:center; padding:48px clamp(24px,7vw,96px); gap:16px; max-width:560px}
.connexion-form h1{font-size:2.3rem}
.connexion-form .erreur{background:var(--rose-clair); color:var(--rose); padding:11px 14px; border-radius:var(--r-s); font-size:.86rem; font-weight:500}
.connexion-form .champ input{height:46px; font-size:.95rem}
.connexion-form .btn{height:48px; font-size:.95rem}
.connexion-form .pied{font-size:.76rem; color:var(--txt-3); margin-top:18px}
@media (max-width:820px){ .connexion{grid-template-columns:1fr} .connexion-visuel{padding:36px 24px} .connexion-visuel img{width:96px; height:96px} }