@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Outfit:wght@300;400;500&display=swap');
:root{
  --bg:#0a0a0a; --panel:#121212; --panel2:#1a1a1a; --line:#262626;
  --text:#f5f5f5; --muted:#8f8f8f; --accent:#f5f5f5; --accent2:#d4d4d4; --onaccent:#0a0a0a;
  --good:#3ccf91; --warn:#f0b54a; --bad:#f06272; --me:#f5f5f5; --them:#1f1f1f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px}
button{font:inherit;cursor:pointer;border:0;border-radius:10px}
input,select,textarea{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical}
label{display:block;font-size:12px;color:var(--muted);margin:14px 0 6px;font-weight:500}
a{color:var(--text);text-underline-offset:3px}
.btn{background:var(--accent);color:var(--onaccent);padding:11px 18px;font-weight:600}
.btn:hover{background:var(--accent2)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{background:var(--panel2)}
.btn.danger{background:transparent;border:1px solid #6b2a35;color:var(--bad)}
.btn.small{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.hidden{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:24px}
h1{font-family:Outfit,Inter,sans-serif;font-weight:400;font-size:26px;letter-spacing:.01em;margin:0 0 4px}
h2{font-size:15px;margin:0 0 12px}
.sub{color:var(--muted);margin:0 0 20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.grid,.grid3{grid-template-columns:1fr}}
.row{display:flex;gap:10px;align-items:center}
.spacer{flex:1}
.notice{font-size:12px;color:var(--muted);background:var(--panel2);border-radius:10px;padding:10px 12px;margin-top:14px;line-height:1.5}
.err{color:var(--bad);font-size:13px;margin-top:10px;min-height:18px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:500}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--panel2)}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600}
.t1{background:#173a2c;color:var(--good)}.t2{background:#3d3218;color:var(--warn)}.t3{background:#3d1b21;color:var(--bad)}
.nav{display:flex;align-items:center;gap:14px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.nav .brand{font-weight:700}
.nav .who{color:var(--muted);font-size:13px}
.kpi small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.kpi b{font-size:24px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
.modal > .card{width:100%;max-width:440px;max-height:90vh;overflow:auto}
.modal > .card.wide{max-width:960px}
.meter{height:8px;background:var(--panel2);border-radius:10px;overflow:hidden}
.meter div{height:100%;background:var(--good);transition:width .6s}
.tabs{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:transparent;color:var(--muted);padding:8px 14px;font-weight:600;white-space:nowrap;flex-shrink:0}
.tabs button.on{background:var(--panel2);color:var(--text)}

/* Rapport */
.score{font-size:56px;font-weight:700;line-height:1}
.crit{margin:10px 0}
.crit .row{justify-content:space-between}
.crit p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
ul{padding-left:18px;line-height:1.6;margin:6px 0}
.rewrite{background:var(--panel2);border-radius:10px;padding:10px 12px;margin:8px 0;font-size:13px;line-height:1.5}
.rewrite .o{color:var(--bad)}.rewrite .n{color:var(--good)}
.flag{background:#3d1b21;border:1px solid #6b2a35;color:#ffb3bd;border-radius:10px;padding:10px 12px;margin-top:10px}
.transcript{white-space:pre-wrap;color:var(--muted);line-height:1.6;margin:0;font-family:inherit}

/* ===== Portail : menu latéral ===== */
.shell{display:flex;min-height:100vh}
.sidebar{width:236px;flex-shrink:0;border-right:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;padding:22px 14px;position:sticky;top:0;height:100vh}
.sidebar .logo{display:block;padding:4px 10px 26px}
.sidebar .logo img{width:150px;display:block}
.sidebar .sec{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;padding:14px 10px 8px}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:500}
.sidebar nav a:hover{background:var(--panel2);color:var(--text)}
.sidebar nav a.on{background:var(--panel2);color:var(--text)}
.sidebar nav svg{width:18px;height:18px;flex-shrink:0}
.sidebar .me{margin-top:auto;border-top:1px solid var(--line);padding:14px 10px 0;display:flex;align-items:center;gap:10px}
.sidebar .me .av{width:32px;height:32px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;text-transform:uppercase}
.sidebar .me b{display:block;font-size:13px}.sidebar .me small{color:var(--muted);font-size:12px}
.sidebar .me button{margin-left:auto;background:transparent;color:var(--muted);padding:6px;border-radius:8px;width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sidebar .me{flex-shrink:0}
.sidebar .me button svg{width:18px;height:18px}
.sidebar .me button:hover{color:var(--text);background:var(--panel2)}
.main-area{flex:1;min-width:0}
.pagehead{display:flex;align-items:flex-end;gap:12px;margin-bottom:22px}
.eyebrow{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:6px}
@media(max-width:860px){
  .shell{flex-direction:column}
  .sidebar{width:auto;height:auto;position:sticky;top:0;z-index:30;flex-direction:row;align-items:center;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top),var(--sat-in,0px));border-right:0;border-bottom:1px solid var(--line);background:rgba(10,10,10,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .sidebar .logo{padding:6px 0}.sidebar .logo .lg-sh{width:118px}
  .sidebar nav{display:none}
  .sidebar .me{margin:0 0 0 auto;border:0;padding:0;gap:6px}
  .sidebar .me div{display:none}
  .sidebar .me .av{width:30px;height:30px}
  .main-area{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .grid3{grid-template-columns:1fr 1fr}
  .wrap{padding:18px}
  .card{padding:16px}
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
  .tablewrap table{min-width:560px}
  .pagehead{flex-wrap:wrap}
  h1{font-size:23px}
  .modal{padding:8px}
}
.tablewrap{max-width:100%}
/* Accueil */
.modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.module{display:block;text-decoration:none;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;transition:.15s}
.module:hover{border-color:#3a3a3a;transform:translateY(-1px)}
.module .ic{width:40px;height:40px;border-radius:11px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.module .ic svg{width:20px;height:20px}
.module h3{margin:0 0 6px;font-size:16px}
.module p{margin:0;color:var(--muted);line-height:1.5;font-size:13px}
.module .go{margin-top:16px;font-size:13px;font-weight:600}
.grid > *, .grid3 > *, .kpis > * { min-width: 0 }
.sidebar nav a{position:relative}
.navbadge{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;background:var(--warn);color:#1a1205;border-radius:20px;padding:1px 7px;min-width:20px;text-align:center}

/* ===== Logo animé : reflet ===== */
.lg-sh{position:relative;display:block;width:150px}
.lg-sh svg{display:block;width:100%;height:auto;overflow:visible}
.lg-sh .base{display:block;opacity:.68}
.lg-sh .shine{position:absolute;inset:0;-webkit-mask-image:linear-gradient(105deg,transparent 42%,#000 50%,transparent 58%);mask-image:linear-gradient(105deg,transparent 42%,#000 50%,transparent 58%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:lgSweep 5s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
@keyframes lgSweep{0%{-webkit-mask-position:120% 0;mask-position:120% 0}55%,100%{-webkit-mask-position:-20% 0;mask-position:-20% 0}}
.sidebar .logo{text-decoration:none}

/* ===== Menu de gauche : indicateur lumineux + entrée ===== */
/* M1 : trait lumineux qui s'étire + typo cinétique */
.sidebar nav{position:relative}
.sidebar nav a{font-weight:700;letter-spacing:-.01em}
.sidebar nav a.on{font-weight:800;background:linear-gradient(90deg,rgba(255,255,255,.07),transparent 85%)}
.sidebar .sec{font-weight:800;font-size:10px;letter-spacing:.16em;color:#5a5a5a}
.nv-line{position:absolute;left:-14px;top:0;width:3px;height:36px;border-radius:2px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9),0 0 26px rgba(255,255,255,.35);pointer-events:none;will-change:transform,height}
.ch{display:inline-block;transform-origin:50% 60%;backface-visibility:hidden}
.lb.fin .ch{animation:chIn .55s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes chIn{0%{transform:rotateX(90deg) translateY(4px);opacity:0;filter:blur(2px)}60%{opacity:1;filter:none}100%{transform:none}}
.navbadge .dg{display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:top}.navbadge .dg > span{display:block}
.navbadge.bump{animation:nbBump .6s cubic-bezier(.3,1.9,.5,1)}
@keyframes nbBump{35%{transform:scale(1.35)}}
.dk-line{display:none}
.sidebar nav a{transition:background .2s,color .2s}
.sidebar.nav-in nav a{opacity:0;transform:translateX(-8px);animation:navIn .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--i,0) * 70ms)}
@keyframes navIn{to{opacity:1;transform:none}}

/* ===== Dock flottant (téléphone) ===== */
.dock{display:none}
@media(max-width:860px){
  .dock{display:flex;position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom),var(--sab-in,0px));transform:translateX(-50%);z-index:40;gap:3px;padding:6px;max-width:calc(100vw - 16px);box-sizing:border-box;background:rgba(22,22,22,.8);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border:1px solid #2a2a2a;border-radius:26px;box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);view-transition-name:dock}
  .dock.dock-in{animation:dockIn .6s cubic-bezier(.3,1.3,.5,1) both}
  .dock .di{position:relative;display:flex;align-items:center;gap:0;height:46px;min-width:44px;padding:0 12px;box-sizing:border-box;border-radius:19px;color:#8a8a8a;text-decoration:none;font-weight:600;font-size:13px;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background .45s cubic-bezier(.3,1.3,.5,1),color .3s,padding .45s cubic-bezier(.3,1.3,.5,1),gap .45s cubic-bezier(.3,1.3,.5,1)}
  .dock .di svg{width:21px;height:21px;flex-shrink:0;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
  .dock .di:active svg{transform:scale(.85)}
  .dock .di .lb{max-width:0;opacity:0;overflow:hidden;transition:max-width .45s cubic-bezier(.3,1.3,.5,1),opacity .3s}
  .dock .di.on{background:rgba(255,255,255,.06);color:#fff;gap:8px;padding:0 15px;font-weight:800}
  .dock .dk-line{display:block;position:absolute;left:0;bottom:3px;height:2px;width:30px;border-radius:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.35);pointer-events:none;z-index:2}
  .dock .di.on .lb{max-width:84px;opacity:1}
  .dock .navbadge{position:absolute;top:3px;right:3px;margin:0;padding:0 5px;min-width:16px;font-size:10px;line-height:16px;box-shadow:0 0 0 2px #161616}
  .shell{view-transition-name:none}
  .sidebar{view-transition-name:topbar}
}
@media(max-width:360px){.dock .di{padding:0 10px;min-width:40px}.dock .di.on{padding:0 12px}}
@keyframes dockIn{from{opacity:0;transform:translate(-50%,24px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
/* Pas de dock pendant une conversation du simulateur (il cacherait la zone de saisie) */
body:has(#chatScreen:not(.hidden)) .dock{display:none}
body:has(#chatScreen:not(.hidden)) .main-area{padding-bottom:0}

/* ===== Transitions douces entre les pages (navigateurs récents) ===== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media(min-width:861px){.sidebar{view-transition-name:sidebar}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .lg-sh .shine{display:none}.lg-sh .base{opacity:1}
}

/* ===== Notifications ===== */
.ntfs{position:fixed;right:22px;top:22px;z-index:200;display:flex;flex-direction:column;gap:8px;width:360px;max-width:calc(100vw - 24px);pointer-events:none}
@media(max-width:860px){.ntfs{left:12px;right:12px;width:auto;top:calc(64px + max(env(safe-area-inset-top),var(--sat-in,0px)))}}
.ntf{position:relative;display:flex;align-items:center;gap:11px;background:rgba(24,24,24,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #2c2c2c;border-radius:16px;padding:11px 14px 13px;box-shadow:0 14px 40px rgba(0,0,0,.55);pointer-events:auto;cursor:pointer;animation:ntfIn .55s cubic-bezier(.3,1.4,.5,1) both;transition:opacity .3s,transform .3s}
.ntf.out{opacity:0;transform:translateY(-12px) scale(.97)}
@keyframes ntfIn{from{opacity:0;transform:translateY(-24px) scale(.96)}to{opacity:1;transform:none}}
.ntf .ni{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.08);color:#e6e6e6}
.ntf.ok .ni{background:rgba(95,211,162,.14);color:#5fd3a2}
.ntf.err .ni{background:rgba(217,154,154,.14);color:#e0a3a3}
.ntf .ni path{stroke-dasharray:30;stroke-dashoffset:30;animation:ntfDraw .45s ease .25s forwards}
@keyframes ntfDraw{to{stroke-dashoffset:0}}
.ntf .nt{min-width:0}
.ntf b{display:block;font-size:13px}
.ntf small{display:block;font-size:11.5px;color:#9a9a9a;margin-top:1px}
.ntf .nl{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.ntf .nl i{display:block;height:100%;background:rgba(255,255,255,.32);transform-origin:left;animation:ntfLife 3.4s linear forwards}
@keyframes ntfLife{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ===== Coche de validation ===== */
.stamp{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(10,14,12,.86);border-radius:inherit;color:#5fd3a2;animation:stIn .2s ease both}
.stamp.ko{color:#e0a3a3;background:rgba(16,10,10,.86)}
@keyframes stIn{from{opacity:0}to{opacity:1}}
.stamp circle{stroke-dasharray:126;stroke-dashoffset:126;animation:stCirc .5s cubic-bezier(.6,0,.3,1) .05s forwards}
.stamp path{stroke-dasharray:40;stroke-dashoffset:40;animation:ntfDraw .35s ease .45s forwards}
.stamp svg{animation:stPop .5s cubic-bezier(.3,1.6,.5,1) .7s}
@keyframes stCirc{to{stroke-dashoffset:0}}
@keyframes stPop{50%{transform:scale(1.15)}}
.leave{overflow:hidden;transition:opacity .35s,transform .45s cubic-bezier(.6,0,.4,1),max-height .4s .25s,margin .4s .25s,padding .4s .25s}
.leaving{opacity:0;transform:translateX(60px);max-height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important}

/* ===== Chargements ===== */
.sk{background:#151515;border-radius:10px;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);transform:translateX(-100%);animation:skShim 1.3s ease-in-out infinite}
@keyframes skShim{to{transform:translateX(100%)}}
.sk-card{pointer-events:none}
.sk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:20px}
.sk-grid .sk-card{min-height:170px}
.sk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.sk-row{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.fade-in{animation:fadeUp .5s cubic-bezier(.2,.75,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:600px){.sk-grid{grid-template-columns:1fr}.sk-kpis{grid-template-columns:1fr 1fr}.sk-tiles{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.sk::after,.ntf,.stamp *{animation:none!important}.stamp path,.stamp circle,.ntf .ni path{stroke-dashoffset:0}}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== Menu de gauche : mode réduit (ordinateur) ===== */
.sb-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sb-col{width:28px;height:28px;flex-shrink:0;border-radius:9px;border:1px solid #232323;background:#121212;color:#9a9a9a;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;margin-bottom:22px;transition:background .2s,color .2s,transform .55s cubic-bezier(.5,0,.15,1)}
.sb-col:hover{background:#1a1a1a;color:#fff}
.sb-col svg{width:15px;height:15px}
@media(min-width:861px){
  .sidebar{transition:none;overflow:visible}
  .sidebar.mini-anim{transition:width .55s cubic-bezier(.5,0,.15,1),padding .55s cubic-bezier(.5,0,.15,1)}
  .sidebar .logo{transition:opacity .3s,width .45s cubic-bezier(.5,0,.15,1);overflow:hidden}
  .sidebar.mini{width:76px;padding-left:12px;padding-right:12px}
  .sidebar.mini .sb-top{justify-content:center}
  .sidebar.mini .logo{width:0;padding:0;opacity:0}
  .sidebar.mini .sb-col{transform:rotate(180deg)}
  .sidebar nav a .lb,.sidebar .sec,.sidebar .me div{transition:opacity .25s}
  .sidebar.mini nav a{justify-content:center;padding-left:0;padding-right:0}
  .sidebar nav a .lb{white-space:nowrap}
  .sidebar.mini nav a .lb{opacity:0;width:0;overflow:hidden}
  .sidebar.mini .sec{opacity:0;white-space:nowrap;overflow:hidden}
  .sidebar.mini .navbadge{position:absolute;top:2px;right:6px;margin:0;padding:0 4px;min-width:16px;font-size:9.5px;line-height:16px}
  .sidebar.mini .nv-line{left:-12px}
  .sidebar.mini .me{justify-content:center;padding-left:0;padding-right:0;flex-direction:column;gap:10px}
  .sidebar.mini .me div{display:none}
  .sidebar.mini .me button{margin:0}
  /* nom de la page en bulle au survol */
  .sidebar.mini nav a::after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;transform:translate(-6px,-50%);background:#ededed;color:#0a0a0a;font-size:12px;font-weight:800;border-radius:8px;padding:5px 9px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .2s;z-index:60}
  .sidebar.mini nav a:hover::after{opacity:1;transform:translate(0,-50%)}
}
@media(max-width:860px){.sb-col{display:none}.sb-top{display:contents}}