/* Mises en page propres à certaines pages. Un bloc par page, commenté. */

/* Accueil : héros en deux plans (texte sur fond plein à gauche, estampe à droite), puis bande de réassurance */
.hero-duo { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }
.hero-duo .texte { display: flex; align-items: center; padding: var(--sg-8) var(--sg-7) var(--sg-8) max(var(--sg-gouttiere), calc((100vw - var(--sg-largeur)) / 2 + var(--sg-gouttiere))); }
.hero-duo .plein { max-width: 640px; padding: var(--sg-8) var(--sg-6); }
.hero-duo .accroche { font-size: var(--sg-t-petit); margin-bottom: var(--sg-4); }
.hero-duo .lead { color: var(--sg-papier); margin-top: var(--sg-5); }
.hero-duo .plein .lien { color: var(--sg-papier); }
.hero-duo .visuel { position: relative; display: flex; align-items: center; justify-content: center; background: var(--sg-ecume); padding: var(--sg-8) max(var(--sg-gouttiere), calc((100vw - var(--sg-largeur)) / 2 + var(--sg-gouttiere))) var(--sg-8) var(--sg-7); }
.hero-duo .cadre { width: 100%; max-width: 540px; }
.hero-duo .kanji-v { position: absolute; top: var(--sg-5); right: var(--sg-5); }
@media (min-width: 1024px) and (max-width: 1279px) { .hero-duo .plein { padding: var(--sg-7) var(--sg-6); } .hero-duo h1 { font-size: 34px; } }
@media (min-width: 1280px) { .hero-duo h1 { font-size: 36px; } }
@media (min-width: 1024px) and (max-width: 1099px) { .hero-duo h1 { font-size: 30px; } }
@media (max-width: 1023px) {
  .hero-duo { grid-template-columns: 1fr; min-height: 0; }
  .hero-duo .texte { padding: var(--sg-6) var(--sg-gouttiere); }
  .hero-duo .plein { max-width: none; padding: var(--sg-6) var(--sg-5); }
  .hero-duo .visuel { padding: var(--sg-6) var(--sg-gouttiere); }
}
.bande { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--sg-trait); font-size: var(--sg-t-petit); color: var(--sg-gris); }
.bande > div { padding: var(--sg-5); border-right: 1px solid var(--sg-trait); }
.bande > div:first-child { padding-left: 0; }
.bande > div:last-child { border-right: 0; }
.bande b { display: block; color: var(--sg-encre); font-weight: 600; font-size: 15px; }
@media (max-width: 1023px) { .bande { grid-template-columns: repeat(2, 1fr); } .bande > div:nth-child(2n) { border-right: 0; } .bande > div:nth-child(odd) { padding-left: 0; } .bande > div:nth-child(-n+2) { border-bottom: 1px solid var(--sg-trait); } }
@media (max-width: 767px) { .bande { grid-template-columns: 1fr; } .bande > div { border-right: 0; padding: var(--sg-4) 0; } .bande > div + div { border-top: 1px solid var(--sg-trait); } .bande > div:nth-child(-n+2) { border-bottom: 0; } }

/* Accueil : estampes (cadre blanc autour de chaque motif), histoire de la vague, tapis sur mesure, setup */
.motifs-estampes .carte img { padding: 10px; }
.histoire-duo { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sg-7); align-items: center; }
.histoire-duo .plein .lead { margin-block: var(--sg-5) 0; }
.histoire-duo .cadre { background: transparent; border-color: var(--sg-papier); padding: 12px; }
.histoire-duo .cadre img { background: var(--sg-blanc); }
.sur-mesure { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sg-7); align-items: center; }
.sur-mesure .puces { background: var(--sg-blanc); border: 1px solid var(--sg-trait); padding: var(--sg-6); font-size: var(--sg-t-corps); gap: var(--sg-3); }
.setup-grille { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--sg-5); align-items: end; }
@media (max-width: 1199px) { .setup-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } .setup-grille > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 1023px) {
  .histoire-duo, .sur-mesure { grid-template-columns: 1fr; gap: var(--sg-6); }
  .setup-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .setup-grille > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .setup-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-4); } }