/* BüKo Dental — socle : tokens, base, composants partagés, media queries
Découpé depuis styles.css (BUILD 101).
ORDRE DE CHARGEMENT IMPÉRATIF : buko-core.css d'abord, puis la feuille de surface. */
:root{
/* — Marque — */
--petrol:#0E5266;
--petrol-dark:#0A3F4E;
--petrol-darker:#072F3A;
--petrol-soft:#E9F2F3;
--petrol-bg:#F2F7F8;
/* — Neutres — */
--ink:#111417;
--text:#3C464C;
--muted:#5A6B71;
--muted-light:#6B787E;
--line:#E5EAEC;
--line-strong:#DCE6E9;
--white:#FFFFFF;
--bg:#F7F9FA;
/* — États — */
--ok:#157F3D; --ok-soft:#E9F6EE;
--warn:#B45309; --warn-soft:#FDF3E7;
--err:#C0362C; --err-soft:#FCECEA;
--info:#0E5266; --info-soft:#E9F2F3;
/* — Familles de travaux — */
--ortho:#B23A78; --ortho-soft:#FBEAF3;
--fixe:#0E7490; --fixe-soft:#E6F5F8;
--amo:#6D4AC9; --amo-soft:#F0EBFB;
/* — Forme — */
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;
--sh-1:0 1px 2px rgba(17,20,23,.04);
--sh-2:0 12px 30px rgba(14,82,102,.09);
--sh-3:0 24px 60px rgba(17,20,23,.14);
--ring:0 0 0 3px rgba(14,82,102,.14);
/* — Mouvement — */
--t-fast:150ms; --t-base:200ms; --ease:cubic-bezier(.2,.8,.2,1);
/* — Espacement (base 4) — */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px;
/* — Typographie — */
--font:'Inter',system-ui,-apple-system,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;
/* — Alias de compatibilité (ne pas employer dans du code neuf) — */
--mka:var(--petrol); --mka-d:var(--petrol-dark);
--mka-10:var(--petrol-soft); --mka-6:var(--petrol-bg);
--buko-petrol:var(--petrol); --buko-petrol-dark:var(--petrol-dark);
--buko-petrol-soft:var(--petrol-soft); --buko-background-soft:var(--petrol-bg);
--buko-white:var(--white); --buko-ink:var(--ink); --buko-text:var(--text);
--buko-muted:var(--muted); --buko-border:var(--line); --buko-border-strong:var(--line-strong);
--buko-ok:var(--ok); --buko-ok-soft:var(--ok-soft);
--buko-warn:var(--warn); --buko-warn-soft:var(--warn-soft);
--buko-err:var(--err); --buko-err-soft:var(--err-soft);
--app-line:var(--line); --app-grey:var(--muted); --app-bg:var(--bg);
--grey:var(--muted); --ivory:var(--bg); --white:#FFFFFF;
--success:var(--ok); --success-soft:var(--ok-soft);
--danger:var(--err); --danger-soft:var(--err-soft);
--warning:var(--warn); --warning-soft:var(--warn-soft);
--petrol-soft-2:var(--petrol-soft);
--shadow-1:var(--sh-1); --shadow-2:var(--sh-2);
--elev-1:var(--sh-1); --elev-2:var(--sh-2);
--t1:var(--t-fast); --t2:var(--t-base);
--col:var(--petrol); /* surchargée en ligne par étape de production */
--amber:#7FC3D4; --pep:#F0564A; --pep-soft:#FEEDEB;
--sun:#F5A623; --sun-soft:#FDF3E1;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
[hidden]{display:none !important;}
body{
margin:0;
font-family:'Inter',Arial,sans-serif;
color:var(--ink);
background:var(--ivory);
line-height:1.55;
}
h1,h2,h3,.logo-word{font-family:'Inter',Arial,sans-serif; margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.eyebrow{
font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
opacity:.7; margin-bottom:14px; display:block;
}
.btn{
display:inline-block; font-family:'Inter',Arial,sans-serif; font-weight:600; font-size:15px;
padding:11px 22px; border-radius:999px; text-decoration:none; border:1.5px solid transparent;
cursor:pointer; white-space:nowrap;
}
.btn-primary{background:var(--petrol); color:var(--white);}
.btn-primary:hover{background:var(--petrol-dark);}
.btn-outline{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-outline:hover{background:var(--ink); color:var(--ivory);}
/* ========================================================= SITE PUBLIC ========================================================= */ header.site-header{
position:sticky; top:0; z-index:50;
background:rgba(247,242,232,.94);
backdrop-filter:blur(6px);
border-bottom:1px solid var(--line);
}
.logo-mark{display:flex; align-items:center;}
.logo-mark img{height:46px; width:auto; border-radius:8px;}
nav.main-nav{display:flex; gap:4px; align-items:center;}
nav.main-nav > a, .has-dropdown > a{
font-size:14.5px; font-weight:600; text-decoration:none; color:var(--ink);
opacity:.8; padding:9px 11px; display:flex; align-items:center; gap:5px; cursor:pointer;
}
nav.main-nav > a:hover, .has-dropdown:hover > a{opacity:1;}
.dropdown .soon{
font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--grey);
background:var(--ivory); padding:3px 8px; border-radius:999px;
}
.hero{background:var(--petrol); color:var(--ivory); padding:92px 0 96px;}
.hero .eyebrow{color:var(--ivory); opacity:.75;}
.hero h1{font-size:clamp(34px,5.2vw,58px); font-weight:800; line-height:1.1; max-width:19ch; margin-bottom:24px;}
.hero p.lead{font-size:19px; max-width:62ch; color:var(--ivory); opacity:.92; margin-bottom:36px;}
section{padding:92px 0;}
section h2{font-size:clamp(28px,3.4vw,40px); font-weight:800; line-height:1.15; max-width:20ch; margin-bottom:20px;}
section > .wrap > p.section-lead{font-size:17px; color:var(--grey); max-width:62ch; margin-bottom:20px;}
/* Plateforme (section publique) */ .platform-section{background:var(--ivory);}
.platform-list li .mark{color:var(--petrol); font-family:'Inter',Arial,sans-serif; font-weight:800; font-size:15px; flex:0 0 auto; line-height:1.5;}
/* aperçu maquette */ .preview-card{
background:var(--white); border:1px solid var(--line); border-radius:20px;
box-shadow:0 24px 48px rgba(14,82,102,.10); padding:0; overflow:hidden;
}
.marquee-section .wrap{text-align:center; margin-bottom:34px;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.field{margin-bottom:20px;}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px;}
.field input, .field textarea, .field select{
width:100%; font-family:'Inter',Arial,sans-serif; font-size:15px; padding:12px 14px;
border:1.5px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink);
}
.field textarea{min-height:110px; resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--petrol); outline-offset:1px;}
form.contact-form .btn{width:100%; text-align:center; border:none;}
footer.site-footer{background:var(--petrol-darker); color:var(--ivory); padding:52px 0 32px;}
footer.site-footer nav{display:flex; gap:26px; flex-wrap:wrap;}
footer.site-footer nav a{font-size:14.5px; text-decoration:none; opacity:.8; cursor:pointer;}
footer.site-footer nav a:hover{opacity:1;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; opacity:.6;}
/* ========================================================= APP (plateforme praticien) ========================================================= */ #view-app{display:flex; min-height:100vh; background:var(--app-bg); color:var(--ink);}
.demo-banner{
background:#FBF3E4; border:1px solid #EAD9B4; color:#7A5512;
font-size:13px; border-radius:12px; padding:10px 16px; margin-bottom:24px;
display:flex; justify-content:space-between; gap:14px; align-items:center;
}
.demo-banner button{background:none; border:none; cursor:pointer; font-size:16px; color:inherit;}
.card{
background:var(--white); border:1px solid var(--app-line); border-radius:16px;
padding:26px; margin-bottom:24px;
}
.card h3{font-size:17px; font-weight:800; margin-bottom:16px;}
.card .sub{font-size:13.5px; color:var(--app-grey); margin:-10px 0 18px;}
.stat{
background:var(--white); border:1px solid var(--app-line); border-radius:16px; padding:20px 22px;
}
.stat .n{font-family:'Inter',Arial,sans-serif; font-size:32px; font-weight:800; color:var(--petrol);}
.stat .l{font-size:13px; color:var(--app-grey); font-weight:600; margin-top:2px;}
.stat.warn .n{color:var(--warn);}
.action-item{
display:flex; justify-content:space-between; align-items:center; gap:16px;
padding:14px 0; border-top:1px solid var(--app-line); flex-wrap:wrap;
}
.action-item:first-of-type{border-top:none; padding-top:0;}
.action-item .t{font-size:14.5px;}
.action-item .t strong{font-weight:700;}
.btn-sm{padding:8px 16px; font-size:13.5px; border:none;}
.feed li{
list-style:none; font-size:14px; color:var(--app-grey);
padding:11px 0; border-top:1px solid var(--app-line);
}
.feed{margin:0; padding:0;}
.feed li:first-child{border-top:none; padding-top:0;}
.feed li strong{color:var(--ink); font-weight:600;}
.feed li .when{font-size:12px; opacity:.75; display:block; margin-top:2px;}
/* Patients */ .page-head{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.search-input{
border:1.5px solid var(--app-line); border-radius:999px; padding:10px 18px; font-size:14px;
font-family:'Inter',Arial,sans-serif; width:min(320px,100%); background:var(--white);
}
.search-input:focus{outline:2px solid var(--petrol);}
.ptable-head, .pgrid{
display:grid; grid-template-columns:1.5fr 1fr .9fr 1.2fr 1.5fr 34px;
gap:12px; align-items:center;
}
.ptable-head{
padding:0 18px 12px; font-size:12px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--app-grey);
}
.pname strong{font-weight:800;}
.smilelink{color:var(--petrol); font-weight:600; font-size:14px; text-decoration:none;}
.smilelink:hover{text-decoration:underline;}
.chev{color:var(--app-grey); transition:transform .18s ease; text-align:center;}
.badge{display:inline-flex; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap;}
.b-prog{background:#E7F0F2; color:var(--petrol);}
.b-wait{background:#FBF3E4; color:#9A6A17;}
.b-done{background:#E8F3EC; color:#22754A;}
.pdetail{padding:6px 22px 24px; border-top:1px solid var(--app-line); background:#FBFCFC;}
.pactions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
.btn-outline-app{
border:1.5px solid var(--app-line); color:var(--ink); background:var(--white);
border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none;
}
.btn-outline-app:hover{border-color:var(--petrol); color:var(--petrol);}
/* Frise / stepper */ .stepper{display:flex; align-items:flex-start;}
.stepper .st{flex:1; text-align:center; position:relative; min-width:0;}
.stepper .st::before{
content:''; position:absolute; top:10px; left:-50%; width:100%; height:2px; background:#D8E2E5;
}
.stepper .st:first-child::before{display:none;}
.stepper .dot{
width:20px; height:20px; border-radius:50%; background:var(--white);
border:2px solid #C6D3D7; margin:0 auto 8px; position:relative; z-index:1;
}
.stepper .st.done::before, .stepper .st.current::before{background:var(--petrol);}
.stepper .st.done .dot{background:var(--petrol); border-color:var(--petrol);}
/* Coche tracée en CSS : rendu identique sur tous les systèmes, sans dépendre d'une police */ .stepper .st.done .dot::after{
content:''; position:absolute; left:50%; top:47%;
width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0;
transform:translate(-50%,-55%) rotate(45deg);
}
.stepper .st.current .dot{border-color:var(--petrol); box-shadow:0 0 0 4px rgba(14,82,102,.18);}
.stepper .lbl{font-size:11px; color:var(--app-grey); font-weight:600; padding:0 4px;}
.stepper .st.current .lbl{color:#B27516;}
.stepper .st.done .lbl{color:var(--petrol);}
/* Facturation */ .tabs{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap;}
.tab{
background:var(--white); border:1.5px solid var(--app-line); border-radius:999px;
padding:9px 20px; font-size:14px; font-weight:600; cursor:pointer; color:var(--app-grey);
}
.tab.active{background:var(--petrol); border-color:var(--petrol); color:var(--white);}
.pdf-link{color:var(--petrol); font-weight:600; font-size:13.5px; text-decoration:none; cursor:pointer;}
.pdf-link:hover{text-decoration:underline;}
.trace-note{font-size:13px; color:var(--app-grey); margin-top:18px; max-width:70ch;}
/* Compte */ .form-2col{display:grid; grid-template-columns:1fr 1fr; gap:0 28px;}
.checkline{display:flex; align-items:center; gap:10px; font-size:14.5px; margin:6px 0 18px;}
.days{display:flex; gap:10px; flex-wrap:wrap;}
.days label{
display:flex; gap:7px; align-items:center; font-size:13.5px;
border:1.5px solid var(--app-line); border-radius:999px; padding:7px 14px; cursor:pointer;
}
/* Ressources */ .res-group{margin-bottom:34px;}
/* Modal */ .modal-back{
position:fixed; inset:0; background:rgba(8,47,58,.45); z-index:100;
display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
background:var(--white); border-radius:20px; width:min(640px,100%);
max-height:90vh; overflow-y:auto; padding:34px;
}
.modal h3{font-size:21px; font-weight:800; margin-bottom:6px;}
.modal .sub{font-size:14px; color:var(--app-grey); margin-bottom:24px;}
.upzone{
border:1.5px dashed #B9CCD2; border-radius:12px; padding:22px; text-align:center;
font-size:13.5px; color:var(--app-grey); margin-bottom:18px; background:#FBFCFC;
}
.modal-actions{display:flex; justify-content:flex-end; gap:12px; margin-top:10px;}
/* Toast */ #toast{
position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
background:var(--ink); color:var(--ivory); padding:12px 22px; border-radius:999px;
font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s ease; z-index:200;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
/* =================== COUCHE MODERNE =================== */ html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:rgba(14,82,102,.18);}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#C7D4D8;border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}
.btn{transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
.btn-primary{background:linear-gradient(135deg,#106079,#0E5266 55%,#0B4557);box-shadow:0 6px 16px rgba(14,82,102,.26);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(14,82,102,.30);}
.btn:active{transform:translateY(0);}
.field input,.field textarea,.field select{border-radius:12px;transition:border-color .15s ease,box-shadow .15s ease;background:#fff;border-color:#E3E9EB;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--petrol);box-shadow:var(--ring);}
.search-input{transition:box-shadow .15s ease,border-color .15s ease;}
.search-input:focus{outline:none;border-color:var(--petrol);box-shadow:var(--ring);}
#view-app{background:radial-gradient(1100px 520px at 88% -6%,rgba(14,82,102,.08),transparent 60%),var(--app-bg);}
.card,.stat{box-shadow:var(--shadow-1);border-color:#E6ECEE;}
.card{border-radius:16px;}
.stat{border-radius:16px;transition:transform .16s ease,box-shadow .16s ease;}
.stat:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(8,47,58,.10);}
.badge{gap:7px;align-items:center;}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.pdetail{animation:fadeUp .22s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
#toast{box-shadow:0 14px 34px rgba(8,24,30,.35);}
.modal{border-radius:20px;box-shadow:0 30px 80px rgba(8,24,30,.30);}
/* ===== EXTRAS ESPACE PRATICIEN ===== */ /* ---- Ajustements espace praticien autonome ---- */ .page-title{
font-family:'Inter',Arial,sans-serif; font-weight:800; font-size:22px;
margin:4px 0 20px;
}
/* ===== EXTRAS ESPACE LABORATOIRE ===== */ /* =================== EXTRAS ESPACE LABORATOIRE =================== */ .mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.02em;}
.page-title{font-family:'Inter',Arial,sans-serif; font-weight:800; font-size:22px; margin:4px 0 20px;}
.role-chip{font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap;}
.role-admin{background:rgba(14,82,102,.10); color:var(--petrol);}
.role-emp{background:rgba(217,150,51,.16); color:#9A6A17;}
/* Segmented (choix de rôle) */ .seg{display:flex; background:#EDF2F3; border-radius:999px; padding:4px; gap:4px; margin:4px 0 20px;}
.seg button{flex:1; border:none; background:transparent; padding:10px; border-radius:999px;
font-family:'Inter',Arial,sans-serif; font-weight:600; font-size:14px; cursor:pointer; color:var(--app-grey);}
.seg button.on{background:#fff; color:var(--petrol); box-shadow:0 2px 8px rgba(8,47,58,.14);}
/* Kanban production */ .kb{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; align-items:flex-start;}
/* Passerelle */ .conn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:8px;}
.conn{background:#fff; border:1px solid var(--app-line); border-radius:16px; padding:18px; box-shadow:var(--shadow-1);}
.conn .cname{font-family:'Inter',Arial,sans-serif; font-weight:800; font-size:15px;
display:flex; gap:9px; align-items:center; margin-bottom:5px;}
.cdot{width:9px; height:9px; border-radius:50%; background:#22754A; flex-shrink:0;}
.cdot.off{background:#B9C6CA;}
.conn .cnote{font-size:12.5px; color:var(--app-grey); margin-bottom:14px;}
.inbox-row{display:grid; grid-template-columns:110px 1.2fr 1fr .95fr 230px; gap:12px; align-items:center;
padding:15px 4px; border-top:1px solid var(--app-line); font-size:14px;}
.inbox-row:first-of-type{border-top:none;}
.src{font-size:12px; font-weight:700; padding:4px 10px; border-radius:8px;
background:rgba(14,82,102,.08); color:var(--petrol); display:inline-block;}
.inbox-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.got{font-size:12.5px; font-weight:700; color:#22754A;}
.ev{position:relative; padding:0 0 16px;}
.ev::before{content:''; position:absolute; left:-24px; top:3px; width:12px; height:12px; border-radius:50%;
background:var(--petrol); box-shadow:0 0 0 3px rgba(14,82,102,.14);}
.ev.next::before{background:#fff; border:2.5px solid var(--petrol); box-shadow:0 0 0 4px rgba(14,82,102,.16);}
.ev.note::before{background:#fff; border:2.5px solid var(--petrol);}
.ev .et{font-weight:700; font-size:13.5px;}
.ev .ed{font-size:12.5px; color:var(--app-grey); margin-top:1px;}
.note-input{display:flex; gap:8px; margin-top:6px;}
.note-input input{flex:1; border:1.5px solid var(--app-line); border-radius:12px; padding:9px 13px;
font-family:'Inter',Arial,sans-serif; font-size:13.5px;}
.note-input input:focus{outline:none; border-color:var(--petrol); box-shadow:var(--ring);}
/* Modal large + grille cas */ .modal.modal-lg{width:min(880px,100%);}
/* Praticiens */ .prat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.prat-card{background:#fff; border:1px solid var(--app-line); border-radius:16px; padding:20px; box-shadow:var(--shadow-1);}
.prat-top{display:flex; gap:12px; align-items:center; margin-bottom:12px;}
.prat-av{width:42px; height:42px; border-radius:12px; background:rgba(14,82,102,.10); color:var(--petrol);
font-family:'Inter',Arial,sans-serif; font-weight:800; display:flex; align-items:center; justify-content:center;}
.prat-name{font-weight:800; font-size:15px;}
.prat-sub{font-size:12.5px; color:var(--app-grey);}
.prat-meta{font-size:13px; color:var(--app-grey); margin-bottom:14px; line-height:1.7;}
.prat-meta strong{color:var(--ink);}
.prat-actions{display:flex; gap:8px; flex-wrap:wrap;}
/* Équipe */ .team-row{display:grid; grid-template-columns:1.2fr 1fr 1.6fr auto; gap:12px; align-items:center;
padding:14px 4px; border-top:1px solid var(--app-line); font-size:14px;}
.team-row:first-of-type{border-top:none;}
.perm{font-size:12px; color:var(--app-grey);}
/* Messagerie labo (fils par praticien) */ .threads{background:#fff; border:1px solid var(--app-line); border-radius:16px; overflow:hidden;}
.thread{padding:14px 16px; border-bottom:1px solid var(--app-line); cursor:pointer;
display:flex; justify-content:space-between; align-items:center; gap:10px;}
.thread:last-child{border-bottom:none;}
.thread:hover{background:#FAFCFC;}
.thread.on{background:rgba(14,82,102,.06); box-shadow:inset 3px 0 0 var(--petrol);}
.thread .tn{font-weight:700; font-size:14px;}
.thread .tl{font-size:12px; color:var(--app-grey); margin-top:2px;}
.unread{width:9px; height:9px; border-radius:50%; background:var(--petrol); flex-shrink:0;}
/* ============ VISIONNEUSE 3D INTÉGRÉE ============ */ .viewer-modal{width:min(1000px,100%);}
.viewer-head{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.viewer-head h3{margin:0;}
.viewer-head .vstep{font-size:13.5px; color:var(--app-grey); font-weight:600;}
.viewer-stage{position:relative; height:430px; border-radius:16px; overflow:hidden;
background:radial-gradient(900px 420px at 50% 0%, #123A49 0%, #0B2733 55%, #071B23 100%);
border:1px solid rgba(255,255,255,.06);}
.viewer-stage canvas{display:block; width:100%; height:100%;}
.viewer-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:#B9CDD4; font-size:14px; text-align:center; padding:30px;}
.viewer-hint{position:absolute; left:16px; bottom:14px; font-size:11.5px; color:rgba(247,242,232,.55); pointer-events:none;}
.viewer-tag{position:absolute; right:16px; top:14px; font-size:11px; font-weight:800; letter-spacing:.08em;
text-transform:uppercase; color:rgba(247,242,232,.75); background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14); padding:5px 11px; border-radius:999px;}
.viewer-controls{display:flex; gap:16px; align-items:center; margin-top:16px; flex-wrap:wrap;}
.vplay{border:none; background:var(--petrol); color:#fff; width:42px; height:42px; border-radius:12px; cursor:pointer; font-size:15px;}
.vplay:hover{background:var(--petrol-dark);}
.vslider{flex:1; min-width:180px; accent-color:var(--petrol); height:6px;}
.vlabel{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--app-grey); min-width:110px; text-align:right;}
.viewer-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap;}
:focus-visible{outline:3px solid rgba(14,82,102,.45); outline-offset:2px; border-radius:8px;}
/* =================== CORRECTIFS & AJOUTS =================== */ /* Menu déroulant : zone tampon + délai de fermeture (clic facile) */ .has-dropdown::after{content:''; position:absolute; left:-10px; right:-10px; top:100%; height:18px;}
/* Cases à cocher : ne pas hériter du width:100% des champs */ .field input[type="checkbox"], .checkline input[type="checkbox"], .days input{width:auto; accent-color:var(--petrol);}
/* Menu mobile : plein écran, bouton de fermeture, items plus grands */ .nav-close{display:none; position:absolute; top:14px; right:16px; width:46px; height:46px; align-items:center; justify-content:center;
background:none; border:none; font-size:32px; color:var(--ink); cursor:pointer;}
/* Mise en avant "À faire" / "À payer" */ .card.hl-todo, .card.hl-pay{border:1.5px solid #E8CE9A;
background:linear-gradient(0deg, rgba(217,150,51,.07), rgba(217,150,51,.07)), #FFFFFF;}
.card.hl-todo > h3, .card.hl-pay > h4{color:#9A6A17;}
/* Modal "Commander" */ .order-choice{display:grid; gap:12px;}
.order-opt{text-align:left; border:1.5px solid var(--app-line); background:#fff; border-radius:12px;
padding:16px 18px; cursor:pointer; font-family:'Inter',Arial,sans-serif; transition:border-color .15s ease, box-shadow .15s ease;}
.order-opt:hover{border-color:var(--petrol); box-shadow:var(--shadow-1);}
.order-opt strong{display:block; font-family:'Inter',Arial,sans-serif; font-weight:800; font-size:15px; margin-bottom:4px;}
.order-opt span{font-size:13px; color:var(--app-grey);}
/* Visionneuse : mode Smile Web intégré (iframe) */ .viewer-stage iframe{width:100%; height:100%; border:0; display:block; background:#fff;}
.viewer-controls.hidden{display:none;}
.viewer-extlink{font-size:12.5px; color:var(--app-grey); margin:10px 2px 0;}
.viewer-extlink a{color:var(--petrol); font-weight:600;}
/* =================== AJOUTS V3 =================== */ /* Bouton Commander centré au-dessus de la vue d'ensemble */ .order-cta{display:flex; justify-content:center; margin:2px 0 28px;}
.order-cta .btn{font-size:16px; padding:14px 38px;}
/* Aperçu Smile Web sur l'accueil */ .mini-viewer{height:520px;}
/* Dépôt STL obligatoire */ .upzone{cursor:pointer; transition:border-color .15s ease, background .15s ease;}
.upzone.ok{border-color:#22754A; color:#1D6A41; background:#F1F8F3; border-style:solid;}
.upzone.err{border-color:#B23B3B; color:#8F2F2F; background:#FBF1F0;}
input.err, textarea.err{border-color:#B23B3B !important; box-shadow:0 0 0 4px rgba(178,59,59,.12) !important;}
/* Cartes "Nos engagements" */ .eng-grid{grid-template-columns:repeat(4,1fr); gap:18px; border-top:none; margin-top:40px;}
/* =================== AJOUTS V4 =================== */ /* Bouton Me connecter du header : texte blanc (priorité sur nav a) */ nav.main-nav > a.btn-primary{color:var(--white); opacity:1;}
nav.main-nav > a.btn-primary:hover{color:var(--white);}
/* Items "Nos Produits" non cliquables */ .has-dropdown > .navlink{font-size:14.5px; font-weight:600; color:var(--ink); opacity:.8;
padding:9px 11px; display:flex; align-items:center; gap:5px; cursor:default;}
/* Carrousel partenaires : logos + boucle sans trou */ .marquee-track{display:flex; width:max-content; animation:scroll 30s linear infinite;}
/* Liste plateforme : le texte passe à la ligne sans casser l'alignement de la flèche */ .platform-grid > div{min-width:0;}
/* Menu mobile : pleine hauteur + verrouillage du fond */ /* Réponses rapides messagerie */ .qr-row{display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px 0;}
.qr{border:1.5px solid var(--app-line); background:#fff; border-radius:999px; padding:7px 13px;
font-family:'Inter',Arial,sans-serif; font-weight:600; font-size:12.5px; cursor:pointer; color:var(--petrol);}
.qr:hover{border-color:var(--petrol); background:rgba(14,82,102,.05);}
/* Dépôt de documents (drag & drop) */ .dz{border:2px dashed #B9CCD2; border-radius:12px; padding:26px; text-align:center; color:var(--app-grey);
font-size:13.5px; background:#FBFCFC; cursor:pointer; transition:border-color .15s ease, background .15s ease;}
.dz.over{border-color:var(--petrol); background:rgba(14,82,102,.05);}
.dz.ok{border-color:#22754A; color:#1D6A41; background:#F1F8F3;}
/* KPI pilotage laboratoire */ .kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
.kpi{background:#FBFCFC; border:1px solid var(--app-line); border-radius:12px; padding:14px 16px;}
.kpi .n{font-family:'Inter',Arial,sans-serif; font-weight:800; font-size:22px; color:var(--petrol);}
.kpi .l{font-size:12px; color:var(--app-grey); font-weight:600; margin-top:2px;}
.delai-row{display:flex; align-items:center; gap:12px; font-size:13px; margin:9px 0;}
.delai-row .dl{min-width:170px;}
.delai-row .bar{flex:1; height:8px; background:#EDF2F3; border-radius:999px; overflow:hidden;}
.delai-row .bar i{display:block; height:100%; background:var(--petrol); border-radius:999px;}
.delai-row .v{font-family:'IBM Plex Mono',monospace; font-size:12px; min-width:52px; text-align:right;}
/* Curseur d'étape (modal cas) */ .step-slider{width:100%; accent-color:var(--petrol); margin-top:4px;}
.step-slider-label{font-size:13.5px; font-weight:700; color:var(--petrol); margin-top:8px;}
/* Objectif de production (employé) */ .goal-wrap{display:flex; align-items:center; gap:14px; margin:10px 0 4px;}
.goal-bar{flex:1; height:12px; background:#EDF2F3; border-radius:999px; overflow:hidden;}
.goal-bar i{display:block; height:100%; background:linear-gradient(90deg,#0E5266,#1B7D93); border-radius:999px;}
.goal-v{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;}
.task-line{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--app-line); font-size:14px;}
.task-line:first-of-type{border-top:none;}
#view-app .page-title{margin:0 0 12px;}
.demo-banner{margin-bottom:16px;}
/* Carrousel partenaires : logos réellement visibles (moins de gris, plus grands) */ .mq img{height:30px; width:auto; filter:none; opacity:.85; display:block;}
/* Interlocuteurs multiples */ .contact-block{border:1px solid var(--app-line); border-radius:12px; padding:16px 18px; margin-bottom:14px; position:relative; background:#FBFCFC;}
.contact-block .rm{position:absolute; top:10px; right:12px; background:none; border:none; color:#B23B3B; font-size:18px; cursor:pointer; line-height:1;}
/* =================== V8 : PILOTAGE GRAPHIQUE =================== */ .chart-2col{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0;}
.chart-box{background:#FBFCFC; border:1px solid var(--app-line); border-radius:12px; padding:16px 18px;}
.chart-title{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:12px;}
.chart-box svg{width:100%; height:auto; display:block;}
.chart-legend{font-size:12px; color:var(--app-grey); margin-top:10px;}
.chart-legend strong{color:var(--ink);}
.delais-wrap{background:#FBFCFC; border:1px solid var(--app-line); border-radius:12px; padding:16px 18px;}
/* Empreintes reçues : colonnes fixes alignées */ .inbox-row{grid-template-columns:86px 1.5fr 150px 200px 150px !important;}
.inbox-row .inbox-actions{justify-content:flex-end;}
.inbox-row .got{white-space:nowrap;}
/* Réponses rapides messagerie */ .qr-wrap{padding:12px 16px 0;}
.qr-label{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--app-grey); margin-bottom:8px;}
.qr-row{display:flex; gap:8px; flex-wrap:wrap; padding:0;}
.qr{border:1.5px solid #C9D8DC; background:#fff; border-radius:999px; padding:8px 14px;
font-family:'Inter',Arial,sans-serif; font-weight:600; font-size:12.5px; cursor:pointer; color:var(--petrol);
transition:background .14s ease, border-color .14s ease, transform .14s ease;}
.qr:hover{border-color:var(--petrol); background:rgba(14,82,102,.06); transform:translateY(-1px);}
/* Équipe : catégories + clients */ .eq-section-title{font-family:'Inter',Arial,sans-serif; font-weight:800; font-size:16px; margin:2px 0 4px; display:flex; align-items:center; gap:10px;}
.eq-section-title .cnt{background:rgba(14,82,102,.08); color:var(--petrol); border-radius:999px; font-size:12px; padding:2px 10px; font-weight:700;}
.client-row{display:grid; grid-template-columns:1.4fr 1.2fr 1fr auto; gap:12px; align-items:center; padding:14px 4px; border-top:1px solid var(--app-line); font-size:14px;}
.client-row:first-of-type{border-top:none;}
.acc-badge{font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap;}
.acc-active{background:#E8F3EC; color:#22754A;}
.acc-pending{background:#FBF3E4; color:#9A6A17;}
.acc-none{background:#EEF1F2; color:#6B7679;}
.opt{padding:11px 14px; cursor:pointer; font-size:14px; border-top:1px solid var(--app-line);}
.opt:first-child{border-top:none;}
.opt:hover{background:rgba(14,82,102,.06);}
.opt .ost{float:right; font-size:12px; color:var(--app-grey); margin-left:10px;}
input[readonly]{background:#F4F7F8; color:var(--app-grey);}
/* =================== V10 =================== */ /* Visionneuse praticien : propositions + panneau d'informations */ #vwPlans{margin-bottom:12px;}
.vw-warn{color:#9A6A17; font-weight:700;}
/* Facturation : suggestions sous le champ de recherche */ #invSuggest{position:absolute; left:0; right:0; top:100%; z-index:30; box-shadow:0 14px 30px rgba(8,47,58,.14);}
/* =================== V11 =================== */ /* Calendrier mensuel (facturation praticien) */ .field-month{position:relative;}
.kbs{background:#fff; border:1px solid var(--app-line); border-radius:12px; padding:12px 16px;}
.kbs .n{font-family:'Inter',Arial,sans-serif; font-weight:800; font-size:20px; color:var(--petrol);}
.kbs .l{font-size:11.5px; color:var(--app-grey); font-weight:600; margin-top:2px;}
.kbs-o .n{color:#B05A1F;}
.kbs-r .n{color:#C24141;}
/* =================== V12 =================== */ .sachet-note{font-size:12.5px; color:#9A6A17; background:#FBF3E4; border:1px solid #EAD9B4;
border-radius:12px; padding:10px 14px; margin:-6px 0 16px; line-height:1.6;}
.gw-note{font-size:13px; color:#9A6A17; background:#FBF3E4; border:1px solid #EAD9B4;
border-radius:12px; padding:12px 16px; margin-bottom:16px; line-height:1.65;}
.scan-row{display:flex; gap:10px; align-items:center; margin-bottom:10px;}
.scan-row select{flex:1;}
.scan-row .rm{background:none; border:none; color:#B23B3B; font-size:18px; cursor:pointer; line-height:1; padding:4px;}
/* =================== V13 =================== */ /* Lignes Clients/praticiens : colonnes identiques sur toutes les lignes */ .client-row{grid-template-columns:1.35fr 1.25fr 200px 140px;}
.client-row > div:last-child{display:flex; justify-content:flex-end;}
.eq-section-title{margin:4px 0 10px;}
/* =================== V14 =================== */ /* Colonnes patients : largeurs identiques sur toutes les lignes (minmax neutralise l'élargissement par le contenu) + données alignées à gauche */ .ptable-head, .pgrid{
grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.6fr) 34px;
}
.pgrid > div, .ptable-head > div{min-width:0; text-align:left; justify-self:stretch;}
/* =================== V15 =================== */ /* Cartes engagements : neutraliser les règles héritées du design "séparateurs" (:last-child supprimait la bordure droite de la 4e carte) */ .eng-item, .eng-item:last-child{border:1px solid var(--line);}
/* Filtres production */ .fchip{border:1.5px solid var(--app-line); background:#fff; border-radius:999px; padding:8px 16px;
font-family:'Inter',Arial,sans-serif; font-weight:700; font-size:12.5px; cursor:pointer; color:var(--ink);
transition:all .16s ease;}
.fchip:hover{border-color:var(--petrol);}
.fchip.on{background:var(--petrol); color:#fff; border-color:var(--petrol);}
.fchip .c{opacity:.7; margin-left:5px;}
.tag-mini{font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
padding:3px 8px; border-radius:999px; margin-left:8px; white-space:nowrap;}
.tag-urg{background:#FBEAEA; color:#C24141;}
.tag-out{background:#F1EEFB; color:#6B4EB8;}
/* Badges familles de travaux */ .tag-ortho{background:#FBE7F2; color:#B8367E;}
.tag-fixe{background:#E7EEFB; color:#2F5AB8;}
.tag-amo{background:#F1EAFB; color:#7A3AB8;}
.ptable-head, .pgrid{
grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.6fr) 34px;
}
.ptable-head, .pgrid{
grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.5fr) 34px;
}
/* Cellules de grilles : autoriser le rétrécissement, badges multi-lignes */ .pgrid > div, .ptable-head > div, .prod-row > div{min-width:0;}
/* =================== V32 — DESIGN SYSTEM (UI/UX Pro Max) =================== */ /* Tokens sémantiques : plus de hex bruts pour les états */ /* Interaction : curseur, transitions 150-300 ms, retour au clic */ button, .seg-btn, .fchip, .stat-btn, .pdf-link, .smilelink{cursor:pointer;}
.btn, .btn-outline-app, .seg-btn, .fchip, .pdf-link, .smilelink{
transition:background-color var(--t-base) ease, color var(--t-base) ease,
border-color var(--t-base) ease, box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
.btn:active, .btn-outline-app:active, .seg-btn:active, .fchip:active{transform:translateY(1px);}
/* Cibles tactiles ≥ 44 px */ .icon-btn{min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px;}
/* Focus visible homogène sur les champs */ input:focus-visible, textarea:focus-visible, select:focus-visible{
outline:none; border-color:var(--petrol); box-shadow:0 0 0 3px rgba(14,82,102,.14);
}
/* Élévation douce (Soft UI, orientation confiance/soin) */ .card{box-shadow:var(--elev-1);}
/* ============================================================ DESIGN SYSTEM V1 — PHASE 1 (fondations) · approuvé Pétrole #0E5266 · Inter · suisse · bordures avant ombres ============================================================ */ /* Typographie : Inter pour tout, chasse serrée sur les titres */ body, button, input, select, textarea{font-family:'Inter',system-ui,sans-serif;}
h1, h2, h3, h4, .page-title{font-family:'Inter',system-ui,sans-serif; letter-spacing:-.02em;}
/* Familles de travaux (palette DS) */ .tag-ortho{background:#FBEAF3; color:#B23A78;}
.tag-fixe{background:#E6F5F8; color:#0E7490;}
.tag-amo{background:#F0EBFB; color:#6D4AC9;}
/* Cartes : bordure d'abord, rayon 16 */ .card{border:1px solid var(--app-line); border-radius:16px; box-shadow:var(--elev-1);}
/* Boutons : rayon 10, hover précis, secondaire à bordure */ .btn, .btn-outline-app, .fchip{border-radius:12px;}
.btn.btn-primary:hover, .btn-primary:hover{background:var(--petrol-dark);}
.btn-outline-app{border-color:var(--app-line); box-shadow:0 1px 2px rgba(11,15,20,.05);}
.btn-outline-app:hover{background:var(--app-bg); border-color:#CBD4D9;}
/* Segments : piste grise, segment actif blanc surélevé */ .seg-group{background:var(--app-bg); border-color:var(--app-line); border-radius:12px;}
/* Focus : anneau bleu unifié */ input:focus-visible, textarea:focus-visible, select:focus-visible{
border-color:var(--petrol); box-shadow:0 0 0 3px rgba(11,92,216,.16);
}
:focus-visible{outline-color:var(--petrol);}
.tag-urg{background:var(--danger-soft); color:var(--danger);}
/* Barres d'objectif en bleu */ .goal-bar i{background:var(--petrol);}
/* Badges d'état : pastille + teintes DS */ .b-prog{background:var(--info-soft); color:var(--petrol);}
.b-done{background:var(--success-soft); color:var(--success);}
.b-wait{background:var(--warning-soft); color:var(--warning);}
/* ============================================================ ACCUEIL v2 (.mk2-) — brief approuvé : pétrole, éditorial, sobre ============================================================ */ .mk2-wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
body{color:#111417;}
/* Header épuré, légèrement fixe */ .mk2-h{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid transparent;
transition:border-color 250ms ease, box-shadow 250ms ease;}
/* Bande scanners : même teinte que les autres bandes, séparations identiques */ .mk2-scan{background:var(--mka-6); border-top:1px solid #E6EEF0; border-bottom:1px solid #E6EEF0;}
/* Cartes sur fond teinté : blanches, elles ressortent proprement */ .mk2-sec-tint .mk2-card{background:#fff; border-color:#E1EAEC;}
/* Fond uniforme : plus aucun aplat vif qui dépasse */ html{background:#fff;}
body{background:#fff;}
/* =================== v49 — catalogue compact, prix, alignement =================== */ /* Cartes solutions : le lien se cale en bas, toutes les cartes s'alignent */ .mk2-cards{align-items:stretch;}
/* =================== v50 — réassurance, catalogue, inscription =================== */ /* Espacements verticaux resserrés */ .mk2-sec{padding:48px 0;}
/* Bande de réassurance sous le premier écran */ /* padding:0 — neutralise la règle générique section{padding:92px 0}
/* P8 · le champ fautif est signalé, pas seulement le message */ .mk2-field.err input, .mk2-field.err textarea{border-color:#C0362C; box-shadow:0 0 0 3px #FCECEA;}
/* =================== v57 — espacements du formulaire d'inscription =================== */ /* Sur l'accueil, .mk2-form EST la balise