/*
Theme Name: Les Bassins de Jules
Theme URI: https://www.pilot-in.com/
Description: A child theme for Ollie.
Author: Pilot'in
Author URI: https://www.pilot-in.com/
Template:     ollie
Version: 1.0.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: ollie-child
*/

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- Menu ---- */
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content { text-decoration: none; }

/* ---- Liens du pied de page ---- */
.bdj-liens-menu p a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding-bottom: 3px;
}
.bdj-liens-menu p a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--wp--preset--color--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.2, .8, .25, 1);
}
.bdj-liens-menu p a:hover::after,
.bdj-liens-menu p a:focus-visible::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .bdj-liens-menu p a::after { transition: none; }
}

/* ==========================================================
   Vagues : une seule occurrence par bloc
   Ce bloc est la SEULE source des règles .bdj-vagues :
   les retirer du styles.css du theme.json.
   ========================================================== */

.bdj-vagues {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Le contenu passe devant les vagues.
   Les calques de fond d'un bloc Couverture restent en absolute. */
.bdj-vagues > *:not(.wp-block-cover__background):not(.wp-block-cover__image-background) {
  position: relative;
  z-index: 2;
}

/* Les trois vagues : un seul fichier, une seule couche, jamais répétée.
   La boîte a les proportions exactes du motif (616 x 398). */
.bdj-vagues::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: -30px;
  right: -70px;
  width: var(--vw, 620px);
  height: auto;
  aspect-ratio: 616 / 398;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 616 398'%3E%3Cpath fill='%23fff' d='M357.5 397.4C332.7 394.8 319.6 391.2 270 373C211.3 351.6 205.1 350 178.4 350C157.7 350 145.3 352.2 120.9 360.4C88.1 371.4 69.3 374 21.2 374L0 374L0 348.6L0 323.2L35.2 322.7C75 322.3 79.6 321.6 101.9 313.8C131.2 303.5 152.6 299.6 179.5 299.7C211 299.8 224.5 303 283.1 324.3C344.3 346.6 347.3 347.4 375 347.4C399.6 347.4 409.5 345.2 444.8 332.1C455.4 328.2 468.5 323.8 473.8 322.5C496.5 316.7 496.2 316.7 558.2 316.3L616 315.9L616 340.9L616 366L565.8 366C499.9 366 496.7 366.4 460.4 379.8C423.6 393.4 407.6 396.9 379 397.5C369.4 397.7 359.7 397.6 357.5 397.4ZM353.5 247.3C330.8 244.6 319.4 241.3 268.5 222.8C209.4 201.3 200.1 199.1 171.5 200.3C154.2 201.1 142.3 203.5 121.5 210.5C88.3 221.8 79.6 223.1 34.7 223.7L-0 224.2L-0 199.1L0 174L24.2 174C65.6 174 76.8 172.4 105.1 163C137.4 152.3 154.9 149.5 184.3 150.3C216.2 151.1 224 153.1 284.4 175.1C331.7 192.4 337.9 194.4 353 196.5C382.6 200.6 404.5 197.4 442 183.4C484.7 167.5 489.6 166.8 559.8 166.3L616 165.9L616 190.9L616 215.8L562.2 216.2C495.1 216.7 497.2 216.4 451 233.5C422 244.2 400.8 248.1 372.7 247.9C363.8 247.8 355.1 247.5 353.5 247.3ZM357.1 97.9C333.4 95.8 321.7 92.5 267.8 72.9C221.1 55.9 210.1 52.7 192 50.9C169.2 48.7 149.4 51.6 119.6 61.5C87.3 72.3 74.9 74 30.5 74L0 74L0 49L0 24L28.9 24C69.5 24 79.5 22.5 111 11.5C135.3 3.1 159 -0.5 184.5 0.4C213.6 1.4 226.8 4.5 272.5 21.2C342.8 46.9 342.9 46.9 369.1 47.7C396.3 48.6 407.9 46.3 442.5 33.6C485.9 17.6 497.2 16 571.2 16L616 16L616 41L616 66L604.2 66.1C502.1 66.9 496.1 67.4 466 78.5C417.6 96.4 391.8 101 357.1 97.9Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .10;
  animation: bdj-derive-a 27s ease-in-out infinite alternate;
}

/* Plus de seconde couche en bas */
.bdj-vagues::after { content: none; }

/* Garde-fou : classe posée sur deux blocs imbriqués,
   seul le bloc le plus haut dessine des vagues. */
.bdj-vagues .bdj-vagues::before { content: none; }

/* Variante compacte (cartes CTA) */
.bdj-vagues.bdj-vagues--compact::before { --vw: 380px; top: -50px; right: -90px; }

@media (max-width: 1100px) {
  .bdj-vagues::before { --vw: 420px; right: -120px; opacity: .09; }
}

@media (max-width: 781px) {
  .bdj-vagues::before { --vw: 240px; top: -50px; right: -80px; }
  .bdj-vagues.bdj-vagues--compact::before { --vw: 260px; right: -110px; }
}

@keyframes bdj-derive-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-38px, 14px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bdj-vagues::before { animation: none; }
}

/* ---- Hero en bloc Couverture avec photo (photo + dégradé + vagues) ----
   Ne s'applique qu'à une Couverture. Un hero en Groupe sur fond bleu
   garde les vagues standard à 10 %. */
.bdj-hero.wp-block-cover { isolation: isolate; }

/* 1. la photo, couche du bas */
.bdj-hero.wp-block-cover img.wp-block-cover__image-background {
  z-index: 0;
  object-position: center 35%;
}

/* 2. le voile : le dégradé de la charte, fondu en multiply sur la photo */
.bdj-hero.wp-block-cover .wp-block-cover__background {
  z-index: 1;
  opacity: 1;
  background-image: var(--wp--preset--gradient--hero);
  mix-blend-mode: multiply;
}

/* 3. les vagues, au-dessus du voile, fondues dans la lumière */
.bdj-hero.wp-block-cover.bdj-vagues::before {
  z-index: 2;
  mix-blend-mode: soft-light;
  opacity: .55;
}

/* 4. le contenu au-dessus de tout */
.bdj-hero.wp-block-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 3;
}
/* =========================================================
 * Blog : FAQ
 * ======================================================= */
.blog-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, 0.12));
	padding-block: 1rem;
}

.blog-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.blog-faq__item summary::-webkit-details-marker {
	display: none;
}

.blog-faq__item summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.5em;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.blog-faq__item[open] summary::after {
	content: "−";
}

.blog-faq__item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.blog-faq__item > :not(summary) {
	margin-top: 0.75rem;
}

/* =========================================================
 * Blog : pages liées en cards
 * ======================================================= */
.blog-pages-liees__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--medium, 1.5rem);
	margin-top: var(--wp--preset--spacing--medium, 1.5rem);
}

.blog-pages-liees__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 5px;
	background: #fff; /* À remplacer par une couleur du theme.json si besoin. */
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-pages-liees__card:hover,
.blog-pages-liees__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.blog-pages-liees__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.blog-pages-liees__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.blog-pages-liees__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--medium, 1.5rem);
}

.blog-pages-liees__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.blog-pages-liees__cta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.blog-pages-liees__card {
		transition: none;
	}
	.blog-pages-liees__card:hover,
	.blog-pages-liees__card:focus-visible {
		transform: none;
	}
}