. Tant que l'onglet faisait 196x30 le
le remplissait presque, et la substitution ne se voyait pas. Sur un onglet de 377x58 le
ne faisait plus que 377x43 et
le , reste en ligne, 40x16 : le rouge ne couvrait que le haut, le bas
de l'onglet ne reagissait pas au survol, et le lien n'y etait meme pas
cliquable. Mesure a l'appui.
On chaine donc les hauteurs : le remplit l'onglet, le remplit le
. Le rouge couvre tout, et l'onglet devient cliquable en entier --
il ne l'a jamais ete depuis 2008, ou seuls les 40 px du libelle
repondaient.
La marge du haut passe sur le et suit la largeur, 14/196 comme en
2008. padding-right disparait : les CSS d'origine en posaient 13 sur le
seul libelle SELF DEFENSE -- reliquat de l'epoque a six onglets, qui le
decalait a droite. Sur un onglet de 380 px cela sauterait aux yeux. */
#wrapper #menuNiv1 > div > p {
display: flex;
flex: 1;
padding: 0;
margin: 0;
}
#wrapper #menuNiv1 > div a {
flex: 1;
box-sizing: border-box;
padding: calc(100% * 14 / 196) 0 0 0;
}
/* --- Fil d'Ariane ----------------------------------------------------
Le cadre decoratif et la marge du texte suivent la colonne de gauche,
d'ou les memes rapports : 199/980 et 220/980.
.margefilariane doit etre RESTREINTE a l'accueil. La classe est aussi
posee sur les liens du fil d'Ariane des pages d'article, ou elle n'a
aucune regle dans eam_pages.css : une regle globale leur collerait une
marge gauche de plus de 20 % de la page. */
#contenuariane {
width: 100%;
}
#contenuariane > #fdfilariane {
width: calc(100% * 199 / 980);
}
#filariane {
margin-left: calc(100% * 220 / 980);
}
#wrapper > #fdfilariane { /* accueil seulement - voir l'en-tete */
width: 100%;
}
#wrapper > #fdfilariane .margefilariane {
margin-left: calc(100% * 220 / 980);
}
/* --- Corps : les TROIS colonnes gardent leurs proportions de 2008 -----
199 / 617 / 164 sur 980, ecrits en calc pour rester lisibles. La somme
fait exactement 100 %, et a 980 px de large les trois retombent sur
leurs valeurs d'origine au pixel pres.
box-sizing fait entrer les 2 x 20 px de marge interne de la colonne
centrale dans le calcul. */
/* display: flex met les trois colonnes a la MEME HAUTEUR (align-items:
stretch par defaut). Sans lui, les deux colonnes laterales s'arretaient a
leur contenu et laissaient un grand vide sous elles des que la page
remplissait la fenetre.
Pas de flex-basis impose : chacune garde sa width et le defaut flex: 0 1
auto. Le "1" au milieu -- la faculte de retrecir -- est un filet contre
l'arrondi sous-pixel, qui pourrait faire depasser la somme de 100 % d'une
demi-decimale et jeter la troisieme colonne a la ligne. */
#contenu {
display: flex;
width: 100%;
}
#menuniv2 {
width: calc(100% * 199 / 980);
}
#contenuCentre {
box-sizing: border-box;
width: calc(100% * 617 / 980);
overflow-wrap: break-word;
}
#colonnedroite {
width: calc(100% * 164 / 980);
}
/* --- Les cadres des deux colonnes suivent ----------------------------
Meme technique que la banniere : aspect-ratio donne a la boite le rapport
exact de son image, et background-size: 100% 100% la met a l'echelle SANS
deformation. Les hauteurs d'origine (61, 25, 32, 26 px) etaient figees et
ne pouvaient pas suivre. */
#hautmenu2 {
height: auto;
aspect-ratio: 199 / 61;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#piedmenu2 {
height: auto;
aspect-ratio: 199 / 25;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#hautmenu3 {
height: auto;
aspect-ratio: 164 / 32;
background-size: 100% 100%;
}
#piedmenu3 {
height: auto;
aspect-ratio: 164 / 26;
background-size: 100% 100%;
}
/* Les remplissages sont des bandes de 4 px de haut, repetees. Sans
background-size elles resteraient larges de 199 et 164 px et laisseraient
une bande blanche a droite des que la colonne s'elargit. */
#centremenu2 {
background-size: 100% 4px;
}
#centremenu3 {
background-size: 100% 4px;
}
/* --- Les panneaux respirent, sans se vider ---------------------------
Chaque colonne laterale est faite de trois morceaux : arche du haut,
remplissage creme, arche du bas.
PREMIERE VERSION, ABANDONNEE : laisser le remplissage absorber toute la
hauteur restante (flex: 1). L'arche de fermeture se posait bien en bas de
la colonne, mais au prix de plus de 200 px de creme vide sous le dernier
element du menu. Trop.
Ce qu'il fallait borner, ce n'est pas la hauteur du panneau -- elle
depend du contenu, qui varie d'une rubrique a l'autre -- mais LE VIDE
SOUS LE CONTENU. D'ou un remplissage qui ne grandit plus (flex: 0 1 auto)
et une marge basse mesuree, posee plus bas dans le palier >= 980.
Les deux arches gardent leur hauteur propre : sans flex: 0 0 auto elles
se feraient ecraser. */
#menuniv2,
#colonnedroite {
display: flex;
flex-direction: column;
}
#hautmenu2,
#piedmenu2,
#hautmenu3,
#piedmenu3 {
flex: 0 0 auto;
}
#centremenu2,
#centremenu3 {
flex: 0 1 auto;
}
/* Le rameau de cerisier, en fond de #contenu, suit lui aussi la colonne de
gauche. C'est une aquarelle aux contours flous : l'agrandir ne se voit
pas, contrairement au logo. */
#contenu {
background-size: calc(100% * 199 / 980) auto;
}
/* --- La page remplit la hauteur de la fenetre ------------------------
Il faut retrancher tout ce qui entoure le corps. TROIS des quatre termes
grandissent avec la largeur, ce qui a demande deux corrections
successives -- chacune reperee par une barre de defilement parasite :
banniere 145 px, seul terme vraiment fixe
barre onglets 20 % de la page x 30/196 = 3,06 % de la largeur
fil d'Ariane 20 px d'interligne x l'echelle typographique
pied 4 px de marge + le meme interligne
En reunissant les termes : 176 px + 4,4 % de la largeur.
L'ASYMETRIE DU RISQUE COMMANDE D'ARRONDIR VERS LE BAS. Le fond de page et
le pied portent la meme couleur #7c7c76 : viser court laisse sous le pied
une bande qui ne s'en distingue pas, donc invisible. Viser long ajoute
une barre de defilement sur une page qui tient a l'ecran, et cela se voit.
D'ou 195 px au lieu de 176 : une quinzaine de pixels de securite, qui
absorbent aussi un fil d'Ariane passant sur deux lignes. */
#contenu {
min-height: calc(100vh - 195px - 4.4vw);
}
/* Une image d'article plus large que la colonne la ferait deborder.
box-sizing tient compte du padding de 5 px pose sur tout img. */
#contenuCentre img,
#texteArticle img {
box-sizing: border-box;
max-width: 100%;
height: auto;
}
/* -------------------------------------------------------------------------
ACCUEIL : UNE SEULE ACTUALITE PREND TOUTE LA LARGEUR
Les deux breves partagent la colonne a 47 % chacune. Quand une seule est
renseignee, la moitie restante etait blanche.
Le squelette (sommaire.html) n'emet plus la div d'une breve vide -- c'est
la condition de fonctionnement de ces deux regles, et la raison pour
laquelle elles vivent ici plutot que dans un :empty : une div contenant un
saut de ligne n'est PAS vide au sens de CSS.
Deux cas, deux selecteurs, parce que CSS ne sait pas designer le frere
PRECEDENT :
- actu1 seule : elle est le dernier enfant du centre (viennent avant
elle la presentation et l'encart rouge) ;
- actu2 seule : son parent ne contient pas d'actu1.
clear: both est indispensable. Sans float, la breve occupe bien toute la
largeur MAIS ses lignes contournent la presentation et l'encart rouge
encore flottants au-dessus : le titre se retrouvait coince dans la bande
etroite a droite du bloc rouge. Constate a la mesure.
ET c'est clear qui oblige a passer de margin-top a padding-top pour l'air
au-dessus des breves. La clearance ABSORBE la marge haute : elle place le
bord du bloc juste sous le flottant, marge comprise. La breve seule
remontait donc de 118 px par rapport au cas a deux. Le bloc n'ayant ni
fond ni bordure, un padding rend exactement le meme blanc -- et lui,
personne ne le mange. Meme formule, meme reglage 0.13.
Aucune de ces regles ne s'oppose a l'empilement mobile : toutes deux vont
dans le meme sens, pleine largeur. Le cas normal -- les deux breves -- ne
les declenche pas et garde donc telle quelle la mise en page de 2008.
:has() date de 2023. Sur un navigateur plus ancien, une actu2 SEULE
resterait sur sa moitie droite : degradation, pas casse. Le cas courant
(actu1 seule) n'en depend pas. */
#contenuCentre > #actu1:last-child {
clear: both;
width: auto;
float: none;
margin-top: 0;
padding-top: max(0px, calc((100vw - 980px) * 0.13));
padding-right: 0;
}
#contenuCentre:not(:has(#actu1)) > #actu2 {
clear: both;
width: auto;
float: none;
margin-top: 0;
padding-top: max(0px, calc((100vw - 980px) * 0.13));
padding-left: 0;
border-left: none;
}
/* =========================================================================
A PARTIR DE 980 px - la banniere s'ecarte, elle ne s'agrandit pas
Le logo (488x145) est un bloc figuratif : l'etirer le rendrait flou. Son
flanc droit est blanc, et le bandeau de droite est ancre a droite. On les
laisse donc a leur TAILLE NATIVE et c'est le blanc qui s'ouvre entre les
deux. Aucun agrandissement, donc aucune perte de nettete.
#tetiereG garde ses 488 px ; #tetiereD prend tout le reste. A 980 px cela
redonne 488 + 492, soit la maquette d'origine au pixel pres.
background-repeat est OBLIGATOIRE ici : les CSS d'origine ne le declarent
pas sur la banniere, et sa valeur par defaut est "repeat". Sans lui, le
bandeau de droite se REPETERAIT en mosaique des que sa boite depasse
492 px.
========================================================================= */
@media (min-width: 980px) {
#tetiereG {
width: 488px;
background-repeat: no-repeat;
background-position: left top;
}
/* --- Marge exterieure ------------------------------------------------
Sans elle les deux colonnes sont collees aux bords de la fenetre.
Elle vaut 3 % de ce que l'ecran a de PLUS que 980 px : NULLE a 980 --
la geometrie de 2008 reste donc intacte, et il n'y a pas de rupture au
seuil -- puis 27 px sur un ecran de 1900, 47 px sur un 2560. Elle
s'ouvre avec la place disponible.
ELLE N'ECARTE QUE LE CONTENU, PAS LES FONDS. C'est volontaire : le
rameau de cerisier a gauche et les fleurs du bandeau a droite doivent
continuer de deborder jusqu'aux bords. D'ou l'absence de
background-origin: content-box, qui les aurait rentres avec le texte.
Les bandes qui traversent la page -- barre d'onglets, pied -- n'en
recoivent pas non plus.
box-sizing est indispensable : ces blocs sont en width: 100%, la marge
interne s'y ajouterait et ferait deborder la page. */
#contenu,
#contenuariane,
#wrapper > #fdfilariane {
box-sizing: border-box;
padding-left: calc((100% - 980px) * 0.03);
padding-right: calc((100% - 980px) * 0.03);
}
/* Les coordonnees s'ecartent du bord droit, le decor fleuri non : sa
position "right" se mesure sur la boite de remplissage, pas sur le
contenu. */
#tetiereD {
box-sizing: border-box;
width: calc(100% - 488px);
padding-right: calc((100% - 980px) * 0.03);
background-repeat: no-repeat;
background-position: right top;
}
/* Et de l'air ENTRE les colonnes : les 20 px de 2008, rapportes a 980,
deviennent 38 px a 1900. Le pourcentage se calcule sur #contenu, d'ou
le rapport 20/980 et non 20/617. */
#contenuCentre {
padding-left: calc(100% * 20 / 980);
padding-right: calc(100% * 20 / 980);
}
/* --- Accueil : l'encart rouge et le texte de presentation -----------
En 2008 #presentation vaut 62 % et #promoAccueil 202 px FIXES. Tant
que la colonne fait 577 px les deux se touchent presque (17 px
d'ecart) ; a 837 px le pourcentage ne suit plus le fixe et l'ecart
passe a 100 px. On exprime donc la presentation en retrait du bloc
rouge : l'ecart de 17 px est fige quelle que soit la largeur, et
577 - 202 - 17 = 358, la valeur d'origine.
L'encart, lui, s'elargit avec la page. Il tenait le texte de l'offre
sur trois lignes etroites au milieu d'une colonne de 1078 px.
NUL a 980 -- ses 202 px de 2008 -- puis +83 px a 1900, +142 a 2560.
UNE SEULE VALEUR pilote les deux boites, d'ou la variable : elargir
le rouge retranche automatiquement autant au texte. Sans cela les
deux blocs se chevauchent ou se decollent. Augmenter 0.09 pour
elargir l'encart, le diminuer pour le resserrer.
Le max(0px, ...) : 100vw ne compte pas la gouttiere de barre de
defilement, le calc sort donc -2 px a 980 px de fenetre. */
#contenuCentre {
--encart: calc(202px + max(0px, calc((100vw - 980px) * 0.09)));
}
#contenuCentre #promoAccueil {
box-sizing: border-box;
width: var(--encart);
}
#contenuCentre #presentation {
width: calc(100% - var(--encart) - 17px);
}
/* --- Accueil : le blanc avant les actualites ------------------------
La presentation tient sur cinq lignes a 980 px et sur deux a 1900 :
en s'elargissant, la page a remonte les actualites vers la banniere
et laisse tout le bas vide. On rend a ce blanc la hauteur que la
largeur lui a prise.
NULLE a 980 -- les 22 px de marge de 2008 restent seuls -- puis
120 px sur un ecran de 1900, 205 px sur un 2560. C'est le seul
reglage de cet espace : augmenter 0.13 pour descendre les
actualites, le diminuer pour les remonter.
Le max(0px, ...) n'est pas decoratif : 100vw vaut ici la largeur SANS
la gouttiere de barre de defilement, donc 965 a 980 px de fenetre --
le calc y sort -2 px. Un padding negatif est ramene a zero par le
navigateur, une marge NON : elle remonterait les actualites. */
#actu1,
#actu2 {
margin-top: max(0px, calc((100vw - 980px) * 0.13));
}
/* =====================================================================
ECHELLE TYPOGRAPHIQUE
Elargir la page l'a VIDEE : un paragraphe qui tenait sur cinq lignes a
980 px n'en occupe plus que deux a 1900. Et 12 px sur une colonne de
1153 px, cela fait des lignes de 190 signes, contre 65-75 lisibles.
Agrandir le texte repond aux deux.
Toutes les tailles suivent le meme facteur :
1 + (100vw - 980px) x 0,000335
soit x1 a 980 -- aucune regression -- x1,31 a 1900, x1,53 a 2560.
Le coefficient de chaque regle vaut donc sa taille x 0,000335.
CE BLOC EST RESERVE AU PALIER >= 980. En dessous, (100vw - 980px)
devient negatif et RAPETISSERAIT le texte.
LES INTERLIGNES FIXES SONT AUSSI REPRIS. Les CSS d'origine en posent
six, en pixels. Agrandir les polices sans eux ferait se chevaucher les
lignes -- c'est la faute classique de ce genre de mise a l'echelle.
Les tailles de base des trois conteneurs sont posees explicitement :
les titres (h1, h2) n'ont pas de font-size et valent un multiple em de
leur parent. Sans cela ils resteraient figes pendant que le corps du
texte grandirait, et la hierarchie s'inverserait presque. */
#contenuCentre,
#centremenu2,
#centremenu3 {
font-size: calc(16px + (100vw - 980px) * 0.00536);
}
#filariane,
.margefilariane,
.ssmenuNiv2,
.chapoActus a:link,
.chapoActus a:visited {
font-size: calc(11px + (100vw - 980px) * 0.00369);
}
#texteArticle,
.chapoActus,
.promo2 {
font-size: calc(12px + (100vw - 980px) * 0.00402);
}
#centremenu3 .motPresident,
#centremenu3 .menuNiv3 a {
font-size: calc(13px + (100vw - 980px) * 0.00436);
}
#contenuCentre .chapoArticle,
#contenuCentre #presentation,
#centremenu3 .txtPresident {
font-size: calc(14px + (100vw - 980px) * 0.00469);
}
.promo1 {
font-size: calc(16px + (100vw - 980px) * 0.00536);
}
#piedpage .txtpiedpage {
font-size: calc(10px + (100vw - 980px) * 0.00335);
}
/* --- Les six interlignes figes -------------------------------------- */
.ssmenuNiv2 {
line-height: calc(16px + (100vw - 980px) * 0.00536);
}
#contenuCentre #presentation,
.chapoActus a:link,
.chapoActus a:visited {
line-height: calc(18px + (100vw - 980px) * 0.00603);
}
#filariane,
.margefilariane,
.rubriqMenuNiv2,
#piedpage .txtpiedpage {
line-height: calc(20px + (100vw - 980px) * 0.00670);
}
#centremenu3 .menuNiv3 a {
line-height: calc(28px + (100vw - 980px) * 0.00938);
}
/* Deux hauteurs figees a reprendre pour la meme raison : leur texte
agrandi les deborderait. min-height preserve la valeur de 2008.
Pied : 2 + 20 + 2 = 24 px a 980, exactement l'original. */
#piedpage {
height: auto;
padding: 2px 0;
}
#wrapper > #fdfilariane { /* barre d'Ariane de l'accueil */
height: auto;
min-height: 24px;
}
/* --- Le vide sous les menus lateraux --------------------------------
L'arche de fermeture se pose juste sous le dernier element, plus une
respiration : NULLE a 980 -- la maquette de 2008 est donc intacte --
puis 83 px sur un ecran de 1900, 142 px sur un 2560.
C'EST LE SEUL REGLAGE DE CET ESPACE. Augmenter 0.09 pour descendre
l'arche, le diminuer pour la remonter. */
#centremenu2,
#centremenu3 {
padding-bottom: calc((100vw - 980px) * 0.09);
}
}
/* =========================================================================
JUSQU'A 979 px - la banniere, elle, se met a l'echelle
Ici on ne peut plus preserver la taille native : la banniere occupe toute
la largeur et doit suivre. Les deux moities gardent leurs proportions
(aspect-ratio) et background-size: 100% 100% les met a l'echelle SANS
deformation, puisque la boite a exactement le rapport de son image.
========================================================================= */
@media (max-width: 979px) {
#tetiereG {
box-sizing: border-box;
width: 49.8%;
height: auto;
aspect-ratio: 488 / 145;
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* Le pix.gif interne, force a 460 ou 480 px par un style en ligne, ne
peut pas suivre : on le remplace par un lien qui remplit la boite. */
#tetiereG a {
display: block;
width: 100%;
height: 100%;
}
#tetiereG img {
display: none;
}
#tetiereD {
box-sizing: border-box;
width: 50.2%;
height: auto;
aspect-ratio: 492 / 145;
background-size: 100% 100%;
background-repeat: no-repeat;
/* Les coordonnees sont calees par QUATRE paragraphes vides de 18 px.
Ce calage ne se met pas a l'echelle et deborderait sur le menu des
que la banniere descend sous 145 px de haut. On les retire et on
aligne le bloc sur le bas de la boite, ou il se trouve deja. */
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 3%;
}
#tetiereD p {
display: none;
}
/* --- Accueil : les blocs du centre ----------------------------------
Ils sont en pourcentage SAUF #promoAccueil (202 px) et les marges
internes des deux actualites (15 px), qui feraient passer les totaux
au-dessus de 100 % et provoqueraient un empilement premature.
Selecteur prefixe par #contenuCentre : c'est la specificite de la
regle d'origine, sans quoi elle gagnerait. */
#contenuCentre #promoAccueil {
box-sizing: border-box;
width: 36%;
}
#actu1,
#actu2 {
box-sizing: border-box;
width: 50%;
}
}
/* =========================================================================
PALIER 3 - jusqu'a 760 px : les colonnes s'empilent
La maquette de bureau est faite d'IMAGES de largeur fixe : cadres de
199 px pour la colonne de gauche, banniere de 490x145, onglets de 196 px.
En dessous de ce seuil on ne les etire plus, on les remplace par des
aplats de couleur - ce qui vaut mieux que de les deformer.
========================================================================= */
@media (max-width: 760px) {
/* --- Banniere ------------------------------------------------------- */
/* max-width a la taille NATIVE du logo (488 px) : au-dela il serait
agrandi, donc flou. Entre 488 et 760 px il reste donc net et centre. */
#tetiereG {
width: 100%;
max-width: 488px;
margin-left: auto;
margin-right: auto;
float: none;
background-size: contain;
background-position: center top;
}
/* Le bandeau de droite ("Vivez le sport autrement") est un decor de
492x145 illisible sur petit ecran : on ne garde que les coordonnees,
qui sont l'information utile. */
#tetiereD {
width: 100%;
height: auto;
aspect-ratio: auto;
float: none;
background-image: none;
text-align: center;
padding: 12px 0;
}
.margetetiereD {
margin: 4px 0;
}
/* --- Menu de premier niveau ----------------------------------------
Les cinq onglets deviennent une liste verticale pleine largeur. Les
images de fond sont remplacees par des aplats : le texte est blanc,
d'ou le gris-olive de la charte, et le rouge au survol.
MEME PIEGE DE SPECIFICITE qu'au palier 1, et il mordait ici aussi :
#menuNiv1 > div (0,1,1) perdait contre #menuNiv1 #club (0,2,0), donc
float: left survivait. Les onglets s'empilaient quand meme, parce que
width etait force en !important -- mais #menuNiv1 ne contenant plus
que des flottants s'effondrait a une hauteur NULLE, et le lien
"Accueil" de l'accueil se retrouvait par-dessus le dernier onglet.
Le prefixe #wrapper rend les !important inutiles. */
#menuNiv1 {
display: block; /* annule le flex du haut de fichier */
height: auto;
float: none;
}
#wrapper #menuNiv1 > div {
width: 100%;
height: auto;
aspect-ratio: auto; /* annule le 196/30 du haut de fichier */
float: none;
background-image: none;
background-color: #7C7C76;
border-bottom: 1px solid #FFFFFF;
}
#wrapper #menuNiv1 > div :hover {
background-image: none;
background-color: #D53120;
}
/* La marge est portee par le , comme en haut de fichier -- c'est lui
qui remplit l'onglet et le rend cliquable en entier. La poser sur le