:root{
    --petrol:#0E5266;
    --petrol-dark:#0A3E4D;
    --petrol-darker:#082F3A;
    --ivory:#F7F2E8;
    --ink:#14171A;
    --grey:#55564F;
    --line:#DED2B4;
    --white:#FFFFFF;
    --amber:#D99633;
    --app-bg:#F3F6F7;
    --app-line:#E1E8EA;
    --app-grey:#5E6B6F;
    --radius:18px;
  }
  *{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:'Manrope',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);}
  .btn-on-dark{border-color:rgba(247,242,232,.55); color:var(--ivory); background:transparent;}
  .btn-on-dark:hover{background:rgba(247,242,232,.12);}
  .btn-light{background:var(--ivory); color:var(--petrol-darker);}
  .btn-light:hover{background:var(--white);}

  /* =========================================================
     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);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 32px; max-width:1180px; margin:0 auto; gap:24px;
  }
  .logo-mark{display:flex; align-items:center;}
  .logo-mark img{height:46px; width:auto; border-radius:6px;}
  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;}
  .caret{font-size:11px; opacity:.6;}
  .menu-toggle{display:none; background:none; border:none; font-size:26px; cursor:pointer; color:var(--ink);}
  .has-dropdown{position:relative;}
  .dropdown{
    position:absolute; top:100%; left:0; margin-top:6px;
    background:var(--white); border:1px solid var(--line); border-radius:14px;
    padding:8px; min-width:230px; box-shadow:0 16px 32px rgba(20,23,26,.10);
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .15s ease, transform .15s ease;
  }
  .has-dropdown:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
  .dropdown a{
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 12px; border-radius:9px; font-size:14.5px; font-weight:500;
    color:var(--ink); text-decoration:none; opacity:1;
  }
  .dropdown a:hover{background:var(--ivory);}
  .dropdown .soon{
    font-size:10px; 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;}

  .engagements{background:var(--white);}
  .eng-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    border-top:1px solid var(--line); margin-top:36px;
  }
  .eng-item{padding:32px 26px 32px 0; border-right:1px solid var(--line);}
  .eng-item:last-child{border-right:none;}
  .eng-item h3{font-size:18px; font-weight:700; margin-bottom:10px;}
  .eng-item p{font-size:15px; color:var(--grey); margin:0;}

  /* Plateforme (section publique) */
  .platform-section{background:var(--ivory);}
  .platform-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .platform-list{list-style:none; margin:26px 0 34px; padding:0;}
  .platform-list li{
    padding:14px 0; border-top:1px solid var(--line);
    font-size:15.5px; display:flex; gap:14px; align-items:baseline; color:var(--ink);
  }
  .platform-list li:last-child{border-bottom:1px solid var(--line);}
  .platform-list li .mark{color:var(--petrol); font-family:'Manrope',Arial,sans-serif; font-weight:800; font-size:13px;}
  .platform-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  /* 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;
  }
  .preview-top{display:flex; gap:6px; padding:14px 18px; border-bottom:1px solid var(--app-line); background:#FBFCFC;}
  .preview-top span{width:9px; height:9px; border-radius:50%; background:#D8E2E5;}
  .preview-body{padding:22px;}
  .preview-row{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:12px 14px; border:1px solid var(--app-line); border-radius:12px; margin-bottom:16px;
  }
  .preview-row .pv-name{font-weight:700; font-size:14.5px;}
  .preview-row .pv-sub{font-size:12.5px; color:var(--app-grey);}
  .pv-badge{background:#FBF3E4; color:#9A6A17; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap;}
  .preview-note{font-size:12.5px; color:var(--app-grey); margin:14px 2px 0;}

  .marquee-section{background:var(--white); padding:64px 0;}
  .marquee-section .wrap{text-align:center; margin-bottom:34px;}
  .marquee-wrap{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0;}
  .marquee-track{display:flex; width:max-content; animation:scroll 26s linear infinite;}
  .marquee-track span{
    font-family:'Manrope',Arial,sans-serif; font-weight:700; font-size:21px;
    color:var(--ink); opacity:.55; padding:0 48px; white-space:nowrap;
  }
  @keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  .faq{background:var(--white);}
  .faq-list{border-top:1px solid var(--line); margin-top:8px;}
  details.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
  details.faq-item summary{
    cursor:pointer; font-weight:700; font-size:16.5px; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
  }
  details.faq-item summary::-webkit-details-marker{display:none;}
  details.faq-item summary::after{
    content:"+"; font-family:'Manrope',Arial,sans-serif; font-weight:800;
    font-size:22px; color:var(--petrol); flex-shrink:0;
  }
  details.faq-item[open] summary::after{content:"–";}
  details.faq-item p{font-size:15.5px; color:var(--grey); margin:14px 0 0; max-width:70ch;}

  .contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px;}
  .contact-info p{color:var(--grey); font-size:16px; margin-bottom:28px; max-width:38ch;}
  .contact-info dl{margin:0;}
  .contact-info dt{font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--petrol); margin-top:22px;}
  .contact-info dd{margin:4px 0 0; font-size:16px;}
  form.contact-form{background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius); padding:34px;}
  .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:10px; 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;}
  .form-note{font-size:12.5px; color:var(--grey); margin-top:14px;}

  footer.site-footer{background:var(--petrol-darker); color:var(--ivory); padding:52px 0 32px;}
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px;
    padding-bottom:32px; border-bottom:1px solid rgba(247,242,232,.16); margin-bottom:24px;
  }
  .footer-logo img{height:38px; border-radius:5px;}
  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;}

  /* =========================================================
     LOGIN
  ========================================================= */
  #view-login{min-height:100vh; display:grid; grid-template-columns:1fr 1.15fr;}
  .login-left{
    background:var(--petrol); color:var(--ivory);
    display:flex; flex-direction:column; justify-content:center; padding:64px;
  }
  .login-left .logo-word{font-size:34px; font-weight:800;}
  .login-left .logo-word small{display:block; font-size:13px; letter-spacing:.24em; font-weight:500; opacity:.65; margin-top:4px;}
  .login-left h2{color:var(--ivory); font-size:clamp(26px,3vw,36px); margin:44px 0 18px; max-width:16ch;}
  .login-left p{opacity:.85; max-width:40ch; font-size:16.5px;}
  .login-right{display:flex; align-items:center; justify-content:center; background:var(--ivory); padding:48px 24px;}
  .login-card{width:min(430px,100%);}
  .login-card img{height:52px; border-radius:8px; margin-bottom:30px;}
  .login-card h3{font-size:26px; font-weight:800; margin-bottom:26px;}
  .login-links{display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:13.5px;}
  .login-links a{color:var(--petrol); font-weight:600; text-decoration:none; cursor:pointer;}
  .login-demo{
    margin-top:26px; font-size:13px; color:var(--grey); background:var(--white);
    border:1px dashed var(--line); border-radius:12px; padding:12px 16px;
  }
  .login-back{margin-top:34px; font-size:14px;}
  .login-back a{color:var(--petrol); font-weight:600; cursor:pointer; text-decoration:none;}

  /* =========================================================
     APP (plateforme praticien)
  ========================================================= */
  #view-app{display:flex; min-height:100vh; background:var(--app-bg); color:var(--ink);}
  .app-sidebar{
    width:242px; background:var(--petrol-darker); color:var(--ivory);
    display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:60;
    padding:26px 16px 20px;
  }
  .app-logo{padding:0 10px 26px; border-bottom:1px solid rgba(247,242,232,.14); margin-bottom:18px;}
  .app-logo .logo-word{font-size:24px; font-weight:800; letter-spacing:.01em;}
  .app-logo small{display:block; font-size:11px; letter-spacing:.24em; opacity:.55; font-weight:500; margin-top:2px;}
  .app-nav{display:flex; flex-direction:column; gap:4px; flex:1;}
  .app-nav a{
    display:flex; gap:12px; align-items:center; padding:11px 12px; border-radius:10px;
    color:rgba(247,242,232,.72); font-weight:600; font-size:14.5px; text-decoration:none; cursor:pointer;
  }
  .app-nav a svg{flex-shrink:0; opacity:.85;}
  .app-nav a:hover{background:rgba(247,242,232,.07); color:var(--ivory);}
  .app-nav a.active{background:rgba(247,242,232,.12); color:var(--ivory);}
  .app-side-foot{border-top:1px solid rgba(247,242,232,.14); padding-top:16px; font-size:12.5px; opacity:.6; padding-left:10px;}

  .app-main{margin-left:242px; flex:1; display:flex; flex-direction:column; min-width:0;}
  .app-topbar{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:18px 34px; border-bottom:1px solid var(--app-line); background:var(--white);
    position:sticky; top:0; z-index:40;
  }
  .app-crumb{font-family:'Manrope',Arial,sans-serif; font-weight:800; font-size:19px;}
  .app-user{display:flex; align-items:center; gap:14px;}
  .app-user .uname{font-size:14px; font-weight:600;}
  .app-user .avatar{
    width:36px; height:36px; border-radius:50%; background:var(--petrol); color:var(--white);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
    font-family:'Manrope',Arial,sans-serif;
  }
  .app-logout{
    background:none; border:1.5px solid var(--app-line); border-radius:999px; cursor:pointer;
    font-size:13px; font-weight:600; color:var(--app-grey); padding:7px 14px;
  }
  .app-logout:hover{border-color:var(--petrol); color:var(--petrol);}
  .app-content{padding:30px 34px 60px; max-width:1180px; width:100%; margin:0 auto;}

  .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-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px;}
  .stat{
    background:var(--white); border:1px solid var(--app-line); border-radius:16px; padding:20px 22px;
  }
  .stat .n{font-family:'Manrope',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(--amber);}

  .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);
  }
  .prow{background:var(--white); border:1px solid var(--app-line); border-radius:14px; margin-bottom:12px; overflow:hidden;}
  .pgrid{padding:16px 18px; cursor:pointer;}
  .pgrid:hover{background:#FAFCFC;}
  .pname strong{font-weight:800;}
  .pgrid .muted{color:var(--app-grey); font-size:13.5px;}
  .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;}
  .prow.open .chev{transform:rotate(180deg);}
  .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;}
  .status-line{font-size:14px; color:var(--app-grey); margin:16px 0 22px;}
  .status-line strong{color:var(--ink);}
  .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);}
  .stepper .st.done .dot::after{
    content:'✓'; position:absolute; inset:0; color:#fff; font-size:11px;
    display:flex; align-items:center; justify-content:center;
  }
  .stepper .st.current .dot{border-color:var(--amber); box-shadow:0 0 0 4px rgba(217,150,51,.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);}

  /* Messagerie */
  .chat-shell{display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start;}
  .chat-card{background:var(--white); border:1px solid var(--app-line); border-radius:16px; display:flex; flex-direction:column; min-height:460px;}
  .chat-head{padding:18px 22px; border-bottom:1px solid var(--app-line); font-weight:700; font-size:15px;}
  .chat-head small{display:block; font-weight:500; color:var(--app-grey); font-size:12.5px; margin-top:2px;}
  .chat-body{flex:1; padding:22px; overflow-y:auto; display:flex; flex-direction:column; gap:12px;}
  .msg{max-width:75%; padding:11px 15px; border-radius:14px; font-size:14px; line-height:1.5;}
  .msg.lab{background:#EEF3F4; border-bottom-left-radius:4px; align-self:flex-start;}
  .msg.me{background:var(--petrol); color:var(--white); border-bottom-right-radius:4px; align-self:flex-end;}
  .msg .who{display:block; font-size:11px; font-weight:700; opacity:.65; margin-bottom:3px;}
  .chat-input{display:flex; gap:10px; padding:16px; border-top:1px solid var(--app-line);}
  .chat-input input{
    flex:1; border:1.5px solid var(--app-line); border-radius:999px; padding:11px 18px;
    font-size:14px; font-family:'Inter',Arial,sans-serif;
  }
  .chat-input input:focus{outline:2px solid var(--petrol);}
  .chat-input button{border:none;}
  .wa-card{background:#E9F6EE; border:1px solid #C4E4CF;}
  .wa-card h3{color:#1D6A41;}
  .wa-card p{font-size:13.5px; color:#2C5C42; margin:0 0 16px;}
  .wa-btn{background:#1D6A41; color:#fff; border:none;}

  /* 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);}
  .inv-row{
    display:grid; grid-template-columns:1.4fr 1fr .8fr 1fr auto; gap:12px; align-items:center;
    padding:15px 18px; border-top:1px solid var(--app-line); font-size:14px;
  }
  .inv-row:first-child{border-top:none;}
  .inv-row strong{font-weight:700;}
  .inv-row .muted{color:var(--app-grey); font-size:13px;}
  .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;}
  .res-group > h3{font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol); font-weight:800; margin-bottom:6px;}
  details.res-item{border-bottom:1px solid var(--app-line); padding:18px 0; background:transparent;}
  details.res-item summary{
    cursor:pointer; font-weight:700; font-size:15.5px; list-style:none;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
  }
  details.res-item summary::-webkit-details-marker{display:none;}
  details.res-item summary::after{content:"+"; font-family:'Manrope',Arial,sans-serif; font-weight:800; font-size:20px; color:var(--petrol);}
  details.res-item[open] summary::after{content:"–";}
  details.res-item .res-body{font-size:14.5px; color:var(--app-grey); margin-top:12px; max-width:75ch;}
  details.res-item .res-body ol{padding-left:20px; margin:8px 0;}
  details.res-item .res-body li{margin-bottom:7px;}

  /* 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);}

  /* =========================================================
     RESPONSIVE
  ========================================================= */
  @media (max-width:1020px){
    .stat-grid{grid-template-columns:1fr 1fr;}
    .chat-shell{grid-template-columns:1fr;}
    .platform-grid{grid-template-columns:1fr;}
  }
  @media (max-width:960px){
    .contact-grid{grid-template-columns:1fr;}
  }
  @media (max-width:860px){
    #view-login{grid-template-columns:1fr;}
    .login-left{padding:44px 34px; min-height:34vh;}
    .app-sidebar{position:fixed; transform:translateX(-100%); transition:transform .22s ease; width:250px;}
    .app-sidebar.open{transform:translateX(0);}
    .app-main{margin-left:0;}
    .app-burger{display:inline-flex !important;}
    .ptable-head{display:none;}
    .pgrid{grid-template-columns:1fr auto; row-gap:6px;}
    .pgrid > div:nth-child(2), .pgrid > div:nth-child(3), .pgrid > div:nth-child(4){display:none;}
    .form-2col{grid-template-columns:1fr;}
    .inv-row{grid-template-columns:1fr auto;}
    .inv-row > div:nth-child(2), .inv-row > div:nth-child(3){display:none;}
  }
  .app-burger{
    display:none; background:none; border:1.5px solid var(--app-line); border-radius:10px;
    font-size:20px; cursor:pointer; color:var(--ink); padding:4px 12px; align-items:center;
  }
  @media (max-width:700px){
    nav.main-nav{
      position:fixed; inset:0 0 0 20%; background:var(--ivory);
      flex-direction:column; align-items:stretch; padding:100px 26px 32px;
      transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; gap:4px; z-index:80;
    }
    nav.main-nav.open{transform:translateX(0);}
    nav.main-nav > a, .has-dropdown > a{font-size:18px; padding:14px 6px;}
    .has-dropdown .dropdown{
      position:static; opacity:1; visibility:visible; transform:none;
      box-shadow:none; border:none; padding:0 0 0 14px; margin-top:0;
    }
    .menu-toggle{display:block;}
    .eng-grid{grid-template-columns:1fr;}
    .eng-item{border-right:none; border-bottom:1px solid var(--line);}
    section{padding:60px 0;}
    .hero{padding:56px 0 64px;}
    .stat-grid{grid-template-columns:1fr;}
    .stepper .lbl{display:none;}
  }

  /* =================== COUCHE MODERNE =================== */
  :root{--shadow-1:0 1px 2px rgba(8,47,58,.05),0 10px 28px rgba(8,47,58,.06);--ring:0 0 0 4px rgba(14,82,102,.14);}
  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:9px}
  *::-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);}
  .app-sidebar{background:linear-gradient(180deg,#0C4557 0%,#082F3A 78%);}
  .app-nav a{border-radius:12px;transition:background .15s ease,color .15s ease;}
  .app-nav a.active{box-shadow:inset 3px 0 0 var(--amber);background:rgba(247,242,232,.13);}
  .app-topbar{background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  .card,.stat{box-shadow:var(--shadow-1);border-color:#E6ECEE;}
  .card{border-radius:18px;}
  .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;}
  details.prow{transition:box-shadow .16s ease;box-shadow:0 1px 2px rgba(8,47,58,.04);}
  details.prow:hover{box-shadow:var(--shadow-1);}
  details.prow[open]{box-shadow:0 14px 34px rgba(8,47,58,.10);}
  .pdetail{animation:fadeUp .22s ease both;}
  .app-page{animation:fadeUp .24s 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:22px;box-shadow:0 30px 80px rgba(8,24,30,.30);}
  .preview-card{box-shadow:0 30px 60px rgba(14,82,102,.14);}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}

/* ===== EXTRAS ESPACE PRATICIEN ===== */

  /* ---- Ajustements espace praticien autonome ---- */
  .page-title{
    font-family:'Manrope',Arial,sans-serif; font-weight:800; font-size:22px;
    margin:4px 0 20px;
  }
  details.prow > summary{list-style:none;}
  details.prow > summary::-webkit-details-marker{display:none;}
  details.prow[open] .chev{transform:rotate(180deg);}
  details.prow[open]{border-color:#C9D8DC;}
  .inv-block h4{
    font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--petrol); font-weight:800; margin:0 0 8px;
  }
  .app-side-foot a{color:rgba(247,242,232,.85); font-weight:600; cursor:pointer; text-decoration:underline;}

/* ===== 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:'Manrope',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;}
  .app-side-foot a{color:rgba(247,242,232,.85); font-weight:600; cursor:pointer; text-decoration:underline;}

  /* 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;}
  .kb-col{min-width:236px; flex:0 0 236px; background:rgba(255,255,255,.55);
    border:1px solid var(--app-line); border-radius:16px; padding:12px;}
  .kb-col h4{font-family:'Manrope',Arial,sans-serif; font-size:12.5px; font-weight:800; letter-spacing:.05em;
    text-transform:uppercase; color:var(--app-grey); margin:2px 4px 12px; display:flex; justify-content:space-between; align-items:center;}
  .kb-col h4 .cnt{background:#fff; border:1px solid var(--app-line); border-radius:999px;
    font-size:11.5px; padding:2px 9px; color:var(--ink);}
  .kb-card{background:#fff; border:1px solid var(--app-line); border-radius:14px; padding:13px 14px;
    margin-bottom:10px; cursor:pointer; box-shadow:0 1px 2px rgba(8,47,58,.05);
    transition:transform .15s ease, box-shadow .15s ease;}
  .kb-card:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(8,47,58,.12);}
  .kb-ref{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--app-grey); margin-bottom:5px;}
  .kb-name{font-weight:800; font-size:14.5px; margin-bottom:3px;}
  .kb-prat{font-size:12.5px; color:var(--app-grey); margin-bottom:10px;}
  .kb-foot{display:flex; justify-content:space-between; align-items:center; gap:8px;}
  .kb-alig{font-size:12px; font-weight:700; background:rgba(14,82,102,.07); color:var(--petrol);
    padding:3px 10px; border-radius:999px;}
  .kb-next{border:none; background:var(--petrol); color:#fff; width:28px; height:28px; border-radius:9px;
    cursor:pointer; font-size:14px; line-height:1; transition:transform .15s ease;}
  .kb-next:hover{transform:translateX(2px);}
  .kb-empty{font-size:12.5px; color:var(--app-grey); padding:6px 4px;}

  /* 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:'Manrope',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 1.1fr .9fr auto; 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;}

  /* Fil du cas (timeline traçable) */
  .case-thread{position:relative; margin:8px 0 0; padding-left:24px;}
  .case-thread::before{content:''; position:absolute; left:7px; top:5px; bottom:5px; width:2px;
    background:#E1E8EA; border-radius:2px;}
  .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(--amber); box-shadow:0 0 0 4px rgba(217,150,51,.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:10px; 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%);}
  .case-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 30px;}
  .case-side h4, .case-main h4{font-size:12.5px; letter-spacing:.07em; text-transform:uppercase;
    color:var(--petrol); font-weight:800; margin:0 0 12px;}

  /* 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:'Manrope',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(--amber); flex-shrink:0;}
  .chat-shell-lab{display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start;}

  @media (max-width:1020px){
    .conn-grid{grid-template-columns:1fr 1fr;}
    .prat-grid{grid-template-columns:1fr 1fr;}
    .case-grid{grid-template-columns:1fr;}
    .chat-shell-lab{grid-template-columns:1fr;}
  }
  @media (max-width:700px){
    .conn-grid{grid-template-columns:1fr;}
    .prat-grid{grid-template-columns:1fr;}
    .inbox-row{grid-template-columns:1fr auto;}
    .inbox-row > div:nth-child(1), .inbox-row > div:nth-child(3), .inbox-row > div:nth-child(4){display:none;}
    .team-row{grid-template-columns:1fr auto;}
    .team-row > div:nth-child(2), .team-row > div:nth-child(3){display:none;}
  }

/* ============ 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:18px; 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;}
.mini-viewer{position:relative; height:340px; border-radius:20px; overflow:hidden;
  background:radial-gradient(700px 340px at 50% 0%, #123A49 0%, #0B2733 55%, #071B23 100%);
  border:1px solid var(--line); box-shadow:0 30px 60px rgba(14,82,102,.14);}
.mini-viewer canvas{display:block; width:100%; height:100%;}
.mini-caption{font-size:13px; color:var(--grey); margin-top:14px;}

:focus-visible{outline:3px solid rgba(14,82,102,.45); outline-offset:2px; border-radius:6px;}
@media (max-width:700px){ .viewer-stage{height:320px;} }