/*
Theme Name: EIRA
Theme URI: https://eirawedding.com
Author: Onepilot
Description: Thème block (FSE) sur mesure pour EIRA Wedding — showroom privé de robes de mariée à louer ou à acheter à Villeneuve-le-Roi. Palette naturelle, hero vidéo, mise en avant photo, prise de rendez-vous.
Version: 1.55.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eira
Tags: full-site-editing, block-patterns, one-column, wide-blocks
*/

/* =========================================================
   EIRA — CSS custom
   Toutes les couleurs / typos viennent de theme.json
   (var(--wp--preset--color--xxx), var(--wp--preset--font-family--xxx))
   Documentation des classes : DESIGN-CLASSES.md
   ========================================================= */

:root {
  --eira-ease: cubic-bezier(.22, .61, .21, 1);
  --eira-nav-h: 82px;
}

img,
video {
  display: block;
  max-width: 100%;
}

.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* ---------------------------------------------------------
   Motion — reveal au scroll
   Les états masqués ne s'appliquent que si le script tourne
   (classe html.eira-anim) : sans JavaScript, et donc dans l'éditeur
   de blocs, la page s'affiche complète.
   --------------------------------------------------------- */
html.eira-anim .eira-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--eira-ease), transform 1.1s var(--eira-ease);
}

html.eira-anim .eira-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   En-tête
   --------------------------------------------------------- */
/* C'est l'élément de gabarit « En-tête » qui est collé en haut : le groupe
   intérieur ne fait que sa propre hauteur, un position:sticky posé dessus
   n'aurait rien pour se déplacer. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 120;
}

.eira-header {
  position: relative;
  background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 12%, transparent);
}

.eira-header .wp-block-site-logo img {
  max-height: 52px;
  width: auto;
}

.eira-header .wp-block-navigation {
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eira-header .wp-block-navigation-item__content {
  position: relative;
  padding-block: .35em;
  text-decoration: none;
}

.eira-header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--wp--preset--color--argile);
  transition: width .35s var(--eira-ease);
}

.eira-header .wp-block-navigation-item__content:hover::after {
  width: 100%;
}

.eira-header .wp-block-navigation .wp-block-navigation__submenu-container {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 12%, transparent);
  background: var(--wp--preset--color--blanc);
  letter-spacing: .12em;
}

/* Bouton de réservation permanent */
.eira-cta-nav .wp-block-button__link {
  padding: .85em 1.7em;
  font-size: .72rem;
  letter-spacing: .18em;
}

/* ---------------------------------------------------------
   Hero split — texte à gauche, vidéo portrait à droite
   --------------------------------------------------------- */
.eira-hero {
  min-height: calc(100vh - var(--eira-nav-h));
}

.eira-hero > .wp-block-columns,
.eira-hero .wp-block-columns {
  gap: 0 !important;
  min-height: calc(100vh - var(--eira-nav-h));
  align-items: stretch !important;
}

/* Les deux colonnes du hero font toujours la même hauteur. */
.eira-hero .wp-block-column {
  align-self: stretch !important;
}

/* Filet de séparation sous le hero. */
.eira-hero {
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--taupe) 45%, transparent);
}

.eira-hero__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5.5vw, 5.5rem);
}

/* Colonne média du hero : la vidéo (ou la photo) remplit toute la colonne. */
.eira-hero__media-col,
.eira-hero__media {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--sable);
  padding: 0 !important;
  min-height: 100%;
}

.eira-hero__media-col .wp-block-video,
.eira-hero__media-col .wp-block-image,
.eira-hero__media-col figure {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
}

.eira-hero__media-col video,
.eira-hero__media-col img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hauteur garantie dans l'éditeur, sans brider l'étirement sur le site. */
.eira-hero__media-col {
  min-height: clamp(360px, 60vh, calc(100vh - var(--eira-nav-h)));
  height: auto;
}

.eira-hero__eyebrow {
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--wp--preset--color--taupe);
  font-weight: 500;
}

.eira-hero__titre {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -.015em;
}

.eira-hero__titre em {
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
  color: var(--wp--preset--color--argile);
}

