/* ============================================================ PORTFOLIO — sections Vidéo (mosaïque) & Photo La mosaïque casse volontairement la grille régulière : une pièce large qui ouvre, deux verticales au format réseaux, une carrée, une large qui ferme. Chaque réalisation occupe une place différente pour éviter l'effet catalogue. Les cartes vidéo sont des « façades » : seule l'image poster est rendue au chargement, l'iframe YouTube arrive au clic (voir js/video-portfolio.js). Les tailles suivent le rem fluide défini dans le de index.html, donc tout scale avec le reste du site. ============================================================ */ /* --- Cadre commun ------------------------------------------ .container-large plafonne la largeur mais n'applique aucun padding horizontal : sans contrainte propre, le contenu file jusqu'aux bords de l'écran. On aligne donc sur la largeur utile de la galerie photo (.mwg_effect000 .medias, max-width 1200px), en un peu plus large pour que la mosaïque respire. */ .section_reel { padding: 8rem 0 7rem; } .section_reel > .reel_head, .section_reel > .reel_mosaic { max-width: 1600px; margin-inline: auto; padding-inline: 3rem; box-sizing: border-box; } /* La galerie photo garde sa largeur d'origine (1200px, définie dans son embed), mais sa titraille s'aligne sur celle de la mosaïque. */ .section_move > .container-large { max-width: 1600px; margin-inline: auto; padding-inline: 3rem; box-sizing: border-box; } /* --- Titraille ---------------------------------------------- */ .reel_head { margin-bottom: 4.5rem; } .reel_eyebrow { color: var(--color--orange); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1rem; } /* Filet court : ancre le surtitre sans alourdir. */ .reel_eyebrow::before { content: ""; display: inline-block; width: 2.5rem; height: 0.125rem; background: var(--color--orange); vertical-align: middle; margin-right: 0.75rem; } .reel_title { color: var(--color--purple-black); font-family: Clashdisplay Variable, sans-serif; font-size: clamp(3rem, 7vw, 7rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 1.5rem; } .reel_lede { color: var(--color--purple-black); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.5; max-width: 38ch; margin: 0; opacity: 0.75; } /* --- Mosaïque ------------------------------------------------ 12 colonnes : permet des largeurs 7/5 (large + vertical) puis 5/7 (carré + large) sans casser l'alignement vertical. */ /* minmax(0, 1fr) plutôt que 1fr : une piste 1fr se dimensionne sur le contenu le plus large (ici la légende et son max-width en ch) et fait déborder la mosaïque. Le minimum à 0 force la piste à suivre le conteneur, pas le texte. */ /* Le gap de ligne doit absorber la légende, qui vit sous le cadre et n'entre pas dans le calcul de la piste : 6rem évite qu'un titre touche la carte suivante. */ .reel_mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6rem 2rem; } /* Même raison côté élément : min-width vaut auto par défaut. */ .reel_item { min-width: 0; } /* Toutes les vidéos étant en 16:9, le rythme vient de l'échelle et des décalages, pas des ratios. La pièce d'ouverture et celle de fermeture occupent 7 colonnes, les quatre autres 5. */ .reel_item.is-lead { grid-column: span 7; } .reel_item.is-mid { grid-column: span 5; } .reel_item.is-close { grid-column: span 7; } .reel_item.is-short { grid-column: span 4; } /* Quinconce : les moyennes de rang pair descendent, ce qui casse la lecture en lignes sans jamais faire remonter une carte dans la légende de sa voisine. */ .reel_item.is-mid:nth-of-type(3), .reel_item.is-mid:nth-of-type(5) { margin-top: 4rem; } /* Dernière ligne : le paysage (7 col) et le vertical (4 col) se partagent la largeur. Le Short étant beaucoup plus haut à largeur égale, on l'aligne sur le bas du paysage plutôt que sur le haut. */ .reel_item.is-short { align-self: end; } /* --- Carte ---------------------------------------------------- */ /* Un