/* Composants de cette seule page — galerie décalée (mosaic), savoir-faire en trois points (skills), barre d’ancres (anchor-bar), produit (feature-row), savoir-faire (know-how) — déplacés de components.css (performance : chaque page ne
   charge que ses styles, AGENTS.md). À remettre dans components.css dès qu’un autre template les utilise. */
/* Galerie décalée — template-parts/components/mosaic.php, Figma page enfant pilier 12202:3761 : titre colonnes
   5 à 12 (834 px), descriptif de 478 px colonnes 8 à 12, 24 px sous le titre ; photos colonnes 3 à 12 en deux
   colonnes, 80 px entre elles. Seconde colonne décalée pour que ses deux premières photos finissent au même
   niveau (Miguel, 30 septembre 2026 ; Figma : 203 px, soit 10 px d'écart) : hauteur du presque carré moins celle
   du paysage, en part de la largeur (36 %, 194 px à 1440 px). */
.mm-mosaic { row-gap: 0; }
.mm-mosaic__title { grid-column: 5 / -1; max-width: 17.4em; line-height: .9; text-wrap: initial; }
.mm-mosaic__text { grid-column: 8 / -1; max-width: 29.875rem; margin-top: var(--maestra-space-s); font-size: var(--maestra-text-lg); line-height: 1.6; text-align: justify; hyphens: auto; text-wrap: wrap; }
.mm-mosaic__text p + p { margin-top: .8em; }
.mm-mosaic__text p { text-wrap: inherit; }
.mm-mosaic__photos { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--maestra-space-xl); align-items: start; margin-top: var(--maestra-space-xl); }
.mm-mosaic > .mm-mosaic__photos:first-child { margin-top: 0; }
.mm-mosaic__column { display: flex; flex-direction: column; gap: var(--maestra-space-xl); }
.mm-mosaic__column + .mm-mosaic__column { --mm-delay: 90ms; padding-top: calc((640 / 624 - 426 / 640) * 100%); }
.mm-mosaic__photo--tall { aspect-ratio: 624 / 640; }
.mm-mosaic__photo--wide { aspect-ratio: 640 / 426; }
@media (47.5rem < width <= 68.75rem) {
	.mm-mosaic__title { grid-column: 3 / -1; }
	.mm-mosaic__text { grid-column: 6 / -1; }
	.mm-mosaic__photos { grid-column: 1 / -1; }
}
@media (width <= 47.5rem) {
	.mm-mosaic__title, .mm-mosaic__text, .mm-mosaic__photos { grid-column: 1 / -1; }
	.mm-mosaic__text { text-align: left; hyphens: manual; text-wrap: pretty; }
	.mm-mosaic__photos { grid-template-columns: minmax(0, 1fr); row-gap: var(--maestra-space-l); margin-top: var(--maestra-space-l); }
	.mm-mosaic__column { gap: var(--maestra-space-l); }
	.mm-mosaic__column + .mm-mosaic__column { --mm-delay: 0s; padding-top: 0; }
}
/* Compétences sur camel — template-parts/components/skills.php, Figma page enfant pilier 12202:3774 : titre
   colonnes 1 à 5 (529 px), texte de 344 px et lien calés à droite ; 80 px plus bas, trois compétences colonnes
   3 à 12 (48 px entre elles), titres italiques roses sur deux lignes réservées pour aligner les textes. */
