/* =========================================================================== « À propos » — habillage des blocs NATIFS de Gutenberg. La page est composée de blocs de base : Groupe, Image, Paragraphe. Aucun bloc sur mesure : on ne fait qu'HABILLER, via des classes, la maquette éditoriale « éparpillée » (modèle Galerie Kugel) — trois parties au rythme différent, puis le carrousel « Voir plus ». La mise en page vit dans les MARGES ÉTROITES du site (.content-wrap, calées sur « oeuvres »). RÈGLE ABSOLUE — AUCUN CHEVAUCHEMENT POSSIBLE. Texte et images ne peuvent JAMAIS se recouvrir, quel que soit le contenu (longueur des paragraphes, langue, image ajoutée ou retirée). On l'obtient PAR CONSTRUCTION, et non par des coordonnées réglées à la main : • le plateau (.gl-about__stage) empile ses trois PARTIES en FLUX vertical → jamais de recouvrement ENTRE parties ; • chaque PARTIE est une GRILLE CSS dont les LIGNES sont en hauteur AUTO (dictée par le contenu) et où deux blocs n'occupent jamais la même cellule → jamais de recouvrement DANS une partie. Un texte qui s'allonge grandit sa ligne et POUSSE les blocs suivants vers le bas — il ne les chevauche pas. L'« éparpillé » se lit désormais dans le choix des colonnes, des largeurs (échelle nombre d'or) et de l'alternance gauche / droite — plus dans des Y figés (l'ancien plateau absolu, seule et unique source des chevauchements). Partie 1 (.gl-about--p1) : deux paragraphes à DROITE, deux PETITES images à gauche, échelonnées. Partie 2 (.gl-about__center) : paragraphe au MILIEU ; image moyenne en haut à droite ; image moyenne en bas à gauche ; image plus grande (portrait) en bas à droite. Partie 3 (.gl-about--p3) : texte à DROITE, deux images MOYENNES à gauche, plus une image sous le dernier paragraphe. Cette feuille est chargée À LA FOIS sur le site et dans l'éditeur. NOTE : dans l'éditeur, Gutenberg enveloppe les enfants d'un Groupe de conteneurs techniques et la classe body.gl-about est absente ; la grille « éparpillée » ne s'y voit donc pas — les blocs y apparaissent empilés, entièrement modifiables. Le rendu grille est FIDÈLE sur le site publié (aperçu réel). Spécificité : le thème impose la typo du contenu avec `body.page .content-wrap :where(…) { … !important }` (0,2,1). Les règles qui la surclassent sont écrites avec TROIS classes (0,3,1) — c'est la raison des sélecteurs `body.gl-about .content-wrap …`. ======================================================================== */ :root { --gl-about-gap: 1.6rem; /* gouttière entre colonnes de la grille */ --gl-about-rhythm: 8.5rem; /* rythme vertical entre les parties */ --gl-about-side-gap: 3.2rem;/* écart vertical entre blocs empilés d'une part */ } /* ------------------------------------------- titre de page → petit surtitre */ /* La maquette n'affiche PAS de titre « À propos » : la navigation indique déjà la page. On MASQUE donc le H1 visuellement, mais on le garde dans le DOM (structure + référencement) — masquage accessible, sans occuper d'espace. */ body.gl-about .content-wrap .page-title { position: absolute !important; width: 1px; height: 1px; margin: 0 !important; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- parties */ /* Filet de sécurité de la RÈGLE anti-chevauchement : un mot très long (URL, nom composé) ne doit jamais forcer un texte à déborder de sa colonne sur la voisine → on autorise la coupure. La grille garantit le reste. */ body.gl-about .content-wrap .gl-about__lede, body.gl-about .content-wrap .gl-about__mid, body.gl-about .content-wrap .gl-about__body { overflow-wrap: break-word; min-width: 0; } .gl-about__part { margin-block: var(--gl-about-rhythm); } .gl-about__part:first-of-type { margin-block-start: 0; } /* WordPress enveloppe les enfants d'un bloc Groupe dans un conteneur technique .wp-block-group__inner-container. `display:contents` le fait « disparaître » pour la mise en page : ce sont alors les VRAIS enfants (piles, colonnes de texte, images, paragraphes) qui deviennent les items de la grille / du flex — à TOUS les niveaux (partie, pile d'images, colonne de texte). */ body.gl-about .content-wrap .gl-about__part .wp-block-group__inner-container { display: contents; } /* ---------------------------------------------------------------- images */ .gl-about__part .wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--img-radius, 0.4rem); /* Cadrage : paysage / portrait / carré. --gl-ar vaut un rapport CSS (4/5, 3/4, 3/2…) ; sans lui l'image garde ses proportions d'origine. Réglable par image dans l'éditeur (attribut glAR → --gl-ar en ligne) ; à défaut, valeurs ci-dessous. */ aspect-ratio: var(--gl-ar, auto); object-fit: cover; } /* Cadrages PAR DÉFAUT de la maquette (repli si l'image n'a pas de réglage propre). Valables à toutes les largeurs (bureau, tablette, mobile). */ .gl-about--p1 .gl-about__fig-a, .gl-about--p1 .gl-about__fig-b { --gl-ar: 4/5; } .gl-about__center .gl-about__fig-right { --gl-ar: 4/5; } .gl-about__center .gl-about__fig-botleft { --gl-ar: 3/4; } .gl-about__center .gl-about__fig-botright { --gl-ar: 4/5; } .gl-about--p3 .gl-about__fig-a { --gl-ar: 4/5; } .gl-about--p3 .gl-about__fig-b { --gl-ar: 3/4; } .gl-about--p3 .gl-about__fig-below { --gl-ar: 4/5; } /* Les IMAGES doivent garder EXACTEMENT la taille convenue (maquette + règles nombre d'or), quelle que soit la largeur de leur cellule de grille. On exprime donc leur largeur en cqw — 1cqw = 1% de la bande de contenu — ce qui exige de déclarer .content-wrap comme conteneur de requête. (La taille n'est PAS pilotée par la cellule : la cellule ne fait que contenir et placer l'image.) */ body.gl-about .content-wrap { container-type: inline-size; } /* ===================================================================== TABLETTE + BUREAU (≥ 782px) — GRILLE FLUIDE, SANS CHEVAUCHEMENT. Le plateau empile ses trois parties en flux ; chaque partie est une grille à 12 colonnes, lignes AUTO. Voir l'en-tête : le non-chevauchement est garanti par construction (cellules disjointes + lignes dictées par le contenu). Sous 782px, on passe à la colonne unique (bloc mobile plus bas). ===================================================================== */ @media (min-width: 782px) { /* Plateau = simple pile verticale des trois parties. */ body.gl-about .gl-about__stage { display: flex; flex-direction: column; gap: var(--gl-about-rhythm); } /* La pile absorbe le rythme : les parties ne portent pas, EN PLUS, leur marge. */ body.gl-about .gl-about__stage .gl-about__part { margin-block: 0; } /* Chaque partie du plateau : grille 12 colonnes, lignes AUTO, alignées en haut. (Le carrousel « Voir plus », hors plateau, n'est PAS concerné.) */ body.gl-about .gl-about__stage .gl-about__part { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gl-about-gap); row-gap: var(--gl-about-side-gap); align-items: start; } /* Parties 1 & 3 : la pile d'images et la colonne de texte sont deux ITEMS de grille (colonnes distinctes → jamais de recouvrement) ; à l'intérieur, chacune empile ses blocs en flux normal (→ jamais de recouvrement non plus). */ body.gl-about .gl-about__stage .gl-about__stack, body.gl-about .gl-about__stage .gl-about__text { display: block; min-width: 0; } body.gl-about .gl-about__stage .gl-about__stack > *, body.gl-about .gl-about__stage .gl-about__text > * { margin-block: 0 var(--gl-about-side-gap); } body.gl-about .gl-about__stage .gl-about__stack > :last-child, body.gl-about .gl-about__stage .gl-about__text > :last-child { margin-block-end: 0; } /* LARGEURS D'IMAGES = valeurs convenues, en cqw (= % de la bande de contenu), donc JAMAIS plus grandes que la maquette et indépendantes de la cellule. La cellule (grid-column) est toujours ≥ à l'image : elle la CONTIENT et la place (marge auto à gauche / justify-self), sans jamais l'agrandir. */ /* Partie 1 — pile à gauche (deux petites images échelonnées), texte à droite. */ .gl-about--p1 .gl-about__stack { grid-column: 2 / 8; } .gl-about--p1 .gl-about__text { grid-column: 8 / 13; } .gl-about--p1 .gl-about__fig-a { width: 20cqw; margin-inline-start: auto; } /* calée à droite */ .gl-about--p1 .gl-about__fig-b { width: 20cqw; } /* calée à gauche */ /* Partie 3 — pile à gauche, texte (+ image sous le texte) à droite. */ .gl-about--p3 .gl-about__stack { grid-column: 2 / 8; } .gl-about--p3 .gl-about__text { grid-column: 8 / 13; } .gl-about--p3 .gl-about__fig-a { width: 22.9cqw; margin-inline-start: auto; } .gl-about--p3 .gl-about__fig-b { width: 21.5cqw; } .gl-about--p3 .gl-about__fig-below { width: 34cqw; } /* Partie 2 — quatre blocs éparpillés, en cellules DISJOINTES (rangées AUTO) : rangée 1 : texte au centre + image haute à droite (descend sur 2 rangées) ; rangée 2 : image en bas à gauche ; rangée 3 : image en bas à droite. Chaque image garde sa largeur convenue (cqw) et se place dans sa cellule. */ .gl-about__center .gl-about__mid { grid-column: 5 / 9; grid-row: 1; } .gl-about__center .gl-about__fig-right { grid-column: 9 / 13; grid-row: 1 / 3; width: 26cqw; justify-self: end; } .gl-about__center .gl-about__fig-botleft { grid-column: 2 / 7; grid-row: 2; width: 25cqw; justify-self: start; } .gl-about__center .gl-about__fig-botright { grid-column: 7 / 13; grid-row: 3; width: 35cqw; justify-self: end; } /* Texte : tailles en rem (la grille fluide n'a plus besoin des cqw). */ body.gl-about .content-wrap .gl-about__body, body.gl-about .content-wrap .gl-about__mid { font-size: var(--fs-h2, 1.4rem) !important; max-width: none; } } /* Légendes : Type Deux, petites, discrètes — comme partout sur le site. */ body.gl-about .content-wrap .gl-about__part figcaption.wp-element-caption { font-family: var(--font-ui, sans-serif) !important; font-size: var(--fs-h4) !important; /* aligné sur les légendes du reste du site (grille √φ) */ line-height: 1.6 !important; letter-spacing: 0.04em !important; color: rgba(255, 255, 255, 0.5) !important; margin-top: 0.75rem !important; text-align: left; } /* ------------------------------------------------------------------ chapô */ body.gl-about .content-wrap .gl-about__lede { font-size: var(--fs-d4, 1.9rem) !important; line-height: 1.4 !important; color: rgba(255, 255, 255, 0.92) !important; text-wrap: pretty; } /* ---------------------------------------------------- carrousel « Voir plus » */ /* Filet de séparation AU-DESSUS de « Voir plus », entre la dernière section et le carrousel. On resserre l'écart avec la partie 3 : le rythme plein (--gl-about-rhythm) y laissait un vide trop grand — le filet suffit à marquer la séparation. */ .gl-about__reel { margin-block-start: 3rem; /* Le reel est aussi un .gl-about__part : il hériterait d'un margin-block-end plein (--gl-about-rhythm) qui creusait un grand vide avant le pied de page. On l'annule : il ne reste que l'espace bas standard du site (.content-wrap). */ margin-block-end: 0; padding-block-start: 2.5rem; border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.1)); } body.gl-about .content-wrap .gl-about__reel-label { font-family: var(--font-ui, sans-serif) !important; font-size: var(--fs-h5, 0.68rem) !important; letter-spacing: 0.16em !important; text-transform: uppercase; opacity: 0.45; margin: 0 0 1.4rem !important; } /* Le carrousel « Voir plus » réutilise le bloc maison galerie-lamy/carrousel (mêmes flèches, points, défilement, lightbox, images « eager ») mais adopte ICI une présentation de PELLICULE (vrai carrousel filant), différente du modèle « une diapo pleine largeur à la fois » des fiches actualité : 1) LARGEUR — la pellicule occupe toute la largeur du corps de page et déborde à droite : on la fait défiler horizontalement ; 2) PELLICULE JUSTIFIÉE — toutes les photos sont alignées sur une même HAUTEUR et gardent leur largeur naturelle, donc elles se suivent bord à bord (pas de regroupement « deux par deux », pas de gouttières sombres) ; 3) HAUTEUR DU BLOC — réglée par la seule hauteur de la pellicule ci-dessous. Pour cela on défait la logique du bloc : les diapos ne font plus 100 % de large, elles se dimensionnent à leur contenu, et les images reprennent leur largeur propre (width:auto) au lieu d'être étirées/recadrées. */ body.gl-about .gl-about__reel .actualite-carousel { max-width: none; } body.gl-about .gl-about__reel .actualite-carousel-track { gap: 1.2rem; } body.gl-about .gl-about__reel .actualite-carousel .actualite-slide { flex: 0 0 auto; /* plus de diapo pleine largeur : largeur = contenu */ width: auto; height: 42rem; /* HAUTEUR de la pellicule (donc du bloc) — à ajuster ici */ aspect-ratio: auto; gap: 1.2rem; /* écart interne (paires) = écart entre diapos → strip continu */ background: none; } body.gl-about .gl-about__reel .actualite-carousel .actualite-slide-img { flex: 0 0 auto; /* pas d'étirement : chaque photo garde sa largeur propre */ width: auto; height: 100%; max-width: none; object-fit: contain; } /* Défilement LIBRE (pas de calage diapo par diapo) : sur une pellicule, le calage obligatoire du bloc actualité donne une glisse « deux par deux » saccadée. On le coupe ici pour une glisse continue et naturelle. */ body.gl-about .gl-about__reel .actualite-carousel-viewport { scroll-snap-type: none; } body.gl-about .gl-about__reel .actualite-slide { scroll-snap-align: none; } /* Pas de pastilles de position pour CE carrousel (pellicule → défilement continu). */ body.gl-about .gl-about__reel .actualite-carousel-dots { display: none; } /* ------------------------------------------------------------- mobile */ @media (max-width: 781px) { :root { --gl-about-rhythm: 4.5rem; } body.gl-about .content-wrap .page-title { margin-left: 0; } /* MOBILE — colonne UNIQUE en flux (déjà sans chevauchement possible). Les groupes intermédiaires (parties, piles, colonnes de texte) disparaissent pour que les blocs deviennent directement les éléments de la colonne — réordonnables et séparés par une gouttière UNIQUE. L'« éparpillé » se lit dans l'alternance gauche/droite et la variation des largeurs (échelle nombre d'or). */ body.gl-about .gl-about__stage { display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; /* rythme vertical UNIQUE — l'espacement harmonisé */ } body.gl-about .gl-about__stage .gl-about__part, body.gl-about .gl-about__stage .gl-about__stack, body.gl-about .gl-about__stage .gl-about__text, body.gl-about .gl-about__stage .wp-block-group__inner-container { display: contents; } /* chaque bloc redevient un élément de flux, largeur lue sur --gl-w-m. */ body.gl-about .gl-about__stage .wp-block-image, body.gl-about .gl-about__stage .gl-about__lede, body.gl-about .gl-about__stage .gl-about__mid, body.gl-about .gl-about__stage .gl-about__body { width: var(--gl-w-m, 60%); margin: 0; transform: translate(var(--gl-dx-m, 0), var(--gl-dy-m, 0)); } body.gl-about .content-wrap .gl-about__stage .gl-about__mid { max-width: none; } /* ORDRE narratif (le DOM diffère : chapô en tête ; en partie 3, le paragraphe précède ses deux images). */ .gl-about--p1 .gl-about__lede { order: 1; } .gl-about--p1 .gl-about__fig-a { order: 2; } .gl-about--p1 .gl-about__fig-b { order: 3; } .gl-about--p1 .gl-about__body { order: 4; } .gl-about__center .gl-about__fig-right { order: 5; } .gl-about__center .gl-about__mid { order: 6; } .gl-about__center .gl-about__fig-botleft { order: 7; } .gl-about__center .gl-about__fig-botright{ order: 8; } .gl-about--p3 .gl-about__body { order: 9; } .gl-about--p3 .gl-about__fig-a { order: 10; } .gl-about--p3 .gl-about__fig-b { order: 11; } .gl-about--p3 .gl-about__fig-below { order: 12; } /* LARGEURS (échelle nombre d'or) via --gl-w-m + CÔTÉ (alternance gauche/droite). */ .gl-about--p1 .gl-about__lede { --gl-w-m: 72%; } .gl-about--p1 .gl-about__body, .gl-about__center .gl-about__mid, .gl-about--p3 .gl-about__body { --gl-w-m: 94%; } .gl-about--p1 .gl-about__fig-a { --gl-w-m: 46%; } .gl-about--p1 .gl-about__fig-b { --gl-w-m: 44%; align-self: flex-end; } .gl-about__center .gl-about__fig-right { --gl-w-m: 56%; } .gl-about__center .gl-about__fig-botleft { --gl-w-m: 50%; align-self: flex-end; } .gl-about__center .gl-about__fig-botright{ --gl-w-m: 62%; } .gl-about--p3 .gl-about__fig-a { --gl-w-m: 46%; } .gl-about--p3 .gl-about__fig-b { --gl-w-m: 44%; align-self: flex-end; } .gl-about--p3 .gl-about__fig-below { --gl-w-m: 64%; } /* CARROUSEL « Voir plus » — pellicule bien PLUS PETITE en mobile. */ body.gl-about .gl-about__reel .actualite-carousel .actualite-slide { height: min(52vw, 22rem); gap: 0.8rem; } body.gl-about .gl-about__reel .actualite-carousel-track { gap: 0.8rem; } }