/* Refonte PC de la page principale (maquette « Mise a jour », 12 oct. 2026) : PC seulement ; le telephone garde l affichage d avant jusqu a sa propre refonte. */ @media (min-width: 900px) { /* Maquette : la vraie page, seule la mise en page change. En-tete intact. */ :root { --large: 1240px; } /* 1. le fond : une lueur haute et un grain tres leger */ body { background: radial-gradient(1100px 480px at 50% -140px, rgba(255,255,255,.06), transparent 70%), var(--ink-0) !important; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* 2. le sous-en-tete devient un panneau borde, a la largeur de lecture */ #heroProgress { background: none; } #heroProgress > .hero-row { max-width: var(--large); margin: 22px auto 0; padding: 18px 26px 16px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--ink-4); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 50px -30px rgba(0,0,0,.85); } /* 3. la bibliotheque a la meme largeur : l oeil ne traverse plus tout l ecran */ #roadmap > .saga { max-width: var(--large); margin-left: auto; margin-right: auto; } #roadmap .saga-band { margin-top: 40px; } .maq-nav { position: fixed; z-index: 9999; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; background: var(--ink-2); border: 1px solid var(--ink-5); border-radius: 999px; font: 700 12px var(--font-ui, system-ui); } .maq-nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--text-dim); } .maq-nav a[aria-current] { background: var(--paper); color: var(--ink-0); } /* 4. des affiches a la mesure de la colonne : 6 a 8 par ligne au lieu de 3 */ #roadmap.roadmap, #roadmap.roadmap .card { --poster-w: 136px; } #roadmap.roadmap .card.card--dest { --poster-w: 168px; } #roadmap .phase-chain .card .aff-ruban, #roadmap .phase-chain .card .watch-row { zoom: 1.1; } /* 5. le prochain titre en grand, comme la premiere maquette (sur le vrai bouton) */ #heroProgress > .hero-row { isolation: isolate; overflow: hidden; } #heroProgress > .hero-row::before { content: ""; position: absolute; z-index: -1; left: -60px; top: -60px; width: 460px; height: 160%; background: var(--lueur, none) center / cover; filter: blur(55px) saturate(1.4); opacity: .45; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 85%); mask-image: linear-gradient(90deg, #000 30%, transparent 85%); } #heroProgress .hero-pied, #heroProgress .hero-paire { min-height: 112px; } #heroProgress .suivant { border: 0; padding: 0; gap: 18px; background: none; } #heroProgress .suivant:hover { background: none; } #heroProgress .suivant:hover .suivant-titre { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } #heroProgress .suivant-affiche { width: 72px; height: 108px; outline: 1px solid rgba(255,255,255,.12); } #heroProgress .suivant-titre { font-size: 30px; line-height: 1.1; font-stretch: 112%; letter-spacing: -.01em; margin: 2px 0 4px; } #heroProgress .suivant-meta { font-size: 13px; } #heroProgress .suivant { max-width: 36%; } #heroProgress .suivant-titre { white-space: normal; text-wrap: balance; } #heroProgress #progressPct { font-size: 40px; letter-spacing: .04em; } /* 6. le rail des routes : on saute d une route a l autre (construit par principale.js) */ .maq-rail { position: sticky; top: 49px; z-index: 30; max-width: var(--large); margin: 18px auto 0; padding: 10px 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(var(--ink-0) 75%, transparent); } .maq-rail button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ink-4); background: none; cursor: pointer; font: 600 13px var(--display, system-ui); color: var(--text-dim); transition: border-color .2s, color .2s; } .maq-rail i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); } .maq-rail button:hover { color: var(--text); border-color: var(--ink-6); } .maq-rail button[aria-current] { color: var(--paper); border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); } /* 7. le panneau facon « Ant-Man » : grand titre, grande affiche, grand pourcentage */ #heroProgress > .hero-row { padding: 26px 32px 14px; } #heroProgress .hero-pied, #heroProgress .hero-paire { min-height: 150px; } #heroProgress .suivant-affiche { width: 100px; height: 150px; } #heroProgress .suivant { max-width: 42%; gap: 26px; } #heroProgress .suivant-titre { font-size: 44px; line-height: 1; } #heroProgress .suivant-mot { font-size: 12px; } #heroProgress #progressPct { font-size: 60px; text-shadow: 0 6px 30px color-mix(in srgb, var(--route-accent) 45%, transparent); } #heroProgress .progress-cadre { margin-top: 18px; } /* le decompte sous un filet, comme une legende du panneau */ #heroProgress .hero-tete { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ink-4); } /* 8. les routes facon premiere maquette : titre a gauche, filet dessous, bande plus basse */ #roadmap .phase-heading, #roadmap .phase-heading .phase-fold { height: 76px; min-height: 0; } #roadmap .phase-fold-body { justify-content: flex-start; padding-left: 64px; } #roadmap .phase-reel { opacity: .55; } #roadmap .phase-header { border-bottom: 1px solid var(--ink-4); } #roadmap .phase-chain { padding-top: 10px; } #heroProgress .suivant { max-width: 40%; } #heroProgress #heroParcours, #heroProgress #devant { left: 64%; } #heroProgress .suivant { max-width: 46%; } #heroProgress .suivant-titre { font-size: 38px; } /* 9. Mise a jour : la ligne d infos et les actions d Ant-Man */ #heroProgress .suivant { align-self: start; } #heroProgress #suivantMeta { display: none; } .maq-infos { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--text-dim); } .maq-s { width: 8px; height: 8px; border-radius: 2px; /* un carre, comme toutes les legendes de statut (30 oct.) */ display: inline-block; } .maq-s-indispensable { background: var(--statut-requis, #FF5148); } .maq-s-recommande { background: var(--statut-suggere, #EFD34C); } .maq-s-bonus { background: var(--statut-optionnel, #6FA8FF); } .maq-actions { position: absolute; left: 126px; bottom: 0; display: flex; gap: 10px; } .maq-actions button { height: 36px; padding: 0 20px; border-radius: 999px; cursor: pointer; font: 800 13px var(--display, system-ui); letter-spacing: .04em; text-transform: uppercase; transition: background .2s, border-color .2s, color .2s; } .maq-vu { background: var(--paper); color: var(--ink-0); border: 0; } .maq-vu:hover { background: #fff; } .maq-fiche { background: transparent; color: var(--text-2); border: 1px solid var(--ink-6); } .maq-fiche:hover { border-color: var(--text-dim); color: var(--paper); } #heroProgress .hero-pied, #heroProgress .hero-paire { min-height: 172px; } #heroProgress .suivant-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } #heroProgress .suivant-mot { order: 0; } #heroProgress .suivant-titre { order: 1; } .maq-infos { order: 2; } #heroProgress .suivant-affiche { width: 114px; height: 171px; } .maq-actions { left: 140px; } #heroProgress .hero-paire { align-items: flex-start; } #heroProgress .suivant { margin-top: 0; align-items: start; } #heroProgress .suivant-texte { padding-top: 6px; } .maq-actions { bottom: auto; top: 128px; } .maq-actions { top: 142px; } /* 10. Colonne de droite facon Ant-Man : pourcentage, compteur, puis le temps et Complet / Express */ #heroProgress > .hero-row { position: relative; } #heroProgress #pctMenu { position: absolute; top: 26px; right: 32px; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } #heroProgress #pctMenu > #heroCompte { order: 1; border: 0; padding: 0; margin: 0; } #heroProgress #pctMenu > #pctMenuBtn { position: absolute; top: 4px; left: -30px; margin: 0; } #heroProgress #suiviCompteVal { font-size: 14px; font-weight: 600; color: var(--text-dim); letter-spacing: .02em; } #heroProgress #pctMenu #progressPct { font-size: 64px; line-height: .9; } #heroProgress .hero-paire #heroParcours { left: auto; right: 0; top: 112px; transform: none; } #heroProgress .hero-paire #devant { left: auto; right: 236px; top: 98px; transform: none; } /* Complet / Express : deux pieces qui s emboitent, coupees en diagonale */ #heroProgress .parcours-choix { gap: 0; width: auto; } #heroProgress .parcours-btn { height: 34px; padding: 0 22px; margin: 0; border: 0; border-radius: 0; background: var(--ink-1); color: var(--text-dim); box-shadow: none; font-weight: 800; letter-spacing: .04em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } #heroProgress .parcours-btn--express { margin-left: -8px; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); } #heroProgress .parcours-btn.is-on { background: var(--paper); color: var(--ink-0); } #heroProgress .parcours-btn--express.is-on { background: var(--express, var(--doom)); color: var(--ink-0); } #heroProgress .parcours-btn:not(.is-on):hover { color: var(--text); background: var(--ink-3); } #heroProgress #suiviCompteVal { font-size: 15px; font-stretch: 100%; font-variant-numeric: normal; letter-spacing: .01em; padding: 0 1px; } /* 11. Les menus ne sont plus coupes : la lueur se rogne elle-meme, pas le panneau */ #heroProgress > .hero-row { overflow: visible; } #heroProgress > .hero-row::before { left: 0; top: 0; width: 520px; height: 100%; clip-path: inset(0); background-size: 140% auto; } /* Le pourcentage facon Ant-Man : un affichage, plus un bouton */ #heroProgress #pctBtn { pointer-events: none; cursor: default; } #heroProgress #pctBtn .pct-chevron, #heroProgress #pctBtn svg { display: none; } #heroProgress #progressPct { font-weight: 700; letter-spacing: 0; color: var(--route-accent); text-shadow: 0 6px 30px color-mix(in srgb, var(--route-accent) 35%, transparent); } #heroProgress #progressPct .maq-signe { font-size: .5em; margin-left: 2px; } /* 12. Le pourcentage cale a droite sur le compteur ; le panneau (et ses menus) passe devant le rail */ #heroProgress #progressPct { text-align: right; min-width: 0; } #heroProgress #pctBtn { padding: 0; } #heroProgress { position: relative; z-index: 35; } /* 13. Barre fusionnee : la vraie barre, et dessous les routes d Ant-Man */ .maq-routes { list-style: none; display: flex; gap: 4px; margin: 10px 18px 0; padding: 0; } .maq-routes li { position: relative; min-width: 0; height: 3px; background: var(--ink-4); } .maq-routes i { position: absolute; inset: 0 auto 0 0; background: var(--acc); box-shadow: 0 0 10px -1px var(--acc); } .maq-routes span { position: absolute; top: 9px; left: 0; right: 30px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .maq-routes small { position: absolute; top: 9px; right: 0; font-size: 11px; font-weight: 700; color: var(--ink-7); font-variant-numeric: tabular-nums; } #heroProgress .hero-tete { margin-top: 34px; } /* 14. Decompte facon Ant-Man (a gauche, « dans », chiffres blancs) + centiemes */ #heroProgress #roadto { display: none; } #heroProgress .hero-tete { display: block; } .maq-dc { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--text-dim); } .maq-dc b { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .maq-dc-n { color: var(--text); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; } .maq-dc-n i { font-style: normal; font-weight: 600; font-size: 12px; color: var(--text-dim); margin: 0 1px; } .maq-dc-c { display: inline-block; min-width: 2ch; color: var(--text-dim); font-size: 13px; } .maq-routes { margin: 0 18px 30px; } #heroProgress .hero-tete { margin-top: 10px; padding-top: 0; border-top: 0; } .maq-dc { padding-top: 10px; border-top: 1px solid var(--ink-4); } /* 15. Routes sous la barre : nom entier, sur une ligne */ .maq-routes { gap: 10px; } .maq-routes li { height: auto; background: none; min-width: max-content; display: flex; flex-direction: column; gap: 7px; flex-basis: 0; } .maq-routes li::before { content: ""; height: 3px; background: var(--ink-4); } .maq-routes i { inset: 0 auto auto 0; height: 3px; } .maq-routes li > div { display: flex; align-items: baseline; gap: 8px; } .maq-routes span, .maq-routes small { position: static; overflow: visible; text-overflow: clip; } .maq-routes span { font-size: 12px; letter-spacing: .03em; text-transform: none; color: var(--text-2); } .maq-routes small { font-size: 12px; } /* 16. Le decompte redevient le vrai bouton (Doomsday / Secret Wars), facon Ant-Man, casse respectee */ #heroProgress #roadto { display: block; width: auto; margin: 0; padding-top: 10px; border-top: 1px solid var(--ink-4); } .maq-dc { display: none; } #heroProgress .hero-tete { display: block; } #heroProgress #roadtoBtn { justify-content: flex-start; width: auto; padding-left: 0; } #heroProgress .decompte-nom { text-transform: none; letter-spacing: .02em; font-size: 15px; } #heroProgress .decompte-titre::after { content: "dans"; margin: 0 10px; font-weight: 500; font-size: 14px; color: var(--text-dim); text-transform: none; letter-spacing: 0; } #heroProgress .decompte-chiffres .decompte-case { display: flex; } .maq-centi { font-size: 13px; color: var(--text-dim); min-width: 2ch; font-variant-numeric: tabular-nums; align-self: baseline; } /* 17. La barre des routes d Ant-Man remplace le rail de pastilles (collee sous l en-tete, cliquable) */ .maq-rail { display: none; } .maq-routes.maq-barre-routes { position: sticky; top: 49px; z-index: 30; max-width: var(--large); margin: 22px auto 0; padding: 12px 0 14px; gap: 4px; background: linear-gradient(var(--ink-0) 80%, transparent); } .maq-barre-routes li { cursor: pointer; gap: 8px; } .maq-barre-routes li::before { height: 8px; background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--ink-4); } .maq-barre-routes i { height: 8px; box-shadow: 0 0 14px -2px var(--acc); } .maq-barre-routes li > div { padding-right: 10px; } .maq-barre-routes span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); transition: color .2s; } .maq-barre-routes small { color: var(--ink-7); } .maq-barre-routes li:hover span, .maq-barre-routes li:focus-visible span { color: var(--acc); } .maq-barre-routes li:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; } .maq-routes.maq-barre-routes { top: 66px; } /* 18. RANGEMENT : le panneau devient une vraie grille, comme Ant-Man (on oublie les positions a la main) [affiche + titre + infos + actions] [pourcentage / compteur] [temps Complet|Express] [barre --------------------------------------------------------------] [decompte -----------------------------------------------------------] */ #heroProgress > .hero-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; grid-template-areas: "suivant pct" "suivant mode" "barre barre" "dc dc"; column-gap: 32px; row-gap: 0; align-items: start; } #heroProgress .hero-pied, #heroProgress .hero-paire, #heroProgress .progress { display: contents; } #heroProgress #suivant { grid-area: suivant; position: static; max-width: none; margin: 0; align-self: start; } #heroProgress .maq-actions { grid-area: suivant; position: static; align-self: end; justify-self: start; margin: 0 0 4px 140px; } #heroProgress #pctMenu { grid-area: pct; position: static; justify-self: end; align-self: start; } #heroProgress .hero-paire #heroParcours { grid-area: mode; position: static; transform: none; justify-self: end; align-self: end; margin: 14px 0 0; } #heroProgress .hero-paire #devant { grid-area: mode; position: static; transform: none; justify-self: end; align-self: end; margin: 0 236px 0 0; } #heroProgress .progress-cadre { grid-area: barre; margin-top: 26px; } #heroProgress .hero-tete { grid-area: dc; margin-top: 18px; } #heroProgress .paire-repere { display: none; } .maq-routes.maq-barre-routes { width: min(var(--large), 100% - 2px); box-sizing: border-box; } /* 19. Proposition barre : un rectangle arrondi, plus fin, sans routes dedans ; une tete lumineuse au bout */ #heroProgress .progress-cadre { position: relative; height: auto; } html.maq-barre-arrondie #heroProgress .progress-bar { clip-path: inset(0 round 999px); height: 16px; border-radius: 999px; } html.maq-barre-arrondie #heroProgress #progressFill { height: 16px; border-radius: 999px; } html.maq-barre-arrondie #heroProgress .progress-ticks { opacity: .35; } /* 20. Apercu des vues (donnees d exemple) : bascule dans la barre du bas */ .maq-vues { position: fixed; z-index: 9999; bottom: 58px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; background: var(--ink-2); border: 1px solid var(--ink-5); border-radius: 999px; font: 700 12px var(--display, system-ui); } .maq-vues span { padding: 6px 8px 6px 10px; color: var(--ink-7); } .maq-vues button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--text-dim); cursor: pointer; font: inherit; } .maq-vues button[aria-pressed="true"] { background: var(--paper); color: var(--ink-0); } /* teinte du panneau selon la vue */ html.maq-vue-duo #heroProgress > .hero-row { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px color-mix(in srgb, var(--maq-duo) 45%, transparent), 0 24px 50px -30px rgba(0,0,0,.85); } html.maq-vue-equipe #heroProgress > .hero-row { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px color-mix(in srgb, var(--maq-equipe) 45%, transparent), 0 24px 50px -30px rgba(0,0,0,.85); } :root { --maq-duo: #FF4D8D; --maq-equipe: #FFC531; --juste: #E8B04A; } /* qui est ou : des pastilles sur la barre */ .maq-reperes { position: absolute; inset: 0; pointer-events: none; } .maq-repere { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center; font: 800 11px var(--display, system-ui); color: var(--ink-0); background: var(--c); box-shadow: 0 0 0 2px var(--ink-2), 0 4px 12px -2px rgba(0,0,0,.8); } .maq-repere small { position: absolute; top: 30px; white-space: nowrap; font: 700 11px var(--display, system-ui); color: var(--text-dim); } /* les chiffres de la vue, sous le pourcentage */ .maq-qui { display: none; grid-area: pct; justify-self: end; align-self: end; margin-bottom: -2px; } html.maq-vue-duo .maq-qui, html.maq-vue-equipe .maq-qui { display: flex; gap: 14px; } .maq-qui div { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); } .maq-qui i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); } html.maq-vue-duo #heroProgress #pctMenu, html.maq-vue-equipe #heroProgress #pctMenu { margin-bottom: 30px; } .maq-ensemble { display: none; } html.maq-vue-duo .maq-ensemble, html.maq-vue-equipe .maq-ensemble { display: inline; color: var(--c-vue); } html.maq-vue-duo { --c-vue: var(--maq-duo); } html.maq-vue-equipe { --c-vue: var(--maq-equipe); } html.maq-vue-duo #heroProgress .hero-paire :is(#heroParcours, #devant), html.maq-vue-equipe #heroProgress .hero-paire :is(#heroParcours, #devant) { margin-top: 30px; } #heroProgress .maq-actions { align-self: start; margin-top: 128px; margin-bottom: 0; } /* 21. Barre verticale : une jauge debout a droite du panneau, la barre horizontale disparait */ .maq-jauge { display: none; } html.maq-barre-verticale .maq-jauge { display: block; position: absolute; top: 26px; bottom: 60px; right: -28px; width: 14px; border-radius: 999px; background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--ink-4); } html.maq-barre-verticale .maq-jauge i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; background: linear-gradient(0deg, color-mix(in srgb, var(--route-accent) 60%, transparent), var(--route-accent)); box-shadow: 0 0 16px -2px var(--route-accent); } html.maq-barre-verticale #heroProgress .progress-cadre { visibility: hidden; height: 0; margin: 0; } html.maq-barre-verticale .maq-reperes { display: none; } html.maq-barre-verticale .maq-jauge { right: 16px; top: 22px; bottom: 22px; width: 12px; } html.maq-barre-verticale #heroProgress > .hero-row { padding-right: 52px; } /* 22. Actions sans cadre : coche, croix, puis (i) Voir la fiche */ #heroProgress .maq-actions { gap: 4px; align-items: center; margin-left: 132px; } #heroProgress .maq-actions button { height: 34px; padding: 0 8px; border: 0; border-radius: 999px; background: none; display: inline-flex; align-items: center; gap: 7px; font: 600 14px var(--display, system-ui); letter-spacing: 0; text-transform: none; color: var(--text-dim); } #heroProgress .maq-actions svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #heroProgress .maq-vu, #heroProgress .maq-skip { width: 34px; justify-content: center; padding: 0; } #heroProgress .maq-vu:hover { color: var(--doom-soft, #6BF06B); background: none; } #heroProgress .maq-skip:hover { color: var(--text); background: none; } #heroProgress .maq-fiche { margin-left: 8px; } #heroProgress .maq-fiche:hover { color: var(--paper); background: none; border: 0; } #heroProgress .maq-fiche svg { width: 18px; height: 18px; } /* route cliquable dans la ligne d infos */ .maq-route { padding: 0; border: 0; background: none; font: inherit; color: var(--text-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--ink-6); text-underline-offset: 3px; } .maq-route:hover { color: var(--paper); text-decoration-color: currentColor; } /* les routes reviennent dans le panneau, sous la barre (comme Ant-Man) */ #heroProgress > .hero-row { grid-template-areas: "suivant pct" "suivant mode" "barre barre" "routes routes" "dc dc"; grid-template-rows: auto auto auto auto auto; } #heroProgress .maq-routes.maq-barre-routes { grid-area: routes; position: static; width: auto; max-width: none; margin: 18px 0 0; padding: 0; background: none; } #heroProgress .hero-tete { margin-top: 26px; } /* emblemes a la place des initiales */ .maq-repere svg { width: 15px; height: 15px; fill: none; stroke: currentColor; } .maq-qui i { display: grid; place-items: center; color: var(--ink-0); } .maq-qui i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; } html.maq-vue-duo #heroProgress .maq-routes.maq-barre-routes, html.maq-vue-equipe #heroProgress .maq-routes.maq-barre-routes { margin-top: 34px; } /* 23. Voir la fiche en tete, en contraste ; coche et croix ensuite */ #heroProgress .maq-fiche { order: -1; margin: 0 10px 0 0; padding: 0 14px 0 10px; color: var(--paper); font-weight: 700; background: color-mix(in srgb, var(--paper) 9%, transparent); } #heroProgress .maq-fiche:hover { background: color-mix(in srgb, var(--paper) 16%, transparent); } #heroProgress .maq-actions { margin-left: 140px; } /* 24. La roue crantee reste a cote du pourcentage ; le texte se centre sur l affiche (plus de vide dessous) */ #heroProgress #pctMenu { position: relative; } #heroProgress #pctMenu > #pctMenuBtn { top: 10px; left: -34px; } #heroProgress .suivant-texte { padding-top: 16px; } #heroProgress .maq-actions { margin-top: 116px; } #heroProgress .maq-routes.maq-barre-routes { flex-wrap: wrap; row-gap: 16px; } /* 25. Vu et Skip ecrits a cote des icones, meme contraste que Voir la fiche */ #heroProgress .maq-vu, #heroProgress .maq-skip { width: auto; padding: 0 14px 0 10px; gap: 6px; margin-right: 6px; color: var(--paper); font-weight: 700; background: color-mix(in srgb, var(--paper) 9%, transparent); } #heroProgress .maq-vu:hover { color: var(--doom-soft, #6BF06B); background: color-mix(in srgb, var(--paper) 16%, transparent); } #heroProgress .maq-skip:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 16%, transparent); } #heroProgress .maq-actions button.maq-fiche, #heroProgress .maq-actions button.maq-vu, #heroProgress .maq-actions button.maq-skip { color: var(--paper); font-weight: 700; background: color-mix(in srgb, var(--paper) 9%, transparent); } #heroProgress .maq-actions button.maq-vu:hover { color: var(--doom-soft, #6BF06B); } #heroProgress .maq-actions button:is(.maq-fiche, .maq-vu, .maq-skip):hover { background: color-mix(in srgb, var(--paper) 16%, transparent); } /* A — SALLE OBSCURE : l affiche du prochain titre eclaire tout le panneau, le reste se tait. */ #heroProgress > .hero-row { padding: 40px 44px 22px; min-height: 0; background: var(--ink-1); border-color: var(--ink-4); } #heroProgress > .hero-row::before { left: 0; top: 0; width: 100%; height: 100%; opacity: .55; filter: blur(46px) saturate(1.25) brightness(.8); background-size: cover; background-position: 30% 30%; -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.65) 45%, transparent 85%); mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.65) 45%, transparent 85%); } #heroProgress .suivant-affiche { width: 150px; height: 225px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.14); } /* PC seulement : pas d'ombre noire sur fond sombre, l'anneau reste ; mobile inchange */ @media (min-width: 900px) { #heroProgress .suivant-affiche { box-shadow: 0 0 0 1px rgba(255,255,255,.14); } } #heroProgress .suivant { gap: 36px; } #heroProgress .suivant-texte { padding-top: 34px; } #heroProgress .suivant-titre { font-size: 54px; line-height: .98; letter-spacing: -.015em; text-shadow: 0 2px 30px rgba(0,0,0,.6); } #heroProgress .suivant-mot { letter-spacing: .24em; color: color-mix(in srgb, var(--paper) 70%, transparent); } #heroProgress .maq-actions { margin-left: 186px; } #heroProgress #progressPct { font-size: 84px; } #heroProgress .progress-cadre { margin-top: 36px; } #heroProgress .hero-tete { margin-top: 14px; } #heroProgress #roadto { border-top: 0; padding-top: 0; } /* ---- A, deuxieme passe (retours du 7 oct.) ---- */ /* titre et description comme Ant-Man : pas de « Prochain », la ligne commence par « A voir ensuite » */ #heroProgress .suivant-mot { display: none; } #heroProgress .suivant-titre { font-size: clamp(36px, 3.4vw, 50px); line-height: 1.02; } #heroProgress .maq-infos::before { content: "À voir ensuite ·"; } #heroProgress .maq-infos { font-size: 15px; margin-top: 10px; } /* boutons sans fond ni contour */ #heroProgress .maq-actions button.maq-fiche, #heroProgress .maq-actions button.maq-vu, #heroProgress .maq-actions button.maq-skip, #heroProgress .maq-actions button:is(.maq-fiche, .maq-vu, .maq-skip):hover { background: none; border: 0; box-shadow: none; } #heroProgress .maq-actions button { padding: 0 14px 0 0; } #heroProgress .maq-actions button.maq-vu:hover { color: var(--doom-soft, #6BF06B); } #heroProgress .maq-actions button:is(.maq-fiche, .maq-skip):hover { text-decoration: underline; text-underline-offset: 4px; } /* colonne de droite resserree, comme avant : pourcentage, compteur, puis le temps et Complet / Express juste dessous */ #heroProgress > .hero-row { grid-template-rows: auto 1fr auto auto auto; } #heroProgress .hero-paire :is(#heroParcours, #devant) { align-self: start; margin-top: 18px; } #heroProgress #progressPct { font-size: 72px; } /* les routes d Ant-Man reviennent sous la barre */ #heroProgress .maq-routes { display: flex !important; } /* la tete lumineuse au bout de la barre */ .maq-tete { display: none; } #heroProgress .maq-tete { display: block; position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--paper) 0 18%, var(--route-accent) 42%, color-mix(in srgb, var(--route-accent) 30%, transparent) 70%, transparent 72%); box-shadow: 0 0 22px 4px color-mix(in srgb, var(--route-accent) 55%, transparent); } html:is(.maq-vue-duo, .maq-vue-equipe) #heroProgress .maq-tete { display: none; } /* en Duo, pas de « qui en est ou » */ html.maq-vue-duo .maq-reperes, html.maq-vue-duo .maq-qui { display: none !important; } html.maq-vue-duo #heroProgress .maq-tete { display: block; } /* MISE A JOUR — la seule version qui evolue (base : proposition A + tous les retours). */ /* plus de bascules Barre / Apercu : une seule version */ .maq-vues { display: none !important; } /* espacements serres, comme Ant-Man */ #heroProgress > .hero-row { padding: 18px 32px 22px; row-gap: 0; } #heroProgress .suivant-affiche { width: 112px; height: 168px; } #heroProgress .suivant { gap: 28px; align-self: start; } #heroProgress .suivant-texte { padding-top: 6px; } #heroProgress .suivant-titre { font-size: clamp(34px, 3vw, 44px); line-height: 1.02; margin: 4px 0 2px; } /* « A voir ensuite » au-dessus du titre ; la ligne d infos ne le repete plus */ #heroProgress .suivant-mot { display: block; font-size: 0; } #heroProgress .suivant-mot::before { content: "À voir ensuite"; font-size: 12px; letter-spacing: .14em; color: var(--text-dim); } #heroProgress .suivant-mot > * { display: none; } #heroProgress .maq-infos::before { content: none; } #heroProgress .maq-infos { font-size: 14px; margin-top: 6px; } #heroProgress .maq-actions { margin-left: 140px; } #heroProgress #progressPct { font-size: 64px; } #heroProgress .hero-paire :is(#heroParcours, #devant) { margin-top: 12px; } #heroProgress .progress-cadre { margin-top: 24px; } #heroProgress .maq-routes.maq-barre-routes { margin-top: 14px; } #heroProgress .hero-tete { margin-top: 18px; } #heroProgress #roadto { border-top: 1px solid var(--ink-4); padding-top: 12px; } /* l arrondi a gauche : un noeud de depart rond qui deborde un peu de la barre */ .maq-depart { display: none; } #heroProgress .maq-depart { display: block; position: absolute; left: -4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(circle, var(--ink-0) 0 32%, var(--route-accent) 36% 52%, color-mix(in srgb, var(--route-accent) 25%, transparent) 56%, transparent 72%); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--route-accent) 45%, transparent); } #heroProgress #pctMenu { top: 0; } /* le site decale ce bloc vers le bas */ /* Barre : demi-cercle a gauche, pointe a droite. Le rond lumineux part. */ #heroProgress .maq-depart { display: none; } #heroProgress .progress-bar { border-radius: 999px 0 0 999px; clip-path: polygon(0 0, calc(100% - var(--bar-tip)) 0, 100% 50%, calc(100% - var(--bar-tip)) 100%, 0 100%); } /* Vu / Skip : le choix reste affiche, l autre disparait, « Prochain » passe au suivant. Seul le symbole est colore (vert / rouge), au repos, au survol et une fois choisi ; le texte reste blanc. */ #heroProgress .maq-actions button.maq-prochain { display: none; order: 9; color: var(--paper); } #heroProgress .maq-actions[data-choix] button.maq-prochain { display: inline-flex; align-items: center; gap: 6px; } #heroProgress .maq-actions[data-choix="vu"] button.maq-skip, #heroProgress .maq-actions[data-choix="skip"] button.maq-vu { display: none; } #heroProgress .maq-actions button:is(.maq-vu, .maq-skip), #heroProgress .maq-actions button:is(.maq-vu, .maq-skip):hover { color: var(--paper); text-decoration: none; } #heroProgress .maq-actions button.maq-vu svg { color: var(--doom-soft, #6BF06B); } #heroProgress .maq-actions button.maq-skip svg { color: #FF5A5A; } #heroProgress .maq-actions button:is(.maq-vu, .maq-skip, .maq-prochain):hover svg { filter: drop-shadow(0 0 6px currentColor); } #heroProgress .maq-actions .maq-prochain svg { width: 18px; height: 18px; } /* Effet au clic : le bouton s enfonce, le symbole lance une onde */ #heroProgress .maq-actions button, #heroProgress .maq-fleches button { transition: transform .12s ease; } #heroProgress :is(.maq-actions, .maq-fleches) button:active { transform: scale(.92); } #heroProgress :is(.maq-actions, .maq-fleches) button.maq-clic svg { animation: maq-onde .45s ease-out; } @keyframes maq-onde { 0% { filter: drop-shadow(0 0 0 currentColor); transform: scale(1); } 35% { filter: drop-shadow(0 0 10px currentColor); transform: scale(1.25); } 100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); } } /* Precedent / suivant : deux chevrons discrets, a cote de « A voir ensuite » */ #heroProgress .suivant-texte { position: relative; } #heroProgress .maq-fleches { position: absolute; right: 0; top: 0; display: flex; gap: 2px; z-index: 2; } #heroProgress .maq-fleches button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-dim); cursor: pointer; } #heroProgress .maq-fleches button:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 10%, transparent); } #heroProgress .maq-fleches svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #heroProgress .maq-fleches[data-ailleurs="1"] ~ .suivant-mot::before { content: "Aperçu · hors de votre suite"; color: var(--paper); } /* La note confirmee, dans la meme fenetre */ .maq-confirme { display: none; } #noterPop.maq-confirmee .maq-confirme { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 14px; } #noterPop.maq-confirmee :is(.noter-texte, .noter-score) { display: none; } .maq-confirme b { display: inline-flex; align-items: center; gap: 6px; color: var(--paper); font-size: 16px; } .maq-confirme span { color: var(--text-dim); } .maq-confirme svg { width: 18px; height: 18px; fill: none; stroke: var(--doom-soft, #6BF06B); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .maq-confirme button { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink-0); font: 700 13px var(--display, system-ui); cursor: pointer; } .maq-confirme button svg { stroke: currentColor; } /* Trois lignes : la fiche ; Vu / Skip ; Precedent (rien de choisi) ou Prochain (un choix fait) */ #heroProgress .maq-actions { display: grid; grid-template-columns: auto auto 1fr; justify-items: start; row-gap: 6px; } #heroProgress .maq-actions button.maq-fiche { grid-column: 1 / -1; order: 0; } #heroProgress .maq-actions button.maq-vu { order: 1; } #heroProgress .maq-actions button.maq-skip { order: 2; } /* Fenetre de note : « Prochain » sans cadre, en jaune */ .maq-confirme button { padding: 4px 0; background: none; color: #FFC531; font-size: 15px; } .maq-confirme button:hover { text-decoration: underline; text-underline-offset: 4px; } /* Barre : bout gauche droit, et un demi-disque a l exterieur, centre, moins haut que la barre */ #heroProgress .progress-bar { border-radius: 0; clip-path: polygon(0 0, calc(100% - var(--bar-tip)) 0, 100% 50%, calc(100% - var(--bar-tip)) 100%, 0 100%); } #heroProgress .progress-cadre { position: relative; } /* Le demi-disque fait partie de la barre : une seule forme, un seul contour (le filet du cadre la suit) */ #heroProgress .progress-cadre .progress-bar { clip-path: polygon( 10px 0, calc(100% - var(--bar-tip)) 0, 100% 50%, calc(100% - var(--bar-tip)) 100%, 10px 100%, 10px calc(50% + 10px), 7.41px calc(50% + 9.66px), 5px calc(50% + 8.66px), 2.93px calc(50% + 7.07px), 1.34px calc(50% + 5px), .34px calc(50% + 2.59px), 0 50%, .34px calc(50% - 2.59px), 1.34px calc(50% - 5px), 2.93px calc(50% - 7.07px), 5px calc(50% - 8.66px), 7.41px calc(50% - 9.66px), 10px calc(50% - 10px)); } #heroProgress .progress-cadre .maq-depart { display: none; } #heroProgress .maq-depart { display: block; position: absolute; left: -10px; top: 50%; width: 10px; height: 20px; margin: -10px 0 0; border-radius: 20px 0 0 20px; background: var(--route-accent); box-shadow: none; pointer-events: none; } /* Decompte dans l en-tete, a cote de la recherche */ #topbar .roadto.maq-rt-tete { display: flex !important; align-items: center; margin: 0 0 0 14px; padding: 0; border: 0; width: auto; position: relative; } #topbar .maq-rt-tete .roadto-btn { width: auto; padding: 4px 10px; gap: 6px; border: 1px solid var(--ink-4); border-radius: 999px; background: none; font-size: 12px; white-space: nowrap; } #topbar .maq-rt-tete .roadto-btn:hover { border-color: var(--ink-6, #555); } #topbar .maq-rt-tete .roadto-pop { top: calc(100% + 8px); left: 0; } #topbar .maq-rt-tete .roadto-btn { font-size: 11px; padding: 3px 9px; } #topbar .maq-rt-tete :is(.decompte, .decompte *) { font-size: 11px !important; letter-spacing: .02em; text-transform: none; } #topbar .maq-rt-tete .decompte-titre::after { content: none; } /* Le bloc suit l affiche (comme Ant-Man) : « A voir » en haut, titre, infos, puis les actions calees en bas */ #heroProgress .suivant-mot { display: none; } #heroProgress .suivant { display: flex; align-items: stretch; } #heroProgress .suivant-affiche { flex: none; width: 136px; height: 204px; } #heroProgress .suivant-texte > .maq-actions { row-gap: 2px; } #heroProgress .suivant-texte { display: flex; flex-direction: column; align-items: flex-start; padding-top: 0; min-height: 0; } #heroProgress .suivant-texte > .maq-avoir { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); } #heroProgress .suivant-texte > * { flex: none; } #heroProgress .suivant-texte > .maq-avoir { order: -1; } #heroProgress .suivant-texte > .maq-actions { order: 9; margin: auto 0 0 !important; } /* Fiche ; Vu / Skip ; Precedent ou Prochain : tous en blanc */ #heroProgress .maq-actions .maq-fleches { display: flex; position: static; grid-column: 1 / -1; order: 3; } #heroProgress .maq-fleches button:is(.maq-prec, .maq-prochain) { width: auto; height: auto; padding: 0 14px 0 0; border: 0; border-radius: 0; background: none; color: var(--paper); font: inherit; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } #heroProgress .maq-fleches button:is(.maq-prec, .maq-prochain):hover { background: none; text-decoration: underline; text-underline-offset: 4px; } #heroProgress .maq-fleches button[hidden] { display: none; } #heroProgress .maq-fleches button.maq-prochain { display: none; } #heroProgress .maq-fleches[data-choix] button.maq-prochain { display: inline-flex; } #heroProgress .maq-fleches[data-choix] button.maq-prec { display: none; } .maq-confirme button { color: var(--paper); } /* survoler une action ne souligne plus le titre (le survol du bloc-bouton #suivant) */ #heroProgress #suivant:has(.maq-actions:hover) .suivant-titre { text-decoration: none; } #heroProgress #suivant:has(.maq-actions:hover) .suivant-affiche { transform: none; filter: none; } /* Fleches discretes, blanches attenuees ; « A voir » en gris clair */ #heroProgress .maq-fleches button:is(.maq-prec, .maq-prochain) { color: #CFCFCF; font-size: 13px; } #heroProgress .maq-fleches button:is(.maq-prec, .maq-prochain) svg { color: currentColor; width: 14px; height: 14px; } #heroProgress .maq-fleches button:is(.maq-prec, .maq-prochain):hover { color: var(--paper); } #heroProgress .suivant-texte > .maq-avoir { color: #B4B4B4; } /* Seuls l affiche, le titre et les commandes reagissent : plus de survol fantome dans les blancs */ #heroProgress #suivant { pointer-events: none; } #heroProgress #suivant :is(.suivant-affiche, .suivant-titre, .maq-infos, .maq-actions) { pointer-events: auto; } #heroProgress #suivant .suivant-titre { text-decoration: none; } #heroProgress #suivant:has(.suivant-titre:hover, .suivant-affiche:hover) .suivant-titre { text-decoration: underline; text-underline-offset: 6px; } #heroProgress #suivant:has(.maq-infos:hover) .suivant-titre { text-decoration: none; } /* La fiche passe dans la ligne d infos : le bloc redevient compact, affiche 112 x 168 */ #heroProgress .maq-infos .maq-fiche { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; padding: 0; border: 0; background: none; color: var(--paper); font: inherit; font-weight: 700; cursor: pointer; } #heroProgress .maq-infos .maq-fiche svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; } #heroProgress .maq-infos .maq-fiche:hover { text-decoration: underline; text-underline-offset: 4px; } #heroProgress .suivant-affiche { width: 112px; height: 168px; } /* Colonne de droite : tout cale sur le bout de la barre */ #heroProgress #pctMenu { margin-right: -32px; } /* Colonne de droite comme Ant-Man : % en haut, compteur dessous, le mode cale en bas avec l affiche */ /* un seul groupe serre (%, compteur, mode), centre en hauteur sur l affiche, comme Ant-Man */ #heroProgress > .hero-row { grid-template-areas: "suivant ." "suivant pct" "suivant mode" "suivant ." "barre barre" "routes routes" "dc dc"; grid-template-rows: 1fr auto auto 1fr auto auto auto; } #heroProgress #pctMenu { align-self: end; } #heroProgress .hero-paire :is(#heroParcours, #devant) { align-self: start; margin-top: 14px; } /* « J ai devant moi » : un bloc (icone + 5 h) centre sur la meme ligne que Complet / Express */ #heroProgress .hero-paire #devant { margin-bottom: 0; } /* le groupe doit tenir dans la hauteur de l affiche : l horloge passe a cote de « 5 h », meme hauteur que Complet / Express */ #heroProgress .hero-paire :is(#heroParcours, #devant) { margin-top: 10px; } #heroProgress #devantBtn { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 34px !important; min-height: 0 !important; padding: 0 10px 0 0; } #heroProgress #devantBtn > * { margin: 0 !important; } #heroProgress #devantBtn svg { width: 20px; height: 20px; } /* Complet / Express : textes centres dans leur piece (la coupe mange 12 px d un cote), jamais souligne */ #heroProgress .parcours-btn { min-width: 118px; justify-content: center; text-align: center; text-decoration: none !important; } #heroProgress .parcours-btn:not(.parcours-btn--express) { padding: 0 28px 0 18px; } #heroProgress .parcours-btn--express { padding: 0 18px 0 28px; } #heroProgress .parcours-btn * { text-decoration: none !important; } /* La roue crantee descend au-dessus du bout droit de la barre */ #heroProgress #pctMenu { margin-right: -32px; } /* Precedent / Prochain : le mot en blanc franc, la fleche aussi */ #heroProgress .maq-fleches button:is(.maq-prec, .maq-prochain) { color: var(--paper); font-weight: 700; } /* Une seule ligne : « <- Precedent v Vu x Skip Prochain -> » (Prochain apres un choix) */ #heroProgress .suivant-texte > .maq-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0; } #heroProgress .maq-actions .maq-fleches { display: contents; } #heroProgress .maq-actions button.maq-prec { order: 0; margin-right: 10px; } #heroProgress .maq-actions button.maq-vu { order: 1; } #heroProgress .maq-actions button.maq-skip { order: 2; } #heroProgress .maq-actions button.maq-prochain { order: 3; margin-left: 10px; } #heroProgress .maq-fleches[data-choix] button.maq-prec { display: inline-flex; } /* Complet / Express : un peu plus serres, toujours de meme largeur */ #heroProgress .parcours-btn { min-width: 104px; } #heroProgress .parcours-btn:not(.parcours-btn--express) { padding: 0 22px 0 14px; } #heroProgress .parcours-btn--express { padding: 0 14px 0 22px; } /* Decompte de l en-tete : les chiffres seuls, sans contour, centiemes bien visibles */ #topbar .maq-rt-tete .decompte-titre { display: none; } #topbar .maq-rt-tete .roadto-btn { border: 0; padding: 0 4px; background: none; } #topbar .maq-rt-tete :is(.decompte, .decompte *) { font-size: 14px !important; } #topbar .maq-rt-tete .decompte-unite { font-size: 10px !important; color: var(--text-dim); margin: 0 4px 0 1px; } #topbar .maq-rt-tete .maq-centi { color: var(--route-accent); min-width: 2ch; } /* Plus de blanc entre les infos et la ligne Precedent / Vu / Skip */ #heroProgress .suivant-texte > .maq-actions { margin: 14px 0 0 !important; } #heroProgress .suivant-texte { justify-content: center; } /* Le decompte n est plus un bouton : il suit tout seul le prochain film a sortir */ #topbar .maq-rt-tete .roadto-btn { pointer-events: none; cursor: default; } #topbar .maq-rt-tete .roadto-chevron { display: none; } /* Affiches a venir : le meme decompte vivant */ .card-countdown.maq-dc-carte { font-variant-numeric: tabular-nums; white-space: nowrap; } .card-countdown.maq-dc-carte i { font-style: normal; font-size: .75em; opacity: .7; margin: 0 2px 0 1px; } .card-countdown.maq-dc-carte .maq-centi { font-weight: inherit; color: var(--route-accent); font-size: 1em; } /* La barre de progression en bas de l en-tete : fine, pleine largeur, meme matiere (nappes, lueur, tete) */ #topbar .progress-cadre.maq-barre-tete { position: absolute; left: 0; right: 0; top: 100%; height: 8px; margin: 0; padding: 0; display: block; z-index: 5; pointer-events: none; filter: drop-shadow(0 0 1px color-mix(in srgb, var(--route-accent) 70%, transparent)); } #topbar .maq-barre-tete .progress-bar { height: 8px !important; --bar-h: 8px; clip-path: none !important; border-radius: 0; } #topbar .maq-barre-tete .progress-ticks { display: none; } #topbar .maq-barre-tete .maq-depart { display: none; } #topbar .maq-barre-tete .maq-tete { display: block; position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--paper) 0 18%, var(--route-accent) 42%, transparent 72%); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--route-accent) 55%, transparent); } #heroProgress .maq-routes.maq-barre-routes { margin-top: 22px; } /* La synchro dans le pied de page : « (fleche) Progression synchronisee a 16:17 », l heure en contraste */ .site-footer .sync-pied.maq-sync-pied { display: flex !important; justify-content: center; padding: 10px 0 4px; } .maq-sync-pied .syncnow { display: flex !important; position: static; margin: 0; } .maq-sync-pied .syncnow-btn { display: inline-flex; align-items: center; gap: 8px; height: auto; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--text-dim); font-size: 13px; cursor: pointer; clip-path: none; box-shadow: none; } .maq-sync-pied .syncnow-btn:hover { color: var(--text); background: color-mix(in srgb, var(--paper) 8%, transparent); } .maq-sync-pied .syncnow-btn svg { width: 16px; height: 16px; color: var(--paper); } .maq-sync-pied .syncnow-when { display: inline-flex; gap: 4px; font: inherit; } .maq-sync-pied .syncnow-when:has(.syncnow-time:not([hidden])) .syncnow-word { display: none; } .maq-sync-pied .syncnow-time::before { content: "Progression synchronisée à "; color: var(--text-dim); font-weight: 400; } .maq-sync-pied .syncnow-time { color: var(--paper); font-weight: 700; font-size: inherit; } /* Etiquette vide = pas d etiquette (le titre remonte) */ #heroProgress .suivant-texte > .maq-avoir:empty { display: none; } /* La progression suit le contour du bas de l en-tete, languette comprise (remplace la bande pleine largeur) */ #heroProgress .progress-cadre { display: none; } /* (barre dans l en-tete mise de cote : la languette garde son contour d origine) */ /* Compteur : plus de filet devant, les nombres en contraste */ #heroProgress #heroCompte, #heroProgress #heroCompte::before { border: 0 !important; box-shadow: none !important; } #heroProgress #heroCompte::before, #heroProgress #suiviCompte::before { content: none !important; display: none !important; } #heroProgress #suiviCompteVal b { color: var(--paper); font-weight: 800; } #topbar .maq-contour { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 6; } .maq-contour path { fill: none; stroke-width: 3; stroke-linejoin: round; } .maq-contour-lit { stroke: var(--ink-4, #2a2a30); } .maq-contour-fait { stroke: var(--route-accent); filter: drop-shadow(0 0 4px var(--route-accent)); transition: stroke-dasharray .6s ease; } .maq-contour-tete { fill: var(--paper); filter: drop-shadow(0 0 6px var(--route-accent)) drop-shadow(0 0 2px var(--route-accent)); } /* Bas de l en-tete en UNE piece : les deux anciennes pieces s effacent (gardees calculees : on y lit couleur et mesures), le trace unique les remplace */ html.maq-contour-unique #topbar::after { visibility: hidden; } html.maq-contour-unique #topbar .languette::before { visibility: hidden; } #topbar .maq-contour { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 10; } .maq-contour-trait { fill: none; stroke-linejoin: miter; } /* Relief : plus de filet gris droit (il ne suivait pas la languette) ; une ombre douce SOUS le trace, qui la suit */ html.maq-contour-unique #topbar { box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .9); } .maq-contour-ombre { fill: none; stroke: #000; opacity: .55; transform: translateY(2px); filter: blur(1.5px); } /* Progression : le lit (reste a faire) en couleur de route attenuee, le fait plein et lumineux, une tete au bout */ .maq-contour-trait { opacity: .28; } .maq-contour-fait { fill: none; filter: drop-shadow(0 0 3px var(--maq-route)); transition: stroke-dasharray .6s ease; } .maq-contour-tete { fill: var(--paper); filter: drop-shadow(0 0 4px var(--maq-route)) drop-shadow(0 0 1px var(--maq-route)); transition: cx .6s ease, cy .6s ease; } /* Solo / Duo / Equipe : le mot choisi changeait de taille d un coup, la languette s elargissait ensuite en 0,25 s, donc le mot debordait du cadre pendant ce temps (« ca casse puis ca s agrandit »). Desormais c est le MOT qui grandit en douceur, et la languette le suit image par image (le site la mesure a chaque changement). */ #topbar #routeSlotTete .route-opt { transition: color .16s, background-color .16s, font-size 0s; } /* lineaire : plus de rebond entre Solo / Duo / Equipe */ #topbar .languette { transition: none; } @media (prefers-reduced-motion: reduce) { #topbar #routeSlotTete .route-opt { transition: none; } } /* Message informatif au changement de parcours, juste sous la languette */ .maq-parcours-msg { position: absolute; left: 50%; top: calc(100% + 26px); transform: translate(-50%, -6px); z-index: 11; padding: 7px 14px; border-radius: 999px; background: var(--ink-2, #16161a); border: 1px solid color-mix(in srgb, var(--maq-route, var(--route-accent)) 45%, transparent); color: var(--text-dim); font-size: 13px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; } .maq-parcours-msg b { color: var(--paper); } .maq-parcours-msg.est-la { opacity: 1; transform: translate(-50%, 0); } /* Message de parcours : rectangulaire, sans contour, plus grand */ .maq-parcours-msg { border: 0; border-radius: 4px; padding: 9px 18px; font-size: 16px; background: color-mix(in srgb, var(--ink-0, #0b0b0e) 88%, transparent); box-shadow: 0 10px 24px -10px rgba(0,0,0,.9); } .maq-parcours-msg b { color: var(--maq-route, var(--route-accent)); font-weight: 800; } /* Changement de parcours : le mot choisi « claque » et s illumine, le contour pulse une fois */ #topbar.maq-bascule #routeSlotTete .route-opt[aria-pressed="true"] { animation: maq-claque .25s linear; } @keyframes maq-claque { 0% { transform: scale(.82); text-shadow: 0 0 0 transparent; } 45% { transform: scale(1.1); color: var(--paper); text-shadow: 0 0 18px rgba(255, 255, 255, .55); } /* neutre : jamais la couleur de la barre sur un mot d une autre couleur */ 100% { transform: scale(1); text-shadow: 0 0 0 transparent; } } #topbar.maq-bascule .maq-contour-trait { animation: maq-pulse .7s ease-out; } @keyframes maq-pulse { 0% { opacity: .28; } 30% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45)); } 100% { opacity: .28; } } @media (prefers-reduced-motion: reduce) { #topbar.maq-bascule * { animation: none !important; } } /* Barre « magie » : le fait garde sa couleur, une energie claire coule dessus en boucle */ .maq-flux-a { stop-color: var(--maq-route, #00c400); stop-opacity: 0; } .maq-flux-b { stop-color: #fff; stop-opacity: .85; } .maq-contour-flux { fill: none; mix-blend-mode: screen; transition: stroke-dasharray .6s ease; } @media (prefers-reduced-motion: reduce) { .maq-contour-flux { display: none; } } /* Crans tous les 20 % : eteints devant, allumes une fois passes */ .maq-cran { fill: var(--ink-0, #0b0b0e); stroke: var(--maq-route); stroke-width: 1.4; opacity: .55; } .maq-cran.est-passe { fill: var(--maq-route); opacity: 1; filter: drop-shadow(0 0 3px var(--maq-route)); } /* Message : ni fond ni cadre ; la phrase en blanc contraste, seul le nom de la route prend sa couleur */ .maq-parcours-msg { background: none; box-shadow: none; padding: 4px 0; color: var(--paper); font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.9); } /* Le mot actif prend la couleur de SA route : Solo, Duo, Equipe ne se confondent plus au clic */ #topbar #routeSlotTete .route-opt[aria-pressed="true"] { color: var(--maq-route, var(--route-accent)); } /* Bas d en-tete plus imposant, en relief : ombre dessous, reflet clair sur l arete du haut */ .maq-contour-reflet { fill: none; stroke: #fff; opacity: .28; transform: translateY(-2.4px); } .maq-contour-ombre { transform: translateY(3px); opacity: .7; filter: blur(2px); } .maq-cran { r: 3; } #topbar #routeSlotTete .route-opt { display: inline-flex; align-items: center; gap: .25em; } #topbar .maq-route-ico { display: inline-flex; width: .8em; height: .8em; } #topbar .maq-route-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; } /* Silhouettes AU-DESSUS du mot : le mot reste centre, la languette garde son ajustement automatique */ #topbar #routeSlotTete .route-opt { flex-direction: column; justify-content: center; gap: 1px; line-height: 1; } #topbar .maq-route-ico { width: 12px; height: 12px; } /* Effet au clic adouci */ @keyframes maq-claque { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } } /* fondu lineaire : ni rebond ni lueur coloree */ @keyframes maq-pulse { 0% { opacity: .28; } 35% { opacity: .6; } 100% { opacity: .28; } } /* Silhouettes : 16 px (12 etait trop petit), un peu plus fines pour ne pas peser */ #topbar .maq-route-ico { width: 16px; height: 16px; } #topbar .maq-route-ico svg { stroke-width: 1.8; } #topbar #routeSlotTete .route-opt { gap: 4px; } /* un souffle entre la silhouette et le mot */ #topbar #routeSlotTete .route-opt { gap: 0; line-height: 1.15; } #topbar #routeSlotTete .route-opt[aria-pressed="true"] .maq-route-ico { margin-bottom: 6px; } /* le grand mot (et son accent) deborde de sa ligne : on ecarte la silhouette */ #topbar #routeSlotTete .route-opt { line-height: 1; } #topbar #routeSlotTete .route-opt[aria-pressed="true"] .maq-route-ico { margin-bottom: 7px; } #topbar #routeSlotTete .route-opt[aria-pressed="true"] { transform: translateY(6px); } /* le grand mot descend dans le creux de la languette : la silhouette garde sa place en haut */ /* correctif : plus de decalage par transform (il sautait a la fin de l animation du clic, ~1 s apres) ; le grand mot passe a 28 px pour que silhouette + mot tiennent dans la languette, centres */ #topbar #routeSlotTete .route-opt[aria-pressed="true"] { transform: none; font-size: 28px !important; } #topbar #routeSlotTete .route-opt[aria-pressed="true"] .maq-route-ico { margin-bottom: 4px; } /* En-tete plus haut (PC) : le grand mot de la languette ne chevauche plus le contour ; tout suit (--head-h est mesuree) */ @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { padding-bottom: 14px; } } /* Les elements de la bande grandissent avec elle : le site a UNE echelle (--tete-ech, V441) ; on la monte au lieu d ajouter du vide. Le rembourrage ajoute plus haut est annule. */ @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { padding-bottom: 0; --tete-ech: 1.3; } } @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { padding-bottom: 8px; } } /* 1,3 x les elements + un souffle sous eux : le grand mot reste au-dessus du contour */ @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { padding-bottom: 18px; } } @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { padding: 11px 0 12px; } } /* rembourrage egal haut / bas : les elements restent centres dans la bande plus haute */ /* Grandir le CONTENU, pas seulement les boites : --tete-ech ne grossissait que les pastilles (texte, logo, icones restaient petits). On remet l echelle a 1 et on agrandit chaque groupe en entier (zoom), sauf Solo / Duo / Equipe. */ @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { --tete-ech: 1; } #topbar .topbar-inner > :is(.langue--coin, .tabs, .search, .identity) { zoom: 1.3; } } @media (min-width: 900px) { #topbar .topbar-inner > :is(.langue--coin, .tabs, .search, .identity) { zoom: 1.15; } } /* centre visuel = milieu entre le haut de l ecran et le MILIEU du contour (pas le bas de la boite) : +2 px en haut */ @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { padding: 13px 0 10px; } } /* Solo / Duo / Equipe centre sur la meme ligne mediane que le reste (le site le descendait de 7 px) */ @media (min-width: 900px) { #topbar .topbar-inner #routeSlotTete { transform: translate(-50%, calc(-50% + 1.5px)) scale(1.2); } } @media (min-width: 900px) { #topbar .topbar-inner #routeSlotTete { transform: translate(-50%, calc(-50% + var(--maq-slot-y, 1.5px))) scale(1.38); } } /* 1,2 x 1,15 */ @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { padding: 17px 0 14px; } } /* +8 px pour Solo / Duo / Equipe agrandis */ #topbar #routeSlotTete .route-switch { align-items: center; } /* chaque parcours (silhouette + mot) centre sur la ligne mediane, petits comme grand */ /* Le reste a faire en gris fonce : seule la partie remplie porte la couleur de route */ .maq-contour-trait { stroke: #2a2a31 !important; opacity: 1; } @keyframes maq-pulse { 0%, 100% { stroke: #2a2a31; } 35% { stroke: #4a4a55; } } .maq-cran { stroke: #4a4a55; fill: #16161a; opacity: 1; } /* Le pourcentage au bout de la barre */ .maq-contour-pct { fill: var(--paper); font: 800 12px var(--display, system-ui); letter-spacing: .02em; paint-order: stroke; stroke: rgba(0,0,0,.85); stroke-width: 3px; } /* plus de mini-languette de synchro sous le profil (la synchro vit dans le pied de page) ; plus de % au bout de la barre */ #topbar #syncTete { display: none !important; } .maq-contour-pct { display: none; } /* En-tete un peu plus serre ; la silhouette du parcours actif descend vers son mot */ @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { padding: 15px 0 12px; } } #topbar #routeSlotTete .route-opt[aria-pressed="true"] .maq-route-ico { margin-bottom: 0; } /* Plus d etiquette au-dessus du titre (Commencer par / Visionne / ...) : l etat se lit deja sur Vu / Skip */ #heroProgress .suivant-texte > .maq-avoir { display: none !important; } /* La barre repond tout de suite quand on coche */ .maq-contour-fait, .maq-contour-flux { transition: stroke-dasharray .2s ease-out; } .maq-contour-tete { transition: cx .2s ease-out, cy .2s ease-out; } /* Synchro : une phrase, puis la fleche seule comme bouton (ni fond ni cadre), qui s eclaire et tourne au survol */ .maq-sync-pied .syncnow-btn { flex-direction: row-reverse; pointer-events: none; background: none !important; padding: 0; } .maq-sync-pied .syncnow-btn svg { pointer-events: auto; cursor: pointer; color: var(--text-dim); transition: color .15s, transform .4s; } .maq-sync-pied .syncnow-btn svg:hover { color: var(--paper); transform: rotate(180deg); } .maq-sync-pied .syncnow-btn:hover { background: none; color: var(--text-dim); } /* Le decompte au bout de la barre, a droite, sous le contour : le film au-dessus, les chiffres dessous */ #topbar .roadto.maq-rt-bout { position: absolute; right: 18px; top: calc(100% + 10px); display: flex !important; margin: 0; z-index: 12; } #topbar .maq-rt-bout .roadto-btn { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 0; border: 0; background: none; pointer-events: none; } #topbar .maq-rt-bout .decompte { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } #topbar .maq-rt-bout .decompte-titre { display: block !important; } #topbar .maq-rt-bout .decompte-titre .decompte-road { display: none; } #topbar .maq-rt-bout .decompte-nom { font: 800 11px var(--display, system-ui) !important; letter-spacing: .12em; text-transform: uppercase !important; color: var(--maq-route); } #topbar .maq-rt-bout :is(.decompte-chiffres, .decompte-chiffres *) { font-size: 15px !important; text-shadow: 0 1px 6px rgba(0,0,0,.9); } #topbar .maq-rt-bout .roadto-chevron { display: none; } /* Le statut : un bouton nu (ni fleche, ni fond, ni cadre) qui ouvre la legende du site */ #heroProgress .maq-infos .maq-statut { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } #heroProgress .maq-infos .maq-statut:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; } /* Le nom du film du decompte : casse normale, gris discret */ #topbar .maq-rt-bout .decompte-nom { text-transform: none !important; letter-spacing: .02em; font: 600 12px var(--body, system-ui) !important; color: var(--text-dim) !important; } /* La silhouette du parcours choisi descend encore tres legerement */ #topbar #routeSlotTete .route-opt[aria-pressed="true"] .maq-route-ico { transform: translateY(2px); } /* La fleche de synchro en blanc contraste */ .maq-sync-pied .syncnow-btn svg { color: var(--paper); } /* Profil : pas de fond au survol ni a l ouverture, seul le contenu s eclaire */ #topbar .topbar-inner .profile-id, #topbar .topbar-inner .profile-id:is(:hover, :focus-visible, [aria-expanded="true"]) { background: none !important; box-shadow: none !important; } #topbar .topbar-inner .profile-id:is(:hover, [aria-expanded="true"]) :is(.profile-name, #profileIdName) { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; } /* Superpositions : la barre et le decompte passent SOUS les menus de l en-tete */ #topbar .maq-contour { z-index: 3; } #topbar .roadto.maq-rt-bout { z-index: 3; } #topbar :is(.fmenu-pop, .langue-pop, .profile-pop, .notif-pop) { z-index: 60 !important; } #topbar .topbar-inner > .identity { z-index: 5; } /* le menu du profil vit dans ce bloc : il doit passer AU-DESSUS de la barre et du decompte (z 3) */ /* Le film du decompte et ses centiemes : un degrade de la teinte du film (vert Doomsday) vers le gris */ #topbar .maq-rt-bout :is(.decompte-nom, .maq-centi) { background: linear-gradient(90deg, var(--maq-dest, var(--maq-route)), #8a8a93); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; } #topbar .maq-rt-bout .decompte-nom { font-weight: 700 !important; } /* Solo / Duo / Equipe descend un peu dans la languette (sans toucher le contour) */ @media (min-width: 900px) { #topbar .topbar-inner #routeSlotTete { --maq-slot-y: 4px; } } @media (min-width: 900px) { #topbar .topbar-inner #routeSlotTete { --maq-slot-y: 11px; } } /* le bloc descend dans le creux de la languette pour la remplir */ /* Roue crantee : plus de cadre ni de fond sur les boutons ; « Couleur par defaut » reste un bouton (texte) */ #pctMenuPop #duoColorDefaut { border: 0 !important; background: none !important; box-shadow: none !important; color: var(--paper); font-weight: 700; padding: 4px 0; } #pctMenuPop #duoColorDefaut:hover { text-decoration: underline; text-underline-offset: 4px; } /* titres plus lisibles : contraste et un cran plus grands */ #pctMenuPop :is(#pctMenuTitre, #pctMenuFormeTitre) { font-size: 12.5px; color: var(--paper); } #pctMenuPop .couleurs-avancees-tete { color: var(--paper) !important; font-size: 13.5px; font-weight: 700; } /* Le nom du film : une fusion qui ondule lentement entre sa teinte et le gris (au lieu d un degrade fige) */ #topbar .maq-rt-bout :is(.decompte-nom, .maq-centi) { background: linear-gradient(90deg, var(--maq-dest, var(--maq-route)), #8a8a93, var(--maq-dest, var(--maq-route))); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: maq-fusion 6s ease-in-out infinite alternate; } @keyframes maq-fusion { from { background-position: 0% 0; } to { background-position: 100% 0; } } @media (prefers-reduced-motion: reduce) { #topbar .maq-rt-bout :is(.decompte-nom, .maq-centi) { animation: none; } } /* « J ai devant moi » a l echelle de Complet / Express */ #heroProgress #devantBtn svg { width: 26px; height: 26px; } #heroProgress #devantBtn { font-size: 18px; gap: 8px; } /* reglages de la barre (menu de la roue) : texte seul, le choix en blanc gras */ #pctMenuPop .maq-barre-reglages .pctmenu-titre { font-size: 12.5px; color: var(--paper); display: block; margin: 10px 0 6px; } #pctMenuPop .maq-reglage { display: flex; align-items: baseline; gap: 12px; margin: 4px 0; font-size: 13px; } #pctMenuPop .maq-reglage > span { width: 46px; color: color-mix(in srgb, var(--paper) 60%, transparent); } #pctMenuPop .maq-reglage button { background: none; border: 0; padding: 2px 6px 2px 0; color: color-mix(in srgb, var(--paper) 55%, transparent); cursor: pointer; font: inherit; } #pctMenuPop .maq-reglage button:hover { color: var(--paper); } #pctMenuPop .maq-reglage button[aria-pressed="true"] { color: var(--paper); font-weight: 700; } html[data-maq-effet="plein"] .maq-contour-flux { display: none; } /* le mot actif au centre exact : les deux mots de cote ont la meme largeur */ #routeSlotTete .route-opt:not([aria-pressed="true"]) { min-width: 4em; } /* menu : l ancienne ligne « Barre de progression » (ancienne barre) part, ses reglages passent sous la ligne de la barre */ #pctMenuPop .couleurs-avancees-ligne.maq-cache { display: none; } #pctMenuPop .maq-barre-reglages { padding: 0 0 6px 14px; border-left: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); margin: 2px 0 8px 2px; } /* crans en traits fins (demande de l auteur) : discrets, le passe a la couleur de route */ .maq-crans line.maq-cran { stroke: #55555f; stroke-width: 1.5; stroke-linecap: round; fill: none; opacity: .9; filter: none; } .maq-crans line.maq-cran.est-passe { stroke: color-mix(in srgb, var(--paper) 75%, transparent); opacity: 1; } /* le + de la ligne « Barre de progression » : texte seul, il ouvre les sous-options */ #pctMenuPop .maq-plus { background: none; border: 0; color: var(--paper); font: 700 18px/1 inherit; padding: 0 2px; cursor: pointer; opacity: .7; } #pctMenuPop .maq-plus:hover, #pctMenuPop .maq-plus[aria-expanded="true"] { opacity: 1; } #pctMenuPop .maq-barre-reglages[hidden] { display: none !important; } /* sous-options en « sous-dossier » : retrait au niveau du a de « Barre », plus de filet en bas du menu */ #pctMenuPop .maq-barre-reglages { padding-left: 6px; margin-left: 2px; } #pctMenuPop .maq-reglage > span { width: 64px; flex: none; } #pctMenuPop .pctmenu-sep { display: none; } #pctMenuPop :is(#pctMenuFormeTitre, #formesBarre) { display: none !important; } /* meme ecart visible de part et d autre du mot actif : le rembourrage est pose en JS, la largeur fixe part */ #routeSlotTete .route-opt:not([aria-pressed="true"]) { min-width: 0; } /* Personnalisation : ce que le reglage survole change brille sur la page (halo qui pulse), le reste ne bouge pas */ @keyframes maq-montre { 0%, 100% { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--maq-route, #fff)); } 50% { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px var(--maq-route, #fff)); } } html:is(.maq-montre-barre, .maq-montre-tout) #topbar .maq-contour :is(.maq-contour-fait, .maq-contour-tete) { animation: maq-montre 1.1s ease-in-out infinite; } html:is(.maq-montre-pct, .maq-montre-tout) #progressPct { animation: maq-montre 1.1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { html[class*="maq-montre-"] * { animation-duration: 0s !important; } } /* Le nom du parcours a SA couleur (base du parcours, ou la sienne) ; il ne suit plus la barre */ #topbar #routeSlotTete .route-opt[aria-pressed="true"] { color: var(--maq-nom, var(--route-accent)); } .maq-parcours-msg b { color: var(--maq-nom, var(--route-accent)); } /* Lignes liees : une chaine allumee, pas de bouton retour (rien a annuler) ; personnalisee : chaine eteinte, retour visible */ #pctMenuPop .couleurs-avancees-ligne { position: relative; } #pctMenuPop .maq-chaine { display: inline-flex; width: 14px; height: 14px; margin-left: 4px; color: color-mix(in srgb, var(--paper) 25%, transparent); } #pctMenuPop .maq-chaine svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; } #pctMenuPop .couleurs-avancees-ligne.est-liee .maq-chaine { color: var(--route-accent); } #pctMenuPop .couleurs-avancees-ligne.est-liee .couleurs-avancees-zero { visibility: hidden; } #pctMenuPop .couleurs-avancees-ligne.est-liee .hex-input { opacity: .55; } /* Le halo de « Couleur du parcours » ne montre que ce qui la SUIT (une partie personnalisee ne bouge pas) */ html.maq-montre-tout #topbar .maq-contour :is(.maq-contour-fait, .maq-contour-tete), html.maq-montre-tout #progressPct, html.maq-montre-tout #routeSlotTete .route-opt[aria-pressed="true"] { animation: none; } html.maq-montre-tout:not(.c-perso-tete) #topbar .maq-contour :is(.maq-contour-fait, .maq-contour-tete), html.maq-montre-tout:not(.c-perso-pct) #progressPct { animation: maq-montre 1.1s ease-in-out infinite; } /* la couleur de BASE du parcours, lue a la racine (le site la remplace dans l en-tete par celle de la barre) */ :root { --maq-base: var(--route-accent); } #topbar #routeSlotTete .route-opt[aria-pressed="true"] { color: var(--maq-nom, var(--maq-base)); } .maq-parcours-msg b { color: var(--maq-nom, var(--maq-base)); } /* « ? » a cote du nom de chaque ligne (remplace la chaine) ; le + de la barre juste apres */ #pctMenuPop .maq-chaine { display: none; } #pctMenuPop .maq-aide { display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 4px 0 6px; padding: 0; border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); border-radius: 50%; background: none; color: color-mix(in srgb, var(--paper) 70%, transparent); font: 700 10px/1 var(--body); cursor: help; flex: none; } #pctMenuPop .maq-aide:is(:hover, :focus-visible) { color: var(--paper); border-color: var(--paper); } #pctMenuPop .couleurs-avancees-ligne > span:first-child { flex: 0 1 auto; } #pctMenuPop .couleurs-avancees-ligne .maq-plus { margin: 0 auto 0 0; } #pctMenuPop .couleurs-avancees-ligne:not(:has(.maq-plus)) .maq-aide { margin-right: auto; } /* « Couleur par defaut » sous le rectangle de couleur, cale a droite */ #pctMenuPop #duoColorDefaut { display: block; margin: 6px 0 0 auto; } /* l interrupteur Couleur unique : Oui = tout suit le parcours, options avancees verrouillees */ #pctMenuPop .maq-unique { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; font-size: 13px; color: var(--paper); font-weight: 700; } #pctMenuPop .maq-inter { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--paper); font: 700 12px var(--body); cursor: pointer; } #pctMenuPop .maq-inter i { position: relative; width: 30px; height: 16px; border-radius: 999px; background: #3a3a42; transition: background .2s; } #pctMenuPop .maq-inter i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: transform .2s; } #pctMenuPop .maq-inter[aria-checked="true"] i { background: var(--maq-base, var(--route-accent)); } #pctMenuPop .maq-inter[aria-checked="true"] i::after { transform: translateX(14px); } #pctMenuPop.maq-est-unique .couleurs-avancees-corps { opacity: .4; pointer-events: none; } #pctMenuPop:not(.maq-est-unique) #duoColorBox { opacity: .4; pointer-events: none; } #pctMenuPop:not(.maq-est-unique) #duoColorDefaut { display: none; } /* lignes avancees en flex (la grille du site a des colonnes fixes : le ? et le + la cassaient) */ #pctMenuPop .couleurs-avancees-ligne:not(.maq-cache) { display: flex; align-items: center; gap: 6px; } #pctMenuPop .couleurs-avancees-ligne > span:first-child { flex: none; } #pctMenuPop .couleurs-avancees-ligne .maq-aide { margin: 0; } #pctMenuPop .couleurs-avancees-ligne .maq-plus { margin: 0; } #pctMenuPop .couleurs-avancees-ligne .hex-field { margin-left: auto; } #pctMenuPop #duoColorDefaut { width: fit-content; } /* cale a droite, sous le rectangle */ /* le + sous « Barre de progression », et Crans / Forme / Effet, alignes sur le « a » de « Barre » */ #pctMenuPop .maq-plus-ligne { padding-left: var(--maq-a, 9px); margin: 0 0 2px; } #pctMenuPop .maq-plus-ligne .maq-plus { padding: 0; margin: 0; line-height: 1; } #pctMenuPop .maq-barre-reglages { margin: 2px 0 8px var(--maq-a, 9px); padding: 0; border: 0; } #pctMenuPop .maq-barre-reglages .maq-reglage { margin: 4px 0; } #pctMenuPop .couleurs-avancees-ligne > span:first-child { white-space: nowrap; } /* Essai : la roue crantee dans une mini-languette sous le mot du parcours */ .maq-mini { position: absolute; z-index: 2; background: var(--noir-tete, #0b0b0e); display: flex; align-items: flex-start; justify-content: center; } .maq-mini-roue { margin-top: 1px; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--paper) 70%, transparent); cursor: pointer; display: grid; place-items: center; } .maq-mini-roue svg { width: 15px; height: 15px; } .maq-mini-roue:is(:hover, [aria-expanded="true"]) { color: var(--paper); } .maq-mini-roue:hover svg { transform: rotate(60deg); transition: transform .3s; } html.maq-roue-mini #pctMenuBtn { visibility: hidden; } #pctMenuPop.maq-pop-mini { position: fixed; right: auto; bottom: auto; z-index: 70; } /* comme le vrai site (V694) : la languette epouse les mots, aucune largeur imposee aux mots de cote */ #routeSlotTete .route-opt { min-width: 0 !important; padding-left: 0; padding-right: 0; } /* la roue de la mini-languette : centree dans le creux (haut et bas), contrastee */ .maq-mini { align-items: center; } .maq-mini-roue { margin: 0; color: var(--paper); } .maq-mini-roue svg { width: 16px; height: 16px; } /* Parcours inactifs = silhouette seule (meme largeur des deux cotes), nom au survol : le mot actif, la languette, la roue et le cran a 50 % sont tous au centre de la page (choix de l auteur, 8 oct.) */ #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]) { font-size: 0 !important; position: relative; width: 30px; } #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]) .maq-route-ico { width: 22px; height: 22px; } #topbar #routeSlotTete .route-opt:not([aria-pressed="true"])::after { content: attr(data-nom); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font: 600 10px var(--body); color: var(--paper); white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; } #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]):is(:hover, :focus-visible)::after { opacity: 1; } #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]):hover { color: var(--paper); } /* la roue plus contrastee : trait plus epais, legere lueur */ .maq-mini-roue { color: #fff; } .maq-mini-roue svg { width: 17px; height: 17px; stroke-width: 2.2; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .45)); } /* la roue dans le creux agrandi (26 px) : centree dans l espace libre entre les deux traits du contour */ .maq-mini { align-items: flex-start; } .maq-mini-roue { margin-top: 4px; } .maq-mini-roue { margin-top: 0; } /* remontee de 4 px (demande de l auteur) : le creux est ouvert vers la languette */ .maq-parcours-msg { top: calc(100% + var(--maq-deborde, 0px) + 20px); } /* sous la mini-languette de la roue, plus colle a elle */ /* Tableau de bord Solo, propositions du 8 oct. : 1. routes du bas plus lisibles : nom plus grand et plus clair, compte lisible, piste visible meme a 0 */ #heroProgress .maq-barre-routes span { font-size: 13px; letter-spacing: .05em; color: var(--text-2); } #heroProgress .maq-barre-routes small { font-size: 13px; color: var(--text-dim); } #heroProgress .maq-barre-routes li::before { background: var(--ink-3); } /* 2. le vide entre le titre et le % devient une goutiere : un filet ferme le bloc du titre */ #heroProgress #suivant { position: relative; } #heroProgress #suivant::after { content: ""; position: absolute; top: 0; bottom: 0; right: -16px; width: 1px; background: linear-gradient(transparent, color-mix(in srgb, var(--paper) 18%, transparent) 20% 80%, transparent); } /* au milieu de l ecart de grille : le titre garde toute sa largeur */ /* 3. de l air autour du compte a rebours : le panneau descend, le decompte respire sous le contour */ #heroProgress > .hero-row { margin-top: 63px; } /* +15 : la barre du header est plus epaisse */ #topbar .roadto.maq-rt-bout { top: calc(100% + var(--maq-deborde, 0px) + 9px); } #topbar .maq-rt-tete .decompte-unite { margin: 0 6px 0 2px; } /* Header : les silhouettes des parcours inactifs descendent dans la languette, de part et d autre du mot (essai du 8 oct.) */ #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]) { transform: translateY(11px); z-index: 3; } /* Colonne de droite inversee (8 oct.) : Complet / Express en haut, « 5 h » au centre (chiffre au-dessus, horloge dessous), % et compteur en bas */ #heroProgress > .hero-row { grid-template-areas: "suivant ." "suivant mode" "suivant temps" "suivant pct" "suivant ." "barre barre" "routes routes" "dc dc"; grid-template-rows: 1fr auto auto auto 1fr auto auto auto; } #heroProgress .hero-paire #heroParcours { grid-area: mode; align-self: start; margin: 0; } #heroProgress .hero-paire #devant { grid-area: temps; justify-self: center; align-self: center; margin: 4px 0 0; } /* la pile tient dans la hauteur de l affiche */ #heroProgress #pctMenu { grid-area: pct; align-self: start; } #heroProgress #devantBtn { flex-direction: column; gap: 2px; height: auto !important; padding: 0; } #heroProgress #devantBtn > svg { order: 9; width: 18px; height: 18px; } #heroProgress #devantBtn .devant-duree { font-size: 30px !important; line-height: 1; } /* Rien ne se souligne au survol dans le tableau de bord (titre, fiche, precedent / prochain, route, legende) */ #heroProgress *, #heroProgress *:hover { text-decoration: none !important; } /* Seule l ecriture du titre est cliquable ; la ligne d infos ne descend plus a la carte (sauf le nom de la route) */ #heroProgress #suivant .suivant-titre { width: fit-content; } #heroProgress #suivant .maq-infos { pointer-events: none; } #heroProgress #suivant .maq-infos .maq-route { pointer-events: auto; } /* Le filet plus a gauche (colonne de droite plus aeree) ; l horloge au-dessus de « 5 h », plus grosse */ #heroProgress > .hero-row { column-gap: 64px; } #heroProgress #suivant::after { right: -32px; } #heroProgress #devantBtn > svg { order: 0; width: 24px; height: 24px; } /* la ligne d infos reste inerte, mais ses boutons (Voir la fiche, statut, route) restent cliquables */ #heroProgress #suivant .maq-infos button { pointer-events: auto; } /* Option A (8 oct.) : « J ai devant moi » descend sous le compteur, en petite ligne : Complet / Express, %, compteur, temps */ #heroProgress > .hero-row { grid-template-areas: "suivant ." "suivant mode" "suivant pct" "suivant temps" "suivant ." "barre barre" "routes routes" "dc dc"; } #heroProgress .hero-paire #devant { justify-self: end; align-self: start; margin: 4px 0 0; } #heroProgress #devantBtn { flex-direction: row; gap: 6px; color: var(--text-2); } #heroProgress #devantBtn > svg { width: 15px; height: 15px; } #heroProgress #devantBtn .devant-mot { display: inline !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; font: 600 13px var(--body) !important; letter-spacing: 0; text-transform: none; color: var(--text-dim); } #heroProgress #devantBtn .devant-duree { font-size: 15px !important; font-weight: 800; color: var(--paper); } #heroProgress #devantBtn:hover { color: var(--paper); } #heroProgress #devantBtn:hover .devant-mot { color: var(--text-2); } #heroProgress #devantBtn { margin-top: 2px; padding: 3px 10px 3px 8px !important; border: 1px solid var(--ink-4); border-radius: 999px; background: color-mix(in srgb, var(--paper) 4%, transparent); } #heroProgress #devantBtn:hover { border-color: color-mix(in srgb, var(--route-accent) 60%, transparent); } #heroProgress #devantBtn .devant-mot { font: 700 13px var(--body) !important; color: var(--text-2) !important; } #heroProgress #devantBtn .devant-duree { font-size: 15px !important; color: var(--route-accent); } #heroProgress #devantBtn > svg { color: var(--route-accent); } /* la fenetre : deux parties titrees */ #devantPop { width: 420px; padding: 18px 20px; text-align: left; } #devantPop .devant-question { margin: 0 0 12px; text-align: left; font-weight: 700; font-size: 15px; color: var(--paper); } /* les heures : une reglette d un seul tenant au lieu de huit pastilles */ #devantPop .devant-choix { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; border: 1px solid var(--ink-4); border-radius: 10px; overflow: hidden; } #devantPop .devant-duree-btn { height: 34px; min-width: 0; padding: 0; border: 0; border-right: 1px solid var(--ink-4); border-radius: 0; background: none; color: var(--text-2); font-weight: 700; box-shadow: none; } #devantPop .devant-duree-btn:last-child { border-right: 0; } #devantPop .devant-duree-btn:hover { background: color-mix(in srgb, var(--paper) 7%, transparent); color: var(--paper); } #devantPop .devant-duree-btn[aria-pressed="true"] { background: var(--route-accent); color: var(--ink-0, #0b0b0e); } /* la jauge : chaque titre est un bloc a sa duree, le temps libre en pointilles */ #devantPop #marathonBilan { display: none; } #devantPop .marathon-titre { padding: 6px 0; } /* d ici la sortie : trois chiffres, puis le rythme et son verdict en pastille */ #devantPop .devant-sep { margin: 14px 0; } #devantPop #planReste { display: none; } #devantPop .plan-regle { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #devantPop #planDate { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-weight: 600; color: var(--doom-soft, #6BF06B); background: color-mix(in srgb, var(--doom-soft, #6BF06B) 12%, transparent); } #devantPop #planDate.is-juste { color: #FFC94D; background: color-mix(in srgb, #FFC94D 12%, transparent); } /* Retours du 8 oct. : un simple bouton (sans cadre), plus grand ; fenetre carree, sans encadres */ #heroProgress #devantBtn { border: 0 !important; background: none !important; padding: 0 !important; } #heroProgress #devantBtn .devant-mot { font-size: 14px !important; } #heroProgress #devantBtn .devant-duree { font-size: 18px !important; } #heroProgress #devantBtn > svg { width: 17px; height: 17px; } /* le titre qui depasse le temps choisi : un vrai avertissement, en rouge */ #devantPop #marathonAvert { color: #FF5A5A; } /* mon rythme face au rythme ideal : deux barres, sans cases */ #devantPop #planDate { padding: 0; background: none !important; border-radius: 0; } #devantPop #planDate.is-juste { color: #FF5A5A; } /* « Mon temps libre » : horloge plus large ; dans la fenetre, titres en casse normale, la question ressort, les infos restent grises */ #heroProgress #devantBtn > svg { width: 20px; height: 20px; } #devantPop .devant-question { font: 600 14px var(--body); color: var(--route-accent); margin-bottom: 12px; } /* « Mon programme » centre dans la colonne de droite, un peu plus grand */ #heroProgress .hero-paire #devant { justify-self: center; margin-top: 8px; } #heroProgress #devantBtn .devant-mot { font-size: 15px !important; } #heroProgress #devantBtn .devant-duree { font-size: 20px !important; } #heroProgress #devantBtn > svg { width: 22px; height: 22px; } /* % et compteur : meme place a droite, descendus pour etre a egale distance de Complet / Express et de « Mon programme » */ #heroProgress #pctMenu { margin-top: 10px; } #heroProgress .hero-paire #devant { margin-top: 8px; } /* le blanc interne du chiffre et du compteur compte : ~17 px visibles de chaque cote */ /* « Mon programme » prend la couleur du % : celle du parcours, ou celle choisie pour le % dans les couleurs avancees */ :root.c-perso-pct #heroProgress #devantBtn { --route-accent: var(--c-pct); } /* Tableau de bord et bibliotheque plus larges, toujours alignes (une seule borne pour les deux) */ :root { --large: 1300px; } /* l affiche du tableau de bord grandit (112 x 168 -> 128 x 192) */ #heroProgress .suivant-affiche { width: 128px; height: 192px; } /* Le nom au survol des silhouettes passe AU-DESSUS (dessous, il tombait sur le trait du contour) ; pas de cadre blanc autour du mot apres un clic a la souris (le cadre reste au clavier) */ #topbar #routeSlotTete .route-opt:not([aria-pressed="true"])::after { top: auto; bottom: calc(100% + 2px); } #topbar #routeSlotTete .route-opt:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* la bibliotheque garde la meme marge que le tableau de bord sur les ecrans etroits (20 px de chaque cote) */ #roadmap > .saga { width: min(var(--large), 100% - 2.5rem); } /* Duo : Romain ⇄ Lea centre sur tout le tableau de bord, sous une separation partielle (filet qui s estompe aux bouts) */ #heroProgress > .hero-row > #rubanDuo { grid-column: 1 / -1; } #rubanDuo::before { width: 520px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 32%, transparent), transparent) !important; } /* Duo (essai 1A, 8 oct.) : le duo prend la place des routes dans le tableau de bord, en plus grand ; les routes passent juste sous le tableau de bord (toujours cliquables) */ html.route-duo #heroProgress > .hero-row > #rubanDuo { grid-area: duo; --ruban-emb: 60px; margin-top: 22px; padding-top: 22px; } html.route-duo #rubanDuo .ruban-nom { font-size: 18px; } /* regles du duo : mon nom souligne de la couleur de mon profil ; aucun fond derriere un embleme au survol */ #heroProgress #rubanDuo .ruban-cote.is-moi .ruban-nom { text-decoration: underline !important; text-decoration-color: var(--moi-couleur, var(--route-accent)) !important; text-decoration-thickness: 2px !important; text-underline-offset: 5px !important; } #rubanDuo .ruban-bulle, #rubanDuo .ruban-bulle:hover { background: none; } /* la synchro : un peu plus grande, seules les fleches se cliquent, sans rond derriere */ #rubanDuo .rduo-btn { min-width: 0; min-height: 0; padding: 0; background: none !important; } #rubanDuo .rduo-btn svg { width: 24px; height: 24px; } #rubanDuo .rduo-btn:hover, #rubanDuo .rduo-btn[aria-expanded="true"] { color: var(--paper); } /* le panneau s est elargi : le titre du film grandit un peu (44 -> 50 px au plus) */ #heroProgress .suivant-titre { font-size: clamp(34px, 3.2vw, 50px); } /* 9 oct. : « Programme » ; memes ecarts horloge / mot / heures */ #heroProgress #devantBtn { gap: 8px !important; } #heroProgress #devantBtn > * { margin: 0 !important; } /* Duo : la synchronisation, en grand, a gauche du % dans la colonne de droite */ html.route-duo #rduoMenu.maq-rduo-pct { position: absolute; transform: none; margin: 0; z-index: 20; } /* left / top poses par mesure */ html.route-duo #rduoMenu.maq-rduo-pct .rduo-btn { min-width: 0; min-height: 0; padding: 0; background: none !important; color: var(--text-2); } html.route-duo #rduoMenu.maq-rduo-pct .rduo-btn svg { width: 38px; height: 38px; } html.route-duo #rduoMenu.maq-rduo-pct .rduo-btn:is(:hover, [aria-expanded="true"]) { color: var(--paper); } html.route-duo #rduoMenu.maq-rduo-pct .rduo-pop { left: auto; right: 0; top: calc(100% + 10px); transform: none; } /* s ouvre vers la gauche : jamais hors de l ecran */ #rubanDuo .ruban-filet { display: none; } /* le filet entre les noms portait la synchro : il part avec elle */ /* Duo : l affiche grandit vers le bas et la droite (memes marges en haut et a gauche) ; les routes se rapprochent */ /* Duo (9 oct., choix 2) : exactement le visuel Solo ; une rangee « duo » (membres + synchro) s ajoute dessous, avant les routes */ html.route-duo #heroProgress > .hero-row { grid-template-areas: "suivant ." "suivant mode" "suivant pct" "suivant temps" "suivant ." "duo duo" "routes routes" "dc dc"; grid-template-rows: 1fr auto auto auto 1fr auto auto auto; } /* Mon programme : « Mon rythme » ressort, le choix vient a cote ; les avertissements en italique, un peu plus clairs */ #devantPop .plan-regle { justify-content: flex-start; gap: 16px; } #devantPop .plan-regle-mot { font: 700 15px var(--body); color: var(--paper); } #devantPop :is(#marathonAvert, #planDate.is-juste) { font-style: italic; font-weight: 400; color: #FF7A7A; } /* Duo (9 oct., suite) : Romain ⇄ Lea centre sur tout le tableau de bord ; filets en coin (sans se toucher) ; les routes reviennent dans le tableau de bord, sous l affiche, sur toute la largeur */ html.route-duo #rubanDuo::before { left: var(--f-g, 0) !important; right: var(--f-d, 0) !important; width: auto !important; transform: none !important; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 32%, transparent) 30% 70%, transparent) !important; } /* efface aux deux bouts */ html.route-duo #heroProgress #suivant::after { bottom: calc(-1 * var(--f-b, 0px)); background: linear-gradient(transparent, color-mix(in srgb, var(--paper) 18%, transparent) 20%) !important; } /* la fenetre de synchronisation : plus grande, Oui / Non comme la roue crantee, « Rompre le duo » en simple texte */ #rduoPop { width: 19rem; padding: 14px 16px; font-size: 14px; } #rduoPop .rduo-terme { font: 700 14px var(--body); color: var(--paper); } #rduoPop .rduo-ligne { gap: 10px; } #rduoPop .rduo-switch { width: 30px; height: 16px; border: 0; margin-right: 34px; background: #3a3a42; } #rduoPop .rduo-switch-bille { top: 2px; left: 2px; width: 12px; height: 12px; background: var(--paper); } #rduoPop .rduo-switch[aria-checked="true"] { background: var(--route-accent); } #rduoPop .rduo-switch[aria-checked="true"] .rduo-switch-bille { transform: translateX(14px); background: var(--paper); } #rduoPop .rduo-switch::before { content: "Non"; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font: 700 13px var(--body); color: var(--paper); } #rduoPop .rduo-switch[aria-checked="true"]::before { content: "Oui"; } #rduoPop .rduo-rompre { display: inline-block; width: auto; margin-top: 12px; padding: 0; border: 0 !important; background: none !important; box-shadow: none; font: 600 14px var(--body); color: #FF7A7A; cursor: pointer; } #rduoPop .rduo-rompre:hover { color: #FF5A5A; } /* le titre respire un peu avant la ligne d infos */ #heroProgress .suivant-titre { margin-bottom: 10px !important; } html.route-duo #heroProgress > .hero-row > #rubanDuo { z-index: 31; } /* le ruban (et la fenetre de synchro qu il porte) passe au-dessus des routes (z 30) */ /* Duo : la synchronisation n est plus un bouton qui ouvre une fenetre ; elle s ecrit en clair dans la case en bas a droite : « Synchronisation duo » + Oui / Non, et « Rompre le duo » dessous */ html.route-duo #rduoMenu.maq-rduo-pct .rduo-btn { display: none; } html.route-duo #rduoMenu.maq-rduo-pct #rduoPop, html.route-duo #rduoMenu.maq-rduo-pct #rduoPop[hidden] { display: flex !important; flex-direction: column; align-items: center; gap: 10px; position: static; transform: none; width: auto; padding: 0; border: 0; background: none; box-shadow: none; } html.route-duo #rduoPop .rduo-ligne { justify-content: center; } html.route-duo #rduoPop .rduo-terme { font-size: 15px; white-space: nowrap; } html.route-duo #rduoPop .rduo-rompre { margin-top: 0; font-size: 13px; } html.route-duo #rduoPop .rduo-aide-txt { max-width: 17rem; text-align: left; } html.route-duo #rduoPop .rduo-ligne { flex-wrap: wrap; row-gap: 8px; } html.route-duo #rduoPop .rduo-terme { flex: 0 0 100%; text-align: center; } /* le libelle seul sur sa ligne, l interrupteur et ? dessous */ /* Duo (9 oct., suite) : la fleche de synchro revient au-dessus du libelle ; « Oui / Non » discret ; l aide (?) s ouvre en bulle par-dessus, sans pousser le bloc ; le titre tient sur une ligne a cote de la grande affiche */ html.route-duo #rduoMenu.maq-rduo-pct { display: flex; flex-direction: column; align-items: center; gap: 6px; } html.route-duo #rduoMenu.maq-rduo-pct .rduo-btn { display: inline-flex; pointer-events: none; } html.route-duo #rduoMenu.maq-rduo-pct #rduoPop { position: relative; } #rduoPop .rduo-switch::before { font-weight: 500 !important; color: var(--text-dim) !important; } html.route-duo #rduoPop .rduo-aide-txt:not([hidden]) { position: absolute; z-index: 40; top: calc(100% + 8px); right: -8px; width: 17rem; margin: 0; padding: 10px 12px; background: var(--ink-1); border: 1px solid var(--ink-4); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font: 400 13px/1.45 var(--body); color: var(--text-2); text-align: left; } /* Duo : un peu moins large que Solo ; une mini separation sous la colonne de droite, dans le prolongement du filet du duo */ html.route-duo #rubanDuo::after { content: ""; position: absolute; top: 0; height: 1px; left: calc(100% - var(--f-d, 0px) + 28px); right: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 32%, transparent) 30% 70%, transparent); } /* Duo : les membres se centrent dans la hauteur du ruban (la synchro se cale sur eux) ; titre un peu plus petit, la colonne est plus etroite */ html.route-duo #heroProgress > .hero-row > #rubanDuo { align-content: center; } html.route-duo #heroProgress > .hero-row > #rubanDuo { padding-top: 12px; } /* la synchro reste a 20 px sous le filet (sa place validee) */ /* Duo : la rangee se cale sur les colonnes du haut (membres sous le titre, synchro sous la colonne de droite) */ html.route-duo #heroProgress > .hero-row > #rubanDuo { grid-template-columns: auto auto auto; justify-content: start; } /* position posee par mesure : calee sur les colonnes du haut */ html.route-duo #rduoMenu.maq-rduo-pct { width: 13rem; right: auto; } /* sa largeur ne depend pas de la place a droite : il se centre pile sous la colonne */ /* Equipe (9 oct.) : meme principe que Duo : exactement le visuel Solo en haut (prochain titre, compteur, Programme), et la rangee de l equipe dessous, calee sur les colonnes du haut (membres sous le titre, nom + Dissoudre sous la colonne de droite) */ html.is-vue-groupe #heroProgress #suivant[hidden] { display: flex !important; } html.is-vue-groupe #heroProgress :is(.devant, .suivi-compte, #heroCompte) { display: revert-layer; } html.is-vue-groupe #heroProgress .hero-row .progress .pctmenu #heroCompte, html.is-vue-groupe #heroProgress .hero-paire #devant { display: block; } html.is-vue-groupe #heroProgress .suivi-compte { display: inline-flex; } html.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "suivant ." "suivant mode" "suivant pct" "suivant temps" "suivant ." "duo duo" "routes routes" "dc dc"; grid-template-rows: 1fr auto auto auto 1fr auto auto auto; } html.is-vue-groupe #heroProgress > .hero-row > #grpBandeau { grid-area: duo; display: grid; grid-template-columns: subgrid; align-items: center; margin: 22px 0 0; padding: 22px 0 0; position: relative; } :root.is-vue-groupe #grpBandeau > .grp-ligne { grid-column: 1; grid-row: 1; justify-self: center; margin-left: 156px; } /* 156 = affiche (128) + son ecart (28) : centre sous le titre */ :root.is-vue-groupe #grpBandeau > .grp-tete { grid-column: 2; grid-row: 1; justify-self: center; } /* les deux filets en coin, comme en Duo : ce sont des cases de la grille (colonne du titre, colonne de droite), qui s arretent a 14 px du filet vertical (au milieu de l ecart de 64 px) */ :root.is-vue-groupe #grpBandeau::before, :root.is-vue-groupe #grpBandeau::after { content: ""; display: block !important; position: static; grid-row: 1; align-self: start; height: 1px; margin-top: -22px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 32%, transparent) 30% 70%, transparent); } :root.is-vue-groupe #grpBandeau::before { grid-column: 1; margin-left: 156px; margin-right: -18px; } :root.is-vue-groupe #grpBandeau::after { grid-column: 2; margin-left: -18px; } :root.is-vue-groupe #grpBandeau > .grp-tete { justify-self: end; width: 200px; margin: 0; justify-content: center; } /* meme largeur que Complet / Express : centres alignes */ :root.is-vue-groupe #grpBandeau > .grp-ligne { display: flex; width: auto; max-width: none; overflow: visible; } /* le site l eclatait autour du nom (display: contents) */ :root.is-vue-groupe #grpBandeau .grp-cote { order: 0; } html.is-vue-groupe #heroProgress #grpBandeau .is-moi .ruban-nom { text-decoration: underline !important; text-decoration-color: var(--moi-couleur, var(--route-accent)) !important; text-decoration-thickness: 2px !important; text-underline-offset: 5px !important; } html.route-duo #heroProgress > .hero-row > #rubanDuo { column-gap: 9rem; } /* Duo, piste A : la synchro tient entre les deux membres */ /* Solo : un titre skippe en duo, sans statut en solo : la mention et ses deux choix (aucun cadre) */ .maq-skipduo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 13px; margin-top: 10px; } .maq-skipduo-mot { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2, #b9b9c3); font-style: italic; } .maq-skipduo-mot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF7A7A; } .maq-skipduo button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; color: var(--paper, #fff); } .maq-skipduo button[data-f="garde"] { color: var(--text-2, #b9b9c3); font-weight: 500; } .maq-skipduo button:hover { color: var(--route-accent, #fff); } /* pas de soulignement (regle du tableau de bord) */ #heroProgress .maq-skipduo { pointer-events: auto; font-size: 14px; } .roadmap .card > .maq-skipduo { grid-column: 1 / -1; font-size: 12px; margin-top: 8px; justify-content: center; text-align: center; } .roadmap .card > .maq-skipduo .maq-skipduo-mot { flex-basis: 100%; justify-content: center; } #heroProgress .suivant-texte:has(> .maq-skipduo) { flex-wrap: wrap; } #heroProgress .suivant-texte > .maq-skipduo { order: 10; margin-top: 12px; flex-basis: 100%; justify-content: center; } /* V729 : sa propre ligne (la rangee est en flex row) */ /* sous Precedent / Vu / Skip */ /* Precedent / Prochain (9 oct.) : cote a cote, au bout a droite de la colonne du titre, sur la ligne de Vu / Skip */ #heroProgress .suivant-texte > .maq-actions { align-self: stretch; width: 100%; box-sizing: border-box; } #heroProgress .maq-actions .maq-fleches { display: flex !important; position: static; margin-left: auto !important; align-items: center; gap: 28px; } /* poussees au bout de la ligne de Vu / Skip (flex) */ #heroProgress .maq-fleches button.maq-prochain, #heroProgress .maq-fleches[data-choix] button.maq-prec { display: inline-flex; } #heroProgress .maq-fleches button.maq-prec[hidden] { display: none; } #heroProgress .maq-actions :is(button.maq-prec, button.maq-prochain) { margin: 0; padding: 0; } /* Equipe : pas de Programme (choix de l auteur, 9 oct.) */ :root.is-vue-groupe #heroProgress #devant { display: none !important; } #heroProgress #suivant .suivant-texte { flex: 1 1 auto; min-width: 0; } /* toute la colonne, meme pour un titre court : Prochain reste au bout */ /* 9 oct. : le titre monte en haut de l affiche ; la ligne Vu / Skip / Precedent / Prochain se pose sur le bas de l affiche */ #heroProgress #suivant .suivant-texte { justify-content: flex-start; } #heroProgress #suivant #suivantTitre { margin-top: -4px; } #heroProgress .suivant-texte > .maq-actions { margin-top: auto !important; align-items: center; } /* le bas des vignettes = le bas de l affiche ; les mots sur une meme ligne */ #heroProgress .maq-actions .maq-fleches { align-items: center; } #heroProgress .maq-fleches button:is(.maq-prec, .maq-prochain) { align-items: center; gap: 10px; } #heroProgress .maq-fleches .maq-vignette { width: 34px; height: 51px; object-fit: cover; display: block; border-radius: 0; opacity: .85; box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 14%, transparent); transition: opacity .15s; } #heroProgress .maq-fleches button:hover .maq-vignette { opacity: 1; } #heroProgress .maq-fleches .maq-vignette[hidden] { display: none; } /* 9 oct. : Duo = le tableau de bord Solo, identique, puis un petit tableau de bord dessous, a la taille de son contenu. Le cadre du grand (fond, bord, ombre) est redessine par ::after et s arrete au-dessus du petit (--sous-h, pose par mesure). */ html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "suivant ." "suivant mode" "suivant pct" "suivant temps" "suivant ." "routes routes" "dc dc" "duo duo"; grid-template-rows: 1fr auto auto auto 1fr auto auto auto; background: none; border-color: transparent; box-shadow: none; padding-bottom: 0; } html.route-duo #heroProgress > .hero-row::before, :root.is-vue-groupe #heroProgress > .hero-row::before { bottom: var(--sous-h, 0px); height: auto; clip-path: inset(0); } /* le flou de l affiche ne deborde plus sous le cadre */ /* ponytail: valeurs relevees du cadre du site (rgb 16 16 20 / 38 38 45) ; a remplacer par ses jetons au portage */ html.route-duo #heroProgress > .hero-row::after, html.route-duo #heroProgress > .hero-row > #rubanDuo, :root.is-vue-groupe #heroProgress > .hero-row::after, :root.is-vue-groupe #heroProgress > .hero-row > #grpBandeau { background: rgb(16, 16, 20); border: 1px solid rgb(38, 38, 45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 50px rgba(0, 0, 0, .85); } html.route-duo #heroProgress > .hero-row::after, :root.is-vue-groupe #heroProgress > .hero-row::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; bottom: var(--sous-h, 0px); z-index: -2; pointer-events: none; } html.route-duo #heroProgress > .hero-row > #rubanDuo { display: flex !important; align-items: center; justify-self: center; gap: 0; width: auto; min-height: 0 !important; margin: 46px 0 0 !important; padding: 18px 36px !important; } html.route-duo #rubanDuo::before, html.route-duo #rubanDuo::after { display: none !important; } html.route-duo #heroProgress #suivant::after, :root.is-vue-groupe #heroProgress #suivant::after { bottom: 0 !important; background: linear-gradient(transparent, color-mix(in srgb, var(--paper) 18%, transparent) 20% 80%, transparent) !important; } html.route-duo #rubanDuo > .ruban-cote + .ruban-cote, html.route-duo #rubanDuo > .ruban-cote ~ .ruban-cote { margin-left: 56px; } /* la synchro a droite des membres, derriere un filet vertical, centree sur tout le bloc des membres */ html.route-duo #rduoMenu.maq-rduo-pct { position: relative !important; left: auto !important; top: auto !important; order: 9; margin: 0 0 0 44px !important; padding-left: 40px; align-self: stretch; justify-content: center; } html.route-duo #rduoMenu.maq-rduo-pct::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: linear-gradient(transparent, color-mix(in srgb, var(--paper) 22%, transparent) 25% 75%, transparent); } /* Equipe (9 oct.) : le petit tableau de bord. Le nom de l equipe (et Dissoudre) en haut, les membres dessous, separes par des filets verticaux */ :root.is-vue-groupe #heroProgress > .hero-row > #grpBandeau { display: flex !important; flex-direction: column; align-items: center; gap: 18px; grid-area: duo; justify-self: center; width: auto; margin: 46px 0 0 !important; padding: 20px 40px 18px !important; } :root.is-vue-groupe #grpBandeau::before, :root.is-vue-groupe #grpBandeau::after { display: none !important; } :root.is-vue-groupe #grpBandeau > .grp-tete { order: 0; width: auto; margin: 0 !important; justify-self: auto; } :root.is-vue-groupe #grpBandeau > .grp-ligne { order: 1; margin: 0 !important; justify-self: auto; align-items: center; gap: 0; } :root.is-vue-groupe #grpBandeau > .grp-ligne > .ruban-filet { display: block !important; align-self: stretch; width: 1px; height: auto; margin: 6px 30px; padding: 0; border: 0; background: linear-gradient(transparent, color-mix(in srgb, var(--paper) 22%, transparent) 25% 75%, transparent); } :root.is-vue-groupe #grpBandeau > .grp-ligne > .grp-plus { margin-left: 30px; } :root.is-vue-groupe #grpBandeau > .grp-ligne > * { order: 0 !important; } /* l ordre du DOM : membre | filet | membre | filet | membre | filet | + */ :root.is-vue-groupe #grpBandeau > .grp-ligne > .grp-plus { margin-left: 0; } :root.is-vue-groupe #grpBandeau > .grp-ligne { padding: 4px 0 !important; } /* sans le retrait du site : la ligne se centre */ #heroProgress .maq-fleches .maq-vignette { cursor: zoom-in; } /* Rangee (9 oct.) : la grande affiche entre la mini affiche d avant (Precedent) et celle d apres (Prochain) ; Vu / Skip remontent sous les infos */ #heroProgress #suivant { display: flex; align-items: flex-start; } #heroProgress #suivant > .maq-fleches { display: contents !important; } #heroProgress #suivant > .maq-fleches button:is(.maq-prec, .maq-prochain) { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; padding: 0; margin: 0 14px; font-size: 12px; pointer-events: auto; cursor: pointer; } #heroProgress #suivant > .maq-fleches button.maq-prec { order: 0; margin-left: 0; } #heroProgress #suivant > .suivant-affiche { order: 1; } #heroProgress #suivant > .maq-fleches button.maq-prochain { order: 2; flex-direction: column-reverse; } #heroProgress #suivant > .suivant-texte { order: 3; } #heroProgress #suivant > .maq-fleches button[hidden] { display: inline-flex; visibility: hidden; } /* au premier titre, la place reste : l affiche ne saute pas */ #heroProgress #suivant > .maq-fleches .maq-vignette { width: 48px; height: 72px; } #heroProgress .suivant-texte > .maq-actions { margin-top: 22px !important; } #heroProgress #suivant > .suivant-affiche { pointer-events: none; } /* seul le titre descend a la route (9 oct.) */ /* Triptyque (10 oct.) : plus de gros titre ; a gauche les infos et Vu / Skip, au centre les trois affiches, a droite la progression */ #heroProgress #suivant > .suivant-texte { order: -1; flex: 1 1 0; align-self: center; justify-content: center; } #heroProgress #suivant > .maq-fleches button.maq-prec { margin-left: 14px; } #heroProgress #suivant > .maq-fleches button.maq-prochain { margin-right: 0; } #heroProgress #suivant #suivantTitre { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* le nom reste pour les lecteurs d ecran */ #heroProgress .suivant-texte > .maq-actions { margin-top: 18px !important; } /* Centre (10 oct.) : les trois affiches au centre de la page ; Complet / Express et Programme a gauche, % a droite ; sous les affiches : Vu / Skip, puis statut · duree · route. Un clic sur la grande affiche ouvre la fiche */ #heroProgress > .hero-row { grid-template-columns: 1fr auto 1fr; grid-template-areas: ". suivant ." "mode suivant pct" "temps suivant pct" ". suivant ." "barre barre barre" "routes routes routes" "dc dc dc"; grid-template-rows: 1fr auto auto 1fr auto auto auto; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: ". suivant ." "mode suivant pct" "temps suivant pct" ". suivant ." "routes routes routes" "dc dc dc" "duo duo duo"; grid-template-rows: 1fr auto auto 1fr auto auto auto; } #heroProgress .hero-paire #heroParcours { justify-self: start; } #heroProgress .hero-paire #devant { justify-self: start; align-self: start; margin: 14px 0 0; } #heroProgress #pctMenu { justify-self: end; align-self: center; margin-right: 0; } #heroProgress #suivant::after { display: none; } #heroProgress #suivant { flex-wrap: wrap; justify-content: center; } #heroProgress #suivant > .suivant-texte { order: 3; flex: 0 0 100%; align-items: center; text-align: center; margin-top: 16px; } #heroProgress .suivant-texte > .maq-avoir, #heroProgress .suivant-texte .maq-fiche { display: none !important; } #heroProgress .suivant-texte > .maq-actions { order: 1; margin: 0 !important; width: auto; justify-content: center; align-self: center; } #heroProgress .suivant-texte > .maq-infos { order: 2; margin-top: 10px; justify-content: center; } #heroProgress #suivant > .suivant-affiche { pointer-events: auto; cursor: zoom-in; } /* Centre, 2e essai (10 oct.) : sous les affiches le seul statut, puis Vu / Skip ; Complet / Express descend au-dessus des routes ; Precedent / Prochain de meme largeur (sinon la grande affiche glisse de ~11 px hors du centre de la page) */ #heroProgress > .hero-row { grid-template-areas: "temps suivant pct" "mode . ." "barre barre barre" "routes routes routes" "dc dc dc"; grid-template-rows: auto auto auto auto auto; row-gap: 0; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant pct" "mode . ." "routes routes routes" "dc dc dc" "duo duo duo"; grid-template-rows: auto auto auto auto auto; } #heroProgress .hero-paire #heroParcours { align-self: end; margin: 0 0 14px; } #heroProgress .hero-paire #devant { align-self: center; margin: 0; } #heroProgress #suivant > .maq-fleches button:is(.maq-prec, .maq-prochain) { width: 96px; margin: 0 10px; } #heroProgress #suivant > .suivant-texte { margin-top: 12px; } #heroProgress .suivant-texte > .maq-infos { order: 0; margin: 0 0 8px; font-size: 0; } /* la duree et la route partent : le statut seul */ #heroProgress .suivant-texte > .maq-infos .maq-route { display: none; } #heroProgress .suivant-texte > .maq-infos .maq-statut { font-size: 14px; } /* Centre, 3e essai (10 oct.) : statut · Vu · Skip sur une ligne, collee sous l affiche et centree sur elle ; Complet / Express au-dessus du %, a droite ; Programme a gauche ; les routes remontent */ #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "barre barre barre" "routes routes routes" "dc dc dc"; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "routes routes routes" "dc dc dc" "duo duo duo"; } #heroProgress .hero-paire #heroParcours { justify-self: end; align-self: end; margin: 0 0 12px; } #heroProgress #pctMenu { align-self: start; } #heroProgress #suivant > .suivant-texte { flex-direction: row; justify-content: center; align-items: center; gap: 22px; margin-top: 10px; } #heroProgress .suivant-texte > .maq-infos { margin: 0; } #heroProgress .suivant-texte > .maq-actions { display: flex !important; gap: 18px; } #heroProgress .suivant-texte > .maq-actions > button { margin: 0 !important; } /* Centre, 4e essai (10 oct.) : la ligne Requis / Vu / Skip collee a l affiche ; Complet / Express + % calés sur le haut des mini affiches (37 px sous la grande) */ #heroProgress #suivant { row-gap: 0; } #heroProgress #suivant > .suivant-texte { margin-top: 8px; } #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant ." "barre barre barre" "routes routes routes" "dc dc dc"; grid-template-rows: auto auto 1fr auto auto auto; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant ." "routes routes routes" "dc dc dc" "duo duo duo"; grid-template-rows: auto auto 1fr auto auto auto; } #heroProgress .hero-paire #heroParcours { align-self: start; margin: 37px 0 12px; } /* ponytail: 37 px = (192 - 72) / 2 - 23 (libelle) ; a calculer si la taille des affiches change */ #heroProgress .hero-paire > .maq-gauche { grid-area: temps; align-self: start; justify-self: start; margin-top: 37px; width: 260px; display: flex; flex-direction: column; gap: 8px; } /* Rythme (10 oct.) : la partie « Mon rythme de visionnage » quitte la fenetre du Programme (elle vit dans le tableau de bord) */ #devantPop :is(.devant-sep, .devant-marathon) { display: none !important; } #heroProgress .hero-paire > .maq-gauche { grid-area: temps; align-self: start; justify-self: start; margin-top: 37px; width: 280px; display: flex; flex-direction: column; gap: 10px; } /* Vu · Requis · Skip (10 oct.) : le statut au milieu, pile sous la grande affiche ; Vu et Skip de part et d autre, quelle que soit leur largeur */ #heroProgress #suivant > .suivant-texte { display: grid !important; grid-template-columns: 1fr auto 1fr; column-gap: 22px; align-items: center; } #heroProgress .suivant-texte > .maq-actions { display: contents !important; } #heroProgress .suivant-texte .maq-vu { grid-column: 1; grid-row: 1; justify-self: end; } #heroProgress .suivant-texte > .maq-infos { grid-column: 2; grid-row: 1; } #heroProgress .suivant-texte .maq-skip { grid-column: 3; grid-row: 1; justify-self: start; } #heroProgress .suivant-texte > :not(.maq-actions, .maq-infos) { grid-column: 1 / -1; } #heroProgress > .hero-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } /* deux cotes egaux, meme si leur contenu differe : l affiche reste au centre de la page */ /* Rythme, 2e essai (10 oct.) */ /* Sous l affiche (10 oct.) : Requis, puis Vu · Skip serres juste dessous, centres sur l affiche ; apres un choix, seul le choix reste */ #heroProgress #suivant > .suivant-texte { display: flex !important; flex-direction: column; align-items: center; gap: 6px; } #heroProgress .suivant-texte > .maq-actions { display: flex !important; align-items: center; gap: 0; } #heroProgress .suivant-texte .maq-skip::before { content: "·"; margin: 0 12px 0 10px; color: var(--text-dim); } #heroProgress .suivant-texte .maq-actions[data-choix] .maq-skip::before { content: none; } /* Meme DA que le tableau de bord sur les cartes : l icone en couleur (vert Vu, rouge Skip), le mot en blanc */ .roadmap .card.is-watched .watch-dot { color: var(--doom-soft, #6BF06B); } .roadmap .card.is-skip .watch-skip { color: #FF5A5A; } .roadmap .card :is(.watch-dot, .watch-skip) :is(span, .watch-mot) { color: var(--paper); } #heroProgress .suivant-texte > .maq-actions > button { min-height: 0 !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Rythme, 3e essai : « Rythme », « Actuel » dessous, « Ideal » au-dessus de la case cerclee, « / sem. » en clair */ /* Vu · Skip : deux colonnes egales autour du point, le point pile sous l affiche */ #heroProgress .suivant-texte > .maq-actions { display: grid !important; grid-template-columns: 1fr auto 1fr; column-gap: 12px; width: 220px; } #heroProgress .suivant-texte > .maq-actions::before { content: "·"; grid-column: 2; grid-row: 1; color: var(--text-dim); } #heroProgress .suivant-texte .maq-skip::before { content: none !important; } #heroProgress .suivant-texte .maq-actions .maq-vu { grid-column: 1; grid-row: 1; justify-self: end; } #heroProgress .suivant-texte .maq-actions .maq-skip { grid-column: 3; grid-row: 1; justify-self: start; } #heroProgress .suivant-texte > .maq-actions[data-choix] { display: flex !important; justify-content: center; width: auto; } #heroProgress .suivant-texte > .maq-actions[data-choix]::before { content: none; } #heroProgress #devant { display: none !important; } /* Rythme, 4e essai : plus d alerte (l echelle rouge suffit) ; l echelle colle a « Actuel », « Ideal » sur la meme hauteur */ /* Precedent / Prochain (10 oct.) : fleche et mot cote a cote sous la mini affiche (moins de hauteur) */ #heroProgress #suivant > .maq-fleches button:is(.maq-prec, .maq-prochain) { display: grid !important; grid-template-columns: auto auto; justify-content: center; column-gap: 6px; row-gap: 6px; } #heroProgress #suivant > .maq-fleches button:is(.maq-prec, .maq-prochain) .maq-vignette { grid-column: 1 / -1; grid-row: 1; justify-self: center; } #heroProgress #suivant > .maq-fleches button.maq-prochain > svg { grid-column: 2; grid-row: 2; } #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant rythme" "barre barre barre" "routes routes routes" "dc dc dc"; grid-template-rows: auto auto 1fr auto auto auto; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant rythme" "routes routes routes" "dc dc dc" "duo duo duo"; grid-template-rows: auto auto 1fr auto auto auto; } /* 1000 px : les cotes ne debordent plus sur Precedent / Prochain ; ils se serrent dans leur colonne */ #heroProgress .hero-paire > .maq-gauche { width: auto; max-width: 280px; min-width: 0; justify-self: stretch; margin-right: 16px; } #heroProgress #suivant > .suivant-texte { flex: 0 0 auto !important; width: 0; min-width: 100%; } /* ne compte pas dans la largeur de la colonne du centre : seules les trois affiches la fixent */ @media (max-width: 1199px) { #heroProgress > .hero-row { column-gap: 20px; } #heroProgress #suivant > .maq-fleches button:is(.maq-prec, .maq-prochain) { width: 84px; margin: 0 6px; } } @media (max-width: 759px) { #heroProgress > .hero-row, html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0; grid-template-areas: "suivant" "mode" "pct" "rythme" "temps" "barre" "routes" "dc" "duo" !important; grid-template-rows: none !important; } #heroProgress .hero-paire :is(#heroParcours, #pctMenu, .maq-ry, .maq-gauche) { justify-self: center !important; margin: 14px 0 0 !important; max-width: 100%; } #heroProgress .hero-paire > .maq-ry { width: 100%; } } #heroProgress .maq-gauche { padding: 16px 18px; background: rgb(11 11 14 / .78); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); gap: 14px; } #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant ." "barre barre barre" "routes routes routes" "dc dc dc"; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant ." "routes routes routes" "dc dc dc" "duo duo duo"; } /* un peu plus grand */ /* le Rythme en tete du panneau, un filet dessous */ /* 10 oct. : le reflet de l affiche quitte la gauche (derriere la Seance) pour le centre, derriere le film, plus doux ; le panneau de gauche perd son fond (c est le fond du tableau de bord qui change, pas celui de la Seance) */ #heroProgress > .hero-row::before { left: 50%; width: 620px; transform: translateX(-50%); opacity: .32; -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); } #heroProgress .maq-gauche { background: none; box-shadow: none; padding: 0; } #heroProgress > .hero-row { border-color: rgb(255 255 255 / .16) !important; box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 18px 40px rgb(0 0 0 / .45); } /* PC seulement : pas d'ombre noire sur fond sombre ; mobile inchange */ @media (min-width: 900px) { #heroProgress > .hero-row { box-shadow: none; } } /* PC seulement : vues Duo / Equipe sans l ombre noire (l anneau colore reste) ; mobile inchange, ligne 259-260 intactes */ @media (min-width: 900px) { html.maq-vue-duo #heroProgress > .hero-row { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px color-mix(in srgb, var(--maq-duo) 45%, transparent); } html.maq-vue-equipe #heroProgress > .hero-row { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px color-mix(in srgb, var(--maq-equipe) 45%, transparent); } } /* Droite : Complet / Express, %, Rythme tiennent entre le haut des mini affiches et le bas de Vu / Skip */ #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant rythme" "barre barre barre" "routes routes routes" "dc dc dc"; grid-template-rows: auto auto 1fr auto auto auto; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant rythme" "routes routes routes" "dc dc dc" "duo duo duo"; grid-template-rows: auto auto 1fr auto auto auto; } #heroProgress .hero-paire #heroParcours { margin-bottom: 4px; } #heroProgress .maq-gauche { align-items: center; text-align: center; } #heroProgress .hero-paire #heroParcours { margin-top: 47px !important; } /* = haut des mini affiches (mesure 10 oct.) */ /* 10 oct. (soir) : droite = Complet / Express, puis Rythme, puis % et compteur poses sur le bas de Vu / Skip. Le haut des deux cotes = mi-chemin entre le haut de la grande affiche et celui des mini affiches (23 px) */ #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant rythme" "temps suivant ." "temps suivant pct" "barre barre barre" "routes routes routes" "dc dc dc"; grid-template-rows: auto auto 1fr auto auto auto auto; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant rythme" "temps suivant ." "temps suivant pct" "routes routes routes" "dc dc dc" "duo duo duo"; grid-template-rows: auto auto 1fr auto auto auto auto; } #heroProgress .hero-paire #heroParcours { margin-top: 23px !important; margin-bottom: 0; } #heroProgress .hero-paire > .maq-gauche { margin-top: 23px; } #heroProgress #pctMenu { align-self: end !important; } /* Rythme sur une ligne : « ■ Rythme actuel » a gauche, l echelle a droite ; « Ideal » au-dessus de sa case */ /* Vu / Skip : plus de point (ni main au survol entre les deux) ; serres, centres sous le statut */ #heroProgress .suivant-texte > .maq-actions { display: flex !important; justify-content: center; gap: 18px; width: auto; cursor: default; } #heroProgress .suivant-texte > .maq-actions::before { content: none !important; } @media (max-width: 1199px) { #heroProgress .progress > .maq-ry { flex-direction: column; align-items: stretch; width: 100%; max-width: 240px; gap: 18px; } #heroProgress .progress > .maq-ry .maq-ry-tete { margin: 0; } } /* 10 oct. (soir, suite) : droite = Complet / Express, % juste dessous, Rythme pose sur le bas de Vu / Skip */ #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant ." "temps suivant rythme" "barre barre barre" "routes routes routes" "dc dc dc"; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant ." "temps suivant rythme" "routes routes routes" "dc dc dc" "duo duo duo"; } #heroProgress #pctMenu { align-self: start !important; margin-top: 14px; } /* Rythme : « Rythme actuel » au-dessus de l echelle, cale sur la case 1 ; « Ideal » reste au-dessus de sa case */ /* le menu 8 -> 15 s ouvre centre sur sa case (comme celui des durees), sans passer sous l en-tete */ /* l avertissement centre, sans trait a gauche */ #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant ." "temps suivant rythme" "temps . ." "barre barre barre" "routes routes routes" "dc dc dc"; grid-template-rows: auto auto 1fr auto auto auto auto auto; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant pct" "temps suivant ." "temps suivant rythme" "temps . ." "routes routes routes" "dc dc dc" "duo duo duo"; grid-template-rows: auto auto 1fr auto auto auto auto auto; } #heroProgress > .hero-row, html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-rows: auto auto auto auto 1fr auto auto auto; } /* le surplus de la Seance va dans sa rangee a elle */ /* 10 oct. (fin) : droite = Rythme en haut, Complet / Express, puis % pose sur le bas de la grande affiche */ #heroProgress > .hero-row { grid-template-areas: "temps suivant rythme" "temps suivant mode" "temps suivant ." "temps suivant pct" "temps . ." "barre barre barre" "routes routes routes" "dc dc dc"; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant rythme" "temps suivant mode" "temps suivant ." "temps suivant pct" "temps . ." "routes routes routes" "dc dc dc" "duo duo duo"; } #heroProgress .hero-paire #heroParcours { margin-top: 26px !important; } #heroProgress #pctMenu { align-self: end !important; } /* « Rythme actuel » sur la ligne de « Ideal » (meme taille, meme hauteur) */ /* un peu plus imposant */ /* menus plus confortables */ @media (max-width: 1199px) { #heroProgress .progress > .maq-ry { gap: 22px !important; } } /* echelle etroite : « Ideal » passe sous la legende au lieu de la chevaucher */ /* 10 oct. (fin, suite) : Complet / Express en haut, Rythme dessous (un peu plus discret), % dont le bas tombe entre Requis et Vu / Skip */ #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant rythme" "temps suivant ." "temps suivant pct" "temps . ." "barre barre barre" "routes routes routes" "dc dc dc"; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant mode" "temps suivant rythme" "temps suivant ." "temps suivant pct" "temps . ." "routes routes routes" "dc dc dc" "duo duo duo"; } #heroProgress .hero-paire #heroParcours { margin-top: 23px !important; } /* menu des durees : etroit, chaque heure centree */ /* Rythme encore un peu plus discret */ /* la fenetre de note, plus imposante ; « Prochain » seul */ #noterPop.maq-confirmee { min-width: 340px; padding: 22px 24px; } #noterPop .maq-confirme { font-size: 16px; gap: 14px; } #noterPop .maq-confirme .maq-conf-suite { font-size: 15px; padding: 8px 18px; } #noterPop.maq-confirmee { width: min(520px, calc(100vw - 32px)) !important; min-width: 0; padding: 32px 36px 30px !important; text-align: center; } #noterPop.maq-confirmee .noter-affiche { width: 220px !important; height: 330px !important; margin: 0 auto; } #noterPop.maq-confirmee .maq-confirme { display: flex !important; flex-direction: column; align-items: center; gap: 18px; width: 100%; font-size: 22px; } #noterPop .maq-confirme > b { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; } #noterPop .maq-confirme > b svg { width: 24px; height: 24px; } #noterPop .maq-confirme .maq-conf-suite { align-self: center; margin: 0 auto !important; font-size: 20px !important; padding: 10px 22px !important; gap: 10px; } #noterPop .maq-confirme .maq-conf-suite svg { width: 20px; height: 20px; } #noterPop .maq-confirme .maq-conf-suite { white-space: normal; max-width: 100%; } /* doublon du total : le bilan du site se tait pour de bon (une ancienne regle le rallumait) */ /* % et compteur centres sous Complet / Express, un peu plus bas */ #heroProgress #pctMenu { justify-self: end; width: 200px; margin-bottom: 18px !important; text-align: center; } #heroProgress #pctMenu > * { margin-left: auto; margin-right: auto; justify-content: center; } #heroProgress #pctMenu { margin-right: 0 !important; margin-left: 0 !important; } #heroProgress #pctMenu { left: 0 !important; right: auto !important; } /* un ancien decalage relatif de 32 px le sortait de l axe de Complet / Express */ /* droite : Rythme en haut, Complet / Express, puis % et compteur cales a droite sur le bout d Express (comme Ant-Man) */ #heroProgress > .hero-row { grid-template-areas: "temps suivant rythme" "temps suivant mode" "temps suivant ." "temps suivant pct" "temps . ." "barre barre barre" "routes routes routes" "dc dc dc"; } html.route-duo #heroProgress > .hero-row, :root.is-vue-groupe #heroProgress > .hero-row { grid-template-areas: "temps suivant rythme" "temps suivant mode" "temps suivant ." "temps suivant pct" "temps . ." "routes routes routes" "dc dc dc" "duo duo duo"; } #heroProgress .hero-paire #heroParcours { margin-top: 18px !important; } #heroProgress #pctMenu { width: auto; justify-self: end; text-align: right; } #heroProgress #pctMenu > * { margin-left: auto; margin-right: 0; justify-content: flex-end; } /* legende du Rythme : « ■ Rythme actuel ▢ Ideal » sur une ligne (plus de mot pose sur la case : il chevauchait la legende en Express) */ /* La barre du header prend le rendu de la barre du site en ligne (piste sombre cerclee, degrade sourd -> vif, nappes, etincelles, orbe, separateurs en quarts), a ~60 % de son epaisseur. Teintes derivees de la couleur de la barre (--maq-route) avec les memes proportions que le site. */ .maq-contour-bord { fill: none; stroke-linejoin: miter; stroke: color-mix(in srgb, var(--maq-route) 55%, var(--ink-6, #3a3a42)); } .maq-contour-trait { stroke: color-mix(in srgb, var(--maq-route) 9%, #060609) !important; } .maq-contour-fait { fill: none; stroke: url(#maqFait); stroke-linejoin: miter; filter: none; } .maq-fait-a { stop-color: color-mix(in srgb, var(--maq-route) 72%, #000); } .maq-fait-b { stop-color: color-mix(in srgb, var(--maq-route) 86%, #000); } .maq-fait-c { stop-color: var(--maq-route); } /* les nappes qui derivent : le flux devient une lueur douce, lente */ .maq-flux-b { stop-color: color-mix(in srgb, var(--maq-route) 55%, #fff); stop-opacity: .4; } .maq-contour-flux { stroke-linejoin: miter; } .maq-contour-etinc { fill: none; stroke-linejoin: miter; animation: doomsparks 3.2s steps(1) infinite; } .maq-etinc { fill: color-mix(in srgb, color-mix(in srgb, var(--maq-route) 55%, #fff) 34%, #fff); } html[data-maq-effet="plein"] .maq-contour-etinc { display: none; } .maq-contour-reflet { display: none; } .maq-contour-ombre { stroke-linejoin: miter; } .maq-contour-tete { fill: url(#maqOrbe); filter: none; transform-box: fill-box; transform-origin: center; animation: doompulse 1.9s ease-in-out infinite; } .maq-orbe-a { stop-color: color-mix(in srgb, color-mix(in srgb, var(--maq-route) 55%, #fff) 34%, #fff); } .maq-orbe-b { stop-color: color-mix(in srgb, var(--maq-route) 55%, #fff); } .maq-orbe-c { stop-color: var(--maq-route); stop-opacity: 0; } /* separateurs : des entailles sombres en travers de la bande, comme les quarts du site */ .maq-crans line.maq-cran, .maq-crans line.maq-cran.est-passe { stroke: rgba(0, 0, 0, .8); stroke-width: 2; stroke-linecap: butt; opacity: 1; filter: none; } @keyframes maq-pulse { 0%, 100% { opacity: 1; } 35% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .maq-contour-etinc, .maq-contour-tete { animation: none; } } /* Un quart franchi se voit : entaille blanche lumineuse (les quarts a venir restent sombres) ; franchi a l instant, il s eclaire une fois */ .maq-crans line.maq-cran.est-passe { stroke: rgba(255, 255, 255, .92); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .7)); } .maq-crans circle.maq-cran.est-passe { fill: #fff; stroke: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .7)); } .maq-crans .maq-cran.est-neuf { animation: maq-cran-neuf 1.1s ease-out; } @keyframes maq-cran-neuf { 0% { filter: drop-shadow(0 0 0 #fff); } 25% { filter: drop-shadow(0 0 9px #fff) drop-shadow(0 0 4px #fff); } 100% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .7)); } } @media (prefers-reduced-motion: reduce) { .maq-crans .maq-cran.est-neuf { animation: none; } } /* Header plus serre (demande de l auteur) : memes elements, moins de vide au-dessus et au-dessous */ @media (min-width: 900px) { #topbar.topbar, #topbar.topbar.est-haut { padding: 6px 0 4px; } } /* Retouches fines (auteur, 11 oct.) : silhouettes de cote -4 px, mot actif -2 px a l ecran (il reste au-dessus d elles), roue -1,5 px */ #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]) { transform: translateY(8px); } /* le bloc est agrandi x1,38 : 3 px = 4 px a l ecran */ #topbar #routeSlotTete .route-opt[aria-pressed="true"] { translate: 0 -1.5px; } /* = 2 px a l ecran */ .maq-mini-roue { translate: 0 -1.5px; } /* la coupee : le creux (fond de l en-tete) et le contour de la forme creusee */ html:not([data-maq-barre="coupee"]) .maq-cache { display: none; } .maq-contour .maq-cache-fond { fill: var(--noir-tete, #0b0b0e); } .maq-cache-bord { stroke: color-mix(in srgb, var(--maq-route) 55%, var(--ink-6, #3a3a42)); stroke-width: 2; stroke-linejoin: miter; } html[data-maq-barre="coupee"] #topbar .topbar-inner #routeSlotTete { z-index: 11; } /* le mot passe devant la languette dessinee */ .maq-essai-barre { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 999px; background: rgba(0, 0, 0, .9); border: 1px solid #3a3a42; font: 600 12px var(--body, system-ui); color: var(--text-dim, #9a9aa4); } .maq-essai-barre span { padding: 0 6px; } .maq-essai-barre button { border: 0; border-radius: 999px; padding: 4px 10px; background: none; color: inherit; font: inherit; cursor: pointer; } .maq-essai-barre button[aria-pressed="true"] { background: var(--paper, #fff); color: #000; } /* Le parcours choisi : plus de silhouette au-dessus, le mot grandit (28 -> 32 px) ; les silhouettes de cote descendent un peu */ #topbar #routeSlotTete .route-opt[aria-pressed="true"] .maq-route-ico { display: none; } #topbar #routeSlotTete .route-opt[aria-pressed="true"] { font-size: 32px !important; } @media (min-width: 900px) { #topbar .topbar-inner #routeSlotTete { --maq-slot-y: 19px; } } /* sans la silhouette, le bloc remontait : il redescend dans la languette */ #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]) { transform: translateY(5px); } /* Formes de la barre (fil, tube affine) ; segments = option */ html:is([data-maq-barre="fil"], [data-maq-barre="affine"]) :is(.maq-contour-flux, .maq-contour-etinc, .maq-contour-reflet, .maq-contour-ombre) { display: none; } html[data-maq-barre="fil"] .maq-contour-bord { display: none; } html[data-maq-barre="fil"] .maq-contour-fait { filter: drop-shadow(0 0 4px var(--maq-route)); } .maq-crans line.maq-coupure { stroke: var(--noir-tete, #0b0b0e); stroke-width: 4; } html[data-maq-barre="fil"] .maq-contour-trait { stroke: color-mix(in srgb, var(--maq-route) 30%, #2a2a30) !important; } /* le volet de la roue : une colonne pleine largeur (sinon il prenait la largeur du contenu, cale a droite, tant que les options avancees etaient fermees) */ #topbar ~ * #pctMenuPop, #pctMenuPop { grid-template-columns: minmax(0, 1fr); } /* la forme de la barre n est pas une couleur : jamais verrouillee par Couleur unique */ #pctMenuPop.maq-est-unique .couleurs-avancees-corps :is(.maq-plus-ligne, .maq-barre-reglages) { pointer-events: auto; } #pctMenuPop.maq-est-unique .couleurs-avancees-corps:has(.maq-barre-reglages) { opacity: 1; } #pctMenuPop.maq-est-unique .couleurs-avancees-corps:has(.maq-barre-reglages) > :not(.maq-plus-ligne, .maq-barre-reglages) { opacity: .4; } /* ESSAI : emplacement de la roue (selecteur en bas a gauche) */ .maq-essai-roue { bottom: 60px; } html[data-maq-roue="sous"] .maq-mini::after { content: "Personnaliser"; margin-left: 6px; font: 600 12px var(--body, system-ui); color: color-mix(in srgb, var(--paper) 70%, transparent); } html[data-maq-roue="sous"] .maq-mini { align-items: center; pointer-events: auto; } /* roue dans la languette : la languette grandit, le mot monte, les silhouettes descendent, la roue + Personnaliser dessous */ /* le bord du tube s allume avec la progression (creux de la languette compris) ; eteint au-dela */ .maq-bp-on { stop-color: color-mix(in srgb, var(--maq-route) 55%, var(--ink-6, #3a3a42)); } .maq-bp-off { stop-color: color-mix(in srgb, var(--maq-route) 18%, #1c1c22); } .maq-contour :is(.maq-contour-bord, .maq-cache-bord) { stroke: url(#maqBordProg); } /* sous la languette, c est toujours la barre */ /* roue dans la languette : le mot monte et rapetisse, Personnaliser dessous, les silhouettes plus grandes et plus proches */ /* roue dans le creux : le mot en haut, plus grand ; dessous, une rangee dans le creux de la barre : silhouette - roue Personnaliser - silhouette (silhouettes ecartees vers les bords du creux) */ .maq-contour .maq-cache-bord { stroke-width: 1px !important; } /* meme liseré que le tube */ /* roue dans le creux / en exposant : creux de largeur FIXE, les elements s y ajustent (les silhouettes se centrent en JS entre le mot et le bord du creux) ; le mot et les silhouettes plus grands */ html[data-maq-roue="dans"] #topbar #languetteTete { width: 320px !important; } @media (min-width: 900px) { html[data-maq-roue="dans"] #topbar .topbar-inner #routeSlotTete { --maq-slot-y: -1px; } } html[data-maq-roue="dans"] #topbar #routeSlotTete .route-opt[aria-pressed="true"] { font-size: 28px !important; } html[data-maq-roue="expo"] #topbar #routeSlotTete .route-opt[aria-pressed="true"] { font-size: 40px !important; } @media (min-width: 900px) { html[data-maq-roue="expo"] #topbar .topbar-inner #routeSlotTete { --maq-slot-y: 12px; } } html[data-maq-roue="expo"] #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]) { transform: translateY(6px); } /* les silhouettes au ras de la barre */ html[data-maq-roue="expo"] #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]) { margin-inline: 9px; } /* la place de la roue, des deux cotes : le mot reste centre */ html[data-maq-roue="dans"] #topbar .maq-route-ico { width: 22px; height: 22px; } html[data-maq-roue="dans"] #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]) { transform: translateY(21px); } html:is([data-maq-roue="sous"], [data-maq-roue="dans"]) .maq-mini { align-items: center; } html[data-maq-roue="dans"] .maq-mini::after { content: "Personnaliser"; margin-left: 4px; font: 700 11px var(--body, system-ui); color: color-mix(in srgb, var(--paper) 75%, transparent); } html[data-maq-roue="expo"] #topbar .maq-route-ico { width: 22px; height: 22px; } /* le creux suit le groupe mot + roue : meme ecart silhouette -> diagonale des deux cotes (le mot, lui, reste au centre) */ /* le volet de la roue s ouvre au centre du site */ html[data-maq-roue="expo"] #pctMenuPop { position: fixed !important; left: 50% !important; right: auto !important; top: var(--maq-bas-centre, 96px) !important; transform: translateX(-50%) !important; translate: none !important; } /* meme ecart mot -> silhouette a gauche que roue -> silhouette a droite */ /* la barre epaisse (tube, coupee) ne mord plus sur la page : le contenu descend d autant */ html.maq-contour-unique #heroProgress { margin-top: var(--maq-deborde, 0px); } /* le trait droit du site ne traverse plus le creux de la coupee : seul le trace dessine compte */ html.maq-contour-unique #topbar::after { opacity: 0 !important; } /* « Couleur par defaut » aligne a gauche, sous la couleur */ #pctMenuPop #duoColorDefaut { justify-self: start; text-align: left; } /* coupee : le contour de la forme creusee remplace le bord droit du tube ; le creux a le fond de l en-tete, sans trait */ html[data-maq-barre="coupee"] .maq-contour-bord { display: none; } .maq-contour .maq-cache-fond { fill: var(--noir-tete, #0b0b0e); stroke: none; } /* un peu plus de contraste sur les silhouettes */ #topbar #routeSlotTete .route-opt:not([aria-pressed="true"]) { color: color-mix(in srgb, var(--paper) 72%, transparent); } /* Personnalisation (12 oct.) : titre centre, sous-titre, couleur unique en tete, un seul visuel de ligne */ #pctMenuPop #pctMenuTitre { justify-self: center; font-size: 17px; font-weight: 800; letter-spacing: .02em; color: var(--paper); margin-bottom: 2px; } #pctMenuPop .maq-sous-titre { justify-self: center; font-size: 12px; color: color-mix(in srgb, var(--paper) 62%, transparent); margin-bottom: 10px; } #pctMenuPop .maq-sous-titre b { color: var(--paper); font-weight: 800; letter-spacing: .06em; } #pctMenuPop .maq-unique > span { margin-right: auto; } #pctMenuPop .maq-unique .maq-aide { margin: 0 auto 0 6px; } #pctMenuPop .maq-unique > span:first-child { margin-right: 0; } #pctMenuPop #duoColorBox { display: flex; align-items: center; gap: 8px; margin: 6px 0; } #pctMenuPop #duoColorBox .maq-mot { margin-right: auto; font-size: 13px; } #pctMenuPop #duoColorBox #duoBar { display: none; } #pctMenuPop #duoColorBox .wheel-btn { order: 2; width: 22px; height: 22px; } #pctMenuPop #duoColorBox .hex-field { order: 1; } #pctMenuPop #duoColorBox #duoColorDefaut { order: 3; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; background: none; border: 0; color: color-mix(in srgb, var(--paper) 60%, transparent); cursor: pointer; } #pctMenuPop #duoColorBox #duoColorDefaut:hover { color: var(--paper); } #pctMenuPop #duoColorBox #duoColorDefaut svg { width: 15px; height: 15px; } #pctMenuPop:not(.maq-est-unique) #duoColorBox { display: none !important; } #pctMenuPop.maq-est-unique .couleurs-avancees { display: none; } #pctMenuPop .couleurs-avancees > .couleurs-avancees-tete { display: none; } #pctMenuPop .couleurs-avancees-corps { opacity: 1 !important; pointer-events: auto !important; } #pctMenuPop .maq-section-barre { margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); padding-top: 8px; } html[data-maq-roue="expo"] #topbar #routeSlotTete .route-opt[data-route="groupe"][aria-pressed="true"] { font-size: 38.5px !important; } /* Equipe, mot long : un peu plus d air jusqu aux diagonales */ #pctMenuPop #duoColorBox .wheel-btn { background: var(--route-accent) !important; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); } /* une pastille de la couleur, comme les autres lignes */ #pctMenuPop #duoColorBox .wheel-btn::before, #pctMenuPop #duoColorBox .wheel-btn::after { display: none; } /* crans plus lisibles (fil compris) */ .maq-crans line.maq-cran { stroke-width: 2px; } /* Personnalisation : plus de « ? » sur les lignes (survoler le nom montre deja ce qu il change) ; noms un peu moins contrastes */ #pctMenuPop .couleurs-avancees-ligne .maq-aide { display: none; } #pctMenuPop :is(.couleurs-avancees-ligne > span:first-child, #duoColorBox .maq-mot) { color: color-mix(in srgb, var(--paper) 70%, transparent); cursor: default; margin-right: auto; } /* meme ordre partout : pastille, #HEX, fleche (collee) */ #pctMenuPop .couleurs-avancees-ligne { display: flex; align-items: center; gap: 8px; } #pctMenuPop .couleurs-avancees-ligne .couleurs-pastille, #pctMenuPop #duoColorBox .wheel-btn { order: 1; width: 22px; height: 22px; flex: none; } #pctMenuPop .couleurs-avancees-ligne .hex-field, #pctMenuPop #duoColorBox .hex-field { order: 2; } #pctMenuPop .couleurs-avancees-ligne .couleurs-avancees-zero, #pctMenuPop #duoColorBox #duoColorDefaut { order: 3; margin: 0; width: 22px; height: 22px; } #pctMenuPop .couleurs-avancees-ligne > span:first-child, #pctMenuPop #duoColorBox .maq-mot { order: 0; } /* le ? de Couleur unique : un bouton qui deplie l explication */ #pctMenuPop .maq-unique { position: relative; } #pctMenuPop .maq-unique-aide:not([hidden]) { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: 17rem; margin: 0; padding: 10px 12px; background: var(--ink-1); border: 1px solid var(--ink-4); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font: 400 13px/1.45 var(--body); color: var(--text-2); text-align: left; } #pctMenuPop .maq-unique-aide b { color: var(--paper); } #pctMenuPop :is(#pctMenuTitre, .maq-sous-titre) { display: block; text-align: center; } /* centres, que le volet soit en grille ou en bloc */ #pctMenuPop :is(#duoColorDefaut, .couleurs-avancees-zero)[hidden] { display: grid !important; visibility: hidden; } /* deja par defaut : la fleche se cache sans decaler la ligne */ #pctMenuPop #duoColorBox :is(.wheel-btn, .hex-field) { margin: 0 !important; } /* meme pas que les lignes par element */ #pctMenuPop :is(#duoColorBox, .couleurs-avancees-ligne) :is(.wheel-btn, .couleurs-pastille, .hex-field) { margin: 0 !important; } #pctMenuPop :is(#duoColorBox, .couleurs-avancees-ligne) .hex-field { width: 66px; flex: none; } /* fleches de remise a zero : centrees dans leur ligne */ #pctMenuPop :is(#duoColorDefaut, .couleurs-avancees-zero) { align-self: center; display: grid; place-items: center; padding: 0; line-height: 0; } #pctMenuPop :is(#duoColorDefaut, .couleurs-avancees-zero) svg { display: block; } /* menus de la tete : titre contraste ; Vider = une poubelle seule, sans fond */ #nmenuPop .nmenu-titre { color: var(--paper); font-weight: 800; } #nmenuPop #nmenuVider { background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px; width: 26px; height: 26px; display: grid; place-items: center; color: color-mix(in srgb, var(--paper) 70%, transparent); cursor: pointer; } #nmenuPop #nmenuVider:hover, #nmenuPop #nmenuVider:focus-visible { color: var(--paper); } #nmenuPop #nmenuVider svg { width: 18px; height: 18px; } #nmenuPop #nmenuVider[hidden] { display: none; } /* le tableau de bord : son haut cale sous le decompte (17 oct.), pas colle au header */ #heroProgress > .hero-row { margin-top: 32px !important; border-color: rgb(255 255 255 / .34) !important; } /* haut sous le decompte de Doomsday ; contour toujours lisible */ #socMenu { z-index: 200 !important; } /* la liste d amis passe par-dessus le tableau de bord et le decompte */ #nmenuPop #nmenuVider { color: var(--paper) !important; } #nmenuPop .nmenu-texte { color: color-mix(in srgb, var(--paper) 62%, transparent); font-weight: 500; } #nmenuPop .nmenu-texte .maq-cle { color: var(--paper); font-weight: 800; } #nmenuPop .nmenu-aller:has(.maq-embleme) { display: grid !important; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; justify-items: start; text-align: left; } #nmenuPop .nmenu-aller:has(.maq-embleme) .maq-embleme { grid-row: span 2; } #nmenuPop .maq-embleme { flex: none; width: 30px; height: 30px; display: grid; place-items: center; } #nmenuPop .maq-embleme :is(svg, img) { width: 26px; height: 26px; } /* l etiquette d une silhouette s ouvre vers l exterieur (elle ne chevauche plus la roue) */ #topbar #routeSlotTete .route-opt:not([aria-pressed="true"])::after { bottom: auto !important; top: 50% !important; transform: translateY(-50%) !important; } #topbar #routeSlotTete .route-opt[data-cote="g"]:not([aria-pressed="true"])::after { left: auto !important; right: calc(100% + 6px) !important; } #topbar #routeSlotTete .route-opt[data-cote="d"]:not([aria-pressed="true"])::after { left: calc(100% + 6px) !important; right: auto !important; } /* ... et au-dessus du contour : centree sur l icone, elle tombait sur la remontee de la ligne (31 oct.) */ #topbar #routeSlotTete .route-opt:not([aria-pressed="true"])::after { top: calc(50% - 14px) !important; } /* decompte : un degrade vert -> gris FIXE (il ne bouge plus) */ #topbar .maq-rt-bout :is(.decompte-nom, .maq-centi) { animation: none !important; background: linear-gradient(90deg, var(--maq-dest, var(--maq-route)), #8a8a93) !important; background-size: 100% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; } /* pied de page : la synchro passe sous les liens, centree entre eux et le bas de page */ .site-footer { display: flex; flex-direction: column; } .site-footer .sync-pied.maq-sync-pied { order: 2; padding: 14px 0 !important; margin-top: auto; margin-bottom: auto; } /* Seance (V697) : zone de gauche (Rythme + Seance), preparation plein tableau de bord, seance en cours, recap */ #heroProgress .maq-gauche { display: grid; gap: 14px; justify-items: start; text-align: left; } .se-zone { display: grid; gap: 12px; justify-items: start; } .se-bouton { padding: 9px 16px; border: 0; background: var(--paper); color: #000; font: 800 13px var(--body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .se-bouton:disabled { opacity: .35; cursor: not-allowed; } .se-bouton.se-creux { background: none; color: #E5484D; box-shadow: none; padding: 4px 2px; text-decoration: underline; text-underline-offset: 4px; } .se-bouton.se-creux:hover { color: #FF6B70; } #heroProgress .maq-gauche.se-en-cours { justify-items: center; text-align: center; } .se-en-cours .se-zone { justify-items: center; } .se-decompte { display: flex; align-items: center; gap: 10px; font: 800 40px/1 var(--display, var(--body)); color: var(--paper); } /* seance en cours : heure et Terminer sur une ligne, la colonne centree face au film */ .se-haut { display: flex; align-items: center; justify-content: center; gap: 22px; } .se-decompte { white-space: nowrap; } #heroProgress > .hero-row.se-active .maq-gauche { align-self: center; margin-top: 0; } .se-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: calc(var(--cols, 2) * 78px - 10px); } /* 2 x 2 ou 2 x 3, la derniere rangee centree */ .se-mini figure { position: relative; margin: 0; } .se-mini img { display: block; width: 68px; aspect-ratio: 2 / 3; object-fit: cover; } .se-mini figure.est-vu img { opacity: .55; } .se-marque { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; display: grid; place-items: center; font: 800 13px var(--body); background: var(--ink-1); box-shadow: 0 0 0 2px var(--ink-0, #000); } .se-mini .est-vu .se-marque { color: #3FCF6E; } @media (max-width: 1100px) { .se-mini { max-width: calc(var(--cols, 2) * 68px - 12px); } .se-mini img { width: 56px; } .se-decompte { font-size: 28px; } .se-haut { gap: 10px; } } /* film en cours : un grand « 1/5 » en contour a droite de la grande affiche, « 2/5 » au-dessus de la vignette Prochain */ .se-rang { position: absolute; transform: translateY(-100%); z-index: 2; pointer-events: none; font: 900 58px/1 var(--display, var(--body)); color: rgb(0 0 0 / .55); -webkit-text-stroke: 2.5px var(--route-accent); text-shadow: 0 0 14px rgb(0 0 0 / .9); } .se-rang small { font-size: 20px; -webkit-text-stroke: 0; color: var(--paper); } .se-rang.se-rang-suite { font-size: 32px; -webkit-text-stroke-width: 1.5px; } .se-rang.se-rang-suite small { font-size: 12px; } /* le suivant, 45 % plus petit */ .se-mini .est-ici img { outline: 3px solid var(--route-accent); outline-offset: 2px; } :is(.se-rang, .se-rang-suite)[hidden] { display: none; } .se-tout-vu { margin: 0; font-weight: 700; color: #3FCF6E; } .se-gain { order: 2; align-self: flex-end; margin-top: 6px; font: 800 22px var(--display, var(--body)); color: #3FCF6E; text-align: right; } .se-gain[hidden] { display: none; } .se-tete { position: absolute; left: 16px; top: calc(100% + 13px); padding: 0; border: 0; background: none; color: var(--paper); font: 600 13px var(--body); cursor: pointer; display: flex; gap: 8px; align-items: baseline; } .se-tete span { color: var(--route-accent); font-weight: 800; } .se-tete b { font: 800 17px var(--body); } .se-tete[hidden] { display: none; } /* preparation : un disque part du bouton et couvre le tableau de bord */ #heroProgress > .hero-row.se-ouvert { z-index: 30; } .se-prep, .se-recap { position: absolute; inset: 0; grid-area: auto / auto / auto / auto !important; margin: 0 !important; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 56px; padding: 48px 40px 40px; background: radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--route-accent) 9%, transparent), transparent 70%), #0B0B0E; } .se-prep { pointer-events: none; clip-path: circle(0 at var(--x, 15%) var(--y, 70%)); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); } .hero-row.se-ouvert > .se-prep { pointer-events: auto; clip-path: circle(150% at var(--x, 15%) var(--y, 70%)); } .hero-row > :not(.se-prep):not(.se-recap) { transition: opacity .35s, filter .5s; } #heroProgress > .hero-row.se-ouvert > :not(.se-prep):not(.se-recap) { opacity: 0 !important; filter: blur(4px); visibility: hidden; transition: opacity .35s, filter .5s, visibility 0s .35s; } /* visibility : un bloc en display: contents ignore l opacite */ .se-prep .se-entre { opacity: 0; transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1); } .se-prep .se-g { transform: translateX(-40px); } .se-prep .se-d { transform: translateX(40px); } .se-prep .se-f { transform: translateY(40px) rotate(-3deg); } .hero-row.se-ouvert .se-entre { opacity: 1; transform: none; } .hero-row.se-ouvert .se-g { transition-delay: .3s; } .hero-row.se-ouvert .se-f { transition-delay: calc(.38s + var(--i, 0) * .08s); } .hero-row.se-ouvert .se-d { transition-delay: .54s; } .se-prep.se-sans-entree .se-entre { transition: none; } .se-voile { position: fixed; inset: 0; z-index: 25; background: rgb(0 0 0 / .55); opacity: 0; pointer-events: none; transition: opacity .5s; } .se-prep-ouverte .se-voile { opacity: 1; pointer-events: auto; } .se-fermer { position: absolute; top: 44px; right: 18px; border: 0; background: none; color: var(--text-dim); font-size: 22px; cursor: pointer; } .se-fermer:hover { color: var(--paper); } /* preparation (variante G, 17 oct.) : un cadre centre qui suit son contenu ; titre sur sa ligne ; films | ticket */ .se-prep { display: grid; grid-template: 1fr / 1fr; place-items: center; padding: 0; gap: 0; background: none; } #heroProgress > .hero-row.se-ouvert { border-color: transparent !important; background: none !important; box-shadow: none !important; } /* le cadre de la preparation flotte seul */ /* le cadre de la preparation porte le contour */ .se-cadre { width: fit-content; min-width: min(760px, 100%); max-width: 100%; height: 100%; display: grid; grid-template: auto 1fr / minmax(0, auto) 300px; background: var(--ink-2, #16161B); border: 1px solid rgb(255 255 255 / .34); } .se-entete { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--ink-5, #303038); font: 600 16px var(--body); color: var(--text-dim); } .se-entete b { font-weight: 800; color: var(--paper); } .se-entete .se-fermer { position: static; padding: 0; font-size: 20px; line-height: 1; color: #E5484D; } .se-entete .se-fermer:hover { color: #FF6B70; } .se-colfilms { min-width: 0; padding: 14px 26px; display: grid; align-content: start; gap: 14px; } .se-soir { margin-right: 6px; font: 800 26px/1 var(--display, var(--body)); color: var(--paper); } .se-durees { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .se-durees button { border: 0; background: none; padding: 2px 4px; color: var(--text-dim); font: 800 17px var(--body); cursor: pointer; } .se-durees button[aria-pressed="true"] { color: var(--paper); box-shadow: inset 0 -3px 0 var(--route-accent); } .se-durees button:hover { color: var(--paper); } .se-durees .se-plus:disabled { opacity: .3; cursor: default; } .se-films { display: flex; gap: 20px; min-width: 0; } .se-films figure { position: relative; flex: 0 1 140px; min-width: 0; margin: 0; text-align: center; } .se-films img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; margin-bottom: 6px; } .se-films figcaption { font-size: 14px; color: var(--text-dim); } .se-retirer { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: #E5484D; color: #fff; font: 800 13px var(--body); cursor: pointer; } .se-question { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 190px; z-index: 2; display: grid; gap: 6px; padding: 10px; background: var(--ink-1); box-shadow: 0 10px 30px rgb(0 0 0 / .6); } .se-question button { border: 0; padding: 6px 8px; background: var(--ink-3, #1E1E24); color: var(--paper); font: 700 13px var(--body); text-align: left; cursor: pointer; } .se-question button:first-child { background: var(--paper); color: #000; } .se-rien { margin: 0; color: var(--text-dim); } .se-ticket { justify-items: stretch; text-align: left; background: var(--ink-3, #1E1E24); border-left: 1px solid var(--ink-5, #303038); padding: 16px 22px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; } .se-pct { justify-self: center; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font: 800 40px/1 var(--display, var(--body)); } .se-avant { color: var(--text-dim); font-weight: 700; } .se-fleche { color: var(--text-dim); font-weight: 400; } #heroProgress .se-ticket .se-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ink-4); font-size: 15px; color: var(--text-dim); } .se-ticket .se-ligne b { color: var(--paper); white-space: nowrap; } .se-ticket .se-ligne .se-sur { color: var(--text-dim); } .se-ticket .se-ligne .se-fleche { margin: 0 6px; } .se-ticket .se-valider { width: 100%; padding: 13px; font-size: 14px; } @media (max-width: 1100px) { .se-cadre { grid-template-columns: minmax(0, auto) 250px; } .se-films { gap: 12px; } .se-pct { font-size: 32px; } .se-recap { gap: 28px; padding: 44px 24px 32px; } } @media (prefers-reduced-motion: reduce) { .se-prep { clip-path: none; opacity: 0; transition: opacity .25s; } .hero-row.se-ouvert > .se-prep { clip-path: none; opacity: 1; } .se-prep .se-entre { transform: none; transition: none; opacity: 1; } } /* recap */ .se-recap { display: flex; justify-content: center; gap: 56px; } .se-recap[hidden] { display: none; } .hero-row.se-recap-ouvert > :not(.se-recap):not(.se-prep) { visibility: hidden; } .se-bloc { display: grid; gap: 14px; justify-items: center; } .se-titre { font: 800 13px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); } .se-ligne { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 700px; } .se-recap figure { width: 120px; margin: 0; display: grid; gap: 4px; justify-items: center; text-align: center; font: 700 14px var(--body); color: var(--paper); } .se-recap img { display: block; width: 120px; aspect-ratio: 2 / 3; object-fit: cover; margin-bottom: 4px; } .se-ok { color: #3FCF6E; } .se-dim { color: var(--text-dim); } .se-note { color: var(--paper); font: 800 15px var(--body); } .se-note i { margin-left: 4px; font-style: normal; color: #F5C518; } .se-choix { display: flex; gap: 4px; } .se-choix button { border: 0; padding: 4px 10px; background: var(--ink-3, #1E1E24); color: var(--paper); font: 700 13px var(--body); cursor: pointer; } .se-choix button:hover { background: var(--paper); color: #000; } .se-trait { width: 1px; align-self: stretch; background: var(--ink-4); } /* ============ Progression (V708) : le tableau de bord ============ A gauche le bouton Seance (un logo + le mot), au centre le film, a droite Complet / Express + « ? », puis le pourcentage, le compteur et le statut du rythme (ou, pendant une seance, le gain). Les routes vivent dans la Bibliotheque ; le bloc de gauche a la hauteur de la pile de droite. */ #suivantStatut { display: none !important; } /* sur PC seulement : le mobile le montre encore */ /* V718 : les routes ouvrent la Bibliotheque - une bande pleine largeur, qui defile avec la page */ html:root #roadmap > .maq-routes.maq-barre-routes { position: static; width: 100%; max-width: none; margin: 56px 0 0; padding: 18px 40px 20px; box-sizing: border-box; background: var(--ink-1); border-block: 1px solid var(--ink-4); } @media (max-width: 1199px) { html:root #roadmap > .maq-routes.maq-barre-routes { overflow-x: auto; scrollbar-width: none; padding-inline: 20px; } } html:root:root #heroProgress > .hero-row { --lh: 155px; grid-template-columns: minmax(0, 1fr) minmax(404px, 444px) minmax(0, 1fr); column-gap: 24px; row-gap: 0; grid-template-rows: 1fr auto auto 1fr auto auto; grid-template-areas: ". suivant ." "seance suivant mode" "seance suivant pct" ". suivant ." "dc dc dc" "duo duo duo"; max-width: 1080px; margin-inline: auto; } @media (min-width: 1300px) { html:root:root #heroProgress > .hero-row { max-width: 1160px; padding-left: 56px; padding-right: 56px; column-gap: 44px; } } html:root:root #heroProgress .maq-gauche { display: contents; } html:root:root #heroProgress .maq-gauche > .se-zone { grid-area: seance; justify-self: center; align-self: stretch; justify-items: center; margin: 0; } html:root:root #heroProgress .maq-gauche.se-en-cours > .se-zone { align-content: space-between; } /* en seance : haut = haut de Complet / Express, bas = bas du gain */ html:root:root #heroProgress .hero-paire #heroParcours { grid-area: mode; justify-self: end; align-self: start; margin: 0 0 34px !important; display: flex; align-items: center; justify-content: flex-end; gap: 10px; } html:root:root #heroProgress #pctMenu { grid-area: pct; justify-self: end; align-self: start; width: auto; margin: 0 !important; align-items: flex-end; text-align: right; } html:root:root #heroProgress #pctMenu #pctBtn { align-self: flex-end; margin-left: 0 !important; margin-right: 0 !important; text-align: right; } html:root:root #heroProgress #pctMenu #heroCompte { text-align: right; } html:root:root #heroProgress #suivant .maq-vignette { width: 64px; height: 96px; } /* Precedent / Prochain : +33 %, le haut ne bouge pas */ /* le bouton Seance : un aplat (le logo choisi dans la roue) et le mot dessous */ .se-zone .se-preparer { margin: 0; padding: 0 10px; align-self: stretch; height: auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; border: 0; background: none; box-shadow: none; color: var(--paper, #F6F4EE); cursor: pointer; } .se-logo { --ar: 1.111; display: block; width: min(170px, calc(var(--lh) * var(--ar))); aspect-ratio: var(--ar); transition: transform .2s; } .se-logo[data-logo="billet"] { --ar: 1.5; } .se-logo[data-logo="clap"] { --ar: 1.011; } .se-logo[data-logo="pellicule"] { --ar: 1.333; } .se-logo svg { display: block; width: 100%; height: 100%; fill: currentColor; } .se-mot { margin: 12px -.24em 0 0; font: 800 18px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; } .se-zone .se-preparer:hover .se-logo { transform: scale(1.06); } .se-zone .se-preparer:focus-visible { outline: 2px solid var(--paper, #F6F4EE); outline-offset: 4px; } /* pendant une seance : le gain remplace le statut (→ 34 % +2 titres) */ .se-gain { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; margin: 8px 0 0; font: 700 14px var(--body); color: #3FCF6E; } .se-gain-fl { color: var(--text-dim, #ABABB5); font-size: 18px; } .se-gain b { font: 800 30px/1 var(--display, var(--body)); } .se-gain em { font-style: normal; font-weight: 800; } /* le statut du rythme : un mot, une pastille ; un clic ouvre le detail */ .pr-statut { order: 3; position: relative; margin: 0; } .hero-row.se-active .pr-statut { display: none; } .pr-pill { display: inline-flex; align-items: center; gap: 9px; padding: 3px 0 0; border: 0; background: none; color: var(--paper, #F6F4EE); font: 700 14px var(--body); cursor: pointer; } .pr-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .pr-pill[data-etat="avance"] i { background: var(--doom-soft, #6BF06B); } .pr-pill[data-etat="juste"] i { background: var(--juste, #E8B04A); } .pr-pill[data-etat="retard"] i { background: #FF5A5A; } .pr-pill:hover { filter: brightness(1.2); } .pr-pill:focus-visible { outline: 2px solid var(--paper, #F6F4EE); outline-offset: 3px; } .pr-pop, .pr-aide-pop { position: absolute; z-index: 30; right: 0; background: var(--ink-1, #101014); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), 0 24px 50px -12px rgb(0 0 0 / .8); } .pr-pop { top: calc(100% + 10px); width: 320px; padding: 6px 18px; text-align: left; } .pr-pop[hidden], .pr-aide-pop[hidden] { display: none; } .pr-pop-l { display: grid; gap: 3px; padding: 13px 0; } .pr-pop-l + .pr-pop-l { border-top: 1px solid rgb(255 255 255 / .1); } .pr-pop-l > span { font: 800 10.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim, #ABABB5); } .pr-pop-l > b { font: 800 19px/1.2 var(--body); color: var(--paper, #F6F4EE); } .pr-pop-l > b.ok { color: var(--doom-soft, #6BF06B); } .pr-pop-l > b.ko { color: #FF5A5A; } .pr-pop-l > small { font-size: 12.5px; line-height: 1.35; color: var(--text-dim, #ABABB5); } /* le « ? » a cote de Complet / Express */ .pr-aide-w { position: relative; flex: none; display: inline-flex; } .pr-aide { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--text-dim, #ABABB5); cursor: pointer; transition: color .15s; } .pr-aide svg { display: block; } .pr-aide:hover, .pr-aide[aria-expanded="true"] { color: var(--paper, #F6F4EE); } .pr-aide:focus-visible { outline: 2px solid var(--paper, #F6F4EE); outline-offset: 3px; border-radius: 50%; } .pr-aide-pop { top: calc(100% + 12px); width: 370px; padding: 4px 22px; text-align: justify; } .pr-aide-s { display: grid; gap: 4px; padding: 16px 0; } .pr-aide-s + .pr-aide-s { border-top: 1px solid rgb(255 255 255 / .1); } .pr-aide-t { font: 500 15px var(--body); color: var(--text-dim, #ABABB5); text-align: left; } .pr-aide-t b { font-weight: 800; color: var(--paper, #F6F4EE); } .pr-aide-s.express .pr-aide-t b { color: var(--doom-soft, #6BF06B); } .pr-aide-n { margin-bottom: 6px; font-size: 12.5px; color: var(--text-dim, #ABABB5); text-align: left; } .pr-aide-s p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2, #D8D8DE); text-align: justify; hyphens: auto; } .pr-aide-pied { margin: 0; padding: 16px 0 14px; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: 12.5px; line-height: 1.45; color: var(--text-dim, #ABABB5); text-align: justify; hyphens: auto; } /* la roue : « Logo de la seance », une ligne avant la Barre de progression */ #pctMenuPop .se-choix-logo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); } #pctMenuPop .se-choix-logo .maq-mot { font-size: 13px; color: color-mix(in srgb, var(--paper) 70%, transparent); white-space: nowrap; } .se-logos { display: flex; gap: 4px; } .se-logos button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: none; color: var(--text-dim, #ABABB5); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; } .se-logos button svg { width: 24px; height: 24px; fill: currentColor; } .se-logos button:hover { box-shadow: inset 0 -2px 0 rgb(255 255 255 / .4); } .se-logos button[aria-pressed="true"] { color: var(--paper, #F6F4EE); box-shadow: inset 0 -2px 0 var(--paper, #F6F4EE); } .se-logos button:focus-visible { outline: 2px solid var(--paper, #F6F4EE); outline-offset: 2px; } /* V709 - la page ne saute plus au chargement : le contenu attend que les scripts l aient bati (`is-pret`, pose par js/refonte.js). Mesure : CLS 0,34 a 0,65 avant, 0 apres. visibility et pas display : les mesures des scripts restent justes. Secours : visible apres 3 s si un script manque. */ html:not(.is-pret) :is(#heroProgress, #roadmap, .site-footer) { visibility: hidden; animation: pret-secours 0s 3s forwards; } } @keyframes pret-secours { to { visibility: visible; } } /* ============ Duo (V710, PC) : un seul tableau de bord ============ Le cadre de Solo englobe tout ; sous Vu / Skip, un filet, puis Romain - synchro - Lea a ecarts egaux. La synchro (js/progression.js) : la fleche est l interrupteur, l etat dessous, puis « ? » et « ⋯ » (Rompre) cote a cote. L ancien panneau #rduoMenu est masque : ses boutons restent la source des gestes. */ @media (min-width: 900px) { html.route-duo #rduoMenu { display: none !important; } html.route-duo #heroProgress > .hero-row { border-color: transparent !important; } html.route-duo #heroProgress > .hero-row::before, html.route-duo #heroProgress > .hero-row::after { bottom: 0; } html.route-duo #heroProgress > .hero-row::after { border-color: rgb(255 255 255 / .34); box-shadow: none; } /* le cadre Solo (plus haut) ; sans ombre : la regle partagee plus haut mettrait son ombre noire */ html.route-duo #heroProgress > .hero-row > #rubanDuo { display: flex !important; align-items: flex-start !important; justify-self: stretch !important; justify-content: center; gap: 24px; width: auto !important; z-index: auto !important; /* les fenetres du tableau de bord (le « ? » de Complet / Express) passent au-dessus */ margin: 28px 0 0 !important; padding: 28px 0 22px !important; background: none !important; border: 0 !important; box-shadow: none !important; } html.route-duo #rubanDuo::before { display: block !important; content: ""; position: absolute; top: 0 !important; left: 12% !important; right: 12% !important; height: 1px; width: auto !important; transform: none !important; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .22) 20% calc(50% - 22px), transparent calc(50% - 22px) calc(50% + 22px), rgb(255 255 255 / .22) calc(50% + 22px) 80%, transparent) !important; } /* coupe au milieu : le bouton + / − y loge */ html.route-duo #rubanDuo > .ruban-cote ~ .ruban-cote { margin-left: 0; } html.route-duo #rubanDuo .ruban-cote { width: 96px; } /* deux colonnes egales : memes ecarts de chaque cote de la synchro */ html.route-duo #rubanDuo .ruban-nom { font-size: 17px; } html.route-duo #rubanDuo #rubanPlus { margin-top: 16px; } /* sans duo : le « + » au milieu de mon embleme (72 px) */ .tb-sync { display: inline-flex; flex-direction: column; align-items: center; min-width: 96px; color: var(--route-accent); font: 600 13px var(--body); } .tb-sync.is-off { color: #FF5A5A; } .tb-fleche { position: relative; display: inline-flex; align-items: center; height: 72px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } /* hauteur d un embleme */ .tb-fleche svg { width: 30px; height: 30px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .tb-fleche:hover svg { transform: rotate(90deg); } .tb-sync.is-off .tb-fleche::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; background: currentColor; transform: rotate(-45deg); } /* barree quand coupee */ .tb-etat-l { position: relative; display: inline-flex; margin-top: 14px; } /* l etat sur la ligne des noms */ .tb-etat { color: var(--text-2); white-space: nowrap; } .tb-actions { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; } .tb-aide-txt, .tb-plus-pop { position: absolute; z-index: 40; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); margin: 0; padding: 10px 12px; background: var(--ink-1); border: 1px solid var(--ink-4); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } .tb-aide-txt { width: 17rem; font: 400 13px/1.45 var(--body); color: var(--text-2); text-align: left; white-space: normal; } .tb-aide-txt p { margin: 0 0 10px; } .tb-aide-txt .tb-sync-q { color: var(--paper); font-weight: 600; } .tb-sync-btns { display: flex; gap: 14px; } .tb-aide-txt button { padding: 0; border: 0; background: none; color: var(--text-2); font: 600 13px var(--body); cursor: pointer; } .tb-aide-txt .tb-sync-go { color: #FF7A7A; } .tb-aide-txt button:hover { color: var(--paper); } .tb-plus { position: relative; display: inline-flex; } .tb-plus-btn { width: 32px; height: 22px; padding: 0; border: 0; background: none; color: var(--text-2); font: 700 20px/1 var(--body); cursor: pointer; } .tb-plus-btn:hover, .tb-plus-btn[aria-expanded="true"] { color: var(--paper); } .tb-plus-pop { white-space: nowrap; } .tb-rompre { padding: 0; border: 0; background: none; color: #FF7A7A; font: 600 14px var(--body); cursor: pointer; } .tb-rompre:hover { color: #FF5A5A; } } @media (min-width: 900px) and (prefers-reduced-motion: reduce) { .tb-fleche svg { transition: none; } } /* ============ Tableau de bord cale sur la grande affiche (V715, PC) ============ La 1re rangee a la hauteur de l affiche : Seance centree dessus, Complet / Express au ras de son haut, le rythme au ras de son bas. Dessous, une rangee sans mots : le rond du statut, le check, la croix (les mots restent pour les lecteurs d ecran). Colonnes de cote centrees : marge au bord = ecart aux petites affiches. */ @media (min-width: 900px) { html:root:root #heroProgress > .hero-row { --aff-h: 192px; grid-template-rows: var(--aff-h) auto auto auto; grid-template-areas: "seance suivant mode" ". suivant ." "dc dc dc" "duo duo duo"; padding-top: 40px; column-gap: 2px; /* 41 px au-dessus de l affiche comme sous la rangee du dessous ; ecart = bord (32 px) - retrait des petites affiches (30 px) */ } html:root:root #heroProgress .maq-gauche:not(.se-en-cours) > .se-zone { align-self: center; translate: 0 -3px; } /* le mot dessous a un interligne vide : on centre l encre */ /* V716 : Seance plus petite (elle ecrasait l affiche) ; a droite une seule colonne centree, aeree sur la hauteur de l affiche : Complet / Express au ras de son haut, le % plus grand et son compteur ensemble, le rythme dessous */ html:root:root #heroProgress .se-zone { zoom: .8; } html:root:root #heroProgress .hero-paire #heroParcours { align-self: start; justify-self: center; margin: 0 !important; } html:root:root #heroProgress #pctMenu { grid-area: mode; align-self: center !important; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 !important; } html:root:root #heroProgress #pctMenu .pct-btn { zoom: 1.4; margin-bottom: 6px !important; } html:root:root #heroProgress #pctMenu :is(.hero-compte, .pr-statut) { align-self: center !important; justify-content: center; margin: 0 !important; translate: none !important; text-align: center; } #heroProgress #suivant > .suivant-texte { flex-direction: row !important; align-items: center; justify-content: center; gap: 14px; } #heroProgress .suivant-texte > .maq-infos { margin: 0 !important; } #heroProgress .suivant-texte > .maq-actions { gap: 6px !important; } #heroProgress .suivant-texte .maq-statut { font-size: 0 !important; gap: 0; padding: 4px; } #heroProgress .suivant-texte .maq-s { width: 16px; height: 16px; } #heroProgress .suivant-texte .maq-actions button { font-size: 0 !important; gap: 0; padding: 6px !important; margin: 0 !important; } #heroProgress .suivant-texte .maq-actions svg { width: 24px; height: 24px; } } @media (min-width: 1300px) { html:root:root #heroProgress > .hero-row { --aff-h: 270px; grid-template-columns: minmax(0, 1fr) minmax(404px, 500px) minmax(0, 1fr); column-gap: 15px; } /* bord 56 px - retrait des petites affiches 41 px */ html:root:root #heroProgress .suivant-affiche { width: 180px; height: var(--aff-h); } html:root:root #heroProgress .se-zone { zoom: 1; } html:root:root #heroProgress .se-logo { width: min(185px, calc(var(--lh) * var(--ar))); } html:root:root #heroProgress :is(#heroParcours, #pctMenu) { zoom: 1.05; } html:root:root #heroProgress #pctMenu { translate: 0 18px; } /* V716 : le bloc du % au milieu de la hauteur libre sous Complet / Express */ } @media (min-width: 900px) and (max-width: 1299px) { html:root:root #heroProgress #pctMenu { gap: 2px; translate: 0 14px; } /* V716 : affiche de 192 px, le bloc du % tient sous Complet / Express */ html:root:root #heroProgress #pctMenu .pct-btn { zoom: 1.1; margin-bottom: 0 !important; } } /* ============ Equipe (V717, PC) : le meme tableau de bord que le Duo ============ Un seul cadre ; sous Vu / Skip, un filet et le « + / − » au milieu (js/progression.js). Dessous : la moitie des membres, l equipe au centre (embleme 108 px contre 58, nom 22 px, roue crantee), l autre moitie, le « + » au bout. --eq-dx (l equipe au centre du cadre) et --eq-plus-dy (le « + » au milieu embleme / nom) sont mesures. */ .grp-titre-roue { display: none; } @media (min-width: 900px) { html.is-vue-groupe #heroProgress > .hero-row { border-color: transparent !important; } html.is-vue-groupe #heroProgress > .hero-row::before, html.is-vue-groupe #heroProgress > .hero-row::after { bottom: 0; } html:root.is-vue-groupe #heroProgress > .hero-row::after { border-color: rgb(255 255 255 / .34); box-shadow: none; } /* le cadre Solo ; sans ombre, comme au-dessus : :root en tete bat l ombre noire de la regle partagee */ html:root.is-vue-groupe #heroProgress > .hero-row > #grpBandeau { position: relative; flex-direction: row !important; align-items: center !important; justify-self: stretch !important; justify-content: center; gap: 20px; width: auto !important; margin: 28px 0 0 !important; padding: 20px 0 22px !important; background: none !important; border: 0 !important; box-shadow: none !important; } #grpBandeau > .tb-filet { position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .22) 20% calc(50% - 22px), transparent calc(50% - 22px) calc(50% + 22px), rgb(255 255 255 / .22) calc(50% + 22px) 80%, transparent); } html:root.is-vue-groupe #grpBandeau > .grp-ligne { display: contents !important; } html:root.is-vue-groupe #grpBandeau > .grp-ligne > .ruban-filet { display: none !important; } html:root.is-vue-groupe #grpBandeau :is(.grp-tete, .grp-ligne > *) { translate: var(--eq-dx, 0px) 0; } html:root.is-vue-groupe #grpBandeau .grp-cote { width: 88px; margin: 0 !important; } html:root.is-vue-groupe #grpBandeau .grp-cote--gauche { order: 1 !important; } html:root.is-vue-groupe #grpBandeau > .grp-tete { order: 2 !important; min-width: 150px; margin: 0 16px !important; } html:root.is-vue-groupe #grpBandeau .grp-cote:not(.grp-cote--gauche) { order: 3 !important; } html:root.is-vue-groupe #grpBandeau .grp-plus { order: 4 !important; align-self: center; margin: 0 0 var(--eq-plus-dy, 0px) !important; } html:root.is-vue-groupe #grpBandeau .grp-ident { flex-direction: column; align-items: center; gap: 8px; margin-top: 0 !important; padding-top: 0 !important; cursor: pointer; } html:root.is-vue-groupe #grpBandeau .grp-ident::before { display: none !important; } html:root.is-vue-groupe #grpBandeau .grp-enseigne { display: inline-flex; align-items: center; justify-content: center; width: 108px !important; height: 108px !important; } html:root.is-vue-groupe #grpBandeau .grp-enseigne svg { width: 84px; height: 84px; } html:root.is-vue-groupe #grpBandeau .grp-titre { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; line-height: 28px; white-space: nowrap; color: var(--paper); } .grp-titre-roue { display: inline-flex; width: 18px; height: 18px; color: var(--text-2); transition: color .2s, rotate .35s cubic-bezier(.2, .8, .2, 1); } .grp-titre-roue svg { width: 18px; height: 18px; } .grp-ident:is(:hover, :focus-visible) .grp-titre-roue { color: var(--paper); rotate: 60deg; } html:root.is-vue-groupe #grpBandeau .grp-sortie { margin-top: 6px !important; } } @media (min-width: 900px) and (max-width: 1299px) { html:root.is-vue-groupe #heroProgress > .hero-row > #grpBandeau { gap: 14px; } html:root.is-vue-groupe #grpBandeau .grp-cote { width: 80px; } /* six membres tiennent a 1000 px */ } @media (min-width: 900px) and (prefers-reduced-motion: reduce) { .grp-titre-roue { transition: none; } } /* ============ Bibliotheque (V719, PC) : la languette de la maquette V18 ============ Grandes affiches ; a gauche de chacune une languette (js/refonte.js) : statut, favori, Vu / Skip, puis les notes sous un trait. 40 px de large, 52 en Duo (pseudos) ; une note vide ne s affiche pas ; la mienne seulement sur un titre vu. Plus de (i) : l affiche ouvre la fiche. */ @media (min-width: 900px) { html:root #roadmap > .saga { width: auto; max-width: none; margin-inline: 40px; } html:root #roadmap.roadmap, html:root #roadmap.roadmap .card { --poster-w: clamp(136px, 11vw, 210px); } html:root #roadmap.roadmap .card.card--dest { --poster-w: clamp(168px, 13.5vw, 250px); } html:root #roadmap .card { --lang: 40px; position: relative; margin-left: var(--lang); } html:root.route-duo #roadmap .card { --lang: 52px; } html:root #roadmap .card :is(.aff-ruban, .card-band), html:root #roadmap .card .info-btn { display: none !important; } html:root #roadmap .card > .lg { position: absolute; top: 0; left: calc(-1 * var(--lang)); width: var(--lang); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background: var(--ink-1); border: 1px solid var(--ink-4); border-right: 0; border-radius: 8px 0 0 8px; } html:root #roadmap .card > .lg > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; } html:root #roadmap .card > .lg > div:empty { display: none; } /* un bloc statut + favori + Vu / Skip au pas de 10 px ; puis les notes sous un trait */ html:root #roadmap .card > .lg > :is(.lg-statut, .lg-fav) { padding: 10px 0 0; } html:root #roadmap .card > .lg > .lg-vu { padding: 10px 0; } html:root #roadmap .card > .lg > .lg-notes { padding: 8px 0; border-top: 1px solid var(--ink-4); } html:root #roadmap .card > .lg > .lg-notes.is-sans { display: none; } html:root #roadmap .card .lg .watch-row { position: static; display: flex; flex-direction: column; gap: 10px; margin: 0; zoom: 1; } html:root #roadmap .card .lg .aff-ruban { display: contents !important; } html:root #roadmap .card .lg :is(.aff-notes, .card-band) { display: flex !important; flex-direction: column; align-items: center; gap: 8px; position: static; margin: 0; padding: 0; background: none; min-height: 0; height: auto; width: 100%; } html:root #roadmap .card .lg .card-band:not(:has(.band-note)), html:root:not(.route-duo) #roadmap .card .lg .card-band { display: none !important; } html:root #roadmap .card .lg :is(.aff-statut, .watch-dot, .watch-skip, .fav-btn, .aff-note, .band-note) { justify-content: center; align-items: center; margin-inline: auto; } html:root #roadmap .card .lg .fav-btn { position: static; opacity: 1; width: 20px; height: 20px; margin: 0; transform: none; } html:root #roadmap .card .lg .status-fanion { width: 15px; height: 15px; } html:root #roadmap .card .lg .status-fanion svg { shape-rendering: geometricPrecision; } html:root #roadmap .card .lg .fanion-bord { display: none; } html:root #roadmap .card .lg .fanion-fond { stroke: none !important; } /* un bord net : pas de liseré sombre */ html:root #roadmap .card .watch-dot:hover { color: var(--doom-soft, #6BF06B); } /* survol = clic : le vert */ /* V725 : centrage optique - le bord gauche de 1 px decalait tout d un demi-pixel, et le grand trait du ✓ le tire a droite */ html:root #roadmap .card > .lg { padding-right: 1px; } html:root #roadmap .card .lg .watch-dot svg { translate: -1px 0; } /* translate, pas transform : le petit rebond du clic reste */ /* le logo « a venir » (cercle de 21 px) ecrasait ses voisins : ramene a leur taille */ html:root #roadmap .card .lg .watch-dot--mark svg { width: 18px; height: 18px; translate: none; } html:root :is(#roadmap .card .lg, .tb-lg) .watch-dot--mark:hover { background: none; } /* comme ✓ ✗ et le coeur : la couleur seule au survol */ /* les notes : une etoile (vide = contour, notee = pleine, couleur de qui note), le chiffre, le pseudo */ html:root #roadmap .card .lg :is(.aff-note, .band-note, .band-grp) { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 0; } html:root #roadmap .card .lg :is(.aff-note, .band-note) { position: relative !important; } /* leur halo de survol (::after en absolu) volait le clic de Vu / Skip */ html:root #roadmap .card .lg :is(.aff-note, .band-note):hover { background: none !important; } html:root #roadmap .card .lg :is(.aff-note, .band-note) svg { order: 0; width: 15px !important; height: 15px !important; } html:root #roadmap .card .lg :is(.aff-note, .band-note) svg path { stroke-width: 1.7px; stroke: currentColor; } html:root #roadmap .card .lg :is(.aff-note.is-vide, .band-note:not(.is-rated)) svg path { fill: none !important; } html:root #roadmap .card .lg :is(.aff-note:not(.is-vide), .band-note.is-rated) svg path { fill: currentColor !important; } html:root #roadmap .card .lg :is(.aff-val, .band-value) { order: 1; font-size: 14px !important; line-height: 1; color: var(--paper) !important; } html:root #roadmap .card .lg :is(.is-vide .aff-val, .band-note:not(.is-rated) .band-value) { display: none; } html:root #roadmap .card .lg .aff-com { color: var(--text-dim); } html:root #roadmap .card .lg :is(.aff-moi, .band-mine) { color: var(--star-mine); } html:root #roadmap .card .lg .band-duo { color: var(--star-duo); } html:root #roadmap .card .lg .band-grp .profile-avatar { width: 34px !important; height: 34px !important; } html:root #roadmap .card .lg .band-qui { order: 2; display: block; position: static !important; transform: none !important; margin: 2px 0 0; font: 700 11px/1.1 var(--body); letter-spacing: 0; color: var(--paper); max-width: calc(var(--lang) - 4px) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* une note vide ne s affiche pas ; la mienne seulement sur un titre vu ; en Equipe pas de communaute */ html:root #roadmap .card .lg :is(.aff-com.is-vide, .band-duo:not(.is-rated), .band-grp:not(.is-rated)), html:root #roadmap .card:not(.is-watched) .lg :is(.aff-moi, .band-mine), html:root.is-vue-groupe #roadmap .card .lg .aff-com { display: none !important; } html:root #roadmap .card .poster-btn:is(:hover, :focus-visible) { box-shadow: none; } } @media (min-width: 900px) and (hover: hover) and (pointer: fine) { html:root #roadmap .card .lg :is(.watch-dot, .watch-skip) { height: 24px; min-height: 0; } html:root #roadmap .card .lg .aff-statut { min-height: 0; height: auto; margin: 0; } html:root #roadmap .card .lg :is(.aff-note, .band-note) { min-height: 24px; margin: 0; } } /* ============ Fiche (V721, PC) : la maquette _maquettes/fiche.html V7 ============ Les noeuds sont ranges par js/refonte.js ; ici seulement la disposition. */ @media (min-width: 900px) { #modal > .modal-panel { width: min(1100px, calc(100vw - 2.2rem)); } #modal .modal-body { gap: 40px; } #modal .modal-close { border: 0 !important; background: none; color: var(--danger); font-size: 30px; } #modal .modal-close:hover { color: var(--paper); } /* ce que la fiche ne montre plus */ #modal :is(#modalRetenirFold, #modalExtrasFold, #modalSpoilerFold) { display: none !important; } /* colonne de gauche : l affiche sans cadre, une rangee ♥ ✓ ✗ centree, les notes en pile */ #modal .modal-visual { width: clamp(220px, 28%, 300px); align-self: stretch; gap: 14px; } #modal .modal-poster { border: 0; width: 100%; } #modal .fl-cadre { display: flex; flex-direction: column; gap: 12px; } #modal .fl { display: grid; grid-template-columns: 1fr auto auto 1fr; column-gap: 18px; row-gap: 14px; } #modal .fl > :is(.fl-fav, .fl-vu) { grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 32px; } #modal .fl > .fl-fav { grid-column: 2; } #modal .fl > .fl-vu { grid-column: 3; } #modal .fl :is(.fl-fv, .fiche-paire > *) { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: none; line-height: 0; font-size: 0; cursor: pointer; color: var(--text-dim); } #modal .fl :is(.fl-fv, .fiche-paire) svg { display: block; width: 20px; height: 20px; margin: 0; } #modal .fl .fiche-paire > * > :not(svg) { display: none; } #modal .fl .fiche-paire { display: flex; align-items: center; gap: 10px; height: 28px; margin: 0; } #modal .fl .fiche-paire > [hidden] { display: none; } #modal .fl-fv svg { fill: none; stroke: currentColor; stroke-width: 1.8; } #modal .fl-fv:hover, #modal .fl-fv[aria-pressed="true"] { color: var(--fav); } #modal .fl-fv[aria-pressed="true"] svg { fill: currentColor; } #modal .fl #modalStatus:hover, #modal .fl #modalStatus[aria-pressed="true"] { color: var(--doom-soft, #6BF06B); } /* survol = clic : le vert */ #modal .fl #modalSkip:hover, #modal .fl.is-skip #modalSkip { color: var(--danger); } #modal .fl.is-vu #modalSkip, #modal .fl.is-skip #modalStatus { display: none !important; } #modal .fl #ficheDate { flex: none; width: auto; margin: 0; font-size: 13px; line-height: 28px; white-space: nowrap; } #modal .fl #ficheDate b { color: var(--paper); font-weight: 700; } /* notes : etoile (et valeur) puis le nom dessous, une note par ligne ; contour = vide, pleine = notee, couleur de qui note */ #modal .fl > .fl-notes { grid-column: 1 / -1; grid-row: 2; padding-top: 12px; border-top: 1px solid var(--ink-4); } #modal .fl .scores { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 0; border: 0; } #modal .fl .score { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; width: auto; background: none; } #modal .fl .score[hidden] { display: none; } #modal .fl .score::before, #modal .fl .score::after { display: none; } #modal .fl .score--mine { order: 1; } #modal .fl :is(.score--duo, .score--groupe) { order: 2; } #modal .fl .score-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; height: 20px; margin: 0; } #modal .fl .score-star { width: 18px; height: 18px; } #modal .fl .score-star path { stroke: currentColor; stroke-width: 1.7px; fill: currentColor; } #modal .fl .score.is-empty .score-star path { fill: none; } #modal .fl .score.is-empty :is(.score-val, .score-value) { display: none; } #modal .fl .score-emb { width: 20px !important; height: 20px !important; margin: 0; } #modal .fl :is(.score-val, .score-value, .score-select) { font-size: 15px; line-height: 1; color: var(--paper); } #modal .fl .score-src { display: block; margin: 0; padding: 0; font: 600 10px/14px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } #modal .fl :is(.score--mine, .score--duo, .score--groupe) .score-src { color: var(--text); } /* V730 : un nom se lit d abord, en clair */ #modal .fl .score--community { color: var(--text-dim); } #modal .fl .score--mine { color: var(--star-mine); } #modal .fl .score--duo { color: var(--star-duo); } #modal .fl .score-select { appearance: none; -webkit-appearance: none; width: auto; padding: 0; border: 0; background: none; text-align: center; cursor: pointer; } /* ma note vide : l etoile en contour, toute la case reste le menu de note */ #modal .fl .score--mine:has(option:checked[value=""]) .score-select { position: absolute; inset: 0; width: 100%; height: 100%; color: transparent; } #modal .fl .score--mine:has(option:checked[value=""]) .score-star path { fill: none; } /* colonne de droite : titre, phase . annee puis statut, synopsis, details, casting, Regarder */ #modal .modal-eyebrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 8px; row-gap: 6px; text-align: center; } #modal .modal-eyebrow #modalStatusText { order: 2; flex: 0 0 100%; display: flex; justify-content: center; margin: 0; } #modal .modal-texte { margin: 16px 0 0; } #modal .modal-synopsis { font-size: 16px; line-height: 1.6; text-align: left; hyphens: none; } #modal .meta--status { margin-top: 0; } #modal .meta--details { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 18px; } #modal .meta--details .meta-cell { align-items: center; padding-inline: 8px; text-align: center; } #modal .meta--details .meta-cell :is(dt, dd) { margin-inline: auto; text-align: center; } #modal .folds { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ink-4); } /* le casting se voit d emblee : titre, trois roles, « Voir tout » */ #modal #modalCastFold > summary { pointer-events: none; list-style: none; padding: 0; margin-bottom: 14px; font: 800 13px/1 var(--display, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } #modal #modalCastFold > summary::-webkit-details-marker { display: none; } #modal #modalCastFold > summary .fold-sign { display: none; } #modal #modalCastFold .cast-tout { color: var(--phase-accent, #1E9BFF); font: 700 13px var(--body); } #modal .cast-tout { margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer; } #modal .cast-tout:hover { text-decoration: underline; } #modal .fv-ou { margin: 26px 0 0; font: 800 13px/1 var(--display, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } #modal .fv-regarder { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; } #modal .fv-regarder > .links { display: flex; flex-direction: row; gap: 16px; margin: 0; } #modal .fv-regarder > .links > * { display: flex; align-items: center; width: auto; height: 40px; margin: 0; border: 0; } #modal .fv-regarder > .links > :first-child { padding: 0 22px; } #modal .fv-regarder > .fold--signal { margin: 0; padding: 0; } #modal .fold--signal .fold-head:hover, #modal .fold--signal[open] .fold-head { background: none; } } /* ============ Tableau de bord (V746, PC) : la maquette _maquettes/tableau.html V7 ============ Sous la grande affiche, une rangee copiee de la languette de la carte (js/refonte.js) : statut | coeur Vu Skip | notes. La languette de la Bibliotheque suit : statut en carre dans sa case, coeur / Vu / Skip gris et reguliers, notes au meme dessin en Solo et Duo. html.tb est pose par js/refonte.js (PC seulement). */ @media (min-width: 900px) { /* ---- V2 : la languette a cote de la grande affiche (Vu / Skip et statut y vivent, plus dessous) ---- */ html.tb #suivant { position: relative; overflow: visible; } html.tb #suivant .tb-lg { --lang: 40px; position: absolute; left: calc(-1 * var(--lang)); top: 0; z-index: 2; } html.tb.route-duo #suivant .tb-lg { --lang: 52px; } html.tb #suivant :is(.maq-actions, .maq-statut) { display: none !important; } /* la languette, partout (tableau de bord et Bibliotheque) : la meme que dans la Bibliotheque */ html.tb .tb-lg { display: flex; flex-direction: column; align-items: center; width: var(--lang); box-sizing: border-box; padding-right: 1px; background: var(--ink-1); border: 1px solid var(--ink-4); border-right: 0; border-radius: 8px 0 0 8px; } html.tb .tb-lg > div { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } html.tb .tb-lg > div:empty, html.tb .tb-lg > .lg-notes.is-sans { display: none; } html.tb .tb-lg > :is(.lg-statut, .lg-fav) { padding: 10px 0 0; } html.tb .tb-lg > .lg-vu { padding: 10px 0; } html.tb .tb-lg > .lg-notes { padding: 8px 0; border-top: 1px solid var(--ink-4); } html.tb .tb-lg .watch-row { position: static; display: flex; flex-direction: column; gap: 10px; margin: 0; } html.tb .tb-lg :is(.aff-ruban) { display: contents !important; } html.tb .tb-lg :is(.aff-notes, .card-band) { display: flex !important; flex-direction: column; align-items: center; gap: 8px; position: static; margin: 0; padding: 0; background: none; height: auto; width: 100%; } html.tb:not(.route-duo) .tb-lg .card-band { display: none !important; } html.tb .tb-lg .fav-btn { position: static; opacity: 1; width: 20px; height: 20px; margin: 0; transform: none; } html.tb .tb-lg .status-fanion { width: 15px; height: 15px; } html.tb .tb-lg .fanion-bord { display: none; } html.tb .tb-lg :is(.aff-note, .band-note, .band-grp) { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 0; background: none; } html.tb .tb-lg :is(.aff-com.is-vide, .band-duo:not(.is-rated), .band-grp:not(.is-rated)) { display: none !important; } /* ---- V2 : UNE seule note, partout (Solo, Duo, Equipe ; tableau de bord et Bibliotheque) : le dessin du Duo, encore affine ---- */ html.tb:root :is(#roadmap .card .lg, .tb-lg) .aff-ruban { zoom: 1 !important; } /* le Solo etait agrandi de 10 % (zoom 1.1) : c est l ecart avec le Duo */ html.tb .tb-lg :is(.aff-note, .band-note) svg { order: 0; } html.tb .tb-lg :is(.aff-val, .band-value) { order: 1; } html.tb .tb-lg .band-qui { order: 2; } html.tb:root :is(#roadmap .card .lg, .tb-lg) :is(.aff-note, .band-note) svg { width: 14px !important; height: 14px !important; } html.tb:root :is(#roadmap .card .lg, .tb-lg) :is(.aff-note, .band-note) svg path { stroke-width: 1.3px !important; stroke: currentColor !important; } html.tb:root :is(#roadmap .card .lg, .tb-lg) :is(.aff-val, .band-value) { font: 500 13px/1 var(--body) !important; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--text-2) !important; } html.tb:root :is(#roadmap .card .lg, .tb-lg) .band-qui { font: 500 10px/1.1 var(--body) !important; color: var(--text-dim) !important; text-decoration: none !important; } /* ---- V2 : couleurs - une seule teinte pour les etoiles ; la couleur vive ne vient que d un etat allume ---- */ html.tb:root :is(#roadmap .card .lg, .tb-lg) .fav-btn:not([aria-pressed="true"]) { color: var(--text-dim); } html.tb:root :is(#roadmap .card .lg, .tb-lg) .watch-dot:not([aria-pressed="true"]) { color: var(--text-dim); } /* ================= V3 : les etoiles gardent leurs couleurs ; on calme le reste ================= */ /* le statut n est plus un carre plein : un trait de sa couleur en haut de la languette (il s ouvre toujours au clic) */ html.tb:root :is(#roadmap .card .lg, .tb-lg) > .lg-statut { padding: 0 !important; } html.tb:root :is(#roadmap .card .lg, .tb-lg) .aff-statut { width: 100%; height: 12px !important; min-height: 0 !important; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; } html.tb:root :is(#roadmap .card .lg, .tb-lg) .status-fanion { display: block; width: 100%; height: 3px; border-radius: 7px 0 0 0; background: var(--tb-statut, var(--text-dim)); } html.tb:root :is(#roadmap .card .lg, .tb-lg) .status-fanion svg { display: none; } html.tb .status-fanion--required { --tb-statut: var(--statut-requis); } html.tb .status-fanion--recommended { --tb-statut: var(--statut-suggere); } html.tb .status-fanion--bonus { --tb-statut: var(--statut-optionnel); } /* favori, Vu, Skip : une colonne reguliere (6 px entre chaque), gris tant qu ils ne sont pas actifs */ html.tb:root :is(#roadmap .card .lg, .tb-lg) > .lg-fav { padding: 4px 0 0 !important; } html.tb:root :is(#roadmap .card .lg, .tb-lg) > .lg-vu { padding: 6px 0 10px !important; } html.tb:root :is(#roadmap .card .lg, .tb-lg) .watch-row { gap: 6px !important; zoom: 1 !important; } html.tb:root :is(#roadmap .card .lg, .tb-lg) :is(.fav-btn, .watch-dot, .watch-skip) { width: 24px !important; height: 24px !important; min-height: 0; padding: 0; margin: 0 auto; } html.tb:root :is(#roadmap .card .lg, .tb-lg) .fav-btn:not([aria-pressed="true"]), html.tb:root :is(#roadmap .card .lg, .tb-lg) .watch-dot:not([aria-pressed="true"]), html.tb:root :is(#roadmap .card .lg, .tb-lg) .watch-skip:not([aria-pressed="true"]) { color: var(--text-dim) !important; } /* Equipe : plus d embleme colore ; l etoile garde la couleur du membre, son pseudo dessous */ html.tb:root :is(#roadmap .card .lg, .tb-lg) .band-grp .profile-avatar { display: none !important; } /* tableau de bord : pas de languette sur le cote, une rangee sous la grande affiche */ html.tb #suivant .tb-lg.tb-rang { --lang: auto; flex-direction: row; justify-content: center; align-items: center; gap: 14px; height: 40px; padding: 0 12px; border: 1px solid var(--ink-4); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: inset 0 10px 12px -10px rgb(0 0 0 / .9); } html.tb #suivant .tb-rang > div { flex-direction: row; width: auto; gap: 6px; padding: 0 !important; border: 0 !important; } html.tb #suivant .tb-rang .watch-row { flex-direction: row; } html.tb #suivant .tb-rang :is(.aff-notes, .card-band) { flex-direction: row !important; gap: 12px; width: auto; } html.tb #suivant .tb-rang > .lg-notes { padding-left: 14px !important; border-left: 1px solid var(--ink-4) !important; } html.tb #suivant .tb-rang :is(.aff-note, .band-note) { flex-direction: row; gap: 4px; } html.tb #suivant .tb-rang > .lg-statut { position: absolute; left: 0; right: 0; top: -2px; } /* le trait du statut borde le haut de la rangee */ html.tb #suivant .tb-rang .status-fanion { border-radius: 0; } html.tb #suivant .tb-rang .band-qui { max-width: none !important; margin: 0 0 0 2px !important; } /* la rangee : sans cadre, toutes les icones sur la meme ligne (le coeur etait plus bas que ✓ ✗) */ html.tb #suivant .tb-lg.tb-rang { border: 0 !important; box-shadow: none !important; background: none !important; } html.tb #suivant .tb-rang :is(.lg-fav, .lg-vu, .watch-row, .lg-notes) { height: 24px; align-items: center; } html.tb:root #suivant .tb-rang > :is(.lg-fav, .lg-vu) { padding-top: 0 !important; padding-bottom: 0 !important; } /* le coeur descendait de 4 px */ html.tb #suivant .tb-rang :is(.fav-btn, .watch-dot, .watch-skip) { display: flex; align-items: center; justify-content: center; } html.tb #suivant .tb-rang :is(.fav-btn, .watch-dot, .watch-skip) svg { width: 18px; height: 18px; } /* ---- V5 : le statut ecrit (point + mot) ; dans la languette, le point seul ---- */ html.tb:root :is(#roadmap .card .lg, .tb-lg) .aff-statut { height: auto !important; padding: 10px 0 0; display: flex; justify-content: center; } html.tb:root :is(#roadmap .card .lg, .tb-lg) .status-fanion { width: 7px; height: 7px; border-radius: 50%; } html.tb:root #suivant .tb-rang > .lg-statut { position: static; order: -1; } html.tb:root #suivant .tb-rang .aff-statut { padding: 0; gap: 6px; align-items: center; width: auto; } html.tb:root #suivant .tb-rang .aff-statut::after { content: attr(data-mot); font: 500 13px/1 var(--body); color: var(--text-dim); position: static; inset: auto; } html.tb:root #suivant .tb-rang > .lg-fav { padding-left: 14px !important; border-left: 1px solid var(--ink-4) !important; } } /* ---- V7 : le carre de statut du site (couleur), isole dans sa case par un trait ---- */ @media (min-width: 900px) { html.tb:root :is(#roadmap .card .lg, .tb-lg) .status-fanion { width: 12px; height: 12px; border-radius: 3px; background: var(--tb-statut); } html.tb:root #roadmap .card .lg > .lg-statut { padding: 9px 0 8px !important; border-bottom: 1px solid var(--ink-4); } html.tb:root #roadmap .card .lg .aff-statut { padding: 0; } html.tb:root #roadmap .card .lg > .lg-fav { padding-top: 8px !important; } html.tb:root #suivant .tb-rang > .lg-fav { border-left-color: var(--ink-4) !important; } } /* ---- rangee du tableau de bord : trois cases aux marges egales, icones de meme taille et meme gris ---- */ @media (min-width: 900px) { html.tb:root #suivant .tb-lg.tb-rang { gap: 0 !important; } html.tb:root #suivant .tb-lg.tb-rang > :is(.lg-statut, .lg-fav, .lg-vu, .lg-notes) { padding: 0 14px !important; gap: 6px !important; } html.tb:root #suivant .tb-lg.tb-rang > .lg-vu.lg-vu { padding-left: 0 !important; } html.tb:root #suivant .tb-lg.tb-rang > .lg-fav.lg-fav { padding-right: 6px !important; } /* coeur, ✓, ✗ : 6 px entre chacun, comme une seule case */ html.tb:root #suivant .tb-rang > :is(.lg-fav, .lg-notes) { border-left: 1px solid var(--ink-4) !important; } html.tb:root #suivant .tb-rang .watch-row { gap: 6px !important; } html.tb:root #suivant .tb-rang :is(.fav-btn, .watch-dot, .watch-skip) svg { width: 18px !important; height: 18px !important; } html.tb:root #suivant .tb-rang .fav-btn:not([aria-pressed="true"]) svg path { stroke: currentColor !important; } } @media (min-width: 900px) { /* la rangee prend la largeur de son contenu, centree sous l affiche (elle etait serree dans la largeur de l affiche) */ html.tb:root #suivant .tb-lg.tb-rang { width: max-content !important; translate: -50% 0; } } @media (min-width: 900px) { /* alignement : le carre du statut et le coeur sur la meme ligne que ✓ ✗ et les notes */ html.tb:root #suivant .tb-lg.tb-rang .aff-statut.aff-statut { display: inline-flex !important; align-items: center; height: 24px !important; padding: 0 !important; } html.tb:root #suivant .tb-rang .status-fanion { margin: 0 !important; flex: none; } } /* #suivant est rendu inerte au clic par le site (pointer-events: none) : la rangee et la languette doivent rester cliquables */ html.tb #suivant .tb-lg { pointer-events: auto; } /* rangee du tableau de bord : les etats et survols de la Bibliotheque (leurs regles visent #roadmap .card, pas la copie) */ @media (min-width: 900px) { html.tb:root #suivant .tb-rang .fav-btn:is(:hover, [aria-pressed="true"]) { color: var(--fav) !important; } html.tb:root #suivant .tb-rang .fav-btn[aria-pressed="true"] svg path { fill: var(--fav) !important; stroke: var(--fav) !important; } html.tb:root #suivant .tb-rang .fav-btn:hover svg path { stroke: var(--fav) !important; } html.tb:root #suivant .tb-rang .watch-dot:is(:hover, [aria-pressed="true"]) { color: var(--doom-soft, #6BF06B) !important; } html.tb:root #suivant .tb-rang .watch-skip:is(:hover, [aria-pressed="true"]) { color: var(--danger) !important; } html.tb:root #suivant .tb-rang :is(.fav-btn, .watch-dot, .watch-skip) { cursor: pointer; background: none; border: 0; } } /* l ancien Vu / Skip du tableau de bord revenait sur un film deja vu (regle du site plus forte) : cache pour de bon */ html.tb:root #heroProgress #suivant .suivant-texte > .maq-actions.maq-actions { display: none !important; } /* V747 : l ordre du geste - statut, vu ou pas (✓ ✗), favori, notes. Le DOM ne bouge pas (les clics de la copie suivent l index) */ @media (min-width: 900px) { html.tb:root :is(#roadmap .card .lg, .tb-lg) > .lg-fav { order: 1; } html.tb:root :is(#roadmap .card .lg, .tb-lg) > .lg-notes { order: 2; } html.tb:root #roadmap .card .lg > .lg-vu.lg-vu { padding: 8px 0 0 !important; } html.tb:root #roadmap .card .lg > .lg-fav.lg-fav { padding: 6px 0 10px !important; } html.tb:root #suivant .tb-lg.tb-rang > .lg-vu.lg-vu { padding: 0 6px 0 14px !important; border-left: 1px solid var(--ink-4) !important; } html.tb:root #suivant .tb-lg.tb-rang > .lg-fav.lg-fav { padding: 0 14px 0 0 !important; border-left: 0 !important; } /* languette affinee : les icones de la rangee du tableau de bord, une colonne de 36 px, autant d air en haut qu sur les cotes ; la cible de clic reste 24 px (WCAG 2.5.8). Duo garde 52 px : ses deux notes */ html.tb:root:not(.route-duo) #roadmap .card { --lang: 36px; } html.tb:root #roadmap .card .lg :is(.fav-btn, .watch-skip) svg { width: 18px !important; height: 18px !important; } /* le ✓ est un trait fin sans surface (et reduit a .86 tant qu il n est pas coche) : a 22 px il pese autant que le ✗ et le coeur */ html.tb:root :is(#roadmap .card .lg, #suivant .tb-rang) .watch-dot:not(.watch-dot--mark) svg { width: 22px !important; height: 22px !important; } html.tb:root #roadmap .card .lg .watch-row { gap: 0 !important; } html.tb:root #roadmap .card .lg > .lg-vu.lg-vu { padding: 6px 0 0 !important; } html.tb:root #roadmap .card .lg > .lg-fav.lg-fav { padding: 0 0 6px !important; } }