.eira-accroche {
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.75;
  color: var(--wp--preset--color--brun-doux);
  max-width: 34em;
}

@media (max-width: 880px) {
  .eira-hero > .wp-block-columns,
  .eira-hero {
    min-height: 0;
  }

  .eira-hero__media {
    aspect-ratio: 3 / 4;
    max-height: 78vh;
  }
}

/* Deux sections voisines de même teinte reçoivent un filet de séparation. */
.has-base-background-color + .has-base-background-color,
.has-ivoire-background-color + .has-ivoire-background-color,
.has-sable-background-color + .has-sable-background-color {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--taupe) 35%, transparent);
}

/* ---------------------------------------------------------
   Typographie de section
   --------------------------------------------------------- */
.eira-kicker {
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--wp--preset--color--argile);
  font-weight: 500;
}

.eira-surtitre {
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--wp--preset--color--brun-doux);
}

.eira-section-sub {
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--wp--preset--color--brun-doux);
  max-width: 44em;
}

/* ---------------------------------------------------------
   Cartes (atouts, offres, robes)
   --------------------------------------------------------- */
.eira-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.eira-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.eira-cards .eira-cta-bas {
  margin-top: auto;
}

.eira-card {
  background: var(--wp--preset--color--blanc);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 8%, transparent);
  transition: transform .5s var(--eira-ease), box-shadow .5s var(--eira-ease);
}

.eira-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--wp--preset--color--brun) 10%, transparent);
}

.eira-card__num {
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--wp--preset--color--taupe);
}

.eira-card__num::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: var(--wp--preset--color--taupe);
  margin: .9rem auto 0;
}

/* Bloc offre (À louer / À acheter) */
.eira-offre {
  background: var(--wp--preset--color--blanc);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 8%, transparent);
}

.eira-offre__infos {
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--wp--preset--color--brun-doux);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 10%, transparent);
  padding-top: 1.1rem;
}

/* Fiches robes */
.eira-robes-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}

.eira-robe-carte figure,
.eira-robe-carte .eira-robe-carte__media {
  display: block;          /* indispensable : sans cela le lien reste inline et l'image déborde */
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--wp--preset--color--beige);
  margin: 0;
}

.eira-robe-carte {
  display: flex;
  flex-direction: column;
}

.eira-robe-carte__media img {
  position: absolute;
  inset: 0;
}

.eira-robe-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--eira-ease);
}

.eira-robe-carte:hover img {
  transform: scale(1.05);
}

.eira-robe-carte__meta {
  padding-top: 1.4rem;
  text-align: center;
}

.eira-robe-carte__nom {
  font-family: var(--wp--preset--font-family--playfair);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0;
}

.eira-robe-carte__type {
  display: block;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wp--preset--color--taupe);
  font-weight: 500;
  margin: .55rem 0 0;
}

.eira-robe-carte__prix {
  display: block;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 1rem;
  color: var(--wp--preset--color--brun-doux);
  margin-top: .5rem;
}

.eira-robe-carte__prix del {
  color: var(--wp--preset--color--taupe);
  margin-right: .5em;
}

.eira-robe-carte__cta {
  margin: 1.1rem 0 0;
}

.eira-robe-carte__cta .wp-element-button {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .16em;
  padding: .85em 1.6em;
  line-height: 1.4;
}

@media (max-width: 880px) {
  .eira-robes-grille {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }
}

/* Titres de cartes : évite les coupures de mot inesthétiques en colonne étroite */
.eira-card h3,
.eira-offre h3 {
  font-size: clamp(1.15rem, 1.45vw, 1.4rem);
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.eira-offre h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}

/* ---------------------------------------------------------
   Bande photo avec panneau
   --------------------------------------------------------- */
