/* ============================================================================ NEXUS — maquette HTML autonome. Un seul fichier, sans build, sans dependance : c'est le document de reference pour l'implementation technique. Toutes les valeurs (couleurs, rayons, verre) sont celles mesurees sur le kit ClauseOS. Ce qui FONCTIONNE dans cette maquette, parce que c'etait demande : - la barre de recherche filtre projets, taches et contacts en direct ; - toute carte projet, et la carte de synthese en haut a droite, ouvrent la PAGE du projet qu'elles mentionnent ; - les projets termines tombent en bas du tri. Le reste est un decor fidele : le branchement aux vraies donnees se fait cote technique, en remplacant l'objet DATA plus bas. ========================================================================== */ /* Urbanist est auto-heberge (`fonts/urbanist.css`), charge avant ce fichier: pas d'appel a un CDN au chargement, et la police est la dans l'avion. */ :root{ --bg:#0A0A0A; --bg-raise:#0D0D0D; --green:#68E78E; --green-deep:#27884A; --green-mid:#369157; --green-dim:#1B5E33; --red:#FF5A5A; --red-soft:rgba(255,90,90,.14); --red-line:rgba(255,90,90,.34); --blue:#4D9DFF; --blue-soft:rgba(77,157,255,.14); --blue-line:rgba(77,157,255,.34); --orange:#FFA640; --orange-soft:rgba(255,166,64,.15); --orange-line:rgba(255,166,64,.38); /* Le grand panneau porte la couleur de l'etat, pas seulement le vert. Chaque etat a donc son trio profond / moyen / sourd, construit sur EXACTEMENT les memes teinte, saturation et clarte que le trio vert (H propre, S 55/46/55, L 34/39/24 %) : quatre panneaux de meme densite, quatre couleurs. */ --red-deep:#872727; --red-mid:#913636; --red-dim:#5F1B1B; --orange-deep:#875C27; --orange-mid:#916836; --orange-dim:#5F411B; --blue-deep:#275386; --blue-mid:#366191; --blue-dim:#1B3B5F; --ink-1:rgba(255,255,255,1); --ink-2:rgba(255,255,255,.8); --ink-3:rgba(255,255,255,.6); --ink-4:rgba(255,255,255,.38); --on-frost:#1B1D1F; --on-frost-2:rgba(27,29,31,.55); --glass:rgba(255,255,255,.05); --glass-line:rgba(255,255,255,.10); --r-panel:36px; --r-card:28px; --r-tile:16px; --r-pill:999px; --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:44px; --ease:cubic-bezier(.23,1,.32,1); --ease-move:cubic-bezier(.77,0,.175,1); --fast:150ms; --base:260ms; --rail:78px; } *,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0} html,body{height:100%} /* LE FOND, ET RIEN D'AUTRE. Une seule couche : la trame de points sur le noir. Il n'y a plus de scene WebGL animee ni de bloom derriere le contenu ; ce que le verre refracte, c'est la trame et ce qui passe dessous. Toute envie de « faire vivre » le fond se traite dans un composant, jamais sur la page. */ /* Le noir dur vit sur . Le reste TRANSPARENT, et ce n'est pas un detail de style : `body::before` porte la trame en `z-index:-1`, et une couche negative se peint AVANT le fond du body. Poser une couleur opaque sur le body recouvre donc la trame et rend toutes les pages noires. */ /* Pas de rebond élastique : sur une page plus courte que l'écran, iOS fait rebondir le document entier et emporte avec lui tout ce qui est en `position:fixed` — le dock, précisément. */ html{background:var(--bg);overscroll-behavior-y:none} body{font-family:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; background:transparent;color:var(--ink-1);-webkit-font-smoothing:antialiased; overscroll-behavior-y:none} /* La trame de points de la reference : le fond n'est jamais un noir plat, il est parseme de points blancs minuscules. Une seule couche fixe, en degrade repete : rien a charger, aucun cout au scroll. Elle est UNIFORME d'un bord a l'autre et de haut en bas : un masque qui l'estompait laissait le haut des pages en noir plat, et la trame n'est pas un effet, c'est le fond. */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.5px); background-size:24px 24px} /* ================================================= SQUELETTE DE CHARGEMENT = La coquille se peint en JavaScript : entre l'affichage de la page et le premier rendu, #app est vide et tout apparaît d'un coup. Le squelette pose la FORME de l'écran tout de suite, dans la matière de l'application — même verre, mêmes rayons, mêmes marges. Il n'y a rien à retirer : le premier rendu remplace le contenu de #app. Il ne pulse pas au hasard : une respiration lente, qui dit « ça arrive » sans attirer l'oeil sur du vide. */ .skel{display:flex;gap:var(--s5);min-height:100vh;padding:var(--s3) var(--s5) var(--s5)} .skel-bloc{display:block;border-radius:var(--r-card); background:linear-gradient(163deg,rgba(255,255,255,.07),rgba(255,255,255,.035) 60%,rgba(255,255,255,.05)); border:1px solid var(--glass-line);animation:skelSouffle 1.6s ease-in-out infinite} @keyframes skelSouffle{0%,100%{opacity:.5}50%{opacity:.9}} .skel-rail{width:var(--rail);flex-shrink:0;border-radius:var(--r-panel); background:rgba(255,255,255,.045);border:1px solid var(--glass-line)} .skel-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s5)} .skel-top{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s5)} .skel-titre{width:min(320px,60%);height:38px;border-radius:var(--r-tile)} .skel-sous{width:min(220px,40%);height:15px;border-radius:var(--r-pill)} .skel-cartes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)} .skel-carte{height:210px} .skel-dock{display:none} @media (prefers-reduced-motion:reduce){.skel-bloc{animation:none;opacity:.7}} @media (max-width:1023px){ /* même composition que la coquille mobile : pas de rail, un dock flottant */ .skel{flex-direction:column;padding:calc(var(--safe-top) + var(--s5)) var(--s3) 0} .skel-rail{display:none} .skel-top{padding-top:0} .skel-titre{height:30px} .skel-cartes{grid-template-columns:1fr} .skel-carte{height:150px} .skel-carte:nth-child(n+4){display:none} .skel-dock{display:block;position:fixed;left:50%;transform:translateX(-50%); bottom:calc(var(--safe-bottom) + var(--s4));width:min(330px,86vw);height:58px; border-radius:var(--r-pill);background:rgba(255,255,255,.05); border:1px solid var(--glass-line);animation:skelSouffle 1.6s ease-in-out infinite} } h1{font-size:38px;font-weight:500;letter-spacing:-.03em;line-height:1.04} h2{font-size:24px;font-weight:500;letter-spacing:-.02em} h3{font-size:18px;font-weight:500;letter-spacing:-.012em} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input{font:inherit;color:inherit} ul{list-style:none} .tabnum{font-variant-numeric:tabular-nums} .eyebrow{font-size:13px;color:var(--ink-3)} .muted{color:var(--ink-3)} /* --- verre : 5% mesure, plus reflet oblique et arete claire (pas de grain) --- */ .glass{position:relative;border-radius:var(--r-card);isolation:isolate; background:linear-gradient(163deg,rgba(255,255,255,.085),rgba(255,255,255,.045) 38%,rgba(255,255,255,.032) 66%,rgba(255,255,255,.052)); border:1px solid var(--glass-line); backdrop-filter:blur(18px) saturate(1.9) brightness(1.08) contrast(1.02); -webkit-backdrop-filter:blur(18px) saturate(1.9) brightness(1.08) contrast(1.02); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.22),inset 0 -1px 0 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.03),0 18px 40px -28px rgba(0,0,0,.9)} /* ARETE REFRACTIVE : un anneau qui echantillonne le fond avec un flou et une luminosite DIFFERENTS du corps. Resultat : le contenu qui passe sous la carte est « tire » et eclairci au bord, comme la lumiere qui se plie sur un verre. C'est l'indice de refraction n°1, celui de la reference. */ .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1; padding:2px; backdrop-filter:blur(4px) brightness(1.3) saturate(1.5); -webkit-backdrop-filter:blur(4px) brightness(1.3) saturate(1.5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude} /* reflet oblique, par-dessus l'arete */ .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; background:linear-gradient(118deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 22%,transparent 46%)} .pill{display:inline-flex;align-items:center;gap:var(--s2);border-radius:var(--r-pill); padding:9px 16px;font-size:13px;font-weight:500;white-space:nowrap; background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-2); transition:background var(--fast),color var(--fast)} .pill:hover{background:rgba(255,255,255,.10);color:var(--ink-1)} .pill-tag{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:5px 12px; font-size:12px;font-weight:500;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-2)} .pill-tag.green{background:var(--green-soft,rgba(104,231,142,.16));border-color:rgba(104,231,142,.34);color:var(--green)} .pill-tag.orange{background:var(--orange-soft);border-color:var(--orange-line);color:var(--orange)} .pill-tag.blue{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue)} .pill-tag.red{background:var(--red-soft);border-color:var(--red-line);color:var(--red)} /* le bouton principal parle la meme langue que la page : du verre teinte vert, pas un aplat plein qui jure avec le reste. Idem pour le menu qu'il ouvre. */ .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); border-radius:var(--r-pill);padding:13px 22px;font-size:15px;font-weight:600;color:#DFFFEA; background:linear-gradient(160deg,rgba(104,231,142,.30),rgba(39,136,74,.20)); border:1px solid rgba(160,255,196,.38); backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 14px 34px -20px rgba(64,220,120,.6); transition:background var(--fast),border-color var(--fast),transform var(--fast)} .btn-primary:hover{background:linear-gradient(160deg,rgba(104,231,142,.42),rgba(39,136,74,.28)); border-color:rgba(180,255,210,.55)} .btn-primary:active{transform:scale(.97)} .icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-3); transition:color var(--fast),background var(--fast)} .icon-btn:hover{color:var(--ink-1);background:rgba(255,255,255,.10)} .icon-btn.on{background:var(--green);border-color:var(--green);color:#06230F} svg{display:block} /* ============================================================= LAYOUT PC === */ .dk{display:flex;gap:var(--s5);min-height:100vh;padding:var(--s3) var(--s5) var(--s5)} .dk-rail{position:sticky;top:var(--s3);align-self:flex-start;width:var(--rail); height:calc(100vh - var(--s3) - var(--s5));flex-shrink:0;border-radius:var(--r-card); display:flex;flex-direction:column;align-items:center;padding:var(--s5) 0;gap:var(--s6)} .dk-logo{display:grid;place-items:center;border-radius:10px; box-shadow:0 8px 20px -10px rgba(64,220,120,.6)} .dk-nav{display:flex;flex-direction:column;gap:var(--s2)} .dk-help{margin-top:auto} .dk-main{flex:1;min-width:0} .dk-top{position:relative;display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)} /* La recherche a quitte la barre du haut : elle s'ouvrait sur 42vw depuis la gauche et passait sous la bulle verte des rendez-vous, centree et large de 60vw. Deux elements qui se disputent la meme bande d'ecran, l'un finit toujours par manger l'autre. Il ne reste ici qu'une loupe ; la recherche elle-meme est une palette centrale (voir `.spot`). */ .dk-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)} .dk-user{display:flex;align-items:center;gap:var(--s3);border-radius:var(--r-pill);padding:6px 18px 6px 6px} .dk-face{width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:var(--green);color:#06230F;font-size:13px;font-weight:600} .dk-user-txt{display:flex;flex-direction:column;line-height:1.2;text-align:left} .dk-user-txt b{font-size:13.5px;font-weight:500} .dk-user-txt i{font-size:11.5px;font-style:normal;color:var(--ink-3)} .dk-title{margin-bottom:var(--s6)} .dk-title .eyebrow{margin-top:8px;display:block} .dk-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4);align-items:start} .dk-grid>.span7,.dk-grid>.span5{align-self:stretch} .dk-col{display:flex;flex-direction:column;gap:var(--s4)} .gcard{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4)} .gcard-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)} /* --- LA PALETTE DE RECHERCHE --- Au centre de l'ecran, par-dessus tout, sur un fond assombri : elle ne partage plus sa bande avec la bulle des rendez-vous. Elle est posee au TIERS superieur et non au milieu exact — une boite de saisie centree a la verticale semble tomber vers le bas des que les resultats la font grandir. */ .spot-wrap{position:fixed;inset:0;z-index:90;display:flex;justify-content:center; align-items:flex-start;padding:14vh var(--s5) var(--s5); background:rgba(6,8,7,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); animation:mfade .16s var(--ease)} .spot{width:min(660px,100%);border-radius:var(--r-panel);overflow:hidden; background:rgba(18,18,18,.92);border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 40px 90px -30px rgba(0,0,0,.9); animation:spotIn .26s var(--ease)} @keyframes spotIn{from{opacity:0;transform:translateY(-12px) scale(.97)} to{opacity:1;transform:none}} .spot-field{display:flex;align-items:center;gap:var(--s4);padding:20px var(--s6);cursor:text} .spot-ico{display:grid;place-items:center;flex-shrink:0;color:var(--green)} /* On tue l'anneau bleu du navigateur : la palette entiere EST le focus. */ .spot-field input{flex:1;min-width:0;border:0;background:none;outline:none; font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--ink-1)} .spot-field input::placeholder{color:var(--ink-4)} .spot-field kbd{font-family:inherit;font-size:11px;color:var(--ink-3);flex-shrink:0; background:rgba(255,255,255,.08);border-radius:7px;padding:4px 8px} .spot-results{max-height:min(46vh,420px);overflow-y:auto} .spot-results.open{border-top:1px solid var(--glass-line);padding:var(--s2) 0} .spot-hint{padding:11px var(--s6);font-size:11.5px;color:var(--ink-4); border-top:1px solid var(--glass-line)} @media (max-width:1023px){.spot-wrap{padding:9vh var(--s4) var(--s4)} .spot-field{padding:16px var(--s5)}.spot-field input{font-size:17px}} /* --- popovers calendrier / notifications --- */ .pop-anchor{position:relative} .pop{position:absolute;top:calc(100% + 12px);right:0;z-index:60;width:330px;max-height:440px;overflow-y:auto; border-radius:var(--r-tile);padding:var(--s2); background:rgba(18,18,18,.92);border:1px solid var(--glass-line); backdrop-filter:blur(30px) saturate(1.5);box-shadow:0 24px 60px -20px rgba(0,0,0,.85); animation:popIn .2s var(--ease)} .pop-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px} .pop-head h4{font-size:14px;font-weight:600} .pop-head .n{font-size:11px;color:var(--ink-3)} .pop-item{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;padding:9px 12px;border-radius:12px;transition:background .15s} .pop-item:hover{background:rgba(255,255,255,.06)} .pop-item .pdot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .pop-item .pl{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pop-item .pr{font-size:12px;color:var(--ink-3);white-space:nowrap} .pop-item .pr.late{color:var(--red)} .pop-empty{padding:26px 12px;text-align:center;font-size:13px;color:var(--ink-3)} /* pastille rouge sur la cloche quand il y a du retard */ .icon-btn.badge{position:relative} .icon-btn.badge::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px; border-radius:50%;background:var(--red);border:2px solid var(--bg)} @keyframes popIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}} .result{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left; padding:12px var(--s6);cursor:pointer;transition:background var(--fast)} .result:hover,.result.active{background:rgba(255,255,255,.07)} /* le resultat vise au clavier porte un filet vert : dans une palette, on doit voir OU l'on est sans deplacer la souris */ .result.active{box-shadow:inset 3px 0 0 var(--green)} .result .rdot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .result .rlabel{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .result .rkind{font-size:11px;color:var(--ink-3);flex-shrink:0} .result mark{background:rgba(104,231,142,.28);color:var(--green);border-radius:3px;padding:0 1px} .results-empty{padding:26px var(--s6);font-size:14px;color:var(--ink-3);text-align:center} /* --- panneau vert --- */ /* Le panneau ne connait pas sa couleur, il connait trois variables. Poser `--panel-*` ailleurs suffit donc a le teindre, sans redecrire ses degrades. */ .green-panel{position:relative;overflow:hidden;border-radius:var(--r-panel);padding:var(--s7); --panel-deep:var(--green-deep); --panel-mid:var(--green-mid); --panel-dim:var(--green-dim); background:radial-gradient(120% 90% at 62% 34%,var(--panel-mid) 0%,transparent 58%), radial-gradient(140% 120% at 8% 96%,var(--panel-dim) 0%,transparent 62%),var(--panel-deep)} .gp-sub{font-size:16px;color:var(--ink-3);margin-top:4px} /* Le panneau vert descend jusqu'au bas de sa rangee ; l'espace va au milieu, l'encart retard reste ancre en bas. */ .dk-grid>.green-panel.span8{align-self:stretch;display:flex;flex-direction:column} .dk-grid>.span4.dk-col{align-self:stretch} .dk-grid>.dk-col>.glass:last-child{flex:1;justify-content:center} /* La regle verticale, faible, le long du bord gauche. */ .gp-ruler{position:absolute;left:16px;top:46%;bottom:26px;display:flex;flex-direction:column; gap:8px;pointer-events:none} .green-panel .gp-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.28),0 18px 40px -30px rgba(0,0,0,.5)} .gp-card-head .badge{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16); display:grid;place-items:center;flex-shrink:0;color:var(--ink-1)} .gp-late .trow-check{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);flex-shrink:0} .gp-late .gl{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* --- regle graduee (afficheur) --- */ .meter{margin:var(--s6) 0 var(--s4)} .meter-track{position:relative;height:44px;display:flex;align-items:center; justify-content:space-between} .meter-track i{display:block;width:2px;border-radius:1px;background:#fff; transform-origin:center} .meter-labels{display:flex;align-items:baseline;justify-content:space-between; font-size:14px;color:var(--ink-3)} .meter-readout{font-size:15px;font-weight:600;color:var(--ink-1)} .docrow .badge{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14); display:grid;place-items:center;flex-shrink:0} /* --- carte de synthese (verre depoli, cliquable) --- */ /* Carte de synthese : surface CLAIRE opaque avec une floraison verte qui monte du coin bas-droit, exactement comme la reference. Pas de flou : ce n'est pas du verre sombre, c'est une plaque claire eclairee de vert. */ .frost{position:relative;overflow:hidden;border-radius:var(--r-card);padding:var(--s6);color:var(--on-frost); background:radial-gradient(95% 130% at 102% 74%,rgba(120,231,152,.92) 0%,rgba(120,231,152,.22) 42%,rgba(120,231,152,0) 62%), linear-gradient(115deg,#EEF0F1 0%,#E7EBE9 58%,#DCEBE2 100%); border:1px solid rgba(255,255,255,.5);cursor:pointer; display:flex;flex-direction:column;gap:var(--s2); transition:transform var(--base),box-shadow var(--fast)} /* --- anneau + barres --- */ .ring-wrap{position:relative;display:grid;place-items:center} .ring{width:100%;max-width:200px;height:auto} .ring-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ring-num{font-size:40px;font-weight:300;letter-spacing:-.035em;line-height:1} .ring-num i{font-size:19px;font-style:normal;color:var(--ink-3)} .ring-cap{font-size:14px;color:var(--ink-3);margin-top:4px} .ring-legend{display:flex;justify-content:center;gap:var(--s6);font-size:14px;color:var(--ink-3);margin-top:var(--s3)} .ring-legend b{color:var(--ink-1);font-weight:500} .bars{display:flex;align-items:flex-end;gap:var(--s2);flex:1;min-height:210px} .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%} .bar-col{flex:1;width:100%;display:flex;align-items:flex-end} .bar-col i{display:block;width:100%;border-radius:var(--r-tile) var(--r-tile) 4px 4px;background:rgba(255,255,255,.10)} .bar-col i.on{background:var(--green)} .bar-lb{font-size:12px;color:var(--ink-3)}.bar-vl{font-size:13px;color:var(--ink-2)} .chart{width:100%;height:auto;overflow:visible} .ax{font-size:13px;fill:var(--ink-3);font-family:inherit} .flist button:hover,.flist button.on{color:var(--ink-1)} .trows li.done{opacity:.45}.trows li.done .trow-label{text-decoration:line-through} .trow-check{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28); display:grid;place-items:center;color:#06230F;flex-shrink:0} .trow-check.on{background:var(--green);border-color:var(--green)} .trow-due.late{color:var(--red)} /* ================================================= GRILLE DE PROJETS ====== */ /* les quatre etats, en intertitres discrets */ .pgrp{margin-bottom:var(--s7)} .pgrp-h{display:flex;align-items:center;gap:9px;margin-bottom:var(--s4); font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .pgrp-h .tone-dot{background:var(--green)} .pgrp-h .tone-dot.late{background:var(--red)} .pgrp-h .tone-dot.open{background:var(--green)} .pgrp-h .tone-dot.paused{background:var(--orange)} .pgrp-h .tone-dot.done{background:var(--blue)} .pgrp-h span{margin-left:auto;font-size:12px;color:var(--ink-4)} .pdeck{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(400px,1fr))} .pdcard{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);cursor:pointer; transition:transform var(--base),border-color var(--fast)} .pdcard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.24)} .pdcard.late{border-color:var(--red-line)}.pdcard.done{border-color:var(--blue-line)} .pdcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)} .pdcard-id{min-width:0;display:flex;flex-direction:column;gap:var(--s2)} .pdcard-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .tone-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--green)} .tone-dot.late{background:var(--red)}.tone-dot.done{background:var(--blue)} .pdcard-name{font-size:28px;font-weight:400;letter-spacing:-.028em;line-height:1.05;overflow-wrap:anywhere} .pbar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden} .pbar>i{display:block;height:100%;border-radius:2px;background:var(--green)} .pbar.late>i{background:var(--red)}.pbar.done>i{background:var(--blue)} .pbar.paused>i{background:var(--orange)} .tone-dot.paused{background:var(--orange)} .pdcard.paused{border-color:var(--orange-line)} .pdcard-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3)} /* --- la bulle de date --- */ .bubble{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;border-radius:var(--r-card);padding:var(--s3) var(--s4);min-width:92px; background:rgba(255,255,255,.08);border:1px solid var(--glass-line)} .bubble b{font-size:38px;font-weight:300;letter-spacing:-.045em;line-height:1} .bubble u{font-size:13px;text-decoration:none;color:var(--ink-2);text-transform:lowercase;margin-top:2px} .bubble i{font-size:11px;font-style:normal;color:var(--ink-3);margin-top:5px} .bubble.late{background:var(--red-soft);border-color:var(--red-line)} .bubble.late b,.bubble.late u,.bubble.late i{color:var(--red)} .bubble.done{background:var(--blue-soft);border-color:var(--blue-line)} .bubble.done b,.bubble.done u,.bubble.done i{color:var(--blue)} .bubble.paused{background:var(--orange-soft);border-color:var(--orange-line)} .bubble.paused b,.bubble.paused u,.bubble.paused i{color:var(--orange)} .bubble.xl{min-width:132px;padding:var(--s4) var(--s5);border-radius:var(--r-panel)} .bubble.xl b{font-size:62px}.bubble.xl u{font-size:16px}.bubble.xl i{font-size:13px} /* ====================================== CARROUSEL 3D DE DOSSIERS ========== */ /* La signature du kit : des dossiers en verre en eventail 3D, le dossier au focus en vert. Les transforms sont pilotees en JS (drag 1:1 + ressort), jamais par transition CSS : le geste doit pouvoir interrompre le mouvement. */ .f3{position:relative;height:560px;margin:calc(var(--s2)*-1) 0 var(--s6); touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none} .f3.dragging{cursor:grabbing} /* LE FONDU LATERAL DE LA RANGEE. Tout le fondu se fait par un MASQUE sur la rangee, jamais par un aplat noir pose par-dessus : un voile opaque effacerait aussi la trame de points sur deux bandes verticales, et le fond doit rester continu d'un bord a l'autre. Ce sont les dossiers qui s'effacent, pas la page qui s'assombrit. La rampe est LARGE (28 % de chaque cote) et progressive : neuf paliers qui suivent une courbe douce plutot que deux points. Une rampe courte et lineaire donnait une arete visible, on voyait la ligne ou le dossier commencait a disparaitre au lieu de le voir se dissoudre. */ .f3-stage{position:absolute;inset:0;z-index:1; --f3-fade:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 4%, rgba(0,0,0,.16) 9%, rgba(0,0,0,.34) 14%, rgba(0,0,0,.56) 19%, rgba(0,0,0,.78) 23%, rgba(0,0,0,.93) 26%, #000 30%, #000 70%, rgba(0,0,0,.93) 74%, rgba(0,0,0,.78) 77%, rgba(0,0,0,.56) 81%, rgba(0,0,0,.34) 86%, rgba(0,0,0,.16) 91%, rgba(0,0,0,.05) 96%, rgba(0,0,0,0) 100%); mask-image:var(--f3-fade); -webkit-mask-image:var(--f3-fade); /* `mask-repeat` vaut `repeat` par defaut : sans cela, un dossier qui deborde de la scene retombe sur une tuile pleine du degrade et REAPPARAIT sur le cote. C'est l'aplat noir qui masquait ce defaut jusqu'ici. */ mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-size:100% 100%; -webkit-mask-size:100% 100%} /* Aucun bloom sous la rangee : le fond de la page est la trame de points, un point c'est tout. Le dossier selectionne se signale par SA matiere (bord vert, reflet allume), pas par une lueur posee derriere lui. */ .f3-item{position:absolute;left:50%;top:170px;width:264px;height:212px;margin-left:-132px; transform-style:preserve-3d} /* `will-change` NE VIT QUE PENDANT LE MOUVEMENT (§12). Posé en permanence sur les dossiers, il gardait douze calques composités en mémoire GPU en permanence — et sur un téléphone, cette mémoire est précisément ce qui manque quand l'animation doit tenir 120 images par seconde. */ .f3.dragging .f3-item,.f3.anime .f3-item{will-change:transform} /* LE FLOU D'ARRIÈRE-PLAN NE SURVIT PAS AU GESTE. Chaque dossier porte DEUX surfaces à `backdrop-filter` (le corps et la poche) : douze dossiers, vingt-quatre surfaces que le compositeur doit refaire à chaque image, pendant que les douze transformations changent sous elles. C'est, et de loin, ce qui coûtait le plus cher dans le swipe — et c'est ce dont on a le moins besoin : personne ne lit un flou de six pixels sur une rangée qui défile. Il revient dès que la rangée s'arrête, et c'est là qu'on le regarde. `!important` est nécessaire : `initLiquid()` pose ses filtres en style inline, et une règle ordinaire ne passerait pas devant. */ .f3.dragging .f3-body,.f3.dragging .f3-pocket, .f3.anime .f3-body,.f3.anime .f3-pocket{ backdrop-filter:none !important;-webkit-backdrop-filter:none !important} .f3-folder{position:absolute;inset:0;transform-style:preserve-3d} /* Le VOLUME du pli : dossier ouvert en V. Le dos et la poche partagent la meme charniere (le bas du dossier) ; le dos bascule vers l'arriere, la poche vers l'avant. L'interieur du dossier se voit dans l'ouverture. */ .f3-body{position:absolute;inset:0;border-radius:20px; transform-origin:50% 100%;transform:rotateX(6deg); background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 45%,rgba(255,255,255,.04)); /* le verre CSS de repli imite la chaine liquid (flou leger, saturation basse) : l'echange CSS <-> liquid en bord de zone devient invisible */ backdrop-filter:blur(6px) saturate(1.05) brightness(1.08); -webkit-backdrop-filter:blur(6px) saturate(1.05) brightness(1.08); box-shadow:inset 0 0 26px rgba(255,255,255,.05)} /* UNE SEULE arete lumineuse, 1px, la meme finition que le trait du pli. Pas de bande refractive epaisse ni de border : tout ce qui s'empile au bord se dedouble en liseret des que le dossier tourne. */ .f3-body::before{content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:1;padding:1px; background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(255,255,255,.10) 40%,rgba(255,255,255,.38)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude} /* l'interieur, entre le dos et la poche : la penombre du creux du V */ .f3-inside{position:absolute;left:5px;right:5px;top:7px;bottom:3px;border-radius:17px; transform-origin:50% 100%;transform:rotateX(3deg) translateZ(1px); background:linear-gradient(180deg,transparent,rgba(4,8,6,.28) 16%,rgba(255,255,255,.04) 62%)} .f3-item.on .f3-inside{background:linear-gradient(180deg,transparent,rgba(6,48,23,.55) 16%,rgba(120,230,160,.10) 62%)} /* les feuilles a lignes dans le creux du V, comme la reference */ .f3-docs{position:absolute;left:9%;right:9%;top:6px;bottom:38%; transform-origin:50% 100%;transform:rotateX(-4deg) translateZ(3px);pointer-events:none} .f3-item.on .f3-docs i{background:linear-gradient(180deg,rgba(210,248,224,.60),rgba(140,225,170,.30) 85%); border-color:rgba(220,255,235,.45)} .f3-item.on .f3-docs i::after{background:repeating-linear-gradient(180deg,rgba(16,86,42,.35) 0 3px,transparent 3px 9px)} .f3-body::after{content:"";position:absolute;inset:0;border-radius:inherit; background:radial-gradient(130% 80% at 18% 0%,rgba(255,255,255,.20),rgba(255,255,255,0) 55%), linear-gradient(160deg,rgba(126,240,162,.62),rgba(47,168,92,.58) 55%,rgba(31,122,68,.62)); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); opacity:0;transition:opacity 240ms var(--ease)} /* la face avant : la vraie forme en S d'un dossier (plateau haut a gauche, S-courbe, plateau bas a droite), et une matiere VERRE : transparente, floue, avec des blooms de lumiere, pas un blanc plat */ .f3-pocket{position:absolute;left:0;right:0;bottom:0;height:138px;z-index:2; transform-origin:50% 100%;transform:rotateX(-10deg) translateZ(6px); clip-path:path("M0 118 L0 22 Q0 8 14 8 L92 8 C114 8 122 40 148 40 L250 40 Q264 40 264 54 L264 118 Q264 138 244 138 L20 138 Q0 138 0 118 Z"); background:linear-gradient(172deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 55%,rgba(255,255,255,.06)); backdrop-filter:blur(9px) saturate(1.1) brightness(1.1) contrast(1.02); -webkit-backdrop-filter:blur(9px) saturate(1.1) brightness(1.1) contrast(1.02); display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end; padding:14px 16px 13px} /* la vie du verre : penombre sous le pli, bloom bas-gauche, levre lumineuse */ .f3-pocket::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg,rgba(8,12,10,.16),transparent 34%), radial-gradient(64% 50% at 24% 96%,rgba(255,255,255,.38),transparent 72%), linear-gradient(0deg,rgba(255,255,255,.26),transparent 14%)} .f3-pocket::after{content:"";position:absolute;inset:0;z-index:0; background:radial-gradient(120% 90% at 22% 0%,rgba(255,255,255,.18),rgba(255,255,255,0) 55%), linear-gradient(165deg,rgba(64,198,110,.60),rgba(20,102,52,.62)); opacity:0;transition:opacity 240ms var(--ease)} /* la ligne de lumiere du pli, etiree avec la poche */ .f3-pocket .f3-fold{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none} /* le reflet oblique du module glass, decoupe par la silhouette en S */ .f3-pocket .f3-sheen{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.20),rgba(255,255,255,.05) 26%,transparent 50%)} .f3-pocket>*{position:relative;z-index:1} .f3-badge{display:inline-flex;gap:6px;align-items:center;margin-bottom:8px; font-size:13.5px;font-weight:600;color:rgba(16,20,22,.85); transition:color 240ms} .f3-name{font-size:16.5px;font-weight:600;letter-spacing:-.012em;line-height:1.14; color:rgba(14,18,20,.92); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; transition:color 240ms} .f3-item.on .f3-body::after{opacity:1} .f3-item.on .f3-pocket::after{opacity:1} .f3-item.on .f3-body{border-color:rgba(160,255,195,.6)} .f3-item.on .f3-name,.f3-item.on .f3-badge{color:#fff} /* le dossier en retard non selectionne : verre liquide TEINTE ROUGE, exactement la meme recette que le vert du focus */ .f3-item.late .f3-body::after{opacity:1; background:radial-gradient(130% 80% at 18% 0%,rgba(255,255,255,.15),rgba(255,255,255,0) 55%), linear-gradient(160deg,rgba(238,108,108,.38),rgba(186,54,54,.36) 55%,rgba(132,32,32,.38))} .f3-item.late .f3-pocket::after{opacity:1; background:radial-gradient(120% 90% at 22% 0%,rgba(255,255,255,.13),rgba(255,255,255,0) 55%), linear-gradient(165deg,rgba(222,88,88,.38),rgba(126,28,28,.42))} .f3-item.late .f3-inside{ background:linear-gradient(180deg,transparent,rgba(70,10,10,.45) 16%,rgba(255,160,160,.08) 62%)} .f3-item.late .f3-docs i{ background:linear-gradient(180deg,rgba(255,220,220,.55),rgba(238,158,158,.28) 85%); border-color:rgba(255,205,205,.42)} .f3-item.late .f3-docs i::after{ background:repeating-linear-gradient(180deg,rgba(120,26,26,.32) 0 3px,transparent 3px 9px)} .f3-item.late .f3-fold path{stroke:rgba(255,178,178,.62)} .f3-item.late .f3-name,.f3-item.late .f3-badge{color:#fff} /* la carte info : liquid glass NEUTRE (fume transparent), ni blanc ni vert. La couleur d'etat, c'est la pastille qui la porte. */ .f3-info{position:absolute;z-index:5;left:calc(50% - 350px);top:26px;width:238px; border-radius:24px;padding:18px 18px 16px;color:#fff; background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 55%,rgba(255,255,255,.09)); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6); box-shadow:0 24px 60px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.30); transition:opacity var(--fast) ease,transform var(--fast) var(--ease)} .f3-info.swap{opacity:0;transform:translateY(7px)} .f3-info-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .f3-info-top>div{min-width:0} .f3-info b{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.12;display:block} .f3-info-dates{font-size:12.5px;color:rgba(255,255,255,.68);margin-top:3px} .f3-info-dates.late{color:#FFA0A0;font-weight:600} .f3-info-go{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; background:rgba(255,255,255,.18);color:#fff;transition:background-color var(--fast)} .f3-info-go:hover{background:rgba(255,255,255,.28)} .f3-info-bottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px} .f3-info-val{font-size:46px;font-weight:300;letter-spacing:-.05em;line-height:1} .f3-info-val i{font-style:normal;font-size:20px;color:rgba(255,255,255,.6)} /* le bloc argent de la carte du carrousel */ .f3-info-money{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:12px; padding-top:11px;border-top:1px solid rgba(255,255,255,.14)} .f3-info-money b{font-size:15px;font-weight:600} .f3-info-money i{font-style:normal;font-size:12px;color:rgba(255,255,255,.55)} .f3-money-bar{flex-basis:100%;height:4px;border-radius:2px;margin-top:7px; background:rgba(255,255,255,.14);overflow:hidden} .f3-money-bar u{display:block;height:100%;border-radius:2px;text-decoration:none; background:var(--green);transition:width .45s var(--ease)} .f3-money-bar u.blue{background:var(--blue)}.f3-money-bar u.orange{background:var(--orange)} .f3-money-bar u.red{background:var(--red)} .f3-money-bar u.ink{background:rgba(255,255,255,.3)} .f3-info-dot{width:15px;height:15px;border-radius:50%;margin-bottom:5px; background:var(--green);box-shadow:0 0 14px -2px var(--green)} .f3-info-dot.late{background:var(--red);box-shadow:0 0 14px -2px var(--red)} .f3-info-dot.done{background:var(--blue);box-shadow:0 0 14px -2px var(--blue)} .f3-info-dot.paused{background:var(--orange);box-shadow:0 0 14px -2px var(--orange)} /* l'arc de navigation : la carte du carrousel, le point vert = la position */ /* L'ARC DE NAVIGATION : un trait fin qui se peint en vert au fur et a mesure, et la bulle de commande qui GLISSE dessus (elle marque la position). */ .f3-arc{position:absolute;z-index:4;left:50%;top:-16px;transform:translateX(-50%); width:min(760px,74%);height:116px;pointer-events:none} .f3-arc>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .f3-arc-run{filter:drop-shadow(0 0 6px rgba(104,231,142,.75)); transition:stroke-dashoffset .5s var(--ease)} .f3-arc-ctl{position:absolute;left:0;top:0;transform:translate(-50%,-50%); pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:2px; width:82px;height:82px;border-radius:50%; background:radial-gradient(60% 60% at 50% 35%,rgba(255,255,255,.10),rgba(255,255,255,.03)); border:1px solid rgba(150,240,180,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 26px -10px rgba(104,231,142,.7); backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3)} .f3-arc-ctl button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center; color:rgba(190,255,214,.85);transition:color var(--fast),background-color var(--fast)} .f3-arc-ctl button:hover{color:#fff;background:rgba(255,255,255,.10)} .f3-arc-ctl button:active{transform:scale(.9)} @media (prefers-reduced-transparency: reduce){ .f3-body,.f3-pocket,.f3-arc-ctl{backdrop-filter:none;-webkit-backdrop-filter:none} .f3-body{background:rgba(30,32,34,.94)} .f3-pocket{background:rgba(214,220,217,.96)} } /* --- le logo du projet. Il se pose et se retire dans le panneau d'edition, ouvert par le bouton en haut a droite de la fiche : ici, il s'affiche. --- */ .ppage-title{display:flex;align-items:center;gap:var(--s4)} .plogo{position:relative;width:74px;height:74px;border-radius:22px;flex-shrink:0; overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.8); background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26)} .plogo img{width:100%;height:100%;object-fit:cover;display:block} /* --- fiches de personnes --- */ .face{width:46px;height:46px;border-radius:50%;flex-shrink:0;overflow:hidden; display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--ink-1); background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)} .face img{width:100%;height:100%;object-fit:cover;display:block} .face.xl{width:84px;height:84px;font-size:26px;border-radius:26px} .pcard{cursor:pointer;display:flex;flex-direction:column;gap:var(--s4)} .pcard-top{display:flex;align-items:center;gap:var(--s3)} .pcard-id{flex:1;min-width:0} .pcard-id p{font-size:13px;margin-top:2px} .pcard-projects{display:flex;flex-wrap:wrap;gap:var(--s2)} .pcard-projects .pill-tag{display:inline-flex;align-items:center} .pcard-projects .pico{width:20px;height:20px;border-radius:7px;margin-right:7px;font-size:9px;vertical-align:-5px} .cpage-hero{padding:var(--s7)} .cpage-top{display:flex;align-items:center;gap:var(--s5)} /* --- logo de projet (ou photo de personne) --- */ .pico{width:26px;height:26px;border-radius:9px;flex-shrink:0;overflow:hidden; display:inline-grid;place-items:center;vertical-align:-7px;margin-right:9px; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16); font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:.02em} .pico img{width:100%;height:100%;object-fit:cover;display:block} .pico.pd-ico{width:34px;height:34px;border-radius:11px;font-size:13px;vertical-align:-9px} .f3-ico{position:absolute;left:16px;top:14px;width:30px;height:30px;margin:0; border-radius:10px;z-index:2;color:rgba(16,20,22,.75); background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.30)} .f3-item.on .f3-ico,.f3-item.late .f3-ico{background:rgba(0,0,0,.20); border-color:rgba(255,255,255,.30);color:#fff} /* --- champ d'upload d'image --- */ .upload{display:flex;align-items:center;gap:14px;padding:12px 14px;cursor:pointer; border-radius:16px;background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.22);transition:border-color var(--fast),background var(--fast)} .upload:hover{background:rgba(255,255,255,.09);border-color:rgba(160,255,196,.45)} .upload-prev{width:46px;height:46px;border-radius:13px;flex-shrink:0;overflow:hidden; display:grid;place-items:center;color:var(--ink-3); background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)} .upload-prev img{width:100%;height:100%;object-fit:cover} .upload-txt b{display:block;font-size:13.5px;font-weight:500} .upload-txt i{font-style:normal;font-size:11.5px;color:var(--ink-4)} /* =============================== ACCUEIL V2 (chantier) ==================== */ .home{display:flex;flex-direction:column;gap:var(--s8)} /* La bulle des prochaines urgences : CENTREE dans la barre du haut, avec le degrade vert de la reference et son coeur sombre (c'est lui qui permet au texte blanc de rester lisible au milieu). Pas de bouton "rejoindre". */ .urg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;gap:4px;padding:5px;max-width:min(60vw,760px); border-radius:var(--r-pill);color:#fff; background: radial-gradient(92% 150% at 50% 46%,rgba(0,0,0,.52),rgba(0,0,0,.18) 56%,rgba(0,0,0,0) 76%), linear-gradient(90deg,rgba(120,232,164,.95),rgba(46,150,88,.62) 26%,rgba(24,96,54,.5) 50%, rgba(46,150,88,.62) 74%,rgba(120,232,164,.95)), var(--green-deep); border:1px solid rgba(160,255,196,.30); box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 12px 34px -18px rgba(64,220,120,.7)} /* Une pastille = un rendez-vous : le logo du projet, QUAND (jour + heure sur deux lignes, ca tient sur une largeur de trois lettres) puis le nom court. */ .urg-i{display:flex;align-items:center;gap:9px;padding:6px 12px;border-radius:var(--r-pill); font-size:13px;min-width:0;cursor:pointer;transition:background-color var(--fast)} .urg-i:hover{background:rgba(0,0,0,.20)} .urg-i b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .urg-ico{width:24px;height:24px;border-radius:8px;flex-shrink:0;margin:0;font-size:9px; background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.28);color:#fff} .urg-when{display:flex;flex-direction:column;line-height:1.1;flex-shrink:0;text-align:left} .urg-when u{text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.06em; color:#fff} .urg-when i{font-style:normal;font-size:11px;color:rgba(255,255,255,.72);white-space:nowrap} /* un rendez-vous en cours se signale sur son heure, pas sur toute la pastille */ .urg-i.live .urg-when i{color:#CFFFE0;font-weight:600} .urg-i.live .urg-ico{box-shadow:0 0 0 2px rgba(207,255,224,.55)} /* on descend la rangee : la carte d'info du dossier respire au-dessus, et le bas des trois cartes passe sous la ligne de flottaison (il faut scroller) */ .home .f3{height:500px;margin:var(--s4) 0 0} .home .f3-item{top:196px;width:232px;height:188px;margin-left:-116px} .home .f3-pocket{height:120px; clip-path:path("M0 103 L0 20 Q0 7 12 7 L81 7 C101 7 108 35 131 35 L220 35 Q232 35 232 46 L232 103 Q232 120 215 120 L17 120 Q0 120 0 103 Z")} /* la carte de statut : plus grande, posee en haut a GAUCHE de la rangee */ .home .f3-info{top:16px;width:320px;padding:22px 22px 20px;border-radius:26px} .home .f3-info b{font-size:19px} .home .f3-info-val{font-size:58px} .home .f3-info-val i{font-size:24px} .home .f3-info-go{width:38px;height:38px} .home .f3-info-dates{font-size:13px;margin-top:5px} /* LE BANDEAU DU BAS : une seule surface continue (comme la reference), pas trois cartes separees par du noir. La carte verte flotte PAR-DESSUS et deborde vers le haut ; les deux moities sont simplement posees dessous. */ /* la colonne du milieu est VIDE : elle reserve la place de la carte verte qui flotte au-dessus. Les deux moities sont posees a gauche et a droite, sans aucun vide noir entre elles. */ .home-bottom{position:relative} /* Le bandeau n'a pas de bord dur : son arete haute se dissout dans le fond, comme la reference. Pas de liseret qui barre l'ecran. */ .home-slab{position:relative;display:grid;grid-template-columns:1fr min(660px,42%) 1fr; gap:0;border-radius:var(--r-panel);padding:var(--s7) var(--s5) var(--s7);min-height:520px; border:0;box-shadow:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 96px); mask-image:linear-gradient(180deg,transparent 0,#000 96px)} .home-slab::before{content:none} .home-slab>.hcard{background:none;border:0;box-shadow:none;backdrop-filter:none; -webkit-backdrop-filter:none;padding:var(--s5)} .home-slab>.hcard:first-of-type{grid-column:1} .home-slab>.hcard:last-of-type{grid-column:3} .hcard{padding:var(--s5)} .hcard-ring{display:flex;flex-direction:column} .hcard-ring .ring-wrap{flex:1;margin:var(--s4) 0} .hcard-sub{font-size:12.5px;color:var(--ink-3);margin:4px 0 var(--s4)} .hrows{display:flex;flex-direction:column;gap:var(--s2)} .hrow{display:flex;align-items:center;gap:var(--s3);width:100%; text-align:left;padding:12px 14px;border-radius:14px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); transition:background-color var(--fast),opacity var(--base)} .hrow:hover{background:rgba(255,255,255,.10)} /* la coche prend le clic, le reste de la ligne ouvre le panneau */ .hrow-open{display:flex;align-items:center;justify-content:space-between;gap:var(--s3); flex:1;min-width:0;text-align:left;cursor:pointer} .hrow-what{flex:1;min-width:0;font-size:13.5px;color:var(--ink-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hrow-what b{font-size:14px;color:var(--ink-1)} .hpill.late{color:var(--red)} /* LA COCHE DES LISTES D'ACCUEIL. Un clic boucle la tache : elle se barre et descend au bas de sa liste au lieu de s'evanouir sous le doigt. */ .hcheck{width:19px;height:19px;border-radius:50%;flex-shrink:0;cursor:pointer; display:grid;place-items:center;color:#06230F; border:1.5px solid rgba(255,255,255,.30); transition:background-color var(--fast),border-color var(--fast)} .hcheck:hover{border-color:rgba(255,255,255,.62)} .hcheck.on{background:var(--green);border-color:var(--green)} .hcheck:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* une ligne bouclee s'efface sans disparaitre : on voit ce qu'on vient de faire */ .hrow.done,.hfile.done{opacity:.42} .hrow.done .hrow-what,.hfile.done .hfile-mid b{text-decoration:line-through} .hcard-h{display:flex;align-items:center;gap:9px} /* les fleches changent de projet sans quitter la carte : elles pilotent le meme selecteur que le carrousel, les deux restent d'accord */ .hcard-nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-shrink:0} .hcard-nav button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center; color:var(--ink-3);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10); transition:color var(--fast),background-color var(--fast)} .hcard-nav button:hover{color:var(--ink-1);background:rgba(255,255,255,.12)} .hcard-nav button:active{transform:scale(.92)} /* la pastille d'etat du dossier suivi : le code couleur absolu, comme partout */ .hcard-h .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--green)} .hcard-h .dot.late{background:var(--red)} .hcard-h .dot.paused{background:var(--orange)} .hcard-h .dot.done{background:var(--blue)} .hcard-empty{font-size:13px;color:var(--ink-3);padding:14px 2px} .hpill{flex-shrink:0;border-radius:var(--r-pill);padding:5px 11px;font-size:12px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)} .hpill.on{background:var(--green);border-color:var(--green);color:#06230F;font-weight:600} /* la grande carte-dossier : la courbe S de la reference, portee au format carte */ .hfold-wrap{position:absolute;z-index:3;left:50%;top:-62px;width:min(660px,42%); transform:translateX(-50%);min-width:0} /* LE DOS DU DOSSIER : le panneau arriere depasse au-dessus de la poche et laisse voir les fiches rangees dedans (exactement la reference) */ .hback{position:absolute;left:5%;right:2%;top:-22px;height:150px;z-index:0; border-radius:22px 22px 0 0;pointer-events:none; background:linear-gradient(180deg,rgba(58,178,100,.42),rgba(30,120,64,.30)); border:1px solid rgba(190,255,215,.22);border-bottom:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.30)} .hfold{position:relative;z-index:1;width:100%;min-height:430px;padding:26% 26px 22px;color:#fff; /* la silhouette vit dans un clipPath en unites de boite : elle epouse la carte quelle que soit sa largeur, contrairement a un path() en pixels */ clip-path:url(#foldclip); background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.18),rgba(255,255,255,0) 55%), linear-gradient(165deg,rgba(64,198,110,.62),rgba(22,106,54,.66)); backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)} .hfold-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* le liseré suit la MEME courbe que la decoupe : un trace par gabarit */ .ln-mb{display:none} /* Le titre se cale SOUS le decrochement du S, pas dessus : colle en haut il touchait presque l'arete du pli et l'ensemble paraissait comprime. Le remplissage du haut suit, sinon il viendrait buter dans la barre du jour. */ .hfold-head{position:absolute;left:26px;top:56px;max-width:196px} .hfold-head h3{font-size:20px} .hfold-head p{font-size:12.5px;color:rgba(255,255,255,.75);margin-top:3px} .hprog{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:6px;margin:4px 0 var(--s4)} .hprog-a{font-size:13px;font-weight:600} .hprog-b{font-size:12px;color:rgba(255,255,255,.7)} .hprog-track{position:relative;flex-basis:100%;height:14px} .hprog-track::after{content:"";position:absolute;left:0;right:0;top:6.5px;height:1px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 3px,transparent 3px 8px)} .hprog-track i{position:absolute;left:0;top:6px;height:2px;z-index:1; background:#fff;border-radius:1px} .hprog-track u{position:absolute;top:1px;z-index:2;margin-left:-5px;width:0;height:0; border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #fff} .hfiles{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)} .hfile{display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:11px 12px;border-radius:14px; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16); transition:background-color var(--fast),opacity var(--base)} .hfile:hover{background:rgba(255,255,255,.16)} /* la coche a pris la place de la pastille d'icone : c'est elle qu'on vient chercher sur cette ligne, et le retard se lit deja sur l'echeance en rouge. Sur le panneau vert, elle se coche en BLANC : un vert sur vert ne se voit pas. */ .hfold .hcheck{border-color:rgba(255,255,255,.55)} .hfold .hcheck:hover{border-color:#fff} .hfold .hcheck.on{background:#fff;border-color:#fff;color:#12572F} .hfold .hcheck:focus-visible{outline:2px solid #fff} .hfile-open{display:flex;align-items:center;gap:12px;flex:1;min-width:0; text-align:left;cursor:pointer} .hfile-mid{flex:1;min-width:0} .hfile-mid b{display:block;font-size:14px;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hfile-mid i{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.7)} .hfile-due{flex-shrink:0;font-size:11.5px;color:rgba(255,255,255,.75)} /* sur le panneau vert, le rouge d'alerte s'eclaircit pour rester lisible : meme regle que la bulle de la fiche projet */ .hfile-due.late{color:#FFC2C2;font-weight:600} .hfile-none{font-size:12.5px;color:rgba(255,255,255,.72);padding:10px 2px} @media (max-width:1180px){ /* le bandeau continu est une idee de grand ecran : sur mobile il se transforme en simples cartes, sinon son fondu et sa teinte creent une bande verte au-dessus du contenu */ .home-slab{grid-template-columns:1fr;gap:var(--s3);padding:0;min-height:0; background:none;backdrop-filter:none;-webkit-backdrop-filter:none; -webkit-mask-image:none;mask-image:none;box-shadow:none} .home-slab::after{content:none} .home-slab>.hcard:first-of-type,.home-slab>.hcard:last-of-type{grid-column:1} .home-slab>.hcard{padding:var(--s5);border-radius:var(--r-card); background:linear-gradient(163deg,rgba(255,255,255,.085),rgba(255,255,255,.045) 38%,rgba(255,255,255,.032) 66%,rgba(255,255,255,.052)); border:1px solid var(--glass-line); backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5)} /* en colonne, la carte verte reprend sa place dans le flux, tout en haut */ /* "relative" et non "static" : le dos du dossier est en absolu dedans, sinon il s'accroche au bloc parent et deborde en bande verte au-dessus */ .hfold-wrap{position:relative;top:auto;left:auto;width:100%;transform:none; margin:var(--s6) 0 var(--s4)} /* sur un ecran etroit, le titre doit tenir dans le plateau HAUT de la decoupe en S, et le contenu commencer sous la marche */ /* ORDRE MOBILE : la carte verte des priorites d'abord, puis les taches du projet selectionne, puis la completion. Le desktop garde son ordre. */ .home-bottom{display:flex;flex-direction:column} .hfold-wrap{order:1} .home-slab{order:2;display:flex;flex-direction:column} #hproj{order:1} .hcard-ring{order:2} /* le titre n'est plus cale dans l'angle (la decoupe le rognait) : il passe dans le flux, juste sous la marche du S, sur toute la largeur */ .hfold{padding:15% 16px 18px} .hfold-head{position:static;max-width:none;margin-bottom:var(--s4)} .hfold-head h3{font-size:19px} .hfold-head p{font-size:12.5px} .hfold{clip-path:url(#foldclip-mb)} .ln-dk{display:none} .ln-mb{display:block} /* le dos du dossier : une bande verte franche, inseree sous la carte, avec une arete de lumiere. Avant, sa teinte trop sombre lisait comme un rectangle noir pose au-dessus du contenu. */ /* le dos doit plonger SOUS la marche du S, sinon il laisse un vide noir a droite entre son bas et le haut de la carte */ .hback{left:5%;right:3%;top:8px;height:96px;border-radius:20px 20px 0 0; background:linear-gradient(180deg,rgba(88,208,134,.58),rgba(46,152,88,.42)); border:1px solid rgba(190,255,216,.30);border-bottom:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.34)} } /* ===================================================== FINANCE =========== La page raconte trois choses, dans cet ordre : ou en est l'encaissement dans le TEMPS, quelle part du potentiel est deja rentree, et ou dort le reste. Les chiffres passent apres le dessin. */ .fin-hero{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--s4);margin-bottom:var(--s4)} .fin-evo,.fin-gauge{padding:var(--s6)} .fin-evo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)} .fin-evo-now{text-align:right;flex-shrink:0} .fin-evo-now i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-4);margin-bottom:2px} .fin-evo-now b{display:block;font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1.05} .fin-delta{font-size:12px;color:var(--ink-4)} .fin-delta.up{color:var(--green)}.fin-delta.down{color:var(--red)} .fin-delta.flat{color:var(--ink-4)} /* le graphe garde son rapport : un SVG etire deforme les traits et les points */ .fin-chart{width:100%;height:auto;margin-top:var(--s5);display:block} .fin-chart .ax{font-size:13px;fill:var(--ink-4);font-family:inherit} .fin-chart .ax.sm{font-size:11px;fill:var(--ink-4);opacity:.75} .fin-chart .ax.now{fill:var(--green)} .fin-gauge{display:flex;flex-direction:column} .fin-gauge .ring-wrap{flex:1;margin:var(--s4) 0 var(--s5)} .fin-gauge .ring{max-width:168px} .fin-figures{display:flex;justify-content:space-between;gap:var(--s4)} .fin-fig{display:flex;flex-direction:column;gap:3px;min-width:0} .fin-fig i{font-style:normal;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)} .fin-fig b{font-size:17px;font-weight:500;letter-spacing:-.02em;white-space:nowrap} .fin-fig b.green{color:var(--green)} /* la repartition : une seule barre, quatre parts, une legende chiffree */ .fin-splitcard{padding:var(--s6);margin-bottom:var(--s5)} .fin-split-bar{display:flex;gap:3px;height:16px;margin:var(--s4) 0 var(--s4)} .fin-split-bar span{border-radius:5px;transition:flex .5s var(--ease)} .fin-split-bar .green{background:var(--green)} .fin-split-bar .blue{background:var(--blue)} .fin-split-bar .orange{background:var(--orange)} .fin-split-bar .red{background:var(--red)} .fin-split-bar .ink{background:rgba(255,255,255,.16)} .fin-split-leg{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3)} .fin-leg{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)} .fin-leg i{width:9px;height:9px;border-radius:3px;flex-shrink:0;align-self:center; background:rgba(255,255,255,.16)} .fin-leg.green i{background:var(--green)}.fin-leg.blue i{background:var(--blue)} .fin-leg.orange i{background:var(--orange)}.fin-leg.red i{background:var(--red)} .fin-leg u{text-decoration:none;flex:1;min-width:0} .fin-leg b{color:var(--ink-1);font-size:14px;font-weight:600} .fin-leg em{font-style:normal;color:var(--ink-4);font-size:11.5px} .fin-bar.sm{height:5px;margin:var(--s3) 0 var(--s2)} .fin-bar>i.blue{background:var(--blue)}.fin-bar>i.orange{background:var(--orange)} .fin-bar>i.ink{background:rgba(255,255,255,.28)} /* LA PILE DE MISSIONS. Un fond vert profond, des cartes de verre qui se recouvrent comme les dossiers du carrousel. La carte survolee se souleve et passe devant, les autres restent lisibles par leur tranche gauche. */ .fin-stack{position:relative;padding:var(--s6) var(--s6) var(--s5);border-radius:var(--r-panel); background:radial-gradient(120% 130% at 12% 0%,rgba(46,158,85,.34),rgba(10,10,10,0) 62%), radial-gradient(90% 120% at 92% 100%,rgba(104,231,142,.16),rgba(10,10,10,0) 70%), linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.10);overflow:hidden} .fin-stack::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.3px); background-size:22px 22px;opacity:.5} .fin-stack-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between; gap:var(--s4);margin-bottom:var(--s5)} .fin-deck{position:relative;height:236px;margin-bottom:var(--s4)} .fin-card{position:absolute;top:0;width:232px;height:212px;cursor:pointer; left:calc(var(--i) * (100% - 232px) / max(var(--n) - 1, 1)); z-index:calc(10 + var(--i)); display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px; background:linear-gradient(168deg,rgba(255,255,255,.16),rgba(255,255,255,.06) 55%,rgba(255,255,255,.10)); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(18px) saturate(1.7) brightness(1.12); -webkit-backdrop-filter:blur(18px) saturate(1.7) brightness(1.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 26px 50px -26px rgba(0,0,0,.9); transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color var(--fast)} .fin-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 26%,transparent 52%)} /* la pastille d'etat n'apparait que sur la carte detachee : empilee, elle n'appartenait visuellement a personne */ .fin-card:hover .fin-card-state,.fin-card:focus-visible .fin-card-state, .fin-card:last-child .fin-card-state{opacity:1} .fin-card:hover,.fin-card:focus-visible{transform:translateY(-16px);outline:none; z-index:99;border-color:rgba(255,255,255,.44); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 34px 64px -24px rgba(0,0,0,.95)} .fin-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .fin-card-head .pico{width:26px;height:26px;border-radius:9px;margin:0;font-size:10px} .fin-card-state{font-style:normal;font-size:10.5px;letter-spacing:.03em;padding:4px 9px; opacity:0;transition:opacity .28s var(--ease); border-radius:var(--r-pill);white-space:nowrap; background:rgba(0,0,0,.26);color:var(--ink-2)} .fin-card.green .fin-card-state{color:#CFFFE0} .fin-card.blue .fin-card-state{color:#CDE6FF} .fin-card.orange .fin-card-state{color:#FFD9AC} .fin-card.red .fin-card-state{color:#FFC2C2} /* le nom et le montant tiennent dans la TRANCHE visible (98px) : sur une pile, ce qui depasse a droite est masque par la carte suivante */ .fin-card-name{max-width:88px;font-size:13px;font-weight:500;line-height:1.2; letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} .fin-card-sum{margin-top:auto;display:flex;flex-direction:column;gap:2px;max-width:110px} .fin-card-sum b{font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1} .fin-card-sum i{font-style:normal;font-size:11px;color:rgba(255,255,255,.62);white-space:nowrap} .fin-card-bar{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden} .fin-card-bar u{display:block;height:100%;border-radius:3px;text-decoration:none; background:var(--green);transition:width .5s var(--ease)} .fin-card.blue .fin-card-bar u{background:var(--blue)} .fin-card.orange .fin-card-bar u{background:var(--orange)} .fin-card.red .fin-card-bar u{background:var(--red)} .fin-card.ink .fin-card-bar u{background:rgba(255,255,255,.3)} .fin-card-foot{font-size:11px;color:rgba(255,255,255,.55);white-space:nowrap} .fin-stack-hint{position:relative;font-size:11.5px;color:var(--ink-4)} @media (max-width:1023px){ /* sur telephone la pile devient un rail que l'on fait defiler au doigt */ .fin-stack{padding:var(--s5) 0 var(--s4) var(--s4)} .fin-stack-head,.fin-stack-hint{padding-right:var(--s4)} .fin-deck{height:auto;display:flex;gap:var(--s3);overflow-x:auto;padding:2px var(--s4) var(--s4) 0; scroll-snap-type:x mandatory;scrollbar-width:none} .fin-deck::-webkit-scrollbar{display:none} .fin-card{position:relative;left:auto;flex:0 0 200px;height:196px;scroll-snap-align:start} .fin-card .fin-card-state{opacity:1} .fin-card-name{max-width:none} .fin-card:hover,.fin-card:focus-visible{transform:none} } /* le panneau d'edition, ouvert au clic sur une carte */ .fin-modal .modal-head h2{display:flex;align-items:center;gap:2px;font-size:19px} .fin-hint{font-size:11.5px;color:var(--ink-4);margin-top:8px} .mchips .pill.on{background:var(--green);border-color:var(--green);color:#06230F} .fin-add{margin-top:var(--s3)} /* dans le panneau, la liste de factures respire un peu moins que sur la fiche */ .fin-modal .finv-line{padding:9px 0} .fin-modal .finv-txt b{font-size:13px} @media (max-width:1180px){.fin-hero{grid-template-columns:1fr}} @media (max-width:1023px){.fin-list{grid-template-columns:1fr} .fin-figures{flex-wrap:wrap;gap:var(--s4)}.fin-evo,.fin-gauge,.fin-splitcard{padding:var(--s5)} .fin-chart{height:190px}} /* ================================================= PAGE PROJET ============ */ .ppage{display:flex;flex-direction:column;gap:var(--s4)} .ppage-back{align-self:flex-start} .ppage-hero{padding:var(--s7)} .ppage-hero-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);flex-wrap:wrap} .ppage-id{min-width:0;flex:1} .ppage-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--s3); font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .ppage-eyebrow i{width:8px;height:8px;border-radius:50%;flex-shrink:0} .ppage-hero h1{font-size:46px;overflow-wrap:anywhere} /* La bulle vit SUR le panneau d'etat : elle ne peut pas reprendre la couleur d'etat, elle se lirait rouge sur rouge. Elle se creuse en sombre et ecrit en blanc, quel que soit l'etat. */ .ppage-hero .bubble{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)} .ppage-hero .bubble.late,.ppage-hero .bubble.paused,.ppage-hero .bubble.done{ background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.22)} .ppage-hero .bubble b,.ppage-hero .bubble u,.ppage-hero .bubble i{color:#fff} .ppage-money{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s6)} .pipe-col i{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px} .pipe-col b{font-size:26px;font-weight:300} .pipe-col b.empty{color:var(--ink-4);font-style:italic;font-size:20px} .ppage-body{display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr)} .pgroup.alert{border-color:var(--red-line)} .pgroup h3{display:flex;align-items:center;gap:var(--s3)} .pgroup h3 .badge{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.10);display:grid;place-items:center} .pgroup h3.is-late{color:var(--red)} .ptasks li{padding:2px 0} .ptasks-row{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left; padding:10px 0;border-top:1px solid var(--glass-line)} .ptasks li:first-child .ptasks-row{border-top:0} .ptasks li.done{opacity:.45}.ptasks li.done .ptasks-label{text-decoration:line-through} /* tout ce qui n'est pas la coche ouvre le panneau : la zone cliquable est la ligne entiere, pas un badge de 20px qu'il faut viser */ .ptasks-open{display:flex;align-items:center;gap:var(--s3);flex:1;min-width:0; text-align:left;cursor:pointer;border-radius:var(--r-tile);padding:4px 8px;margin:-4px -8px; transition:background-color var(--fast)} .ptasks-open:hover{background:rgba(255,255,255,.06)} .ptasks-open:focus-visible{outline:2px solid var(--green);outline-offset:1px} .ptasks-label{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ptasks-due{font-size:13px;color:var(--ink-3);white-space:nowrap} .ptasks-due.late{color:var(--red)} .trow-check{cursor:pointer} .trow-check:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* --- LE POIDS D'UNE TACHE --- Quatre niveaux, et une echelle de GRIS : le code couleur (vert, orange, bleu, rouge) dit un etat, jamais une importance. Les melanger ferait lire « majeure » comme « en retard ». C'est la densite qui monte, pas la teinte. */ .wtag{font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase; padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;flex-shrink:0; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);color:var(--ink-4); transition:background var(--fast),color var(--fast),border-color var(--fast)} .wtag.w3{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.20);color:var(--ink-2)} .wtag.w4{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.36);color:var(--ink-1)} button.wtag{cursor:pointer} button.wtag:hover{background:rgba(255,255,255,.18);color:var(--ink-1)} button.wtag:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* les pastilles de complexite, dans le panneau de tache et dans la creation : le multiplicateur est affiche, sinon « majeure » n'est qu'une etiquette */ .wchips .pill{gap:7px;cursor:pointer} .wchips .pill u{text-decoration:none;font-size:11px;color:var(--ink-4)} .wchips .pill.on u{color:rgba(6,35,15,.55)} /* le selecteur en ligne de l'etat d'une facture : il pousse la ligne vers le bas au lieu de flotter au-dessus, on ne perd rien de vue */ .finv-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px; padding:0 0 12px 34px;animation:mfade .22s var(--ease)} .finv-pick .pill{padding:6px 12px;font-size:12px;gap:7px;cursor:pointer} .finv-pick em{flex-basis:100%;font-style:normal;font-size:11px;color:var(--ink-4); margin-top:2px} /* --- L'HISTORIQUE DES FACTURES --- En bas a droite de la fiche : la derniere chose qu'on regarde sur un dossier est aussi la derniere de la page. La couleur suit l'etat de la facture. */ .ppage-body>.pinv{grid-column:2} .finv-list{display:flex;flex-direction:column} .finv{border-top:1px solid var(--glass-line)} .finv:first-child{border-top:0} .finv-line{display:flex;align-items:center;gap:var(--s3);padding:11px 0} .finv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.26)} .finv.green .finv-dot{background:var(--green)} .finv.orange .finv-dot{background:var(--orange)} .finv.red .finv-dot{background:var(--red)} .finv-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .finv-txt b{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .finv-txt i{font-style:normal;font-size:11.5px;color:var(--ink-4)} .finv-amt{font-size:15px;font-weight:500;white-space:nowrap;letter-spacing:-.01em} .finv-state{font-size:11px;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap; cursor:pointer;flex-shrink:0; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--ink-3); transition:filter var(--fast)} .finv-state:hover{filter:brightness(1.25)} .finv-state:focus-visible{outline:2px solid var(--green);outline-offset:2px} .finv.green .finv-state{background:rgba(104,231,142,.14);border-color:rgba(104,231,142,.34);color:var(--green)} .finv.orange .finv-state{background:var(--orange-soft);border-color:var(--orange-line);color:var(--orange)} .finv.red .finv-state{background:var(--red-soft);border-color:var(--red-line);color:var(--red)} .finv-del{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; cursor:pointer;color:var(--ink-4);transition:color var(--fast),background-color var(--fast)} .finv-del:hover{color:var(--red);background:var(--red-soft)} /* le bilan : une barre ou l'encaisse se lit DANS le facture, pas a cote */ .finv-tot{display:flex;flex-direction:column;gap:8px;margin-top:var(--s3); padding-top:var(--s3);border-top:1px solid var(--glass-line)} .finv-bar{position:relative;display:block;height:6px;border-radius:3px;overflow:hidden; background:rgba(255,255,255,.10)} .finv-bar u{position:absolute;left:0;top:0;height:100%;border-radius:3px;text-decoration:none; transition:width .5s var(--ease)} .finv-bar u.billed{background:rgba(255,255,255,.28);z-index:1} .finv-bar u.paid{background:var(--green);z-index:2} .finv-legend{font-size:12px;color:var(--ink-3)} .finv-legend b{color:var(--ink-1);font-weight:600} .finv-legend b.green{color:var(--green)} .finv-legend i{font-style:italic} .finv-add,.fin-add{align-self:flex-start;padding:9px 14px;font-size:12.5px;gap:7px;cursor:pointer} /* l'etat de facturation d'une mission ne se saisit pas : il s'affiche */ .fin-state-read{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2)} .fin-state-read i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.26)} .fin-state-read.green i{background:var(--green)} .fin-state-read.orange i{background:var(--orange)} .fin-state-read.blue i{background:var(--blue)} .fin-state-read.red i{background:var(--red)} /* --- l'en-tete de la fiche PORTE L'ETAT DU PROJET --- Le grand panneau était vert quel que soit le dossier : on ouvrait une fiche en retard sur un bandeau qui disait le contraire. Il prend maintenant la couleur d'état, comme tout le reste. `open` reste le vert par défaut. */ .ppage-hero.late{--panel-deep:var(--red-deep);--panel-mid:var(--red-mid);--panel-dim:var(--red-dim)} .ppage-hero.paused{--panel-deep:var(--orange-deep);--panel-mid:var(--orange-mid);--panel-dim:var(--orange-dim)} .ppage-hero.done{--panel-deep:var(--blue-deep);--panel-mid:var(--blue-mid);--panel-dim:var(--blue-dim)} /* --- l'équipe, dans le bandeau et nulle part ailleurs. Chaque prénom mène à sa fiche : la carte Contacts a disparu, l'accès au détail ne disparaît pas. */ .pipe-team b{display:flex;flex-wrap:wrap;gap:6px} .pteam{font-size:15px;font-weight:400;line-height:1.2;color:#fff;cursor:pointer; padding:5px 12px;border-radius:var(--r-pill); background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24); transition:background-color var(--fast)} .pteam:hover{background:rgba(255,255,255,.26)} .pteam:focus-visible{outline:2px solid #fff;outline-offset:2px} /* --- l'en-tete de la fiche : le bouton d'edition est en haut a droite --- */ .ppage-aside{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s3);flex-shrink:0} .ppage-edit{cursor:pointer;color:#fff; background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.30)} .ppage-edit:hover{background:rgba(255,255,255,.26);color:#fff} /* sur le panneau vert, un point vert ne se voit pas : l'etat s'y lit en clair, et c'est la bulle qui porte la couleur (meme regle que `.bubble.late`) */ .ppage-hero .tone-dot{background:#fff} .ppage-hero .tone-dot.late{background:#FFB4B4} .ppage-hero .tone-dot.paused{background:#FFD9AC} .ppage-hero .tone-dot.done{background:#CDE6FF} .ppage-bar{margin-top:var(--s4);max-width:460px;background:rgba(0,0,0,.26)} .ppage-bar>i,.ppage-bar.late>i,.ppage-bar.paused>i,.ppage-bar.done>i{background:#fff} .pe-clear{align-self:flex-start;margin-top:var(--s2);padding:7px 13px;font-size:12px;cursor:pointer} /* le visage d'un rendez-vous : posé en bas à droite de la carte, il ne mange pas l'intitulé et se reconnaît plus vite que lui */ .cal-face{position:absolute;right:5px;bottom:5px;width:20px;height:20px; border-radius:50%;margin:0;font-size:8px;flex-shrink:0; border:1px solid rgba(255,255,255,.35)} .cal-ev.mini .cal-face,.cal-ev.court .cal-face{position:static;width:17px;height:17px; margin-left:auto} .urg-ico.face{border-radius:50%} /* --- PANNEAU D'ÉVÉNEMENT ET AGENDAS ABONNÉS --- */ .ev-avec{display:flex;align-items:center;gap:var(--s3)} .ev-avec select{flex:1;min-width:0} .ev-avec .face{width:36px;height:36px;flex-shrink:0} .ev-lien{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--glass-line)} .upload-prev.rond{border-radius:50%} /* la fiche contact : en-tête aligné sur celui d'un projet */ .cpage-top{display:flex;align-items:flex-start;gap:var(--s5)} .cpage-id{flex:1;min-width:0} .cpage-coord{display:flex;flex-wrap:wrap;gap:var(--s6);margin-top:var(--s5)} .cpage-coord .pipe-col b{font-size:15px;font-weight:400} .ev-modal{max-width:540px} .ev-hours{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3); transition:opacity var(--fast)} .ev-hours.off{opacity:.35;pointer-events:none} .ev-hours input{flex:1;min-width:0;color-scheme:dark} .ev-foot{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5)} .ev-foot .btn-primary{margin-left:auto} .ev-del{cursor:pointer;color:var(--ink-3)} .ev-del:hover{color:var(--red);background:var(--red-soft);border-color:var(--red-line)} /* un événement importé se lit : pas de champs, des faits */ .ev-src{display:flex;align-items:center;gap:8px;margin:-4px 0 var(--s5);font-size:12px; color:var(--ink-3)} .ev-facts{display:flex;flex-direction:column;gap:var(--s3)} .ev-facts li{display:flex;flex-direction:column;gap:3px} .ev-facts i{font-style:normal;font-size:11px;letter-spacing:.05em;text-transform:uppercase; color:var(--ink-4)} .ev-facts b{font-size:15px;font-weight:400;overflow-wrap:anywhere} .ev-link{color:var(--green)} .fd-modal{max-width:560px} .fd-list{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)} .fd-list li{display:flex;align-items:center;gap:var(--s3);padding:11px 13px; border-radius:var(--r-tile);background:rgba(255,255,255,.05);border:1px solid var(--glass-line)} .fd-list li.ko{border-color:var(--red-line);background:var(--red-soft)} .fd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--green)} .fd-list li.ko .fd-dot{background:var(--red)} .fd-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .fd-txt b{font-size:14px;font-weight:500} .fd-txt i,.fd-txt u,.fd-txt em{font-style:normal;text-decoration:none;font-size:11.5px; color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fd-txt em{color:var(--red)} .fd-del{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; cursor:pointer;color:var(--ink-4);transition:color var(--fast),background-color var(--fast)} .fd-del:hover{color:var(--red);background:var(--red-soft)} .fd-colors{display:flex;gap:4px;flex-shrink:0} .fd-color{width:15px;height:15px;border-radius:50%;cursor:pointer; border:2px solid transparent;transition:transform var(--fast),border-color var(--fast)} .fd-color:hover{transform:scale(1.18)} .fd-color.on{border-color:#fff} .fd-add{gap:var(--s4)} .fd-add code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px; background:rgba(255,255,255,.08);border-radius:4px;padding:1px 4px} .ag-add{margin-top:var(--s5);width:100%;justify-content:center} /* --- LE PANNEAU DE TACHE --- Au centre de l'ecran, quelle que soit la vue d'ou l'on vient. Il rappelle d'abord OU l'on est (le projet), parce qu'on y arrive depuis six endroits. */ .te-modal{max-width:520px} .te-where{display:flex;align-items:center;gap:9px;margin:-4px 0 var(--s5); font-size:13px;color:var(--ink-3)} .te-where .pico{width:24px;height:24px;border-radius:8px;margin:0;font-size:9.5px} .te-modal .due-pick{margin-top:var(--s3)} /* (la carte « Contacts » de la fiche a été retirée : l'équipe se lit dans le bandeau du haut, et nulle part ailleurs) */ /* --- profil en bas du rail (remplace l'ecouteur, supprime) --- */ .dk-rail-user{margin-top:auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center; background:var(--green);color:#06230F;font-size:14px;font-weight:600;cursor:pointer;flex-shrink:0; transition:filter var(--fast)} .dk-rail-user:hover{filter:brightness(1.08)} /* ================================================= KANBAN ================= */ .kanban{display:flex;gap:var(--s4);overflow-x:auto;padding-bottom:var(--s3);align-items:flex-start} .kcol{flex:1;min-width:290px;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4)} .kcol-head{display:flex;align-items:center;gap:var(--s3);padding:2px 4px} .kcol-head .kdot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .kcol-head h3{font-size:15px;flex:1} .kcol-head .n{font-size:12px;color:var(--ink-3);background:var(--glass);border-radius:var(--r-pill);padding:2px 9px} .kcards{display:flex;flex-direction:column;gap:var(--s3)} .kcard{border-radius:var(--r-tile);padding:var(--s4);background:rgba(255,255,255,.05); border:1px solid var(--glass-line);display:flex;flex-direction:column;gap:var(--s3); transition:border-color var(--fast),transform var(--fast)} .kcard:hover{border-color:rgba(255,255,255,.24);transform:translateY(-1px)} .kcard-top{display:flex;align-items:flex-start;gap:var(--s3)} .kcard-check{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28); flex-shrink:0;margin-top:1px;display:grid;place-items:center;color:#06230F;cursor:pointer} .kcard-check.on{background:var(--green);border-color:var(--green)} .kcard-label{font-size:14px;line-height:1.4;flex:1;cursor:pointer} .kcard.done .kcard-label{text-decoration:line-through;color:var(--ink-3)} .kcard-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-left:30px} .kcard-proj{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);cursor:pointer} .kcard-proj i{width:7px;height:7px;border-radius:50%;flex-shrink:0} .kcard-due{font-size:12px;color:var(--ink-3)}.kcard-due.late{color:var(--red)} .kempty{font-size:13px;color:var(--ink-4);padding:var(--s4);text-align:center} /* la phrase de la colonne « En retard » : une note de bas de colonne, pas un avertissement. Elle ne prend la couleur d'alerte qu'au moment du refus. */ .kcol-deny{font-size:12px;line-height:1.45;color:var(--ink-4);padding:2px 4px; transition:color var(--fast) var(--ease)} /* --- prendre une carte et la poser ailleurs --- La carte suit le doigt en position fixe (le tableau defile a l'horizontale, une carte laissee dans le flux y serait rognee). Son creux reste ouvert dans la colonne de depart : rien ne se referme derriere elle. */ .kcard{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y} .kcard:focus-visible{outline:2px solid var(--green);outline-offset:3px} .kghost{opacity:.3;pointer-events:none;background:none;border-style:dashed} .kcard-fly{position:fixed;z-index:70;pointer-events:none;transition:none; background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.32); box-shadow:0 26px 54px -18px rgba(0,0,0,.85);will-change:transform} .kcard-fly.deny{border-color:var(--red-line);background:var(--red-soft)} body.kdragging{cursor:grabbing;user-select:none;-webkit-user-select:none} /* la zone d'arrivee s'allume DEDANS : le bord du verre ne se redouble pas */ .kcards{min-height:72px;border-radius:var(--r-tile); transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease)} .kcol.kdrop .kcards{background:rgba(104,231,142,.09);box-shadow:inset 0 0 0 1px rgba(104,231,142,.30)} .kcol.kdeny .kcards{background:var(--red-soft);box-shadow:inset 0 0 0 1px var(--red-line)} .kcol.kdeny .kcol-deny{color:var(--red)} /* le serveur a refuse : la carte revenue le dit une fois, puis se tait */ @keyframes kfail{0%,100%{border-color:var(--glass-line)} 20%,60%{border-color:var(--red-line);background:var(--red-soft)}} .kcard.kfail{animation:kfail 900ms var(--ease)} /* ce qui ne se voit pas mais s'entend : l'annonce des deplacements au clavier */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} @media (prefers-reduced-motion: reduce){ .kcards,.kcol-deny,.kcard{transition:none} .kcard.kfail{animation:none} } /* ============================================================= EVENEMENT === Le gros bouton a glow vert. Le degrade part d'un cœur clair vers des bords plus profonds, et un halo vert deborde du bouton : c'est la floraison de la reference. Texte SOMBRE pour tenir sur le vert vif. */ .event-list{display:flex;flex-direction:column;gap:var(--s3)} /* Le degrade a un CŒUR SOMBRE (assombri au centre) et des bords vert vif : ca creuse un fond fonce sous le texte, qui passe donc en BLANC, tandis que le halo vert deborde aux extremites. C'est la lecture de la reference. */ .event-bar{position:relative;display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left; padding:13px var(--s5);border-radius:var(--r-pill);color:#fff;overflow:visible; background: radial-gradient(90% 150% at 50% 46%, rgba(0,0,0,.5), rgba(0,0,0,.16) 55%, rgba(0,0,0,0) 74%), linear-gradient(90deg, rgba(120,232,164,.95), rgba(46,150,88,.62) 26%, rgba(24,96,54,.5) 50%, rgba(46,150,88,.62) 74%, rgba(120,232,164,.95)), var(--green-deep); box-shadow:0 0 42px -6px rgba(104,231,142,.55),0 12px 30px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22); transition:transform var(--fast) var(--ease),box-shadow var(--base) var(--ease)} .event-bar:hover{transform:translateY(-1px); box-shadow:0 0 62px -4px rgba(104,231,142,.78),0 16px 36px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3)} .ev-time{flex-shrink:0;min-width:58px;display:flex;flex-direction:column;line-height:1.1; font-size:16px;font-weight:700;font-variant-numeric:tabular-nums} .ev-time u{font-size:11px;font-weight:500;text-decoration:none;color:rgba(255,255,255,.7)} .ev-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .ev-title{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ev-sub{font-size:12px;color:rgba(255,255,255,.72);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* pile d'avatars : des pastilles rondes qui se chevauchent */ .avatars{display:inline-flex;align-items:center;flex-shrink:0} .avatars i{width:30px;height:30px;border-radius:50%;flex-shrink:0; display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600; background:rgba(255,255,255,.14);border:1.5px solid rgba(10,10,10,.9); color:var(--ink-1);letter-spacing:.02em} .avatars i+i{margin-left:-11px} .ev-av i{border-color:rgba(0,0,0,.28);background:rgba(255,255,255,.85);color:#06230F} .ev-join,.ev-open{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0} .ev-join{background:rgba(255,255,255,.95);color:#0E7A3C} .ev-open{background:rgba(255,255,255,.16);color:#fff} /* un point qui pulse quand la reunion est en cours */ .event-bar.live .ev-join{position:relative} .event-bar.live .ev-join::after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px; border-radius:50%;background:#0E7A3C;border:2px solid #9CF2B4;animation:pulse 1.8s var(--ease) infinite} @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.7}} /* ================================================= AGENDA / CALENDRIER ===== Une vraie grille de semaine : sept colonnes, les heures en ligne, chaque rendez-vous pose a son creneau et haut de sa duree. Le Gantt de projets qui vivait ici lisait des intervalles, pas des journees : il ne disait pas si un mardi etait tenable. La grille est un `grid` a deux colonnes (regle des heures + jours) et trois rangees (en-tete des jours, bande sans heure, corps horaire). En-tete et bande restent collees en haut quand on fait defiler les heures. ========================================================================== */ .cal{display:flex;flex-direction:column;gap:var(--s4)} .cal-top{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap} .cal-nav{display:flex;align-items:center;gap:var(--s2)} .cal-nav .pill{cursor:pointer;padding:9px 14px} .cal-title{flex:1;min-width:180px;font-size:20px;font-weight:500;letter-spacing:-.02em; text-transform:capitalize} .cal-actions{display:flex;align-items:center;gap:var(--s2)} .cal-actions .pill{cursor:pointer} .cal-grid{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto 1fr; overflow:auto;max-height:calc(100vh - 250px);min-height:460px; border-radius:var(--r-card);border:1px solid var(--glass-line); background:rgba(255,255,255,.03)} /* les deux rangees du haut ne defilent pas avec les heures */ .cal-corner{grid-area:1/1;position:sticky;top:0;left:0;z-index:6;background:var(--bg-raise)} .cal-heads{grid-area:1/2;position:sticky;top:0;z-index:5;display:grid; grid-template-columns:repeat(7,1fr);background:var(--bg-raise); border-bottom:1px solid var(--glass-line)} .cal-head-day{padding:10px 6px;text-align:center;border-left:1px solid rgba(255,255,255,.05)} .cal-head-day u{display:block;text-decoration:none;font-size:10.5px;letter-spacing:.07em; color:var(--ink-4)} .cal-head-day b{font-size:19px;font-weight:400;letter-spacing:-.02em} .cal-head-day.now u{color:var(--green)} .cal-head-day.now b{color:#06230F;background:var(--green);border-radius:50%; display:inline-grid;place-items:center;width:30px;height:30px;margin-top:2px} .cal-gutter{grid-area:2/1;position:sticky;top:0;left:0;z-index:4;background:var(--bg-raise)} /* la bande du haut : ce qui n'a pas d'heure, et les fins de mission */ .cal-alldays{grid-area:2/2;position:sticky;z-index:3;display:grid;grid-template-columns:repeat(7,1fr); background:var(--bg-raise);border-bottom:1px solid var(--glass-line)} .cal-allday{min-height:34px;padding:5px;display:flex;flex-direction:column;gap:4px; border-left:1px solid rgba(255,255,255,.05)} .cal-allday.now{background:rgba(104,231,142,.06)} .cal-due{display:flex;align-items:center;gap:5px;padding:3px 7px;border-radius:8px;cursor:pointer; font-size:11px;text-align:left;overflow:hidden; background:rgba(104,231,142,.14);border:1px solid rgba(104,231,142,.30);color:var(--green)} .cal-due.late{background:var(--red-soft);border-color:var(--red-line);color:var(--red)} .cal-due.paused{background:var(--orange-soft);border-color:var(--orange-line);color:var(--orange)} .cal-due.done{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue)} .cal-due span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cal-due-ico{width:15px;height:15px;border-radius:5px;margin:0;font-size:7px;flex-shrink:0} .cal-chip{padding:3px 8px;border-radius:8px;font-size:11px;text-align:left;cursor:pointer; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-1); background:color-mix(in srgb, var(--ev,#fff) 15%, rgba(20,22,21,.82)); border:1px solid color-mix(in srgb, var(--ev,#fff) 62%, transparent)} /* la regle des heures, collee a gauche */ .cal-rule{grid-area:3/1;position:relative;position:sticky;left:0;z-index:2;background:var(--bg-raise)} .cal-hour{position:absolute;right:8px;transform:translateY(-50%)} .cal-hour span{font-size:10.5px;color:var(--ink-4)} .cal-cols{grid-area:3/2;position:relative;display:grid;grid-template-columns:repeat(7,1fr)} .cal-line{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.05)} .cal-col{position:relative;border-left:1px solid rgba(255,255,255,.05);cursor:copy} .cal-col.now{background:rgba(104,231,142,.05)} /* le trait de l'heure courante, sur la colonne du jour */ .cal-now{position:absolute;left:0;right:0;height:2px;background:var(--green);z-index:3; pointer-events:none;box-shadow:0 0 10px -1px var(--green)} .cal-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px; border-radius:50%;background:var(--green)} /* UNE CARTE DE RENDEZ-VOUS. `--ev` porte la couleur de l'AGENDA d'où le rendez-vous sort (ou l'accent de son projet s'il est saisi ici) : dans une semaine chargée, c'est elle qui dit d'où vient une case sans qu'on ait à la lire. Le contour entier la porte, pas un liseré à gauche : les guidelines l'interdisent (§11), et sur une carte de 24px de haut un liseré de 3px ne se lit plus comme un accent, il se lit comme un défaut d'alignement. */ .cal-ev{position:absolute;z-index:2;display:flex;flex-direction:column;gap:1px; padding:4px 8px;border-radius:9px;overflow:hidden;text-align:left;cursor:pointer; color:var(--ink-1); background:color-mix(in srgb, var(--ev,#fff) 15%, rgba(20,22,21,.82)); border:1px solid color-mix(in srgb, var(--ev,#fff) 62%, transparent); transition:filter var(--fast),transform var(--fast),opacity var(--fast)} .cal-ev:hover{filter:brightness(1.18);transform:translateY(-1px);z-index:4} .cal-ev:focus-visible{outline:2px solid var(--ev,var(--green));outline-offset:1px} .cal-ev u{text-decoration:none;font-size:10px;color:var(--ink-3);white-space:nowrap; flex-shrink:0} .cal-ev b{font-size:12px;font-weight:500;line-height:1.2;overflow:hidden; text-overflow:ellipsis} .cal-ev i{font-style:normal;font-size:10.5px;color:var(--ink-4);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* COURT : heure et intitulé sur UNE ligne, alignés au milieu. En colonne, un rendez-vous de trente minutes coupait son texte en deux moitiés illisibles. */ .cal-ev.court,.cal-ev.mini{flex-direction:row;align-items:center;gap:6px} .cal-ev.court b,.cal-ev.mini b{white-space:nowrap;min-width:0} .cal-ev.mini{padding:2px 7px} .cal-ev.mini u{font-size:9.5px} .cal-ev.mini b{font-size:11px} /* PASSÉ : la carte s'efface, elle ne se raye pas. On la lit encore — elle a eu lieu, c'est une information — mais elle ne réclame plus rien. Aucune hachure : un motif oblique se lit comme « indisponible », pas comme « déjà fait ». */ .cal-ev.passe,.cal-chip.passe{opacity:.42;filter:saturate(.55)} .cal-ev.passe:hover,.cal-chip.passe:hover{opacity:.8;filter:saturate(1)} .cal-ev.live{box-shadow:0 0 0 1px var(--ev,var(--green)),0 0 16px -4px var(--ev,var(--green))} .cal-empty{font-size:13px;color:var(--ink-4);text-align:center;padding:var(--s4)} @media (max-width:1023px){ .cal-grid{display:none} /* la grille horaire ne tient pas dans une main */ .cal-top{gap:var(--s3)} } /* ================================================= HISTORIQUE ============= */ /* ================================================= MODAL DE CREATION ====== */ .modal-wrap{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--s4); background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); animation:mfade var(--base) var(--ease)} /* le panneau est du verre, comme le reste de la page (pas un bloc opaque) */ .modal{width:min(560px,94vw);max-height:88vh;overflow-y:auto;border-radius:var(--r-panel); background:linear-gradient(163deg,rgba(255,255,255,.13),rgba(255,255,255,.05) 46%,rgba(255,255,255,.09)); border:1px solid rgba(255,255,255,.20);padding:var(--s6); backdrop-filter:blur(26px) saturate(1.7) brightness(1.1); -webkit-backdrop-filter:blur(26px) saturate(1.7) brightness(1.1); display:flex;flex-direction:column;gap:var(--s5); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 40px 90px -30px rgba(0,0,0,.9); animation:mpop 280ms var(--ease)} /* RIEN NE SE COMPRIME DANS UN PANNEAU. `.modal` est une colonne flexible : par défaut, ses enfants se laissent écraser quand le contenu dépasse la hauteur maximale, au lieu de la faire déborder. Le panneau ne défilait donc pas — il n'avait rien à faire défiler, tout avait rétréci — et depuis que le formulaire coupe ce qui déborde, les derniers champs devenaient simplement inatteignables. */ .modal>*{flex-shrink:0} .modal-head{display:flex;align-items:center;justify-content:space-between} .modal-head h2{font-size:22px} /* LA CROIX EST UN PLUS PIVOTÉ. Le jeu d'icônes n'a pas de croix : elle se fabrique en tournant le « + » d'un quart de tour. Les huit panneaux demandaient bien cette icône, mais rien ne la tournait — ils affichaient donc un signe plus, qui se lit « ajouter », pas « fermer ». */ .modal-close{width:36px;height:36px;border-radius:50%;background:var(--glass);color:var(--ink-3); display:grid;place-items:center;flex-shrink:0;cursor:pointer; transform:rotate(45deg);transition:color var(--fast),background-color var(--fast), transform var(--fast) var(--ease)} .modal-close:hover{color:var(--ink-1);background:rgba(255,255,255,.10); transform:rotate(135deg)} .modal-close:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* le selecteur : une pastille de verre qui GLISSE d'un onglet a l'autre, au lieu d'un fond qui saute d'un bouton a l'autre */ .seg{position:relative;display:flex;gap:4px;padding:4px;border-radius:var(--r-pill); background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)} .seg-ind{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 12px)/4); border-radius:var(--r-pill);z-index:0; background:linear-gradient(160deg,rgba(104,231,142,.34),rgba(39,136,74,.24)); border:1px solid rgba(160,255,196,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 10px 24px -14px rgba(64,220,120,.7); transition:transform .42s var(--ease)} .seg button{position:relative;z-index:1;flex:1;padding:11px;border-radius:var(--r-pill); font-size:13px;font-weight:500;color:var(--ink-3);transition:color .28s var(--ease)} .seg button.on{color:#DFFFEA} /* le formulaire change d'etat en fondu, la hauteur suit : la page ne saute pas */ /* La hauteur s'anime dans les DEUX sens. `overflow:hidden` est ce qui rend le rétrécissement propre : sans lui, le contenu du formulaire déborde de la boîte pendant qu'elle se referme. */ .mform{display:flex;flex-direction:column;gap:var(--s4);overflow:hidden; transition:height .42s var(--ease),opacity .18s var(--ease),transform .28s var(--ease)} .mform.swap{opacity:0;transform:translateY(8px)} .field{display:flex;flex-direction:column;gap:var(--s2)} .field label{font-size:11px;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase} .field input,.field select,.field textarea{border-radius:var(--r-tile);padding:13px 15px; font-size:15px;width:100%;font-family:inherit; background:rgba(255,255,255,.05);border:1px solid var(--glass-line);color:var(--ink-1)} .field textarea{resize:vertical;line-height:1.45;min-height:76px} .field input::placeholder,.field textarea::placeholder{color:var(--ink-4)} .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:rgba(104,231,142,.45)} /* les pastilles d'etat parlent le code couleur absolu, jusque dans le formulaire : vert en cours, orange en attente, bleu termine */ .mchips .pill.state-paused.on{background:var(--orange);border-color:var(--orange);color:#2A1500} .mchips .pill.state-done.on{background:var(--blue);border-color:var(--blue);color:#04203F} .mchips{display:flex;gap:var(--s2);flex-wrap:wrap} .mchips .pill{gap:7px} .due-pick{margin-top:var(--s3);border-radius:var(--r-tile);padding:12px 15px;font-size:15px; width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(160,255,196,.34); color:var(--ink-1);color-scheme:dark} .mchips .pill{cursor:pointer}.mchips .pill.on{background:var(--green);border-color:var(--green);color:#06230F} @keyframes mfade{from{opacity:0}to{opacity:1}} @keyframes mpop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}} @media(max-width:1380px){.span8,.span7{grid-column:span 12}.span5,.span4{grid-column:span 6}} @media(max-width:900px){.ppage-body{grid-template-columns:1fr} /* une seule colonne : « en bas a droite » redevient simplement « en bas » */ .ppage-body>.pinv{grid-column:auto} .ppage-hero-row{flex-direction:column} .ppage-aside{flex-direction:row-reverse;align-self:stretch; justify-content:space-between;align-items:center}} /* ============================================================================ MOBILE — une mise en page a part, pas un desktop retreci. Le JS rend la coquille .mb (et non .dk) sous 1024px ; ces regles ne stylent donc que ce qui existe alors. ========================================================================== */ @media (max-width:1023px){ :root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)} /* LA PAGE FAIT AU MOINS UN ÉCRAN. Le tableau de bord est toujours plus haut que l'écran, les autres onglets non : passer d'une page longue à une page courte faisait changer la hauteur du document, et iOS recalait le défilement — c'est ce saut-là qu'on voyait partout sauf sur l'accueil. `svh` et pas `vh` : `vh` suit la barre d'adresse et change pendant le défilement, ce qui rejouerait exactement le problème. */ .mb{display:flex;flex-direction:column;max-width:600px;margin:0 auto; min-height:100vh;min-height:100svh; padding:var(--s3) var(--s3) calc(var(--safe-bottom) + 118px)} /* Rien ne se comprime : la page grandit avec son contenu, elle ne le tasse jamais pour tenir dans la hauteur minimale. */ .mb>*{flex-shrink:0} /* ET ELLE SE PROLONGE, MÊME VIDE. Une colonne de Kanban sans carte laissait la page se terminer à trois cents pixels : le document devenait plus court que l'écran, iOS n'avait plus rien à faire défiler et faisait rebondir la page ENTIÈRE — en emmenant le dock avec elle. Ce vide-là est structurel, pas décoratif : c'est lui qui garantit que le dock est au même endroit d'un onglet à l'autre. */ .mb::after{content:"";flex:1 0 auto} /* panneau vert en tete, coins tres arrondis, la regle verticale court a gauche */ .mb-hero{padding:calc(var(--safe-top) + var(--s5)) var(--s5) var(--s6);display:flex;flex-direction:column} .mb-hero>.gp-ruler{left:var(--s2);top:44%} .mb-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s5)} .mb-logo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.14);color:var(--ink-1)} .mb-hero h1{font-size:40px} .mb-hero .gp-mid{flex:0;margin-top:var(--s4)} .mb-body{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)} /* MEME HAUTEUR QUE LA DATE DE L'ACCUEIL. Ces en-têtes ignoraient l'encoche : sur un iPhone, « Projets » se retrouvait collé au bord haut de l'écran, plus haut que la date du tableau de bord. */ .mb-head{padding:calc(var(--safe-top) + var(--s5)) var(--s2) var(--s4)} .mb-head h1{font-size:32px} .mb-head .eyebrow{margin-top:6px;display:block} .mb .pdeck{grid-template-columns:1fr;padding:0 var(--s2)} /* carrousel 3D : layout mobile propre, pas une reduction du desktop */ .mb .f3{height:396px;margin:var(--s2) 0 var(--s4)} .mb .f3-arc{display:none} /* accueil mobile : barre de marque, actions en verre, titre */ .mbh{padding:calc(var(--safe-top) + var(--s5)) var(--s2) 0} .mbh-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)} .mbh-title{min-width:0} .mbh-title h1{font-size:30px} .mbh-title .eyebrow{margin-top:6px;display:block} .mb .home{gap:var(--s6)} /* agenda mobile : frise de jours + fil vertical */ .ag-m{display:flex;flex-direction:column;gap:var(--s5);padding:0 var(--s2)} .ag-strip{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none; padding-bottom:2px;scroll-snap-type:x proximity} .ag-strip::-webkit-scrollbar{display:none} .ag-chip{flex-shrink:0;width:52px;padding:9px 0 8px;border-radius:18px;scroll-snap-align:start; display:flex;flex-direction:column;align-items:center;gap:3px; background:var(--glass);border:1px solid var(--glass-line); transition:background var(--fast),border-color var(--fast)} .ag-chip u{text-decoration:none;font-size:11px;color:var(--ink-4);text-transform:uppercase} .ag-chip b{font-size:17px;font-weight:500} .ag-chip i{font-style:normal;font-size:10px;color:var(--ink-4);min-height:12px} .ag-chip.has i{color:var(--green)} .ag-chip.now{background:var(--green);border-color:var(--green)} .ag-chip.now u,.ag-chip.now b,.ag-chip.now i{color:#06230F} .ag-day{display:flex;flex-direction:column;gap:var(--s3)} .ag-h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500; letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)} .ag-h.now{color:var(--green)} .ag-h span{margin-left:auto;font-size:12px;color:var(--ink-4)} .ag-list{display:flex;flex-direction:column;gap:var(--s2); padding-left:var(--s4);border-left:1px solid rgba(255,255,255,.10)} .ag-card{position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left; padding:13px 14px;border-radius:18px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)} .ag-card::before{content:"";position:absolute;left:calc(var(--s4)*-1 - 5px);top:50%; width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--green)} /* le fil mobile suit la meme regle que la grille : la couleur vient de l'agenda, un rendez-vous passe s'efface au lieu de se rayer */ .ag-card[style*="--ev"]::before{background:var(--ev)} .ag-card.passe{opacity:.42;filter:saturate(.55)} .ag-card.late::before{background:var(--red)} .ag-card.paused::before{background:var(--orange)} .ag-card.done::before{background:var(--blue)} .ag-card.late{border-color:var(--red-line);background:var(--red-soft)} .ag-card.paused{border-color:var(--orange-line)} .ag-ico{width:32px;height:32px;border-radius:11px;flex-shrink:0;display:grid;place-items:center; background:rgba(255,255,255,.08);color:var(--ink-2)} .ag-mid{flex:1;min-width:0} .ag-mid b{display:block;font-size:14px;font-weight:500;line-height:1.25} .ag-mid i{font-style:normal;font-size:11.5px;color:var(--ink-4)} .ag-time{flex-shrink:0;font-size:12px;color:var(--ink-3)} .mb .f3{height:408px;overflow:hidden;margin-bottom:0} /* format PAYSAGE : nettement plus large que haut, jamais carre */ .mb .f3-item{width:192px;height:146px;margin-left:-96px;top:238px} .mb .f3-pocket{height:92px;padding:8px 12px 8px; clip-path:path("M0 79 L0 15 Q0 5 10 5 L67 5 C83 5 89 27 108 27 L182 27 Q192 27 192 36 L192 79 Q192 92 177 92 L15 92 Q0 92 0 79 Z")} .mb .f3-docs{bottom:42%} .mb .f3-badge{font-size:12px;margin-bottom:5px} .mb .f3-name{font-size:13.5px} .mb .f3-badge{font-size:11px;padding:3px 8px} /* carte info mobile : meme liquid glass vert que desktop, tailles reduites */ .mb .f3-info{left:var(--s3);top:26px;width:234px;padding:15px 15px 13px;border-radius:22px} .mb .f3-info b{font-size:16px} .mb .f3-info-val{font-size:38px} .mb .f3-info-val i{font-size:16px} .mb .f3-info-go{width:30px;height:30px} .mb .ppage{padding:calc(var(--safe-top) + var(--s3)) 0 0} .mb .ppage-hero h1{font-size:34px} .mb .bubble.xl{min-width:104px;padding:var(--s3) var(--s4)} .mb .bubble.xl b{font-size:46px} /* segments du kanban : une colonne a la fois, glissables */ .mb-seg{display:flex;gap:4px;padding:5px;margin:0 var(--s2) var(--s4);border-radius:var(--r-pill); background:var(--glass);border:1px solid var(--glass-line);overflow-x:auto;scrollbar-width:none} .mb-seg::-webkit-scrollbar{display:none} .mb-seg button{flex-shrink:0;white-space:nowrap;padding:9px 14px;border-radius:var(--r-pill); font-size:12px;font-weight:500;color:var(--ink-3);display:flex;align-items:center;gap:6px} .mb-seg button.on{background:var(--green);color:#06230F} .mb-seg .sdot{width:7px;height:7px;border-radius:50%} .mb-kcards{display:flex;flex-direction:column;gap:var(--s3);padding:0 var(--s2)} /* Une seule colonne tient a l'ecran : ce sont les SEGMENTS qui recoivent la carte soulevee. Le geste est le meme, la cible change de forme. */ .mb-seg button{transition:background var(--fast) var(--ease),color var(--fast) var(--ease), transform var(--fast) var(--ease)} .mb-seg button.kdrop{background:rgba(104,231,142,.30);color:var(--ink-1);transform:scale(1.06)} .mb-seg button.kdeny{background:var(--red-soft);color:var(--red)} @media (prefers-reduced-motion: reduce){.mb-seg button{transition:none} .mb-seg button.kdrop{transform:none}} /* dock flottant en verre : la navigation mobile, jamais une barre pleine */ /* LA TRANSITION D'UNE PAGE À L'AUTRE. Elle ne se déclenche QUE sur un changement d'onglet : appliquée à chaque rendu, elle rejouerait à chaque coche cochée et l'application paraîtrait nerveuse. Le sens suit celui du dock — on va vers la droite, la page arrive par la droite. */ @keyframes mbDroite{from{opacity:0;transform:translate3d(22px,0,0)} to{opacity:1;transform:none}} @keyframes mbGauche{from{opacity:0;transform:translate3d(-22px,0,0)} to{opacity:1;transform:none}} .mb-entre.vers-droite{animation:mbDroite .3s var(--ease)} .mb-entre.vers-gauche{animation:mbGauche .3s var(--ease)} @media (prefers-reduced-motion:reduce){ .mb-entre.vers-droite,.mb-entre.vers-gauche{animation:none}} /* `translateZ(0)` place le dock sur SON propre calque : sans cela, son `backdrop-filter` le fait repeindre avec la page à chaque défilement et à chaque changement de hauteur, et il tressaute. Il est le seul élément qu'on a en permanence sous les yeux : il ne doit jamais bouger. */ .mb-dock{position:fixed;left:50%;transform:translateX(-50%) translateZ(0); z-index:40;isolation:isolate;will-change:transform;backface-visibility:hidden; bottom:calc(var(--safe-bottom) + var(--s4));display:flex;gap:2px;padding:6px;border-radius:var(--r-pill); background:rgba(14,14,14,.62);border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(30px) saturate(1.7) brightness(1.05); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.22),0 20px 44px -18px rgba(0,0,0,.9)} /* arete refractive du dock : le contenu qui defile dessous se plie au bord */ .mb-dock::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:2px; backdrop-filter:blur(6px) brightness(1.4) saturate(1.5);-webkit-backdrop-filter:blur(6px) brightness(1.4) saturate(1.5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .mb-dock-btn{position:relative;z-index:1;width:46px;height:46px;border-radius:var(--r-pill); display:grid;place-items:center; color:rgba(255,255,255,.72);transition:color .22s var(--ease)} .mb-dock-btn.on{color:#06230F} /* LA PASTILLE. C'est elle qui porte le vert, plus le bouton : un fond posé sur le bouton actif ne peut que s'allumer et s'éteindre, il ne peut pas faire le trajet. Elle glisse et s'étire d'une icône à l'autre. */ /* La transition ne porte QUE sur `transform` et `opacity` : ce sont les deux seules propriétés que le compositeur sait animer sans repasser par la mise en page. Animer `width` obligeait le navigateur à recalculer la position de tout le dock à chaque image — sur un écran 120 Hz, c'est exactement ce qu'on ne peut pas se permettre. Les six onglets font la même largeur, il n'y avait de toute façon rien à interpoler. */ .mb-dock-ind{position:absolute;top:6px;left:0;width:46px;height:46px; border-radius:var(--r-pill);background:var(--green);z-index:0;pointer-events:none; will-change:transform; transition:transform .34s var(--ease),opacity .2s var(--ease)} /* la première pose ne s'anime pas : sinon la pastille arrive de la gauche */ .mb-dock.pose .mb-dock-ind{transition:none} @media (prefers-reduced-motion:reduce){.mb-dock-ind{transition:opacity .2s}} /* le bouton CREER, au centre du dock, plus gros et vert */ .mb-dock-add{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; margin:0 6px;background:var(--green);color:#06230F; box-shadow:0 6px 18px -6px rgba(104,231,142,.6),inset 0 1px 0 rgba(255,255,255,.4); transition:filter var(--fast) var(--ease),transform var(--fast) var(--ease)} .mb-dock-add:hover{filter:brightness(1.08)} /* timeline un peu plus courte, colonne des noms geree en JS */ .mb .timeline{height:calc(100vh - 250px)} /* creation : feuille qui monte du bas */ .modal-wrap{align-items:flex-end;padding:0} .modal{width:100%;max-width:none;border-radius:var(--r-panel) var(--r-panel) 0 0; padding:var(--s5) var(--s5) calc(var(--safe-bottom) + var(--s5));animation:sheetUp 300ms var(--ease)} @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}} } /* ============================================================================ APPENDICE APPLICATION. La maquette ne connait ni connexion, ni page absente, ni etat vide: elle part d'un jeu de donnees toujours plein. Ces quelques regles comblent ce manque, et rien d'autre. Elles n'inventent pas de matiere: elles reutilisent `.glass`, `.btn-primary`, `.field` et les jetons deja poses plus haut. ========================================================================== */ /* --- pages hors coquille : connexion, page absente --- */ .solo{display:grid;place-items:center;min-height:100dvh;padding:var(--s6)} .solo-card{width:min(420px,100%);padding:var(--s7);display:flex;flex-direction:column; align-items:flex-start;gap:var(--s3)} .solo-card>*{position:relative;z-index:3} .solo-mark{display:flex;margin-bottom:var(--s3)} .solo-card h1{font-size:34px} .solo-form{display:flex;flex-direction:column;gap:var(--s4);width:100%;margin-top:var(--s5)} .solo-form .btn-primary{width:100%;margin-top:var(--s2)} .solo-error{display:flex;align-items:center;gap:var(--s2);padding:11px 14px;font-size:13px; border-radius:var(--r-tile);background:var(--red-soft);border:1px solid var(--red-line);color:var(--red)} .solo-foot{margin-top:var(--s6);font-size:12px;line-height:1.5;color:var(--ink-4)} /* --- etats vides : la maquette n'en a pas, une vraie base si --- */ .void{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--s3);padding:var(--s8) var(--s6);text-align:center} .void h3{font-size:20px} .void p{max-width:44ch;font-size:14px;color:var(--ink-3)} .void .btn-primary{margin-top:var(--s3)} /* --- repli sans JavaScript --- */ .noscript-note{max-width:520px;margin:18vh auto 0;padding:var(--s7);text-align:center} .noscript-note h1{font-size:34px;margin-bottom:var(--s3)} .noscript-note p{color:var(--ink-3)}