/* FameFrames - application. Identite reprise de la landing : metal liquide. Fond nuit graphite, metal violet (ombre violette, lumiere lavande, filet blanc), bouton principal en chrome. Geist partout : titres serres en 600, interface en 400-500 ; Geist Mono pour les chiffres et libelles techniques. L'espace de travail reste sobre. Couleurs de statut distinctes de l'accent, toujours doublees d'une icone. */ :root { --bg:#07060b; --surface:#0f0e17; --surface-2:#171523; --surface-3:#201d2f; --line:rgba(233,230,255,.13); --line-2:rgba(233,230,255,.26); --bord-champ:rgba(233,230,255,.46); /* bord des champs : 3:1 contre le fond, on voit ou taper */ /* Contraste AAA (7:1) sur tous les fonds, y compris une carte selectionnee (accent-soft sur surface-3). La hierarchie dim / faint passe par la taille et la graisse, plus par un gris trop sombre pour etre lu. */ --fg:#f5f3ff; --dim:#cfcce0; --faint:#c5c3d2; --accent:#d4c2ff; --accent-soft:rgba(205,184,255,.12); --grad:linear-gradient(100deg,#7a5cff 0%,#b7a2ff 34%,#f1ecff 50%,#9a7dff 66%,#5b3bf0 100%); /* Chrome : argent a reflet horizontal net, pour y poser du texte fonce en AAA. */ --grad-clair:linear-gradient(180deg,#ffffff 0%,#eeebf8 42%,#c9c3dd 58%,#f5f3fb 100%); --grad-texte:var(--grad); /* mots en degrade dans les titres */ --st-plan:#a4c7ff; --st-cours:#62d3f2; --st-ok:#53dd9c; --st-warn:#f6c055; --st-err:#ffb1b1; --st-off:#c5c3d3; /* Six teintes tirees du degrade du logo. Elles ne disent pas un etat (c'est le role des couleurs de statut) : elles donnent une identite a un domaine — le montage, les textes, les paroles — pour qu'on le reconnaisse avant de lire son titre. Chacune tient 7:1 sur les quatre fonds. */ --h-bleu:#8cb8ff; --h-cyan:#62d3f2; --h-menthe:#53dd9c; --h-violet:#c9b3ff; --h-rose:#f2a6e8; --h-ambre:#f6c055; /* Teinte du bloc courant : chaque module, chaque etape redefinit la sienne. */ --teinte:var(--accent); /* Bouton principal : la ou l'artiste doit cliquer, ca ne peut pas etre gris. */ --btn-fond:var(--grad-clair); --btn-texte:#0d0a22; --btn-lueur:rgba(110,80,255,.32); /* son halo, et la lumiere qui suit le curseur */ /* Titres : la meme grotesque que l'interface, serree et plus grasse. Le nom --serif est garde (il est partout dans les pages). */ --serif:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --brand:var(--serif); --sans:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono:"Geist Mono", ui-monospace, Consolas, monospace; --rayon:12px; /* Ce qui ne peut pas s'ecrire avec les tokens ci-dessus. */ --haut-fond:rgba(8,8,13,.86); /* barre du haut, translucide */ --principal-survol:#fff; /* bouton principal survole : il eclaircit */ --sur-plein:#0a0a12; /* texte pose SUR une couleur de statut pleine */ /* Trois halos derriere la page. Sur fond sombre ils EClaircissent : tres legers, sinon le texte pose dessus perdrait ses 7:1 (verifie les trois empiles au maximum). */ --voile-1:color-mix(in srgb, var(--h-violet) 6%, transparent); --voile-2:color-mix(in srgb, var(--h-cyan) 5%, transparent); --voile-3:color-mix(in srgb, var(--h-rose) 4%, transparent); --ombre:rgba(0,0,0,.45); --ombre-forte:rgba(0,0,0,.6); --alerte-plein:var(--st-warn); --alerte-plein-texte:var(--sur-plein); /* Matiere metal. Biseau : un reflet net en haut, une ombre en bas, comme une plaque usinee. Bord metal : chrome et violet qui tournent autour du bloc (pose en border-box sous une bordure transparente). Matiere : la lumiere du haut qui glisse sur la surface. */ --biseau:inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(0,0,0,.4); --bord-metal:linear-gradient(150deg, rgba(255,255,255,.26), rgba(150,120,255,.3) 28%, rgba(255,255,255,.05) 60%, rgba(150,120,255,.22)); --matiere:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 120px); /* Rubans de metal violet de la landing, figes en image, sous la page (leur luminance est plafonnee a la fabrication : les reflets blancs y sont lavande). Le voile garde le texte pose sur la page a 7:1 : au pire, le plus pale (--faint) sur le reflet le plus clair du bord droit fait 7,2:1. */ --fond-metal:url("/assets/img/fond-metal.webp"); --voile-metal:linear-gradient(90deg, rgba(7,6,11,.92) 0%, rgba(7,6,11,.82) 50%, rgba(7,6,11,.68) 100%); /* Ecran vide : le metal se montre davantage, sous un voile sombre. */ --vide-fond:linear-gradient(180deg, rgba(7,6,11,.5), rgba(7,6,11,.88) 75%), var(--fond-metal) 70% 35% / cover; --gravure:inset 0 1px 3px rgba(0,0,0,.45); /* champs et pistes creuses dans la matiere */ /* Pieces de metal : boutons, badges, etiquettes. Acier brosse = un haut, un bas, et une ligne de reflet a mi-hauteur ; au survol il se teinte de violet. Ce qui est choisi passe en metal violet (texte blanc, 7:1 sous les lettres). Relief : un filet clair dessus, une ombre dessous. */ --acier-haut:#2c2839; --acier-bas:#14121b; --relief:inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); --acier:linear-gradient(180deg, var(--acier-haut) 0%, color-mix(in srgb, var(--acier-haut) 55%, var(--acier-bas)) 47%, var(--acier-bas) 53%, color-mix(in srgb, var(--acier-haut) 70%, var(--acier-bas)) 100%); --acier-survol:linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--acier-haut)) 0%, color-mix(in srgb, var(--accent) 10%, var(--acier-haut)) 47%, color-mix(in srgb, var(--accent) 8%, var(--acier-bas)) 53%, color-mix(in srgb, var(--accent) 14%, var(--acier-haut)) 100%); --metal-violet:linear-gradient(180deg, #7d64f5 0%, #5434e0 40%, #3b1db8 54%, #5a3be6 100%); --bord-violet:linear-gradient(150deg, #efe9ff, #8f74ff 35%, #3d1fb8 70%, #c3b2ff); --relief-violet:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 10px rgba(90,60,230,.35); color-scheme:dark; } /* Theme clair. Memes tokens, memes regles : seules les valeurs changent, donc tout l'ecran suit. Contraste verifie a 7:1 (AAA) sur les quatre fonds, y compris une carte selectionnee. Les cadres video et la timeline restent sombres dans les deux themes : une image se juge sur du noir. Papier froid, a peine bleute : la marque est froide (bleu, violet, rose), un fond chaud la faisait jurer. Le violet reste l'accent, les cartes sont blanches et posees par une ombre froide ; l'encre est presque noire. */ :root[data-theme="clair"] { --bg:#f1f2f6; --surface:#ffffff; --surface-2:#f7f8fb; --surface-3:#ebedf3; --line:rgba(22,26,56,.11); --line-2:rgba(22,26,56,.22); --bord-champ:rgba(22,26,56,.42); --fg:#11121b; --dim:#363849; --faint:#3b3d4f; --accent:#3a1fae; --accent-soft:rgba(58,31,174,.09); /* Le degrade de marque ne change pas : il porte du texte fonce, ici comme la. */ --st-plan:#0f3a84; --st-cours:#06414f; --st-ok:#07472b; --st-warn:#573900; --st-err:#7c1111; --st-off:#413d57; --h-bleu:#0f3a84; --h-cyan:#06414f; --h-menthe:#07472b; --h-violet:#3d1fa4; --h-rose:#730f63; --h-ambre:#573900; /* Sur fond clair, l'argent ne ferait pas un bouton : metal violet fonce. */ --btn-fond:linear-gradient(180deg,#6d4cf2 0%,#4a26d0 45%,#2f1597 58%,#5a37e0 100%); --btn-texte:#ffffff; --btn-lueur:rgba(70,40,200,.28); --grad-texte:linear-gradient(100deg,#2c3aad 0%,#5522a8 50%,#7a1b80 100%); --haut-fond:rgba(250,251,253,.86); --principal-survol:#000; --sur-plein:#ffffff; /* Sur fond clair, les memes halos sont des pastels PLUS CLAIRS que la page : la couleur monte, la luminosite aussi, donc le contraste ne peut que s'ameliorer par rapport au fond nu. */ --voile-1:color-mix(in srgb, var(--h-violet) 7%, #f7f8fb); --voile-2:color-mix(in srgb, var(--h-cyan) 5%, #f7f8fb); --voile-3:color-mix(in srgb, var(--h-rose) 4%, #f7f8fb); --ombre:rgba(24,28,64,.08); --ombre-forte:rgba(24,28,64,.16); /* Metal clair : argent poli, le violet en filet. Les memes rubans, en argent et lavande sur le papier ; leur luminance a un plancher (fabrication) et le voile les eclaircit encore : le texte le plus pale garde 7:1. */ --biseau:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(22,26,56,.07); --bord-metal:linear-gradient(150deg, rgba(255,255,255,.95), rgba(90,60,220,.3) 28%, rgba(22,26,56,.14) 60%, rgba(90,60,220,.22)); --matiere:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 120px); --fond-metal:url("/assets/img/fond-metal-clair.webp"); --voile-metal:linear-gradient(90deg, rgba(241,242,246,.7) 0%, rgba(241,242,246,.45) 55%, rgba(241,242,246,.3) 100%); --vide-fond:linear-gradient(180deg, rgba(241,242,246,.35), rgba(241,242,246,.85) 75%), var(--fond-metal) 70% 35% / cover; --gravure:inset 0 1px 2px rgba(22,26,56,.12); --acier-haut:#ffffff; --acier-bas:#e6e8f0; --relief:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(22,26,56,.1), 0 1px 3px rgba(22,26,56,.1); /* Pastille pleine d'alerte : un ambre vif et un chiffre fonce. L'ambre assombri des textes (7:1 sur blanc) faisait une pastille brune. */ --alerte-plein:#f0b13c; --alerte-plein-texte:#1a1204; color-scheme:light; } * { box-sizing:border-box; } html { background:var(--bg); } body { margin:0; color:var(--fg); font:400 14.5px/1.55 var(--sans); -webkit-font-smoothing:antialiased; min-height:100vh; } /* Grain de pellicule, sur toute la page, les deux themes. Un bruit colore etire sur l'ecran (grain doux, pas du sable), a 2,5 % : on le sent plus qu'on ne le voit, et le texte garde son contraste. */ body::before { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); } @media print { body::before { display:none; } } /* Fond de page : les rubans de metal voiles, sur trois halos. En sombre les rubans (opaques) remplacent les halos ; en clair il n'y a pas de rubans et les halos restent. Un calque fixe a part : un fond "fixed" sur la page la ferait redessiner a chaque defilement. */ body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--voile-metal), var(--fond-metal) 100% 0 / cover no-repeat, radial-gradient(1200px 560px at 6% -12%, var(--voile-1), transparent 66%), radial-gradient(1000px 520px at 96% -6%, var(--voile-2), transparent 64%), radial-gradient(900px 600px at 80% 108%, var(--voile-3), transparent 62%); } @media print { body::after { display:none; } } a { color:var(--accent); text-underline-offset:3px; } button, input, select, textarea { font:inherit; color:inherit; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } ::selection { background:rgba(122,92,255,.45); } /* Barres de defilement fines, au metal violet. */ * { scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--accent) 38%, transparent) transparent; } [hidden] { display:none !important; } h1, h2, h3, h4 { margin:0; font-weight:600; letter-spacing:-.005em; text-wrap:balance; } /* Titre de bloc sous le titre de page : un h2 pour la structure, la taille d'un h3. */ h2.titre-bloc { font-size:1.17em; } /* Le contenu recoit le focus a chaque page (lecteurs d'ecran) : pas d'anneau sur un conteneur. */ #page:focus { outline:none; } /* tap-delay : pas d'attente du double-tap sur les commandes. */ a, button, label, summary, select, [role="button"] { touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* readable-font-size : sous 16 px, iOS zoome sur le champ touche. */ @media (max-width:760px) { input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea { font-size:16px; } } p { margin:0 0 10px; } code, .mono { font-family:var(--mono); font-size:max(12px, .9em); } small { font-size:max(12px, .85em); } /* jamais sous 12 px, meme dans un texte deja petit */ kbd { font:500 12px/1 var(--mono); background:var(--surface-2); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px; padding:2px 5px; color:var(--fg); } .dim { color:var(--dim); } .faint { color:var(--faint); } .petit { font-size:12.5px; } .degrade { background:var(--grad-texte); -webkit-background-clip:text; background-clip:text; color:transparent; } .saut { position:absolute; left:-999px; top:8px; background:var(--fg); color:var(--bg); padding:8px 12px; border-radius:8px; z-index:100; } .saut:focus { left:8px; } .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ------------------------------------------------------------ haut */ .haut { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:18px; height:58px; padding:0 20px; background:var(--matiere), var(--haut-fond); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid var(--line); box-shadow:var(--biseau); } /* Un fil de metal sous l'en-tete : violet, deux reflets presque blancs. Fixe : une boucle sans fin distrairait de tout le reste (WCAG 2.2.2). */ .haut::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; opacity:.85; background:linear-gradient(90deg, #5b3bf0, #9a7dff 18%, #f1ecff 26%, #7a5cff 40%, #5b3bf0 55%, #b7a2ff 72%, #f1ecff 80%, #7a5cff 92%, #5b3bf0); } .marque { display:flex; align-items:center; gap:9px; color:var(--fg); text-decoration:none; font:600 19px/1 var(--brand); letter-spacing:-.035em; } .marque-icone { width:26px; height:26px; } .nav { display:flex; gap:4px; margin-left:18px; } .nav a { display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:9px; color:var(--dim); text-decoration:none; font-weight:500; } .nav a svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .nav a:hover { color:var(--fg); background:var(--surface-2); } /* Page courante : une pastille de metal violet, eclairee par le haut. */ .nav a[aria-current="page"] { color:var(--fg); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--surface)), color-mix(in srgb, var(--accent) 9%, var(--surface))); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 4px 16px color-mix(in srgb, var(--accent) 18%, transparent); } .haut-fin { margin-left:auto; display:flex; align-items:center; gap:8px; } /* Largeurs moyennes : l'en-tete (marque, menu, boutons : ~910 px) debordait et donnait un ascenseur horizontal a toute la page. Le menu passe en icones (le nom reste lu par les lecteurs d'ecran) et la pastille des rendus garde son anneau. Sous 761 px, le menu est en bas de l'ecran. */ @media (min-width:761px) and (max-width:1160px) { .rendus-texte { display:none; } .rendus-bouton { padding:0 5px; } } @media (min-width:761px) and (max-width:1000px) { .nav { margin-left:6px; } .nav a { padding:8px 10px; } .nav a span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } } .icone-bouton { position:relative; display:inline-grid; place-items:center; width:36px; height:36px; border:1px solid transparent; border-radius:10px; background:var(--acier) padding-box, var(--bord-metal) border-box; color:var(--fg); cursor:pointer; box-shadow:var(--relief); transition:background .15s, transform .15s; } .icone-bouton:hover { background:var(--acier-survol) padding-box, var(--bord-violet) border-box; } .icone-bouton:active { transform:scale(.95); } .icone-bouton svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .badge-cloche { position:absolute; top:-7px; right:-8px; min-width:19px; height:19px; padding:0 5px; border-radius:99px; color:var(--alerte-plein-texte); font:700 11.5px/19px var(--sans); text-align:center; background:linear-gradient(180deg, color-mix(in srgb, var(--alerte-plein) 55%, #fff), var(--alerte-plein) 55%, color-mix(in srgb, var(--alerte-plein) 82%, #000)); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.45); } /* L'offre : une plaque de metal violet. */ .offre-pastille { font:600 12px/1 var(--sans); padding:7px 11px; border-radius:99px; text-decoration:none; white-space:nowrap; color:#fff; border:1px solid transparent; box-shadow:var(--relief-violet); background:var(--metal-violet) padding-box, var(--bord-violet) border-box; transition:filter .15s; } .offre-pastille:hover { filter:brightness(1.12); } /* Langue et theme : deux bascules, un clic chacune. Le bouton montre ce qu'on obtient en cliquant, pas ce qu'on a deja. */ .bascule-haut { display:grid; place-items:center; min-width:36px; min-height:32px; padding:6px 9px; border:1px solid transparent; border-radius:99px; color:var(--fg); box-shadow:var(--relief); background:var(--acier) padding-box, var(--bord-metal) border-box; font:600 12px/1 var(--sans); cursor:pointer; transition:background .15s; } .bascule-haut:hover { background:var(--acier-survol) padding-box, var(--bord-violet) border-box; } .bascule-haut:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .bascule-haut svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* Dans le sombre on propose la lumiere, et l'inverse. */ .bascule-haut .lune { display:none; } :root[data-theme="clair"] .bascule-haut .soleil { display:none; } :root[data-theme="clair"] .bascule-haut .lune { display:block; } /* Fuseau horaire : recherche par pays ou ville */ .champ-fuseau { position:relative; display:grid; gap:6px; } .champ-fuseau input { width:100%; } .fuseau-liste { position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; max-height:300px; overflow:auto; overscroll-behavior:contain; margin:0; padding:4px; list-style:none; border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2); box-shadow:0 18px 40px var(--ombre); } .fuseau-liste li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:8px 10px; border-radius:8px; cursor:pointer; } .fuseau-liste li b { color:var(--fg); font-weight:600; } .fuseau-liste li small { grid-column:1; color:var(--dim); font-size:12.5px; } .fuseau-liste li .fuseau-heure { grid-row:1 / span 2; grid-column:2; align-self:center; font:500 12px var(--mono); color:var(--dim); } .fuseau-liste li[aria-selected="true"], .fuseau-liste li:hover { background:var(--surface-3); } .fuseau-liste .fuseau-vide { display:block; cursor:default; color:var(--dim); } .fuseau-appareil { justify-self:start; } .bandeau-simulation { padding:7px 20px; font-size:12.5px; color:var(--dim); text-align:center; background:repeating-linear-gradient(135deg, rgba(246,192,85,.06) 0 12px, transparent 12px 24px); border-bottom:1px solid var(--line); } .bandeau-simulation b { color:var(--st-warn); font-weight:600; } main { max-width:1180px; margin:0 auto; padding:28px 20px 120px; outline:none; } /* ------------------------------------------------------ elements */ /* Boutons. Tous : une lumiere suit le curseur au survol (--mx, --my poses par core.js), le bouton s'enfonce au clic et une onde part du doigt (.onde-clic). Les boutons importants (principal, marque) sont en chrome : un reflet les traverse de temps en temps, meme sans y toucher. Animations reduites : rien ne bouge seul. */ .bouton { position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:8px 15px; border-radius:10px; border:1px solid transparent; background:var(--acier) padding-box, var(--bord-metal) border-box; box-shadow:var(--relief); color:var(--fg); font-weight:500; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .13s, border-color .13s, box-shadow .2s, transform .2s cubic-bezier(.2,.8,.2,1); } .bouton::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; pointer-events:none; background:radial-gradient(70px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%); transition:opacity .2s; } .bouton:hover:not(:disabled) { background:var(--acier-survol) padding-box, var(--bord-violet) border-box; color:var(--fg); } .bouton:hover:not(:disabled)::after { opacity:1; } .bouton:active:not(:disabled) { transform:scale(.97); transition-duration:.08s; } .bouton:disabled, .bouton[aria-disabled="true"] { opacity:.45; cursor:not-allowed; } .bouton.principal, .bouton.marque-bouton { background:var(--btn-fond); color:var(--btn-texte); border-color:transparent; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(40,20,120,.35), 0 6px 20px var(--btn-lueur); } .bouton.principal::before, .bouton.marque-bouton::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.9) 50%, rgba(170,150,255,.5) 54%, transparent 64%); transform:translateX(-130%); animation:reflet-bouton 6s cubic-bezier(.5,0,.3,1) infinite; } .bouton.principal::after, .bouton.marque-bouton::after { background:radial-gradient(80px circle at var(--mx, 50%) var(--my, 50%), var(--btn-lueur), transparent 70%); } .bouton.principal:hover:not(:disabled), .bouton.marque-bouton:hover:not(:disabled) { background:var(--btn-fond); color:var(--btn-texte); border-color:transparent; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(40,20,120,.35), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 30px var(--btn-lueur); } .bouton.principal:active:not(:disabled), .bouton.marque-bouton:active:not(:disabled) { transform:scale(.97); } .bouton:disabled::before, .bouton[aria-disabled="true"]::before { display:none; } /* rien ne brille sur un bouton inactif */ @keyframes reflet-bouton { 0%, 64% { transform:translateX(-130%); } 82%, 100% { transform:translateX(130%); } } .onde-clic { position:absolute; z-index:-1; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); animation:onde-clic .55s cubic-bezier(.2,.7,.3,1) forwards; } .bouton.principal .onde-clic, .bouton.marque-bouton .onde-clic, .action-forte .onde-clic { background:radial-gradient(circle, rgba(110,80,255,.55), transparent 70%); } @keyframes onde-clic { from { transform:scale(0); opacity:1; } to { transform:scale(16); opacity:0; } } @media (prefers-reduced-motion: reduce) { .bouton.principal::before, .bouton.marque-bouton::before { animation:none; } .bouton:active:not(:disabled), .bouton.principal:hover:not(:disabled), .bouton.marque-bouton:hover:not(:disabled) { transform:none; } .onde-clic { display:none; } } .bouton.danger { color:#fff; background:linear-gradient(180deg, #b23d4c 0%, #922838 47%, #781d2b 53%, #982e3e 100%) padding-box, linear-gradient(150deg, #ffb8c1, #8e2733 50%, #5c1520) border-box; } .bouton.danger:hover:not(:disabled) { color:#fff; background:linear-gradient(180deg, #c44a59 0%, #a5303f 47%, #8a2433 53%, #ab3646 100%) padding-box, linear-gradient(150deg, #ffc9d0, #a8303d 50%, #6a1825) border-box; } .bouton.fantome { background:transparent; border-color:transparent; color:var(--dim); box-shadow:none; } .bouton.fantome:hover:not(:disabled) { color:var(--fg); background:var(--acier) padding-box, var(--bord-metal) border-box; box-shadow:var(--relief); } .bouton.petit { min-height:30px; padding:5px 10px; font-size:13px; border-radius:8px; } .bouton.grand { min-height:48px; padding:12px 22px; font-size:15.5px; border-radius:12px; } .bouton .cle { font:500 12px/1 var(--mono); border:1px solid currentColor; border-radius:4px; padding:2px 4px; } label { display:grid; gap:5px; font-size:13px; color:var(--dim); } input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], input[type=url], select, textarea { width:100%; min-height:38px; padding:8px 11px; border-radius:9px; border:1px solid var(--bord-champ); background:var(--surface); color:var(--fg); font-size:14px; box-shadow:var(--gravure); transition:border-color .15s, box-shadow .2s; } textarea { min-height:84px; resize:vertical; line-height:1.5; } input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--gravure), 0 0 0 3px var(--accent-soft), 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent); } ::placeholder { color:var(--faint); opacity:1; } input[type=checkbox], input[type=radio] { accent-color:var(--accent); width:16px; height:16px; } /* Curseurs : une piste gravee, un bouton chrome cercle de violet. */ input[type=range] { -webkit-appearance:none; appearance:none; height:22px; margin:0; background:transparent; cursor:pointer; } input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:6px; box-shadow:var(--gravure); background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 34%, var(--surface-3)), var(--surface-3)); } input[type=range]::-moz-range-track { height:6px; border-radius:6px; box-shadow:var(--gravure); background:var(--surface-3); } input[type=range]::-moz-range-progress { height:6px; border-radius:6px; background:linear-gradient(90deg, #4b2ad6, #a58cff); } input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; margin-top:-5px; border:0; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffffff, #e2ddf2 42%, #8d86a8 100%); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent), 0 2px 6px rgba(0,0,0,.5); transition:transform .15s, box-shadow .15s; } input[type=range]::-moz-range-thumb { width:16px; height:16px; border:0; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffffff, #e2ddf2 42%, #8d86a8 100%); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent), 0 2px 6px rgba(0,0,0,.5); } input[type=range]:hover::-webkit-slider-thumb { box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 34%, transparent), 0 2px 8px rgba(0,0,0,.5); } input[type=range]:active::-webkit-slider-thumb { transform:scale(1.15); } input[type=range]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } input[type=range]:focus { box-shadow:none; } input[type=range]:disabled { opacity:.45; cursor:not-allowed; } input[type=color] { width:38px; height:28px; padding:0; border:0; background:transparent; cursor:pointer; } .coche { display:flex; align-items:center; gap:9px; color:var(--fg); font-size:14px; cursor:pointer; } .coche small { color:var(--dim); } .champs { display:grid; gap:14px; } .champs.deux { grid-template-columns:repeat(2, minmax(0,1fr)); } .aide { font-size:12.5px; color:var(--faint); } .bouton-info { width:24px; height:24px; padding:0; flex:none; border-radius:50%; border:1px solid transparent; box-shadow:var(--relief); background:var(--acier) padding-box, var(--bord-metal) border-box; color:var(--dim); font:600 12px/1 var(--sans); cursor:pointer; } .bouton-info:hover, .bouton-info[aria-expanded="true"] { color:var(--fg); background:var(--acier-survol) padding-box, var(--bord-violet) border-box; } .bulle { flex-basis:100%; display:block; padding:10px 12px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--dim); font-size:13px; line-height:1.5; } .compteur { margin-left:8px; font:500 12px var(--mono); color:var(--faint); text-align:right; } .compteur.trop { color:var(--st-err); } .carte { background:linear-gradient(180deg, color-mix(in srgb, var(--teinte) 6%, transparent), transparent 110px) padding-box, var(--matiere) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--bord-metal) border-box; border:1px solid transparent; border-radius:var(--rayon); padding:18px 20px; box-shadow:var(--biseau), 0 2px 8px var(--ombre); } .carte h2, .carte h3 { margin-bottom:10px; } .carte + .carte { margin-top:14px; } .pile { display:grid; gap:14px; } .ligne { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .ligne.entre { justify-content:space-between; } .espace { flex:1; } .grille { display:grid; gap:14px; } .grille.deux { grid-template-columns:repeat(2, minmax(0,1fr)); } .entete-page { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .entete-page h1 { font:600 clamp(28px, 3.4vw, 42px)/1.05 var(--serif); letter-spacing:-.04em; } .entete-page h1 em { font-style:normal; background:var(--grad-texte); -webkit-background-clip:text; background-clip:text; color:transparent; } .entete-page .sous { color:var(--dim); margin-top:6px; } .fil { font:500 12px/1.4 var(--mono); color:var(--faint); letter-spacing:.04em; margin-bottom:8px; } .fil a { color:var(--faint); text-decoration:none; display:inline-block; padding:5px 0; } .fil a:hover { color:var(--accent); } .titre-section { font:500 12.5px/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin:26px 0 10px; display:flex; align-items:center; gap:10px; } .titre-section::before { content:""; flex:none; width:16px; height:3px; border-radius:2px; background:var(--grad); } .titre-section::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line-2), transparent); } .onglets { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:-4px 0 22px; overflow-x:auto; } .onglets a, .onglets button { padding:10px 14px; color:var(--dim); text-decoration:none; background:none; border:0; border-bottom:2px solid transparent; font-weight:500; cursor:pointer; white-space:nowrap; } .onglets a:hover, .onglets button:hover { color:var(--fg); } .onglets [aria-current="page"], .onglets [aria-selected="true"] { color:var(--accent); border-bottom-width:2.5px; border-image:var(--grad) 1; } .onglets .nb { font:600 12px var(--sans); color:var(--faint); margin-left:5px; font-variant-numeric:tabular-nums; } /* ------------------------------------------------------ statuts */ /* Statut : l'icone porte la couleur, le mot reste neutre. Pas de capsule : une rangee de pilules colorees faisait un arc-en-ciel. */ .st { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; line-height:1; padding:2px 0; white-space:nowrap; color:var(--dim); font-weight:500; } .st i { color:var(--c); } .st i { font-style:normal; display:inline-grid; place-items:center; width:13px; height:13px; } .st.plan { --c:var(--st-plan); } .st.cours { --c:var(--st-cours); } .st.ok { --c:var(--st-ok); } .st.warn { --c:var(--st-warn); } .st.err { --c:var(--st-err); } .st.off { --c:var(--st-off); } .st.mini { font-size:12px; padding:1px 0; } .etiquette { display:inline-block; font:500 12px/1 var(--sans); padding:5px 8px; border-radius:7px; white-space:nowrap; border:1px solid transparent; background:var(--acier) padding-box, var(--bord-metal) border-box; box-shadow:var(--relief); color:var(--dim); font-variant-numeric:tabular-nums; } .etiquette.alerte { color:var(--st-warn); border-color:color-mix(in srgb, var(--st-warn) 45%, transparent); } /* ------------------------------------------------------- messages */ .note { border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; font-size:13.5px; color:var(--dim); } .note b { color:var(--fg); } .note.alerte { border-color:color-mix(in srgb, var(--st-warn) 40%, transparent); background:color-mix(in srgb, var(--st-warn) 7%, transparent); } .note.erreur { border-color:color-mix(in srgb, var(--st-err) 45%, transparent); background:color-mix(in srgb, var(--st-err) 8%, transparent); color:var(--st-err); } .note.ok { border-color:color-mix(in srgb, var(--st-ok) 40%, transparent); background:color-mix(in srgb, var(--st-ok) 7%, transparent); } .blocages { list-style:none; margin:0; padding:0; display:grid; gap:6px; } .blocages li { display:flex; gap:8px; font-size:13.5px; color:var(--st-warn); } .blocages li::before { content:"!"; font:600 12px/18px var(--mono); width:18px; height:18px; flex:none; text-align:center; border-radius:5px; background:color-mix(in srgb, var(--st-warn) 20%, transparent); color:var(--st-warn); } .vide { text-align:center; padding:56px 20px; border:1px solid var(--line); border-radius:16px; background:var(--vide-fond); box-shadow:var(--biseau); } .vide h2 { font:600 clamp(26px,3.2vw,38px)/1.1 var(--serif); letter-spacing:-.04em; margin-bottom:10px; } .vide h2 em { font-style:normal; background:var(--grad-texte); -webkit-background-clip:text; background-clip:text; color:transparent; } .vide p { color:var(--dim); max-width:52ch; margin:0 auto 18px; } /* Icones SVG (icones.js) : taille du texte, couleur du texte, alignees sur la ligne. */ .svg-ic { width:1.15em; height:1.15em; flex:none; vertical-align:-0.2em; } .svg-ic.ic-lg { width:34px; height:34px; } .legende-statuts { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:10px; } .telech-clip { display:grid; gap:8px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); } .st i .svg-ic, .notif .ic .svg-ic { width:100%; height:100%; vertical-align:0; } .etape-num .svg-ic, .coche-rush .svg-ic, .suivi-etapes .marque .svg-ic { width:60%; height:60%; } .logo .ic-logo { width:58%; height:58%; color:#fff; } .bande-clips i .svg-ic { width:11px; height:11px; } .note > .svg-ic:first-child { margin-right:2px; } .progres { height:6px; border-radius:4px; background:var(--surface-3); overflow:hidden; box-shadow:var(--gravure); } .progres i { display:block; height:100%; width:0; border-radius:inherit; background:var(--grad); transition:width .25s; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } .progres.indetermine i { width:35%; animation:glisse 1.3s ease-in-out infinite; } /* Avancement qui peut rester fige un moment (transcription) : des reflets courent sur la barre, on voit que ca travaille. */ .progres.vivant i { background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%) 0 0 / 200% 100%, var(--grad); animation:reflet 1.6s linear infinite; } @keyframes reflet { from { background-position:150% 0, 0 0; } to { background-position:-50% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .progres.vivant i { animation:none; } } /* Suivi d'un rendu : les etapes faites, celle en cours avec sa barre, celles a venir. */ .suivi-rendu { width:100%; max-width:340px; display:grid; gap:10px; text-align:left; } .suivi-etapes { list-style:none; margin:0; padding:0; display:grid; gap:10px; } .suivi-etapes li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start; font-size:14px; } .suivi-etapes .marque { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:600 12px var(--mono); border:1px solid var(--line-2); color:var(--dim); } .suivi-etapes li.fait { color:var(--dim); } .suivi-etapes li.fait .marque { background:var(--st-ok); border-color:var(--st-ok); color:var(--sur-plein); } .suivi-etapes li.avenir { color:var(--dim); } .suivi-etapes li.actif .marque { border-color:var(--h-cyan); color:var(--h-cyan); background:color-mix(in srgb, var(--h-cyan) 18%, transparent); } .suivi-etapes li.actif > div { display:grid; gap:6px; } .suivi-etapes li.actif small { color:var(--dim); line-height:1.4; } .suivi-etapes li > span:not(.marque) { padding-top:3px; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } @keyframes glisse { 0% { transform:translateX(-100%); } 100% { transform:translateX(286%); } } /* largeur 35 % : 100/35 */ .chargement { color:var(--faint); padding:40px 0; text-align:center; } /* ------------------------------------------------------ listes */ .liste { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--rayon); overflow:hidden; box-shadow:0 2px 8px var(--ombre); } .liste > * { background:var(--surface); padding:12px 16px; } .liste > a { color:inherit; text-decoration:none; display:block; transition:background .13s, box-shadow .13s; } .liste > a:hover { background:color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow:inset 3px 0 0 var(--accent); } .tableau { overflow-x:auto; border:1px solid var(--line); border-radius:var(--rayon); } table { width:100%; border-collapse:collapse; font-size:13.5px; } th { font:500 12px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--faint); text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); } td { padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; } tr:last-child td { border-bottom:0; } /* ----------------------------------------------------- cloche */ .panneau-cloche { position:fixed; z-index:40; top:62px; right:14px; width:min(420px, calc(100vw - 20px)); max-height:calc(100vh - 80px); overflow:auto; overscroll-behavior:contain; border:1px solid transparent; border-radius:16px; background:var(--matiere) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--bord-metal) border-box; box-shadow:var(--biseau), 0 24px 80px var(--ombre-forte); animation:surgit .18s cubic-bezier(.2,.8,.2,1); } .panneau-cloche header { position:sticky; top:0; display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface); z-index:1; } .panneau-cloche > :last-child { margin-bottom:12px; } .panneau-cloche .vide-notif { padding:0 16px 12px; margin:0; font-size:13.5px; color:var(--dim); } /* Rendus en cours : le bouton tourne tant que quelque chose tourne. */ /* Rendus en cours : une pastille d'acier au bord violet. Un anneau de progression violet entoure le clap et l'avancement s'ecrit en clair (« Rendu · 42 % ») ; sans pourcentage connu, l'arc tourne ; en attente, il reste eteint. */ .rendus-bouton { position:relative; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px 0 5px; border:1px solid transparent; border-radius:99px; color:var(--fg); cursor:pointer; font:600 12.5px/1 var(--sans); font-variant-numeric:tabular-nums; white-space:nowrap; background:var(--acier) padding-box, var(--bord-violet) border-box; box-shadow:var(--relief), 0 0 18px color-mix(in srgb, var(--accent) 20%, transparent); } .rendus-bouton:hover { background:var(--acier-survol) padding-box, var(--bord-violet) border-box; } .rendus-bouton:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .rendus-anneau { position:relative; display:grid; place-items:center; width:26px; height:26px; flex:none; } .rendus-anneau .anneau { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; } .rendus-anneau .piste { fill:none; stroke:color-mix(in srgb, var(--accent) 20%, transparent); stroke-width:3; } .rendus-anneau .arc { fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-dasharray:var(--pct, 0) 100; transition:stroke-dasharray .6s ease; filter:drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent)); } .rendus-anneau .clap { width:12px; height:12px; fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .rendus-bouton.indetermine .arc { stroke-dasharray:28 100; transition:none; } .rendus-bouton.indetermine .anneau { animation:tourne-anneau 1.1s linear infinite; } .rendus-bouton.attente .arc { stroke-dasharray:0 100; } .rendus-bouton.attente .rendus-texte { color:var(--dim); } @keyframes tourne-anneau { from { transform:rotate(-90deg); } to { transform:rotate(270deg); } } /* Arrivee d'un nouveau rendu : la pastille rebondit et une onde en part. */ .rendus-bouton.recoit { animation:rendu-recoit .6s cubic-bezier(.3,1.6,.5,1); } .rendus-bouton.recoit::after { content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; border:2px solid var(--accent); animation:rendu-onde .8s ease-out forwards; } @keyframes rendu-recoit { 35% { transform:scale(1.15); } } @keyframes rendu-onde { from { opacity:.9; transform:scale(1); } to { opacity:0; transform:scale(1.7, 2.1); } } /* L'envol : une bille de metal violet part du bouton qui a lance le rendu et file en arc jusqu'a la pastille, deux eclats la suivent (app.js, envol()). */ .envol-rendu, .envol-eclat { position:fixed; left:0; top:0; z-index:80; border-radius:50%; pointer-events:none; } .envol-rendu { display:grid; place-items:center; width:40px; height:40px; margin:-20px 0 0 -20px; color:#fff; background:radial-gradient(circle at 35% 30%, #ffffff, #b9a6ff 30%, #6243ea 62%, #2a1490); box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 0 26px 6px rgba(122,92,255,.55); } .envol-rendu svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .envol-eclat { width:14px; height:14px; margin:-7px 0 0 -7px; background:radial-gradient(circle, #fff, rgba(165,140,255,.8) 45%, transparent 70%); } @media (max-width:560px) { .rendus-texte { display:none; } .rendus-bouton { padding:0 5px; } } @media (prefers-reduced-motion: reduce) { .rendus-bouton.indetermine .anneau, .rendus-bouton.recoit, .rendus-bouton.recoit::after { animation:none; } } .rendu-ligne { display:grid; gap:6px; padding:12px 16px; border-top:1px solid var(--line); } .rendu-ligne .ligne { gap:8px; } .rendu-ligne b { font-size:13.5px; } .rendu-ligne .m { font:400 12px/1.5 var(--sans); color:var(--faint); margin:0; font-variant-numeric:tabular-nums; } .rendu-ligne .progres { height:6px; } .groupe-notif { font:600 13px/1 var(--sans); color:var(--dim); padding:16px 16px 8px; margin:0; } /* Chaque notification est une carte a part : marge autour, fond, bordure. Collees bord a bord, elles se lisaient comme un seul paragraphe. */ .notif { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; margin:0 12px 8px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--matiere), var(--surface-2); box-shadow:var(--biseau); } /* L'icone : une pastille d'acier emaillee de la couleur de la notification. */ .notif .ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font:600 12px/1 var(--sans); color:var(--c); box-shadow:var(--relief); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--acier-haut)), color-mix(in srgb, var(--c) 7%, var(--acier-bas))); } .notif.action { --c:var(--st-warn); } .notif.surveiller { --c:var(--st-plan); } .notif.info { --c:var(--st-ok); } /* Non lue : un temoin violet dans le coin, comme sur les cartes de sons ; le bord reste neutre (des bords jaunes en serie faisaient une alerte generale). */ .notif.non-lue::after { content:""; position:absolute; top:12px; right:12px; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, #a58cff 45%, #5b3bf0); box-shadow:0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); } .notif.non-lue .t { padding-right:14px; } .notif p { margin:0; font-size:13.5px; line-height:1.45; } .notif .t { font-weight:600; margin-bottom:2px; } .notif .m { font:400 12px/1.5 var(--sans); color:var(--faint); margin:0; font-variant-numeric:tabular-nums; } /* L'heure et le bouton sur la meme ligne : cinq notifications tiennent alors dans un panneau qu'on lit sans faire defiler. */ .notif-pied { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; } .notif-pied .bouton { margin-left:auto; } /* Le filtre « non lues » : bouton a bascule, plein quand il est actif. */ .bascule-filtre[aria-pressed="true"] { color:#fff; border-color:transparent; /* choisi : metal violet */ background:var(--metal-violet) padding-box, var(--bord-violet) border-box; box-shadow:var(--relief-violet); } .notif .actes { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } /* ----------------------------------------------------- modales */ .voile { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(3,3,8,.68); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .modale { width:min(520px, 100%); max-height:calc(100vh - 36px); overflow:auto; overscroll-behavior:contain; border:1px solid transparent; border-radius:16px; padding:22px 24px; background:var(--matiere) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--bord-metal) border-box; box-shadow:var(--biseau), 0 30px 90px var(--ombre-forte); animation:surgit .2s cubic-bezier(.2,.8,.2,1); } /* Une fenetre qui s'ouvre monte d'un rien : on voit d'ou vient le changement. */ @keyframes surgit { from { opacity:0; transform:translateY(8px) scale(.985); } } .modale.large { width:min(880px, 100%); } .modale h2 { font-size:18px; margin-bottom:8px; } .modale .corps { color:var(--dim); font-size:14px; } .modale .actes { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; flex-wrap:wrap; } .modale ul { padding-left:18px; } /* Ecran bloque pendant une action ou un rendu (voir bloquer() dans core.js) */ .blocage { position:fixed; inset:0; z-index:65; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(3,3,8,.6); pointer-events:none; } .blocage-boite { width:min(400px, 100%); display:grid; gap:10px; padding:18px 20px; border-radius:14px; border:1px solid transparent; background:var(--matiere) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--bord-metal) border-box; box-shadow:var(--biseau), 0 30px 90px var(--ombre-forte); } .blocage-boite .progres { height:8px; } .blocage-boite [data-contenu] { display:grid; gap:10px; } .blocage-action { justify-self:start; pointer-events:auto; cursor:pointer !important; } .blocage-action[data-confirmer] { background:#8e2733; border-color:#8e2733; color:#fff; } html.ecran-bloque, html.ecran-bloque * { cursor:progress !important; } .toasts { position:fixed; z-index:70; left:50%; bottom:22px; transform:translateX(-50%); display:grid; gap:8px; width:min(460px, calc(100vw - 24px)); pointer-events:none; } .toast { pointer-events:auto; padding:11px 15px; border-radius:11px; border:1px solid transparent; font-size:14px; background:var(--matiere) padding-box, linear-gradient(var(--surface-3), var(--surface-3)) padding-box, var(--bord-metal) border-box; box-shadow:var(--biseau), 0 14px 40px var(--ombre); animation:surgit .22s cubic-bezier(.2,.8,.2,1); } .toast.erreur { border-color:color-mix(in srgb, var(--st-err) 60%, transparent); color:var(--st-err); } .toast.ok { border-color:color-mix(in srgb, var(--st-ok) 55%, transparent); } /* ----------------------------------------------------- sorties */ .cartes-sorties { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); } /* Carte d'un son : son image (la couverture d'un clip, sinon un rush), le titre, l'etat en un mot avec son temoin, les chiffres, la date. Les actions (ranger, supprimer) n'apparaissent qu'au survol ou au clavier. */ .carte-sortie { position:relative; isolation:isolate; display:grid; grid-template-columns:72px minmax(0,1fr); gap:16px; align-items:start; padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--matiere), var(--surface); color:inherit; text-decoration:none; transition:opacity .15s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s; box-shadow:var(--biseau), 0 2px 8px var(--ombre); } .carte-sortie:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); transform:translateY(-2px); box-shadow:var(--biseau), 0 14px 34px var(--ombre); } .carte-visuel { display:grid; place-items:center; width:72px; height:96px; border-radius:10px; object-fit:cover; background:#0b0a12; color:var(--faint); box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.35); } .carte-visuel.vide { background:var(--acier); box-shadow:var(--relief), 0 0 0 1px var(--line); } .carte-visuel.vide svg { width:22px; height:22px; } .carte-corps { display:grid; gap:7px; min-width:0; align-content:start; } .carte-sortie h2 { font:600 19px/1.15 var(--serif); letter-spacing:-.03em; padding-right:30px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; } .carte-etat { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:13px; color:var(--dim); } .carte-sortie .chiffres { gap:4px 12px; font-size:13px; } .carte-sortie .chiffres .a-valider b { color:var(--st-warn); } .carte-modif { font-size:12px; color:var(--faint); } .carte-sortie-cadre { position:relative; display:grid; } /* Etat d'un son : un mot et un temoin (un vrai etat, pas une decoration). Brouillon : anneau eteint ; valide : vert ; publie : violet qui luit. */ .statut-son { display:inline-flex; align-items:center; gap:7px; font:600 13px/1 var(--sans); color:var(--fg); } .statut-son::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; } .statut-son.brouillon { color:var(--dim); } .statut-son.brouillon::before { box-shadow:inset 0 0 0 1.5px var(--faint); } .statut-son.valide::before { background:var(--st-ok); box-shadow:0 0 8px color-mix(in srgb, var(--st-ok) 60%, transparent); } .statut-son.publie::before { background:radial-gradient(circle at 35% 30%, #fff, #a58cff 45%, #5b3bf0); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); } .suppr-son, .ranger-son { position:absolute; top:10px; right:10px; z-index:2; width:28px; height:28px; padding:0; border-radius:8px; border:1px solid transparent; background:var(--acier) padding-box, var(--bord-metal) border-box; box-shadow:var(--relief); color:var(--dim); cursor:pointer; opacity:0; transition:opacity .15s, color .15s; } .carte-sortie-cadre:hover > button, .carte-sortie-cadre:focus-within > button { opacity:1; } @media (hover:none) { .suppr-son, .ranger-son { opacity:1; } } .suppr-son:hover { color:var(--st-err); } /* Ranger / sortir du dossier : a gauche de la croix, ou a sa place sur un son publie. */ .ranger-son { display:grid; place-items:center; right:44px; } .ranger-son:last-child { right:10px; } .ranger-son:hover { color:var(--accent); } .carte-sortie-cadre:has(.ranger-son + .suppr-son) .carte-sortie h2 { padding-right:62px; } .carte-sortie-cadre[draggable="true"] { cursor:grab; } /* Glisser un son vers un dossier : vignette sous le curseur, carte d'origine estompee, cibles qui appellent, bandeau d'aide, rebond du dossier qui recoit. */ .carte-sortie-cadre.glisse .carte-sortie { opacity:.35; border-style:dashed; border-color:var(--accent); transform:scale(.97); } .carte-sortie-cadre.glisse > button { visibility:hidden; } .fantome-son { position:fixed; top:-300px; left:-300px; z-index:100; display:flex; align-items:center; gap:10px; max-width:300px; padding:8px 16px 8px 8px; border:1px solid var(--accent); border-radius:12px; background:var(--surface-3); color:var(--fg); font:600 14px var(--sans); white-space:nowrap; box-shadow:0 14px 34px var(--ombre); } .fantome-son b { overflow:hidden; text-overflow:ellipsis; } .fantome-note { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:9px; background:var(--grad); color:#0d0a22; } .glisse-en-cours .carte-dossier, .glisse-en-cours [data-tous-sons] { outline:1.5px dashed var(--accent); outline-offset:-1px; animation:appel-depot 1.2s ease-in-out infinite; } @keyframes appel-depot { 50% { box-shadow:0 0 0 5px var(--accent-soft); } } .depose-ici { display:none; margin-left:auto; padding-left:8px; font:600 12px var(--sans); color:var(--accent); white-space:nowrap; } .carte-dossier.survol .depose-ici { display:inline; } .indice-glisser { position:fixed; left:50%; bottom:22px; z-index:60; transform:translateX(-50%); display:flex; align-items:center; max-width:calc(100vw - 32px); margin:0; padding:10px 16px; border:1px solid var(--accent); border-radius:12px; background:var(--surface-3); color:var(--fg); font-size:13.5px; box-shadow:0 12px 40px var(--ombre); pointer-events:none; } .carte-dossier.vient-de-recevoir { animation:recu-dossier .7s ease-out; } @keyframes recu-dossier { 35% { transform:scale(1.06); border-color:var(--st-ok); box-shadow:0 0 0 5px color-mix(in srgb, var(--st-ok) 25%, transparent); } } @media (prefers-reduced-motion: reduce) { .glisse-en-cours .carte-dossier, .glisse-en-cours [data-tous-sons], .carte-dossier.vient-de-recevoir { animation:none; } } /* Dossiers de sons (un seul niveau) */ .tes-sons-barre { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; margin-bottom:12px; } .tes-sons-actions { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; } .filtre-statut { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .filtre-statut .puce { --teinte:var(--accent); padding:5px 11px; cursor:pointer; } .filtre-statut .puce[data-statut="brouillon"] { --teinte:var(--h-bleu); } .filtre-statut .puce[data-statut="valide"] { --teinte:var(--st-ok); } .filtre-statut .puce[data-statut="publie"] { --teinte:var(--h-rose); } .filtre-statut .puce:hover { color:var(--teinte); border-color:color-mix(in srgb, var(--teinte) 50%, transparent); } /* Filtre actif : la couleur pleine. Un fond teinte sous un texte de la meme couleur perdrait le contraste, et se verrait moins. */ .filtre-statut .puce[aria-pressed="true"] { color:#fff; border-color:transparent; /* choisi : metal violet */ background:var(--metal-violet) padding-box, var(--bord-violet) border-box; box-shadow:var(--relief-violet); } .filtre-statut .puce[aria-pressed="true"] .nb { color:inherit; opacity:.75; } .filtre-statut .nb { font:600 12px var(--sans); color:var(--faint); margin-left:6px; font-variant-numeric:tabular-nums; } .fil-dossier { display:flex; align-items:center; gap:8px; min-width:0; font-size:15px; margin-bottom:12px; } .fil-dossier b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } [data-tous-sons].survol { outline:2px dashed var(--accent); outline-offset:2px; background:var(--accent-soft); color:var(--fg); } .cartes-dossiers { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin-bottom:14px; } .carte-dossier { position:relative; isolation:isolate; display:flex; align-items:center; gap:12px; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--matiere), var(--surface); color:var(--fg); font:inherit; text-align:left; cursor:pointer; box-shadow:var(--biseau); transition:border-color .15s, background .15s, transform .15s; } .carte-dossier:hover { border-color:color-mix(in srgb, var(--accent) 50%, transparent); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); } .carte-dossier.survol, .glisse-en-cours .carte-dossier.survol { border-color:var(--accent); background:var(--accent-soft); transform:scale(1.05); outline:2px solid var(--accent); box-shadow:0 0 0 6px var(--accent-soft); animation:none; } .carte-dossier[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); } .carte-dossier-cadre { position:relative; display:grid; min-width:0; } .carte-dossier-cadre .carte-dossier { padding-right:52px; } .suppr-dossier { top:50%; right:12px; transform:translateY(-50%); } .glisse-en-cours .suppr-dossier { visibility:hidden; } .carte-dossier-texte { display:grid; gap:2px; min-width:0; } .carte-dossier-texte b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dossier-icone { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:11px; background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--surface-3)), var(--surface-3) 60%); color:var(--accent); box-shadow:var(--biseau), inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } .dossier-icone.mini { width:28px; height:28px; border-radius:8px; } .dossier-icone.mini svg { width:16px; height:16px; } .choix-dossiers { display:grid; gap:8px; margin-top:10px; } label.recherche-sons { display:block; position:relative; flex:1 1 240px; max-width:380px; } .recherche-sons svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; } .recherche-sons input { width:100%; padding-left:36px; } .resultats-sons { margin:0 0 10px; } .etiquette-dossier { display:inline-flex; align-items:center; gap:5px; justify-self:start; font-size:12px; color:var(--accent); } .chiffres { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--dim); } .chiffres b { color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums; } .depot { border:1.5px dashed var(--line-2); border-radius:14px; padding:26px 20px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; background:var(--surface); } .depot:hover, .depot.survol { border-color:var(--accent); background:var(--accent-soft); } .depot b { display:block; font-size:15.5px; margin-bottom:4px; } .depot span { color:var(--dim); font-size:13px; } /* Etapes de la page d'un son : une ouverte a la fois, les validees repliees en une ligne, les suivantes grisees tant que la precedente n'est pas faite. */ .etapes-son { list-style:none; margin:0; padding:0; display:grid; gap:12px; } .etape { border:1px solid var(--line); border-radius:14px; background:var(--matiere), var(--surface); box-shadow:var(--biseau), 0 2px 8px var(--ombre); } /* Etapes et modules : une seule teinte, le metal violet (--teinte vaut --accent par defaut). Une couleur par module faisait un arc-en-ciel ; la couleur reste aux etats (fait, modifie, a appliquer). */ /* Etape ouverte : son bord de metal s'allume en violet (plus de bande sur le cote). */ .etape.ouverte { border-color:transparent; background:var(--matiere) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--bord-violet) border-box; box-shadow:var(--biseau), 0 12px 40px var(--ombre), 0 0 30px color-mix(in srgb, var(--accent) 10%, transparent); } /* Etape pas encore accessible : bordure pointillee et numero estompe, mais un texte qui reste lisible (plus d'opacite qui ferait tomber le contraste). */ .etape.verrouillee { border-style:dashed; background:transparent; } .etape.verrouillee .etape-num { border-style:dashed; } .etape.verrouillee .etape-tete h2 { color:var(--dim); font-weight:500; } .etape-tete { display:flex; align-items:center; gap:14px; padding:16px 20px; } .etape-tete h2 { font-size:16.5px; } .etape-num { width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; font:600 13px/1 var(--mono); border:1px solid var(--line-2); color:var(--dim); } .etape.ouverte .etape-num { border-color:var(--teinte); color:var(--teinte); background:radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--teinte) 32%, transparent), color-mix(in srgb, var(--teinte) 10%, transparent) 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 14px color-mix(in srgb, var(--teinte) 30%, transparent); } .etape.faite .etape-num { background:var(--st-ok); border-color:var(--st-ok); color:var(--sur-plein); } .etape-resume { margin:3px 0 0; color:var(--dim); font-size:13px; } /* Campagne : chaque etape porte son logo (plateformes) ou son icone, a cote du numero ; on voit de loin quelle appli on regle. */ .etape-badge { width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; color:var(--accent); border:1px solid transparent; box-shadow:var(--relief); background:var(--acier) padding-box, var(--bord-metal) border-box; } .etape-badge .svg-ic { width:20px; height:20px; } .etape.verrouillee .logo, .etape.verrouillee .etape-badge { opacity:.45; filter:grayscale(.6); } .aide.repris { display:flex; align-items:center; gap:6px; margin:0; color:var(--accent); } .aide.repris .svg-ic { width:14px; height:14px; flex:none; } .compte-ligne { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); } @media (max-width:560px) { .etapes-campagne .etape-tete .logo, .etapes-campagne .etape-badge { width:32px; height:32px; } } .etape-corps { display:grid; gap:16px; padding:0 20px 20px; } .etape-pied { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px; } .blocages:empty { display:none; } .question { margin:0; padding:16px 18px; border:1px solid var(--line-2); border-radius:12px; display:grid; gap:10px; } .question legend { padding:0 6px; font-size:15.5px; font-weight:600; color:var(--fg); } .question .aide { margin:0; } .bouton.choix { min-height:44px; } .bouton.choix[aria-pressed="true"] { color:#fff; border-color:transparent; /* choisi : metal violet */ background:var(--metal-violet) padding-box, var(--bord-violet) border-box; box-shadow:var(--relief-violet); } .etape-corps h3 { font-size:14px; margin-top:6px; } /* Details : le titre du son en grand */ /* Depot : zones de depot avec icone, carte du son */ .depots .depot { display:grid; justify-items:center; align-content:center; gap:4px; min-height:170px; background:var(--bg); } .depots .depot svg { color:var(--accent); margin-bottom:6px; } .depots .depot.occupe { opacity:.5; pointer-events:none; } .depot .formats { display:block; margin-top:6px; font:500 12px var(--mono); color:var(--faint); letter-spacing:.02em; } .son-carte { display:grid; gap:12px; } .son-entete { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2); } .son-icone { display:grid; place-items:center; width:54px; height:54px; border-radius:12px; background:var(--grad); color:#0d0a22; } .son-infos { display:grid; gap:7px; min-width:0; } .son-nom { font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .puces { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .puce { --teinte:var(--h-cyan); display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; background:linear-gradient(180deg, color-mix(in srgb, var(--teinte) 10%, var(--acier-haut)), color-mix(in srgb, var(--teinte) 4%, var(--acier-bas))); border:1px solid color-mix(in srgb, var(--teinte) 30%, var(--line-2)); box-shadow:var(--relief); color:var(--dim); font:500 12px/1.4 var(--sans); white-space:nowrap; font-variant-numeric:tabular-nums; } .puce.ia { --teinte:var(--accent); color:var(--accent); font-family:var(--sans); } .puce.manuel { --teinte:var(--st-ok); color:var(--st-ok); font-family:var(--sans); } .sous-bloc { display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); } .sous-bloc-tete { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .sous-bloc-tete b, .paroles-ferme b { font-size:14px; } .liste-parties { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .liste-parties li { display:grid; gap:10px; padding:8px 10px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); font-size:13.5px; transition:border-color .15s; } .liste-parties li.ouverte { border-color:var(--accent); } .ligne-partie { display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; } .partie-num { display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:8px; background:color-mix(in srgb, var(--h-cyan) 16%, transparent); border:1px solid color-mix(in srgb, var(--h-cyan) 32%, transparent); font:600 12px var(--mono); color:var(--h-cyan); } .bouton.plus { width:32px; min-height:32px; padding:0; font-size:18px; line-height:1; flex:none; } .reglage-partie { display:grid; gap:8px; } /* Action mise en avant : le geste que l'artiste doit (ou peut) faire ensuite. Fond clair et texte fonce (--grad-clair est fait pour ca), toute la largeur, titre et precision sur une seule ligne. Vaut pour un