.eira-bande {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.eira-bande__panneau {
  position: relative;
  z-index: 2;
  background: color-mix(in srgb, var(--wp--preset--color--base) 93%, transparent);
  max-width: 640px;
  text-align: center;
}

/* ---------------------------------------------------------
   Manifeste typographique
   --------------------------------------------------------- */
.eira-manifeste p {
  font-family: var(--wp--preset--font-family--playfair);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  margin: 0;
}

.eira-manifeste p + p {
  margin-top: .4em;
}

.eira-manifeste em {
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
  color: var(--wp--preset--color--argile);
}

/* ---------------------------------------------------------
   Pied de page
   --------------------------------------------------------- */
.eira-footer {
  font-size: .875rem;
}

.eira-footer a {
  text-decoration: none;
  color: inherit;
  transition: color .3s var(--eira-ease);
}

.eira-footer a:hover {
  color: var(--wp--preset--color--argile);
}

.eira-footer__titre {
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--wp--preset--color--taupe);
  font-weight: 600;
}

/* --- Footer compact (fond sable, 3 blocs, ligne légale) ---
   Option 3 validée : la bande des chiffres porte le terracotta, le pied de
   page reste dans le nude du site. Couleurs pilotées par theme.json. */
.eira-footer--compact {
  font-size: .875rem;
  color: var(--wp--preset--color--brun);
}

.eira-footer--compact .eira-footer__titre {
  color: color-mix(in srgb, var(--wp--preset--color--brun) 55%, transparent);
  margin-bottom: .6rem;
}

.eira-footer--compact .eira-footer__grille {
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  align-items: flex-start;
}

.eira-footer__bloc {
  max-width: 24rem;
}

.eira-footer__signature {
  font-family: var(--wp--preset--font-family--bodoni), serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--wp--preset--color--brun-doux);
  margin: .9rem 0 0;
}

.eira-footer__ligne p,
.eira-footer__contact-ligne {
  margin: 0 0 .35rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--wp--preset--color--brun) 85%, transparent);
}

.eira-footer__contact-ligne a {
  color: var(--wp--preset--color--brun);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 30%, transparent);
  padding-bottom: 1px;
}

.eira-footer__contact-ligne a:hover {
  color: var(--wp--preset--color--argile);
  border-bottom-color: var(--wp--preset--color--argile);
}

.eira-reseaux-inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: .5rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eira-footer__bas {
  margin-top: var(--wp--preset--spacing--40);
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--taupe) 60%, transparent);
}

.eira-footer__legal {
  margin: 0;
  font-size: .72rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--wp--preset--color--brun) 62%, transparent);
}

.eira-liens-legaux a {
  color: inherit;
  text-decoration: none;
}

.eira-liens-legaux a + a::before {
  content: " · ";
}

.eira-liens-legaux a:hover {
  color: var(--wp--preset--color--argile);
}

@media (max-width: 880px) {
  .eira-footer--compact .eira-footer__grille {
    gap: var(--wp--preset--spacing--40);
  }

  .eira-footer__bloc,
  .eira-footer__bloc--marque {
    max-width: none;
    flex-basis: 100%;
  }

}

/* ---------------------------------------------------------
   Bouton flottant mobile — retiré

   Le site n'a plus qu'un seul bandeau de réservation, celui de
   la classe .eira-stickycta (voir assets/css/design.css) : il
   apparaît une fois le premier écran passé et s'efface au-dessus
   du pied de page, sur toutes les pages. L'ancien .eira-sticky-cta
   restait affiché en permanence sur les pages intérieures.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Accessibilité — mouvement réduit
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  .eira-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------
   Fiche robe
   --------------------------------------------------------- */
.eira-robe-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .95rem;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 12%, transparent);
}

.eira-robe-specs li {
  padding: .7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 10%, transparent);
}

.eira-robe-specs strong {
  font-weight: 600;
  letter-spacing: .04em;
}

.eira-robe-mention {
  font-size: .9rem;
  color: var(--wp--preset--color--brun-doux);
  background: var(--wp--preset--color--ivoire);
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--wp--preset--color--argile);
}

.eira-robe-galerie img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---------------------------------------------------------
   FAQ en accordéon
   --------------------------------------------------------- */
.eira-faq .wp-block-details {
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 12%, transparent);
  padding: 0;
}

