/* =================================================================
   Glaz — « Blanc vitaminé » (D5)

   Le fond est blanc. La couleur arrive par blocs arrondis qui flottent
   dessus, jamais en bandeaux pleine largeur. Deux primitives portent
   toute la maquette :

     .glaz-panel  bloc coloré arrondi (concept, tarifs, cadeau, héro)
     .glaz-card   carte de section (les 4 étapes)

   Les couleurs viennent toutes de theme.json (--wp--preset--color--*),
   jamais d'un hex écrit ici.
   ================================================================= */

:root {
  --glaz-gd: var(--wp--preset--color--gd);
  --glaz-ink: var(--wp--preset--color--ink);
  --glaz-mint: var(--wp--preset--color--mint);
  --glaz-mint-soft: var(--wp--preset--color--mint-soft);
  --glaz-cream: var(--wp--preset--color--cream);
  --glaz-white: var(--wp--preset--color--white);
  --glaz-yel: var(--wp--preset--color--yel);
  --glaz-pink: var(--wp--preset--color--pink);
  --glaz-coral: var(--wp--preset--color--coral);
  --glaz-sage: var(--wp--preset--color--sage);

  /* Rayons : un seul jeu, réutilisé partout. */
  --glaz-radius-panel: 40px;
  --glaz-radius-card: 28px;

  /* Rebond « friendly », la signature d'animation de la D5. */
  --glaz-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Défilement doux pour les ancres */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* =================================================================
   PANNEAU (bloc coloré arrondi qui flotte sur le blanc)
   ================================================================= */

.is-style-glaz-panel {
  border-radius: var(--glaz-radius-panel);
  overflow: hidden;
}

/* =================================================================
   CARTE (les étapes ; la couleur vient du bloc, pas d'ici)
   ================================================================= */

.is-style-glaz-card {
  border-radius: var(--glaz-radius-card);
  padding: 34px 26px;
  transition: transform 0.3s var(--glaz-bounce), box-shadow 0.3s ease;
}
.is-style-glaz-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -22px rgba(12, 59, 51, 0.5);
}

/* En-tête de carte : le chiffre à gauche, le pictogramme à droite. */
.glaz-step-head {
  align-items: center;
}
.glaz-step-head .glaz-step-num {
  margin: 0;
}
/* Le picto porte la carte, le chiffre n'est qu'un repère : il est donc
   plus gros et plus contrasté que le numéro (cf. .glaz-step-num). */
.glaz-step-icon {
  width: 68px;
  height: 68px;
  flex: none;
}
.glaz-step-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 1.5;
}

/* Le chiffre d'étape : en retrait derrière le picto, mais assez présent
   pour tenir tête au titre de la carte. */
.glaz-step-num {
  font-family: var(--wp--preset--font-family--fredoka);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 10px;
  opacity: 0.75;
}

/* Titres des étapes : montés d'un cran par rapport au preset « Moyen »
   (19px), sinon ils paraissent maigres face au picto de 68px.
   Limité à #etapes : les cartes de la page Tarifs gardent leur échelle.
   !important nécessaire : WordPress marque lui-même ses classes de taille
   (.has-large-font-size) en !important, impossible de passer devant sans. */
#etapes .is-style-glaz-card h3 {
  font-size: 25px !important;
}

/* =================================================================
   IMAGES
   ================================================================= */

.is-style-glaz-rounded img,
.is-style-glaz-rounded .wp-block-post-featured-image__overlay {
  border-radius: var(--glaz-radius-card);
}

/* Galerie : une grande photo à gauche, deux petites à droite.
   Grille CSS et pas des colonnes WP : les colonnes ne savent pas
   faire tenir une image sur deux rangées. */
.glaz-gallery {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 20px;
}
.glaz-gallery > * {
  margin: 0;
  height: 100%;
}
.glaz-gallery > *:first-child {
  grid-row: 1 / 3;
}
.glaz-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--glaz-radius-card);
  display: block;
}

/* =================================================================
   HÉRO : la tasse posée sur un fond menthe, avec ses deux formes
   ================================================================= */

/* Sans cadre ni fond depuis le retour cliente : le logo sur sa tache de
   peinture se suffit, et un rectangle arrondi derriere lui faisait cohabiter
   deux langages graphiques. Le bloc reste le repere de positionnement des deux
   pastilles, qui sont ses pseudo-elements : c'est le fond qui disparait, pas
   elles. `overflow` redevient visible pour que le logo puisse deborder. */
