/* Maître Macaron · pages des maisons gravées (Ferrari, Bugatti…) :
   la réalisation au centre d'un montage photo de la journée. Mise en page commune, un thème de couleurs par maison (.maison-<nom> sur body). */

/* ---------- Thèmes ---------- */
.maison-ferrari {
  --m-fond: #0D0D0D;
  --m-texte: #FFFFFF;
  --m-doux: rgba(255, 255, 255, .72);
  --m-accent: #D40000;
  --m-accent-texte: #FFFFFF;
  --m-vif: #FFE000;
  --m-tuile: #1A1A1A;
  --m-police: "Barlow Condensed", "Arial Narrow", sans-serif;
  --m-titre-style: italic;
  --m-titre-graisse: 700;
  --m-titre-espace: -.005em;
  --m-titre-taille: clamp(3.4rem, 9vw, 8.4rem);
  --m-titre-ligne: .88;
  --m-lib-style: italic;
  --m-lib-graisse: 600;
  --m-lib-espace: .12em;
  --m-coupe: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  /* Drapeau italien : vert, blanc, rouge */
  --m-drapeau: linear-gradient(90deg, #009246 0 33.33%, #FFFFFF 0 66.66%, #CE2B37 0);
  /* Damier de course */
  --m-bas: conic-gradient(#0D0D0D 25%, #FFFFFF 0 50%, #0D0D0D 0 75%, #FFFFFF 0) 0 0 / 22px 22px;
  --m-bas-hauteur: 22px;
}
.maison-bugatti {
  --m-fond: #0A0E15;
  --m-texte: #F2F5F9;
  --m-doux: rgba(242, 245, 249, .7);
  --m-accent: #A9C8EC;
  --m-accent-texte: #0A0E15;
  --m-vif: #9EC3E6;
  --m-tuile: #151B26;
  --m-police: "Montserrat", "Helvetica Neue", sans-serif;
  --m-titre-style: normal;
  --m-titre-graisse: 300;
  --m-titre-espace: .14em;
  --m-titre-taille: clamp(2.5rem, 6.6vw, 6.2rem);
  --m-titre-ligne: 1;
  --m-lib-style: normal;
  --m-lib-graisse: 500;
  --m-lib-espace: .22em;
  --m-coupe: none;
  /* Drapeau français : bleu, blanc, rouge */
  --m-drapeau: linear-gradient(90deg, #002395 0 33.33%, #FFFFFF 0 66.66%, #ED2939 0);
  /* Fines lames de calandre */
  --m-bas: repeating-linear-gradient(90deg, #9EC3E6 0 2px, transparent 2px 16px) #0A0E15;
  --m-bas-hauteur: 14px;
}
.maison-aquatis {
  --m-fond: #05202B;
  --m-texte: #EFFAFA;
  --m-doux: rgba(239, 250, 250, .72);
  --m-accent: #35C9C1;
  --m-accent-texte: #05202B;
  --m-vif: #7FE6DC;
  --m-tuile: #0C3340;
  --m-police: "Raleway", "Helvetica Neue", sans-serif;
  --m-titre-style: normal;
  --m-titre-graisse: 300;
  --m-titre-espace: .1em;
  --m-titre-taille: clamp(2.6rem, 7vw, 6.6rem);
  --m-titre-ligne: 1;
  --m-lib-style: normal;
  --m-lib-graisse: 500;
  --m-lib-espace: .18em;
  --m-coupe: none;
  /* Drapeau suisse : rouge, blanc, rouge */
  --m-drapeau: linear-gradient(90deg, #D52B1E 0 44%, #FFFFFF 0 56%, #D52B1E 0);
  /* Vagues */
  --m-bas: radial-gradient(circle at 50% 130%, transparent 58%, #35C9C1 60% 74%, transparent 76%) 0 0 / 30px 18px repeat-x, #05202B;
  --m-bas-hauteur: 18px;
}
.maison-mclaren {
  --m-fond: #101012;
  --m-texte: #FFFFFF;
  --m-doux: rgba(255, 255, 255, .7);
  --m-accent: #FF8000;
  --m-accent-texte: #101012;
  --m-vif: #FF8000;
  --m-tuile: #1D1D20;
  --m-police: "Saira", "Helvetica Neue", sans-serif;
  --m-titre-style: normal;
  --m-titre-graisse: 600;
  --m-titre-espace: .02em;
  --m-titre-taille: clamp(3rem, 8vw, 7.4rem);
  --m-titre-ligne: .95;
  --m-lib-style: normal;
  --m-lib-graisse: 600;
  --m-lib-espace: .14em;
  --m-coupe: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  /* Drapeau britannique : bleu, blanc, rouge, blanc, bleu */
  --m-drapeau: linear-gradient(90deg, #012169 0 30%, #FFFFFF 0 42%, #C8102E 0 58%, #FFFFFF 0 70%, #012169 0);
  /* Bandes papaye en biais */
  --m-bas: repeating-linear-gradient(115deg, #FF8000 0 12px, transparent 12px 28px) #101012;
  --m-bas-hauteur: 14px;
}
.maison-maserati {
  --m-fond: #0A1626;
  --m-texte: #F4F6FA;
  --m-doux: rgba(244, 246, 250, .72);
  --m-accent: #F2C92E;
  --m-accent-texte: #0A1626;
  --m-vif: #F2C92E;
  --m-tuile: #14233A;
  --m-police: "Marcellus", Georgia, serif;
  --m-titre-style: normal;
  --m-titre-graisse: 400;
  --m-titre-espace: .08em;
  --m-titre-taille: clamp(2.8rem, 7.4vw, 6.8rem);
  --m-titre-ligne: 1;
  --m-lib-style: normal;
  --m-lib-graisse: 400;
  --m-lib-espace: .16em;
  --m-coupe: none;
  /* Drapeau italien : vert, blanc, rouge */
  --m-drapeau: linear-gradient(90deg, #009246 0 33.33%, #FFFFFF 0 66.66%, #CE2B37 0);
  /* Rayures de store, pour la Dolce Vita */
  --m-bas: repeating-linear-gradient(90deg, #F2C92E 0 26px, #FFFFFF 26px 52px);
  --m-bas-hauteur: 16px;
}
.maison-givenchy {
  --m-fond: #0C0B0A;
  --m-texte: #F6F1E7;
  --m-doux: rgba(246, 241, 231, .72);
  --m-accent: #E8CB98;
  --m-accent-texte: #0C0B0A;
  --m-vif: #E8CB98;
  --m-tuile: #1B1916;
  --m-police: "Bodoni Moda", Didot, Georgia, serif;
  --m-titre-style: normal;
  --m-titre-graisse: 400;
  --m-titre-espace: .06em;
  --m-titre-taille: clamp(2.6rem, 7.4vw, 6.8rem);
  --m-titre-ligne: 1;
  --m-lib-style: normal;
  --m-lib-graisse: 500;
  --m-lib-espace: .16em;
  --m-coupe: none;
  /* Drapeau français : bleu, blanc, rouge */
  --m-drapeau: linear-gradient(90deg, #002395 0 33.33%, #FFFFFF 0 66.66%, #ED2939 0);
  /* Croisillons */
  --m-bas: repeating-linear-gradient(45deg, #E8CB98 0 1px, transparent 1px 11px), repeating-linear-gradient(-45deg, #E8CB98 0 1px, transparent 1px 11px), #0C0B0A;
  --m-bas-hauteur: 16px;
}
.maison-rolls-royce {
  --m-fond: #140E1C;
  --m-texte: #F3EFF6;
  --m-doux: rgba(243, 239, 246, .72);
  --m-accent: #C9AEDA;
  --m-accent-texte: #140E1C;
  --m-vif: #D9C4E6;
  --m-tuile: #241A30;
  --m-police: "Cinzel", Georgia, serif;
  --m-titre-style: normal;
  --m-titre-graisse: 400;
  --m-titre-espace: .06em;
  --m-titre-taille: clamp(2.5rem, 6.8vw, 6.4rem);
  --m-titre-ligne: 1.02;
  --m-lib-style: normal;
  --m-lib-graisse: 600;
  --m-lib-espace: .14em;
  --m-coupe: none;
  /* Drapeau britannique : bleu, blanc, rouge, blanc, bleu */
  --m-drapeau: linear-gradient(90deg, #012169 0 30%, #FFFFFF 0 42%, #C8102E 0 58%, #FFFFFF 0 70%, #012169 0);
  /* Barreaux de la calandre */
  --m-bas: repeating-linear-gradient(90deg, #D9D9E0 0 3px, #140E1C 3px 10px);
  --m-bas-hauteur: 20px;
}
.maison-nestle-shop {
  --m-fond: #1E060C;
  --m-texte: #FFFFFF;
  --m-doux: rgba(255, 255, 255, .74);
  --m-accent: #D8103A;
  --m-accent-texte: #FFFFFF;
  --m-vif: #FFB27A;
  --m-tuile: #3A0D18;
  --m-police: "Poppins", "Helvetica Neue", sans-serif;
  --m-titre-style: normal;
  --m-titre-graisse: 600;
  --m-titre-espace: .01em;
  --m-titre-taille: clamp(2.8rem, 7.6vw, 7rem);
  --m-titre-ligne: 1;
  --m-lib-style: normal;
  --m-lib-graisse: 600;
  --m-lib-espace: .1em;
  --m-coupe: none;
  /* Drapeau suisse : rouge, blanc, rouge */
  --m-drapeau: linear-gradient(90deg, #D52B1E 0 44%, #FFFFFF 0 56%, #D52B1E 0);
  /* Barres de KitKat */
  --m-bas: repeating-linear-gradient(90deg, #D8103A 0 40px, #FFFFFF 40px 44px);
  --m-bas-hauteur: 16px;
}
.maison-gubelin {
  --m-fond: #12181A;
  --m-texte: #F5F1EA;
  --m-doux: rgba(245, 241, 234, .72);
  --m-accent: #E9A46A;
  --m-accent-texte: #12181A;
  --m-vif: #F2C19A;
  --m-tuile: #20292C;
  --m-police: "Tenor Sans", "Helvetica Neue", sans-serif;
  --m-titre-style: normal;
  --m-titre-graisse: 400;
  --m-titre-espace: .14em;
  --m-titre-taille: clamp(2.4rem, 6.4vw, 6rem);
  --m-titre-ligne: 1.05;
  --m-lib-style: normal;
  --m-lib-graisse: 400;
  --m-lib-espace: .16em;
  --m-coupe: none;
  /* Drapeau suisse : rouge, blanc, rouge */
  --m-drapeau: linear-gradient(90deg, #D52B1E 0 44%, #FFFFFF 0 56%, #D52B1E 0);
  /* Pierres taillées */
  --m-bas: linear-gradient(135deg, #E9A46A 25%, transparent 25%) -10px 0 / 20px 20px, linear-gradient(225deg, #E9A46A 25%, transparent 25%) -10px 0 / 20px 20px, linear-gradient(315deg, #E9A46A 25%, transparent 25%) 0 0 / 20px 20px, linear-gradient(45deg, #E9A46A 25%, transparent 25%) 0 0 / 20px 20px, #12181A;
  --m-bas-hauteur: 20px;
}

/* En-tête posé sur le fond sombre : texte clair tant qu'il n'a pas son fond */
.page-maison .entete:not(.plein) { color: #FFFFFF; }
.page-maison .entete:not(.plein) .logo em { color: var(--m-vif); }
.page-maison .entete:not(.plein) .panier-lien { border-color: rgba(255, 255, 255, .32); }

/* ---------- Titre ---------- */
.ms-galerie { padding: clamp(2rem, 4vw, 3.5rem) var(--marge) clamp(4rem, 8vw, 6.5rem); overflow-x: clip; background: var(--m-fond); color: var(--m-texte); }
.ms-galerie .fil { color: var(--m-doux); }
.ms-galerie .fil a:hover, .ms-galerie .fil [aria-current] { color: var(--m-texte); }
.ms-galerie .fil span[aria-hidden] { color: var(--m-vif); }
.ms-tete { max-width: 1320px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.ms-etiquette { display: inline-block; margin: 0 0 1.2rem; padding: .35rem .9rem; background: var(--m-accent); color: var(--m-accent-texte); font-family: var(--m-police); font-size: .82rem; font-weight: var(--m-lib-graisse); font-style: var(--m-lib-style); letter-spacing: .16em; text-transform: uppercase; clip-path: var(--m-coupe); }
.ms-titre { margin: 0; font-family: var(--m-police); font-size: var(--m-titre-taille); font-weight: var(--m-titre-graisse); font-style: var(--m-titre-style); line-height: var(--m-titre-ligne); letter-spacing: var(--m-titre-espace); text-transform: uppercase; }
.ms-titre em { font-family: var(--serif); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--m-vif); }
.ms-l { display: inline-block; overflow: hidden; padding: 0 .08em .06em 0; vertical-align: top; }
.ms-l > * { display: inline-block; }
.ms-txt { max-width: 38rem; margin: 1.3rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--m-doux); }

/* ---------- Montage : la réalisation au centre, deux photos de chaque côté, les autres en dessous ---------- */
.ms-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 12.5vw, 190px); gap: clamp(8px, 1.1vw, 14px); max-width: 1320px; margin: 0 auto; }
.ms-photo { position: relative; display: block; margin: 0; padding: 0; overflow: hidden; border: 0; background: var(--m-tuile); cursor: zoom-in; }
.ms-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, 50% 50%); transition: transform 1.1s var(--luxe); }
.ms-photo span { position: absolute; left: 0; bottom: 0; padding: .45rem 1rem .45rem .9rem; background: var(--m-fond); color: var(--m-texte); font-family: var(--m-police); font-size: .8rem; font-weight: var(--m-lib-graisse); font-style: var(--m-lib-style); letter-spacing: var(--m-lib-espace); text-transform: uppercase; transform: translateY(101%); transition: transform .6s var(--luxe); }
.ms-photo:hover img, .ms-photo:focus-visible img { transform: scale(1.06); }
.ms-photo:hover span, .ms-photo:focus-visible span { transform: none; }
.ms-realisation { grid-column: 4 / 10; grid-row: 1 / 5; box-shadow: 0 0 0 3px var(--m-accent); }
.ms-realisation span { transform: none; background: var(--m-accent); color: var(--m-accent-texte); font-size: .92rem; }
.ms-realisation::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--m-drapeau); }
/* Gros plan de la réalisation, à côté d'elle : légende aux couleurs de la maison */
.ms-oeuvre span { transform: none; background: var(--m-accent); color: var(--m-accent-texte); }
.ms-g1 { grid-column: 1 / 4; grid-row: 1 / 3; }
.ms-g2 { grid-column: 1 / 4; grid-row: 3 / 5; }
.ms-d1 { grid-column: 10 / 13; grid-row: 1 / 3; }
.ms-d2 { grid-column: 10 / 13; grid-row: 3 / 5; }
/* Rangée du bas : vignettes de 3 colonnes (ou --l colonnes), ou un grand bandeau */
.ms-b { grid-column: span var(--l, 3); grid-row: span 3; }
.ms-b.ms-bandeau { grid-column: 1 / 13; grid-row: span 2; }
.ms-retour { max-width: 1320px; margin: clamp(2rem, 4vw, 3rem) auto 0; font-family: var(--m-police); font-size: .95rem; font-weight: var(--m-lib-graisse); font-style: var(--m-lib-style); letter-spacing: var(--m-lib-espace); text-transform: uppercase; }
.ms-retour a { border-bottom: 2px solid var(--m-vif); transition: color .4s; }
.ms-retour a:hover { color: var(--m-vif); }
.ms-bas { height: var(--m-bas-hauteur); background: var(--m-bas); }
/* Photos presque carrées (Nestlé Shop) : la réalisation à gauche, deux photos larges à droite */
@media (min-width: 901px) {
  .maison-nestle-shop .ms-realisation { grid-column: 1 / 8; }
  .maison-nestle-shop .ms-d1, .maison-nestle-shop .ms-d2 { grid-column: 8 / 13; }
}

/* ---------- Visionneuse ---------- */
.ms-visionneuse { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 4rem clamp(.5rem, 3vw, 2rem) 2rem; background: rgba(8, 8, 10, .94); color: #FFFFFF; }
.ms-visionneuse[hidden] { display: none; }
.ms-visionneuse figure { display: flex; flex-direction: column; align-items: center; height: 100%; margin: 0; min-height: 0; }
.ms-visionneuse img { flex: 1 1 auto; min-height: 0; max-width: 100%; object-fit: contain; }
.ms-visionneuse figcaption { margin-top: .8rem; font-family: var(--m-police); font-size: 1rem; font-weight: var(--m-lib-graisse); font-style: var(--m-lib-style); letter-spacing: var(--m-lib-espace); text-transform: uppercase; text-align: center; }
.ms-v-fermer, .ms-v-fleche { display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 50%; background: none; color: #FFFFFF; font-size: 1.3rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.ms-v-fermer { position: absolute; top: 1rem; right: 1rem; font-size: 1.8rem; }
.ms-v-fermer:hover, .ms-v-fleche:hover { background: var(--m-vif); border-color: var(--m-vif); color: var(--m-fond); }

@media (max-width: 900px) {
  .ms-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
  .ms-realisation { grid-column: 1 / 3; grid-row: span 3; }
  /* Macarons sur toute la largeur de la photo : une case moins haute évite de les couper */
  .maison-aquatis .ms-realisation, .maison-maserati .ms-realisation, .maison-rolls-royce .ms-realisation { grid-row: span 2; }
  .ms-g1, .ms-g2, .ms-d1, .ms-d2, .ms-b { grid-column: auto; grid-row: span 1; }
  .ms-b.ms-bandeau, .ms-photo.ms-large { grid-column: 1 / 3; grid-row: span 1; }
  /* Photo seule sur sa ligne (nombre impair après la réalisation) : toute la largeur */
  .ms-photo:last-child:nth-child(even) { grid-column: 1 / 3; }
  .ms-photo span { transform: none; font-size: .66rem; padding: .35rem .7rem; }
  .ms-visionneuse { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .ms-visionneuse figure { grid-column: 1 / -1; grid-row: 1; }
  .ms-v-prec { justify-self: end; }
}