/* ========================================================================= * * accueil-v2.css — accueil en deux ecrans. * * Parti pris : la console d'un poste de pilotage. Panneaux a coins arrondis * cercles d'un liseré d'ambre — les memes .box-text.corner-box que le reste du * site —, libellés en monospace très espacé, valeurs en bleu froid. Le * vocabulaire est celui des ecrans multifonctions du jeu, pas celui d'une * grille de cartes. * * Tout est porte par .accueil-v2 sur : la page reutilise le gabarit du * heros de l'accueil historique (.page-title / .slider-st2 / .box-slider) et en * modifie la mise en page. Sans ce prefixe, les surcharges toucheraient toutes * les pages qui partagent ces classes. * ========================================================================= */ .accueil-v2 { --edv2-accent: #fa6d00; --edv2-accent-hot: #ffa14d; --edv2-accent-soft: rgba(250, 109, 0, 0.14); --edv2-ice: #7fd4ff; --edv2-live: #4ade80; --edv2-void: #05060a; --edv2-panel-a: rgba(21, 17, 12, 0.93); --edv2-panel-b: rgba(7, 9, 13, 0.95); --edv2-frame: rgba(250, 109, 0, 0.52); --edv2-frame-dim: rgba(250, 109, 0, 0.17); --edv2-text: #cdcdd6; --edv2-text-dim: #7e7f8b; --edv2-gutter: clamp(16px, 2.2vw, 34px); /* Le vocabulaire de forme du reste du site : ce sont les valeurs exactes de .box-text.corner-box (app.css), rayon compris, pour que le poste de commandement ne se lise pas comme une piece rapportee. */ --edv2-radius: 8px; --edv2-edge: rgba(250, 109, 0, 0.15); --edv2-edge-hot: rgba(250, 109, 0, 0.35); --edv2-glow: rgba(250, 109, 0, 0.18); /* Le noir de fond reste sur : le rendre transparent laisserait le canevas de la page peindre du blanc, le document n'ayant aucun autre fond. */ background-color: #05060a; } /* Le mode verite troque l'ambre du site contre son vert. */ .accueil-v2.verite { --edv2-accent: #20caa0; --edv2-accent-hot: #6ff0cd; --edv2-accent-soft: rgba(32, 202, 160, 0.14); --edv2-ice: #9ae7ff; --edv2-frame: rgba(32, 202, 160, 0.52); --edv2-frame-dim: rgba(32, 202, 160, 0.17); --edv2-edge: rgba(32, 202, 160, 0.15); --edv2-edge-hot: rgba(32, 202, 160, 0.35); --edv2-glow: rgba(32, 202, 160, 0.18); } /* ------------------------------------------------------------------------- * * Le ciel, fond fixe de TOUTE la page * ------------------------------------------------------------------------- */ /* * Pose sous le document et non dans le heros : le meme ciel porte les deux * ecrans et le pied de page, sans couture ni changement de fond au passage. * Le canevas etant fixe, sa surface reste celle de la fenetre quelle que soit * la longueur de la page. */ .accueil-v2 .edv2-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .accueil-v2.verite .edv2-sky { } .accueil-v2 .edv2-sky canvas { display: block; } /* * Le theme pose overflow:hidden sur #wrapper. Un ancetre qui rogne annule * position:sticky pour toute sa descendance : le pont ne se serait jamais colle * en haut, et le saut en hyperespace aurait defile comme une page ordinaire. * Rien ne deborde lateralement sur cette page — le pont rogne lui-meme le heros * pendant qu'il s'agrandit — donc on peut rendre le debordement visible. */ .accueil-v2 #wrapper { position: relative; z-index: 1; overflow: visible; height: auto; } /* * Le menu du theme se derobe au defilement : il passe en fixe a 200 px, remonte * hors cadre, puis redescend en version courte avec un fond floute. Sur cette * page il reste simplement la, en haut, sans aplat — le ciel passe dessous. * * Les !important sont necessaires : le theme cible #header_main.is-fixed * .is-fixed.is-small, une specificite qu'un selecteur de page ne depasse pas * sans repeter les memes classes. */ .accueil-v2 #header_main, .accueil-v2 #header_main.is-fixed, .accueil-v2 #header_main.is-fixed.is-small { position: fixed !important; top: 0 !important; left: 0; width: 100%; height: 108px !important; opacity: 1 !important; visibility: visible !important; background: none !important; background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border-bottom: 0 !important; transition: none !important; } /* Le filet lumineux qui balayait le menu a son apparition n'a plus lieu d'etre. */ .accueil-v2 #header_main.is-fixed.is-small::after { display: none !important; } /* * Le pied de page laisse voir le ciel plutot que de poser un aplat dessus. Il * est desormais le dernier enfant du poste de commandement : il en suit la * gouttiere et se serre, puisqu'il doit tenir dans la meme fenetre que la * grille. */ .accueil-v2 #footer { flex: 0 0 auto; margin-top: clamp(10px, 1.4vh, 18px); padding-top: clamp(8px, 1.1vh, 14px); background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.05); } .accueil-v2 #footer .footer-bottom { background: transparent; border-top: 0; padding: 0; } .accueil-v2 #footer .footer-bottom .container { max-width: none; padding: 0; } /* Selecteur complet : le theme cible #footer .footer-bottom .wrap-fx .Copyright p, qu'un chemin plus court ne depasse pas. */ .accueil-v2 #footer .footer-bottom .wrap-fx .Copyright p { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; line-height: 1.5; color: var(--edv2-text-dim); } /* ------------------------------------------------------------------------- * * La scene : deux ecrans superposes * ------------------------------------------------------------------------- */ /* * Etat par defaut, sans script ou sur petite fenetre : deux ecrans empiles qui * defilent normalement. La classe edv2-warp, posee par le script quand la place * le permet, bascule sur le pont colle. */ .accueil-v2 .edv2-deck { position: relative; } .accueil-v2 .edv2-hero, .accueil-v2 .edv2-hub { position: relative; } .edv2-warp .accueil-v2 .edv2-stage, html.edv2-warp .edv2-stage { /* * Une hauteur de fenetre pour le pont colle, plus les 86 pour cent que vise la * fin de course automatique : c'est le strict necessaire. * * La scene mesurait 260 vh, soit pres de deux ecrans de defilement a vide une * fois le saut fini — et le pied de page arrivait encore apres. Le pied ayant * rejoint le poste de commandement (voir index.php), il n'y a plus rien a * atteindre : la page est complete au moment ou le saut se termine, et le * defilement s'arrete la. */ height: 186vh; height: 186svh; } html.edv2-warp .edv2-deck { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } html.edv2-warp .accueil-v2 .edv2-hero, html.edv2-warp .accueil-v2 .edv2-hub { position: absolute; inset: 0; /* Une marge du theme decalerait la boite malgre inset:0. */ margin: 0; min-height: 0; } /* --- le heros part vers l'avant ------------------------------------------ */ /* * Le contenu file vers le spectateur pendant que le ciel s'etire : titre et * station grandissent et s'effacent, comme la charge d'un saut. Rien ne se * translate vers le haut, donc rien ne se lit comme un defilement. * * Les valeurs elles-memes (echelle, opacite) sont ecrites image par image en * style en ligne par accueil-v2.js. Le CSS ne pose ici que ce qui ne bouge pas. * Il n'y a plus de flou : faire varier un rayon de flou a chaque image force la * re-rasterisation complete du calque, ce qui coutait des saccades pour un effet * devenu presque invisible depuis que le saut a ete adouci. */ html.edv2-warp .accueil-v2 .edv2-hero .content-box { transform-origin: 22% 50%; } /* * `will-change` n'est pose que tant que le saut peut encore jouer — c'est la * classe edv2-lift, que le script retire des que la course est terminee. Le * laisser en permanence maintenait quatre calques de compositeur, dont un plein * ecran pour le poste de commandement, pendant tout le temps ou le visiteur lit * la page sans plus jamais remonter. * * Il est en revanche pose DES le chargement, et non au premier pixel de * defilement : creer les calques au moment ou l'on commence a s'en servir * coute precisement l'a-coup qu'on cherche a eviter. */ html.edv2-warp.edv2-lift .accueil-v2 .edv2-hero .content-box, html.edv2-warp.edv2-lift .accueil-v2 .edv2-hero .coriolis, html.edv2-warp.edv2-lift .accueil-v2 .edv2-hero .verite-coriolis, html.edv2-warp.edv2-lift .accueil-v2 .edv2-hub { will-change: transform, opacity; } /* * Le chevron gardait `pointer-events: none` pendant TOUT le saut, y compris a * l'arret au sommet de la page : le clic ne partait donc jamais. Il ne perd le * curseur qu'une fois le poste de commandement aux commandes, comme le heros * juste en dessous. */ html.edv2-warp .edv2-deck.is-jumped .edv2-cue { pointer-events: none; } /* * La station reste manipulable a la souris tant que le saut n'a pas bascule : * couper le curseur des le premier pixel de defilement enlevait a la banniere * ce qu'elle a de vivant. C'est le script qui pose « is-jumped » a mi-course, * quand le poste prend la main. */ html.edv2-warp .accueil-v2 .edv2-hero { pointer-events: auto; } html.edv2-warp .edv2-deck.is-jumped .edv2-hero { pointer-events: none; } /* --- le hub se materialise ----------------------------------------------- */ html.edv2-warp .accueil-v2 .edv2-hub { opacity: 0; pointer-events: none; } /* * Sous saut, les panneaux ne jouent PAS leur cascade : c'est le poste entier * qui monte en opacite et en echelle, la cascade ferait double emploi. Elle * coutait surtout six transitions de grand panneau demarrees en pleine * glissade, soit un a-coup mesurable au moment le plus visible. Elle reste en * place hors saut, ou elle est la seule apparition. */ html.edv2-warp .accueil-v2 .edv2-tile, html.edv2-warp .accueil-v2 .edv2-hub.is-revealed .edv2-tile { opacity: 1; transform: none; animation: none; transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } html.edv2-warp .edv2-deck.is-jumped .edv2-hub { pointer-events: auto; } /* * Sortie de saut : l'eclair blanc-ambre qui accompagne la decompression. Il * culmine juste avant que le hub ne soit lisible, puis disparait. */ html.edv2-warp .accueil-v2 .edv2-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(56% 48% at 50% 46%, rgba(255, 248, 236, 0.40) 0%, rgba(255, 196, 132, 0.16) 40%, transparent 74%); opacity: 0; mix-blend-mode: screen; } .accueil-v2 .edv2-flash { display: none; } html.edv2-warp .accueil-v2 .edv2-flash { display: block; } /* * Le tunnel : les bords de l'ecran se ferment pendant le saut. * * C'est le seul element du saut qui parle de la CAMERA et non de la scene, et * c'est ce qui vend l'acceleration — un oeil lit un rentrement de champ comme * de la vitesse bien avant de lire des trainees d'etoiles. Deux nappes : un * noir qui mord les quatre coins, et un liseré froid qui cercle le point de * fuite comme la compression d'un cadre de FSD. * * Le calque est dessine au repos a l'echelle 1,18 — l'anneau sombre est alors * hors cadre — et revient a 1 au plus fort du saut : le champ se referme sans * qu'aucun pixel ne soit re-rasterise, l'echelle et l'opacite partant droit au * compositeur. Les deux valeurs sont ecrites image par image par accueil-v2.js, * comme celles du heros. */ .accueil-v2 .edv2-tunnel { display: none; } html.edv2-warp .accueil-v2 .edv2-tunnel { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(78% 66% at 50% 46%, transparent 0%, transparent 34%, rgba(4, 6, 12, 0.34) 66%, rgba(2, 3, 8, 0.86) 100%), radial-gradient(64% 56% at 50% 46%, transparent 62%, rgba(126, 176, 255, 0.14) 84%, transparent 100%); transform: scale(1.18); transform-origin: 50% 46%; } html.edv2-warp.edv2-lift .accueil-v2 .edv2-tunnel { will-change: transform, opacity; } /* ------------------------------------------------------------------------- * * Ecran 1 — heros * ------------------------------------------------------------------------- */ /* * Un minimum et non une hauteur fixe, et le debordement rendu visible : le * gabarit d'origine fige le heros a 940 px et coupe ce qui depasse. Sur une * fenetre basse, le titre sur trois lignes plus le bouton passaient sous la * ligne de coupe et disparaissaient. */ .accueil-v2.main .page-title, .accueil-v2.main .page-title .slider-st2 { height: auto; min-height: 100vh; min-height: 100svh; overflow: visible; background: transparent; } html.edv2-warp .accueil-v2.main .page-title, html.edv2-warp .accueil-v2.main .page-title .slider-st2 { min-height: 0; height: 100%; } /* * Le gabarit du theme intercale deux boites entre le heros et la banniere : * .page-title-static et le .swiper-slide. Elles sont de hauteur automatique, et * un `height: 100%` se resout contre un parent automatique en... automatique. * La banniere prenait donc la hauteur de son CONTENU et non celle du pont : sur * un grand ecran elle se posait en haut, sur un petit elle debordait par le bas, * et dans les deux cas le titre et la station n'etaient pas au centre de ce * qu'on voit. Les rendre pleine hauteur rend le centrage previsible partout. */ html.edv2-warp .accueil-v2.main .page-title .page-title-static, html.edv2-warp .accueil-v2.main .page-title .page-title-static > .swiper-slide { height: 100%; } /* /* * Rembourrages EGAUX en haut et en bas : le menu n'ayant plus d'aplat sur cette * page — le ciel passe dessous —, rien n'oblige a lui reserver plus de place * qu'au pied, et le titre se lit au centre de l'ecran. * * Six centiemes de fenetre de chaque cote, parce que la station en fait * quatre-vingt-huit : les trois valeurs somment a cent, et la banniere remplit * donc le pont EXACTEMENT. Un rembourrage plus genereux ferait deborder la * station de la zone utile ; un navigateur cale alors le bloc en haut plutot * qu'au centre, pour ne rien rendre inatteignable, et le titre partait avec lui * une trentaine de pixels trop bas. */ .accueil-v2.main .page-title .slider-st2 { display: flex; align-items: center; padding: clamp(52px, 6vh, 80px) 0; } .accueil-v2.main .page-title .slider-st2 > .container { width: 100%; } /* Pas de gap ici : les deux moities font 50 % de large, un ecart les ferait retrecir et le titre passerait sur une ligne de plus qu'a l'accueil actuel. */ .accueil-v2.main .page-title .box-slider { align-items: center; } .accueil-v2.main .page-title .box-slider .content-box { padding-top: 0; } /* Filet technique sous le titre, dans la grammaire des ecrans du jeu. */ /* Simple trait de separation sous le titre : il pose le rythme sans rien dire. */ .accueil-v2 .edv2-hero__rule { height: 1px; margin: 0 0 26px; max-width: 470px; background: linear-gradient(to right, var(--edv2-accent), var(--edv2-frame) 22%, transparent); } /* * La station se recadre sur son conteneur. Le module three.js lit la boite de * #stlmodel pour dimensionner son tampon de rendu, mais laisse la taille CSS du * canevas telle qu'a l'initialisation (800 x 800) : les trois regles ci-dessous * la ramenent sur le conteneur, ce qui aligne enfin le rendu et l'affichage. * * Sa taille apparente tient a la HAUTEUR de la boite : la camera a un champ * vertical fixe de 50 degres, donc une boite plus haute etale la meme portion * de monde sur plus de pixels. C'est ce levier qu'on pousse pour l'agrandir, * sans toucher a la largeur — les deux moities du heros font 50 pour cent * chacune, et retrecir le texte ferait passer le titre sur une ligne de plus. * * Elle descend ensuite de quatre centiemes d'ecran : c'est un objet rond et * massif, il n'a pas a partager la ligne de milieu du titre, et le poser un peu * plus bas laisse respirer le menu au-dessus. Le titre, lui, ne bouge pas. * * La descente passe par `top` et NON par `transform` : accueil-v2.js ecrit une * echelle en style en ligne sur cette meme station a chaque image du saut, et un * `transform` pose ici serait efface des la premiere. Le positionnement relatif * decale ce qui est peint sans toucher a la mise en page, ce qui est exactement * ce qu'on veut, et les deux mecanismes s'ignorent. * * Ces deux nombres — la hauteur et la descente — sont les seuls a toucher si la * station tombe trop haut, trop bas, ou sort de son ecran. */ .accueil-v2 .coriolis { position: relative; width: 50%; height: min(88vh, 990px); top: 4vh; } .accueil-v2 .coriolis #stlmodel { width: 100%; height: 100%; } .accueil-v2 .coriolis #stlmodel canvas { width: 100% !important; height: 100% !important; display: block; } /* * Invitation a descendre, reduite a son chevron : la legende « Le reste du * site » nommait ce que la fleche montre deja. */ .accueil-v2 .edv2-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 46px; padding: 0; background: none; border: 0; color: var(--edv2-text-dim); cursor: pointer; transition: color 0.3s ease; } .accueil-v2 .edv2-cue:hover, .accueil-v2 .edv2-cue:focus-visible { color: var(--edv2-accent); } .accueil-v2 .edv2-cue__chevron { width: 22px; height: 22px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: edv2-cue-bob 2.1s ease-in-out infinite; } @keyframes edv2-cue-bob { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; } 50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; } } /* ------------------------------------------------------------------------- * * Ecran 2 — le poste de commandement * ------------------------------------------------------------------------- */ /* * Par defaut le poste s'etire autant qu'il le faut et la page defile : sur un * portable de 768 px de haut, le comprimer sur une seule vue tassait cinq * missions en quatre et coupait les biographies. La vue unique est reservee * plus bas aux fenetres qui en ont vraiment la place — les memes que celles ou * le saut en hyperespace se declenche. */ .accueil-v2 .edv2-hub { height: auto; min-height: 0; display: flex; flex-direction: column; /* * Le rembourrage haut ne degage plus qu'une chose : le menu fixe, qui couvre * les 108 premiers pixels. Il valait jusqu'a 142 px parce qu'un titre de * section venait s'y loger ; ce titre parti, ces pixels reviennent aux * panneaux, qui en manquaient. */ padding: clamp(120px, 11.5vh, 132px) var(--edv2-gutter) clamp(22px, 3vh, 34px); /* * Le theme pose une hauteur de ligne FIXE de 28 px sur le corps du document. * Elle est faite pour du texte de quatorze pixels ; le poste de commandement, * lui, est plein de micro-libelles en monospace de neuf ou dix pixels, qui se * retrouvaient donc chacun dans une boite de vingt-sept pixels de haut. * * Quinze pixels perdus par libelle, c'est ce qui faisait deborder la liste * hebdomadaire de son panneau — le « x10 » de chaque mission, a lui seul, * ajoutait treize pixels a la ligne — et ce qui gonflait l'en-tete de chacun * des sept panneaux. Une hauteur de ligne RELATIVE remet tout d'aplomb : les * blocs de texte du poste declarent tous la leur, aucun ne dependait de celle * du theme. */ line-height: 1.4; } /* --- la grille ----------------------------------------------------------- * * * ┌──────────┬───────────────┬────────────┐ * │ direct │ video │ articles │ bande haute * ├──────────┴───────┬───────┴────────────┤ * │ aventures │ equipage │ bande basse * ├──────────────────┴────────────────────┤ * │ reseau allie │ bandeau * └───────────────────────────────────────┘ * * Les colonnes sont choisies pour que le contenu tombe juste : la video atteint * son 16/9 sans marge morte, les affiches d'aventure leur rapport 3/4. * ------------------------------------------------------------------------- */ /* * Vingt-quatre colonnes et non douze : la video doit tomber sur une largeur ou * son 16/9 tient dans la hauteur de bande, et douze colonnes ne descendaient * pas assez fin pour l'atteindre sans laisser de marge morte. */ .accueil-v2 .edv2-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: clamp(10px, 1vw, 15px); grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: auto auto auto; grid-template-areas: "direct direct direct direct direct direct video video video video video video video weekly weekly weekly weekly weekly weekly articles articles articles articles articles" "aventures aventures aventures aventures aventures aventures aventures aventures aventures aventures aventures aventures aventures aventures equipage equipage equipage equipage equipage equipage equipage equipage equipage equipage" "liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens liens"; } .accueil-v2 .edv2-tile--direct { grid-area: direct; } .accueil-v2 .edv2-tile--video { grid-area: video; } .accueil-v2 .edv2-tile--articles { grid-area: articles; } .accueil-v2 .edv2-tile--aventures { grid-area: aventures; } .accueil-v2 .edv2-tile--equipage { grid-area: equipage; } .accueil-v2 .edv2-tile--weekly { grid-area: weekly; } .accueil-v2 .edv2-tile--liens { grid-area: liens; } /* * Hors vue unique, les panneaux se donnent une hauteur de confort mais restent * bornes : sans plafond, le flux d'activite tirait sa rangee a plus de cinq * cents pixels et la video, qui tient sa hauteur de son 16/9, flottait au * milieu d'un grand vide. Ce qui deborde defile dans son propre panneau. */ .accueil-v2 .edv2-tile { min-height: 248px; max-height: 340px; } /* La video ne s'etire pas pour rattraper ses voisines : elle garde sa hauteur propre et se cale en haut de la rangee. */ .accueil-v2 .edv2-tile--video { align-self: start; } .accueil-v2 .edv2-tile--liens, .accueil-v2 .edv2-tile--aventures, .accueil-v2 .edv2-tile--equipage { max-height: none; } .accueil-v2 .edv2-tile--liens { min-height: 0; } /* --- le panneau ---------------------------------------------------------- * * * Meme boite que les .box-text.corner-box du reste du site : coins arrondis de * 8 px, liseré d'ambre a 15 %, filet de 3 px en haut qui s'allume au survol, * lueur et leger soulevement. Le poste de commandement se lit desormais comme * une piece du meme meuble que l'accueil, « À propos » ou les Missions — le * reflet qui balayait la carte a ete retire des deux cotes. * * Les coins biseautes precedents etaient obtenus par clip-path, et leur liseré * par un pseudo-element masque en mask-composite. Les deux forcaient le * navigateur a rasteriser chaque panneau hors du chemin rapide — et a le * refaire au survol, puisque le degrade du liseré etait anime. Une `border` * ordinaire sur une boite a coins arrondis ne coute, elle, rien du tout : c'est * la moitie du gain de fluidite de cette passe. * ------------------------------------------------------------------------- */ .accueil-v2 .edv2-tile { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 15px 17px 16px; background: linear-gradient(158deg, var(--edv2-panel-a) 0%, var(--edv2-panel-b) 62%); border: 1px solid var(--edv2-edge); border-top: 3px solid var(--edv2-edge); border-radius: var(--edv2-radius); overflow: hidden; /* Etat de depart de la cascade ; --edv2-delay est pose par le script. */ opacity: 0; transform: translateY(22px); transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } /* Le contenu garde son propre plan, comme dans .box-text.corner-box. */ .accueil-v2 .edv2-tile > * { position: relative; z-index: 1; } /* * La cascade d'apparition passe par une animation, et non plus par une * transition. Une transition sur `transform` occupait la propriete ET son * delai : le soulevement au survol arrivait alors avec plus d'un demi-seconde * de retard pour les derniers panneaux de la grille. « backwards » tient l'etat * de depart pendant le delai, puis la regle reprend la main et `transform` * redevient libre. */ @keyframes edv2-tile-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .accueil-v2 .edv2-hub.is-revealed .edv2-tile { opacity: 1; transform: none; animation: edv2-tile-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--edv2-delay, 0ms) backwards; } .accueil-v2 .edv2-tile:hover { border-color: var(--edv2-edge-hot); border-top-color: var(--edv2-accent); box-shadow: 0 0 16px var(--edv2-glow), 0 4px 16px rgba(0, 0, 0, 0.3); } /* * Le soulevement est repete a la specificite de CHAQUE regle qui pose un * `transform` sur le panneau — cascade et mode saut —, sans quoi celles-ci, * plus specifiques que `:hover` seul, l'annuleraient. */ .accueil-v2 .edv2-tile:hover, .accueil-v2 .edv2-hub.is-revealed .edv2-tile:hover, html.edv2-warp .accueil-v2 .edv2-tile:hover, html.edv2-warp .accueil-v2 .edv2-hub.is-revealed .edv2-tile:hover { transform: translateY(-2px); } /* --- l'en-tete d'un panneau ---------------------------------------------- */ .accueil-v2 .edv2-tile__head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; flex: 0 0 auto; } .accueil-v2 .edv2-tile__title { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: #f2f2f6; margin: 0; white-space: nowrap; } /* Le filet mange l'espace libre : les en-tetes s'alignent quelle que soit la longueur du libelle. */ .accueil-v2 .edv2-tile__head::after { content: ""; flex: 1 1 auto; height: 1px; min-width: 12px; background: linear-gradient(to right, var(--edv2-frame-dim), transparent 85%); order: 8; } /* * Le complement « TOUT VOIR », « PARTICIPER », « À PROPOS » posé a droite de * l'en-tete a disparu : c'est le TITRE qui mene a la page de la rubrique, la ou * la tuile en a une. Trois panneaux sont concernes — hebdomadaires, articles, * equipage. Les autres n'ont pas de destination propre : le flux en direct se * suffit, la vignette « autres aventures » ouvre deja le catalogue, et le * lecteur video porte son propre bouton YouTube. * * Le lien ne se distingue pas du titre au repos — un en-tete de panneau doit se * lire comme un en-tete —, il s'allume a l'approche. Le soulignement decale * n'apparait qu'a ce moment : c'est lui qui dit « ceci est cliquable » a qui * n'aurait que la couleur pour indice. */ .accueil-v2 .edv2-tile__link { color: inherit; text-decoration: none; transition: color 0.25s ease; } .accueil-v2 .edv2-tile__link:hover, .accueil-v2 .edv2-tile__link:focus-visible { color: var(--edv2-accent); text-decoration: underline; text-underline-offset: 4px; } .accueil-v2 .edv2-tile__body { flex: 1 1 auto; min-height: 0; position: relative; } /* * Les listes qui defilent sont coupees net par le bas de leur panneau, ce qui se * lit comme un defaut d'alignement. Le degrade dit « ca continue ». */ .accueil-v2 .edv2-tile--direct .edv2-tile__body::after, .accueil-v2 .edv2-tile--articles .edv2-tile__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(to bottom, rgba(9, 10, 14, 0) 0%, rgba(9, 10, 14, 0.94) 100%); pointer-events: none; } /* --- barre de defilement commune ----------------------------------------- */ .accueil-v2 .edv2-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--edv2-frame-dim) transparent; } .accueil-v2 .edv2-scroll::-webkit-scrollbar { width: 4px; } .accueil-v2 .edv2-scroll::-webkit-scrollbar-thumb { background: var(--edv2-frame-dim); } /* ------------------------------------------------------------------------- * * Panneau « en direct » * ------------------------------------------------------------------------- */ /* * La pastille battait par un `box-shadow` anime. Une ombre qui grandit se * repeint a chaque image, indefiniment, et sur cette page elle le faisait * pendant que le ciel tournait : c'est le genre de detail invisible qui coute * un budget d'image entier. L'onde est maintenant un pseudo-element qui grossit * et s'efface — transform et opacity seuls, donc entierement au compositeur. */ .accueil-v2 .edv2-live-dot { position: relative; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--edv2-live); } .accueil-v2 .edv2-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(74, 222, 128, 0.5); animation: edv2-pulse 2s ease-out infinite; } @keyframes edv2-pulse { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(3.3); opacity: 0; } 100% { transform: scale(3.3); opacity: 0; } } .accueil-v2 .edv2-feed { list-style: none; margin: 0; padding: 0; } .accueil-v2 .edv2-feed__item { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 7px 2px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); font-size: 12.5px; line-height: 1.42; } .accueil-v2 .edv2-feed__item:last-child { border-bottom: 0; } /* * L'arrivee d'une ligne. L'ancienne image-cle faisait aussi varier le fond de * la ligne : une propriete de peinture, qui obligeait a re-rasteriser le * panneau a chaque image de l'animation. Le voile ambre est passe sur un * pseudo-element qui ne fait que s'effacer. */ .accueil-v2 .edv2-feed__item.is-new { animation: edv2-feed-in 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .accueil-v2 .edv2-feed__item.is-new::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--edv2-accent-soft); animation: edv2-feed-flash 0.5s ease-out forwards; } @keyframes edv2-feed-in { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } } @keyframes edv2-feed-flash { from { opacity: 1; } to { opacity: 0; } } /* * Le portrait du commandant, rond comme partout ailleurs sur le site (podium, * commandants connectes, carte OpenGraph). Les initiales restent dessous : on * les voit le temps du telechargement, et definitivement si l'image manque. * * L'anneau de couleur remplace l'ancien aplat : la famille d'activite se lit * toujours d'un coup d'oeil, mais elle ne mange plus le visage. */ .accueil-v2 .edv2-feed__avatar { position: relative; flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, #2a2b34, #14151b); box-shadow: 0 0 0 1.5px var(--edv2-kind, rgba(255, 255, 255, 0.16)); } .accueil-v2 .edv2-feed__initials { font-family: "Chakra Petch", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #8f909c; } .accueil-v2 .edv2-feed__face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Chaque famille d'activite a son anneau : on repere le type avant de lire. */ .accueil-v2 .edv2-feed__item[data-kind="aventure"] .edv2-feed__avatar { --edv2-kind: #fa6d00; } .accueil-v2 .edv2-feed__item[data-kind="carte"] .edv2-feed__avatar { --edv2-kind: #3b82f6; } .accueil-v2 .edv2-feed__item[data-kind="jeu"] .edv2-feed__avatar { --edv2-kind: #7c5cff; } .accueil-v2 .edv2-feed__item[data-kind="outil"] .edv2-feed__avatar { --edv2-kind: #22a67f; } .accueil-v2 .edv2-feed__body { min-width: 0; flex: 1 1 auto; } .accueil-v2 .edv2-feed__line { color: var(--edv2-text); /* Deux lignes au plus : un titre d'aventure long ne doit pas repousser les entrees suivantes hors du panneau. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* * Le nom du commandant est un lien vers son profil, mais il ne doit pas se lire * comme un lien : la ligne en contient deja un (l'etiquette de section), et deux * couleurs d'accent dans une phrase de douze mots la rendent illisible. Le * soulignement n'apparait qu'au survol. */ .accueil-v2 .edv2-feed__cmdr { color: #fff; font-weight: 600; text-decoration: none; } .accueil-v2 a.edv2-feed__cmdr:hover, .accueil-v2 a.edv2-feed__cmdr:focus-visible { color: var(--edv2-accent); text-decoration: underline; } .accueil-v2 .edv2-feed__meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; } .accueil-v2 .edv2-feed__tag { color: var(--edv2-accent); text-decoration: none; border-bottom: 1px solid transparent; } .accueil-v2 .edv2-feed__tag:hover { border-bottom-color: var(--edv2-accent); } .accueil-v2 .edv2-feed__age { color: #5c5d68; } /* * Bulletins de la galaxie : un nouveau chantier de colonisation, un record de * connectes. Personne a montrer, donc pas de portrait — mais la ligne garde * l'alignement des autres, sans quoi elle casserait la colonne. Le filet a * gauche remplace l'anneau : il dit « ceci ne vient de personne ». */ .accueil-v2 .edv2-feed__item--global { padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, 0.14); } .accueil-v2 .edv2-feed__item--global .edv2-feed__text { font-style: italic; } /* Flux muet. Sans cette ligne le panneau reste blanc, ce qui se lit comme un chargement en panne et non comme un site calme. */ .accueil-v2 .edv2-feed__item--empty { justify-content: center; color: #5c5d68; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; } /* ------------------------------------------------------------------------- * * Panneau video * ------------------------------------------------------------------------- */ /* * L'image occupe toute la largeur du panneau et se centre verticalement. La * colonne est dimensionnee dans la grille pour que le 16/9 rentre dans la * hauteur de bande : c'est la, et non par un rail de comblement, que la marge * morte disparait. */ .accueil-v2 .edv2-tile--video .edv2-tile__body { display: flex; align-items: center; justify-content: center; } .accueil-v2 .edv2-video { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 100%; overflow: hidden; background: #000; border-radius: 6px; } .accueil-v2 .edv2-video iframe, .accueil-v2 .edv2-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .accueil-v2 .edv2-video__poster { display: grid; place-items: center; background: linear-gradient(150deg, #16171d, #0a0b0f); color: var(--edv2-text-dim); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; } /* ------------------------------------------------------------------------- * * Panneau hebdomadaires * ------------------------------------------------------------------------- */ /* * Cinq missions qui doivent tenir dans une hauteur que la grille decide, et qui * varie : en vue unique, les rangees se partagent ce qui reste de la fenetre * une fois l'en-tete, le bandeau et le pied de page servis. La liste debordait * donc de son panneau, ou elle etait coupee net par son `overflow: hidden`. * * Trois defenses, de la plus douce a la plus sure : * — les entrees se compriment (ecart et pastille en clamp) ; * — le titre reste sur une ligne, quelle que soit la traduction ; * — et si malgre tout ca ne rentre pas, la liste defile DANS son panneau * plutot que de sortir du cadre. */ .accueil-v2 .edv2-weekly { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--edv2-frame-dim) transparent; } .accueil-v2 .edv2-weekly::-webkit-scrollbar { width: 4px; } .accueil-v2 .edv2-weekly::-webkit-scrollbar-thumb { background: var(--edv2-frame-dim); } .accueil-v2 .edv2-weekly__item { display: flex; align-items: center; gap: 9px; min-width: 0; /* Se resserre quand la fenetre est basse, s'aere quand elle ne l'est pas. */ padding: clamp(2px, 0.4vh, 6px) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .accueil-v2 .edv2-weekly__item:last-child { border-bottom: 0; } .accueil-v2 .edv2-weekly__icon { flex: 0 0 auto; width: clamp(17px, 2vh, 22px); height: clamp(17px, 2vh, 22px); display: grid; place-items: center; color: var(--edv2-accent); } /* La taille est imposee ici : le catalogue des missions sert ses glyphes avec des attributs width/height a 25, qu'une regle CSS doit couvrir. */ .accueil-v2 .edv2-weekly__icon svg { width: clamp(13px, 1.6vh, 17px); height: clamp(13px, 1.6vh, 17px); } .accueil-v2 .edv2-weekly__title { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--edv2-text); /* Une seule ligne : cinq missions doivent tenir dans la hauteur du panneau quelle que soit la longueur des titres traduits. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .accueil-v2 .edv2-weekly__count { flex: 0 0 auto; font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 1.2; letter-spacing: 0.06em; color: var(--edv2-ice); } /* ------------------------------------------------------------------------- * * Panneau articles * ------------------------------------------------------------------------- */ .accueil-v2 .edv2-articles { display: flex; flex-direction: column; gap: 4px; } .accueil-v2 .edv2-article { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 6px; text-decoration: none; border: 1px solid transparent; border-radius: 6px; transition: background 0.25s ease, border-color 0.25s ease; } .accueil-v2 .edv2-article:hover { background: rgba(255, 255, 255, 0.035); border-color: var(--edv2-frame-dim); } .accueil-v2 .edv2-article__thumb { flex: 0 0 auto; width: 84px; height: 47px; object-fit: cover; border-radius: 6px; filter: saturate(0.85); transition: filter 0.25s ease; } .accueil-v2 .edv2-article:hover .edv2-article__thumb { filter: none; } .accueil-v2 .edv2-article__meta { min-width: 0; flex: 1 1 auto; } .accueil-v2 .edv2-article__date { display: block; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--edv2-text-dim); margin-bottom: 1px; } .accueil-v2 .edv2-article__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: "Chakra Petch", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.26; color: #fff; transition: color 0.25s ease; } .accueil-v2 .edv2-article:hover .edv2-article__title { color: var(--edv2-accent); } /* ------------------------------------------------------------------------- * * Panneau aventures * ------------------------------------------------------------------------- */ .accueil-v2 .edv2-aventures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; height: 100%; min-height: 0; } .accueil-v2 .edv2-aventure { position: relative; display: block; overflow: hidden; text-decoration: none; background: #0d0e13; border-radius: var(--edv2-radius); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .accueil-v2 .edv2-aventure:hover { transform: translateY(-4px); } .accueil-v2 .edv2-aventure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: opacity 0.35s ease, transform 0.6s ease; } .accueil-v2 .edv2-aventure:hover img { opacity: 1; transform: scale(1.06); } .accueil-v2 .edv2-aventure__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 6, 10, 0.96) 14%, rgba(5, 6, 10, 0.18) 58%, transparent 100%); } /* Liseré interne, comme sur les panneaux : les affiches font partie du meme ensemble et non d'une galerie posee dessus. Une bordure ordinaire posee sur un pseudo-element en surimpression, la ou l'affiche portait auparavant un degrade masque en mask-composite : meme trait, sans la rasterisation. */ .accueil-v2 .edv2-aventure::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1px solid var(--edv2-frame-dim); border-radius: var(--edv2-radius); transition: border-color 0.3s ease; } .accueil-v2 .edv2-aventure:hover::after { border-color: var(--edv2-accent); } .accueil-v2 .edv2-aventure__caption { position: absolute; left: 11px; right: 11px; bottom: 10px; z-index: 3; } .accueil-v2 .edv2-aventure__date { display: block; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--edv2-accent); margin-bottom: 2px; } .accueil-v2 .edv2-aventure__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: "Chakra Petch", sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.22; color: #fff; } .accueil-v2 .edv2-aventure__type { position: absolute; top: 9px; left: 9px; z-index: 3; padding: 3px 7px; background: rgba(5, 6, 10, 0.82); border: 1px solid var(--edv2-frame); border-radius: 4px; font-family: "IBM Plex Mono", monospace; font-size: 8.5px; line-height: 1.1; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; } .accueil-v2 .edv2-aventure--all .edv2-aventure__shade { background: linear-gradient(to top, rgba(5, 6, 10, 0.95) 22%, rgba(250, 109, 0, 0.20) 100%); } .accueil-v2 .edv2-aventure--all .edv2-aventure__name { display: flex; align-items: center; gap: 6px; } .accueil-v2 .edv2-aventure--all .edv2-aventure__name::after { content: "\2192"; color: var(--edv2-accent); transition: transform 0.3s ease; } .accueil-v2 .edv2-aventure--all:hover .edv2-aventure__name::after { transform: translateX(5px); } /* ------------------------------------------------------------------------- * * Panneau equipage * ------------------------------------------------------------------------- */ .accueil-v2 .edv2-crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: 100%; min-height: 0; } .accueil-v2 .edv2-crew__card { display: flex; flex-direction: column; min-height: 0; padding: 12px; background: linear-gradient(170deg, rgba(255, 255, 255, 0.035), transparent 70%); border-left: 2px solid var(--edv2-frame); border-radius: 6px; } .accueil-v2 .edv2-crew__top { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; flex: 0 0 auto; } /* * Le portrait est montre EN ENTIER. L'hexagone precedent, joli en soi, coupait * les quatre coins de la photo et mordait sur les epaules : ici la boite prend * le format natif des deux visuels (738 x 700) et « contain » garantit qu'aucun * futur portrait d'un autre format ne sera rogne non plus. */ .accueil-v2 .edv2-crew__portrait { flex: 0 0 auto; position: relative; width: 76px; aspect-ratio: 738 / 700; background: #0b0c11; /* Cadre dans la meme grammaire que les panneaux, en bordure ordinaire. */ border: 1px solid var(--edv2-frame); border-radius: 6px; overflow: hidden; } .accueil-v2 .edv2-crew__portrait img { width: 100%; height: 100%; object-fit: contain; filter: saturate(0.94) contrast(1.04); } .accueil-v2 .edv2-crew__id { min-width: 0; } .accueil-v2 .edv2-crew__rank { display: block; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--edv2-accent); margin-bottom: 1px; } /* `text-overflow` ne fait rien sans `white-space: nowrap` : le nom passait donc sur deux lignes au lieu de se couper, et poussait la biographie hors carte. */ .accueil-v2 .edv2-crew__name { display: block; font-family: "Chakra Petch", sans-serif; font-size: 15px; font-weight: 700; line-height: 1.1; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Deux lignes au plus : « Général de l'Empire » en majuscules espacees en prenait trois sur une carte etroite, et repoussait tout ce qui suit. */ .accueil-v2 .edv2-crew__role { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--edv2-ice); margin-top: 2px; } /* * La biographie etait bornee a sept lignes. Sept lignes font 126 px, et la * hauteur que la grille accorde a une fiche descend sous les 90 px des que la * fenetre est juste : le texte etait alors tranche en plein milieu d'une ligne * par l'`overflow: hidden` de la carte, ce qui se lit comme un defaut. * * Plus de compte de lignes, donc : la biographie prend la place disponible, * quelle qu'elle soit, et un degrade de fin annonce la coupe au lieu de la * subir. * * Le degrade, lui, ne vit PAS ici : il est reserve a la vue unique, plus bas. * Pose sans condition, il delavait la derniere ligne de chaque biographie dans * toutes les mises en page ou la fiche prend la hauteur de son texte — c'est a * dire des que le poste s'empile, donc sur tout le mobile : le paragraphe * tenait entier, et se lisait quand meme comme tronque. */ .accueil-v2 .edv2-crew__bio { flex: 1 1 auto; min-height: 0; margin: 0; font-size: 12px; line-height: 1.5; color: var(--edv2-text-dim); overflow: hidden; } /* * Grille a vingt-quatre colonnes : l'equipage n'en occupe que dix, soit environ * 41 pour cent de la fenetre pour DEUX fiches — et sa rangee tire sa hauteur * d'ailleurs. En vue unique elle vaut un `1fr` de la fenetre, hors vue unique * elle suit les affiches d'aventure voisines, au rapport 3/4 : dans les deux * cas la fiche est plus HAUTE que large des que l'ecran est confortable. * * Les deux bouts de cette plage demandent donc l'inverse l'un de l'autre. * * A 1200 px — le premier palier ou cette grille s'applique — la fiche tombe * sous 200 px de large. Un portrait de 76 px n'y laissait plus de quoi ecrire * « CMDR OptimusKoala » sur une ligne, et le nom sortait tronque : tout doit * y rester serre. * * A 2560 px la fiche fait pres de 500 par 430. Le portrait, le nom et la * biographie y plafonnaient — toutes les bornes hautes des mesures etaient * atteintes avant 1810 px — et la fiche montrait un portrait de 76 px, un nom * de 15 px et pres de 200 px de vide sous le texte. * * Une seule variable porte donc la plage : `--edv2-crew-plus` vaut la part de * fenetre au-dela de 1200 px, ramenee a cent unites a 2560 px et bornee la. * Chaque mesure part de sa valeur serree de 1200 px et se voit attribuer sa * part de ce supplement. Le portrait en prend la plus grosse : c'est lui que la * hauteur reclamait, et c'est lui qui comble le vide. * * La hauteur, elle, n'est PAS bornee ici : hors vue unique la rangee prend la * hauteur de son contenu, rien ne presse le portrait, et une borne posee la * l'aurait rapetisse sans raison. C'est la vue unique qui s'en charge, plus * bas — c'est elle, et elle seule, qui donne a la rangee une hauteur fixe. */ @media (min-width: 1200px) { .accueil-v2 .edv2-crew { --edv2-crew-plus: clamp(0px, calc((100vw - 1200px) * 0.0735), 100px); gap: calc(10px + var(--edv2-crew-plus) * 0.09); } .accueil-v2 .edv2-crew__card { padding: calc(10px + var(--edv2-crew-plus) * 0.11); } .accueil-v2 .edv2-crew__top { gap: calc(9px + var(--edv2-crew-plus) * 0.09); margin-bottom: calc(8px + var(--edv2-crew-plus) * 0.06); } .accueil-v2 .edv2-crew__portrait { width: calc(50px + var(--edv2-crew-plus) * 1.3); } .accueil-v2 .edv2-crew__rank { font-size: calc(9px + var(--edv2-crew-plus) * 0.04); } .accueil-v2 .edv2-crew__name { font-size: calc(12px + var(--edv2-crew-plus) * 0.115); } .accueil-v2 .edv2-crew__role { font-size: calc(8px + var(--edv2-crew-plus) * 0.06); letter-spacing: 0.08em; } .accueil-v2 .edv2-crew__bio { font-size: calc(11px + var(--edv2-crew-plus) * 0.055); line-height: 1.55; } } /* ------------------------------------------------------------------------- * * Bandeau reseau : un defile continu * ------------------------------------------------------------------------- */ /* * Nos services et les sites allies passent en boucle. La piste est rendue deux * fois dans le balisage et l'animation la translate d'exactement une longueur : * au moment ou elle revient a zero, le second exemplaire occupe la place du * premier et la couture est invisible. * * L'animation ne touche qu'a `transform`, donc elle vit dans le compositeur et * ne coute rien au fil principal — ce qui compte, le ciel tournant juste * derriere. */ .accueil-v2 .edv2-marquee { display: flex; align-items: center; overflow: hidden; /* Les extremites s'effacent : sans ce fondu, les vignettes apparaissent et disparaissent net contre le bord du panneau. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%); } .accueil-v2 .edv2-marquee__track { display: flex; align-items: center; flex: 0 0 auto; animation: edv2-marquee 64s linear infinite; will-change: transform; } /* * Hors champ, la piste s'arrete. Elle tournait jusqu'ici en permanence, y * compris pendant tout le premier ecran ou personne ne la voit : deux calques * de compositeur maintenus en vie et recomposes soixante fois par seconde pour * rien. « is-idle » est posee par accueil-v2.js sur observation d'intersection ; * le will-change tombe avec elle, ce qui rend aussi la memoire du calque. * * L'observation d'intersection ne suffit pas sous saut en hyperespace : le * poste de commandement y est superpose au heros, donc techniquement dans le * champ des la premiere image, opacite nulle ou pas. D'ou la seconde condition, * qui attend que le poste soit reellement apparu. */ .accueil-v2 .edv2-marquee.is-idle .edv2-marquee__track, .accueil-v2 .edv2-hub:not(.is-revealed) .edv2-marquee__track { animation-play-state: paused; will-change: auto; } /* * Sous saut, tant que le poste n'a pas pris la main (pont sans is-jumped), son * opacite est nulle : la piste et l'onde de la pastille « en direct » * continuaient pourtant de tourner, et tenaient le compositeur eveille * derriere le heros — precisement pendant que la station et le ciel se * partagent le budget d'image. « is-revealed » ne suffit pas ici : la classe * reste posee apres le premier saut, meme une fois remonte tout en haut. */ html.edv2-warp .edv2-deck:not(.is-jumped) .edv2-marquee__track, html.edv2-warp .edv2-deck:not(.is-jumped) .edv2-live-dot::after { animation-play-state: paused; will-change: auto; } .accueil-v2 .edv2-marquee:hover .edv2-marquee__track { animation-play-state: paused; } @keyframes edv2-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } .accueil-v2 .edv2-node { position: relative; display: flex; align-items: center; gap: 11px; flex: 0 0 auto; width: 216px; padding: 4px 16px 4px 4px; text-decoration: none; } .accueil-v2 .edv2-node::after { content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, 0.07); } .accueil-v2 .edv2-node__logo { flex: 0 0 auto; width: 44px; height: 40px; display: grid; place-items: center; color: var(--edv2-text-dim); font-size: 21px; transition: color 0.25s ease; } .accueil-v2 .edv2-node__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; filter: grayscale(1) brightness(1.5); opacity: 0.55; transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease; } .accueil-v2 .edv2-node:hover .edv2-node__logo { color: var(--edv2-accent); } .accueil-v2 .edv2-node:hover .edv2-node__logo img { filter: none; opacity: 1; transform: scale(1.06); } .accueil-v2 .edv2-node__text { min-width: 0; } .accueil-v2 .edv2-node__name { display: block; font-family: "Chakra Petch", sans-serif; font-size: 13px; font-weight: 600; color: #e8e8ee; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.25s ease; } .accueil-v2 .edv2-node:hover .edv2-node__name { color: var(--edv2-accent); } .accueil-v2 .edv2-node__kind { display: block; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--edv2-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------------------- * * Vue unique * * Memes conditions que le saut en hyperespace, cote script : au-dela de cette * taille le poste tient d'un seul tenant dans la fenetre, les rangees se * partagent la hauteur et ce qui deborde defile dans son propre panneau. * ------------------------------------------------------------------------- */ @media (min-width: 1200px) and (min-height: 860px) { .accueil-v2 .edv2-hub { height: 100vh; height: 100svh; } .accueil-v2 .edv2-grid { grid-template-rows: minmax(0, 0.95fr) minmax(0, 1fr) auto; } .accueil-v2 .edv2-tile, .accueil-v2 .edv2-tile--liens { min-height: 0; max-height: none; } .accueil-v2 .edv2-tile--video { align-self: stretch; } /* * C'est ICI, et seulement ici, que la fiche d'equipage a une hauteur imposee : * le poste vaut une fenetre, la rangee vaut un `1fr` de cette fenetre, et elle * ne s'etire plus pour suivre son contenu. Deux consequences. * * La premiere : le portrait doit rendre des comptes a cette hauteur. Dimensionne * sur la seule largeur, il faisait disparaitre la biographie sur un ecran large * mais bas — a 2560 par 900 la rangee ne fait que 280 px, et un portrait de * 180 px n'y laissait plus une ligne de texte. La borne est ecrite en `vh` * parce que c'est de la fenetre que la rangee tient sa hauteur ; les 340 px * soustraits sont ce que prennent l'en-tete du panneau, les marges et les trois * lignes de biographie qu'il faut garder coute que coute. * * La seconde : la biographie peut deborder, et c'est le seul endroit ou elle * le peut. Le degrade annonce la coupe au lieu de la subir. Sa hauteur est en * `em` et non en pixels : elle vaut une ligne et demie a n'importe quelle * taille de corps, y compris celles du palier « ecran large ». */ .accueil-v2 .edv2-crew__portrait { width: min(calc(50px + var(--edv2-crew-plus) * 1.3), max(50px, calc(47vh - 340px))); } .accueil-v2 .edv2-crew__bio { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent 100%); } } /* ------------------------------------------------------------------------- * * Adaptations * ------------------------------------------------------------------------- */ /* Deux colonnes : le bandeau reseau passe sur deux rangees de trois. Borne a 1199.98 px et non a 1200 : a 1200 pile, la vue unique ci-dessus s'applique AUSSI, et le poste heritait d'une hauteur d'une fenetre avec la grille en cinq rangees de celle-ci. C'est aussi le seuil que lit le script pour armer le saut. */ @media (max-width: 1199.98px) and (min-width: 1001px) { .accueil-v2 .edv2-grid { grid-template-rows: auto auto auto auto auto; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "direct direct direct direct direct direct video video video video video video" "weekly weekly weekly weekly weekly articles articles articles articles articles articles articles" "aventures aventures aventures aventures aventures aventures aventures aventures aventures aventures aventures aventures" "equipage equipage equipage equipage equipage equipage equipage equipage equipage equipage equipage equipage" "liens liens liens liens liens liens liens liens liens liens liens liens"; } .accueil-v2 .edv2-tile { min-height: 236px; } .accueil-v2 .edv2-tile--liens { min-height: 0; } .accueil-v2 .edv2-hub { min-height: 0; } .accueil-v2 .edv2-video { max-height: none; } } /* En dessous de 1000 px la station Coriolis est masquee par le theme : le heros repasse sur une colonne unique et le poste s'empile. */ @media (max-width: 1000px) { .accueil-v2.main .page-title .box-slider .content-box { width: 100%; padding-left: 0; } .accueil-v2 .coriolis { display: none; } .accueil-v2 .edv2-hub { min-height: 0; padding-top: clamp(76px, 12vh, 98px); } .accueil-v2 .edv2-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "direct" "weekly" "aventures" "video" "articles" "equipage" "liens"; } .accueil-v2 .edv2-tile { min-height: 230px; } .accueil-v2 .edv2-tile--liens, .accueil-v2 .edv2-tile--video { min-height: 0; } /* Empile : la video se donne sa propre hauteur. */ .accueil-v2 .edv2-video { max-height: none; } .accueil-v2 .edv2-feed { max-height: 290px; } .accueil-v2 .edv2-tile--direct .edv2-scroll { max-height: 290px; } .accueil-v2 .edv2-node { width: 196px; } } @media (max-width: 700px) { .accueil-v2 .edv2-aventures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .accueil-v2 .edv2-tile--aventures { min-height: 330px; } .accueil-v2 .edv2-crew { grid-template-columns: minmax(0, 1fr); } .accueil-v2 .edv2-tile--equipage { min-height: 0; } /* * Une seule colonne : la fiche prend toute la largeur du telephone, et les * mesures heritees de la grille a deux colonnes y sont a contre-emploi. Le * portrait de 76 px n'occupait plus qu'un cinquieme de la fiche et la * biographie restait au corps 12, celui d'une fiche de 240 px de large lue a * un metre — pas d'un ecran tenu a bout de bras. * * Tout suit donc la largeur de l'appareil, borne haut pour que la tablette en * portrait ne bascule pas dans le demesure. */ .accueil-v2 .edv2-crew { gap: clamp(12px, 3.2vw, 16px); } .accueil-v2 .edv2-crew__card { padding: clamp(12px, 3.4vw, 16px); } .accueil-v2 .edv2-crew__top { gap: clamp(11px, 3.2vw, 15px); } .accueil-v2 .edv2-crew__portrait { width: clamp(76px, 24vw, 104px); } .accueil-v2 .edv2-crew__rank { font-size: clamp(9px, 2.6vw, 11px); } .accueil-v2 .edv2-crew__name { font-size: clamp(15px, 4.6vw, 19px); } .accueil-v2 .edv2-crew__role { font-size: clamp(9.5px, 2.8vw, 11.5px); } .accueil-v2 .edv2-crew__bio { font-size: clamp(12px, 3.5vw, 14px); } } /* * Mouvement reduit : pas de saut en hyperespace (le script ne pose meme pas la * classe), la cascade se contente d'un fondu, les boucles decoratives s'arretent. * Le ciel se fige de son cote, cote script. */ @media (prefers-reduced-motion: reduce) { .accueil-v2 .edv2-tile { transform: none !important; transition-duration: 0.2s; animation: none; } .accueil-v2 .edv2-hub.is-revealed .edv2-tile { animation: none; opacity: 1; } .accueil-v2 .edv2-cue__chevron, .accueil-v2 .edv2-live-dot::after, .accueil-v2 .edv2-feed__item.is-new, .accueil-v2 .edv2-marquee__track { animation: none; } /* Le voile ambre disparait plutot que de rester pose sur la ligne, faute d'animation pour l'effacer. */ .accueil-v2 .edv2-feed__item.is-new::before { display: none; } .accueil-v2 .edv2-aventure:hover { transform: none; } }