.glaz-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  overflow: visible;
}
/* Les deux taches décoratives : jamais cliquables, pas de contenu. */
.glaz-hero-visual::before,
.glaz-hero-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.glaz-hero-visual::before {
  width: 200px;
  height: 200px;
  right: 24px;
  top: 24px;
  background: var(--glaz-yel);
  border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%;
}
/* La pastille rose remonte et se decale a droite : alignee en bas a gauche,
   elle formait avec la pastille jaune et le logo une diagonale que l'oeil
   suivait au lieu de lire le logo. */
.glaz-hero-visual::after {
  width: 90px;
  height: 90px;
  right: 8px;
  bottom: 64px;
  background: var(--glaz-pink);
  border-radius: 50%;
}
.glaz-hero-visual .wp-block-image {
  position: relative;
  z-index: 2;
  margin: 0;
}

/* ----- Bulles flottantes du héro -----
   Cercles décoratifs derrière le contenu, sur toute la largeur de la
   section. Discrets : peu nombreux, translucides, tailles variées. */
.glaz-hero {
  position: relative;
}
/* Le vrai contenu passe au-dessus des bulles. */
.glaz-hero > *:not(.glaz-bubbles) {
  position: relative;
  z-index: 1;
}
.glaz-bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.glaz-bubbles span {
  position: absolute;
  border-radius: 50%;
  animation: glaz-float 6s var(--glaz-bounce) infinite;
}
/* couleur · taille · position · rythme, une bulle par ligne */
.glaz-bubbles span:nth-child(1) { width: 70px; height: 70px; left: 3%;  top: 12%;  background: var(--glaz-yel);         opacity: 0.5;  animation-duration: 6s;   animation-delay: 0s; }
.glaz-bubbles span:nth-child(2) { width: 44px; height: 44px; left: 9%;  top: 66%;  background: var(--glaz-pink);        opacity: 0.6;  animation-duration: 7s;   animation-delay: 0.8s; }
.glaz-bubbles span:nth-child(3) { width: 26px; height: 26px; left: 23%; top: 30%;  background: var(--glaz-mint-bright); opacity: 0.5;  animation-duration: 5.5s; animation-delay: 0.3s; }
.glaz-bubbles span:nth-child(4) { width: 16px; height: 16px; left: 41%; top: 16%;  background: var(--glaz-coral);       opacity: 0.5;  animation-duration: 6.5s; animation-delay: 1.1s; }
.glaz-bubbles span:nth-child(5) { width: 20px; height: 20px; left: 34%; top: 80%;  background: var(--wp--preset--color--blue); opacity: 0.4; animation-duration: 7.5s; animation-delay: 0.5s; }
.glaz-bubbles span:nth-child(6) { width: 52px; height: 52px; left: 52%; top: 84%;  background: var(--glaz-mint);        opacity: 0.45; animation-duration: 6.8s; animation-delay: 0.2s; }
.glaz-bubbles span:nth-child(7) { width: 14px; height: 14px; left: 63%; top: 10%;  background: var(--glaz-yel);         opacity: 0.55; animation-duration: 6.2s; animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .glaz-bubbles span {
    animation: none !important;
  }
}

/* =================================================================
   BOUTONS (corail par défaut via theme.json)
   ================================================================= */

.wp-block-button__link {
  transition: transform 0.2s var(--glaz-bounce), box-shadow 0.2s ease;
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
}
.wp-block-button .wp-block-button__link:hover {
  box-shadow: 0 12px 26px -10px currentColor;
}
.wp-block-button.is-style-glaz-green .wp-block-button__link {
  background-color: var(--glaz-gd);
  color: var(--glaz-white);
}
.wp-block-button.is-style-glaz-yellow .wp-block-button__link {
  background-color: var(--glaz-yel);
  color: var(--glaz-ink);
}
.wp-block-button.is-style-glaz-white .wp-block-button__link {
  background-color: var(--glaz-white);
  color: var(--glaz-gd);
}
/* Contour : la variante sobre, celle qui fait respirer le fond blanc. */
.wp-block-button.is-style-glaz-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--glaz-gd);
  box-shadow: inset 0 0 0 1.5px var(--glaz-sage);
}
.wp-block-button.is-style-glaz-outline .wp-block-button__link:hover {
  box-shadow: inset 0 0 0 1.5px var(--glaz-gd);
}

