/* Hub japonais et page Grande Vague : blocs motifs, silhouettes de bureau, hero motif, filtre. */

/* Bloc motif : texte à gauche, cartes à droite */
.motif { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sg-7); align-items: start; }
.motif-texte .lead { margin-top: var(--sg-3); }
.motif-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-5); }
@media (max-width: 1023px) { .motif { grid-template-columns: 1fr; gap: var(--sg-5); } }
@media (max-width: 767px) { .motif-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-4); } }

/* Choisir son format : bureau de 100 × 50 cm vu de dessus, tapis à l'échelle */
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-6); }
@media (max-width: 767px) { .formats { grid-template-columns: 1fr; } }
.format figcaption { margin-top: var(--sg-3); }
.format figcaption b { display: block; font: 400 var(--sg-t-h3)/1.3 var(--sg-serif); }
.format figcaption span { color: var(--sg-ecume); font-size: var(--sg-t-petit); }
.bureau { position: relative; aspect-ratio: 2 / 1; border: 2px solid var(--sg-lave); }
.bureau i { position: absolute; display: block; transform: translate(-50%, -50%); }
.bureau .tapis { left: 50%; top: 50%; width: calc(var(--l) * 1%); height: calc(var(--h) * 2%); background: var(--sg-ecume); }
.bureau .clavier { left: 42%; top: 50%; width: calc(var(--kw) * 1%); height: calc(var(--kh) * 2%); background: var(--sg-lave); }
.bureau .souris { left: calc(42% + var(--kw) * .5% + 10%); top: 50%; width: 6%; height: 22%; background: var(--sg-lave); border-radius: 40%; }
.f60 { --l: 60; --h: 30; --kw: 0; --kh: 0; }
.f60 .souris { left: 50%; }
.f80 { --l: 80; --h: 30; --kw: 30; --kh: 10; }
.f90 { --l: 90; --h: 40; --kw: 45; --kh: 14; }

/* Filtre en pastilles (statique) */
.filtre { position: relative; border: 0; padding: 0; margin: 0 0 var(--sg-6); }
.filtre legend { padding: 0; margin-bottom: var(--sg-3); font-weight: 500; }

/* Bandeau de la page motif : même bloc que les autres pages, l'estampe encadrée à droite à la hauteur du bandeau (masquée sous 1100 px) */
.hero-motif { display: grid; grid-template-columns: minmax(0, 1fr) var(--sg-bandeau-h); gap: var(--sg-6); align-items: start; }
.hero-motif .cadre { position: relative; height: var(--sg-bandeau-h); width: var(--sg-bandeau-h); padding: 10px; }
.hero-motif .cadre img { width: 100%; height: 100%; object-fit: contain; }
.bandeau .cadre .kanji-v { position: absolute; top: var(--sg-3); right: var(--sg-3); color: var(--sg-encre); font-size: 13px; }
@media (max-width: 1099px) { .hero-motif { grid-template-columns: 1fr; } .hero-motif .cadre { display: none; } }