.mm-skills { align-items: start; row-gap: var(--maestra-space-xl); }
.mm-skills__title { grid-column: 1 / 6; max-width: 11em; line-height: .9; text-wrap: initial; }
.mm-skills__aside { grid-column: 9 / -1; justify-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--maestra-space-s) - .5rem); width: min(100%, 22.0625rem); }
.mm-skills__aside p { font-size: var(--maestra-text-sm); line-height: 1.6; text-align: justify; hyphens: auto; text-wrap: wrap; }
.mm-skills__list { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--maestra-space-l); margin: 0; padding: 0; list-style: none; }
.mm-skills__list li { display: flex; flex-direction: column; gap: var(--maestra-space-s); min-width: 0; padding-top: var(--maestra-space-s); border-top: 1px solid var(--maestra-rule-inverse); }
.mm-skills__name { min-height: 2em; font: italic 400 var(--maestra-editorial)/1 var(--maestra-serif); letter-spacing: .01em; color: var(--maestra-pink); }
.mm-skills__list p { font-size: var(--maestra-text-lg); line-height: 1.6; }
@media (47.5rem < width <= 68.75rem) {
	.mm-skills__title { grid-column: 1 / 9; }
	.mm-skills__aside { grid-column: 1 / -1; justify-self: start; width: min(100%, 30rem); }
	.mm-skills__list { grid-column: 1 / -1; }
}
@media (width <= 47.5rem) {
	.mm-skills { row-gap: var(--maestra-space-l); }
	.mm-skills__title, .mm-skills__aside, .mm-skills__list { grid-column: 1 / -1; }
	.mm-skills__aside { justify-self: start; width: 100%; }
	.mm-skills__aside p { text-align: left; hyphens: manual; text-wrap: pretty; }
	.mm-skills__list { grid-template-columns: minmax(0, 1fr); gap: var(--maestra-space-l); }
	.mm-skills__name { min-height: 0; }
}
/* Barre des produits — template-parts/components/anchor-bar.php, Figma page enfant pilier 12625:13013 : 80 px
   au-dessus et au-dessous, entre deux filets ; au survol et au focus, lien camel et filet qui se dessine sur le
   filet bas (état « 01 » de Figma). */
.mm-anchor-bar { padding-block: var(--maestra-space-xl); }
.mm-anchor-bar__inner { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--maestra-space-l); border-block: 1px solid var(--maestra-rule); }
.mm-anchor-bar__title { padding-block: var(--maestra-space-s); font: italic 400 var(--maestra-h6)/1 var(--maestra-serif); letter-spacing: .01em; }
.mm-anchor-bar__list { display: flex; flex-wrap: wrap; column-gap: var(--maestra-space-l); margin: 0; padding: 0; list-style: none; }
.mm-anchor-bar__list a { position: relative; display: flex; align-items: center; gap: var(--maestra-space-xs); min-height: 44px; padding-block: var(--maestra-space-s); text-decoration: none; line-height: 1.5; letter-spacing: -.02em; transition: color var(--maestra-hover-fade) ease; }
.mm-anchor-bar__list a::after { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; content: ""; }
.mm-anchor-bar__number { font: italic 400 1.25rem/1.5 var(--maestra-serif); letter-spacing: 0; }
.mm-anchor-bar__list a:focus-visible { color: var(--maestra-brown); }
.mm-anchor-bar__list a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
	.mm-anchor-bar__list a:hover { color: var(--maestra-brown); }
	.mm-anchor-bar__list a:hover::after { transform: scaleX(1); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.mm-anchor-bar__list a::after { transition: transform 850ms var(--maestra-ease); }
}
@media (width <= 47.5rem) {
	.mm-anchor-bar__inner { flex-direction: column; align-items: flex-start; }
	.mm-anchor-bar__title { padding-bottom: 0; }
	.mm-anchor-bar__list { column-gap: var(--maestra-space-s); }
}
/* Produit — template-parts/components/feature-row.php, Figma page enfant pilier 12202:3793 : filet colonnes 3 à 12,
   contenu 80 px dessous ; texte (445 px) et photo carrée sur deux moitiés de 538 px, 80 px entre elles ; numéro et
   surtitre à 32 px du titre, descriptif à 24 px. */