.eira-faq .wp-block-details summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2.2rem 1.1rem 0;
  position: relative;
  font-weight: 500;
  min-height: 44px;
  transition: color .3s var(--eira-ease);
}

.eira-faq .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.eira-faq .wp-block-details summary::after {
  content: "+";
  position: absolute;
  right: .2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--wp--preset--font-family--playfair);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--wp--preset--color--argile);
  transition: transform .3s var(--eira-ease);
}

.eira-faq .wp-block-details[open] summary::after {
  content: "−";
}

.eira-faq .wp-block-details summary:hover {
  color: var(--wp--preset--color--argile);
}

.eira-faq .wp-block-details p {
  padding-bottom: 1.2rem;
  margin-top: 0;
  color: var(--wp--preset--color--brun-doux);
  font-size: .95rem;
}

/* ---------------------------------------------------------
   Galerie du showroom
   --------------------------------------------------------- */
.eira-galerie-showroom img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Mobile first — le site est consulté majoritairement sur téléphone
   --------------------------------------------------------- */

/* Plus de réserve en bas de page : le bandeau « Réserver » s'efface dès
   qu'on descend et au-dessus du pied de page, il ne masque donc plus rien.
   La réserve, elle, laissait une bande vide sous le pied de page. */
@media (max-width: 880px) {
  /* Cibles tactiles : 44 px minimum, boutons pleine largeur. */
  .wp-block-button__link,
  .eira-robe-carte__cta .wp-element-button {
    display: block;
    width: 100%;
    min-height: 44px;
    text-align: center;
  }

  .wp-block-buttons {
    gap: .7rem;
    width: 100%;
  }

  .wp-block-buttons > .wp-block-button {
    width: 100%;
  }

  /* L'en-tête reste compact. */
  .eira-header {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
  }

  .eira-header .wp-block-site-logo img {
    max-height: 38px;
  }

  .eira-cta-nav .wp-block-button__link {
    padding: .7em 1.1em;
    font-size: .65rem;
    letter-spacing: .12em;
  }

  /* Hero : le texte respire, la vidéo garde un format portrait. */
  .eira-hero__texte {
    padding: 2.5rem 1.4rem 2.8rem;
  }

  .eira-hero__titre {
    font-size: clamp(2.1rem, 9vw, 2.9rem);
  }

  /* Galeries : deux colonnes maximum. */
  .eira-galerie-showroom,
  .eira-robe-galerie {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
  }

  .eira-galerie-showroom figure,
  .eira-robe-galerie figure {
    margin: 0;
    width: 100% !important;
  }

  /* Cartes : une seule colonne, pleine largeur. */
  .eira-cards > .wp-block-column,
  .eira-cards > .wp-block-column > .wp-block-group {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Rien ne dépasse horizontalement. */
  .wp-block-group,
  .wp-block-columns {
    overflow-wrap: break-word;
  }

  /* Les tableaux et blocs larges défilent dans leur propre cadre. */
  .wp-block-table,
  .wp-block-preformatted {
    overflow-x: auto;
    display: block;
    max-width: 100%;
  }
}

/* Deux robes par ligne sur les petits écrans larges, une seule sur téléphone. */
@media (min-width: 561px) and (max-width: 880px) {
  .eira-robes-grille {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

@media (max-width: 560px) {
  .eira-robes-grille {
    grid-template-columns: 1fr;
  }

  .eira-galerie-showroom,
  .eira-robe-galerie {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   COMPOSANTS ÉDITORIAUX
   Sections destinées aux pages intérieures : bandes photo,
   mosaïques, étapes numérotées, cadres décalés, marquee.
   ========================================================= */

/* ---------------------------------------------------------
   Bande d'ouverture de page : photo pleine largeur + titre
   --------------------------------------------------------- */
.eira-bande-hero {
  position: relative;
  overflow: hidden;
}

html.eira-anim .eira-bande-hero .wp-block-cover__image-background {
  transform: scale(1.06);
  transition: transform 2.4s var(--eira-ease);
}

html.eira-anim .eira-bande-hero.is-visible .wp-block-cover__image-background {
  transform: scale(1);
}

.eira-bande-hero__kicker {
  font-size: .7rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--wp--preset--color--beige);
  font-weight: 500;
}

.eira-bande-hero__titre {
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.015em;
}

.eira-bande-hero__titre em {
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
}

/* Filet qui se déploie sous un titre de section */
.eira-filet {
  position: relative;
  padding-bottom: 1.1rem;
}

.eira-filet::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 72px;
  background: var(--wp--preset--color--argile);
}

html.eira-anim .eira-filet::after {
  width: 0;
  transition: width 1.4s var(--eira-ease) .2s;
}

html.eira-anim .eira-filet.is-visible::after,
html.eira-anim .is-visible .eira-filet::after {
  width: 72px;
}

.has-text-align-center.eira-filet::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------------------------------------------------------
   Cadre décalé autour d'une photo (traitement éditorial)
   --------------------------------------------------------- */
.eira-cadre {
  position: relative;
  isolation: isolate;
}

html.eira-anim .eira-cadre::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 1.4rem;
  left: 1.4rem;
  right: -1.4rem;
  bottom: -1.4rem;
  border: 1px solid var(--wp--preset--color--taupe);
  opacity: 0;
  transform: translate(-12px, -12px);
  transition: opacity 1.2s var(--eira-ease) .3s, transform 1.2s var(--eira-ease) .3s;
}

html.eira-anim .eira-cadre.is-visible::before,
html.eira-anim .is-visible .eira-cadre::before {
  opacity: 1;
  transform: none;
}

.eira-cadre figure,
.eira-cadre img {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* ---------------------------------------------------------
   Photo qui se dézoome doucement à l'apparition
   --------------------------------------------------------- */
.eira-zoom {
  overflow: hidden;
}

html.eira-anim .eira-zoom img {
  transform: scale(1.08);
  transition: transform 2.2s var(--eira-ease);
}

html.eira-anim .eira-zoom.is-visible img,
html.eira-anim .is-visible .eira-zoom img {
  transform: scale(1);
}

/* ---------------------------------------------------------
   Mosaïque asymétrique de photos
   --------------------------------------------------------- */
.eira-mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: clamp(.5rem, 1.2vw, 1rem);
}

.eira-mosaique figure {
  margin: 0;
  overflow: hidden;
  height: 100%;
}

.eira-mosaique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--eira-ease);
}

