/* ========================================================= HABILLAGE — structure commune aux deux thèmes POURQUOI CE FICHIER EXISTE. Le thème Halloween avait introduit, sous `.theme-halloween`, tout un pan de mise en page que le thème de base n'avait pas : la bannière posée en image derrière des boutons placés au pourcentage, le carrousel de régions, les boutons du héros en `border-image`, les cartes à planche propre. Habiller le thème de base des nouvelles illustrations en dupliquant ces règles aurait créé deux structures parallèles, vouées à diverger à la première retouche. La structure est donc écrite ICI, UNE SEULE FOIS, sans classe de thème. Ce qui change d'un thème à l'autre — les fichiers d'images et les repères relevés dessus — passe par des variables `--sk-*`, définies plus bas pour le thème de base et redéfinies dans halloween.css. Conséquence voulue : mêmes boîtes, mêmes positions, mêmes points de rupture, mêmes interactions dans les deux thèmes. Seules les planches changent. LIRE LES REPÈRES. Chaque variable géométrique est un relevé fait sur le fichier d'image correspondant, exprimé en pourcentage pour tenir à toutes les résolutions. Les relevés du thème de base sont commentés ici, ceux du thème Halloween dans halloween.css, au même endroit. ========================================================= */ :root { /* ---------- Fond de site ---------- hero.png, 1672 x 940, posé en `cover` par ui.css. */ --sk-fond: url('/assets/hero.png'); /* ---------- Barre de navigation ---------- sk-navbar2.png, canevas 2172 x 724, dessin y 227..520. C'est la version PLATE de la planche : le dessin n'occupe qu'un tiers du canevas, le reste est transparent. Une première version — sk-navbar.png, dessin y 31..638 — avait un bandeau deux fois plus épais et de longs fanions qui retombaient sur les cartes ; elle est remplacée ici et n'est plus référencée. Profil de luminance relevé sur x 500..1600, la seule bande que ne traverse aucun ornement : rail doré supérieur y = 295 .. 307 bandeau bleu y = 308 .. 365 rail doré inférieur y = 366 .. 377 centre du bandeau y = 336 -> 336 / 724 = 46.41 % dessin au-dessus 109 px -> 109 / 2172 = 5.02 % de la LARGEUR Le premier pourcentage place l'image ; le second dit la place à réserver au-dessus de la barre pour que les embouts ne soient pas coupés par le bord du document. 5.02 % de 94vw = 4.72vw, plafonné à 109 px — valeur atteinte quand la largeur bute sur les 2172 px natifs du fichier. */ --sk-navbar: url('/assets/ui/sk-navbar2.png'); --sk-navbar-ratio: 2172 / 724; --sk-navbar-largeur: min(94vw, 2172px); --sk-navbar-centre: -46.41%; --sk-navbar-marge: max(26px, min(109px, calc(4.72vw - 26px))); /* Aucun masque : les fanions de cette planche sont aussi étroits que ceux de la planche Halloween — 1.61 – 6.63 % contre 2.03 – 6.81 % — et tombent donc au ras des cartes sans les recouvrir. C'est ce qui permet de garder la pleine largeur et l'échelle 1. */ --sk-navbar-masque: none; /* ÉCHELLE DE L'IMAGE PAR RAPPORT À LA BARRE — et pourquoi elle existe. Les fanions qui pendent aux deux bouts sont dessinés DANS la planche, à 1.20 – 8.66 % et 91.30 – 98.71 % de sa largeur. Posée à la largeur exacte de la barre, leur bord intérieur tombait à 68 px À L'INTÉRIEUR des cartes « État des serveurs » et « Accès rapide », dont il recouvrait le montant et jusqu'aux pastilles de statut. Elle vaut 1 dans les deux thèmes : celui de base n'affiche plus ses fanions — voir `--sk-navbar-masque` — et celui d'Halloween a les siens assez étroits pour tomber naturellement au bord des cartes. Toutes les positions de boutons ci-dessous se réduisent donc à leur valeur nue, identique d'un thème à l'autre. La conversion reste écrite au cas où une planche future aurait, elle, besoin d'être décalée par rapport à la barre. */ --sk-nav-echelle: 1; /* ---------- Zones nues du bandeau, où se posent les libellés ---------- Relevées colonne par colonne dans la bande bleue de la planche : une colonne est « nue » quand rien d'or ni de clair n'y est peint à hauteur de texte. Quatre segments, deux de chaque côté du logo, séparés par une petite gemme. `sk-navbar2.png` (thème de base) : zone A 4.79 – 19.38 % zone B 20.35 – 33.70 % zone C 65.01 – 79.60 % zone D 80.62 – 95.17 % Le thème saisonnier redéfinit ces huit valeurs plus bas : sa planche n'a pas les mêmes ornements, donc pas les mêmes vides. */ --sk-nav-a: 4.79%; --sk-nav-al: 14.59%; --sk-nav-b: 20.35%; --sk-nav-bl: 13.35%; --sk-nav-c: 65.01%; --sk-nav-cl: 14.59%; --sk-nav-d: 80.62%; --sk-nav-dl: 14.55%; /* Barre repeinte en CSS sous 1101 px, où l'image n'est pas affichée. */ --sk-navbar-etroite: linear-gradient(90deg, rgba(2, 24, 62, 0.92) 0%, rgba(7, 84, 193, 0) 20%, rgba(7, 84, 193, 0) 80%, rgba(2, 24, 62, 0.92) 100%), linear-gradient(180deg, #1466d8 0%, #0754c1 46%, #023a8e 100%); --sk-navbar-etroite-ombre: 0 6px 22px rgba(3, 26, 60, 0.45); /* ---------- Cadre crème : actualités et communauté ---------- sk-cadre-creme.png, 420 x 235, découpé dans actu.png (dessin 1400 x 783). Angle orné — la gemme et ses pointes — mesuré à 48 px. `round` et non `stretch` : la moulure de cette planche porte une gemme RÉGULIÈRE en milieu de bord. Répétée, elle donne une file de gemmes qui se lit comme un motif voulu ; étirée, elle se réduit à une bavure. C'est le raisonnement déjà tenu par ui.css pour le cadre d'origine. */ --sk-creme: url('/assets/ui/sk-cadre-creme.png'); --sk-creme-coupe: 48 fill; --sk-creme-repet: round; /* ---------- Cartes à planche propre ---------- Posées en fond ÉTIRÉ et non en découpe : voir le commentaire de la règle, plus bas. Rapports comparés à ceux des boîtes : état 306 x 286 (1.07) contre 480 x 555 (0.87) accès 292 x 401 (0.73) contre 480 x 675 (0.71) */ --sk-etat: url('/assets/ui/sk-cadre-etat.png'); --sk-acces: url('/assets/ui/sk-cadre-acces.png'); /* ---------- « Explorez Rendrya » ---------- sk-explorer.png, canevas 2078 x 757, dessin x 15..2062, y 8..741 (2048 x 734). Tous les repères sont rapportés au DESSIN, jamais au canevas : c'est lui que l'on veut voir caler sur la boîte. moulure dorée y 77..687 x 53..110 et 1966..2026 ouverture libre y 122..645 x 111..1965 flèches centres (159, 364) et (1918, 364), Ø 119 pastilles centres x 938.5 / 1002.5 / 1067.5 / 1132.5, y 627.5, Ø 32 `--sk-explo-fond` résout la formule de CSS — `décalage = (boîte - image) x P` — pour que le pixel (15, 8) du fichier tombe sur l'angle de la boîte : P horizontal = -15 / (2048 - 2078) = 50 %, P vertical = -8 / (734 - 757) = 34.78 %. */ --sk-explorer: url('/assets/ui/sk-explorer.png'); --sk-explo-ratio: 2048 / 734; --sk-explo-fond: 50% 34.78% / 101.46% 103.13%; /* Ouverture libre, en pourcentage du dessin. On prend toujours la mesure la plus INTÉRIEURE : ainsi l'illustration ne ressort de la moulure à aucune hauteur. */ --sk-explo-haut: 15.53%; /* (122 - 8) / 734 */ --sk-explo-bas: 13.08%; /* (741 - 645) / 734 */ --sk-explo-gauche: 4.69%; /* (111 - 15) / 2048 */ --sk-explo-droite: 4.74%; /* (2062 - 1965) / 2048 */ /* Hauteur de la boîte, pour que ce soit la MOULURE — et non l'enveloppe du dessin — qui fasse la hauteur de la ligne. Le rapport du fichier donne 734 / 611 = 120.1 % en théorie ; 109.4 % RELEVÉ sur le rendu. L'écart vient de ce que les trois cartes n'ont pas le même débord au-delà de leur moulure, et que ces débords dépendent de trois images différentes : ils ne sont pas calculables depuis le CSS seul. La mesure porte sur les pixels dorés réellement peints — 164 px de haut pour les actualités, il fallait amener ceux du cadre au même endroit. */ --sk-explo-hauteur: 109.4%; --sk-explo-remontee: -0.2%; --sk-explo-fleche-y: 48.5%; /* (364 - 8) / 734 */ --sk-explo-fleche-g: 7.03%; /* (159 - 15) / 2048 */ --sk-explo-fleche-d: 92.92%; /* (1918 - 15) / 2048 */ --sk-explo-fleche-taille: 5.81%; /* 119 / 2048 */ --sk-explo-point-y: 84.4%; /* (627.5 - 8) / 734 */ --sk-explo-point-taille: 1.56%; /* 32 / 2048 */ --sk-explo-point-1: 45.09%; --sk-explo-point-2: 48.22%; --sk-explo-point-3: 51.39%; --sk-explo-point-4: 54.57%; --sk-explo-titre-y: 22%; --sk-explo-titre-x: 12.7%; /* ---------- Boutons du héros ---------- sk-bouton-bleu.png 1052 x 243 et sk-bouton-or.png 1047 x 243, découpés dans bouton.png. débord vertical 11 px au-dessus, 14 en dessous barre plate y 11..228 embouts ornés 137 px à gauche, 128 à droite -> découpe à 140 Le rapport des bordures suit celui de la découpe, sinon les pointes se retrouveraient écrasées : le bouton fait 47 px de haut, soit 47/243 = 0.193, d'où 11 -> 2 px, 14 -> 3 px et 140 -> 27 px. LE REMBOURRAGE COMPENSE LA BORDURE, pour que le bouton ait exactement la même boîte dans les deux thèmes. Les embouts de cette planche sont plus courts que ceux d'Halloween — 27 px de bordure contre 38 — et le bouton serait sorti 22 px plus étroit. Les 11 px rendus de chaque côté sont repris en rembourrage : 6 + 11 = 17. Verticalement, même calcul : bordure 2 + 3 contre 4 + 4, rembourrage 13 + 12 contre 11 + 11, total 47 px de part et d'autre. */ --sk-bouton-1: url('/assets/ui/sk-bouton-bleu.png'); --sk-bouton-2: url('/assets/ui/sk-bouton-or.png'); --sk-bouton-bordure: 2px 27px 3px; --sk-bouton-coupe: 11 140 14 fill; --sk-bouton-pad: 13px 17px 12px; --sk-bouton-encre: #f4faff; --sk-bouton-ombre: 0 1px 3px rgba(2, 24, 62, 0.85); /* ---------- Teintes portées par la structure ---------- Les voiles du carrousel et le halo des pastilles ne sont pas des couleurs de contenu : ils appartiennent à l'habillage, et suivent donc la planche. Donnés en composantes pour pouvoir varier l'opacité au point d'usage. */ --sk-voile: 4, 26, 62; --sk-accent: 240, 205, 122; --sk-encre-ornee: #f2e6c4; } /* ========================================================= 1. FOND DE SITE ========================================================= */ .home-body .background { background-image: var(--sk-fond); } /* ========================================================= 2. BARRE DE NAVIGATION UNE SEULE IMAGE, POSÉE TELLE QUELLE. Elle porte tout — bandeau, logo, gemmes, embouts, fanions. Elle n'est ni découpée, ni recomposée : c'est un unique calque décoratif posé DERRIÈRE les boutons, qui restent le HTML d'origine. ========================================================= */ /* La barre dessinée en CSS s'efface : l'image la remplace entièrement. */ .site-nav { background: none; box-shadow: none; } /* Rails, gemmes, fanions, liseré : tout cela est déjà DANS l'image. Les garder ferait doublon. Ces éléments sont décoratifs et en `position: absolute` : les masquer ne déplace rien. */ .nav-rail, .nav-gemme, .nav-banniere, .site-nav::after { display: none; } /* Le logo du gabarit disparaît À LA VUE SEULEMENT. `opacity: 0` et non `display: none` : l'élément garde sa largeur, donc les deux groupes d'icônes restent écartés exactement comme avant. Le supprimer les ferait se rejoindre au centre. Le lien vers l'accueil reste cliquable, à la même place. */ .nav-logo img { opacity: 0; } @media (min-width: 1101px) { /* LARGEUR — 94vw, plafonnée à la largeur native de l'image, centrée. La barre prend la MÊME largeur que l'image. C'est indispensable : le bandeau est dessiné dans le fichier, donc une barre plus large que l'image ferait tomber les icônes des deux bouts à côté du bandeau. `margin: auto` (posé par ui.css) la centre. */ .site-nav { width: var(--sk-navbar-largeur); margin-top: var(--sk-navbar-marge); } /* L'IMAGE. `width: 100%` de la barre + le rapport du fichier : la boîte a exactement les proportions de l'image, donc `contain` ne peut ni recadrer ni déformer, à n'importe quelle largeur d'écran. `top: 50%` place son sommet au centre de la barre, puis on la remonte du pourcentage relevé : son bandeau tombe alors pile sur la barre, et les icônes restent posées dessus. Elle déborde en haut et en bas sans rien pousser : elle est en `position: absolute`, donc hors du flux. `z-index: 0` la laisse sous les groupes d'icônes (2) et sous le logo (3), et `pointer-events: none` l'empêche d'intercepter le moindre clic. */ .site-nav::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(100% * var(--sk-nav-echelle)); aspect-ratio: var(--sk-navbar-ratio); transform: translate(-50%, var(--sk-navbar-centre)); background: var(--sk-navbar) center center / contain no-repeat; -webkit-mask-image: var(--sk-navbar-masque); mask-image: var(--sk-navbar-masque); pointer-events: none; z-index: 0; } /* PLACEMENT DES BOUTONS SUR LES ZONES LIBRES DU BANDEAU. L'image n'est pas touchée — ni sa taille, ni sa position. Ce sont les boutons qui viennent se poser là où le bandeau est nu. Zones relevées colonne par colonne, à hauteur de bouton, en comparant chaque colonne à une colonne de bandeau nu. Les deux planches donnent des zones étonnamment proches : base Halloween zone A 6.77 – 20.53 % 6.54 – 19.61 % zone B 21.87 – 35.50 % 24.26 – 36.69 % logo 35.50 – 64.32 % 36.69 – 63.31 % zone C 64.32 – 78.13 % 63.31 – 75.64 % zone D 79.47 – 93.32 % 80.02 – 92.63 % Les positions ci-dessous tiennent dans les zones libres des DEUX planches : elles sont donc communes, et les boutons ne bougent pas d'un thème à l'autre. Le pas de 2.05 % est celui qui sépare deux icônes voisines. Les boutons passent en absolu, donc `.nav-groupe` repasse en `static` pour que leur référentiel devienne la barre et non le groupe. Les groupes gardent leur `flex: 1 1 0` : le logo central reste centré et sa zone cliquable ne bouge pas. */ .nav-groupe { position: static; } /* LES QUATRE ZONES SE POSENT SUR LES PARTIES NUES DU BANDEAU. Ce sont les ZONES qui passent en absolu, plus les boutons un par un : la zone est une rangée centrée, les libellés s'y répartissent d'eux-mêmes. Un onglet de plus ou de moins recentre la rangée sans toucher à ce fichier. Les bornes sont relevées colonne par colonne dans la bande bleue de chaque planche — les colonnes où rien n'est peint. Elles diffèrent d'un thème à l'autre, d'où les variables : prendre leur intersection, comme le faisaient les positions de pictogrammes, ouvrait entre les zones des trous de 5 % qui n'existent sur aucune des deux images, et les libellés s'y agglutinaient par paquets. Les deux vides qui subsistent — moins de 1 % — portent chacun une petite gemme peinte dans la planche : elle sépare maintenant deux groupes de libellés au lieu de gêner un pictogramme. */ .nav-zone { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; /* le z-index du groupe tombe avec son position */ gap: min(1vw, 18px); } .nav-zone.zone-a { left: var(--sk-nav-a); width: var(--sk-nav-al); } .nav-zone.zone-b { left: var(--sk-nav-b); width: var(--sk-nav-bl); } .nav-zone.zone-c { left: var(--sk-nav-c); width: var(--sk-nav-cl); } .nav-zone.zone-d { left: var(--sk-nav-d); width: var(--sk-nav-dl); } /* Taille du libellé : `min(0.72vw, 14px)`, SANS PLANCHER. ui.css lui donne un `clamp` avec un plancher de 0.62rem. C'est ce plancher qui poserait problème : sous 1400 px de large il figerait la lettre alors que la zone, elle, continue de rétrécir en pourcentage — les libellés finiraient par déborder sur les ornements. Sans plancher, le rapport texte / zone reste constant à toutes les largeurs : ce qui tient à 1920 tient partout. Pourquoi 0.72 et pas plus : la zone la plus étroite est celle qui touche le logo à droite (13.71vw de large), et elle porte les deux libellés les plus longs — « Boutique » et « Mon compte ». À 0.82vw ils y tenaient à 1 px près à 1920, et débordaient de 4 px sur les ornements dès qu'on descendait. À 0.72vw il reste 0.66vw de marge de chaque côté, à toute largeur. */ .site-nav .nav-libelle { font-size: min(0.72vw, 14px); } /* Les pourcentages ci-dessous sont des fractions de L'IMAGE. Quand celle-ci est plus large que la barre, un point de l'image ne tombe plus au même pourcentage de la barre : il s'en écarte, du centre vers les bords, dans le rapport de l'échelle. D'où la conversion, appliquée une fois pour toutes : barre % = 50 % + (image % - 50 %) x échelle À l'échelle 1 — le cas d'Halloween — elle se réduit à l'identité, et les valeurs sont exactement celles relevées sur la planche. */ /* Le formulaire de déconnexion n'est qu'une enveloppe : il ne doit pas faire une colonne de plus dans la rangée de sa zone. */ .site-nav .nav-deco { display: contents; } /* Discord et la déconnexion occupent la zone D, au même pas de 2.05 % : 89.15 % et 91.2 %. Le bord droit du bouton de déconnexion tombe à 92.05 %, la zone D des deux planches va au moins jusqu'à 92.63 %. Le sélecteur de la déconnexion vise le FORMULAIRE, pas le bouton : c'est lui l'enfant du groupe. */ .nav-groupe.droite .nav-bouton:nth-child(6) { left: calc(50% + (89.15% - 50%) * var(--sk-nav-echelle)); } .nav-groupe.droite .nav-deco { position: absolute; top: 50%; left: calc(50% + (91.2% - 50%) * var(--sk-nav-echelle)); transform: translate(-50%, -50%); z-index: 2; } .nav-groupe.droite .nav-deco:hover { transform: translate(-50%, calc(-50% - 2px)); } } /* Sous 1101 px, l'image n'est pas affichée. À cette largeur la barre change de forme — hauteur automatique, bords collés — et les fanions disparaissent déjà pour la même raison : l'ornement mordrait sur le contenu. Plutôt que de recadrer l'image, on rend la barre dessinée en CSS. La navigation garde exactement la même structure. */ @media (max-width: 1100px) { .site-nav { background: var(--sk-navbar-etroite); box-shadow: var(--sk-navbar-etroite-ombre); } .nav-rail { display: block; } .nav-logo img { opacity: 1; } } /* ========================================================= 3. CADRES DES CARTES ========================================================= */ /* Le parchemin de la planche remplace celui du gabarit. `border-width` N'EST PAS touché — c'est lui qui occupe la place, donc le changer déplacerait le contenu de toutes les cartes. Seules la source, la découpe en neuf zones et le mode de répétition changent : ce sont des lectures de l'IMAGE, elles ne modifient aucune dimension à l'écran. */ .cadre-creme, section.cadre-creme, .apercu { border-image-source: var(--sk-creme); border-image-slice: var(--sk-creme-coupe); border-image-repeat: var(--sk-creme-repet); } /* « REJOIGNEZ NOTRE COMMUNAUTÉ » — le cadre des actualités. Les deux planches fournissent le même fichier pour l'un et pour l'autre : la carte communauté n'est donc plus le panneau sombre qu'elle était, mais le même parchemin que sa voisine. `background: none` annule d'un coup les cinq fonds de `.cadre-nuit` — quatre gemmes d'angle et un dégradé. Ils n'ont plus rien à faire derrière un parchemin, et le dégradé se verrait au travers de la zone centrale que `fill` laisse transparente. `box-shadow: none` supprime le halo. `.cadre-nuit` porte une ombre portée large plus un liseré blanc en incrustation : sur un panneau aux bords nets ça le décollait du fond, mais le parchemin a des marges transparentes autour de sa moulure, où l'ombre se voyait en clair — un rectangle laiteux tout autour du cadre. Le rembourrage tombe à zéro, comme sur les actualités : les 30 px de bordure tiennent déjà lieu de marge. Le laisser à 22 px aurait épaissi la carte d'autant, et comme les trois cartes du bas partagent la hauteur de la plus haute, toute la ligne se serait allongée. */ section.zone-communaute { border-style: solid; border-width: 30px; border-radius: 0; border-image-source: var(--sk-creme); border-image-slice: var(--sk-creme-coupe); border-image-repeat: var(--sk-creme-repet); background: none; box-shadow: none; padding: 0; color: #3b2f21; } /* Le titre était doré : lisible sur le panneau nocturne, et sur rien d'autre. Il reprend l'encre des autres cartes, en gardant son centrage. */ .zone-communaute .bloc-titre { color: var(--ui-nuit); } /* « ÉTAT DES SERVEURS » ET « ACCÈS RAPIDE » — planches dédiées, posées en fond ÉTIRÉ et non en `border-image`. La découpe en neuf zones ne convient pas à ces deux planches : leurs ornements d'angle mordent largement vers l'intérieur, bien au-delà de la moulure. La tranche d'angle doit donc les contenir — une centaine de pixels sur 480 — et tout ce carré se retrouve écrasé dans les 30 px de bordure. La moulure, prise dedans, tombe à un filet et l'ornement à une tête d'épingle. Étirée en fond, la planche garde ses proportions de dessin. L'écart de rapport entre la boîte et l'image est donné plus haut : sensible sur la carte d'état, nul sur celle d'accès. LA BOÎTE NE BOUGE PAS D'UN PIXEL. `border-width` reste à 30 px, hérité de `.cadre-creme` : la bordure devient simplement transparente et sans image. La boîte de contenu est donc celle d'avant, au pixel près — ce qu'un remplacement de la bordure par du rembourrage n'aurait pas garanti. `background-origin` et `background-clip` en `border-box` étendent le fond sous cette bordure. */ section.cadre-creme.zone-serveurs, section.cadre-creme.zone-acces { border-image-source: none; border-color: transparent; background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; box-shadow: none; color: #3b2f21; } section.cadre-creme.zone-serveurs { background-image: var(--sk-etat); } section.cadre-creme.zone-acces { background-image: var(--sk-acces); } /* ========================================================= 4. « EXPLOREZ RENDRYA » — carrousel de régions Le cadre est le fichier fourni, posé TEL QUEL. Il porte déjà tout — moulure, ornements, les deux flèches rondes et la réglette des quatre pastilles. Le HTML vient simplement se poser dedans : les flèches et les pastilles sont des boutons VIDES, qui n'ajoutent qu'une zone cliquable et des effets de survol par-dessus le dessin. ========================================================= */ .explorer-bloc, section.explorer-bloc { position: relative; aspect-ratio: var(--sk-explo-ratio); background: none; border: 0; border-radius: 0; box-shadow: none; /* Plus de rembourrage : tout l'intérieur est posé en absolu, pour que l'illustration occupe l'aire libre entière. */ padding: 0; display: block; overflow: visible; /* Largeur plafonnée : sans elle, la colonne centrale de la grille donne au cadre 646 px, donc une hauteur qui doublerait la ligne du bas. `min-width: 0` l'autorise à descendre sous sa largeur de contenu : sans lui, la piste de grille s'élargit pour le contenir et pousse la troisième colonne hors de la grille. */ width: 100%; max-width: 470px; min-width: 0; margin-inline: auto; } /* LES TROIS CARTES DU BAS : même hauteur, calée sur celle des actualités. Le cadre, plus haut que ses deux voisines, TIRAIT la ligne vers le haut. On inverse le rapport : la ligne prend la hauteur des actualités, et c'est le cadre qui s'y plie. align-self: stretch les trois remplissent la ligne height rapportée à la MOULURE et non au dessin entier, sinon le doré paraît plus court que la bordure des actualités width: auto la largeur en découle, par le rapport du fichier : aucune déformation justify-self: center sans quoi la grille imposerait aussi la largeur `align-self: center` et non `start` : avec `start`, le pourcentage de hauteur se résout contre une hauteur de ligne encore indéfinie et la boîte rétrécit. */ @media (min-width: 1041px) { .zone-actus, .zone-communaute { align-self: stretch; } /* Le cadre ne s'étire PAS avec la ligne : étiré, sa hauteur ne viendrait plus du rapport du fichier et l'illustration se déformerait. Il est centré, et c'est la règle gardée ci-dessous qui lui donne la hauteur de la ligne, là où la colonne est assez large pour l'accueillir. Sélecteur aligné sur celui de ui.css, qui met les trois cartes en `stretch` avec la même spécificité : c'est l'ordre de chargement qui tranche, skin.css venant après. */ .grille-accueil .zone-explorer { align-self: center; } } /* LE SEUIL DE 1761 px, ET POURQUOI IL EXISTE. Le cadre tire sa largeur de sa hauteur, par le rapport du fichier. Or la hauteur de la ligne est celle des actualités, qui GRANDIT quand la fenêtre rétrécit : le texte de la dernière actualité passe sur deux lignes, puis trois. En dessous d'environ 1600 px, la largeur ainsi réclamée dépasse celle de la colonne centrale — le cadre poussait alors la troisième colonne hors de la grille, et la page se mettait à défiler horizontalement. Mesuré : à 1682 px de fenêtre la carte « Accès rapide » finit à 1530, sur une grille qui s'arrête à 1530 ; à 1582 px elle finit à 1444 pour une grille à 1430. Le seuil est posé un cran plus haut que le point de rupture : entre 1682 et 1760 px, la largeur réclamée ne déborde plus la grille mais bute encore sur le plafond de la colonne, et le cadre s'y écrasait de 2 à 11 %. Relevé : rapport 2.79 jusqu'à 1782 px, 2.73 à 1742, 2.47 à 1702. Les deux autres issues ont été essayées et écartées : plafonner la largeur (`min-width: 0`) écrase le cadre — rapport 1.36 au lieu de 2.79 à 1280 px —, et laisser déborder impose une barre de défilement horizontale à toute la page. Au-dessus du seuil, l'alignement demandé s'applique. En dessous, le cadre reprend la règle générale : il tient dans sa colonne, à son rapport, centré dans la ligne. Il est alors plus court que ses voisines, mais juste. Ce défaut existait déjà dans le thème Halloween, où la règle n'était pas gardée : il y débordait de 141 px à 1280 px de large. */ @media (min-width: 1761px) { /* Sélecteur volontairement lourd : la règle générale s'applique via `section.explorer-bloc` (0-2-1), qui l'emporterait sur un simple `.zone-explorer` (0-1-0) et laisserait le plafond de 470 px en place. */ section.explorer-bloc.zone-explorer { align-self: center; transform: translateY(var(--sk-explo-remontee)); height: var(--sk-explo-hauteur); width: auto; max-width: 100%; justify-self: center; margin-inline: auto; } } /* LE CADRE EST UNE SURCOUCHE, PAS UN FOND. L'illustration occupe toute la zone, le cadre se pose PAR-DESSUS et vient en recouvrir les bords. Empilement, du fond vers la surface : z-index 0 les diapositives z-index 2 le cadre z-index 3 le titre, les flèches et les pastilles — au-dessus du cadre, sinon le `backdrop-filter` des flèches n'aurait rien à éclaircir et les boutons ne recevraient plus les clics. */ .explorer-bloc::after { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--sk-explorer) var(--sk-explo-fond) no-repeat; pointer-events: none; } /* Le titre passe EN SURIMPRESSION, en haut de l'illustration : dans le flux, il lui volait un cinquième de la hauteur du cadre. Le voile dégradé de la diapositive le détache du fond. */ .explorer-bloc .bloc-titre { position: absolute; top: var(--sk-explo-titre-y); left: var(--sk-explo-titre-x); right: var(--sk-explo-titre-x); z-index: 3; margin: 0; text-align: center; justify-content: center; font-size: clamp(0.72rem, 0.85vw, 0.9rem); color: var(--sk-encre-ornee); text-shadow: 0 2px 8px rgba(var(--sk-voile), 0.95); pointer-events: none; } /* ---------- Les diapositives ---------- */ /* Les quatre vignettes ne sont plus une grille mais une pile : elles occupent toutes la même place, une seule est visible. Aucune n'est dupliquée — ce sont exactement celles du gabarit. L'aire de contenu couvre toute l'ouverture du cadre : l'illustration remplit le cadre SANS EN DÉPASSER, elle s'arrête au bord intérieur de la moulure, qui la recouvre. Les flèches et les pastilles ne sont pas une contrainte de largeur : elles sont posées AU-DESSUS du cadre. */ .explorer-vignettes { position: absolute; top: var(--sk-explo-haut); right: var(--sk-explo-droite); bottom: var(--sk-explo-bas); left: var(--sk-explo-gauche); z-index: 0; display: block; min-height: 0; gap: 0; } .explorer-vignette { position: absolute; inset: 0; display: block; /* Pas de fond ni de bordure : le cadre en fait déjà office. Une carte dans la carte alourdirait la composition et rognerait la place utile. */ background: none; border: 0; /* Angles carrés : arrondis, ils laissaient dépasser un liseré là où la moulure, elle, forme un angle droit. */ border-radius: 0; overflow: hidden; text-decoration: none; /* État masqué. `visibility` en plus de l'opacité : une diapositive transparente resterait cliquable et intercepterait les clics des autres. */ opacity: 0; visibility: hidden; transform: scale(0.985); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; } .explorer-vignette.explo-actif { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s; } /* L'illustration — ou son emplacement réservé tant qu'aucune n'est fournie — REMPLIT l'aire de contenu, d'un bord à l'autre. `inset: 0` et `height: 100%` annulent la hauteur fixe du gabarit : ici c'est le cadre qui impose la place. */ .explorer-vignette img, .explorer-vignette .vignette-attente { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border-radius: 0; object-fit: cover; } /* L'emplacement réservé n'est pas un panneau plein : il occupe toute la zone et passe sous la moulure, un aplat opaque y redeviendrait ce « fond intérieur » qu'il fallait justement supprimer. Il ne reste qu'un assombrissement léger et la hachure qui signale « illustration à venir ». Le jour où une vraie image est déposée, elle occupe exactement la même surface. */ .explorer-vignette .vignette-attente { background-color: rgba(var(--sk-voile), 0.26); background-image: repeating-linear-gradient(45deg, rgba(var(--sk-accent), 0.05) 0 12px, rgba(var(--sk-accent), 0.10) 12px 24px); box-shadow: none; } /* Survol de la diapositive : elle est cliquable, elle doit le montrer. */ .explorer-vignette.explo-actif:hover .vignette-attente, .explorer-vignette.explo-actif:hover img { box-shadow: inset 0 0 0 1px rgba(var(--sk-accent), 0.65), 0 0 14px rgba(var(--sk-accent), 0.28); } /* Le nom de la région passe lui aussi en surimpression, au bas de l'illustration. Le voile descend jusqu'au bas de la zone, le texte remonte : en calant le bloc plus haut, son dégradé s'arrêtait là et le reste apparaissait en clair — une bande pâle entre l'illustration et la moulure. */ .explorer-vignette .vignette-nom, .explorer-vignette span:last-child { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14% 8% 7.9%; background: linear-gradient(180deg, rgba(var(--sk-voile), 0) 0%, rgba(var(--sk-voile), 0.62) 45%, rgba(var(--sk-voile), 0.88) 100%); font-size: clamp(0.78rem, 1vw, 0.95rem); letter-spacing: 0.06em; color: var(--sk-encre-ornee); text-shadow: 0 2px 6px rgba(var(--sk-voile), 0.9); } /* Voile symétrique en haut, sous le titre du bloc, pour la même raison. */ .explorer-vignette::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 1; border-radius: 0; background: linear-gradient(180deg, rgba(var(--sk-voile), 0.78) 0%, rgba(var(--sk-voile), 0) 100%); pointer-events: none; } /* Tant que le script n'a pas tourné (JavaScript coupé, erreur de chargement), aucune vignette ne porte `.explo-actif` et le cadre paraîtrait vide. On montre la première par défaut : le bloc reste lisible, il perd seulement la navigation. `.explo-pret` est posée par le script une fois en place. */ .explorer-bloc:not(.explo-pret) .explorer-vignette:first-child { opacity: 1; visibility: visible; transform: none; } /* ---------- Flèches ---------- */ /* Boutons TRANSPARENTS posés sur les flèches dessinées dans le cadre. Le dessin n'est pas dupliqué : c'est celui du fichier qui reste visible au travers. D'où l'effet de survol : `backdrop-filter` éclaircit ce qui est peint DERRIÈRE le bouton, donc la flèche du cadre elle-même, proprement découpée par le cercle. Aucun découpage du PNG n'a été nécessaire. */ .explo-fleche { position: absolute; top: var(--sk-explo-fleche-y); width: var(--sk-explo-fleche-taille); aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; z-index: 3; -webkit-appearance: none; appearance: none; transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-backdrop-filter 0.2s ease, backdrop-filter 0.2s ease; } .explo-fleche.gauche { left: var(--sk-explo-fleche-g); } .explo-fleche.droite { left: var(--sk-explo-fleche-d); } .explo-fleche:hover, .explo-fleche:focus-visible { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 16px 4px rgba(var(--sk-accent), 0.55); -webkit-backdrop-filter: brightness(1.28) saturate(1.15); backdrop-filter: brightness(1.28) saturate(1.15); } .explo-fleche:focus-visible { outline: 2px solid var(--ui-or-clair); outline-offset: 2px; } /* Retour au clic : l'appui s'enfonce légèrement, la transition est raccourcie pour que le geste paraisse immédiat. */ .explo-fleche:active { transform: translate(-50%, -50%) scale(0.97); transition-duration: 0.08s; } /* ---------- Pastilles ---------- */ /* Le cadre dessine quatre anneaux vides. Les boutons se posent dessus et n'allument que le centre : l'anneau du fichier fait office de monture, la pastille active est le seul élément ajouté. */ .explo-points { position: absolute; top: var(--sk-explo-point-y); left: 0; right: 0; height: 0; z-index: 3; } .explo-point { position: absolute; top: 0; width: var(--sk-explo-point-taille); aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .explo-point:nth-child(1) { left: var(--sk-explo-point-1); } .explo-point:nth-child(2) { left: var(--sk-explo-point-2); } .explo-point:nth-child(3) { left: var(--sk-explo-point-3); } .explo-point:nth-child(4) { left: var(--sk-explo-point-4); } .explo-point::before { content: ''; position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgb(var(--sk-accent)) 55%, rgba(var(--sk-accent), 0.75) 100%); opacity: 0; transform: scale(0.45); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.35s ease; } /* Survol d'une pastille inactive : elle s'allume à peine, juste assez pour signaler qu'elle est cliquable. */ .explo-point:hover::before { opacity: 0.45; transform: scale(0.8); } .explo-point[aria-current="true"]::before { opacity: 1; transform: scale(1); animation: sk-pastille 2.6s ease-in-out infinite; } /* Respiration lente du halo. Séparée de la transition d'entrée : celle-ci place la pastille, celle-là l'entretient. */ @keyframes sk-pastille { 0%, 100% { box-shadow: 0 0 7px 2px rgba(var(--sk-accent), 0.55); } 50% { box-shadow: 0 0 13px 5px rgba(var(--sk-accent), 0.9); } } /* Qui a demandé moins d'animations ne doit pas subir la pulsation : la pastille reste allumée, simplement fixe. */ @media (prefers-reduced-motion: reduce) { .explo-point[aria-current="true"]::before { animation: none; box-shadow: 0 0 10px 3px rgba(var(--sk-accent), 0.75); } .explorer-vignette { transition-duration: 0.01s; } } /* ========================================================= 5. BOUTONS DU HÉROS Les deux boutons d'appel reçoivent les cadres de la planche. Ils sont posés en `border-image` et non en fond : un fond en `100% 100%` étirerait les ornements des extrémités dès que le libellé change de longueur. La découpe en neuf zones fige les deux bouts et n'étire que le centre. ========================================================= */ .hero-texte .actions .cta-button { border-style: solid; border-width: var(--sk-bouton-bordure); border-image-slice: var(--sk-bouton-coupe); border-image-repeat: stretch; border-image-source: var(--sk-bouton-1); background: none; box-shadow: none; padding: var(--sk-bouton-pad); color: var(--sk-bouton-encre); text-shadow: var(--sk-bouton-ombre); } .hero-texte .actions .cta-button.ghost { border-image-source: var(--sk-bouton-2); } /* Les états reprennent ceux du gabarit — léger soulèvement, enfoncement au clic — mais sans l'ombre portée, qui dessinerait un rectangle autour d'un bouton dont les bords sont découpés. */ .hero-texte .actions .cta-button:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: none; } .hero-texte .actions .cta-button:active { transform: translateY(1px); filter: brightness(0.96); box-shadow: none; } .hero-texte .actions .cta-button:focus-visible { outline: 2px solid var(--ui-or-clair); outline-offset: 3px; }