:root{ /* Couleurs de marque et statuts : identiques dans les deux thèmes. */ --mag:#E8399B; --vio:#7B3FE4; --blue:#4B6BFF; --ok:#2FD08A; --warn:#FFB020; --crit:#FF5C5C; --grad:linear-gradient(115deg,var(--mag) 0%,var(--vio) 55%,var(--blue) 100%); --r:14px; --r-s:9px; --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; } /* ============================================================ JETONS DE THÈME Le thème sombre est la base, le thème clair une surcharge : les composants ne connaissent que des jetons, jamais une couleur en dur. Le script d'amorçage pose data-theme sur avant le premier rendu — aucun clignotement, aucun affichage dans le mauvais thème. ============================================================ */ :root, :root[data-theme="dark"]{ color-scheme:dark; /* Surfaces et texte */ --navy-900:#080B26; --navy-800:#0D1136; --navy-700:#141A4A; --navy-600:#1D2560; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --line-hover:rgba(255,255,255,.28); --txt:#EEF1FF; --txt-dim:#A6AECD; --txt-mute:#787FA3; --field-bg:#0A0E2E; --video-bg:#05071A; --eyebrow:#F19BD0; --on-accent:#fff; --hover-soft:rgba(255,255,255,.06); --runhead-bg:rgba(8,11,38,.94); --overlay:rgba(4,6,20,.78); --shadow-lg:0 16px 44px -14px rgba(0,0,0,.85); --shadow-sm:0 6px 18px -12px rgba(0,0,0,.7); --track-bg:rgba(255,255,255,.07); --skel-1:rgba(255,255,255,.04); --skel-2:rgba(255,255,255,.12); /* Halos décoratifs du hero */ --orb-1:#8B2FE0; --orb-2:#2A1466; --orb-3:#C8218A; --orb-4:#1B1050; --orb-op:.55; /* Difficulté, brief, tâche, enregistrement */ --d1:#8ED9B4; --d1-bd:rgba(47,208,138,.40); --d2:#FFCF7A; --d2-bd:rgba(255,176,32,.40); --d3:#FF9C9C; --d3-bd:rgba(255,92,92,.42); --brief-bg:rgba(75,107,255,.08); --brief-bd:rgba(75,107,255,.30); --brief-fg:#D6DEFF; --task-fg:#F4E6EF; --danger-fg:#FF9C9C; --err-fg:#FF8080; --rec-stop-bg:#fff; --rec-stop-fg:#080B26; /* Rouge des surfaces pleines portant du texte blanc : assombri pour rester lisible. */ --crit-solid:#C94949; --accent-text:#E8399B; --track-low-1:#FF7A7A; --track-low-2:#FF4D4D; --t3-fg:#FF8A5C; --t3-bd:rgba(255,138,92,.50); --t3-bg:rgba(255,138,92,.08); /* Espace interne */ --lite:#080B26; --lite-2:rgba(255,255,255,.12); --lite-2-hover:rgba(255,255,255,.24); --ink:#EEF1FF; --surface:#0D1136; --surface-2:#131A47; --ink-dim:#A6AECD; --ink-mute:#9BA3C4; --ink-faint:#8F97BA; --ink-soft:#8A92B4; --ink-na:#7E86A8; --ink-solid:#EEF1FF; --on-ink-solid:#080B26; --link:#B9A4FF; --good-fg:#5FE0A5; --bad-fg:#FF9C9C; --alert-bg:rgba(255,92,92,.12); --alert-fg:#FFC9C9; --note-bg:rgba(123,63,228,.17); --note-fg:#D6CCFF; --testbar-bg:rgba(255,176,32,.13); --testbar-bd:rgba(255,176,32,.38); --testbar-fg:#FFD79A; --ident-bg:rgba(255,255,255,.07); --ident-fg:#CFC4FF; --tok-bg:#05071A; --tok-fg:#EEF1FF; --b-exc-bg:rgba(47,208,138,.17); --b-exc-fg:#7FE3B6; --b-good-bg:rgba(75,107,255,.20); --b-good-fg:#B3C4FF; --b-mid-bg:rgba(255,176,32,.17); --b-mid-fg:#FFD79A; --b-low-bg:rgba(255,92,92,.17); --b-low-fg:#FFB4B4; --b-wait-bg:rgba(123,63,228,.22); --b-wait-fg:#CBB8FF; --b-nc-bg:rgba(255,255,255,.09); --b-nc-fg:#A6AECD; /* Barre latérale : sombre dans les deux thèmes, comme aujourd'hui */ --side-bg:#05071A; --side-line:rgba(255,255,255,.10); --side-txt:#fff; --side-txt-dim:#A6AECD; --side-txt-mute:#6E779C; --side-hover:rgba(255,255,255,.05); } :root[data-theme="light"]{ color-scheme:light; --navy-900:#F6F7FC; --navy-800:#FFFFFF; --navy-700:#FFFFFF; --navy-600:#EDEFF8; --line:#E4E7F4; --line-2:#D3D9EC; --line-hover:#BCC5DE; --txt:#11163A; --txt-dim:#4E5679; --txt-mute:#6C749B; --field-bg:#FFFFFF; --video-bg:#E7EAF6; --eyebrow:#AE1E73; --on-accent:#fff; --hover-soft:rgba(17,22,58,.05); --runhead-bg:rgba(246,247,252,.94); --overlay:rgba(17,22,58,.42); --shadow-lg:0 16px 44px -18px rgba(17,22,58,.32); --shadow-sm:0 6px 18px -12px rgba(17,22,58,.28); --track-bg:#E4E7F4; --skel-1:rgba(17,22,58,.04); --skel-2:rgba(17,22,58,.10); --orb-1:#D9BEFF; --orb-2:#EFE7FF; --orb-3:#FFC7E6; --orb-4:#F4ECFF; --orb-op:.40; --d1:#0E6741; --d1-bd:rgba(14,103,65,.34); --d2:#7A4F04; --d2-bd:rgba(122,79,4,.32); --d3:#921F1F; --d3-bd:rgba(146,31,31,.32); --brief-bg:#EEF3FF; --brief-bd:#C9D6FF; --brief-fg:#1E3C8C; --task-fg:#6B2350; --danger-fg:#9C2222; --err-fg:#B3261E; --rec-stop-bg:#11163A; --rec-stop-fg:#fff; --crit-solid:#C22B2B; --accent-text:#D1338C; --track-low-1:#E05C5C; --track-low-2:#C42B2B; --t3-fg:#AA3C0C; --t3-bd:rgba(170,60,12,.42); --t3-bg:rgba(255,138,92,.12); --lite:#F6F7FC; --lite-2:#EDEFF8; --lite-2-hover:#DCE0F0; --ink:#11163A; --surface:#FFFFFF; --surface-2:#FAFBFF; --ink-dim:#5C6489; --ink-mute:#6C749B; --ink-faint:#6D7494; --ink-soft:#6E7590; --ink-na:#6F758A; --ink-solid:#11163A; --on-ink-solid:#fff; --link:#5B34C9; --good-fg:#12724A; --bad-fg:#9C2222; --alert-bg:#FFF4F4; --alert-fg:#8A1F1F; --note-bg:#F5F1FE; --note-fg:#3B2A78; --testbar-bg:#FFF3DC; --testbar-bd:#F0D9A8; --testbar-fg:#8A5A05; --ident-bg:#F4F5FB; --ident-fg:#3B2A78; /* Bandeau technique (lien d'évaluation) : une surface claire comme le reste, plutôt qu'un bloc sombre isolé au milieu d'une page claire. */ --tok-bg:#F1F2FA; --tok-fg:#2D2168; --b-exc-bg:#E1F8EC; --b-exc-fg:#12724A; --b-good-bg:#E7F0FF; --b-good-fg:#22459C; --b-mid-bg:#FFF3DC; --b-mid-fg:#8A5A05; --b-low-bg:#FFE6E6; --b-low-fg:#9C2222; --b-wait-bg:#EFEAFE; --b-wait-fg:#4E28A8; --b-nc-bg:#EEF0F7; --b-nc-fg:#5C6489; /* Barre latérale : claire comme le reste en thème clair. Blanche sur un fond de contenu légèrement gris, elle se distingue sans rompre l'harmonie. */ --side-bg:#FFFFFF; --side-line:#E4E7F4; --side-txt:#11163A; --side-txt-dim:#4E5679; --side-txt-mute:#6C749B; --side-hover:rgba(17,22,58,.05); } /* Transition au basculement, posée le temps du changement seulement : aucune animation permanente, donc aucun coût sur les interactions. */ @media (prefers-reduced-motion:no-preference){ .theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{ transition:background-color .26s ease,color .26s ease,border-color .26s ease,fill .26s ease!important} } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--sans);background:var(--navy-900);color:var(--txt);-webkit-font-smoothing:antialiased;line-height:1.55} button,input,select,textarea{font-family:inherit;font-size:inherit} a{color:inherit} h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.02em;line-height:1.15} p{margin:0 0 .9em} :focus-visible{outline:2px solid var(--mag);outline-offset:3px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---------- Brand ---------- */ .brand{display:flex;align-items:center;gap:11px;text-decoration:none} .mark{width:30px;height:30px;flex:0 0 30px} .wordmark{font-weight:800;letter-spacing:.16em;font-size:15px} .tag{font-size:11.5px;letter-spacing:.14em;color:var(--txt-mute)} /* ---------- Shell ---------- */ .wrap{max-width:1120px;margin:0 auto;padding:0 26px} .narrow{max-width:720px;margin:0 auto;padding:0 26px} .top{display:flex;align-items:center;justify-content:space-between;padding:22px 0} .ghost{background:none;border:1px solid var(--line-2);color:var(--txt-dim);padding:8px 15px;border-radius:99px;cursor:pointer;font-size:13px} .ghost:hover{color:var(--txt);border-color:var(--txt-dim)} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;padding:22px 0 70px} .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--orb-op);pointer-events:none} .orb.a{width:620px;height:620px;right:-200px;top:-260px;background:radial-gradient(circle at 40% 40%,var(--orb-1),var(--orb-2) 65%,transparent 72%)} .orb.b{width:420px;height:420px;left:-160px;bottom:-220px;background:radial-gradient(circle at 50% 50%,var(--orb-3),var(--orb-4) 68%,transparent 75%)} .hero-in{position:relative;z-index:2;padding-top:38px} .eyebrow{font-size:12px;letter-spacing:.2em;color:var(--eyebrow);margin-bottom:16px} .rule{width:56px;height:3px;background:var(--grad);border-radius:2px;margin-bottom:26px} h1.title{font-size:clamp(34px,5.4vw,58px);font-weight:750;max-width:15ch} /* Titre tenant obligatoirement sur une seule ligne (« Bienvenue Prénom ! ») : --ch porte le nombre de caractères réel, la taille s'y ajuste. Le premier terme borne la taille maximale, le second garantit que la ligne entre dans la largeur disponible ; le plancher évite une police illisible. */ h1.title.solo{max-width:none;white-space:nowrap; font-size:min(clamp(30px,5.4vw,58px), calc(min(100vw - 60px, 1068px) / var(--ch,18) * 1.5))} .lede{color:var(--txt-dim);max-width:58ch;font-size:17px;margin-top:18px} .cta{display:inline-flex;align-items:center;gap:10px;margin-top:30px;background:var(--grad);color:var(--on-accent);border:0;padding:15px 30px;border-radius:99px;font-weight:650;font-size:15.5px;cursor:pointer;box-shadow:0 12px 34px -12px rgba(232,57,155,.7)} .cta:hover{filter:brightness(1.08)} .cta[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;filter:none} .cta.plain{background:none;border:1px solid var(--line-2);box-shadow:none;color:var(--txt-dim);font-weight:500} .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);margin-top:52px;overflow:hidden} .fact{background:var(--navy-800);padding:20px 22px} .fact b{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em} .fact span{font-size:13px;color:var(--txt-mute)} .panel{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r);padding:26px} .panel h3{font-size:17px;margin-bottom:14px} .mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:10px;margin-top:26px} .mod{display:flex;gap:12px;align-items:baseline;background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px;font-size:14px} .mod i{font-style:normal;color:var(--accent-text);font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px} .mod em{display:block;font-style:normal;color:var(--txt-mute);font-size:12px} .rules{list-style:none;padding:0;margin:0;display:grid;gap:13px} /* Les consignes comptent désormais plusieurs phrases : un interligne un peu plus ample et une longueur de ligne bornée gardent la lecture confortable, y compris sur grand écran où le panneau s'étire. */ .rules li{display:flex;gap:11px;font-size:14.5px;color:var(--txt-dim);line-height:1.58;max-width:84ch} .rules li b{color:var(--txt);font-weight:600} .dot{width:7px;height:7px;border-radius:50%;background:var(--grad);flex:0 0 7px;margin-top:9px} .foot{padding:34px 0;color:var(--txt-mute);font-size:12.5px;border-top:1px solid var(--line);margin-top:60px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} /* ---------- Forms ---------- */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){.grid2{grid-template-columns:1fr}} label{display:block;font-size:12.5px;color:var(--txt-dim);margin-bottom:6px} .f{width:100%;background:var(--field-bg);border:1px solid var(--line-2);color:var(--txt);border-radius:var(--r-s);padding:11px 13px} .f:focus{border-color:var(--vio);outline:none} .f.bad{border-color:var(--crit)} textarea.f{min-height:150px;resize:vertical;line-height:1.6} .chk{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--txt-dim);margin-top:6px} /* Champ de mot de passe avec bascule d'affichage. Le bouton se superpose au champ ; la réserve de place à droite évite que le texte passe dessous. */ .pwfield{position:relative;display:block} .pwfield .f{padding-right:92px} .panel.login .pwfield .f{padding-right:92px} .pwtoggle{position:absolute;right:7px;top:50%;transform:translateY(-50%); background:transparent;border:0;color:var(--txt-mute);font-size:12.5px;font-weight:600; cursor:pointer;padding:7px 9px;border-radius:7px;line-height:1; min-height:34px;transition:color .18s,background .18s} .pwtoggle:hover{color:var(--txt);background:var(--hover-soft)} .pwtoggle:focus-visible{outline:2px solid var(--vio);outline-offset:1px;color:var(--txt)} .chk input{margin-top:4px;accent-color:var(--mag);width:16px;height:16px} .hint{font-size:12.5px;color:var(--txt-mute)} .err{color:var(--err-fg);font-size:13px;min-height:19px} /* ---------- Device check ---------- */ .dev{display:grid;grid-template-columns:1.1fr .9fr;gap:20px} @media(max-width:760px){.dev{grid-template-columns:1fr}} .dev-controls{min-width:0} .dev-controls .device-action{margin-top:12px;align-self:flex-start} .device-share{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} .device-share .status{margin-top:0} @media(max-width:640px){.dev-controls .device-action{width:100%;justify-content:center}} video{width:100%;border-radius:var(--r);background:var(--video-bg);aspect-ratio:4/3;object-fit:cover;transform:scaleX(-1)} .status{display:flex;align-items:center;gap:9px;font-size:14px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--navy-800);margin-bottom:10px} .pill{width:9px;height:9px;border-radius:50%;background:var(--txt-mute)} .pill.on{background:var(--ok);box-shadow:0 0 0 4px rgba(47,208,138,.16)} .pill.off{background:var(--crit);box-shadow:0 0 0 4px rgba(255,92,92,.16)} .meter{height:7px;background:var(--field-bg);border-radius:99px;overflow:hidden;border:1px solid var(--line)} .meter i{display:block;height:100%;width:0;background:var(--grad);transition:width .09s linear} /* ---------- Test runtime ---------- */ .runhead{position:sticky;top:0;z-index:40;background:var(--runhead-bg);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)} .runhead-in{max-width:1120px;margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .crumb{font-size:13px;color:var(--txt-dim);margin-left:auto} .crumb b{color:var(--txt)} .timer{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:22px;font-weight:700;padding:6px 14px;border-radius:99px;border:1px solid var(--line-2);letter-spacing:.02em} .timer.t1{color:var(--txt)} .timer.t2{color:var(--warn);border-color:rgba(255,176,32,.45)} .timer.t3{color:var(--t3-fg);border-color:var(--t3-bd);background:var(--t3-bg)} .timer.t4{color:var(--on-accent);background:var(--crit-solid);border-color:var(--crit-solid)} .timer.t5{color:var(--on-accent);background:var(--crit-solid);border-color:var(--crit-solid);animation:pulse 1s infinite} @keyframes pulse{50%{opacity:.45}} .bar{height:3px;background:var(--track-bg)} .bar i{display:block;height:100%;background:var(--grad);transition:width .35s ease} /* Vignette de contrôle caméra. Par défaut elle est intégrée à la barre supérieure : sa place est réservée, elle ne peut donc jamais recouvrir une question ni une commande. Elle ne flotte en bas à droite que sur les écrans larges, où la marge est suffisante. */ .cam-mini{width:52px;height:39px;border-radius:7px;border:1px solid var(--line-2);object-fit:cover;transform:scaleX(-1);background:var(--video-bg);display:block} .camwrap{position:relative;border-radius:8px;overflow:hidden;flex:0 0 auto;pointer-events:none} .camwrap span{position:absolute;left:4px;bottom:3px;font-size:8.5px;letter-spacing:.08em;color:#fff;text-shadow:0 1px 3px #000} @media(min-width:1101px){ .camwrap{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:45; box-shadow:var(--shadow-lg);border-radius:10px} .cam-mini{width:96px;height:72px;border-radius:8px} .camwrap span{left:6px;bottom:5px;font-size:10px} } .camwrap span{position:absolute;left:6px;bottom:5px;font-size:10px;letter-spacing:.1em;color:#fff;text-shadow:0 1px 3px #000} .qbox{max-width:820px;margin:0 auto;padding:34px 26px 90px} .qmeta{display:flex;gap:10px;align-items:center;font-size:11.5px;letter-spacing:.1em;color:var(--txt-mute);margin-bottom:14px;flex-wrap:wrap} .chip{border:1px solid var(--line-2);border-radius:99px;padding:3px 10px;letter-spacing:.06em} .chip.d1{color:var(--d1);border-color:var(--d1-bd)} .chip.d2{color:var(--d2);border-color:var(--d2-bd)} .chip.d3{color:var(--d3);border-color:var(--d3-bd)} .qtext{font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.35} .qsub{color:var(--txt-dim);font-size:14.5px;margin-top:12px;white-space:pre-wrap} .opts{display:grid;gap:10px;margin-top:24px} .opt{display:flex;gap:13px;align-items:flex-start;background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;cursor:pointer;font-size:15px;transition:border-color .15s,background .15s} .opt:hover{border-color:var(--line-2)} .opt.sel{border-color:var(--mag);background:rgba(232,57,155,.09)} .opt input{margin-top:3px;accent-color:var(--mag);width:17px;height:17px;flex:0 0 17px} .ord{display:grid;gap:8px;margin-top:22px} .ord-item{display:flex;align-items:center;gap:12px;background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 14px;font-size:14.5px} .ord-item .num{font-family:var(--mono);color:var(--accent-text);font-size:13px;width:18px} .ord-item .txt{flex:1} .mini{background:none;border:1px solid var(--line-2);color:var(--txt-dim);width:28px;height:26px;border-radius:6px;cursor:pointer;line-height:1} .mini:hover{color:var(--txt)} .match{display:grid;gap:9px;margin-top:22px} .match-row{display:grid;grid-template-columns:1fr 190px;gap:12px;align-items:center;background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 14px;font-size:14.5px} @media(max-width:600px){.match-row{grid-template-columns:1fr}} .calcrow{display:flex;align-items:center;gap:12px;margin-top:22px} .calcrow .f{max-width:190px;font-family:var(--mono);font-size:17px} .calcrow span{color:var(--txt-dim);font-size:14px} .navrow{display:flex;gap:12px;align-items:center;margin-top:34px;flex-wrap:wrap} .saved{font-size:12.5px;color:var(--txt-mute);margin-left:auto;display:flex;gap:7px;align-items:center} .saved i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block} .brief{background:var(--brief-bg);border:1px solid var(--brief-bd);border-radius:var(--r-s);padding:16px 18px;margin-top:20px;font-size:14.5px;color:var(--brief-fg);white-space:pre-wrap} .task{margin-top:12px;border-left:3px solid var(--mag);background:rgba(232,57,155,.09);border-radius:0 var(--r-s) var(--r-s) 0;padding:15px 18px;font-size:14.5px} .task b{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--eyebrow);margin-bottom:7px;font-weight:700} .task span{color:var(--task-fg)} .rec{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r);padding:30px;margin-top:24px} .rec .big{font-family:var(--mono);font-size:38px;font-weight:700} .recbtn{border:0;border-radius:99px;padding:14px 26px;font-weight:650;cursor:pointer;color:var(--on-accent);background:var(--crit-solid)} .recbtn.stop{background:var(--rec-stop-bg);color:var(--rec-stop-fg)} /* Ordre d'empilement : contenu < en-tête d'épreuve (40) < vignette caméra (45) < modale (90) < toast (120). Le toast doit rester AU-DESSUS de la modale : celle-ci applique un flou d'arrière-plan qui rend illisible tout ce qui est peint en dessous, et une notification peut très bien survenir alors qu'une fenêtre est ouverte — un collage refusé dans un champ de confirmation, par exemple. */ .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:120;background:var(--navy-700);border:1px solid var(--line-2);border-radius:99px;padding:12px 22px;font-size:14px;box-shadow:var(--shadow-lg)} .modal{position:fixed;inset:0;z-index:90;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:24px} .modal-in{background:var(--navy-800);border:1px solid var(--line-2);border-radius:var(--r);max-width:620px;width:100%;padding:28px;max-height:86vh;overflow:auto} .modal-in.wide{max-width:820px} .row-end{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap} .btn{border:1px solid var(--line-2);background:none;color:var(--txt);padding:11px 20px;border-radius:99px;cursor:pointer;font-size:14px} .btn.pri{background:var(--grad);border:0;font-weight:650;color:var(--on-accent)} .btn.dan{border-color:var(--d3-bd);color:var(--danger-fg)} /* Export : action colorée mais volontairement distincte du dégradé de marque, réservé à l'action principale d'une page (créer un candidat, valider). */ .btn.exp{background:var(--vio);border-color:var(--vio);color:var(--on-accent);font-weight:600} .btn.exp:hover{filter:brightness(1.1)} .btn:hover{filter:brightness(1.1)} /* ---------- Admin ---------- */ .adm{display:grid;grid-template-columns:236px 1fr;min-height:100vh;background:var(--lite);color:var(--ink)} @media(max-width:820px){.adm{grid-template-columns:1fr}} .side{background:var(--side-bg);padding:24px 18px;border-right:1px solid var(--side-line)} .side nav{display:grid;gap:2px;margin-top:26px} .side a{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;border-radius:8px;font-size:14px;color:var(--side-txt-dim);text-decoration:none;cursor:pointer} .side a:hover{background:var(--side-hover);color:var(--side-txt)} .side a.on{background:var(--grad);color:var(--on-accent);font-weight:600} .side a small{font-size:11px;opacity:.85;font-variant-numeric:tabular-nums} .side .who{margin-top:28px;padding-top:18px;border-top:1px solid var(--side-line);font-size:12px;color:var(--side-txt-mute)} .main{padding:30px 34px 70px;min-width:0} @media(max-width:640px){.main{padding:22px 18px 60px}} .mhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px} .mhead h2{font-size:25px} .mhead p{color:var(--ink-dim);font-size:14px;margin:6px 0 0} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px} .kpi{background:var(--surface);border:1px solid var(--lite-2);border-radius:12px;padding:17px 18px} .kpi b{display:block;font-size:27px;font-weight:700;letter-spacing:-.02em} .kpi span{font-size:12.5px;color:var(--ink-mute);display:block} .kpi span::first-letter{text-transform:uppercase} .kpi i::first-letter{text-transform:uppercase} .kpi.hot b{color:var(--accent-text)} .card{background:var(--surface);border:1px solid var(--lite-2);border-radius:12px;padding:20px 22px;margin-top:18px} .card h3{font-size:16px;margin-bottom:4px} .card .sub{font-size:13px;color:var(--ink-mute);margin-bottom:16px} table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;font-size:11.5px;letter-spacing:.08em;color:var(--ink-faint);font-weight:600;padding:0 12px 9px;border-bottom:1px solid var(--lite-2)} td{padding:12px;border-bottom:1px solid var(--lite-2);vertical-align:middle} tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--surface-2)} .badge{display:inline-block;font-size:11.5px;font-weight:650;padding:3px 10px;border-radius:99px;white-space:nowrap} /* Statut d'évaluation et nombre de vigilances : deux indicateurs lus ensemble, donc alignés sur la même ligne plutôt qu'empilés. */ .statusline{display:flex;align-items:center;gap:8px;flex-wrap:nowrap} /* Identifiant de connexion d'un recruteur : lisible et sélectionnable d'un bloc. */ .ident{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px; background:var(--ident-bg);border:1px solid var(--lite-2);border-radius:6px;padding:2px 8px;color:var(--ident-fg)} .b-exc{background:var(--b-exc-bg);color:var(--b-exc-fg)}.b-good{background:var(--b-good-bg);color:var(--b-good-fg)} .b-mid{background:var(--b-mid-bg);color:var(--b-mid-fg)}.b-low{background:var(--b-low-bg);color:var(--b-low-fg)} .b-wait{background:var(--b-wait-bg);color:var(--b-wait-fg)}.b-nc{background:var(--b-nc-bg);color:var(--b-nc-fg)} .link{color:var(--link);font-weight:600;cursor:pointer;text-decoration:none;border:0;background:none;padding:0;font-size:14px} /* min-width:0 est indispensable : sans lui, une piste de grille ne peut pas descendre sous la largeur minimale de son contenu. Une réponse rédigée contenant une longue chaîne sans espace étirait alors toute la colonne, et avec elle chaque carte — les barres de compétence s'allongeaient sur des milliers de pixels et la valeur « 9 / 9 » sortait de l'écran. */ .split{display:grid;grid-template-columns:1.25fr .75fr;gap:18px} .split>*{min-width:0} /* Complément : les contenus libres coupent les chaînes trop longues au lieu d'imposer leur largeur au conteneur. */ .qa .ans,.brief,.mail,.qsub{overflow-wrap:anywhere} /* Barres de compétence : largeur plafonnée pour rester lisibles sur grand écran. La longueur reste strictement proportionnelle au ratio calculé. */ .cbar{max-width:640px} /* Compteur de mots d'une rédaction : même graisse que les indications, passe en couleur d'alerte lorsque la contrainte n'est pas respectée. */ .compteur{margin-top:6px;font-variant-numeric:tabular-nums} .compteur.hors{color:var(--danger-fg)} @media(max-width:900px){.split{grid-template-columns:1fr}} .scorebig{font-size:52px;font-weight:750;letter-spacing:-.03em;line-height:1} .scorebig small{font-size:19px;color:var(--ink-soft);font-weight:500} .cbar{margin-bottom:13px} .cbar .t{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px} .cbar .t b{font-variant-numeric:tabular-nums} .track{height:8px;background:var(--track-bg);border-radius:99px;overflow:hidden} .track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--vio),var(--mag))} .track i.low{background:linear-gradient(90deg,var(--track-low-1),var(--track-low-2))} .grid-eval{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center;font-size:14px} .seg{display:inline-flex;border:1px solid var(--lite-2);border-radius:8px;overflow:hidden} .seg button{border:0;background:var(--surface);padding:7px 11px;font-size:12.5px;cursor:pointer;color:var(--ink-dim);border-left:1px solid var(--lite-2)} .seg button:first-child{border-left:0} .seg button.on{background:var(--ink-solid);color:var(--on-ink-solid);font-weight:600} .alert{border-left:3px solid var(--crit);background:var(--alert-bg);color:var(--alert-fg);padding:12px 15px;border-radius:0 8px 8px 0;font-size:13.5px;margin-top:14px} .note{border-left:3px solid var(--vio);background:var(--note-bg);color:var(--note-fg);padding:12px 15px;border-radius:0 8px 8px 0;font-size:13.5px;margin-top:14px} .qa{border:1px solid var(--lite-2);border-radius:10px;padding:15px 17px;margin-bottom:11px} .qa .qh{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-mute);margin-bottom:8px} .qa .qq{font-weight:600;font-size:14.5px;margin-bottom:9px} .qa .ans{font-size:14px;background:var(--surface-2);border:1px solid var(--lite-2);border-radius:8px;padding:10px 12px;white-space:pre-wrap} .qa .good{color:var(--good-fg)}.qa .bad{color:var(--bad-fg)} .tokrow{display:flex;gap:9px;align-items:center;background:var(--tok-bg);color:var(--tok-fg);border-radius:9px;padding:11px 14px;font-family:var(--mono);font-size:13px;overflow:auto} .mail{background:var(--surface-2);border:1px solid var(--lite-2);border-radius:10px;padding:18px;font-size:13.5px;white-space:pre-wrap;line-height:1.65;font-family:var(--mono)} .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:15px} .filters button{border:1px solid var(--lite-2);background:var(--surface);color:var(--ink-dim);border-radius:99px;padding:6px 14px;font-size:13px;cursor:pointer} .filters button.on{background:var(--ink-solid);color:var(--on-ink-solid);border-color:var(--ink-solid)} .center{text-align:center;padding:44px 20px;color:var(--ink-faint);font-size:14px} audio{width:100%;margin-top:10px} .tinylab{font-size:11.5px;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:8px} /* Logo cliquable : retour au tableau de bord. Un bouton, pour être atteignable au clavier, réduit à néant pour ne rien changer à l'aspect du logo. */ .brandhome{display:block;width:100%;background:none;border:0;padding:0;margin:0; text-align:left;cursor:pointer;border-radius:10px;color:inherit;font:inherit} .brandhome:focus-visible{outline:2px solid var(--mag);outline-offset:4px} .brandhome:hover{opacity:.88} /* ---------- Sélecteur de thème (espace interne uniquement) ---------- */ /* L'évaluation du candidat est figée en thème sombre : elle n'a ni sélecteur, ni bouton, donc aucun style dédié. */ .themeseg{margin-top:4px} .themeseg button{min-width:82px;text-align:center} .top{gap:14px} /* ---------- Utilitaires de contenu ---------- Les couleurs des libellés de tableaux, des graphiques et des liens destructifs passent par des classes : aucune couleur en dur dans le JavaScript, donc un basculement de thème complet et sans oubli. */ .kv{color:var(--ink-faint);font-size:13px} .kv-s{font-size:12px;color:var(--ink-faint)} .kv-r{text-align:right;font-size:12px;color:var(--ink-faint)} .kv-b{font-size:13px;color:var(--ink-dim)} .link.dan{color:var(--bad-fg)} .side .who .link.out{color:var(--side-txt-dim);font-weight:500} svg text.ax{fill:var(--ink-faint)} svg text.axv{fill:var(--ink)} svg rect.serie-a,svg text.serie-a{fill:var(--vio)} svg rect.serie-b,svg text.serie-b{fill:var(--mag)} /* ---------- Logo ---------- */ .logo{display:block;height:32px;width:auto;-webkit-user-select:none;user-select:none} /* Une seule version du logo est visible à la fois, choisie par le thème. Le logo « fond sombre » est clair, celui « fond clair » est encré. */ :root[data-theme="light"] .logo-fond-sombre{display:none} :root:not([data-theme="light"]) .logo-fond-clair{display:none} .logo.sm{height:26px} .vdiv{width:1px;height:24px;background:var(--line-2);flex:0 0 1px} .brand{gap:13px} /* ---------- Mouvement ---------- */ :root{--ease:cubic-bezier(.22,.9,.24,1)} @keyframes fadeUp{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}} @keyframes cardInR{from{opacity:0;transform:translate3d(30px,12px,0) scale(.985)}to{opacity:1;transform:none}} @keyframes cardInL{from{opacity:0;transform:translate3d(-30px,12px,0) scale(.985)}to{opacity:1;transform:none}} @keyframes optIn{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}} @keyframes toastIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}} @keyframes overlayIn{from{opacity:0}to{opacity:1}} @keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(255,92,92,.5)}70%{box-shadow:0 0 0 20px rgba(255,92,92,0)}100%{box-shadow:0 0 0 0 rgba(255,92,92,0)}} @keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,-28px,0)}} @keyframes sweep{from{background-position:-140% 0}to{background-position:240% 0}} #qcard{will-change:opacity,transform} .card-in-right{animation:cardInR .44s var(--ease) backwards} .card-in-left{animation:cardInL .44s var(--ease) backwards} .card-out-left{opacity:0;transform:translate3d(-26px,0,0) scale(.988);transition:opacity .18s ease-in,transform .18s ease-in} .card-out-right{opacity:0;transform:translate3d(26px,0,0) scale(.988);transition:opacity .18s ease-in,transform .18s ease-in} #qcard .qmeta{animation:fadeUp .5s var(--ease) backwards} #qcard .brief{animation:fadeUp .52s var(--ease) .04s backwards} #qcard .qtext{animation:fadeUp .52s var(--ease) .07s backwards} #qcard .qsub{animation:fadeUp .52s var(--ease) .11s backwards} #qcard .navrow{animation:fadeUp .5s var(--ease) .26s backwards} #qcard .opt,#qcard .ord-item,#qcard .match-row,#qcard .calcrow,#qcard textarea.f,#qcard .rec{ animation:optIn .46s var(--ease) backwards;animation-delay:calc(120ms + var(--i,0) * 55ms)} #qcard .hint{animation:fadeUp .5s var(--ease) .3s backwards} .opt{position:relative;overflow:hidden;transition:border-color .24s var(--ease),background .24s var(--ease),transform .16s var(--ease)} .opt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);transform:scaleY(0);transition:transform .3s var(--ease)} .opt.sel::before{transform:scaleY(1)} .opt:active{transform:scale(.993)} .ord-item{transition:border-color .25s var(--ease),background .25s var(--ease)} .ord{position:relative} .ord-item{will-change:transform;position:relative;background:var(--navy-800)} .ord-item.lifting{box-shadow:var(--shadow-lg);border-color:var(--line-2)} .ord-item .num{transition:color .3s ease} .mini{transition:color .18s,border-color .18s,transform .15s} .mini:active{transform:scale(.9)} .bar i{transition:width .6s var(--ease)} .timer{transition:color .35s ease,background .35s ease,border-color .35s ease} .recbtn{transition:transform .16s var(--ease),filter .2s} .recbtn:active{transform:scale(.97)} .recbtn.stop{animation:ringPulse 1.7s ease-out infinite} .rec .big{transition:color .3s} .toast{animation:toastIn .34s var(--ease) backwards} .modal{animation:overlayIn .22s ease backwards;backdrop-filter:blur(3px)} .modal-in{animation:modalIn .36s var(--ease) backwards} .page-in{animation:fadeUp .5s var(--ease) backwards} .hero-in>*{animation:fadeUp .62s var(--ease) backwards} .hero-in>*:nth-child(1){animation-delay:.02s}.hero-in>*:nth-child(2){animation-delay:.07s} .hero-in>*:nth-child(3){animation-delay:.12s}.hero-in>*:nth-child(4){animation-delay:.18s} .hero-in>*:nth-child(5){animation-delay:.24s}.hero-in>*:nth-child(6){animation-delay:.3s} .orb{animation:drift 19s ease-in-out infinite} .orb.b{animation-duration:25s;animation-direction:reverse} .mods .mod{animation:optIn .5s var(--ease) backwards;animation-delay:calc(var(--i,0) * 40ms);transition:border-color .25s,transform .2s var(--ease)} .mods .mod:hover{border-color:var(--line-2);transform:translateY(-2px)} .cta,.btn,.ghost{transition:transform .16s var(--ease),filter .22s,box-shadow .28s,border-color .22s,color .22s} .cta:active,.btn:active,.ghost:active{transform:translateY(1px) scale(.99)} .f{transition:border-color .22s,box-shadow .22s,background .22s} .f:focus{box-shadow:0 0 0 3px rgba(232,57,155,.14)} @keyframes softPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(47,208,138,.35)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(47,208,138,0)}} .saved i{animation:softPulse 2.8s ease-in-out infinite} .status{transition:border-color .25s} .meter i{transition:width .08s linear} .track i{transition:width .9s var(--ease)} .page-in .kpi,.page-in .card{animation:fadeUp .5s var(--ease) backwards} .page-in .kpis .kpi:nth-child(2){animation-delay:.05s} .page-in .kpis .kpi:nth-child(3){animation-delay:.1s} .page-in .kpis .kpi:nth-child(4){animation-delay:.15s} .page-in .kpis .kpi:nth-child(5){animation-delay:.2s} .side a{transition:background .22s,color .22s,padding-left .22s} .side a:hover{padding-left:16px} tbody tr{transition:background .18s} .seg button{transition:background .2s,color .2s} .badge{transition:filter .2s} .qa{transition:border-color .25s,box-shadow .25s} .qa:hover{border-color:var(--lite-2-hover);box-shadow:var(--shadow-sm)} .skel{background:linear-gradient(90deg,var(--skel-1),var(--skel-2),var(--skel-1));background-size:200% 100%;animation:sweep 1.4s linear infinite} /* ---------- Onglets de connexion ---------- */ .tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:0} .tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--txt-mute); padding:11px 6px;font-size:14.5px;font-weight:600;cursor:pointer;transition:color .22s,border-color .22s} .tab:hover{color:var(--txt-dim)} .tab.on{color:var(--txt);border-bottom-color:var(--mag)} /* ---------- Écrans de connexion ---------- */ .panel.login{padding:6px 26px 26px} .panel.login .tabs{margin:0 -26px 4px;padding:0 26px} .panel.login .field{margin-top:18px} .panel.login .field label{margin-bottom:7px} .panel.login .f{padding:13px 15px;font-size:15px} .chk.remember{margin-top:18px;font-size:13.5px;color:var(--txt-dim);cursor:pointer; -webkit-user-select:none;user-select:none} .chk.remember input{width:17px;height:17px;flex:0 0 17px;cursor:pointer} .err:empty{display:none;min-height:0} .cta.block{display:flex;width:100%;justify-content:center;margin-top:20px} .cta.block + .cta.block{margin-top:10px} /* ---------- Bandeau de mode test ---------- */ .testbar{background:var(--testbar-bg);border:1px solid var(--testbar-bd);border-left:3px solid var(--warn); color:var(--testbar-fg);border-radius:0 9px 9px 0;padding:11px 15px;font-size:13.5px;margin-bottom:18px} /* ---------- Barre d'outils de la liste des candidats ---------- */ .toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px} .f.search{background:var(--surface);color:var(--ink);border-color:var(--lite-2);max-width:340px;padding:11px 14px} .f.search:focus{border-color:var(--vio);box-shadow:0 0 0 3px rgba(123,63,228,.12)} .chips{display:flex;gap:7px;flex-wrap:wrap} .fchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--lite-2);background:var(--surface); color:var(--ink-dim);border-radius:99px;padding:8px 14px;font-size:13.5px;cursor:pointer; transition:border-color .2s,color .2s,background .2s} .fchip:hover{border-color:var(--lite-2-hover);color:var(--ink)} .fchip.on{background:var(--ink-solid);border-color:var(--ink-solid);color:var(--on-ink-solid)} .fchip small{font-variant-numeric:tabular-nums;opacity:.7;font-size:12px} .sub2{font-size:12px;color:var(--ink-faint)} /* ---------- Responsivité ---------- */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -22px;padding:0 22px} .tablewrap table{min-width:640px} .tablewrap td:last-child{white-space:normal} .seg{flex-wrap:wrap} .seg button{white-space:nowrap} @media(max-width:820px){ .side{border-right:0;border-bottom:1px solid var(--side-line);padding:18px} .side nav{display:flex;gap:6px;margin-top:16px;overflow-x:auto;padding-bottom:4px} .side nav a{white-space:nowrap;padding:9px 14px} .side a:hover{padding-left:14px} .side .who{margin-top:16px;padding-top:14px} .card{padding:18px 16px} .tablewrap{margin:0 -16px;padding:0 16px} } @media(max-width:640px){ .runhead-in{padding:11px 16px;gap:10px} .timer{font-size:18px;padding:5px 12px} .crumb{font-size:12px;width:100%;margin-left:0;order:3} .qbox{padding:26px 18px 80px} .qtext{font-size:18.5px} .scorebig{font-size:40px} .cam-mini{width:46px;height:34px} .modal{padding:12px} .modal-in{padding:20px} .grid-eval{grid-template-columns:1fr;gap:6px} .grid-eval .seg{margin-bottom:8px} .mhead h2{font-size:21px} .rec{padding:22px 16px} .rec .big{font-size:31px} } @media(max-width:400px){ .fchip{padding:7px 11px;font-size:12.5px} .f.search{max-width:100%} } /* ============================================================ RESPONSIVE AVANCÉ Objectif : une interface réellement utilisable au doigt, du pliable fermé (280 px) au grand écran, en portrait comme en paysage, y compris en fenêtre partagée. ============================================================ */ /* La barre supérieure étant collante, tout défilement programmé doit réserver sa hauteur : sans cela une question ou un bouton peut se retrouver dessous. */ html{scroll-padding-top:104px} @media(max-width:640px){html{scroll-padding-top:120px}} @media(max-height:520px) and (orientation:landscape){html{scroll-padding-top:76px}} #qcard,.ord-item,.opt,.rec{scroll-margin-top:104px} /* Zones sûres : encoches, barres système, bords incurvés. */ body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} .runhead{padding-top:env(safe-area-inset-top)} .toast{bottom:calc(26px + env(safe-area-inset-bottom))} /* Hauteur d'écran fiable sur mobile : dvh suit la barre d'adresse. */ .hero{min-height:100vh} @supports (height:100dvh){.hero{min-height:100dvh}.adm{min-height:100dvh}} /* Confort tactile : cibles d'au moins 44 px sur écran sans souris. */ @media (pointer:coarse){ .mini{width:44px;height:40px;font-size:16px} .opt{padding:16px} .opt input{width:22px;height:22px;flex-basis:22px} .seg button{padding:11px 14px;min-height:40px} /* Liens d'action des tableaux : hauteur de doigt, sans casser l'alignement. */ .link{display:inline-flex;align-items:center;min-height:44px;padding:0 2px} .fchip{padding:10px 15px;min-height:42px} .tab{padding:14px 6px;min-height:48px} .btn{padding:12px 20px;min-height:44px} .recbtn{padding:16px 28px;min-height:52px} .cta{min-height:48px} /* Cases à cocher : jamais comprimées par le flex parent, et assez grandes. */ .chk input,.chk.remember input{width:22px!important;height:22px!important;flex:0 0 22px!important} /* Le libellé entier devient la zone cliquable : viser la case n'est pas nécessaire. */ .chk,.chk.remember{min-height:48px;align-items:center;padding:4px 0} /* 16 px minimum : empêche le zoom automatique d'iOS à la mise au point. Sélecteurs suffisamment spécifiques pour l'emporter sur les styles de panneau. */ input.f,select.f,textarea.f,.panel .f,.panel.login .f,.modal-in .f{font-size:16px} .pwtoggle{min-height:40px;padding:9px} } /* Pliable fermé et très petits écrans (280–360 px). */ @media(max-width:360px){ .wrap,.narrow{padding-left:14px;padding-right:14px} .qbox{padding:20px 14px 76px} .title{font-size:30px} .qtext{font-size:17px} .timer{font-size:16px;padding:5px 10px} .runhead-in{padding:10px 12px;gap:8px} .cam-mini{width:40px;height:30px} .panel,.panel.login{padding:18px 14px} .panel.login .tabs{margin:0 -14px 4px;padding:0 14px} .facts,.mods{grid-template-columns:1fr} .rec{padding:18px 12px} .rec .big{font-size:28px} .navrow{gap:8px} .navrow .cta{width:100%;justify-content:center} .saved{margin-left:0;width:100%} .kpis{grid-template-columns:1fr} .scorebig{font-size:34px} } /* Paysage sur téléphone : la hauteur devient la ressource rare. */ @media(max-height:520px) and (orientation:landscape){ .runhead-in{padding:7px 16px} .timer{font-size:17px;padding:4px 11px} .qbox{padding:18px 20px 60px} .hero{min-height:auto;padding:26px 0 40px} .rec{padding:16px;gap:10px} .rec .big{font-size:26px} .cam-mini{width:44px;height:33px} video{aspect-ratio:16/9} } /* Tablette : deux colonnes utiles sans écraser le contenu. */ @media(min-width:821px) and (max-width:1100px){ .adm{grid-template-columns:200px 1fr} .split{grid-template-columns:1fr 1fr} .main{padding:26px 24px 60px} } /* Grands écrans : on borne la largeur de lecture. */ @media(min-width:1600px){ .main{max-width:1500px} .qbox{max-width:880px} } /* ------------------------------------------------------------ Tableaux → cartes sous 700 px. Un tableau de sept colonnes réduit à la taille d'un téléphone devient illisible : chaque ligne devient une carte étiquetée. ------------------------------------------------------------ */ @media(max-width:700px){ .tablewrap{overflow:visible;margin:0;padding:0} .tablewrap table{min-width:0} .tablewrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .tablewrap tr{display:block;border:1px solid var(--lite-2);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--surface)} .tablewrap tbody tr:hover{background:var(--surface)} .tablewrap td{display:flex;justify-content:space-between;align-items:center;gap:14px; border:0;border-bottom:1px dashed var(--lite-2);padding:8px 0;text-align:left!important} .tablewrap tr td:last-child{border-bottom:0;padding-bottom:0} .tablewrap td::before{content:attr(data-label);font-size:11.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-faint);font-weight:600;flex:0 0 auto} .tablewrap td:empty{display:none} .tablewrap td[data-label=""]::before{display:none} /* Colonne d'actions : plusieurs liens côte à côte doivent pouvoir se replier. */ .tablewrap td[data-label=""]{white-space:normal!important;flex-wrap:wrap;justify-content:flex-start; gap:6px 18px;padding-top:10px} /* En vue carte, la largeur disponible est plus courte : les deux indicateurs restent côte à côte tant qu'ils tiennent, et se replient proprement sinon. */ .statusline{flex-wrap:wrap;justify-content:flex-end;gap:6px} } /* ---------- Tableau de bord de pilotage (Direction) ---------- */ .kpi i{display:block;font-style:normal;font-size:12px;color:var(--ink-soft);margin-top:5px} .na{color:var(--ink-na);font-style:italic;font-size:.94em} tr.clic{cursor:pointer} tr.clic:hover{background:var(--surface-2)} tr.clic:focus-visible{outline:2px solid var(--vio);outline-offset:-2px} .daterange{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-mute);flex-wrap:wrap} /* La barre de filtres doit rester utilisable au doigt : sur petit écran les pastilles passent à la ligne et le sélecteur de dates reste entier. */ @media(max-width:700px){ .daterange{width:100%;justify-content:flex-start} .daterange .f{flex:1 1 130px;min-width:0} .toolbar [data-a="reinit-filtres"]{margin-left:0!important} } .daterange .f{background:var(--surface);color:var(--ink);border-color:var(--lite-2);padding:9px 12px;width:auto;min-width:145px} @media(max-width:640px){ .daterange{width:100%} .daterange .f{flex:1 1 auto;min-width:0} }