.eira-mosaique figure:hover img {
  transform: scale(1.05);
}

.eira-mosaique figure:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.eira-mosaique figure:nth-child(4) {
  grid-column: span 2;
}

/* ---------------------------------------------------------
   Étapes numérotées reliées par un filet
   --------------------------------------------------------- */
.eira-etapes {
  position: relative;
  counter-reset: eira-etape;
}

.eira-etape {
  position: relative;
  padding-left: 4.5rem;
  padding-bottom: 2.6rem;
  counter-increment: eira-etape;
}

.eira-etape::before {
  content: counter(eira-etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -.15em;
  width: 3rem;
  text-align: center;
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--wp--preset--color--argile);
  background: inherit;
}

.eira-etape::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 2.2rem;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--wp--preset--color--taupe) 60%, transparent);
}

.eira-etape:last-child {
  padding-bottom: 0;
}

.eira-etape:last-child::after {
  display: none;
}

.eira-etape h3 {
  margin: 0 0 .4rem;
  font-size: 1.15rem;
}

.eira-etape p {
  margin: 0;
  color: var(--wp--preset--color--brun-doux);
  font-size: .95rem;
}

/* ---------------------------------------------------------
   Bandeau défilant (mots de la marque)
   --------------------------------------------------------- */
.eira-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 12%, transparent);
  padding-block: 1.1rem;
}

.eira-marquee p {
  display: inline-block;
  margin: 0;
  padding-right: 2rem;
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--wp--preset--color--taupe);
  animation: eiraDefile 38s linear infinite;
}

@keyframes eiraDefile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------
   Citation éditoriale de grande taille
   --------------------------------------------------------- */
.eira-citation {
  font-family: var(--wp--preset--font-family--playfair);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  color: var(--wp--preset--color--brun);
  max-width: 26em;
}

