/* ========================================================================= * * a-propos.css : la page « À propos » en dossier de bord. * * Parti pris, celui de l'accueil v2 (accueil-v2.css) applique cette fois a une * page de texte long : panneaux cercles d'un lisere d'ambre, libelles en * monospace tres espace, numerotation de rubrique, trame de balayage. Le * vocabulaire est celui des ecrans multifonctions du jeu. * * Ce que la refonte change, dans l'ordre d'importance : * * 1. la page avait cinq rubriques BATIES A L'IDENTIQUE (titre centre, un * panneau pleine largeur, recommencer). Elles sont desormais numerotees, * titrees a gauche, et un sommaire colle les suit : on sait ou on est et * combien il reste. * 2. les deux fiches d'equipage occupaient les deux tiers gauche de la page, * un tiers de vide a droite (un `col-md-2` vide servait de decalage). * Elles passent en deux colonnes symetriques, portrait a cote de l'etat * civil au lieu d'au-dessus. * 3. le corps de texte courait sur 1400 pixels de large. Il est ramene a une * mesure lisible. * * Tout est porte par .apropos-v2 sur : sans ce prefixe, les surcharges * du gabarit de banniere (.page-title-slim / .slider-st2) toucheraient les cent * cinquante pages qui le partagent. * ========================================================================= */ .apropos-v2 { --apr-accent: #fa6d00; --apr-accent-hot: #ffa14d; --apr-ice: #7fd4ff; /* * Le vide de l'accueil v2, remonte d'un cran et RIEN DE PLUS. * * Un essai precedent l'avait porte a #171a23 : lisible, mais bleu, parce que * la valeur bleue y depassait la rouge de six niveaux et que les nappes * froides du sol avaient ete renforcees en meme temps. La regle tenue ici : * on eclaircit sur l'axe NEUTRE, legerement chaud (R >= G >= B), l'ambre du * site restant la seule couleur de la page. */ --apr-void: #131211; /* * Les deux bouts du degrade des panneaux restent AU-DESSUS du sol, les deux : * a un essai precedent le second bout tombait sur la valeur du fond, et la * moitie basse de chaque panneau se dissolvait dedans. */ --apr-panel-a: rgba(34, 29, 24, 0.94); --apr-panel-b: rgba(27, 26, 28, 0.95); --apr-edge: rgba(250, 109, 0, 0.18); --apr-edge-hot: rgba(250, 109, 0, 0.40); --apr-frame-dim: rgba(250, 109, 0, 0.19); --apr-glow: rgba(250, 109, 0, 0.18); --apr-text: #cfcfd4; --apr-text-dim: #8b8b93; --apr-radius: 8px; --apr-mono: "IBM Plex Mono", monospace; --apr-titre: "Chakra Petch", sans-serif; } /* Le mode verite troque l'ambre du site contre son vert. */ .apropos-v2.verite { --apr-accent: #20caa0; --apr-accent-hot: #6ff0cd; --apr-ice: #9ae7ff; --apr-panel-a: rgba(26, 36, 33, 0.94); --apr-panel-b: rgba(24, 29, 29, 0.95); --apr-edge: rgba(32, 202, 160, 0.18); --apr-edge-hot: rgba(32, 202, 160, 0.40); --apr-frame-dim: rgba(32, 202, 160, 0.19); --apr-glow: rgba(32, 202, 160, 0.18); } /* ------------------------------------------------------------------------- * * Le sol de la page * * Le theme peint un gris plat (#1e1e1f sur , #171718 sur les sections en * .bg-st1). La banniere etoilee tombait donc dans du gris des le premier * defilement. Ici le vide continue sous tout le document : trois nappes * colorees fixes, exactement celles de l'accueil v2, et rien d'anime (aucun * repeint au defilement, le fond ne coute que sa premiere image). * ------------------------------------------------------------------------- */ .apropos-v2 { background-color: var(--apr-void); background-image: radial-gradient(76% 44% at 8% 2%, rgba(250, 109, 0, 0.12) 0%, transparent 60%), radial-gradient(58% 40% at 92% 12%, rgba(58, 92, 190, 0.09) 0%, transparent 64%), radial-gradient(96% 60% at 46% 88%, rgba(120, 54, 166, 0.08) 0%, transparent 62%); background-attachment: fixed; background-repeat: no-repeat; } .apropos-v2.verite { background-image: radial-gradient(76% 44% at 8% 2%, rgba(32, 202, 160, 0.13) 0%, transparent 60%), radial-gradient(58% 40% at 92% 12%, rgba(24, 116, 102, 0.11) 0%, transparent 64%), radial-gradient(96% 60% at 46% 88%, rgba(14, 68, 62, 0.12) 0%, transparent 62%); } /* * Le theme pose overflow:hidden sur #wrapper. Un ancetre qui rogne annule * position:sticky pour toute sa descendance : le sommaire ne se serait jamais * colle. Rien ne deborde lateralement sur cette page. */ .apropos-v2 #wrapper { position: relative; overflow: visible; height: auto; } /* ------------------------------------------------------------------------- * * La banniere * * Le ciel etoile reste celui de tout le site (app/js/accueil-v2.js peint dans * [data-ciel-etoile], les regles de cadrage sont dans preload.css). La bande * gagne 60 pixels, le titre cesse d'y flotter seul : un code de dossier au * dessus, un filet lumineux en dessous. * * Les hauteurs se recopient a trois endroits (la section, son .slider-st2 et le * canevas du ciel) : c'est la contrainte du gabarit, le conteneur interieur du * theme fait 940 pixels de haut et deborde volontairement. * ------------------------------------------------------------------------- */ .apropos-v2 .page-title-slim, .apropos-v2 .page-title-slim .slider-st2, .apropos-v2 .page-title-slim .slider-st2 .ciel-etoile { height: 390px; } /* * Le ciel de banniere n'est PAS surcharge ici : c'est celui de tout le site * (preload.css). Un essai l'avait repeint en violet et bleu pour suivre un * fond de page plus clair, et c'est de la que venait l'essentiel de la teinte * froide. Le fondu du bas suffit a raccorder les deux, l'ecart de valeur entre * le noir du ciel et le sol de la page etant de l'ordre de dix niveaux. */ .apropos-v2 .page-title-slim .slider-st2 { padding: 0; display: flex; align-items: center; } /* * Le fondu du bas. Le gabarit du site coupe ses bannieres net, sur du gris * plat : ici le vide continue sous la banniere, la coupure n'a plus de raison * d'etre et le ciel se dissout dans la page. */ .apropos-v2 .apr-hero::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--apr-void) 96%); } .apropos-v2 .apr-hero__inner { position: relative; z-index: 2; padding-top: 62px; /* la hauteur du menu fixe, le titre se centre sous lui */ text-align: center; } .apropos-v2 .apr-hero__title { margin: 0; font-family: var(--apr-titre); font-size: clamp(42px, 6.4vw, 84px); line-height: 1.02; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 0 34px rgba(0, 0, 0, 0.75), 0 0 60px var(--apr-glow); } /* * Le filet sous le titre : un trait qui s'allume au centre. Le degrade est * peint une fois, l'animation ne porte que sur opacity et scaleX, les deux * proprietes que le compositeur traite sans repeindre. */ .apropos-v2 .apr-hero__rule { width: min(420px, 74vw); height: 1px; margin: 22px auto 0; background: linear-gradient(90deg, transparent, var(--apr-accent) 20%, var(--apr-accent-hot) 50%, var(--apr-accent) 80%, transparent); box-shadow: 0 0 14px var(--apr-glow); transform-origin: 50% 50%; animation: apr-rule-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes apr-rule-in { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: scaleX(1); } } /* ------------------------------------------------------------------------- * * La plaque de chiffres * * Elle est posee a la couture entre la banniere et le corps, comme la bande * d'instruments sous un pare-brise. Ce qu'elle apporte : la page racontait le * site en six paragraphes, elle le dit maintenant en quatre nombres avant le * premier mot. * * Le balisage est une liste de definitions (dt le libelle, dd la valeur) : la * paire est annoncee comme telle par les lecteurs d'ecran, et l'ordre visuel * (valeur au-dessus) est obtenu par column-reverse, sans casser l'ordre du * document. * ------------------------------------------------------------------------- */ .apropos-v2 .apr-plaque { position: relative; z-index: 2; /* au-dessus du fondu de la banniere */ border-top: 1px solid var(--apr-frame-dim); border-bottom: 1px solid var(--apr-frame-dim); background: linear-gradient(180deg, rgba(250, 109, 0, 0.06), transparent 72%), rgba(255, 255, 255, 0.026); } .apropos-v2.verite .apr-plaque { background: linear-gradient(180deg, rgba(32, 202, 160, 0.06), transparent 72%), rgba(255, 255, 255, 0.026); } .apropos-v2 .apr-plaque__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: clamp(16px, 2vw, 24px) 0; } .apropos-v2 .apr-stat { display: flex; flex-direction: column-reverse; /* la valeur d'abord a l'oeil, le libelle apres */ align-items: center; gap: 6px; padding: 2px clamp(8px, 1.4vw, 18px); text-align: center; } /* Les cloisons : sur les cellules, pas sur la grille, pour qu'un retour a la ligne (deux colonnes sur mobile) ne laisse pas de trait orphelin. */ .apropos-v2 .apr-stat + .apr-stat { border-left: 1px solid var(--apr-frame-dim); } .apropos-v2 .apr-stat__value { margin: 0; font-family: var(--apr-titre); font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.05; letter-spacing: 0.01em; color: #fff; text-shadow: 0 0 22px var(--apr-glow); font-variant-numeric: tabular-nums; /* le compteur ne fait pas sautiller la ligne */ } .apropos-v2 .apr-stat__label { font-family: var(--apr-mono); font-size: 10px; font-weight: 500; /* La feuille du theme impose 28 px de hauteur de ligne a tout le corps de texte : un libelle de 10 px sur deux lignes deborderait sa cellule. */ line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apr-text-dim); } /* ------------------------------------------------------------------------- * * Le corps : sommaire colle a gauche, rubriques a droite * ------------------------------------------------------------------------- */ .apropos-v2 .apr-main { position: relative; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(28px, 4vw, 62px); max-width: 1240px; margin: 0 auto; padding: clamp(46px, 6vw, 84px) 24px clamp(70px, 8vw, 118px); } /* --- le sommaire --------------------------------------------------------- */ .apropos-v2 .apr-rail { position: sticky; top: 132px; align-self: start; } .apropos-v2 .apr-rail__title { margin: 0 0 16px; padding-left: 14px; font-family: var(--apr-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--apr-text-dim); } .apropos-v2 .apr-rail ol { list-style: none; margin: 0; padding: 0; /* Le rail vertical dont les entrees sont les graduations. */ border-left: 1px solid var(--apr-frame-dim); } .apropos-v2 .apr-rail a { position: relative; /* Deux colonnes : le numero tient la gouttiere, un libelle sur deux lignes s'aligne donc sous lui-meme et non sous le chiffre. */ display: flex; gap: 8px; padding: 9px 8px 9px 20px; font-family: var(--apr-mono); font-size: 12px; line-height: 1.4; color: var(--apr-text-dim); text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; } /* La graduation, posee SUR le rail : elle grandit et s'allume a l'approche. */ .apropos-v2 .apr-rail a::before { content: ""; position: absolute; left: -1px; top: 50%; width: 2px; height: 12px; margin-top: -6px; background: var(--apr-frame-dim); transition: background 0.25s ease, height 0.25s ease, margin-top 0.25s ease; } .apropos-v2 .apr-rail a:hover, .apropos-v2 .apr-rail a:focus-visible { color: #e9e9ef; transform: translateX(3px); } .apropos-v2 .apr-rail a:hover::before, .apropos-v2 .apr-rail a:focus-visible::before { background: var(--apr-accent); } /* L'entree courante, posee par app/js/a-propos.js. */ .apropos-v2 .apr-rail a.is-current { color: #fff; } .apropos-v2 .apr-rail a.is-current::before { height: 26px; margin-top: -13px; background: var(--apr-accent); box-shadow: 0 0 10px var(--apr-glow); } .apropos-v2 .apr-rail__num { flex: 0 0 auto; color: var(--apr-accent); opacity: 0.75; font-variant-numeric: tabular-nums; } .apropos-v2 .apr-rail__label { flex: 1 1 auto; min-width: 0; } /* --- les rubriques ------------------------------------------------------- */ .apropos-v2 .apr-sections { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 78px); min-width: 0; } /* Le menu fixe fait 100 pixels : sans cette marge, une ancre depose le titre de rubrique DERRIERE lui. */ .apropos-v2 .apr-section { position: relative; scroll-margin-top: 124px; } .apropos-v2 .apr-section__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; } .apropos-v2 .apr-section__num { flex: 0 0 auto; font-family: var(--apr-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--apr-accent); } .apropos-v2 .apr-section__title { margin: 0; font-family: var(--apr-titre); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: 0; color: #fff; } /* Le filet mange l'espace libre : les en-tetes s'alignent quelle que soit la longueur du titre, comme les tuiles de l'accueil. */ .apropos-v2 .apr-section__head::after { content: ""; flex: 1 1 auto; min-width: 16px; height: 1px; background: linear-gradient(90deg, var(--apr-frame-dim), transparent 88%); transform: translateY(-8px); } /* --- le panneau, brique commune ----------------------------------------- * * * Meme boite que les .box-text.corner-box du reste du site : coins de 8 px, * lisere d'ambre a 15 %, filet de 3 px en haut qui s'allume au survol. * ------------------------------------------------------------------------- */ .apropos-v2 .apr-panel { position: relative; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px); background: linear-gradient(158deg, var(--apr-panel-a) 0%, var(--apr-panel-b) 62%); border: 1px solid var(--apr-edge); border-top: 3px solid var(--apr-edge); border-radius: var(--apr-radius); overflow: hidden; transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .apropos-v2 .apr-panel:hover { border-color: var(--apr-edge-hot); border-top-color: var(--apr-accent); box-shadow: 0 0 16px var(--apr-glow), 0 4px 16px rgba(0, 0, 0, 0.3); transform: translateY(-2px); } /* Le contenu garde son propre plan, au-dessus du chiffre fantome. */ .apropos-v2 .apr-panel > * { position: relative; z-index: 1; } /* * Le chiffre fantome : un numero de rubrique enorme, en contour seul, cale * dans l'angle haut droit du panneau. C'est lui qui donne au bloc son echelle * et qui distingue les cinq rubriques les unes des autres, la ou elles se * ressemblaient trait pour trait. */ .apropos-v2 .apr-panel__ghost { position: absolute; z-index: 0; top: -16px; right: 12px; font-family: var(--apr-titre); font-size: clamp(84px, 11vw, 148px); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(250, 109, 0, 0.16); user-select: none; pointer-events: none; } .apropos-v2.verite .apr-panel__ghost { -webkit-text-stroke-color: rgba(32, 202, 160, 0.16); } /* L'equerre d'angle, haut gauche : la signature de forme des ecrans du jeu. */ .apropos-v2 .apr-panel::before { content: ""; position: absolute; z-index: 0; left: 10px; top: 10px; width: 22px; height: 22px; border-left: 1px solid var(--apr-edge-hot); border-top: 1px solid var(--apr-edge-hot); border-top-left-radius: 3px; opacity: 0.8; } /* --- le texte des rubriques --------------------------------------------- */ .apropos-v2 .apr-panel__eyebrow { margin: 0 0 14px; font-family: var(--apr-mono); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--apr-accent); } .apropos-v2 .apr-panel__text { max-width: 74ch; /* la mesure lisible, le texte courait sur 1400 pixels */ margin: 0; font-size: 15px; line-height: 1.75; color: var(--apr-text); } /* * Les liens du corps de texte (Ed Trip, Canonn, Discord) etaient de l'ambre sur * du brun, sans autre indice. Ils gardent la couleur et gagnent un soulignement * decale qui se remplit : lisible aussi pour qui ne distingue pas la teinte. */ .apropos-v2 .apr-panel__text a { color: var(--apr-accent-hot); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 1px; transition: color 0.2s ease, background-size 0.2s ease; } .apropos-v2 .apr-panel__text a:hover { color: #fff; background-size: 100% 2px; } /* ------------------------------------------------------------------------- * * Les fiches d'equipage * * Portrait a GAUCHE de l'etat civil, et non plus au-dessus : la fiche tient * dans la moitie de la largeur, les deux membres se lisent cote a cote, et le * tiers de page vide a droite disparait. * ------------------------------------------------------------------------- */ .apropos-v2 .apr-crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .apropos-v2 .apr-fiche { display: flex; flex-direction: column; gap: 16px; padding: 16px; } .apropos-v2 .apr-fiche__top { display: flex; align-items: center; gap: 16px; } /* --- le portrait --------------------------------------------------------- */ .apropos-v2 .apr-fiche__portrait { position: relative; flex: 0 0 auto; width: clamp(96px, 10.5vw, 148px); aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #141312; } .apropos-v2 .apr-fiche__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; /* Au repos le portrait est desature et vire vers l'ambre du site ; il reprend ses couleurs quand on s'approche de la fiche. */ filter: saturate(0.45) contrast(1.05); transform: scale(1.02); transition: filter 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .apropos-v2 .apr-fiche:hover .apr-fiche__portrait img { filter: none; transform: scale(1.06); } /* La trame de balayage du portrait : des lignes d'un pixel, peintes une fois. */ .apropos-v2 .apr-fiche__portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(5, 6, 10, 0.18) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 58%, rgba(5, 6, 10, 0.38) 100%); mix-blend-mode: multiply; } /* --- l'etat civil -------------------------------------------------------- */ .apropos-v2 .apr-fiche__id { min-width: 0; } .apropos-v2 .apr-fiche__name { margin: 0 0 6px; font-family: "cybox", var(--apr-titre); font-size: clamp(14px, 1.35vw, 18px); font-weight: 400; line-height: 1.3; letter-spacing: 0.02em; color: var(--apr-accent); overflow-wrap: anywhere; /* OptimusKoala ne doit pas pousser la colonne */ } /* * Le grade, en pastille. Il portait le meme corps que la biographie et se * confondait avec elle ; une pastille dit « ceci est une etiquette ». */ .apropos-v2 .apr-fiche__role { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 9px; font-family: var(--apr-mono); font-size: 10px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apr-ice); background: rgba(127, 212, 255, 0.08); border: 1px solid rgba(127, 212, 255, 0.22); border-radius: 3px; } /* Le grade du mode verite est un lien avec son sceau en SVG : la pastille doit accepter les deux formes sans que le sceau ne la fasse enfler. */ .apropos-v2 .apr-fiche__role a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; } .apropos-v2 .apr-fiche__role svg { height: 15px; width: auto; flex: 0 0 auto; } .apropos-v2 .apr-fiche__bio { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--apr-text); text-transform: none; } /* ------------------------------------------------------------------------- * * Le pied de page * * Une bande grise posee la, sans transition avec le vide au-dessus. Elle passe * au fond de la page et gagne un filet. * ------------------------------------------------------------------------- */ .apropos-v2 #footer .footer-bottom { background: rgba(0, 0, 0, 0.28); border-top: 1px solid var(--apr-frame-dim); } .apropos-v2 #footer .Copyright p { font-family: var(--apr-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--apr-text-dim); } /* ------------------------------------------------------------------------- * * Entree en scene * * AOS est deja charge par la page (data-aos sur les rubriques). Rien a ajouter * ici, sauf le respect de la preference systeme pour le filet de la banniere, * qui est la seule animation propre a cette feuille. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .apropos-v2 .apr-hero__rule { animation: none; } .apropos-v2 .apr-panel, .apropos-v2 .apr-fiche__portrait img { transition: none; } /* Le decompte des chiffres est coupe par le script lui-meme ; cette regle ne fait que garantir qu'aucune transition ne les touche. */ .apropos-v2 .apr-stat__value { transition: none; } } /* ------------------------------------------------------------------------- * * Etroit * ------------------------------------------------------------------------- */ /* * Sous 1200 px le sommaire cesse d'etre une colonne : il repasse en tete de * page, a plat, en pastilles. Le masquer aurait ete plus simple, mais c'est * justement sur un ecran ou l'on voit peu de chose a la fois qu'un sommaire * sert le plus. */ @media only screen and (max-width: 1199px) { .apropos-v2 .apr-main { grid-template-columns: minmax(0, 1fr); gap: 34px; /* La colonne perd son sommaire lateral : sans plafond elle irait au bord de l'ecran, et un panneau de 1100 px pour une mesure de 74 signes ne serait plus qu'un cadre autour du vide. */ max-width: 920px; } .apropos-v2 .apr-rail { position: static; } .apropos-v2 .apr-rail ol { display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; } .apropos-v2 .apr-rail a { padding: 7px 12px; border: 1px solid var(--apr-frame-dim); border-radius: 3px; background: rgba(7, 9, 13, 0.6); } .apropos-v2 .apr-rail a::before { display: none; } .apropos-v2 .apr-rail a:hover, .apropos-v2 .apr-rail a:focus-visible { transform: none; border-color: var(--apr-edge-hot); } .apropos-v2 .apr-rail a.is-current { border-color: var(--apr-accent); box-shadow: inset 0 0 12px var(--apr-glow); } } @media only screen and (max-width: 900px) { .apropos-v2 .apr-crew { grid-template-columns: minmax(0, 1fr); } } /* * Entre 700 et 1200 px les cinq chiffres tiennent encore cote a cote, mais les * libelles les plus longs passent sur deux lignes. La cellule etant empilee a * l'envers (valeur au dessus, libelle en dessous), un libelle plus haut * poussait sa valeur vers le haut : les cinq chiffres cessaient d'etre sur une * meme ligne. On reserve donc la hauteur de deux lignes, wrap ou pas. */ @media only screen and (min-width: 701px) and (max-width: 1199px) { .apropos-v2 .apr-stat__label { min-height: 30px; /* deux lignes de 10 px a 1.5 d'interligne */ } } /* Cinq chiffres cote a cote ne tiennent plus : ils passent en rangees de deux, et les cloisons suivent (verticale entre les colonnes, horizontale entre les rangees). Le chiffre impair de la derniere rangee prend toute la largeur plutot que de rester tasse a gauche. */ @media only screen and (max-width: 700px) { .apropos-v2 .apr-plaque__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(14px, 3vw, 20px); } .apropos-v2 .apr-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } .apropos-v2 .apr-stat + .apr-stat { border-left: 0; } .apropos-v2 .apr-stat:nth-child(even) { border-left: 1px solid var(--apr-frame-dim); } .apropos-v2 .apr-stat:nth-child(n + 3) { padding-top: clamp(14px, 3vw, 20px); border-top: 1px solid var(--apr-frame-dim); } } @media only screen and (max-width: 767px) { /* La banniere du theme retombe a 300 px sous 767 px (app2.css) : on suit. */ .apropos-v2 .page-title-slim, .apropos-v2 .page-title-slim .slider-st2, .apropos-v2 .page-title-slim .slider-st2 .ciel-etoile { height: 320px; } .apropos-v2 .apr-hero__inner { padding-top: 34px; } /* Le sommaire mange le premier ecran si ses pastilles restent au corps du texte : six libelles longs, une par ligne. */ .apropos-v2 .apr-rail a { padding: 5px 10px; font-size: 11px; } .apropos-v2 .apr-rail ol { gap: 6px; } .apropos-v2 .apr-fiche__top { /* Le portrait garde sa place a gauche, mais cesse de manger la ligne. */ gap: 12px; } .apropos-v2 .apr-panel__ghost { font-size: 76px; top: -8px; right: 8px; } .apropos-v2 .apr-panel__text { font-size: 14.5px; } }