.mm-feature__inner { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: var(--maestra-space-xl); padding-top: var(--maestra-space-xl); border-top: 1px solid var(--maestra-rule); }
.mm-feature__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--maestra-space-s); }
.mm-feature__copy > * { max-width: 27.8125rem; }
.mm-feature__eyebrow { display: flex; gap: var(--maestra-space-s); margin-bottom: var(--maestra-space-2xs); font: 500 var(--maestra-text-sm)/1.5 var(--maestra-sans); letter-spacing: .06em; text-transform: uppercase; }
.mm-feature__title { line-height: .9; text-wrap: initial; }
.mm-feature__text { font-size: var(--maestra-text-lg); line-height: 1.6; text-align: justify; hyphens: auto; text-wrap: wrap; }
.mm-feature__photo { aspect-ratio: 1; }
@media (47.5rem < width <= 68.75rem) {
	.mm-feature__inner { grid-column: 1 / -1; }
}
@media (width <= 47.5rem) {
	.mm-feature__inner { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); row-gap: var(--maestra-space-l); padding-top: var(--maestra-space-l); }
	.mm-feature__text { text-align: left; hyphens: manual; text-wrap: pretty; }
}
/* Savoir-faire — template-parts/components/know-how.php, Figma page enfant pilier 12202:3829 : introduction
   collante colonnes 1 à 4 (445 px, 48 px sous le haut), blocs colonnes 7 à 12 (681 px) entre filets. Titres des
   blocs : 22 px de Figma en --maestra-h6 (21 px). */
.mm-know-how { align-items: start; }
.mm-know-how__intro { grid-column: 1 / 5; position: sticky; top: 6rem; display: flex; flex-direction: column; gap: var(--maestra-space-s); padding-top: var(--maestra-space-l); }
.mm-know-how__intro h2 { line-height: .9; text-wrap: initial; }
.mm-know-how__text { line-height: 1.5; letter-spacing: -.02em; text-align: justify; hyphens: auto; text-wrap: wrap; }
.mm-know-how__text p + p { margin-top: .75em; }
.mm-know-how__text p { text-wrap: inherit; }
.mm-know-how__text a { text-decoration: underline; text-underline-offset: .2em; }
.mm-know-how__list { grid-column: 7 / -1; }
.mm-know-how__item { display: flex; flex-direction: column; gap: var(--maestra-space-s); padding-block: var(--maestra-space-s); border-top: 1px solid var(--maestra-rule); }
.mm-know-how__item h3 { font: 500 var(--maestra-h6)/1.4 var(--maestra-serif); font-variant-caps: small-caps; letter-spacing: -.01em; }
.mm-know-how__item p { font-size: var(--maestra-text-sm); line-height: 1.6; text-align: justify; hyphens: auto; text-wrap: wrap; }
.mm-know-how__item p + p { margin-top: calc(.75em - var(--maestra-space-s)); }
@media (47.5rem < width <= 68.75rem) {
	.mm-know-how__intro { grid-column: 1 / 6; }
	.mm-know-how__text { text-align: left; hyphens: manual; text-wrap: pretty; }
}
@media (height < 50rem) {
	.mm-know-how__intro { position: static; }
}
@media (width <= 47.5rem) {
	.mm-know-how { row-gap: var(--maestra-space-l); }
	.mm-know-how__intro, .mm-know-how__list { grid-column: 1 / -1; }
	.mm-know-how__intro { position: static; padding-top: 0; }
	.mm-know-how__text, .mm-know-how__item p { text-align: left; hyphens: manual; text-wrap: pretty; }
}

/* Pages enfants des piliers — Figma 12202:3705 (page-expertise.php). Placement des composants dans la grille ;
   leurs styles sont dans components.css. */
.mm-expertise__worlds { row-gap: var(--maestra-space-l); }
.mm-expertise__worlds .mm-cards { grid-column: 3 / 13; }
/* « Découvrez / nos autres / univers » sur trois lignes, comme Figma (427 px à 48 px). */
.mm-expertise__worlds .mm-section-heading h2 { max-width: 8.9em; }
@media (47.5rem < width <= 68.75rem) {
	.mm-expertise__worlds .mm-cards { grid-column: 2 / 13; }
}
@media (width <= 47.5rem) {
	.mm-expertise__worlds .mm-cards { grid-column: 1 / -1; }
}
