/* Atelier Bruma : galerie photo plein cadre. Chargé sur le site et dans l'éditeur. */

/* Barre du haut : marque, descriptif, navigation */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 20px 16px; text-transform: uppercase; position: relative; z-index: 5;
}
.wp-block-group.top > * { margin: 0; }
/* Logo : le texte du titre reste dans la page (lecteurs d'écran), masqué derrière le logo */
.top .wp-block-site-title { font-size: 0; line-height: 0; }
.top .wp-block-site-title a {
  display: block; width: 150px; aspect-ratio: 83.9 / 14.7;
  background: url("../images/logo-bruma-rose.svg") no-repeat left center / contain;
  overflow: hidden; white-space: nowrap; text-indent: 100%;
}
.top .wp-block-site-title a,
.top .mid a,
.top .wp-block-navigation a { text-decoration: none; }
.top .mid { text-align: center; font-size: 12px; line-height: 1.15; }
.top .wp-block-navigation { justify-self: end; font-size: 14px; text-transform: uppercase; }
.top .wp-block-navigation .wp-block-navigation__container { gap: 16px; }

/* Nuage de photos : positions libres, pas de grille, pas de contour */
.wp-block-group.scatter { position: relative; width: 100%; max-width: none; box-sizing: border-box; }
.wp-block-group.scatter > * { margin: 0; }
.scatter .tile { position: absolute; aspect-ratio: 4 / 5; border-radius: 0; }
.scatter .tile img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }

/* Titres : « difference » inverse les couleurs derrière le texte.
   #ffcece (= blanc moins #003131) donne exactement le vert #003131 sur fond blanc
   et des couleurs inversées là où le titre croise une photo. */
.scatter .title,
.scatter .sub {
  position: absolute; left: 50%; transform: translateX(-50%); text-align: center;
  color: #ffcece; mix-blend-mode: difference; z-index: 3; pointer-events: none;
}
.scatter .title {
  font-family: var(--wp--preset--font-family--title, 'Playfair Display', Georgia, serif);
  font-weight: 400; white-space: nowrap;
  font-size: clamp(56px, 11vw, 158px); line-height: 1.2; letter-spacing: -.018em;
}
.scatter .sub { text-transform: uppercase; font-size: 12px; line-height: 1.15; white-space: nowrap; }