/* =================================================================
   PILULES (occasions, et le bandeau « Niort » du héro)
   ================================================================= */

.is-style-glaz-pill {
  display: inline-block;
  font-family: var(--wp--preset--font-family--fredoka);
  padding: 13px 24px;
  font-size: 18px;
  border-radius: 999px;
  transition: transform 0.2s var(--glaz-bounce);
}
.is-style-glaz-pill:hover {
  transform: scale(1.08) rotate(-2deg);
}
/* Version compacte pour le sur-titre du héro */
.is-style-glaz-pill.glaz-pill-sm {
  padding: 9px 18px;
  font-size: 16px;
}
/* « Centrer » une pilule, c'est centrer la boîte, pas le texte dedans :
   sur un inline-block, text-align ne déplacerait rien. */
.is-style-glaz-pill.has-text-align-center {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* =================================================================
   ENCART PLAN D'ACCÈS
   ================================================================= */

.glaz-map {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
  border-radius: var(--glaz-radius-card);
  font-family: var(--wp--preset--font-family--fredoka);
}

/* =================================================================
   EN-TÊTE
   ================================================================= */

.glaz-nav a:not(.wp-block-button__link) {
  font-weight: 600;
  color: var(--glaz-ink);
}
.glaz-nav a:not(.wp-block-button__link):hover {
  color: var(--glaz-gd);
}

/* ----- Menu plein écran (mobile) -----
   L'overlay du bloc Navigation colle ses liens en haut à gauche, en petit.
   On le recentre et on passe les entrées en gros Fredoka. */
/* Le conteneur ouvert est une colonne flex : c'est lui qui centre, pas son
   contenu (sinon les liens restent calés en haut à gauche).
   Préfixe .glaz-nav : le CSS de core est chargé après le nôtre et gagnerait
   à spécificité égale. Un sélecteur de plus suffit, pas besoin d'!important. */
.glaz-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: clamp(28px, 8vw, 56px);
  background-color: var(--glaz-white);
  justify-content: center;
  align-items: center;
}
.glaz-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  width: 100%;
}
.glaz-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  width: 100%;
  align-items: center;
  gap: 8px;
}
.glaz-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--fredoka);
  /* Calé sur l'entrée la plus longue (« Comment ça marche ») : au-delà,
     sa pilule déborde de l'écran sur un téléphone étroit. */
  font-size: clamp(24px, 6.5vw, 36px);
  font-weight: 600;
  color: var(--glaz-ink);
  text-align: center;
  max-width: 100%;
  padding: 10px 22px;
  border-radius: 999px;
  transition: transform 0.2s var(--glaz-bounce), background-color 0.2s ease;
}
/* Chaque entrée prend une couleur de la palette au survol / à l'appui :
   c'est là que le menu devient « Glaz » et plus un simple empilement. */
.is-menu-open .wp-block-navigation-item:nth-child(5n + 1) .wp-block-navigation-item__content:where(:hover, :focus) {
  background-color: var(--glaz-mint-soft);
}
.is-menu-open .wp-block-navigation-item:nth-child(5n + 2) .wp-block-navigation-item__content:where(:hover, :focus) {
  background-color: var(--glaz-yel);
}
.is-menu-open .wp-block-navigation-item:nth-child(5n + 3) .wp-block-navigation-item__content:where(:hover, :focus) {
  background-color: var(--glaz-pink);
}
.is-menu-open .wp-block-navigation-item:nth-child(5n + 4) .wp-block-navigation-item__content:where(:hover, :focus) {
  background-color: var(--glaz-mint);
}
.is-menu-open .wp-block-navigation-item:nth-child(5n + 5) .wp-block-navigation-item__content:where(:hover, :focus) {
  background-color: var(--glaz-cream);
}
.is-menu-open .wp-block-navigation-item__content:where(:hover, :focus) {
  color: var(--glaz-gd);
  transform: rotate(-1.5deg) scale(1.04);
}
/* La croix de fermeture, à la taille du reste. */
.wp-block-navigation__responsive-container-close {
  padding: 12px;
  color: var(--glaz-gd);
}
.wp-block-navigation__responsive-container-close svg {
  width: 30px;
  height: 30px;
}

