/* ============================================================================ Passdesign Studio, pd-ui.css Partage par index.html, studio.html et client.html. Identite heritee de deck.passdesign.co : encre, bleu, Archivo 900, Instrument Serif italique, IBM Plex Mono. Deux themes : encre (Studio) et papier (Espace client), choisis par data-theme sur . ========================================================================== */ :root{ --encre:#060B16; --encre-2:#0A1224; --encre-3:#10192E; --bleu:#2376FA; --bleu-vif:#3D8BFF; --glace:#9CC2FF; --bleu-pale:#DCE8FF; --papier:#EDF2FA; --blanc:#F7FAFF; --brume:#8A97AD; --signal:#FF5C39; --succes:#48C78E; --attention:#E8A13C; --ease-out:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.83,0,.17,1); --ease-back:cubic-bezier(.34,1.56,.64,1); --r:10px; --r2:14px; --r3:18px; --pill:99px; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --sans:'Archivo',system-ui,-apple-system,sans-serif; --serif:'Instrument Serif',Georgia,serif; } /* Theme encre : le Studio */ :root, :root[data-theme="encre"]{ --fond:var(--encre); --fond-2:var(--encre-2); --surface:rgba(16,26,48,.55); --surface-2:rgba(12,20,40,.9); --texte:var(--blanc); --texte-2:var(--brume); --texte-3:#5A6478; --grid:rgba(156,194,255,.07); --grid-2:rgba(156,194,255,.14); --grid-3:rgba(156,194,255,.28); --accent:var(--bleu); --accent-vif:var(--bleu-vif); --accent-doux:var(--glace); --ombre:0 30px 80px rgba(0,0,0,.45); --ombre-2:0 18px 50px rgba(35,118,250,.18); --verre:rgba(10,17,34,.72); color-scheme:dark; } /* Theme papier : l'Espace client */ :root[data-theme="papier"]{ --fond:var(--papier); --fond-2:#F7FAFF; --surface:rgba(255,255,255,.72); --surface-2:#FFFFFF; --texte:#22304A; --texte-2:#4A5A75; --texte-3:#8A97AD; --grid:rgba(6,11,22,.08); --grid-2:rgba(6,11,22,.14); --grid-3:rgba(35,118,250,.35); --accent:var(--bleu); --accent-vif:#0F5FE0; --accent-doux:#1F5EFF; --ombre:0 30px 80px rgba(6,11,22,.12); --ombre-2:0 18px 50px rgba(35,118,250,.18); --verre:rgba(247,250,255,.78); color-scheme:light; } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{background:var(--fond);color:var(--texte);font-family:var(--sans);font-size:15px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased} ::selection{background:var(--bleu);color:var(--blanc)} img{max-width:100%;display:block} a{color:inherit} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,textarea,select{font:inherit;color:inherit} h1,h2,h3{font-weight:900;letter-spacing:-.04em;line-height:.98} h1{font-size:clamp(2.4rem,5vw,4.4rem)} h2{font-size:clamp(1.8rem,3.4vw,2.8rem)} h3{font-size:1.25rem;letter-spacing:-.02em;font-weight:800} .serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em} .mono,.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} .kicker{display:flex;align-items:center;gap:.8rem;color:var(--accent-doux)} .kicker::before{content:"";width:2rem;height:1px;background:var(--accent);flex:none} .lede{color:var(--texte-2);font-size:1.05rem;line-height:1.65;max-width:52ch} .muted{color:var(--texte-2)}.faint{color:var(--texte-3)} .tabular{font-variant-numeric:tabular-nums} .hl{color:var(--accent-vif)} /* ---------- ambiance ---------- */ .grain{position:fixed;inset:-100%;z-index:9998;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); animation:grain 8s steps(10) infinite} :root[data-theme="papier"] .grain{opacity:.035} @keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}30%{transform:translate(5%,-4%)}50%{transform:translate(-6%,6%)}70%{transform:translate(7%,3%)}90%{transform:translate(-3%,7%)}} #spot{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(560px circle at var(--sx,50%) var(--sy,40%),rgba(35,118,250,.08),transparent 70%)} :root[data-theme="papier"] #spot{background:radial-gradient(560px circle at var(--sx,50%) var(--sy,40%),rgba(35,118,250,.06),transparent 70%)} #cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--bleu);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s var(--ease-out),height .3s var(--ease-out),background .3s;mix-blend-mode:difference;display:none} html.curseur #cursor{display:block} html.curseur body{cursor:none} html.curseur a,html.curseur button,html.curseur [role=button]{cursor:none} #cursor.is-hover{width:44px;height:44px;background:var(--blanc)} #cursor.is-text{width:2px;height:24px;border-radius:1px} @media (hover:none){html.curseur #cursor{display:none}html.curseur body{cursor:auto}} /* ---------- reveal ---------- */ .line-mask{overflow:hidden;display:block} .line-mask>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease-out)} .in .line-mask>span,.line-mask.in>span{transform:none} .fade{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .fade.in,.in>.fade{opacity:1;transform:none} .stagger>*{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)} .stagger.in>*{opacity:1;transform:none} .stagger.in>*:nth-child(1){transition-delay:.02s}.stagger.in>*:nth-child(2){transition-delay:.08s}.stagger.in>*:nth-child(3){transition-delay:.14s}.stagger.in>*:nth-child(4){transition-delay:.2s}.stagger.in>*:nth-child(5){transition-delay:.26s}.stagger.in>*:nth-child(6){transition-delay:.32s}.stagger.in>*:nth-child(7){transition-delay:.38s}.stagger.in>*:nth-child(8){transition-delay:.44s}.stagger.in>*:nth-child(n+9){transition-delay:.5s} @keyframes vIn{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} .vue-in{animation:vIn .55s var(--ease-out) both} @keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}} .pop{animation:pop .5s var(--ease-back) both} /* ---------- logo ---------- */ .logo-img{display:inline-block;aspect-ratio:652/123;background:url(assets/logo.png) center/contain no-repeat;width:120px} :root[data-theme="papier"] .logo-img{background-image:url(assets/logo-dark.png)} /* ---------- boutons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:.9rem 1.5rem;border-radius:var(--pill);background:var(--bleu);color:var(--blanc);font-weight:700;font-size:.95rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap; transition:transform .4s var(--ease-out),box-shadow .4s,background .3s,opacity .3s;will-change:transform;position:relative} .btn:hover{box-shadow:0 14px 40px rgba(35,118,250,.4);transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.98)} .btn .arrow{transition:transform .35s var(--ease-out)} .btn:hover .arrow{transform:translateX(5px)} .btn:disabled,.btn[aria-disabled=true]{opacity:.4;pointer-events:none} .btn.large{padding:1.15rem 2.2rem;font-size:1.05rem} .btn.small{padding:.6rem 1.05rem;font-size:.85rem} .btn.ghost{background:transparent;color:var(--texte);border:1px solid var(--grid-2)} .btn.ghost:hover{border-color:var(--grid-3);box-shadow:none;background:var(--surface)} .btn.danger{background:transparent;color:var(--signal);border:1px solid rgba(255,92,57,.4)} .btn.danger:hover{box-shadow:0 14px 40px rgba(255,92,57,.25)} .btn.atelier{background:transparent;color:var(--texte);isolation:isolate} .btn.atelier::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(120deg,var(--bleu),var(--glace),var(--bleu));background-size:200% 100%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:glisse 3s linear infinite;z-index:-1} .btn.atelier::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--bleu-vif);box-shadow:0 0 12px var(--bleu-vif);order:-1;animation:pulse 1.8s ease-in-out infinite} .btn.atelier:hover{box-shadow:0 14px 40px rgba(35,118,250,.25)} .btn.atelier.busy::after{animation:pulse .5s ease-in-out infinite} @keyframes glisse{to{background-position:200% 0}} @keyframes pulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}} .btn.busy{pointer-events:none} .btn.busy .lbl{opacity:.5} .link{background:none;border:0;color:var(--texte-2);font-size:.9rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--grid-3);cursor:pointer;transition:color .3s} .link:hover{color:var(--texte)} .icon-btn{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--grid-2);color:var(--texte-2);transition:border-color .3s,color .3s,background .3s} .icon-btn:hover{border-color:var(--grid-3);color:var(--texte);background:var(--surface)} /* ---------- champs ---------- */ .field{display:grid;gap:.5rem} .field label,.label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2)} .input,textarea.input,select.input{width:100%;padding:.9rem 1.1rem;border-radius:var(--r2);border:1px solid var(--grid-2);background:var(--surface);color:var(--texte);outline:none;transition:border-color .3s,box-shadow .3s,background .3s} .input::placeholder{color:var(--texte-3)} .input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(35,118,250,.15);background:var(--surface-2)} textarea.input{min-height:120px;resize:vertical;line-height:1.55} .input.grand{font-size:1.25rem;padding:1.1rem 1.3rem} select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--texte-2) 50%),linear-gradient(135deg,var(--texte-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.6rem} .chips{display:flex;flex-wrap:wrap;gap:.55rem} .chip{padding:.7rem 1.1rem;border-radius:var(--pill);border:1px solid var(--grid-2);background:var(--surface);color:var(--texte);font-size:.92rem;transition:border-color .3s,background .3s,color .3s,transform .3s var(--ease-out),box-shadow .3s} .chip:hover{border-color:var(--grid-3);transform:translateY(-1px)} .chip.on{background:var(--bleu);border-color:var(--bleu);color:var(--blanc);box-shadow:0 10px 30px rgba(35,118,250,.28)} .chip.small{padding:.5rem .85rem;font-size:.82rem} .chip .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;opacity:.7;margin-left:.5rem} /* ---------- surfaces ---------- */ .card{border:1px solid var(--grid);border-radius:var(--r2);background:linear-gradient(180deg,var(--surface),transparent);padding:1.4rem;position:relative;overflow:hidden;transition:transform .5s var(--ease-out),border-color .5s,box-shadow .5s} :root[data-theme="papier"] .card{background:var(--surface-2)} .card.hover:hover{transform:translateY(-4px);border-color:var(--grid-3)} .card.hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--bleu);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)} .card.hover:hover::after{transform:scaleX(1)} .card.accent{border-color:rgba(35,118,250,.45);box-shadow:0 30px 80px rgba(35,118,250,.12)} .panel{border:1px solid var(--grid);border-radius:var(--r3);background:var(--surface);overflow:hidden} :root[data-theme="papier"] .panel{background:var(--surface-2)} .sep{height:1px;background:var(--grid);margin:1.2rem 0} .badge{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .7rem;border-radius:var(--pill);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--grid-2);color:var(--texte-2);white-space:nowrap} .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .badge.bleu{color:var(--accent-doux);border-color:rgba(35,118,250,.4);background:rgba(35,118,250,.12)} .badge.vert{color:var(--succes);border-color:rgba(72,199,142,.45);background:rgba(72,199,142,.12)} .badge.orange{color:var(--attention);border-color:rgba(232,161,60,.45);background:rgba(232,161,60,.12)} .badge.rouge{color:var(--signal);border-color:rgba(255,92,57,.45);background:rgba(255,92,57,.12)} .badge.pulse::before{animation:pulse 1.6s ease-in-out infinite} .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--fond-2);background:var(--surface-2)} .avatar.ini{display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--accent-doux);background:var(--encre-3)} :root[data-theme="papier"] .avatar.ini{background:var(--bleu-pale);color:var(--bleu)} .empty{padding:2.6rem 1.4rem;text-align:center;color:var(--texte-2);font-family:var(--serif);font-style:italic;font-size:1.15rem;border:1px dashed var(--grid-2);border-radius:var(--r2)} .num{font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums} .progress{height:2px;background:var(--grid-2);border-radius:2px;overflow:hidden} .progress>i{display:block;height:100%;background:var(--bleu);width:0;transition:width .7s var(--ease-out)} /* ---------- pensee ---------- */ .think{display:inline-flex;gap:5px;align-items:center;height:16px;vertical-align:middle} .think i{width:6px;height:6px;border-radius:50%;background:var(--bleu-vif);animation:bl 1s infinite ease-in-out} .think i:nth-child(2){animation-delay:.15s}.think i:nth-child(3){animation-delay:.3s} @keyframes bl{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}} .skeleton{background:linear-gradient(90deg,var(--grid) 25%,var(--grid-2) 50%,var(--grid) 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:6px;min-height:14px} @keyframes sk{to{background-position:-200% 0}} /* ---------- toast ---------- */ #toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9500;display:grid;gap:.5rem;pointer-events:none} .toast{padding:.8rem 1.3rem;border-radius:var(--pill);background:var(--encre);color:var(--blanc);border:1px solid var(--grid-2);font-size:.9rem;box-shadow:var(--ombre);animation:toastIn .5s var(--ease-back) both;display:flex;gap:.7rem;align-items:center;pointer-events:auto} .toast.ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--succes)} .toast.err::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal)} .toast.out{animation:toastOut .4s var(--ease-inout) both} @keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateY(10px)}} /* ---------- modale ---------- */ #scrim{position:fixed;inset:0;background:rgba(6,11,22,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:9000;opacity:0;pointer-events:none;transition:opacity .35s} #scrim.on{opacity:1;pointer-events:auto} .modale{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) translateY(14px) scale(.98);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;z-index:9100; background:var(--fond-2);border:1px solid var(--grid-2);border-radius:var(--r3);box-shadow:var(--ombre);opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)} .modale.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)} .modale::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--bleu),var(--glace),var(--bleu-vif))} .modale .corps{padding:1.8rem 1.9rem 1.6rem} .modale .kicker{margin-bottom:1rem} .modale h2{font-size:1.65rem;margin-bottom:.8rem} .modale p{color:var(--texte-2);line-height:1.6} .modale .actions{display:flex;gap:.7rem;justify-content:flex-end;margin-top:1.6rem;flex-wrap:wrap} .modale.large{width:min(900px,calc(100vw - 32px))} /* ---------- tiroir ---------- */ .tiroir{position:fixed;top:0;right:0;bottom:0;width:min(640px,100vw);background:var(--fond-2);border-left:1px solid var(--grid-2);z-index:9050;transform:translateX(102%);transition:transform .55s var(--ease-out);overflow:auto;box-shadow:var(--ombre)} .tiroir.on{transform:none} /* ---------- table ---------- */ .table{width:100%;border-collapse:collapse;font-size:.92rem} .table th{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3);padding:.6rem .8rem;border-bottom:1px solid var(--grid-2);font-weight:500} .table td{padding:.8rem;border-bottom:1px solid var(--grid);vertical-align:middle} .table tr:hover td{background:var(--surface)} /* ---------- utilitaires ---------- */ .row{display:flex;align-items:center;gap:.8rem} .between{justify-content:space-between} .wrap{flex-wrap:wrap} .grow{flex:1;min-width:0} .grid{display:grid;gap:1rem} .g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)} .mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.6rem}.mt4{margin-top:2.4rem} .mb1{margin-bottom:.5rem}.mb2{margin-bottom:1rem}.mb3{margin-bottom:1.6rem} .hide{display:none!important} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} :focus-visible{outline:2px solid var(--glace);outline-offset:3px} @media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.line-mask>span,.fade,.stagger>*{transform:none;opacity:1}}