/* Apparition : fondu + léger glissement, uniquement opacity et transform (fluide) */
@media (prefers-reduced-motion: no-preference) {
  .js .scatter .tile { opacity: 0; transform: translateY(28px) scale(.97); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
  .js .scatter .tile.in { opacity: 1; transform: none; }
  .js .scatter .sub { opacity: 0; transition: opacity 1.4s ease; }
  .js .scatter .sub.in { opacity: 1; }
  .js .scatter .bio { opacity: 0; transition: opacity 1.4s ease; }
  .js .scatter .bio.in { opacity: 1; }
  .js .scatter .title .ch { display: inline-block; opacity: 0; transform: translateY(.18em); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
  .js .scatter .title.in .ch { opacity: 1; transform: none; }
}

/* Hauteurs et écarts entre séries */
.scatter.s1 { height: 66vw; }
.scatter.s2 { height: 70vw; margin-top: 236px; }
.scatter.s3 { height: 60vw; margin-top: 236px; }

/* Placement desktop (en % de la largeur) */
/* Série 1 : Aube */
.s1 .t1 { left: .4%;   top: 6%;  width: 11%; }
.s1 .t2 { left: 27.5%; top: 0;   width: 22%; }
.s1 .t3 { right: 0;    top: 0;   width: 15%; }
.s1 .t4 { left: 66%;   top: 40%; width: 20%; }
.s1 .t5 { left: 4.5%;  top: 52%; width: 22%; }
.s1 .t6 { left: 28.8%; top: 78%; width: 8%; }
.s1 .title { top: 30%; }
.s1 .sub { top: 52%; }
/* Série 2 : Zénith */
.s2 .t1 { left: 24%;  top: 4%;  width: 18%; }
.s2 .t2 { left: 52%;  top: 10%; width: 14%; }
.s2 .t3 { left: 36%;  top: 54%; width: 20%; }
.s2 .t4 { right: 3%;  top: 38%; width: 17%; }
.s2 .t5 { left: 3%;   top: 62%; width: 12%; }
.s2 .title { top: 22%; }
/* Série 3 : Horizon */
.s3 .t1 { left: 8%;   top: 22%; width: 18%; }
.s3 .t2 { left: 58%;  top: 30%; width: 20%; }
.s3 .t3 { left: 82%;  top: 0;   width: 14%; }
.s3 .title { top: 26%; }
/* Page Infos : trois photos de l'atelier autour du texte centré */
.scatter.s-infos { height: 64vw; }
.s-infos .t1 { left: 8%;  top: 3%;  width: 20%; }
.s-infos .t2 { right: 7%; top: 22%; width: 22%; }
.s-infos .t3 { left: 12%; top: 62%; width: 16%; }
.s-infos .t4 { left: 46%; top: 0;   width: 11%; }
.s-infos .t5 { left: 67%; top: 72%; width: 13%; }
.s-infos .title { top: 16vw; font-size: clamp(40px, 5.2vw, 110px); line-height: 1.1; }
.s-infos .sub { top: 30vw; }
.scatter .bio {
  position: absolute; left: 50%; transform: translateX(-50%); top: 34vw; width: clamp(260px, 30vw, 440px);
  text-align: center; z-index: 3; font-size: 16px; line-height: 1.5;
}
.scatter .bio p { margin: 0 0 1em; }

/* Pages courantes (Infos, mentions légales, panier...) */
.page-main { padding: 60px 16px 0; }

/* Boutique WooCommerce : fiche produit épurée, dans le ton du reste du site */
.single-product main.wp-block-group,
.post-type-archive-product main.wp-block-group,
.tax-product_cat main.wp-block-group { padding: 60px 16px 0; box-sizing: border-box; }
/* Page Boutique : petit catalogue, donc ni tri ni compteur, et on ouvre la fiche en cliquant la photo */
.woocommerce-result-count,
.woocommerce-ordering { display: none; }
.woocommerce ul.products li.product .button { display: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 22px; margin: 14px 0 4px; }
.woocommerce ul.products li.product .price { font-size: 16px; color: #000; }
.woocommerce div.product .product_title { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.1; margin: 0 0 .4em; }
.woocommerce div.product p.price { font-size: 22px; color: #000; margin: 0 0 .3em; }
.woocommerce div.product .tva-note { margin: 0 0 1.6em; font-size: 12px; text-transform: uppercase; }
.woocommerce div.product p.stock { margin: 1.2em 0; color: #000; }
.woocommerce div.product .product_meta { display: none; }
/* Une seule rubrique « Description » : pas d'onglets, pas de titre en double */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: none; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 720px; margin: 56px 0 0; }
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel ul { margin: 0 0 1em; }

/* Couleurs de la marque : vert #003131 et rose #f6c1cb */
::selection { background: #f6c1cb; color: #003131; }
.page-main h1,
.woocommerce-products-header__title,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.stock { color: #003131; }
/* Petite barre rose sous les titres de page */
.page-main h1::after,
.woocommerce-products-header__title::after,
.woocommerce div.product .product_title::after {
  content: ""; display: block; width: 72px; height: 6px; margin-top: .35em; background: #f6c1cb;
}
/* Liens : soulignement rose */
.page-main a:not(.wp-element-button),
.woocommerce-breadcrumb a,
.woocommerce div.product .woocommerce-tabs a {
  text-decoration-color: #f6c1cb; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
/* Boutons : fond rose, texte vert ; l'inverse au survol */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce #respond input#submit,
body .wc-block-components-button:not(.is-link),
body .wp-element-button {
  background: #f6c1cb; color: #003131; border: 0; border-radius: 0; transition: background .2s ease, color .2s ease;
}
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .wc-block-components-button:not(.is-link):hover,
body .wp-element-button:hover {
  background: #003131; color: #f6c1cb;
}
.woocommerce div.product .quantity .qty { border: 1px solid #003131; color: #003131; }

/* Pied de page */
.site-footer-inner {
  margin-top: 96px; padding: 0 16px 37px; display: flex; justify-content: space-between;
  text-transform: uppercase; font-size: 12px; line-height: 1.15;
}
.wp-block-group.site-footer-inner > * { margin: 0; }
.site-footer-inner a { text-decoration: none; }
.home .site-footer-inner { margin-top: 236px; }

/* Mobile : colonne unique, décalages conservés pour l'esprit « mur de galerie » */
@media (max-width: 760px) {
  .top { grid-template-columns: 1fr auto; }
  .top .mid { display: none; }
  .top .wp-block-site-title a { width: 110px; }
  .top .wp-block-navigation { font-size: 12px; }
  .top .wp-block-navigation .wp-block-navigation__container { gap: 10px; }
  .wp-block-group.scatter { height: auto; margin-top: 90px; display: flex; flex-direction: column; gap: 46px; padding: 0 16px; }
  .scatter .tile { position: relative; left: auto; right: auto; top: auto; width: 70%; }
  .scatter .tile:nth-of-type(even) { align-self: flex-end; width: 56%; }
  .scatter .title,
  .scatter .sub { position: static; transform: none; order: -1; color: #003131; mix-blend-mode: normal; }
  .scatter .title { font-size: 56px; white-space: normal; }
  .scatter .sub { margin-top: -30px; }
  .scatter .bio { position: static; transform: none; order: -1; width: auto; margin-top: -22px; }
  .scatter.s-infos .title { font-size: 44px; }
  .scatter.s1, .scatter.s2, .scatter.s3, .scatter.s-infos { height: auto; }
  .site-footer-inner { flex-direction: column; gap: 8px; }
}