.eira-citation em {
  font-family: var(--wp--preset--font-family--bodoni);
  font-style: italic;
  color: var(--wp--preset--color--argile);
}

.eira-citation::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: var(--wp--preset--color--argile);
  margin-bottom: 1.6rem;
}

/* ---------------------------------------------------------
   Apparition en cascade des enfants d'une section
   --------------------------------------------------------- */
html.eira-anim .eira-cascade > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--eira-ease), transform .9s var(--eira-ease);
}

html.eira-anim .eira-cascade.is-visible > *:nth-child(1) { transition-delay: .05s; }
html.eira-anim .eira-cascade.is-visible > *:nth-child(2) { transition-delay: .17s; }
html.eira-anim .eira-cascade.is-visible > *:nth-child(3) { transition-delay: .29s; }
html.eira-anim .eira-cascade.is-visible > *:nth-child(4) { transition-delay: .41s; }
html.eira-anim .eira-cascade.is-visible > *:nth-child(5) { transition-delay: .53s; }
html.eira-anim .eira-cascade.is-visible > *:nth-child(6) { transition-delay: .65s; }

html.eira-anim .eira-cascade.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   Parallaxe légère (désactivée sur mobile et mouvement réduit)
   --------------------------------------------------------- */
@media (min-width: 881px) {
  .eira-parallax img {
    will-change: transform;
    transform: translate3d(0, var(--eira-shift, 0), 0) scale(1.08);
  }
}

/* ---------------------------------------------------------
   Cartes du journal
   --------------------------------------------------------- */
.eira-journal-carte {
  background: var(--wp--preset--color--blanc);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brun) 8%, transparent);
  overflow: hidden;
  transition: transform .5s var(--eira-ease), box-shadow .5s var(--eira-ease);
}

.eira-journal-carte:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--wp--preset--color--brun) 12%, transparent);
}

.eira-journal-carte .wp-block-post-featured-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.6s var(--eira-ease);
}

.eira-journal-carte:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}

.eira-journal-carte .wp-block-post-title,
.eira-journal-carte .wp-block-post-excerpt {
  padding-inline: 1.4rem;
}

.eira-journal-carte .wp-block-post-title {
  margin-top: 1.3rem;
}

.eira-journal-carte .wp-block-post-excerpt {
  padding-bottom: 1.6rem;
  color: var(--wp--preset--color--brun-doux);
}

/* ---------------------------------------------------------
   Adaptation mobile des composants éditoriaux
   --------------------------------------------------------- */
@media (max-width: 880px) {
  .eira-mosaique {
    grid-template-columns: repeat(2, 1fr);
  }

  .eira-mosaique figure:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .eira-mosaique figure:nth-child(4) {
    grid-column: span 2;
  }

  .eira-cadre::before {
    top: .8rem;
    left: .8rem;
    right: -.8rem;
    bottom: -.8rem;
  }

  .eira-etape {
    padding-left: 3.4rem;
    padding-bottom: 2rem;
  }

  .eira-etape::before {
    width: 2.2rem;
    font-size: 1.2rem;
  }

  .eira-etape::after {
    left: 1.1rem;
  }

  .eira-marquee p {
    animation-duration: 26s;
  }
}

/* =========================================================
   PROPORTIONS ET ORNEMENTS
   ========================================================= */

/* Blocs d'offre : titres et textes remis à l'échelle, pied de carte aligné. */
.eira-offre {
  display: flex;
  flex-direction: column;
}

.eira-offre h3 {
  font-size: clamp(1.1rem, 1.35vw, 1.35rem);
  line-height: 1.28;
  letter-spacing: .005em;
}

.eira-offre p:not(.eira-kicker):not(.eira-offre__infos) {
  font-size: .95rem;
  line-height: 1.72;
  color: var(--wp--preset--color--brun-doux);
}

.eira-offre__infos {
  margin-top: auto;
}

.eira-offre .wp-block-buttons {
  margin-top: 1.2rem;
}

