/* ============================================================
Panneaux de la section 01 / 06 « Un lieu à transformer »
15/09
------------------------------------------------------------
Passage de deux à trois portes d'entrée. Le troisième panneau,
« Direction artistique », existait déjà comme troisième manière
d'intervenir plus bas dans la page : la section d'accueil et la
section 03 / 06 annoncent désormais les mêmes trois métiers.
Origine, editorial.css : grid-template-columns 1fr 1fr, puis 1fr
sous 820px. On ne réécrit pas ce fichier, édité ailleurs.
Pour tout annuler : retirer le dans index.html, supprimer
ce fichier et le troisième .
============================================================ */
.home-commission-grid{
grid-template-columns: repeat(3, 1fr);
}
/* editorial.css repasse en une colonne sous 820px, mais dans une media
query : la regle ci-dessus, sans media et dans une feuille chargee plus
tard, la battait a specificite egale. Mesure : les panneaux tombaient a
125px de large sur un telephone, avec les trois titres qui debordaient.
On redit donc la colonne unique ici.
La rangee unique demandee vaut pour les largeurs ou elle est tenable.
A 375px, trois colonnes font 125px chacune : aucun corps de titre ne
rentre, meme au minimum du clamp. */
@media (max-width: 820px){
.home-commission-grid{
grid-template-columns: 1fr;
}
}
/* --- Largeur de l'en-tête ---------------------------------------------
Le titre porte un
volontaire : « Un lieu à transformer. » puis
« Un moment à composer. ». Il sortait pourtant en quatre lignes.
Mesuré à 1280px de large : la colonne du titre fait 611px, alors que
la deuxième moitié réclame 852px sur une seule ligne en Unbounded à
58.8px. Chaque moitié se recassait donc en deux.
C'est bien un problème de largeur, pas de corps : réduire la police
jusqu'à ce que 852px rentre dans 611px demanderait de descendre à
42px, soit un titre de section plus petit que ceux des panneaux qu'il
annonce. On élargit donc la colonne au lieu de rapetisser le texte.
Le titre court sur les deux colonnes de droite, 953px disponibles au
lieu de 611, et le chapô descend d'une rangée. L'index 01 / 06 garde
sa colonne de gauche, la silhouette de la section ne bouge pas. */
@media (min-width: 821px){
.home-commission-head > div{
grid-column: 2 / -1;
}
/* row-gap et non gap : le gap d'origine, 64px a 1280, s'ajoutait a la
marge du chapo et creusait 95px sous le titre. On annule le seul
ecart vertical. L'horizontal reste, il detache la colonne 01 / 06. */
.home-commission-head{
row-gap: 0;
}
.home-commission-head > .home-section-copy{
grid-column: 2 / -1;
grid-row: 2;
justify-self: start;
max-inline-size: 62ch;
margin-block-start: clamp(1.1rem, 1.8vw, 2rem);
}
}
/* text-wrap: balance, pose sur toutes les .home-section-title, cherche a
egaliser la longueur des lignes. Sur un titre qui porte deja son propre
, il ajoute des coupures par-dessus celle qu'on a voulue. */
#missions .home-section-title{
text-wrap: normal;
}
/* Reserve sur la plage etroite. Mesure a 900px avec le corps global :
679px disponibles pour 672px necessaires, soit 7px de marge. Le titre
tenait, mais la moindre retouche du texte le renvoyait a quatre lignes.
Un corps legerement reduit ici porte la marge a environ 80px. */
@media (min-width: 821px) and (max-width: 1024px){
#missions .home-section-title{
font-size: clamp(2.2rem, 4.6vw, 2.9rem);
}
}
/* --- Texte des panneaux, indexé sur la largeur du panneau -------------
A trois panneaux au lieu de deux, chacun perd un tiers de largeur : le
titre, lui, gardait son corps. Mesure a 1280px : 325px de texte
disponible, un corps de 48px, et « accompagnement » qui reclame
10.83px de largeur par pixel de corps, soit 520px. Il debordait.
Pourquoi pas de vw ici. Le conteneur du site plafonne a 1440px, le vw
non : au-dela, un corps en vw continue de grandir alors que le panneau
ne bouge plus, et le debordement revient. Il faudrait alors empiler les
paliers par tranche de largeur.
cqw resout ca en une ligne : 1cqw vaut 1% de la largeur du PANNEAU, pas
de l'ecran. Le rapport corps/largeur devient constant partout.
Calcul : marges laterales a 6cqw de chaque cote, il reste 88% du
panneau. Corps maximum = 88 / 10.83 = 8.1cqw. On se pose a 7.6cqw,
soit 6% de reserve pour les accents et le crenage. */
.home-commission-grid .commission-panel{
container-type: inline-size;
}
.home-commission-grid .commission-panel-copy{
inset: auto 6cqw 7cqw;
}
.home-commission-grid .commission-panel-copy h3{
font-size: clamp(1.35rem, 7.6cqw, 2.35rem);
line-height: 0.96;
}
/* Accroche et lien suivent la meme logique, en plus discret : ils ne
debordaient pas, mais gardaient une taille fixe qui les faisait paraitre
lourds dans un panneau devenu etroit. */
.home-commission-grid .commission-panel-copy > p,
.home-commission-grid .commission-panel-link{
font-size: clamp(0.56rem, 1.5cqw, 0.68rem);
}
/* --- Filtres allégés --------------------------------------------------
Deux couches assombrissaient l'image, et c'est leur cumul qui pesait :
editorial.css filter: saturate(0.45) brightness(0.72)
editorial.css dégradé de rgba(8,9,10,0.12) à rgba(8,9,10,0.82)
En bas de panneau, la photo ne recevait donc plus que 0.72 × 0.18 de
sa lumière. On desserre les deux, mais pas uniformément : le texte est
posé en bas, c'est la seule zone qui doit rester couvrante.
D'où le dégradé en trois points au lieu de deux. Le haut devient
transparent, le milieu reste quasi net, et tout l'assombrissement se
concentre sous les deux derniers tiers, là où se lisent le titre et
le lien. Un simple dégradé à deux points ne sait pas faire ça : il
grisait l'image entière pour proteger une bande. */
.home-commission-grid .commission-panel figure::after{
background: linear-gradient(
180deg,
rgba(8, 9, 10, 0) 0%,
rgba(8, 9, 10, 0.05) 42%,
rgba(8, 9, 10, 0.70) 100%
);
}
.home-commission-grid .commission-panel img{
filter: saturate(0.68) brightness(0.88);
}
.home-commission-grid .commission-panel:hover img{
filter: saturate(0.82) brightness(0.95);
}
.home-commission-grid .commission-panel:hover figure::after{
background: linear-gradient(
180deg,
rgba(8, 9, 10, 0) 0%,
rgba(8, 9, 10, 0.02) 45%,
rgba(8, 9, 10, 0.62) 100%
);
}
/* Trois panneaux côte à côte tiennent moins bien que deux : chacun perd
un tiers de largeur alors que le titre, lui, garde sa taille. On rend
donc un peu de hauteur pour que le cadrage reste un portrait. */
@media (min-width: 1025px){
.home-commission-grid .commission-panel{
min-height: min(46rem, 74svh);
}
}
/* Une seule rangée, demandé explicitement : pas de repli à deux colonnes
entre 821 et 1024px. Les panneaux y deviennent étroits, d'où la hauteur
rendue ci-dessous pour que le cadrage reste un portrait.
Le palier de corps qui se trouvait ici a ete supprime : il visait le
meme selecteur que la regle en cqw plus haut, avec la meme specificite
et plus bas dans le fichier. Il l'aurait donc ecrasee sur cette seule
plage, en y reintroduisant un corps en vw. Le cqw couvre deja toutes
les largeurs, il n'y a plus de palier a tenir. */
@media (min-width: 821px) and (max-width: 1024px){
.home-commission-grid .commission-panel{
min-height: min(38rem, 62svh);
}
}
/* Sous 821px, editorial.css repasse déjà en une seule colonne :
les trois panneaux s'empilent, rien à ajouter ici. */