/* ============================================================================= NABSEED · la composition ordinateur. Decision du fondateur, 19.09.2026 : diptyque bord a bord, et degrade sombre sous le titre du hero. LE DIAGNOSTIC QUI A CONDUIT ICI, ET IL EST MESURE. Le site etait une colonne mobile etiree. Le texte, lui, etait bien compose : 44 a 55 caracteres par ligne, ce qui est la plage de lecture confortable. Ce n etait donc PAS la longueur de ligne le probleme, et ma premiere mesure qui annoncait 184 caracteres etait fausse : elle mesurait la largeur de la boite, pas celle du texte. Le probleme etait le vide. Sur 49 ecrans d ordinateur balayes a 1904 x 900, DIX etaient occupes a moins de 25 pour cent, dont plusieurs a 0 et 7 pour cent. Une colonne de lecture de 50 caracteres flottant au centre de 1904 pixels laisse, de chaque cote, une bande vide plus large que le texte lui meme. CE QUE FAIT CETTE FEUILLE. Elle ne change pas une valeur de couleur, pas une taille de texte, pas un espacement. Elle change UNE chose : la facon dont le texte et l image se partagent la largeur au dela de 1100 pixels. Le mobile n est pas touche, et c est volontaire : il fonctionnait. POURQUOI 1100 ET PAS 900. Parce qu un diptyque demande que CHAQUE colonne tienne sa fonction. A 900 pixels, la moitie fait 450, et une colonne de texte de 450 pixels ne porte plus que 38 caracteres, ce qui est sous la plage confortable. A 1100, la moitie fait 550, soit environ 48 caracteres : on entre dans la plage, et pas avant. ON NE RECADRE JAMAIS UNE PHOTOGRAPHIE. C est la contrainte qui commande toute la mecanique ci dessous. L image occupe la pleine largeur de sa colonne et sa hauteur suit son propre rapport : c est ELLE qui donne sa hauteur au bloc, et le texte se centre en regard. L inverse, fixer la hauteur du bloc et y faire tenir l image, imposerait un object-fit: cover, c est a dire une amputation. ============================================================================= */ @media (min-width: 1100px) { /* --------------------------------------------------- 01 · le diptyque */ /* UNE SECTION N A PAS DEUX ENFANTS, ELLE EN A TROIS OU QUATRE. C est la mesure qui l a appris, et mon premier jet l ignorait : section 1 : .tete + figure + .corps section 2 : .tete + .fx-derive + .recit section 4 : .tete + figure + .corps + .appels Une grille a deux colonnes sans placement explicite renvoie donc le TROISIEME bloc a la ligne suivante, sous l image. Resultat mesure du premier jet : les pages s allongeaient au lieu de se resserrer, sidr passait de 6 a 7 ecrans et recolte de 7 a 9. La sonde a rattrape cela avant qu une seule page ne soit modifiee. On place donc explicitement : tout le texte en colonne 1, l image en colonne 2 sur TOUTE la hauteur de la section. */ /* ========================================================================== POURQUOI CE N EST PLUS UNE GRILLE, ET CE QUE LA GRILLE NE POUVAIT PAS FAIRE. Une section porte trois ou quatre blocs : .tete, une image, .corps, parfois .appels. En grille a deux colonnes, chaque bloc de texte occupe SA ligne, et l image, qui les enjambe toutes pour rester pleine hauteur, impose sa taille a la premiere. Mesure sur heritage a 1587 px, avant correction : grid-template-rows 438,7 px puis 215,9 px .tete 140 px de haut, dans une ligne de 438 vide sous le chapeau 299 px Ni grid-auto-rows: min-content ni align-content: start n y changent quoi que ce soit : une ligne enjambee par un element plus grand prend sa hauteur, c est la definition. La seule issue en grille serait d envelopper le texte dans un conteneur, donc de toucher au HTML des vingt-quatre pages. Le flottant fait exactement ce qu on demande, et il le fait depuis toujours : l image tient sa moitie, le texte s ecoule le long, du premier bloc au dernier, sans ligne intermediaire donc sans vide. Et si le texte depasse l image, il reprend la pleine largeur dessous, ce qui est le comportement editorial attendu et non un defaut. ========================================================================== */ .sec:has(> figure), .sec:has(> .fx-derive) { display: block; padding-inline: 0; /* la colonne image doit toucher le bord */ } /* le flottant doit etre ferme, sinon la section suivante remonte a cote de l image */ .sec:has(> figure)::after, .sec:has(> .fx-derive)::after { content: ""; display: block; clear: both; } /* Le texte reprend a l interieur la marge que la section a perdue, et borne sa ligne. 66ch reste dans la plage de lecture confortable, qui va jusqu a 75, et remplit la colonne au lieu de flotter dedans : avant correction le texte tenait 370 px dans une colonne de 786. */ .sec:has(> figure) > .tete, .sec:has(> figure) > .corps, .sec:has(> figure) > .recit, .sec:has(> figure) > .appels, .sec:has(> .fx-derive) > .tete, .sec:has(> .fx-derive) > .corps, .sec:has(> .fx-derive) > .recit, .sec:has(> .fx-derive) > .appels { padding-inline: clamp(40px, 5vw, 96px); max-width: 66ch; } /* .tete EST UNE GRILLE DE DOUZE COLONNES, et c est ce qui avait casse le site au premier jet. Mesure : dans une demi-largeur, ses douze colonnes tombaient a 5,89 px et le chapeau, place en colonnes 9 a 12, se retrouvait sur NEUF CARACTERES par ligne. Aucun de mes controles ne pouvait le voir : rien ne se chevauchait, rien ne debordait, la page etait geometriquement parfaite et visuellement detruite. */ .sec:has(> figure) > .tete, .sec:has(> .fx-derive) > .tete { display: block; } .sec:has(> figure) > .tete > *, .sec:has(> .fx-derive) > .tete > * { grid-column: auto; max-width: 100%; } /* L IMAGE, moitie d ecran, bord a bord, et le texte s ecoule le long. */ .sec:has(> figure) > figure, .sec:has(> .fx-derive) > .fx-derive { float: inline-end; /* logique : se retourne seul en ecriture inverse */ width: 50%; margin: 0 0 var(--e-bloc, 32px) clamp(28px, 3vw, 56px); } .sec > figure picture, .sec > figure img { width: 100%; height: auto; display: block; } /* L ALTERNANCE. Une section sur deux pose l image du cote oppose, sans quoi le regard prend le pli au bout de trois sections et la page devient un escalier. */ .sec.reg-b:has(> figure) > figure, .sec.reg-b:has(> .fx-derive) > .fx-derive { float: inline-start; margin: 0 clamp(28px, 3vw, 56px) var(--e-bloc, 32px) 0; } /* --------------------------------------------------- 02 · le bloc colle */ /* .fx-colle est deja un diptyque : on lui applique la meme regle de bord a bord, sans quoi il reste le seul bloc de la page a garder ses marges laterales et il jure. */ .sec:has(.fx-colle) { padding-inline: 0; } .fx-colle > .propos { padding-inline: clamp(40px, 5vw, 96px); max-width: 58ch; } .fx-colle > .tenu { margin: 0; } .fx-colle > .tenu img { width: 100%; height: auto; } /* --------------------------------------------------- 03 · le diptyque d images */ /* .fx-derive porte deux images cote a cote. Elles prennent la pleine largeur, bord a bord, et la gouttiere passe a zero : deux photographies separees par une bande de fond crème se lisent comme deux vignettes, collees elles se lisent comme un plan. */ .sec:has(.fx-derive) { padding-inline: 0; } .sec:has(.fx-derive) > .tete { padding-inline: clamp(40px, 5vw, 96px); max-width: 58ch; } /* DEUX IMAGES DANS UNE DEMI-COLONNE FONT DEUX VIGNETTES. Mesure : dans le diptyque, .fx-derive gardait ses deux images cote a cote a l interieur de la moitie d ecran, soit 25 pour cent de large chacune. Une photographie de territoire a 25 pour cent n est plus un paysage, c est une vignette. On les empile donc dans la colonne : chacune reprend les 50 pour cent entiers. La derive verticale garde tout son sens, elle joue simplement dans l autre axe. */ .fx-derive { display: grid; grid-template-columns: 1fr; gap: 0; } .fx-derive > * { width: 100%; } .fx-derive img { width: 100%; height: auto; display: block; } /* --------------------------------------------------- 04 · les sections pleines */ /* Une figure seule, sans texte en regard, n a aucune raison de s arreter avant le bord. */ .sec > figure:only-of-type:not(:has(~ .tete)) { margin-inline: 0; } .fx-plein img, .visuel.plein img { width: 100%; } }