/* Petites cartes : titres plus sobres. */
.eira-card h3 {
  font-size: clamp(1.02rem, 1.15vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: .01em;
}

.eira-card p {
  font-size: .875rem;
  line-height: 1.72;
}

/* ---------------------------------------------------------
   Icônes au trait
   --------------------------------------------------------- */
.eira-icone {
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto 1.1rem;
  color: var(--wp--preset--color--argile);
}

.eira-icone svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .6s var(--eira-ease);
}

.eira-card:hover .eira-icone svg {
  transform: translateY(-3px);
}

/* ---------------------------------------------------------
   Ornement décoratif (inspiré du monogramme)
   --------------------------------------------------------- */
.eira-ornement {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 1.6rem;
  color: var(--wp--preset--color--taupe);
}

.eira-ornement svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: .9;
  opacity: 0;
  transform: rotate(-12deg) scale(.85);
  transition: opacity 1.2s var(--eira-ease), transform 1.4s var(--eira-ease);
}

.is-visible .eira-ornement svg {
  opacity: 1;
  transform: none;
}

/* Sur-titre encadré de deux filets */
.eira-kicker--lignes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}

.eira-kicker--lignes::before,
.eira-kicker--lignes::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: color-mix(in srgb, var(--wp--preset--color--taupe) 70%, transparent);
}

/* Manifeste : cadre haut et bas pour donner du relief */
.eira-manifeste {
  border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--taupe) 40%, transparent);
  padding-block: clamp(2.2rem, 4vw, 3.4rem);
}

.eira-manifeste p {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

@media (max-width: 880px) {
  .eira-icone {
    width: 32px;
    height: 32px;
    margin-bottom: .8rem;
  }

  .eira-kicker--lignes::before,
  .eira-kicker--lignes::after {
    width: 24px;
  }
}

/* ---------------------------------------------------------
   En-tête sur petit écran
   Le menu déroulant natif de WordPress ne bascule qu'en dessous
   de 600 px : entre 600 et 900 px, les entrées débordaient de
   l'écran. On force le menu compact jusqu'à 900 px.
   --------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}

.eira-header > .wp-block-group {
  flex-wrap: nowrap;
  gap: 1rem;
}

@media (max-width: 900px) {
  .eira-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .eira-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  /* Le bouton « Réserver » du menu laisse la place au bouton flottant. */
  .eira-header .eira-cta-nav {
    display: none;
  }

  .eira-header .wp-block-site-logo img {
    max-height: 40px;
  }
}

/* Le menu mobile est un panneau latéral : voir la section
   « TIROIR DU MENU MOBILE » dans assets/css/design.css. */

/* ---------------------------------------------------------
   Marges latérales sur petit écran
   Sans réglage, les blocs contraints touchent les bords dès que
   l'écran est plus étroit que la largeur de contenu (fiches robes,
   articles, archives). Les sections pleine largeur, elles, gardent
   leur débord — leur mise en page interne gère déjà ses marges.
   --------------------------------------------------------- */
/* Marges latérales sur petits écrans.
   Le conteneur du contenu (.wp-block-post-content / .entry-content) n'est
   jamais rembourré : sinon les sections pleine largeur — vidéo d'ouverture,
   bandes photo — se retrouveraient encadrées de blanc. Ce sont les blocs
   « normaux » qui reçoivent les marges. */
@media (max-width: 1300px) {
  .wp-site-blocks > main > *:not(.alignfull):not(.wp-block-cover):not(.wp-block-post-content):not(.entry-content),
  .wp-site-blocks > main > .wp-block-post-content > *:not(.alignfull):not(.wp-block-cover):not(.wp-block-group),
  .wp-site-blocks > main > .entry-content > *:not(.alignfull):not(.wp-block-cover):not(.wp-block-group) {
    padding-inline: clamp(1.25rem, 5vw, 4.5rem);
    box-sizing: border-box;
  }
}

/* La fiche robe : photo et informations respirent aussi sur téléphone. */
@media (max-width: 880px) {
  .eira-offre__infos,
  .single .wp-block-columns {
    gap: 1.5rem;
  }

  .eira-robe-carte__media img {
    width: 100%;
  }
}