/* =================================================================
   PIED DE PAGE PARALLAX (conservé de la D3)
   ================================================================= */

/* Le fond etait sur l'encre (#013A32), c'est-a-dire la couleur de TEXTE : le
   pied de page n'etait donc pas du meme vert que les panneaux du site. Il prend
   le vert du nuancier, comme le grand panneau « Glaz, un lieu ou l'on vient ». */
.glaz-parallax {
  position: relative;
  background: var(--glaz-gd) url("../images/parallax-bg-mint.png") repeat center top / 1200px;
  background-attachment: fixed;
}
/* Voile qui attenue le motif de tasses. Il etait fige sur l'ancienne encre en
   rgba : il derive maintenant du meme vert que le fond, donc il suit la palette. */
.glaz-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--glaz-gd) 55%, transparent);
}
.glaz-parallax > * {
  position: relative;
  z-index: 1;
}
.glaz-parallax :where(h1, h2, h3, h4, p, li, span) {
  color: var(--glaz-white);
}
/* Les liens sont sortis du :where() ci-dessus. theme.json les cible avec
   « a:where(:not(.wp-element-button)) » : dans l'éditeur, cette règle passait
   devant notre spécificité nulle et les liens du pied de page restaient
   verts. On monte donc d'un cran, sans !important, et on vise aussi la
   classe du bloc Navigation. */
.glaz-parallax a:not(.wp-element-button),
.glaz-parallax .wp-block-navigation-item__content {
  color: var(--glaz-white);
}
.glaz-parallax a:not(.wp-element-button):hover,
.glaz-parallax .wp-block-navigation-item__content:hover {
  color: var(--glaz-mint);
}

/* ----- Lien Instagram du pied de page -----
   Le pictogramme reste aligne sur la ligne de base du texte, et l'ensemble
   forme un seul bloc insecable : le mot et l'icone ne se separent jamais. */
.glaz-insta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.glaz-insta img {
  width: 15px;
  height: 15px;
  display: block;
}

/* ----- Crédit de réalisation (pied de page) -----
   Discret par défaut, il se révèle au survol. */
.glaz-credit {
  margin-top: 26px;
  text-align: center;
  font-size: 12px;
}
.glaz-credit a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.glaz-credit a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.glaz-credit img {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: block;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */

.glaz-float {
  animation: glaz-float 5s var(--glaz-bounce) infinite;
  will-change: transform;
}
@keyframes glaz-float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-18px) rotate(2deg);
  }
}

/* Révélation au défilement. L'état caché n'est appliqué que si le
   JavaScript est actif : sans JS, le contenu reste visible. */
@media (scripting: enabled) {
  .glaz-reveal {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
    transition: opacity 0.6s ease, transform 0.6s var(--glaz-bounce);
    will-change: opacity, transform;
  }
}
.glaz-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Les pilules apparaissent une par une quand la section se révèle. */
.glaz-reveal.is-visible .is-style-glaz-pill {
  animation: glaz-pop 0.5s var(--glaz-bounce) both;
}
.glaz-reveal.is-visible .is-style-glaz-pill:nth-child(2) {
  animation-delay: 0.07s;
}
.glaz-reveal.is-visible .is-style-glaz-pill:nth-child(3) {
  animation-delay: 0.14s;
}
.glaz-reveal.is-visible .is-style-glaz-pill:nth-child(4) {
  animation-delay: 0.21s;
}
.glaz-reveal.is-visible .is-style-glaz-pill:nth-child(5) {
  animation-delay: 0.28s;
}
.glaz-reveal.is-visible .is-style-glaz-pill:nth-child(6) {
  animation-delay: 0.35s;
}
@keyframes glaz-pop {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(12px);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 781px) {
  /* La grande photo repasse au-dessus des deux petites. */
  .glaz-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: 260px 200px 200px;
  }
  .glaz-gallery > *:first-child {
    grid-row: auto;
  }
  .glaz-hero-visual {
    min-height: 320px;
  }
}

@media (max-width: 600px) {
  .glaz-parallax {
    background-attachment: scroll;
    background-size: 900px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .glaz-float,
  .glaz-reveal.is-visible .is-style-glaz-pill {
    animation: none !important;
  }
  .glaz-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .is-style-glaz-card,
  .is-style-glaz-pill,
  .wp-block-button__link {
    transition: none !important;
  }
}